[FEAT] 관리자 Oauth 로그인 관련 Redirect 추가

src/constants/routerPath.ts

@@ -13,5 +13,7 @@ export const ROUTE_PATH = {
     MAIN: '/',
     CLUBDETAIL: 'clubs/:clubId',
     LOGIN: 'login',
+    CALLBACK: 'login/redirect',
+    SIGNUP: 'signup',
   },
 };

src/pages/Routes.tsx

@@ -7,7 +7,9 @@ import { DashboardPage } from '@/pages/admin/Dashboard/Page';
 import { ClubDetailPage } from '@/pages/user/ClubDetail/Page';
 import { MainPage } from '@/pages/user/Main/Page.tsx';
 import { ApplicationDetailPage } from './admin/ApplicationDetail/Page';
+import { KakaoCallback } from './admin/Login/KakaoCallback';
 import { LoginPage } from './admin/Login/Page';
+import { AdminSignupPage } from './admin/Signup/Page';
 import { ClubApplicationPage } from './user/Apply/Page';
 
 const { USER, ADMIN, COMMON } = ROUTE_PATH;
@@ -29,6 +31,14 @@ export const router = createBrowserRouter([
         path: USER.APPLICATION,
         element: <ClubApplicationPage />,
       },
+      {
+        path: COMMON.CALLBACK,
+        element: <KakaoCallback />,
+      },
+      {
+        path: COMMON.SIGNUP,
+        element: <AdminSignupPage />,
+      },
       {
         path: '/admin',
         children: [

src/pages/admin/Login/KakaoCallback.tsx

@@ -0,0 +1,43 @@
+import axios from 'axios';
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { LoadingSpinner } from '@/shared/components/LoadingSpinner';
+
+export const KakaoCallback = () => {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const code = new URL(window.location.href).searchParams.get('code');
+    if (!code) return;
+
+    console.log(code);
+    const fetchToken = async () => {
+      try {
+        const res = axios.post(`${import.meta.env.VITE_API_BASE_URL}/auth/kakao/login`, {
+          authorizationCode: code,
+        });
+        console.log('응답res ', res);
+
+        // CASE 1) 기존 회원
+
+        // 1-1. accessToken, refreshToken 발급
+        // localStorage.setItem('accessToken', res.data.accessToken);
+        // localStorage.setItem('refreshToken ', res.data.refreshToken)- (수정전)
+        // refreshToken은 httpOnly 관리(수정후)
+        // ------------------------------------------------------------
+        // 2-2 main 페이지 이동
+        // navigate('/'); // 로그인 후 홈으로 이동
+
+        // CASE 2) 기존 회원
+        // 2-1. 임시 토큰
+        // 2-2. navigate('/signup')
+      } catch (error) {
+        console.log('error:', error);
+      }
+    };
+
+    fetchToken();
+  }, [navigate]);
+
+  return <LoadingSpinner />;
+};

src/pages/admin/Login/Page.tsx

@@ -1,13 +1,11 @@
 import styled from '@emotion/styled';
 import { LoginButton } from './component/LoginButton';
-import { LoginInput } from './component/LoginInput';
 import { Logo } from './component/Logo';
 
 export const LoginPage = () => {
   return (
     <Container>
       <Logo />
-      <LoginInput />
       <LoginButton />
     </Container>
   );

src/pages/admin/Login/component/LoginButton/index.tsx

@@ -1,17 +1,25 @@
 import styled from '@emotion/styled';
 import { Button } from '@/shared/components/Button';
 
+const REST_API_KEY = import.meta.env.VITE_KAKAO_REST_API_KEY;
+const REDIRECT_URI = import.meta.env.VITE_KAKAO_REDIRECT_URI;
+
 export const LoginButton = () => {
+  const handleKakaoLogin = () => {
+    const kakaoAuthUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;
+    window.location.href = kakaoAuthUrl;
+  };
+
   return (
     <Container>
-      <Button width='100%' type='submit'>
-        {'로그인'}
+      <Button to='/signup' width='100%' type='button'>
+        {'회원가입'}
       </Button>
       <KakaoButtonWrapper>
-        <Button width='100%' type='submit'>
+        <Button width='100%' type='button' onClick={handleKakaoLogin}>
           <ButtonContent>
             <Icon src='/assets/kakao-icon.png' width={24} height={24} />
-            <span>카카오 로그인</span>
+            {'카카오 로그인'}
           </ButtonContent>
         </Button>
       </KakaoButtonWrapper>

src/pages/admin/Signup/Page.tsx

@@ -0,0 +1,29 @@
+import styled from '@emotion/styled';
+import { HeaderTitle } from './components/HeaderTitle';
+import { SignupForm } from './components/SignupForm';
+
+export const AdminSignupPage = () => {
+  return (
+    <Layout>
+      <HeaderTitle />
+      <SignupForm />
+    </Layout>
+  );
+};
+
+export const Layout = styled.main(({ theme }) => ({
+  minHeight: '100vh',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: '1.5rem',
+  maxWidth: '1200px',
+  width: '100%',
+  margin: '0 auto 4rem auto',
+  padding: '0 1.5rem',
+  boxSizing: 'border-box',
+
+  [`@media (max-width: ${theme.breakpoints.mobile})`]: {
+    padding: '1rem',
+  },
+}));

src/pages/admin/Signup/api/signup.ts

@@ -0,0 +1,15 @@
+import type { SignupFormInputs } from '../type/signup';
+
+export const postSignupForm = async (formData: SignupFormInputs): Promise<SignupFormInputs> => {
+  const url = `${import.meta.env.VITE_API_BASE_URL}/auth/register`;
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(formData),
+  });
+
+  if (!response.ok) throw new Error('회원 가입 양식을 제출하지 못했습니다.');
+  return await response.json();
+};

src/pages/admin/Signup/components/HeaderTitle/index.tsx

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+
+export const HeaderTitle = () => {
+  return (
+    <TextWrapper>
+      <Title>관리자 등록</Title>
+    </TextWrapper>
+  );
+};
+const TextWrapper = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '1rem',
+  padding: '2rem 0 1rem 0',
+});
+
+const Title = styled.h1(({ theme }) => ({
+  fontSize: '2rem',
+  fontWeight: theme.font.weight.medium,
+  lineHeight: 1.3,
+  color: theme.colors.gray900,
+}));

src/pages/admin/Signup/components/SignupForm/index.styled.ts

@@ -0,0 +1,52 @@
+import styled from '@emotion/styled';
+
+export const UserInfoWrapper = styled.div(({ theme }) => ({
+  boxSizing: 'border-box',
+  width: '48rem',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '30px',
+  borderBottom: `1px solid ${theme.colors.gray200}`,
+  paddingBottom: '3rem',
+
+  '@media (max-width: 48rem)': {
+    width: '100%',
+  },
+}));
+
+export const FormField = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '10px',
+});
+
+export const FormRow = styled.div({
+  display: 'flex',
+  flexDirection: 'row',
+  gap: '2.5rem',
+  width: '100%',
+  '& > *': {
+    flex: '1 1 0',
+    minWidth: 0,
+  },
+});
+
+export const Label = styled.label(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '4px',
+  fontWeight: theme.font.weight.medium,
+}));
+
+export const FormContainer = styled.main({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: '3rem',
+});
+
+export const ErrorMessage = styled.span(({ theme }) => ({
+  color: theme.colors.warning,
+  fontSize: theme.font.size.xs,
+  padding: 0,
+}));

src/pages/admin/Signup/components/SignupForm/index.tsx

@@ -0,0 +1,128 @@
+import { useForm, FormProvider } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
+import { postSignupForm } from '@/pages/admin/Signup/api/signup';
+import * as S from '@/pages/admin/Signup/components/SignupForm/index.styled';
+import { Button } from '@/shared/components/Button';
+import { OutlineInputField } from '@/shared/components/Form/InputField/OutlineInputField';
+import { theme } from '@/styles/theme';
+import type { SignupFormInputs } from '@/pages/admin/Signup/type/signup';
+
+export const SignupForm = () => {
+  const navigate = useNavigate();
+  const methods = useForm<SignupFormInputs>({
+    mode: 'onTouched',
+    defaultValues: {
+      name: '',
+      email: '',
+      studentId: '',
+      department: '',
+      phoneNumber: '',
+    },
+  });
+
+  const { errors, isSubmitting } = methods.formState;
+
+  const onSubmit = async (signupFormValue: SignupFormInputs) => {
+    try {
+      await postSignupForm(signupFormValue);
+      toast.success('회원가입 완료!', {
+        style: { backgroundColor: theme.colors.primary, color: 'white' },
+        duration: 1000,
+      });
+      setTimeout(() => {
+        navigate(`/login`);
+      }, 1000);
+    } catch (e) {
+      console.error(e);
+      toast.error('회원가입 실패!', {
+        duration: 1000,
+        style: {
+          backgroundColor: 'white',
+          color: theme.colors.error,
+        },
+      });
+    }
+  };
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={methods.handleSubmit(onSubmit)}>
+        <S.FormContainer>
+          <S.UserInfoWrapper>
+            <S.FormField>
+              <S.Label>이름</S.Label>
+              <OutlineInputField
+                placeholder='이름을 입력하세요.'
+                {...methods.register('name', { required: '이름을 입력하세요.' })}
+                invalid={!!errors.name}
+                message={errors.name?.message}
+              />
+            </S.FormField>
+
+            <S.FormField>
+              <S.Label>이메일</S.Label>
+              <OutlineInputField
+                placeholder='이메일을 입력하세요.'
+                {...methods.register('email', {
+                  required: '이메일을 입력하세요.',
+                  pattern: {
+                    value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+                    message: '올바른 이메일 형식이 아닙니다.',
+                  },
+                })}
+                invalid={!!errors.email}
+                message={errors.email?.message}
+              />
+            </S.FormField>
+
+            <S.FormRow>
+              <S.FormField>
+                <S.Label>학번</S.Label>
+                <OutlineInputField
+                  placeholder='학번을 입력하세요.'
+                  {...methods.register('studentId', {
+                    required: '학번을 입력하세요.',
+                    pattern: {
+                      value: /^[0-9]{6}$/,
+                      message: '학번은 숫자 6자리여야 합니다.',
+                    },
+                  })}
+                  invalid={!!errors.studentId}
+                  message={errors.studentId?.message}
+                />
+              </S.FormField>
+
+              <S.FormField>
+                <S.Label>학과</S.Label>
+                <OutlineInputField
+                  placeholder='학과를 입력하세요.'
+                  {...methods.register('department', { required: '학과를 입력하세요.' })}
+                  invalid={!!errors.department}
+                  message={errors.department?.message}
+                />
+              </S.FormField>
+            </S.FormRow>
+
+            <S.FormField>
+              <S.Label>전화번호</S.Label>
+              <OutlineInputField
+                placeholder='010-0000-0000'
+                {...methods.register('phoneNumber', {
+                  required: '전화번호를 입력하세요.',
+                  pattern: {
+                    value: /^\d{2,3}-\d{3,4}-\d{4}$/,
+                    message: '올바른 전화번호 형식이 아닙니다.',
+                  },
+                })}
+                invalid={!!errors.phoneNumber}
+                message={errors.phoneNumber?.message}
+              />
+            </S.FormField>
+          </S.UserInfoWrapper>
+          <Button type='submit'>{isSubmitting ? '제출중...' : '회원가입'}</Button>
+        </S.FormContainer>
+      </form>
+    </FormProvider>
+  );
+};

src/pages/admin/Signup/type/signup.ts

@@ -0,0 +1,7 @@
+export type SignupFormInputs = {
+  name: string;
+  email: string;
+  studentId: string;
+  department: string;
+  phoneNumber: string;
+};