[feat/CK-136] 로그인 유지와 UI 버그를 해결한다

client/src/App.tsx

@@ -16,45 +16,50 @@ import ToastProvider from '@components/_common/toastProvider/ToastProvider';
 import GoalRoomListPage from './pages/goalRoomListPage/GoalRoomListPage';
 import GoalRoomCreatePage from './pages/goalRoomCreatePage/GoalRoomCreatePage';
 import MyPage from '@pages/myPage/MyPage';
+import UserInfoProvider from './components/_providers/UserInfoProvider';
 
 const App = () => {
   return (
     <ThemeProvider theme={theme}>
       <GlobalStyle />
-
-      <ToastProvider>
-        <BrowserRouter>
-          <ResponsiveContainer>
-            <PageLayout>
-              <Routes>
-                <Route path='/' element={<RoadmapListPage />} />
-                <Route path='/login' element={<LoginPage />} />
-                <Route path='/join' element={<SignUpPage />} />
-                <Route path='/roadmap-list' element={<RoadmapListPage />} />
-                <Route
-                  path='/roadmap/:id'
-                  element={
-                    <Suspense fallback={<Fallback />}>
-                      <RoadmapDetailPage />
-                    </Suspense>
-                  }
-                />
-                <Route path='/roadmap/:id/goalroom-list' element={<GoalRoomListPage />} />
-                <Route path='/roadmap-create' element={<RoadmapCreatePage />} />
-                <Route
-                  path='/roadmap/:id/goalroom-create'
-                  element={<GoalRoomCreatePage />}
-                />
-                <Route
-                  path='/goalroom-dashboard/:goalroomId'
-                  element={<GoalRoomDashboardPage />}
-                />
-                <Route path='/myPage' element={<MyPage />} />
-              </Routes>
-            </PageLayout>
-          </ResponsiveContainer>
-        </BrowserRouter>
-      </ToastProvider>
+      <UserInfoProvider>
+        <ToastProvider>
+          <BrowserRouter>
+            <ResponsiveContainer>
+              <PageLayout>
+                <Routes>
+                  <Route path='/' element={<RoadmapListPage />} />
+                  <Route path='/login' element={<LoginPage />} />
+                  <Route path='/join' element={<SignUpPage />} />
+                  <Route path='/roadmap-list' element={<RoadmapListPage />} />
+                  <Route
+                    path='/roadmap/:id'
+                    element={
+                      <Suspense fallback={<Fallback />}>
+                        <RoadmapDetailPage />
+                      </Suspense>
+                    }
+                  />
+                  <Route
+                    path='/roadmap/:id/goalroom-list'
+                    element={<GoalRoomListPage />}
+                  />
+                  <Route path='/roadmap-create' element={<RoadmapCreatePage />} />
+                  <Route
+                    path='/roadmap/:id/goalroom-create'
+                    element={<GoalRoomCreatePage />}
+                  />
+                  <Route
+                    path='/goalroom-dashboard/:goalroomId'
+                    element={<GoalRoomDashboardPage />}
+                  />
+                  <Route path='/myPage' element={<MyPage />} />
+                </Routes>
+              </PageLayout>
+            </ResponsiveContainer>
+          </BrowserRouter>
+        </ToastProvider>
+      </UserInfoProvider>
     </ThemeProvider>
   );
 };

client/src/apis/user.ts

@@ -14,6 +14,8 @@ export const login = (body: UserLoginRequest) => {
   return client.post<UserLoginResponse>('/auth/login', body);
 };
 
-export const getUserInfo = () => {
-  return client.get<UserInfoResponse>('/members/me');
+export const getUserInfo = (signal?: AbortSignal) => {
+  return client.get<UserInfoResponse>('/members/me', {
+    signal,
+  });
 };

client/src/components/_common/navBar/NavBar.tsx

@@ -1,7 +1,6 @@
 import SVGIcon from '@components/icons/SVGIcon';
 import * as S from './NavBar.styles';
 import { useUserInfoContext } from '@components/_providers/UserInfoProvider';
-import useValidationCheck from '@hooks/user/useValidationCheck';
 import isValidUserInfo from '@utils/user/isValidUserInfo';
 import { BASE_URL } from '@apis/axios/client';
 
@@ -10,7 +9,6 @@ type NavBarProps = {
 };
 
 const NavBar = ({ isSwitchOn }: NavBarProps) => {
-  useValidationCheck();
   const { userInfo } = useUserInfoContext();
 
   return (

client/src/components/_common/roadmapItem/RoadmapItem.styles.ts

@@ -36,6 +36,9 @@ export const RoadmapTitle = styled.div`
 export const Description = styled.div`
   ${({ theme }) => theme.fonts.description5}
   margin: 1.6rem 0 3rem 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 
 export const ItemExtraInfos = styled.div`

client/src/components/_common/roadmapItem/RoadmapItem.tsx

@@ -57,7 +57,6 @@ const RoadmapItem = ({ item, hasBorder = true, roadmapId }: RoadmapItemProps) =>
           {item.tags.map((tag) => {
             return <span># {tag.name}</span>;
           })}
-
         </S.Tags>
       </S.ItemFooter>
     </S.RoadmapItem>

client/src/components/_providers/UserInfoProvider.tsx

@@ -1,6 +1,7 @@
-import { createContext, PropsWithChildren, useContext, useState } from 'react';
+import { createContext, PropsWithChildren, useContext } from 'react';
 import { UserInfoResponse } from '@myTypes/user/remote';
 import { UserInfoContextType } from '@myTypes/_common/user';
+import { useIdentifyUser } from '@/hooks/_common/useIdentifyUser';
 
 export const defaultUserInfo: UserInfoResponse = {
   id: null,
@@ -18,7 +19,7 @@ export const userInfoContext = createContext<UserInfoContextType>({
 });
 
 const UserInfoProvider = ({ children }: PropsWithChildren) => {
-  const [userInfo, setUserInfo] = useState<UserInfoResponse>(defaultUserInfo);
+  const { userInfo, setUserInfo } = useIdentifyUser();
 
   return (
     <userInfoContext.Provider value={{ userInfo, setUserInfo }}>

client/src/components/goalRoomListPage/goalRoomList/goalRoomList.styles.ts

@@ -32,6 +32,7 @@ export const ListWrapper = styled.div`
   display: grid;
   grid-row-gap: 6rem;
   grid-template-columns: repeat(2, 1fr);
+  min-height: 100vh;
 
   ${media.mobile`
   grid-template-columns: repeat(1, 1fr);

client/src/components/roadmapListPage/roadmapList/RoadmapList.styles.ts

@@ -1,12 +1,19 @@
+import media from '@/styles/media';
 import styled from 'styled-components';
 
 export const RoadmapList = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  row-gap: 3rem;
-  justify-content: space-around;
+  display: grid;
+  grid-gap: 3rem;
+  grid-template-columns: 1fr 1fr;
+  justify-items: center;
 
   margin-bottom: 8rem;
+  min-height: 100vh;
+
+  ${media.mobile`
+  grid-template-columns: 1fr;
+
+  `}
 `;
 
 export const CreateRoadmapButton = styled.button`

client/src/components/roadmapListPage/roadmapList/RoadmapList.tsx

@@ -18,7 +18,7 @@ const RoadmapList = ({ selectedCategoryId }: RoadmapListProps) => {
 
   return (
     <S.RoadmapList aria-label='로드맵 목록'>
-      {roadmapList?.map((item) => (
+      {roadmapList.map((item) => (
         <RoadmapItem key={item.roadmapId} item={item} roadmapId={item.roadmapId} />
       ))}
       <S.CreateRoadmapButton onClick={moveRoadmapCreatePage}>

client/src/hooks/_common/useIdentifyUser.ts

@@ -0,0 +1,46 @@
+import { getUserInfo } from '@/apis/user';
+import { UserInfoResponse } from '@/myTypes/user/remote';
+import { getCookie } from '@/utils/_common/cookies';
+import { useEffect, useState } from 'react';
+
+export const defaultUserInfo: UserInfoResponse = {
+  id: null,
+  nickname: '',
+  profileImageUrl: '',
+  gender: null,
+  identifier: '',
+  phoneNumber: '',
+  birthday: '',
+};
+
+export const useIdentifyUser = () => {
+  const [userInfo, setUserInfo] = useState(defaultUserInfo);
+
+  useEffect(() => {
+    const fetchController = new AbortController();
+    const { signal } = fetchController;
+
+    const fetchUserInfo = async () => {
+      try {
+        const accessToken = getCookie('access_token');
+
+        if (!accessToken) return;
+
+        const userInfo = (await getUserInfo(signal)).data;
+
+        setUserInfo(userInfo);
+      } catch (e) {
+        // 실패시 로직
+      }
+    };
+
+    fetchUserInfo();
+
+    return () => fetchController.abort();
+  }, []);
+
+  return {
+    userInfo,
+    setUserInfo,
+  };
+};

client/src/hooks/queries/user.ts

@@ -5,10 +5,10 @@ import {
   UserLoginRequest,
 } from '@myTypes/user/remote';
 import { getUserInfo, login, signUp } from '@apis/user';
-import { setCookie } from '@utils/_common/cookies';
 import useToast from '@hooks/_common/useToast';
-import { useUserInfoContext } from '@components/_providers/UserInfoProvider';
+import { useUserInfoContext } from '@/components/_providers/UserInfoProvider';
 import { AxiosResponse } from 'axios';
+import { setCookie } from '@/utils/_common/cookies';
 
 export const useSignUp = () => {
   const { mutate } = useMutation(