feat: 옵션페이지 약관페이지 추가

Author: CreatorDodo

src/layouts/PolicyShowLayout.tsx

@@ -0,0 +1,20 @@
+import { FC, ReactNode } from 'react';
+import HistoryBackButton from '@/components/common/HistoryBackButton';
+
+interface Props {
+  children: ReactNode;
+  title: string;
+}
+
+const PolicyShowLayout: FC<Props> = ({ children, title }) => {
+  return (
+    <main className={'relative m-auto h-screen w-fit p-8'}>
+      <HistoryBackButton />
+      <h2 className="my-5 text-xl font-semibold">{title}</h2>
+      {/* <div className="card h-5/6 max-w-5xl bg-white">{children}</div> */}
+      <div className="card h-3/4 max-w-5xl bg-white">{children}</div>
+    </main>
+  );
+};
+
+export default PolicyShowLayout;

src/layouts/UseTermsShowLayout.tsx

@@ -0,0 +1,20 @@
+import { FC, ReactNode } from 'react';
+import HistoryBackButton from '@/components/common/HistoryBackButton';
+
+interface Props {
+  children: ReactNode;
+  title: string;
+}
+
+const UseTermsShowLayout: FC<Props> = ({ children, title }) => {
+  return (
+    <main className={'relative m-auto h-screen w-fit p-8'}>
+      <HistoryBackButton />
+      <h2 className="my-5 text-xl font-semibold">{title}</h2>
+      {/* <div className="card h-5/6 max-w-5xl bg-white">{children}</div> */}
+      <div className="card h-3/4 max-w-5xl bg-white">{children}</div>
+    </main>
+  );
+};
+
+export default UseTermsShowLayout;

src/main.tsx

@@ -71,11 +71,11 @@ const router = createBrowserRouter([
         children: [
           {
             path: 'personalInfo',
-            element: <Policy.PersonalInfoPage />,
+            element: <Policy.PersonalInfoShowPage />,
           },
           {
             path: 'usecondition',
-            element: <Policy.UseConditionPage />,
+            element: <Policy.UseConditionShowPage />,
           },
         ],
       },

src/pages/Policy/PersonalInfoShowPage.tsx

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import PolicyShowLayout from '@/layouts/PolicyShowLayout';
+import PolicyPersonalInfo from '../../components/Policy/PolicyPersonalInfo';
+
+const PersonalInfoShowPage: FC = () => {
+  return (
+    <PolicyShowLayout title="개인정보 처리방침">
+      <PolicyPersonalInfo />
+    </PolicyShowLayout>
+  );
+};
+
+export default PersonalInfoShowPage;

src/pages/Policy/UseConditionShowPage.tsx

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import PolicyUseCondition from '../../components/Policy/PolicyUseCondition';
+import UseTermsShowLayout from '@/layouts/UseTermsShowLayout';
+
+const UseConditionShowPage: FC = () => {
+  return (
+    <UseTermsShowLayout title="전자상거래 표준약관">
+      <PolicyUseCondition />
+    </UseTermsShowLayout>
+  );
+};
+
+export default UseConditionShowPage;

src/pages/Policy/index.ts

@@ -1,4 +1,4 @@
-import PersonalInfoPage from './PersonalInfoPage';
-import UseConditionPage from './UseConditionPage';
+import PersonalInfoShowPage from './PersonalInfoShowPage';
+import UseConditionShowPage from './UseConditionShowPage';
 
-export { PersonalInfoPage, UseConditionPage };
+export { PersonalInfoShowPage, UseConditionShowPage };