회원가입, 로그인 수정

src/pages/AllServicesPage/AllServicesPage.tsx

@@ -28,20 +28,19 @@ import { MenuItem } from './MenuItem';
 
 export const AllServicesPage = () => {
   const loginInfo = useLoginInfoStore((state) => state.loginInfo);
+  const myId = loginInfo?.id ? String(loginInfo?.id) : null;
+
   const navigate = useNavigate();
 
   const moveToPage = (pathName: string) => {
     navigate(pathName);
   };
 
-  const getMyId = (): string | null => {
-    if (!loginInfo?.id) {
-      return null;
+  const logout = () => {
+    if (myId) {
+      localStorage.removeItem('LOGIN_INFO_PERSIST');
+      localStorage.removeItem('ACCESS_TOKEN_PERSIST');
     }
-
-    const { id } = loginInfo;
-
-    return String(id);
   };
 
   return (
@@ -74,7 +73,7 @@ export const AllServicesPage = () => {
             icon={<Profile />}
             pageName="내 정보"
             onClickMenuItem={() =>
-              moveToPage(PATH_NAME.GET_PROFILE_PATH(getMyId() ?? '0'))
+              myId && moveToPage(PATH_NAME.GET_PROFILE_PATH(myId))
             }
           />
           <MenuItem icon={<Social />} pageName="소셜링" />
@@ -86,12 +85,14 @@ export const AllServicesPage = () => {
           <MenuItem
             icon={<Ball />}
             pageName="내가 참여한 게스트 매치"
-            onClickMenuItem={() => moveToPage(PATH_NAME.GAMES_PARTICIPATE)}
+            onClickMenuItem={() =>
+              myId && moveToPage(PATH_NAME.GAMES_PARTICIPATE)
+            }
           />
           <MenuItem
             icon={<Whistle />}
             pageName="내가 만든 게스트 매치"
-            onClickMenuItem={() => moveToPage(PATH_NAME.GAMES_HOST)}
+            onClickMenuItem={() => myId && moveToPage(PATH_NAME.GAMES_HOST)}
           />
         </FieldContainer>
         <FieldContainer>
@@ -101,20 +102,26 @@ export const AllServicesPage = () => {
           <MenuItem
             icon={<CrewManage />}
             pageName="내가 속한 크루"
-            onClickMenuItem={() => moveToPage(PATH_NAME.CREWS_PARTICIPATE)}
+            onClickMenuItem={() =>
+              myId && moveToPage(PATH_NAME.CREWS_PARTICIPATE)
+            }
           />
           <MenuItem
             icon={<CrewMember />}
             pageName="내가 만든 크루"
-            onClickMenuItem={() => moveToPage(PATH_NAME.CREWS_CHIEF)}
+            onClickMenuItem={() => myId && moveToPage(PATH_NAME.CREWS_CHIEF)}
           />
           <MenuItem icon={<Medal />} pageName="크루 랭킹" />
         </FieldContainer>
         <FieldContainer>
           <Text size="1rem" weight={700}>
             설정
           </Text>
-          <MenuItem icon={<Exit />} pageName="로그아웃" />
+          <MenuItem
+            icon={<Exit />}
+            pageName="로그아웃"
+            onClickMenuItem={logout}
+          />
         </FieldContainer>
       </Main>
     </AllServicesContainer>

src/pages/RedirectPage/RedirectPage.tsx

@@ -27,25 +27,26 @@ export const RedirectPage = () => {
   const { setLoginInfo } = useLoginInfoStore();
   const { setAccessToken } = useTokenStore();
 
-  const getLoginInfo = useCallback(async () => {
+  const fetchLoginInfo = useCallback(async () => {
     const { data } = await refetch();
 
     if (!data) {
       return;
     }
-    setLoginInfo(data);
-    setAccessToken(data.accessToken);
 
     if (isAuthenticated(data)) {
+      setLoginInfo(data);
+      setAccessToken(data.accessToken);
+
       navigate('/');
     } else {
-      navigate('/register');
+      navigate('/register', { state: data });
     }
   }, [navigate, refetch, setLoginInfo, setAccessToken]);
 
   useEffect(() => {
-    getLoginInfo();
-  }, [getLoginInfo]);
+    fetchLoginInfo();
+  }, [fetchLoginInfo]);
 
   return <div>로그인 중입니다.</div>;
 };

src/pages/RegisterPage/RegisterPage.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 
 import { LogoImage } from '@pages/LoginPage/LoginPage.style';
 
@@ -16,8 +17,6 @@ import { useRegistrationMutation } from '@hooks/mutations/useRegistrationMutatio
 
 import { theme } from '@styles/theme';
 
-import { useLoginInfoStore } from '@stores/loginInfo.store';
-
 import { Position } from '@type/models/Position';
 
 import { SEOUL } from '@consts/location';
@@ -26,6 +25,7 @@ import { POSITIONS_BUTTON } from '@consts/positions';
 
 import LOGO_SRC from '@assets/logoSvg.svg';
 
+// 1번 라인
 import {
   FieldContainer,
   Main,
@@ -36,7 +36,10 @@ import {
 
 export const RegisterPage = () => {
   const navigate = useNavigate();
-  const loginInfo = useLoginInfoStore((state) => state.loginInfo);
+
+  const { state } = useLocation();
+  const loginInfo = state;
+
   if (!loginInfo) {
     throw new Error('no login info available');
   }
@@ -65,10 +68,12 @@ export const RegisterPage = () => {
   const submitRegistration = () => {
     const { email, nickname, profileImageUrl, oauthId, oauthProvider } =
       loginInfo;
+
     if (!selectedLocation) {
       window.alert('지역을 선택해주세요');
       return;
     }
+
     mutate({
       email,
       nickname,