Merge pull request #112 from Neogasogaeseo/feat/#86

카카오톡 소셜 로그인/ 회원가입 api 연결 완료!

src/application/stores/kakao-auth.ts

@@ -0,0 +1,11 @@
+import { atom } from 'recoil';
+
+export const kakaoAccessTokenState = atom<string>({
+  key: 'kakaoAccessTokenState',
+  default: '',
+});
+
+export const kakaoRefreshTokenState = atom<string>({
+  key: 'kakaoRefreshTokenState',
+  default: '',
+});

src/infrastructure/api/login-user.ts

@@ -1,5 +1,39 @@
 import { LoginUser } from './types/user';
+import { publicAPI } from '../remote/base';
 
 export interface LoginUserService {
   getUserInfo(token: string): Promise<LoginUser>;
 }
+
+export const postLogin = async (
+  kakaoToken: string,
+): Promise<{ user?: object; accesstoken: string; refreshtoken: string }> => {
+  try {
+    const response = await publicAPI.post({
+      url: `/auth/login`,
+      data: { authenticationCode: kakaoToken, provider: 'kakao' },
+    });
+    if (response.status === 200) return response.data;
+    else throw '로그인 실패';
+  } catch (e) {
+    console.error(e);
+    throw '로그인 실패';
+  }
+};
+
+export const postJoin = async (joinData: FormData) => {
+  try {
+    const response = await publicAPI.post({
+      url: `/auth/register`,
+      data: joinData,
+      type: 'multipart',
+    });
+    if (response.status === 200) {
+      return response.data;
+    }
+    throw '회원가입 실패';
+  } catch (e) {
+    console.error(e);
+    throw '회원가입 실패';
+  }
+};

src/infrastructure/remote/base.ts

@@ -114,4 +114,4 @@ export const publicAPI = {
     }),
   delete: ({ url, params, headers }: Omit<RequestWithParams, 'isPrivate' | 'method'>) =>
     sendRequest({ url, params, method: 'delete', headers, isPrivate: false }),
-};
+};

src/presentation/components/JoinCompleteForm/index.tsx

@@ -1,7 +1,9 @@
 import { StJoinCompleteForm, StButton, StNoticeWrapper, StTitleWrapper } from './style';
 import { imgParty } from '@assets/images';
+import { useNavigate } from 'react-router-dom';
 
 const JoinCompleteForm = () => {
+  const navigate = useNavigate();
   return (
     <>
       <StJoinCompleteForm>
@@ -12,7 +14,14 @@ const JoinCompleteForm = () => {
         </StTitleWrapper>
         <p>너가소개서를 이용해보세요!</p>
       </StJoinCompleteForm>
-      <StButton type="submit">확인</StButton>
+      <StButton
+        type="submit"
+        onClick={() => {
+          navigate('/home');
+        }}
+      >
+        확인
+      </StButton>
     </>
   );
 };

src/presentation/components/JoinForm/index.tsx

@@ -11,17 +11,25 @@ import {
 } from './style';
 import CommonInput from '@components/common/CommonInput';
 import FileUpload from '@components/common/FileUpload';
-import { icProfile } from '@assets/icons';
-import { icEmail } from '@assets/icons';
+import { icProfile, icEmail } from '@assets/icons';
+import { useRecoilValue } from 'recoil';
+import { kakaoAccessTokenState, kakaoRefreshTokenState } from '@stores/kakao-auth';
+import { postJoin } from '@api/login-user';
+import { useLoginUser } from '@hooks/useLoginUser';
+import { useNavigate } from 'react-router-dom';
 
 function JoinForm() {
+  const accessToken = useRecoilValue(kakaoAccessTokenState);
+  const refreshToken = useRecoilValue(kakaoRefreshTokenState);
   const [isConditionMet, setIsConditionMet] = useState({
     id: false,
     name: false,
   });
   const [image, setImage] = useState<File | null>(null);
   const [inputId, setInputId] = useState('');
   const [inputName, setInputName] = useState('');
+  const { setAccessToken } = useLoginUser();
+  const navigate = useNavigate();
 
   useEffect(() => {
     const idCheck = /^[a-z|0-9|.|_]+$/;
@@ -39,9 +47,26 @@ function JoinForm() {
   const onChangeName = (value: string) => {
     setInputName(value);
   };
-  const onClickSubmitUserInfo = (e: React.MouseEvent<HTMLButtonElement>) => {
+
+  const onClickSubmitUserInfo = async (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
+    try {
+      const form = new FormData();
+      form.append('profileId', inputId);
+      form.append('name', inputName);
+      image && form.append('image', image);
+      form.append('provider', 'kakao');
+      form.append('accesstoken', accessToken);
+      form.append('refreshtoken', refreshToken);
+
+      const getData = await postJoin(form);
+      setAccessToken(getData.accesstoken);
+      navigate('/joinComplete');
+    } catch (error) {
+      console.error(error); //나중에 또 처리합시다.
+    }
   };
+
   return (
     <StJoinForm>
       <StNoticeWrapper>

src/presentation/components/LoginForm/OAuth.ts

@@ -1,4 +1,4 @@
 const CLIENT_ID = `${process.env.REACT_APP_CLIENT_ID}`;
-const REDIRECT_URI = 'http://localhost:3000/oauth';
+const REDIRECT_URI = 'http://localhost:3000/auth/kakao/callback';
 
 export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;

src/presentation/components/LoginForm/index.tsx

@@ -10,10 +10,10 @@ function LoginForm() {
   return (
     <StLoginForm>
       <img src={imgLogo} />
-      <StLogin>로그인</StLogin>
+      <StLogin>너를 통해 발견하는 나</StLogin>
       <StNoticeWrapper>
-        환영합니다! 너가소개서에 가입하고 <br />
-        다양한 서비스를 이용해보세요
+        나와 함께한 사람들이 써주는 <br />
+        나의 소개서, 너가소개서
       </StNoticeWrapper>
       <StLoginButton onClick={loginWithKakao}>
         <img src={icKakao} />

src/presentation/components/LoginForm/style.ts

@@ -8,18 +8,17 @@ export const StLogin = styled.div`
   font-weight: 600;
   font-size: 24px;
   line-height: 100%;
+  margin-top: 12px;
 `;
 export const StNoticeWrapper = styled.div`
   display: flex;
-  font-weight: 600;
-  font-size: 20px;
-  line-height: 140%;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 143.99%;
+  letter-spacing: -0.01em;
   margin-top: 32px;
   margin-bottom: 102px;
-  & > p {
-    display: flex;
-    color: ${COLOR.CORAL_MAIN};
-  }
+  color: ${COLOR.GRAY_5};
 `;
 export const StLoginButton = styled.button`
   display: flex;

src/presentation/pages/OAuthRedirectHandler/index.tsx

@@ -0,0 +1,31 @@
+import { kakaoAccessTokenState, kakaoRefreshTokenState } from '@stores/kakao-auth';
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useSetRecoilState } from 'recoil';
+import { postLogin } from '@api/login-user';
+import { useLoginUser } from '@hooks/useLoginUser';
+
+const OAuthRedirectHandler = () => {
+  const navigate = useNavigate();
+  const { setAccessToken } = useLoginUser();
+  const setKakaoAccessToken = useSetRecoilState(kakaoAccessTokenState);
+  const setKakaoRefreshToken = useSetRecoilState(kakaoRefreshTokenState);
+
+  useEffect(() => {
+    const code = new URL(window.location.href).searchParams.get('code') ?? ''; //인가코드
+    postLogin(code).then((response) => {
+      if (response.user) {
+        setAccessToken(response.accesstoken);
+        navigate('/home');
+      } else {
+        setKakaoAccessToken(response.accesstoken);
+        setKakaoRefreshToken(response.refreshtoken);
+        navigate('/join');
+      }
+    });
+  }, []);
+
+  return <></>;
+};
+
+export default OAuthRedirectHandler;

src/presentation/routes/UserRouter.tsx

@@ -1,6 +1,7 @@
 import { Route, Routes } from 'react-router-dom';
 import Login from '@pages/Login';
 import Join from '@pages/Join';
+import OAuthRedirectHandler from '@pages/OAuthRedirectHandler';
 import Home from '@pages/Home';
 import JoinComplete from '@pages/JoinComplete';
 
@@ -10,6 +11,8 @@ const LoginRouter = () => (
     <Route path="/join" element={<Join />} />
     <Route path="/joinComplete" element={<JoinComplete />} />
     <Route path="/home/*" element={<Home />} />
+
+    <Route path="/auth/kakao/callback" element={<OAuthRedirectHandler />} />
   </Routes>
 );