Merge pull request #67 from kakao-tech-campus-2nd-step3/Develop

6주차 개발 목록

.github/workflows/deploy.yml

@@ -2,7 +2,7 @@ name: S3 deploy
 
 on:
   push:
-    branches: ['Master']
+    branches: ['Weekly']
 env:
   AWS_REGION: ap-northeast-2
   S3_BUCKET_NAME: sinitto

src/app/routes/index.tsx

@@ -1,8 +1,11 @@
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
 import { RouterPath } from './path';
-import MainPage from '@/pages/common/main';
-import RegisterPage from '@/pages/common/register';
+import MainPage from '@/pages/common/main/MainPage';
+import { RedirectPage } from '@/pages/common/redirect';
+import RegisterPage from '@/pages/common/register/RegisterPage';
+import GuideLinePage from '@/pages/guard/guide-line';
+import GuardMyPage from '@/pages/guard/mypage';
 import SeniorRegisterPage from '@/pages/guard/register';
 import SinittoReviewPage from '@/pages/guard/review';
 import ServiceHistoryPage from '@/pages/guard/service-history';
@@ -12,72 +15,61 @@ import SinittoGuideLinePage from '@/pages/sinitto/guide-line';
 import HelloCallListPage from '@/pages/sinitto/hello-call/hello-call-list';
 import HelloCallReportPage from '@/pages/sinitto/hello-call/hello-call-report';
 import HelloCallServicePage from '@/pages/sinitto/hello-call/hello-call-service';
-import MyPage from '@/pages/sinitto/mypage';
+import SinittoMypage from '@/pages/sinitto/mypage';
+import { Layout } from '@/shared/components';
 
 const router = createBrowserRouter([
   {
     path: RouterPath.ROOT,
     element: <MainPage />,
   },
   {
-    path: RouterPath.REGISTER,
-    element: <RegisterPage />,
-  },
-  {
-    path: RouterPath.MYPAGE,
-    element: <MyPage />,
-  },
-  {
-    path: RouterPath.SERVICE_HISTORY,
-    element: <ServiceHistoryPage />,
-  },
-  {
-    path: RouterPath.HELLO_CALL,
-    children: [
-      {
-        index: true,
-        element: <HelloCallListPage />,
-      },
-      {
-        path: RouterPath.HELLO_CALL_SERVICE,
-        element: <HelloCallServicePage />,
-      },
-      {
-        path: RouterPath.HELLO_CALL_REPORT,
-        element: <HelloCallReportPage />,
-      },
-    ],
-  },
-  {
-    path: RouterPath.SENIOR_REGISTER,
-    element: <SeniorRegisterPage />,
-  },
-  {
-    path: RouterPath.CALL_BACK_LIST,
+    path: RouterPath.ROOT,
+    element: <Layout />,
     children: [
+      { path: RouterPath.SIGNUP, element: <RegisterPage /> },
+      { path: RouterPath.REDIRECT, element: <RedirectPage /> },
+      { path: RouterPath.SINITTO_MYPAGE, element: <SinittoMypage /> },
+      { path: RouterPath.GUARD_MYPAGE, element: <GuardMyPage /> },
+      { path: RouterPath.GUARD_GUIDELINE, element: <GuideLinePage /> },
+      { path: RouterPath.SERVICE_HISTORY, element: <ServiceHistoryPage /> },
       {
-        index: true,
-        element: <CallBackListPage />,
-      },
-      {
-        path: RouterPath.CALL_BACK_DETAIL,
+        path: RouterPath.HELLO_CALL,
         children: [
+          { index: true, element: <HelloCallListPage /> },
           {
-            index: true,
-            element: <CallBackDetailPage />,
+            path: RouterPath.HELLO_CALL_SERVICE,
+            element: <HelloCallServicePage />,
           },
           {
-            path: RouterPath.CALL_BACK_GUID_LINE,
-            element: <SinittoGuideLinePage />,
+            path: RouterPath.HELLO_CALL_REPORT,
+            element: <HelloCallReportPage />,
           },
         ],
       },
+      { path: RouterPath.SENIOR_REGISTER, element: <SeniorRegisterPage /> },
+      {
+        path: RouterPath.CALL_BACK_LIST,
+        children: [
+          { index: true, element: <CallBackListPage /> },
+          {
+            path: RouterPath.CALL_BACK_DETAIL,
+            children: [
+              { index: true, element: <CallBackDetailPage /> },
+              {
+                path: RouterPath.CALL_BACK_GUID_LINE,
+                element: <SinittoGuideLinePage />,
+              },
+            ],
+          },
+        ],
+      },
+      {
+        path: RouterPath.SINITTO_REVIEW,
+        element: <SinittoReviewPage />,
+      },
     ],
   },
-  {
-    path: RouterPath.SINITTO_REVIEW,
-    element: <SinittoReviewPage />,
-  },
 ]);
 
 export const Routes = () => {

src/app/routes/path.ts

@@ -1,8 +1,12 @@
 export const RouterPath = {
   ROOT: '/',
   LOGIN: '/login',
+  SIGNUP: '/signup',
   REGISTER: '/register',
-  MYPAGE: `/mypage`,
+  REDIRECT: '/redirection',
+  GUARD_MYPAGE: `/guard/mypage`,
+  GUARD_GUIDELINE: `/guard/guideline`,
+  SINITTO_MYPAGE: `/sinitto/mypage`,
   SERVICE_HISTORY: `/service-history`,
   HELLO_CALL_SERVICE: 'service',
   HELLO_CALL_REPORT: 'report',

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

@@ -1,13 +1,18 @@
+import { Link } from 'react-router-dom';
+
 import Logo from '../../assets/kakao.svg';
+import { KAKAO_AUTH_URL } from '@/shared/constants';
 import { Image, Text } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 
 const LoginButton = () => {
   return (
-    <KakaoLoginButton>
-      <Image src={Logo} alt='kakao-icon' />
-      <Text fontWeight='500'>카카오톡 로그인</Text>
-    </KakaoLoginButton>
+    <Link to={KAKAO_AUTH_URL}>
+      <KakaoLoginButton>
+        <Image src={Logo} alt='kakao-icon' />
+        <Text fontWeight='500'>카카오톡 로그인</Text>
+      </KakaoLoginButton>
+    </Link>
   );
 };
 

src/pages/common/redirect/RedirectPage.tsx

@@ -0,0 +1,16 @@
+import { useLocation } from 'react-router-dom';
+
+import { RedirectSection } from './components';
+
+const RedirectPage = () => {
+  const location = useLocation();
+
+  const code = new URLSearchParams(location.search).get('code');
+  if (!code) {
+    return <div>로그인을 다시 진행해주세요.</div>;
+  }
+
+  return <RedirectSection code={code} />;
+};
+
+export default RedirectPage;

src/pages/common/redirect/components/index.ts

@@ -0,0 +1 @@
+export * from './redirect-section';

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

@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { useGetKakaoCallback } from '../../store/hooks';
+import { Flex, Spinner, Text } from '@chakra-ui/react';
+
+type Props = {
+  code: string;
+};
+
+const RedirectSection = ({ code }: Props) => {
+  const navigate = useNavigate();
+
+  const { data } = useGetKakaoCallback(code);
+
+  useEffect(() => {
+    if (data) {
+      const accessToken = data.accessToken;
+      const refreshToken = data.refreshToken;
+      localStorage.setItem('accessToken', accessToken);
+      localStorage.setItem('refreshToken', refreshToken);
+
+      navigate('/');
+    }
+  }, [data, navigate]);
+
+  return (
+    <Flex
+      justifyContent='center'
+      alignItems='center'
+      flexDirection='column'
+      height='100vh'
+      gap='2rem'
+    >
+      <Spinner />
+      <Text>로그인 진행중!</Text>
+    </Flex>
+  );
+};
+
+export default RedirectSection;

src/pages/common/redirect/components/redirect-section/index.ts

@@ -0,0 +1 @@
+export { default as RedirectSection } from './RedirectSection';

src/pages/common/redirect/index.ts

@@ -0,0 +1 @@
+export { default as RedirectPage } from './RedirectPage';

src/pages/common/redirect/store/api/index.ts

@@ -0,0 +1 @@
+export { getKakaoCallback } from './kakao-callback.api';

src/pages/common/redirect/store/api/kakao-callback.api.ts

@@ -0,0 +1,26 @@
+import { fetchInstance } from '@/shared/api/instance';
+
+export type KakaoCallbackResponse = {
+  accessToken: string;
+  refreshToken: string;
+  redirectUrl: string;
+  email: string;
+  isSinitto: boolean;
+  isMember: boolean;
+};
+
+const getKakaoCallbackPath = () => '/api/auth/oauth/kakao/callback';
+
+export const KakaoCallbackQueryKey = [getKakaoCallbackPath()];
+
+export const getKakaoCallback = async (
+  code: string
+): Promise<KakaoCallbackResponse> => {
+  const response = await fetchInstance.get(getKakaoCallbackPath(), {
+    params: {
+      code,
+    },
+  });
+  console.log(response.data);
+  return response.data;
+};

src/pages/common/redirect/store/hooks/index.ts

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

src/pages/common/redirect/store/hooks/useGetKakaoCallback.ts

@@ -0,0 +1,13 @@
+import {
+  getKakaoCallback,
+  KakaoCallbackQueryKey,
+  KakaoCallbackResponse,
+} from '../api/kakao-callback.api';
+import { useQuery } from '@tanstack/react-query';
+
+export const useGetKakaoCallback = (code: string) => {
+  return useQuery<KakaoCallbackResponse, Error>({
+    queryKey: [KakaoCallbackQueryKey, code],
+    queryFn: () => getKakaoCallback(code),
+  });
+};

src/pages/common/register/index.tsx → src/pages/common/register/RegisterPage.tsx

@@ -1,11 +1,10 @@
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 
-import { RegisterFields } from './components/register-fields';
-import { RegisterType } from './components/register-type';
-import { Tos } from './components/tos';
+import useRegister from './api/hooks/useRegister';
+import { RegisterFields, RegisterType, Tos } from './components';
 import { FormValues } from './types';
-import { BasicButton } from '@/shared/components/common/button';
+import { BasicButton } from '@/shared/components';
 import { Divider } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 
@@ -17,13 +16,26 @@ const RegisterPage = () => {
     formState: { errors },
   } = useForm<FormValues>();
 
+  // 회원가입 처리
+  const mutation = useRegister();
+
   const handleUserType = (id: string) => {
     setUserType(id);
   };
 
   const onSubmit = (data: FormValues) => {
-    // 회원가입 api
-    console.log(userType, data);
+    // request 에 맞게 데이터 병합
+    const isSinitto = userType === 'sinitto';
+
+    const requestData = {
+      name: data.name,
+      phoneNumber: data.phoneNumber,
+      email: '[email protected]', // 임시 (카카오 로그인 후 넘겨받기)
+      isSinitto,
+    };
+    console.log(requestData);
+    // 회원가입 API 호출
+    mutation.mutate(requestData);
   };
 
   return (

src/pages/common/register/api/hooks/index.ts

@@ -0,0 +1 @@
+export { default as useRegister } from './useRegister';

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

@@ -0,0 +1,47 @@
+import { useNavigate } from 'react-router-dom';
+
+import { AxiosError } from 'axios';
+
+import { RouterPath } from '@/app/routes/path';
+import {
+  SignupApiResponse,
+  registerUser,
+} from '@/shared/api/auth/user-register';
+import { authLocalStorage } from '@/shared/utils/storage';
+import { useMutation } from '@tanstack/react-query';
+
+const useRegister = () => {
+  const navigate = useNavigate();
+
+  const handleSuccess = (data: SignupApiResponse) => {
+    if ('status' in data && data.status === 207) {
+      alert(data.detail);
+    } else {
+      console.log(data);
+      if ('accessToken' in data) {
+        authLocalStorage.set(data.accessToken);
+        authLocalStorage.set(data.refreshToken);
+        alert('회원가입이 완료되었습니다.');
+        navigate(data.isSinitto === 'true' ? RouterPath.ROOT : RouterPath.ROOT);
+      }
+    }
+  };
+
+  const handleError = (error: AxiosError) => {
+    if (error.response && error.response.data) {
+      alert('회원가입 중 오류가 발생했습니다.');
+    } else {
+      alert('회원가입 중 네트워크 오류가 발생했습니다.');
+    }
+  };
+
+  const mutation = useMutation({
+    mutationFn: registerUser,
+    onSuccess: handleSuccess,
+    onError: handleError,
+  });
+
+  return mutation;
+};
+
+export default useRegister;

src/pages/common/register/api/index.ts

@@ -0,0 +1 @@
+export * from './hooks';

src/pages/common/register/components/index.ts

@@ -0,0 +1,6 @@
+export * from './register-fields';
+export * from './register-fields/form-fields';
+export * from './register-type';
+export * from './register-type/type-button';
+export * from './tos';
+export * from './tos/content';

src/pages/common/register/components/register-fields/index.tsx → src/pages/common/register/components/register-fields/RegisterFields.tsx

@@ -1,7 +1,7 @@
 import { FieldErrors, UseFormRegister } from 'react-hook-form';
 
 import type { FormValues } from '../../types';
-import { FormField } from './form-fileds';
+import { FormField } from './form-fields';
 import styled from '@emotion/styled';
 
 type Props = {

src/pages/common/register/components/register-fields/form-fields/index.ts

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

src/pages/common/register/components/register-fields/index.ts

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