Merge pull request #362 from woowacourse-teams/feature/#326

로그인 kakao o auth
woowacourse-teams · Aug 16, 2024 · 1175db0 · 1175db0
2 parents 7b276fd + 5946bdb
commit 1175db0
Show file tree

Hide file tree

Showing 11 changed files with 218 additions and 42 deletions.
diff --git a/frontend/src/apis/auth.ts b/frontend/src/apis/auth.ts
@@ -7,3 +7,11 @@ export const login = async (loginInputInfo: { nickname: string }) => {
   );
   return response.json();
 };
+
+export const kakaoOAuth = async (code: string) => {
+  const response = await ApiClient.postWithoutAuth('auth/kakao/oauth', {
+    code,
+  });
+  console.log(response);
+  return response.json();
+};
diff --git a/frontend/src/components/Icons/KakaoOAuthIcon.tsx b/frontend/src/components/Icons/KakaoOAuthIcon.tsx
@@ -0,0 +1,21 @@
+export default function KakaoOAuthLoginIcon() {
+  return (
+    <svg
+      width="269"
+      height="49"
+      viewBox="0 0 269 49"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="269" height="49" rx="16" fill="#FEE500" />
+      <path
+        d="M108.531 18.75C108.516 22.875 107.25 26.5469 102.141 29.0625L101.328 27.9531C103.859 26.7109 105.367 25.2031 106.203 23.4219L101.625 23.8594L101.406 22.5781L106.656 22.2188C106.867 21.5078 106.992 20.75 107.047 19.9531H102.141V18.75H108.531ZM112.156 17.3281V22.9219H114.328V24.1406H112.156V31.3125H110.672V17.3281H112.156ZM122.359 18.75C122.344 22.875 121.078 26.5469 115.969 29.0625L115.156 27.9531C117.688 26.7109 119.195 25.2031 120.031 23.4219L115.453 23.8594L115.234 22.5781L120.484 22.2188C120.695 21.5078 120.82 20.75 120.875 19.9531H115.969V18.75H122.359ZM125.984 17.3281V22.9219H128.156V24.1406H125.984V31.3125H124.5V17.3281H125.984ZM135.281 18.1719C138.281 18.1875 140.453 19.6562 140.453 21.8906C140.453 23.9922 138.633 25.375 136.016 25.5938V28.3438H141.719V29.5781H128.906V28.3438H134.547V25.5938C131.945 25.375 130.125 23.9922 130.125 21.8906C130.125 19.6562 132.297 18.1875 135.281 18.1719ZM135.281 19.3906C133.125 19.375 131.562 20.375 131.562 21.8906C131.562 23.4688 133.125 24.4375 135.281 24.4531C137.453 24.4375 139.016 23.4688 139.016 21.8906C139.016 20.375 137.453 19.375 135.281 19.3906ZM155.547 28.4062V29.6562H142.734V28.4062H148.375V25.9531H144.297V21.5H152.516V19.5312H144.266V18.3125H153.984V22.6875H145.766V24.7344H154.312V25.9531H149.844V28.4062H155.547ZM165.609 20.8906C165.594 23.4531 167.141 26.0156 169.312 26.9844L168.422 28.1562C166.812 27.3906 165.539 25.8203 164.891 23.9062C164.234 25.9531 162.945 27.6484 161.266 28.4688L160.359 27.2188C162.562 26.2344 164.109 23.5625 164.109 20.8906V18.5H165.609V20.8906ZM172.062 17.3281V31.3594H170.578V17.3281H172.062ZM179.188 19.8438C179.188 21.625 180.422 23.3281 182.562 24.0469L181.812 25.2031C180.227 24.6562 179.062 23.5625 178.453 22.1875C177.844 23.7031 176.633 24.8906 174.984 25.4688L174.188 24.3125C176.375 23.5625 177.688 21.7656 177.703 19.8281V19.4531H174.625V18.25H182.203V19.4531H179.188V19.8438ZM185.297 17.3281V20.9219H187.328V22.1719H185.297V25.7656H183.812V17.3281H185.297ZM185.297 26.4531V31.3281H183.812V27.6562H176.047V26.4531H185.297ZM199.031 17.3281V23H201.281V24.2344H199.031V31.3281H197.562V17.3281H199.031ZM196.344 19.5156V20.7344H188.047V19.5156H191.5V17.5156H192.984V19.5156H196.344ZM192.25 21.7656C194.25 21.7656 195.719 23.1094 195.734 25.0156C195.719 26.9375 194.25 28.2656 192.25 28.2812C190.234 28.2656 188.766 26.9375 188.766 25.0156C188.766 23.1094 190.234 21.7656 192.25 21.7656ZM192.25 22.9844C191.062 22.9844 190.172 23.8125 190.188 25.0156C190.172 26.2344 191.062 27.0469 192.25 27.0312C193.438 27.0469 194.312 26.2344 194.312 25.0156C194.312 23.8125 193.438 22.9844 192.25 22.9844ZM213.594 17.3281V31.3281H212.094V17.3281H213.594ZM209.422 18.8281C209.422 22.9219 207.672 26.4844 202.875 28.7812L202.094 27.5781C205.82 25.8047 207.633 23.2812 207.922 20.0156H202.766V18.8281H209.422Z"
+        fill="black"
+      />
+      <path
+        d="M65.7309 13.3334C59.4425 13.3334 54.3333 17.4667 54.3333 22.5334C54.3333 25.7334 56.4294 28.5334 59.4425 30.2667L58.6565 34.6667L63.5037 31.4667C64.1588 31.6 64.9448 31.6 65.5998 31.6C71.8882 31.6 76.9975 27.4667 76.9975 22.4C77.1285 17.4667 72.0192 13.3334 65.7309 13.3334Z"
+        fill="black"
+      />
+    </svg>
+  );
+}
diff --git a/frontend/src/components/Icons/MainLogoIcon.tsx b/frontend/src/components/Icons/MainLogoIcon.tsx
@@ -0,0 +1,82 @@
+export default function MainLogoIcon() {
+  return (
+    <svg
+      width="97"
+      height="156"
+      viewBox="0 0 97 156"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M56.4298 85.6189C66.9193 92.3705 77.9332 91.7543 85.0777 86.0022C92.2965 80.1902 94.6455 69.8559 89.1462 59.3933C86.6317 54.6094 87.2342 47.4805 90.0051 42.0344C95.3819 31.4664 91.4874 19.5015 84.0799 12.1448C76.5625 4.67898 64.6431 1.19775 53.5721 8.58763C49.417 11.3612 43.7212 11.9622 39.3887 9.96939C28.5079 4.96458 17.2717 6.89035 10.2447 13.8065C3.13222 20.8069 1.0445 32.1835 6.91682 44.5315C8.23293 47.2989 8.2367 50.6317 6.94422 53.5003C1.35104 65.9139 4.3409 77.481 12.1605 84.1794C19.9184 90.825 31.8191 92.1402 42.8663 85.5048C46.9545 83.0492 52.4931 83.085 56.4298 85.6189Z"
+        fill="#43B75D"
+        stroke="black"
+        strokeWidth="7"
+      />
+      <path
+        d="M56.4298 85.6189C66.9193 92.3705 77.9332 91.7543 85.0777 86.0022C92.2965 80.1902 94.6455 69.8559 89.1462 59.3933C86.6317 54.6094 87.2342 47.4805 90.0051 42.0344C95.3819 31.4664 91.4874 19.5015 84.0799 12.1448C76.5625 4.67898 64.6431 1.19775 53.5721 8.58763C49.417 11.3612 43.7212 11.9622 39.3887 9.96939C28.5079 4.96458 17.2717 6.89035 10.2447 13.8065C3.13222 20.8069 1.0445 32.1835 6.91682 44.5315C8.23293 47.2989 8.2367 50.6317 6.94422 53.5003C1.35104 65.9139 4.3409 77.481 12.1605 84.1794C19.9184 90.825 31.8191 92.1402 42.8663 85.5048C46.9545 83.0492 52.4931 83.085 56.4298 85.6189Z"
+        fill="#43B75D"
+        stroke="black"
+        strokeWidth="7"
+      />
+      <path
+        d="M22 42.5071C21.9998 41.6521 22.1861 40.8075 22.546 40.032C22.9058 39.2564 23.4305 38.5688 24.0834 38.0169L44.6535 20.3884C45.7143 19.4919 47.0583 19 48.4472 19C49.8361 19 51.1801 19.4919 52.2409 20.3884L72.8109 38.0169C73.4638 38.5688 73.9885 39.2564 74.3484 40.032C74.7082 40.8075 74.8945 41.6521 74.8943 42.5071V68.9542C74.8943 70.513 74.2751 72.0078 73.173 73.11C72.0708 74.2122 70.5759 74.8314 69.0172 74.8314H27.8771C26.3184 74.8314 24.8236 74.2122 23.7214 73.11C22.6192 72.0078 22 70.513 22 68.9542V42.5071Z"
+        fill="white"
+        stroke="black"
+        strokeWidth="7"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M57.2628 74.8316V51.323C57.2628 50.5436 56.9532 49.7962 56.4021 49.2451C55.851 48.694 55.1036 48.3844 54.3242 48.3844H42.5699C41.7906 48.3844 41.0431 48.694 40.492 49.2451C39.9409 49.7962 39.6313 50.5436 39.6313 51.323V74.8316"
+        fill="white"
+      />
+      <path
+        d="M57.2628 74.8316V51.323C57.2628 50.5436 56.9532 49.7962 56.4021 49.2451C55.851 48.694 55.1036 48.3844 54.3242 48.3844H42.5699C41.7906 48.3844 41.0431 48.694 40.492 49.2451C39.9409 49.7962 39.6313 50.5436 39.6313 51.323V74.8316"
+        stroke="black"
+        strokeWidth="7"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <line
+        x1="39"
+        y1="74.5"
+        x2="56"
+        y2="74.5"
+        stroke="black"
+        strokeWidth="7"
+      />
+      <path
+        d="M22 42.5071C21.9998 41.6521 22.1861 40.8075 22.546 40.032C22.9058 39.2564 23.4305 38.5688 24.0834 38.0169L44.6535 20.3884C45.7143 19.4919 47.0583 19 48.4472 19C49.8361 19 51.1801 19.4919 52.2409 20.3884L72.8109 38.0169C73.4638 38.5688 73.9885 39.2564 74.3484 40.032C74.7082 40.8075 74.8945 41.6521 74.8943 42.5071V68.9542C74.8943 70.513 74.2751 72.0078 73.173 73.11C72.0708 74.2122 70.5759 74.8314 69.0172 74.8314H27.8771C26.3184 74.8314 24.8236 74.2122 23.7214 73.11C22.6192 72.0078 22 70.513 22 68.9542V42.5071Z"
+        fill="#FF7700"
+        stroke="black"
+        strokeWidth="7"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M57.2628 74.8316V51.323C57.2628 50.5436 56.9532 49.7962 56.4021 49.2451C55.851 48.694 55.1036 48.3844 54.3242 48.3844H42.5699C41.7906 48.3844 41.0431 48.694 40.492 49.2451C39.9409 49.7962 39.6313 50.5436 39.6313 51.323V74.8316"
+        fill="#FDDB35"
+      />
+      <path
+        d="M57.2628 74.8316V51.323C57.2628 50.5436 56.9532 49.7962 56.4021 49.2451C55.851 48.694 55.1036 48.3844 54.3242 48.3844H42.5699C41.7906 48.3844 41.0431 48.694 40.492 49.2451C39.9409 49.7962 39.6313 50.5436 39.6313 51.323V74.8316"
+        stroke="black"
+        strokeWidth="7"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <line
+        x1="39"
+        y1="74.5"
+        x2="56"
+        y2="74.5"
+        stroke="black"
+        strokeWidth="7"
+      />
+      <path
+        d="M22.956 143C21.9592 143 21.1722 142.599 20.5951 141.796C20.018 140.993 19.8606 140.124 20.123 139.189L34.1306 89.1778C34.3404 88.5037 34.7077 87.9727 35.2323 87.5849C35.7569 87.197 36.3602 87.0021 37.0423 87C38.0915 87 38.9047 87.4024 39.4818 88.2071C40.0589 89.0119 40.2163 89.8799 39.9539 90.8111L38.3801 96.3333H56.0863L58.0537 89.1778C58.2635 88.5037 58.6444 87.9727 59.1963 87.5849C59.7482 87.197 60.3641 87.0021 61.044 87C62.0408 87 62.8278 87.4024 63.4049 88.2071C63.982 89.0119 64.1394 89.8799 63.877 90.8111L49.8694 140.822C49.6596 141.496 49.2923 142.028 48.7677 142.418C48.2431 142.808 47.6398 143.002 46.9577 143C45.9085 143 45.0953 142.599 44.5182 141.796C43.9411 140.993 43.7837 140.124 44.0461 139.189L45.6199 133.667H27.9137L25.9463 140.822C25.7365 141.496 25.3556 142.028 24.8037 142.418C24.2518 142.808 23.6359 143.002 22.956 143ZM34.0519 111.889H51.6794L54.2763 102.556H36.6488L34.0519 111.889ZM29.7237 127.444H47.3512L49.9481 118.111H32.3206L29.7237 127.444Z"
+        fill="black"
+      />
+    </svg>
+  );
+}
diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts
@@ -1,26 +1,10 @@
-/**
- * TODO: 라우터 경로 도메인별로 재정의 
-const ROUTES = {
-  main: '/',
-  moim: '/moim',
-  moimCreation: '/moim-create',
-  moimDetail: '/moim/:moimId',
-  moimParticipationComplete: '/moim/:moimId/participation-complete',
-  moimModify: '/moim/:moimId/modify',
-
-  chatting: '/chatting',
-  chattingRoom: '/chatting/:moimId',
-
-  login: '/login',
-};
- */
-
 const ROUTES = {
   main: '/',
   addMoim: '/add-moim',
   detail: '/moim/:moimId',
   participationComplete: '/moim/participation-complete',
-  login: '/login',
+  home: '/home',
+  kakaoOAuth: '/kakao-o-auth',
   modify: '/modify/:moimId',
   chat: '/chat',
   chattingRoom: '/chatting-room/:moimId',

diff --git a/frontend/src/layouts/LoginLayout/LoginFooter/LoginFooter.style.ts b/frontend/src/layouts/LoginLayout/LoginFooter/LoginFooter.style.ts
@@ -1,7 +1,6 @@
 import { css } from '@emotion/react';
 
 export const footerStyle = css`
-  padding: 24px;
+  padding: 0 24px 48px;
   text-align: center;
-  background-color: #f0f0f0;
 `;
diff --git a/frontend/src/layouts/LoginLayout/LoginMain/LoginMain.style.ts b/frontend/src/layouts/LoginLayout/LoginMain/LoginMain.style.ts
@@ -6,7 +6,6 @@ export const mainStyle = css`
   align-items: center;
   justify-content: center;
 
-  width: 80%;
   height: 100%;
   margin: 0 auto;
 `;
diff --git a/frontend/src/pages/HomePage/HomePage.tsx b/frontend/src/pages/HomePage/HomePage.tsx
@@ -0,0 +1,68 @@
+import KakaoOAuthLoginIcon from '@_components/Icons/KakaoOAuthIcon';
+import MainLogoIcon from '@_components/Icons/MainLogoIcon';
+import LoginLayout from '@_layouts/LoginLayout/LoginLayout';
+import { css, useTheme } from '@emotion/react';
+
+export default function HomePage() {
+  const theme = useTheme();
+
+  const kakaoAuthLogin = () => {
+    if (
+      !process.env.KAKAO_O_AUTH_CLIENT_ID ||
+      !process.env.KAKAO_O_AUTH_REDIRECT_URI
+    ) {
+      throw new Error('Kakao OAuth 정보가 없습니다.');
+    }
+
+    const requestUrl = `https://kauth.kakao.com/oauth/authorize`;
+
+    const params = {
+      client_id: process.env.KAKAO_O_AUTH_CLIENT_ID,
+      redirect_uri: process.env.KAKAO_O_AUTH_REDIRECT_URI,
+      response_type: 'code',
+      scope: 'openid',
+    };
+    const queryString = new URLSearchParams(params).toString();
+    const kakaoOAuthUrl = `${requestUrl}?${queryString}`;
+
+    window.location.href = kakaoOAuthUrl;
+  };
+
+  return (
+    <LoginLayout>
+      <LoginLayout.Main>
+        <div
+          css={css`
+            display: flex;
+            flex-direction: column;
+            gap: 28px;
+            align-items: center;
+          `}
+        >
+          <MainLogoIcon />
+          <div
+            css={css`
+              display: flex;
+              flex-direction: column;
+              align-items: start;
+            `}
+          >
+            <h4 css={theme.typography.h4}>모여봐요 우리의</h4>
+            <h2 css={theme.typography.h2}>다락방</h2>
+          </div>
+        </div>
+      </LoginLayout.Main>
+      <LoginLayout.Footer>
+        <button
+          css={{
+            background: 'none',
+            border: 'none',
+          }}
+          onClick={kakaoAuthLogin}
+        >
+          <KakaoOAuthLoginIcon />
+        </button>
+      </LoginLayout.Footer>
+    </LoginLayout>
+  );
+}
diff --git a/frontend/src/pages/KakaoOAuthLoginPage/KakaoOAuthLoginPage.tsx b/frontend/src/pages/KakaoOAuthLoginPage/KakaoOAuthLoginPage.tsx
@@ -0,0 +1,26 @@
+import { kakaoOAuth } from '@_apis/auth';
+import ROUTES from '@_constants/routes';
+import { setToken } from '@_utils/tokenManager';
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export default function KakaoOAuthLoginPage() {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const loginKakaoOAuth = async () => {
+      const code = new URL(window.location.href).searchParams.get('code');
+      if (code === null) {
+        return;
+      }
+
+      const response = await kakaoOAuth(code);
+      setToken(response.data.accessToken);
+      navigate(ROUTES.main);
+    };
+
+    loginKakaoOAuth();
+  }, [navigate]);
+
+  return null;
+}
diff --git a/frontend/src/pages/LoginPage/LoginPage.tsx b/frontend/src/pages/LoginPage/LoginPage.tsx
diff --git a/frontend/src/routes/ProtectedRoute.tsx b/frontend/src/routes/ProtectedRoute.tsx
@@ -12,6 +12,6 @@ export default function ProtectedRoute(props: PropsWithChildren) {
   return isAuthenticated ? (
     children
   ) : (
-    <Navigate to={ROUTES.login} state={{ from: location }} replace />
+    <Navigate to={ROUTES.home} state={{ from: location }} replace />
   );
 }
diff --git a/frontend/src/routes/router.tsx b/frontend/src/routes/router.tsx
@@ -1,6 +1,6 @@
 import ChatPage from '@_pages/ChatPage/ChatPage';
 import ChattingRoomPage from '@_pages/ChattingRoomPage/ChattingRoomPage';
-import LoginPage from '@_pages/LoginPage/LoginPage';
+import HomePage from '@_pages/HomePage/HomePage';
 import MainPage from '@_pages/MainPage/MainPage';
 import MoimCreationPage from '@_pages/MoimCreationPage/MoimCreationPage';
 import MoimDetailPage from '@_pages/MoimDetailPage/MoimDetailPage';
@@ -12,6 +12,7 @@ import { createBrowserRouter } from 'react-router-dom';
 import PleasePage from '@_pages/PleasePage/PleasePage';
 import MyPage from '@_pages/Mypage/MyPage';
 import PleaseCreationPage from '@_pages/PleaseCreationPage/PleaseCreationPage';
+import KakaoOAuthLoginPage from '@_pages/KakaoOAuthLoginPage/KakaoOAuthLoginPage';
 
 const routesConfig = [
   {
@@ -45,8 +46,13 @@ const routesConfig = [
     requiresAuth: true,
   },
   {
-    path: ROUTES.login,
-    element: <LoginPage />,
+    path: ROUTES.home,
+    element: <HomePage />,
+    requiresAuth: false,
+  },
+  {
+    path: ROUTES.kakaoOAuth,
+    element: <KakaoOAuthLoginPage />,
     requiresAuth: false,
   },
   {