[코드리뷰] 9주차 작업

.github/workflows/ci.yml

@@ -1,4 +1,4 @@
-name: ESLint test
+name: ESLint & Build Test
 
 on:
   pull_request:
@@ -16,6 +16,11 @@ jobs:
       - name: Checkout Code
         uses: actions/checkout@v4
 
+      - name: Install NodeJs
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
       - name: Install Pnpm package manager
         run: |
           npm install -g pnpm
@@ -25,3 +30,6 @@ jobs:
 
       - name: Lint Code
         run: pnpm lint
+
+      - name: Build Test
+        run: pnpm run build

.github/workflows/deploy.yml

@@ -16,9 +16,6 @@ jobs:
     steps:
       - name: Checkout source code.
         uses: actions/checkout@master
-        with: 
-          submodules: true
-          token: ${{ secrets.ACTION_TOKEN }}
 
       - name: Cache node modules
         uses: actions/cache@v4
@@ -47,7 +44,7 @@ jobs:
         run: pnpm lint
 
       - name: Build
-        run: CI='' pnpm run build
+        run: pnpm run build
 
       - name: Configure AWS credentials
         uses: aws-actions/configure-aws-credentials@v4

.prettierignore

@@ -2,3 +2,5 @@ node_modules
 .vscode
 .github
 dist
+
+pnpm-lock.yaml

.prettierrc.json

@@ -24,18 +24,9 @@
 
     "<THIRD_PARTY_MODULES>",
 
-    "^@components/(.*)$",
+    "^@app/(.*)$",
     "^@pages/(.*)$",
-    "^@hooks/(.*)$",
-    "^@assets/(.*)$",
-
-    "^@constants/(.*)$",
-    "^@utils/(.*)$",
-    "^@api/(.*)$",
-    "^@types/(.*)$",
-    "^@store/(.*)$",
-
-    "^@styles/(.*)$",
+    "^@shared/(.*)$",
 
     "^(.*)/(.*)$"
   ],

package.json

@@ -18,6 +18,7 @@
     "@tanstack/react-query": "^5.51.11",
     "axios": "^1.7.5",
     "date-fns": "^4.1.0",
+    "dayjs": "^1.11.13",
     "msw": "^2.3.5",
     "react": "^18.3.1",
     "react-datepicker": "^7.4.0",

src/App.tsx

@@ -2,8 +2,9 @@ import { Routes } from '@/app/routes';
 import {
   AllSeniorInfoProvider,
   queryClient,
-  AuthProvider,
+  UserEmailProvider,
   globalStyle,
+  SinittoInfoProvider,
 } from '@/shared';
 import { ChakraProvider } from '@chakra-ui/react';
 import { Global } from '@emotion/react';
@@ -14,10 +15,12 @@ const App = () => {
     <ChakraProvider>
       <QueryClientProvider client={queryClient}>
         <AllSeniorInfoProvider>
-          <AuthProvider>
-            <Global styles={globalStyle} />
-            <Routes />
-          </AuthProvider>
+          <SinittoInfoProvider>
+            <UserEmailProvider>
+              <Global styles={globalStyle} />
+              <Routes />
+            </UserEmailProvider>
+          </SinittoInfoProvider>
         </AllSeniorInfoProvider>
       </QueryClientProvider>
     </ChakraProvider>

src/app/routes/path.ts

@@ -18,4 +18,6 @@ export const RouterPath = {
   CALL_BACK_GUID_LINE: `:guideLineId`,
   SENIOR_REGISTER: `/senior-register`,
   SINITTO_REVIEW: `review`,
+
+  DUMMY_LOGIN: `/dummy`,
 };

src/app/routes/router.tsx

@@ -14,11 +14,13 @@ import {
   HelloCallReportPage,
   SeniorRegisterPage,
   CallBackListPage,
-  CallBackDetailPage, // SinittoGuideLinePage,
+  CallBackDetailPage,
+  SinittoGuideLinePage,
   SinittoReviewPage,
   HelloCallApplyPage,
   GuardMainPage,
   SinittoMainPage,
+  DummyRedirectPage,
 } from '@/pages';
 import { Layout } from '@/shared/components';
 
@@ -46,6 +48,16 @@ export const router = createBrowserRouter([
       },
     ],
   },
+  {
+    path: RouterPath.DUMMY_LOGIN,
+    element: <Layout title='더미 로그인 Redirect' />,
+    children: [
+      {
+        index: true,
+        element: <DummyRedirectPage />,
+      },
+    ],
+  },
   {
     path: RouterPath.GUARD,
     children: [
@@ -147,11 +159,26 @@ export const router = createBrowserRouter([
           },
           {
             path: RouterPath.CALL_BACK_DETAIL,
-            element: <Layout title='요청 상세페이지' />,
             children: [
               {
-                index: true,
-                element: <CallBackDetailPage />,
+                path: '',
+                element: <Layout title='요청 상세페이지' />,
+                children: [
+                  {
+                    index: true,
+                    element: <CallBackDetailPage />,
+                  },
+                ],
+              },
+              {
+                path: RouterPath.CALL_BACK_GUID_LINE,
+                element: <Layout title='요청 상세페이지' />,
+                children: [
+                  {
+                    index: true,
+                    element: <SinittoGuideLinePage />,
+                  },
+                ],
               },
             ],
           },

src/pages/common/dummy-redirect/DummyRedirectPage.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { RouterPath } from '@/app/routes';
+import { Box, Text, Spinner, Heading } from '@chakra-ui/react';
+
+export const DummyRedirectPage = () => {
+  const [statusMessage, setStatusMessage] = useState(
+    '유저 정보를 기다리고 있습니다...'
+  );
+  const [isLoading, setIsLoading] = useState(true);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+
+    const accessToken = params.get('accessToken');
+    const refreshToken = params.get('refreshToken');
+    const isSinitto = params.get('isSinitto');
+
+    if (accessToken && refreshToken && isSinitto) {
+      // 로컬 스토리지에 토큰 저장
+      localStorage.setItem('accessToken', accessToken);
+      localStorage.setItem('refreshToken', refreshToken);
+      localStorage.setItem('isSinitto', isSinitto);
+
+      // isSinitto 상태에 따른 메시지 설정
+      setStatusMessage(
+        isSinitto === 'true'
+          ? '시니또 더미데이터로 로그인 중입니다. 페이지 이동 중...'
+          : '보호자 더미데이터로 로그인 중입니다. 페이지 이동 중...'
+      );
+
+      setTimeout(() => {
+        setIsLoading(false); // 로딩 완료
+        navigate(isSinitto === 'true' ? RouterPath.SINITTO : RouterPath.GUARD);
+      }, 2000);
+    } else {
+      console.error('Access or Refresh token not found in query parameters.');
+      setStatusMessage('[ERROR] 토큰이 존재하지 않습니다.');
+
+      setIsLoading(false);
+    }
+  }, [navigate]);
+
+  return (
+    <Box textAlign='center' mt='50px'>
+      <Heading as='h1' size='lg' mb='1rem'>
+        더미데이터 로그인
+      </Heading>
+      <Text fontSize='lg'>{statusMessage}</Text>
+      {(isLoading || statusMessage === '유저 정보를 기다리고 있습니다...') && (
+        <Spinner size='lg' mt='1rem' />
+      )}
+    </Box>
+  );
+};

src/pages/common/dummy-redirect/index.ts

@@ -0,0 +1 @@
+export { DummyRedirectPage } from './DummyRedirectPage';

src/pages/common/index.ts

@@ -1,3 +1,4 @@
+export * from './dummy-redirect';
 export * from './main';
 export * from './redirect';
 export * from './register';

src/pages/common/main/components/login-button/LoginButton.tsx

@@ -1,13 +1,15 @@
 import { Link } from 'react-router-dom';
 
-import Logo from '../../assets/kakao.svg';
-import { KAKAO_AUTH_URL } from '@/shared/utils/env/config';
+import Logo from '@/pages/assets/main/kakao.svg';
+import { BASE_URI } from '@/shared/api';
 import { Image, Text } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 
 const LoginButton = () => {
+  const KAKAO_LOGIN = `${BASE_URI}/api/auth/oauth/kakao`;
+
   return (
-    <Link to={KAKAO_AUTH_URL}>
+    <Link to={KAKAO_LOGIN}>
       <KakaoLoginButton>
         <Image src={Logo} alt='kakao-icon' />
         <Text fontWeight='500'>카카오톡 로그인</Text>

src/pages/common/main/components/review-box/ReviewBox.tsx

@@ -1,4 +1,4 @@
-import StarIcon from '../../assets/star-icon.svg';
+import StarIcon from '@/pages/assets/main/star-icon.svg';
 import { Box, Image, Text } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 

src/pages/common/redirect/RedirectPage.tsx

@@ -6,6 +6,7 @@ const RedirectPage = () => {
   const location = useLocation();
 
   const code = new URLSearchParams(location.search).get('code');
+
   if (!code) {
     return <div>로그인을 다시 진행해주세요.</div>;
   }

src/pages/common/redirect/components/redirect-section/RedirectSection.tsx

@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { RouterPath } from '@/app/routes/path';
 import { useGetKakaoCallback } from '@/pages';
-import { useAuth } from '@/shared';
+import { useUserEmail } from '@/shared';
 import { Flex, Spinner, Text } from '@chakra-ui/react';
 
 type Props = {
@@ -13,7 +13,7 @@ type Props = {
 const RedirectSection = ({ code }: Props) => {
   const navigate = useNavigate();
 
-  const { setEmail } = useAuth();
+  const { setEmail } = useUserEmail();
 
   const { data } = useGetKakaoCallback(code);
 

src/pages/common/register/RegisterPage.tsx

@@ -4,9 +4,7 @@ import { useForm } from 'react-hook-form';
 import { RegisterFields, RegisterType, Tos } from './components';
 import { useRegister } from './store/hooks';
 import { FormValues } from './types';
-import { parsePhoneNumber } from '@/shared';
-import { BasicButton } from '@/shared/components';
-import { useAuth } from '@/shared/provider/auth/Auth';
+import { BasicButton, parsePhoneNumber, useUserEmail } from '@/shared';
 import { Divider } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 
@@ -22,7 +20,7 @@ const RegisterPage = () => {
   // 회원가입 처리
   const mutation = useRegister();
 
-  const { email } = useAuth();
+  const { email } = useUserEmail();
 
   const handleUserType = (id: string) => {
     setUserType(id);

src/pages/common/register/store/hooks/useRegister.ts

@@ -4,7 +4,7 @@ import { AxiosError } from 'axios';
 
 import { registerUser, SignupApiResponse } from '../api';
 import { RouterPath } from '@/app/routes/path';
-import { authLocalStorage } from '@/shared/utils/storage';
+import { authStorage } from '@/shared/utils/storage';
 import { useMutation } from '@tanstack/react-query';
 
 const useRegister = () => {
@@ -16,10 +16,10 @@ const useRegister = () => {
     } else {
       console.log(data);
       if ('accessToken' in data) {
-        authLocalStorage.set(data.accessToken);
-        authLocalStorage.set(data.refreshToken);
+        authStorage.accessToken.set(data.accessToken);
+        authStorage.refreshToken.set(data.refreshToken);
         alert('회원가입이 완료되었습니다.');
-        navigate(data.isSinitto === 'true' ? RouterPath.ROOT : RouterPath.ROOT);
+        navigate(data.isSinitto ? RouterPath.SINITTO : RouterPath.GUARD);
       }
     }
   };