Merge pull request #73 from FinalDoubleTen/FE-60--feat/NewUser/NewLog…

…in/Kakao

Fe 60  feat/new user/new login/kakao

src/@types/auth.types.ts

@@ -1,4 +1,4 @@
-export interface AuthRequest {
+interface AuthRequest {
   email: string;
   password: string;
   name: string;
@@ -9,7 +9,7 @@ export interface AuthRequest {
   survey: string;
 }
 
-export interface LoginFormVlaue {
+interface LoginFormVlaue {
   email: string;
   password: string;
 }

src/api/auth.ts

@@ -21,13 +21,13 @@ export const postSignup = async (authData: AuthRequest) => {
 };
 
 // 로그인-이메일
-export const postEmailLogin = async (LoginData: LoginRequest) => {
+export const postEmailLogin = async (LoginData: LoginFormVlaue) => {
   const res = await client.post(`auth/login`, LoginData);
   return res;
 };
 
 // 로그인-카카오
-export const postKakaoLogin = async (LoginData: LoginRequest) => {
+export const postKakaoLogin = async (LoginData: LoginFormVlaue) => {
   const res = await client.post(`auth/login/kakao`, LoginData);
   return res;
 };

src/components/user/useInputBox/UserEmailInputBox.tsx → src/components/Auth/AuthInputBox/AuthEmailInputBox.tsx

@@ -1,7 +1,7 @@
 import { CloseIcon } from '@components/common/icons/Icons';
 import { useState } from 'react';
 
-const UserEmailInputBox = () => {
+const AuthEmailInputBox = () => {
   const [inputValue, setInputValue] = useState<string>('');
 
   const [isEmailValidated, setIsEmailValidated] = useState(true);
@@ -63,4 +63,4 @@ const UserEmailInputBox = () => {
   );
 };
 
-export default UserEmailInputBox;
+export default AuthEmailInputBox;

src/components/user/useInputBox/UserInputBox.tsx → src/components/Auth/AuthInputBox/AuthInputBox.tsx

@@ -1,6 +1,5 @@
 import { CloseIcon } from '@components/common/icons/Icons';
 import { UseFormRegisterReturn, UseFormSetValue } from 'react-hook-form';
-import { LoginFormVlaue } from '@/@types/auth.types';
 
 interface Props {
   label: string;
@@ -16,7 +15,7 @@ interface Props {
   // children: React.ReactNode;
 }
 
-const UserInputBox = ({
+const AuthInputBox = ({
   label,
   id,
   type = 'text',
@@ -68,4 +67,4 @@ const UserInputBox = ({
   );
 };
 
-export default UserInputBox;
+export default AuthInputBox;

src/components/user/useInputBox/UserPwInputBox.tsx → src/components/Auth/AuthInputBox/AuthPwInputBox.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { CloseIcon } from '@components/common/icons/Icons';
 import ValidifyCheck from './ValidifyCheck';
 
-const UserPwInputBox = () => {
+const AuthPwInputBox = () => {
   const [inputPwValue, setInputPwValue] = useState('');
 
   const onPwInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -97,4 +97,4 @@ const UserPwInputBox = () => {
   );
 };
 
-export default UserPwInputBox;
+export default AuthPwInputBox;

src/components/user/useInputBox/ValidifyCheck.tsx → src/components/Auth/AuthInputBox/ValidifyCheck.tsx

@@ -1,5 +1,5 @@
 import { CheckIcon } from '@components/common/icons/Icons';
-import validationList from '@utils/user/validationList';
+import validationList from '@utils/Auth/validationList';
 import { useEffect, useState } from 'react';
 
 interface Props {

src/components/Auth/KakaoLoginButton.tsx

@@ -0,0 +1,23 @@
+import { KakaoIcon } from '@components/common/icons/Icons';
+
+const KakaoLoginButton = () => {
+  const VITE_KAKAO_LOGIN_TEST_API_KEY = import.meta.env
+    .VITE_KAKAO_LOGIN_TEST_API_KEY;
+  const REDIRECT_URI = `${window.location.href}/kakao`;
+  const KAKAO_LOGIN_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${VITE_KAKAO_LOGIN_TEST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;
+
+  const onKakaoLoginClick = () => {
+    window.location.href = KAKAO_LOGIN_URL;
+  };
+
+  return (
+    <button
+      onClick={onKakaoLoginClick}
+      className="body3 mb-2 flex h-14 w-full items-center justify-center gap-2 rounded-lg bg-[#fee304] p-2 text-['#3B1E1E']">
+      <KakaoIcon />
+      카카오로 로그인
+    </button>
+  );
+};
+
+export default KakaoLoginButton;

src/components/Auth/index.ts

@@ -0,0 +1,13 @@
+import AuthInputBox from './AuthInputBox/AuthInputBox';
+import AuthEmailInputBox from './AuthInputBox/AuthEmailInputBox';
+import AuthPwInputBox from './AuthInputBox/AuthPwInputBox';
+import ErrorMessage from './ErrorMessage';
+import KakaoLoginButton from './KakaoLoginButton';
+
+export {
+  AuthInputBox,
+  AuthEmailInputBox,
+  AuthPwInputBox,
+  ErrorMessage,
+  KakaoLoginButton,
+};

src/pages/index.ts

@@ -1,4 +1,4 @@
 import { Signup, SignupInfo } from './signup';
-import Login from './login/login.page';
+import { Login, LoginKakao } from './login';
 
-export { Signup, SignupInfo, Login };
+export { Signup, SignupInfo, Login, LoginKakao };

src/pages/login/index.ts

@@ -0,0 +1,4 @@
+import Login from './login.page';
+import LoginKakao from './loginKakao.page';
+
+export { Login, LoginKakao };

src/pages/login/login.page.tsx

@@ -2,11 +2,10 @@ import { postEmailLogin } from '@api/auth';
 import authCient from '@api/authClient';
 import SubmitBtn from '@components/common/button/SubmitBtn';
 import Back from '@components/common/back/Back';
-import { KakaoIcon, LogoIcon } from '@components/common/icons/Icons';
-import { ErrorMessage, UserInputBox } from '@components/user';
+import { LogoIcon } from '@components/common/icons/Icons';
+import { ErrorMessage, AuthInputBox, KakaoLoginButton } from '@components/Auth';
 import { useNavigate } from 'react-router-dom';
 import { SubmitHandler, useForm } from 'react-hook-form';
-import { LoginFormVlaue } from '@/@types/auth.types';
 import { useState } from 'react';
 import { AxiosError } from 'axios';
 
@@ -20,7 +19,6 @@ const Login = () => {
     formState: { errors },
   } = useForm<LoginFormVlaue>({
     reValidateMode: 'onSubmit',
-    // 다른 옵션들...
   });
 
   const [isLoginFailed, setIsLoginFailed] = useState<boolean>(false);
@@ -60,7 +58,7 @@ const Login = () => {
           </h1>
         </div>
         <form className="mb-auto" onSubmit={handleSubmit(onLoginSubmit)}>
-          <UserInputBox
+          <AuthInputBox
             label={'이메일'}
             id="email"
             type="email"
@@ -69,7 +67,7 @@ const Login = () => {
             inputValue={watch('email')}
             setValue={setValue}
           />
-          <UserInputBox
+          <AuthInputBox
             label={'비밀번호'}
             id="password"
             type="password"
@@ -89,7 +87,7 @@ const Login = () => {
           {!errors.email && !errors.password && isLoginFailed && (
             <>
               <ErrorMessage>
-                아이디(로그인 전용 아이디) 또는 비밀번호를 잘못 입력했습니다.
+                이메일 또는 비밀번호를 잘못 입력했습니다.
               </ErrorMessage>
               <ErrorMessage>입력하신 내용을 다시 확인해주세요.</ErrorMessage>
             </>
@@ -105,10 +103,7 @@ const Login = () => {
           또는
           <hr className="flex-auto" />
         </div>
-        <button className="body3 mb-2 flex h-14 w-full items-center justify-center gap-2 rounded-lg bg-[#fee304] p-2 text-['#3B1E1E']">
-          <KakaoIcon />
-          카카오로 로그인
-        </button>
+        <KakaoLoginButton />
         <SubmitBtn outline type="button">
           회원가입
         </SubmitBtn>

src/pages/login/loginKakao.page.tsx

@@ -0,0 +1,19 @@
+import { postKakaoLogin } from '@api/auth';
+import { useEffect } from 'react';
+
+const LoginKakao = () => {
+  const code = new URL(window.location.href).searchParams.get('code');
+
+  useEffect(() => {
+    console.log(code);
+    try {
+      const res = postKakaoLogin();
+    } catch (err) {
+      console.log('카카오 로그인 중 에러 발생');
+    }
+  }, []);
+
+  return <div>잠시만 기다려주세요</div>;
+};
+
+export default LoginKakao;

src/pages/signup/signup.page.tsx

@@ -1,4 +1,4 @@
-import { UserEmailInputBox, UserPwInputBox } from '@components/user';
+import { AuthEmailInputBox, AuthPwInputBox } from '@components/Auth';
 import { useState } from 'react';
 
 const Signup = () => {
@@ -12,8 +12,8 @@ const Signup = () => {
         회원가입을 해주세요
       </h1>
       <form className="flex h-full flex-col">
-        <UserEmailInputBox />
-        <UserPwInputBox />
+        <AuthEmailInputBox />
+        <AuthPwInputBox />
 
         {/* TODO 서지수 | 모든 조건이 만족되어야지만 활성화되도록 수정 */}
         <div className="mt-auto">

src/router/authRouter.tsx

@@ -1,7 +1,7 @@
 import { Routes, Route } from 'react-router-dom';
 import MainLayout from './mainLayout';
 import { Signup, SignupInfo } from '@pages/signup';
-import { Login } from '@pages/index';
+import { Login, LoginKakao } from '@pages/index';
 
 const AuthRouter = () => {
   return (
@@ -10,6 +10,7 @@ const AuthRouter = () => {
         <Route path="/signup" element={<Signup />} />
         <Route path="/signup/info" element={<SignupInfo />} />
         <Route path="/login" element={<Login />} />
+        <Route path="/login/kakao" element={<LoginKakao />} />
       </Route>
     </Routes>
   );