[GILJOB-130] feat: 로그인 및 회원가입 기능 완성

YAPP-19th · Dec 24, 2021 · bd7598d · bd7598d
1 parent 4a67bac
commit bd7598d
Show file tree

Hide file tree

Showing 10 changed files with 198 additions and 75 deletions.
diff --git a/@types/custom-types/index.d.ts b/@types/custom-types/index.d.ts
@@ -1,3 +1,7 @@
+interface Window {
+  Kakao: Record<string, string>;
+}
+
 declare module '*.svg' {
   const content: any;
   export default content;

diff --git a/public/index.html b/public/index.html
@@ -6,6 +6,10 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content="취업의 바다에서 길잡이가 되어주다" />
+    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
+    <script>
+      window.Kakao.init('a02b2b66d67a10d20fe3c998a12f5621');
+    </script>
     <title>GILJOB</title>
   </head>
   <body>

diff --git a/src/assets/images/login.png b/src/assets/images/login.png
diff --git a/src/pages/Login/Login.stories.tsx b/src/pages/Login/Login.stories.tsx
@@ -1,4 +1,3 @@
-import { BrowserRouter as Router } from 'react-router-dom';
 import { Story, Meta } from '@storybook/react';
 import Login, { LoginProps } from '@src/pages/Login';
 
@@ -17,13 +16,6 @@ export default {
       type: 'boolean',
     },
   },
-  decorators: [
-    (Story) => (
-      <Router>
-        <Story />
-      </Router>
-    ),
-  ],
 } as Meta;
 
 const Template: Story<LoginProps> = (args) => <Login {...args} />;

diff --git a/src/pages/Login/LoginBox/index.tsx b/src/pages/Login/LoginBox/index.tsx
@@ -1,12 +1,55 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
+import React, { useCallback } from 'react';
+import { useHistory, Link } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
 import { Button, Text } from '@src/components/atoms';
+import { usePostLoginMutation } from '@src/services/giljob';
+import { setAuth, setKakaoToken, setAccessToken } from '@src/slices/authSlice';
 import logo from '@src/assets/images/logo.svg';
 import './style.scss';
 
 const LoginBox: React.FC = () => {
+  const [login, { isLoading }] = usePostLoginMutation();
+  const dispatch = useDispatch();
+  const history = useHistory();
+
+  const handleLogin = useCallback(
+    (Kakao) => {
+      /* Kakao.Auth.login 으로 
+      카카오 oauth 팝업창을 띄웁니다. */
+      Kakao.Auth.login({
+        success(authObj: Record<string, string>) {
+          const kakaoAccessToken = authObj.access_token;
+          // mutation으로 생성된 login 함수
+          login({ kakaoAccessToken })
+            .unwrap()
+            .then(({ data }) => {
+              const { isSignedUp, accessToken } = data;
+
+              if (isSignedUp) {
+                // 회원
+                dispatch(setAccessToken(accessToken));
+                dispatch(setAuth(true));
+
+                history.push('/quest');
+              } else {
+                // 비회원
+                dispatch(setKakaoToken(kakaoAccessToken));
+
+                history.push('/login/signup');
+              }
+            });
+        },
+        fail(err: string) {
+          console.log(JSON.stringify(err));
+        },
+      });
+    },
+    [dispatch, history, login],
+  );
+
   return (
     <article className="login-box">
+      {isLoading && <div className="loading">loading...</div>}
       <img className="logo" src={logo} alt="logo" />
       <Text
         className="intro-text"
@@ -21,6 +64,7 @@ const LoginBox: React.FC = () => {
         buttonColor="kakao"
         textColor="main"
         textSize="medium"
+        handleClick={() => handleLogin(window.Kakao)}
       />
       <Link to="/quest" className="no-login">
         <Text

diff --git a/src/pages/Login/RegisterBox/index.tsx b/src/pages/Login/RegisterBox/index.tsx
@@ -0,0 +1,119 @@
+import React, { useEffect, useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
+import { useSelector, useDispatch } from 'react-redux';
+import { Button, Text, Input, Dropdown, Textarea } from '@src/components/atoms';
+import { usePostRegisterMutation } from '@src/services/giljob';
+import { setAuth, setAccessToken, authSelector } from '@src/slices/authSlice';
+import {
+  registerSelector,
+  setNickname,
+  setIntro,
+  setPosition,
+  resetRegister,
+} from '@src/slices/registerSlice';
+import { POSITION_LIST } from '@src/constants/dropdown';
+import './style.scss';
+
+const RegisterBox: React.FC = () => {
+  const [register, { isLoading }] = usePostRegisterMutation();
+  const { kakaoAccessToken } = useSelector(authSelector);
+  const registerState = useSelector(registerSelector);
+  const dispatch = useDispatch();
+  const history = useHistory();
+
+  useEffect(() => {
+    /* Redux에 카카오 oauth 토큰을 통해 
+    로그인을 안한 사람을 되돌립니다. */
+    if (!kakaoAccessToken) history.push('/login');
+  }, [kakaoAccessToken, history]);
+
+  const handleRegister = useCallback(() => {
+    register({
+      kakaoAccessToken,
+      ...registerState,
+    })
+      .unwrap()
+      .then(({ data }) => {
+        const { accessToken } = data;
+
+        dispatch(setAccessToken(accessToken));
+        dispatch(setAuth(true));
+
+        dispatch(resetRegister());
+
+        history.push('/quest');
+      });
+  }, [register, kakaoAccessToken, registerState, dispatch, history]);
+
+  const handleNickname = useCallback(
+    (value: string) => {
+      dispatch(setNickname(value));
+    },
+    [dispatch],
+  );
+
+  const handlePosition = useCallback(
+    (type: string, value: string | number) => {
+      dispatch(setPosition({ type, value }));
+    },
+    [dispatch],
+  );
+
+  const handleIntro = useCallback(
+    (value: string) => {
+      dispatch(setIntro(value));
+    },
+    [dispatch],
+  );
+
+  return (
+    <article className="profile-setting">
+      {isLoading && <div className="loading">loading...</div>}
+      <Text
+        className="title"
+        align="start"
+        fontColor="gil-blue"
+        fontWeight="bold"
+      >
+        프로필 설정
+      </Text>
+      <div className="default-wrapper">
+        <div className="nickname">
+          <Text fontSize="large" fontColor="main" fontWeight="bold">
+            닉네임 <span className="blue-star">*</span>
+          </Text>
+          <Input hasCount onDispatch={handleNickname} />
+        </div>
+        <div className="position">
+          <Text fontSize="large" fontColor="main" fontWeight="bold">
+            직군 <span className="blue-star">*</span>
+          </Text>
+          <Dropdown
+            placeholder="직군 설정"
+            type="position"
+            selected={registerState.position}
+            list={POSITION_LIST}
+            onDispatch={handlePosition}
+          />
+        </div>
+      </div>
+      <div className="introduce-wrapper">
+        <Text fontSize="large" fontColor="main" fontWeight="bold">
+          자기 소개 <span className="blue-star">*</span>
+        </Text>
+        <Textarea hasLimit onDispatch={handleIntro} />
+      </div>
+      <div className="button-wrapper">
+        <Button
+          innerText="항해 시작"
+          buttonColor="white"
+          textColor="gil-blue"
+          hasShadow
+          handleClick={handleRegister}
+        />
+      </div>
+    </article>
+  );
+};
+
+export default RegisterBox;
diff --git a/src/pages/Login/SettingBox/style.scss → src/pages/Login/RegisterBox/style.scss b/src/pages/Login/SettingBox/style.scss → src/pages/Login/RegisterBox/style.scss
diff --git a/src/pages/Login/SettingBox/index.tsx b/src/pages/Login/SettingBox/index.tsx
diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
@@ -1,17 +1,17 @@
-import React from 'react';
-import LoginBox from './LoginBox';
-import SettingBox from './SettingBox';
+import React, { lazy } from 'react';
+import { Redirect, Route } from 'react-router-dom';
 import './style.scss';
 
-export interface LoginProps {
-  isLogin: boolean;
-}
+const LoginBox = lazy(() => import('./LoginBox'));
+const RegisterBox = lazy(() => import('./RegisterBox'));
 
-const Login: React.FC<LoginProps> = ({ isLogin = false }) => {
+const Login: React.FC = () => {
   return (
     <section className="login">
       <div className="login-wrapper">
-        {!isLogin ? <LoginBox /> : <SettingBox />}
+        <Route exact path="/login" component={LoginBox} />
+        <Route exact path="/login/signup" component={RegisterBox} />
+        <Redirect to="/login" />
       </div>
       <div className="login-background" />
     </section>

diff --git a/src/pages/Login/style.scss b/src/pages/Login/style.scss
@@ -9,11 +9,28 @@
 }
 
 .login-wrapper {
+  position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
+
+  /* 임시 로딩 상태 창
+  추후 로티로 대체 예정 */
+  .loading {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    font-size: 3rem;
+    font-weight: bold;
+    background-color: #f1f3f5;
+    opacity: 0.5;
+    z-index: 100;
+  }
 }
 
 .login-background {