feat #13 약관 페이지

src/Router.tsx

@@ -29,6 +29,10 @@ import InitAccessRights from './pages/Auth/components/Init/components/initAccess
 import Submitted from './pages/Goods/components/Submitted';
 import Profile from './pages/Mypage/components/Profile';
 import Edit from './pages/Mypage/components/EditProfile';
+import InitAgreement from './pages/Auth/components/Init/components/initAgreement';
+import ServiceAgreement from './pages/Auth/components/Init/components/ServiceAgreement';
+import PrivacyAgreement from './pages/Auth/components/Init/components/PrivacyAgreement';
+import MarketingAgreement from './pages/Auth/components/Init/components/MarketingAgreement';
 
 export default function Router() {
   // recoil state로 access roles 관리
@@ -70,6 +74,15 @@ export default function Router() {
             { path: 'user', element: <InitUser /> },
             // { path: 'address', element: <InitAddress /> },
             { path: 'image', element: <InitProfileImage /> },
+            {
+              path: 'agreement',
+              children: [
+                { index: true, element: <InitAgreement /> },
+                { path: 'service', element: <ServiceAgreement /> },
+                { path: 'privacy', element: <PrivacyAgreement /> },
+                { path: 'Marketing', element: <MarketingAgreement /> },
+              ],
+            },
           ],
           loader: () => {
             if (!auth.accessToken) return redirect('/auth/login');

src/pages/Auth/components/Init/components/MarketingAgreement.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function MarketingAgreement() {
+  return (
+    <div className="flex h-full flex-col justify-between px-4 py-6">
+      MarketingAgreement
+    </div>
+  );
+}

src/pages/Auth/components/Init/components/PrivacyAgreement.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function PrivacyAgreement() {
+  return (
+    <div className="flex h-full flex-col justify-between px-4 py-6">
+      PrivacyAgreement
+    </div>
+  );
+}

src/pages/Auth/components/Init/components/ServiceAgreement.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function ServiceAgreement() {
+  return (
+    <div className="flex h-full flex-col justify-between px-4 py-6">
+      ServiceAgreement
+    </div>
+  );
+}

src/pages/Auth/components/Init/components/initAccessRights.tsx

@@ -1,6 +1,6 @@
-import Camera from '@src/asset/icon/initAccess/camera.svg';
-import SaveArea from '@src/asset/icon/initAccess/saveArea.svg';
-import Position from '@src/asset/icon/initAccess/position.svg';
+import Camera from '@src/asset/icon/init/camera.svg';
+import SaveArea from '@src/asset/icon/init/saveArea.svg';
+import Position from '@src/asset/icon/init/position.svg';
 import NextButton from '@src/components/NextButton';
 
 export default function InitAccessRights() {

src/pages/Auth/components/Init/components/initAddress.tsx

@@ -47,7 +47,8 @@ export default function InitAddress() {
 
   useEffect(() => {
     // 잘못된 요청 방지
-    if (!initUser.nickname) navigate('/auth/init');
+    if (!initUser.nickname && !initUser.agreement[1] && !initUser.agreement[2])
+      navigate('/auth/init');
   }, []);
 
   return (

src/pages/Auth/components/Init/components/initAgreement.tsx

@@ -0,0 +1,105 @@
+import React, { useEffect } from 'react';
+import { Link, useNavigate, useOutletContext } from 'react-router-dom';
+import NextButton from '@src/components/NextButton';
+import Checked from '@src/asset/icon/init/checked.svg';
+import Unchecked from '@src/asset/icon/init/unchecked.svg';
+import { InitContextType } from '../index.d';
+
+const titles = [
+  { value: '약관에 모두 동의합니다.', link: '' },
+  { value: '(필수) 서비스 이용 약관', link: 'service' },
+  { value: '(필수) 개인정보 처리 방침', link: 'privacy' },
+  { value: '(선택) 마케팅 수신동의', link: 'marketing' },
+];
+
+export default function InitAgreement() {
+  const navigate = useNavigate();
+  const { initUser, setInitUser } = useOutletContext<InitContextType>();
+
+  const agreeData = initUser.agreement.map((item, idx) => ({
+    title: titles[idx].value,
+    link: titles[idx].link,
+    checked: item,
+  }));
+
+  const handleCheck = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const idx = Number(e.target.value);
+    // toggle
+    if (idx === 0)
+      setInitUser((prev) => ({
+        ...prev,
+        agreement: new Array(4).fill(!prev.agreement[0]),
+      }));
+    else
+      setInitUser((prev) => {
+        const newArr = [...prev.agreement];
+        newArr[idx] = !newArr[idx];
+        return { ...prev, agreement: newArr };
+      });
+  };
+
+  useEffect(() => {
+    let value = false;
+    if (initUser.agreement[1] && initUser.agreement[2] && initUser.agreement[3])
+      value = true;
+
+    setInitUser((prev) => {
+      const newArr = [...prev.agreement];
+      newArr[0] = value;
+      return { ...prev, agreement: newArr };
+    });
+  }, [initUser.agreement[1], initUser.agreement[2], initUser.agreement[3]]);
+
+  useEffect(() => {
+    // 잘못된 요청 방지
+    if (!initUser.nickname) navigate('/auth/init');
+  }, []);
+
+  return (
+    <div className="flex h-full flex-col justify-between px-4 py-6">
+      <div>
+        <div className="pb-12 pt-[33%] text-xl font-semibold">
+          지구미에 오신 것을 환영합니다.
+        </div>
+
+        <div className="flex flex-col gap-4">
+          {agreeData.map((item, idx) => (
+            <React.Fragment key={item.title}>
+              <label htmlFor={item.title} className="flex items-center gap-2">
+                <img
+                  src={item.checked ? Checked : Unchecked}
+                  alt={`약관${idx}`}
+                />
+                <input
+                  type="checkbox"
+                  checked={item.checked}
+                  value={idx}
+                  onChange={handleCheck}
+                  id={item.title}
+                  className="hidden"
+                />
+                <div>
+                  <span>{item.title}</span>
+                  {idx !== 0 && (
+                    <Link
+                      className="px-1 py-2 text-sm text-zinc-600 underline"
+                      to={`/auth/init/agreement/${item.link}`}
+                    >
+                      자세히 보기
+                    </Link>
+                  )}
+                </div>
+              </label>
+              <div className={idx === 0 ? 'h-[1px] bg-zinc-300' : ''} />
+            </React.Fragment>
+          ))}
+        </div>
+      </div>
+
+      <NextButton
+        isDisabled={!(initUser.agreement[1] && initUser.agreement[2])}
+        linkTo="/auth/init/image"
+      />
+    </div>
+  );
+}

src/pages/Auth/components/Init/components/initUser.tsx

@@ -65,7 +65,10 @@ export default function InitUser() {
         </div>
         <div className={`py-3 text-xs ${getTextColor()}`}>{alertText}</div>
       </div>
-      <NextButton isDisabled={!valid || !isSuccess} linkTo="/auth/init/image" />
+      <NextButton
+        isDisabled={!valid || !isSuccess}
+        linkTo="/auth/init/agreement"
+      />
     </div>
   );
 }

src/pages/Auth/components/Init/index.d.ts

@@ -5,6 +5,7 @@ export type InitUserType = {
   position: PositionType | undefined;
   image: string | undefined;
   submitUser?: () => void;
+  agreement: boolean[];
 };
 
 export type InitContextType = {

src/pages/Auth/components/Init/index.tsx

@@ -9,6 +9,7 @@ export default function Init() {
     nickname: '',
     position: undefined,
     image: undefined,
+    agreement: new Array(4).fill(false),
   });
   const location = useLocation();