Merge pull request #75 from Team-inglo/feat/IGW-48/72

Feat/IGW-48/72 - 유저 타입별 nav bar 분기
Team-inglo · Oct 30, 2024 · 4ace55a · 4ace55a
2 parents f26520d + 5af900e
commit 4ace55a
Show file tree

Hide file tree

Showing 9 changed files with 169 additions and 82 deletions.
diff --git a/src/api/index.ts b/src/api/index.ts
@@ -49,7 +49,7 @@ function createInstance(type: string) {
     baseURL:
       type === 'kakao'
         ? import.meta.env.VITE_APP_KAKAO_API_BASE_URL
-        : import.meta.env.VITE_APP_API_URL,
+        : import.meta.env.VITE_APP_API_GIGGLE_API_BASE_URL,
   });
   return setInterceptors(instance, type);
 }

diff --git a/src/components/Common/Navbar.tsx b/src/components/Common/Navbar.tsx
@@ -1,52 +1,63 @@
 import { useLocation, useNavigate } from 'react-router-dom';
-import HomeIcon from '@/assets/icons/HomeIcon.svg?react';
-import SearchIcon from '@/assets/icons/NavSearchIcon.svg?react';
-import DocumentsIcon from '@/assets/icons/DocumentsIcon.svg?react';
-import ProfileIcon from '@/assets/icons/ProfileIcon.svg?react';
+import { useUserStore } from '@/store/user';
+import { UserType } from '@/constants/user';
+import { employerRoutes, userRoutes, guestRoutes } from '@/constants/routes';
 
 const Navbar = () => {
   const location = useLocation();
   const navigate = useNavigate();
+  const { account_type } = useUserStore();
 
   const getIconColor = (path: string) => {
     return location.pathname === path ? '#1E1926' : '#DCDCDC';
   };
 
-  const routes = [
-    {
-      path: '/',
-      svg: HomeIcon,
-    },
-    {
-      path: '/search',
-      svg: SearchIcon,
-    },
-    {
-      path: '/application',
-      svg: DocumentsIcon,
-    },
-    {
-      path: '/profile',
-      svg: ProfileIcon,
-    },
-  ];
-
   return (
     <div className="flex justify-center items-center z-50">
       <section className="fixed bottom-0 w-full py-6 px-12 bg-navbarGradient rounded-t-[2rem]">
         <div className="flex justify-between items-center">
-          {routes.map((route, index) => {
-            const IconComponent = route.svg;
-            return (
-              <button key={index} onClick={() => navigate(route.path)}>
-                {route.path == '/profile' ? (
-                  <IconComponent stroke={getIconColor(route.path)} />
-                ) : (
-                  <IconComponent fill={getIconColor(route.path)} />
-                )}
-              </button>
-            );
-          })}
+          {/* 유학생 유저일 경우 nav bar */}
+          {account_type === UserType.USER &&
+            userRoutes.map((route, index) => {
+              const IconComponent = route.svg;
+              return (
+                <button key={index} onClick={() => navigate(route.path)}>
+                  {route.path == '/profile' ? (
+                    <IconComponent stroke={getIconColor(route.path)} />
+                  ) : (
+                    <IconComponent fill={getIconColor(route.path)} />
+                  )}
+                </button>
+              );
+            })}
+          {/* 고용자 유저일 경우 nav bar */}
+          {account_type === UserType.OWNER &&
+            employerRoutes.map((route, index) => {
+              const IconComponent = route.svg;
+              return (
+                <button key={index} onClick={() => navigate(route.path)}>
+                  {route.path == '/employer/profile' ? (
+                    <IconComponent stroke={getIconColor(route.path)} />
+                  ) : (
+                    <IconComponent fill={getIconColor(route.path)} />
+                  )}
+                </button>
+              );
+            })}
+          {/* 비회원일 경우 nav bar */}
+          {account_type === undefined &&
+            guestRoutes.map((route, index) => {
+              const IconComponent = route.svg;
+              return (
+                <button key={index} onClick={() => navigate(route.path)}>
+                  {route.path == '/profile' ? (
+                    <IconComponent stroke={getIconColor(route.path)} />
+                  ) : (
+                    <IconComponent fill={getIconColor(route.path)} />
+                  )}
+                </button>
+              );
+            })}
         </div>
       </section>
     </div>

diff --git a/src/components/Information/InformationStep.tsx b/src/components/Information/InformationStep.tsx
@@ -13,6 +13,7 @@ import RadioButton from '@/components/Information/RadioButton';
 import { InputType } from '@/types/common/input';
 import BottomButtonPanel from '@/components/Common/BottomButtonPanel';
 import Button from '@/components/Common/Button';
+import { formatDateToDash } from '../../utils/editResume';
 
 const InformationStep = ({
   userInfo,
@@ -205,6 +206,8 @@ const InformationStep = ({
                   nationality: newUserInfo.nationality
                     ?.toUpperCase()
                     .replace(/\s/g, '_'),
+                  birth: formatDateToDash(newUserInfo.birth as string),
+                  visa: newUserInfo.visa?.replace(/-/g, '_'),
                 },
               })
             }

diff --git a/src/components/Signin/SigninInputSection.tsx b/src/components/Signin/SigninInputSection.tsx
@@ -31,7 +31,12 @@ const SigninInputSection = () => {
 
   // ====== Sign in API =======
   const handleSubmit = async () => {
-    signIn({ serial_id: idValue, password: passwordValue });
+    // signIn({ serial_id: idValue, password: passwordValue });
+    const formData = new FormData();
+    formData.append('serial_id', idValue);
+    formData.append('password', passwordValue);
+
+    signIn(formData);
   };
 
   // 모든 필드의 유효성 검사 후, Sign In 버튼 활성화

diff --git a/src/components/Splash/Splash.tsx b/src/components/Splash/Splash.tsx
@@ -65,6 +65,7 @@ const Splash = () => {
         } else {
           // UserTypeResponse가 정의되지 않은 경우
           setGuest();
+          return;
         }
       }
     } catch (error) {

diff --git a/src/constants/routes.ts b/src/constants/routes.ts
@@ -0,0 +1,61 @@
+import HomeIcon from '@/assets/icons/HomeIcon.svg?react';
+import SearchIcon from '@/assets/icons/NavSearchIcon.svg?react';
+import DocumentsIcon from '@/assets/icons/DocumentsIcon.svg?react';
+import ProfileIcon from '@/assets/icons/ProfileIcon.svg?react';
+
+export const userRoutes = [
+  {
+    path: '/',
+    svg: HomeIcon,
+  },
+  {
+    path: '/search',
+    svg: SearchIcon,
+  },
+  {
+    path: '/application',
+    svg: DocumentsIcon,
+  },
+  {
+    path: '/profile',
+    svg: ProfileIcon,
+  },
+];
+
+export const employerRoutes = [
+  {
+    path: '/',
+    svg: HomeIcon,
+  },
+  {
+    path: '/search',
+    svg: SearchIcon,
+  },
+  {
+    path: '/employer/post',
+    svg: DocumentsIcon,
+  },
+  {
+    path: '/employer/profile',
+    svg: ProfileIcon,
+  },
+];
+
+export const guestRoutes = [
+  {
+    path: '/',
+    svg: HomeIcon,
+  },
+  {
+    path: '/search',
+    svg: SearchIcon,
+  },
+  {
+    path: '/signin',
+    svg: DocumentsIcon,
+  },
+  {
+    path: '/signin',
+    svg: ProfileIcon,
+  },
+];
diff --git a/src/hooks/api/useAuth.ts b/src/hooks/api/useAuth.ts
@@ -27,8 +27,9 @@ import {
 } from '@/utils/auth';
 import { useNavigate } from 'react-router-dom';
 import { useMutation, useQuery } from '@tanstack/react-query';
-import { RESTYPE } from '@/types/api/common';
 import { useEmailTryCountStore } from '@/store/signup';
+import { useUserStore } from '@/store/user';
+import { RESTYPE } from '@/types/api/common';
 
 /**
  * 로그인 프로세스를 처리하는 커스텀 훅
@@ -60,11 +61,9 @@ export const useSignIn = () => {
   return useMutation({
     mutationFn: signIn,
     onSuccess: (data: RESTYPE<SignInResponse>) => {
-      if (data.success) {
-        setAccessToken(data.data.access_token);
-        setRefreshToken(data.data.refresh_token);
-        navigate('/splash');
-      }
+      setAccessToken(data.data.access_token);
+      setRefreshToken(data.data.refresh_token);
+      navigate('/splash');
     },
     onError: () => {
       navigate('/signin');
@@ -75,14 +74,18 @@ export const useSignIn = () => {
 // 1.2 사용자 로그아웃 훅
 export const useLogout = () => {
   const navigate = useNavigate();
+  const { updateAccountType, updateName } = useUserStore();
   return useMutation({
     mutationFn: logout,
-    onSuccess: (data: RESTYPE<null>) => {
-      if (data.success) {
-        deleteAccessToken();
-        deleteRefreshToken();
-        navigate('/splash');
-      }
+    onSuccess: () => {
+      // 토큰 삭제
+      deleteAccessToken();
+      deleteRefreshToken();
+      // 유저 타입 전역 변수 초기화
+      updateAccountType(undefined);
+      updateName('');
+      // 스플래시 이동
+      navigate('/splash');
     },
     onError: () => {
       navigate('/profile');
@@ -92,13 +95,13 @@ export const useLogout = () => {
 
 // 1.3 JWT 재발급 훅
 export const useReIssueToken = () => {
+  const navigate = useNavigate();
   return useMutation({
     mutationFn: reIssueToken,
     onSuccess: (data: RESTYPE<SignInResponse>) => {
-      if (data.success) {
-        setAccessToken(data.data.access_token);
-        setRefreshToken(data.data.refresh_token);
-      }
+      setAccessToken(data.data.access_token);
+      setRefreshToken(data.data.refresh_token);
+      navigate('/splash'); // 재발급 후 유형 확인
     },
   });
 };
@@ -131,10 +134,8 @@ export const useGetUserType = () => {
 export const useTempSignUp = () => {
   return useMutation({
     mutationFn: tempSignUp,
-    onSuccess: (data: RESTYPE<TempSignUpResponse>) => {
-      if (!data.success) {
-        console.log('임시 회원가입 실패 : ', data.error?.message);
-      }
+    onError: (error) => {
+      console.log('임시 회원가입 실패 : ', error.message);
     },
   });
 };
@@ -145,11 +146,9 @@ export const useSignUp = () => {
   return useMutation({
     mutationFn: signUp,
     onSuccess: (data: RESTYPE<SignInResponse>) => {
-      if (data.success) {
-        deleteTemporaryToken();
-        setAccessToken(data.data.access_token);
-        setRefreshToken(data.data.refresh_token);
-      }
+      deleteTemporaryToken();
+      setAccessToken(data.data.access_token);
+      setRefreshToken(data.data.refresh_token);
     },
     onError: () => {
       navigate('/');
@@ -163,10 +162,8 @@ export const usePatchAuthentication = () => {
   return useMutation({
     mutationFn: patchAuthentication,
     onSuccess: (data: RESTYPE<AuthenticationResponse>) => {
-      if (data.success) {
-        setTemporaryToken(data.data.temporary_token);
-        navigate('/information');
-      }
+      setTemporaryToken(data.data.temporary_token);
+      navigate('/information');
     },
     onError: (error) => {
       console.log(error);
@@ -181,10 +178,8 @@ export const useReIssueAuthentication = () => {
   return useMutation({
     mutationFn: reIssueAuthentication,
     onSuccess: (data: RESTYPE<TempSignUpResponse>) => {
-      if (data.success) {
-        // 이메일 재발송 횟수 업데이트
-        updateTryCnt(data.data.try_cnt);
-      }
+      // 이메일 재발송 횟수 업데이트
+      updateTryCnt(data.data.try_cnt);
     },
     onError: () => {
       navigate('/signup');
@@ -195,13 +190,18 @@ export const useReIssueAuthentication = () => {
 // 2.9 탈퇴하기 훅
 export const useWithdraw = () => {
   const navigate = useNavigate();
+  const { updateAccountType, updateName } = useUserStore();
   return useMutation({
     mutationFn: withdraw,
-    onSuccess: (data: RESTYPE<null>) => {
-      if (data.success) {
-        deleteAccessToken();
-        deleteRefreshToken();
-      }
+    onSuccess: () => {
+      // 토큰 삭제
+      deleteAccessToken();
+      deleteRefreshToken();
+      // 유저 타입 전역 변수 초기화
+      updateAccountType(undefined);
+      updateName('');
+      // 스플래시 이동
+      navigate('/splash');
     },
     onError: () => {
       navigate('/splash');