✨ Authorisation & Login page (#8)

### 📝 작업 내용

- 로그인 페이지 작업을 진행했습니다.
- axios 라이브러리를 이용해서 api 작업을 진행했습니다.
- zustand 라이브러리를 이용해서 로그인시 유저 정보와 인증 토큰이 로컬 스토리지에 저장되게 하였습니다.
- 소셜 로그인 로직을 만들고 소셜 로그인시 콜백되는 페이지를 만들었습니다.

### 📸 스크린샷 (선택)
<img width="2514" height="1315" alt="스크린샷 2026-01-01 210036"
src="https://github.com/user-attachments/assets/9809afa6-cbdb-4b2c-8a3e-b2f9b978b98b"
/>


### 🚀 리뷰 요구사항 (선택)

- 헤더 작업을 모니 인증 토큰을 context로 저장하셨는데, zustand를 도입하는건 어떨까요? zustand를 이용하면
유저 정보와 인증 토큰을 한 번에 관리할 수 있어집니다.
- 리드미에 적힌 폴더 구조에는 없지만, type 폴더가 있으면 편리할 것 같아서 폴더를 추가했습니다. type 폴더 사용하지
않고 contants 폴더에 통합하는게 더 좋을까요?
- utils 폴더에 커스텀 훅을 위치했습니다. hooks 폴더를 만들어서 utils와 구분하는게 좋을까요?
- 로그인과 회원가입에 대한 api 구조를 구상해봤습니다. 이건 슬랙에 올릴게요!
- 커밋 메세지 내용이나 깃모지에 부적절한게 있었을까요...?

---------

Co-authored-by: Park Junyoung <bloomwayz@snu.ac.kr>

Author: jun-0411

.gitignore

@@ -40,4 +40,10 @@ dist-ssr
 .ionide
 
 ### macOS ###
-.DS_Store
+.DS_Store
+
+## Environment Variables ###
+.env
+.env.production
+.env.development
+*.local

package.json

@@ -14,9 +14,11 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.18",
+    "axios": "^1.13.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-router": "^7.11.0"
+    "react-router": "^7.11.0",
+    "zustand": "^5.0.9"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",

src/api/apiClient.ts

@@ -0,0 +1,21 @@
+import axios from 'axios';
+import useAuthStore from '../hooks/useAuthStore';
+
+// 공통 설정을 가진 axios 인스턴스 생성
+const apiClient = axios.create({
+  baseURL: '/api', // 모든 요청의 기본 경로
+  timeout: 5000,
+});
+
+// 요청 인터셉터: 모든 요청 직전에 실행됨
+apiClient.interceptors.request.use((config) => {
+  const token = useAuthStore.getState().token;
+
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+
+  return config;
+});
+
+export default apiClient;

src/api/auth/login.ts

@@ -0,0 +1,7 @@
+import type { AuthResponse, LoginRequest } from '../../types/auth';
+import apiClient from '../apiClient';
+
+export default async function login(data: LoginRequest): Promise<AuthResponse> {
+  const response = await apiClient.post<AuthResponse>('/auth/login', data);
+  return response.data;
+}

src/api/auth/me.ts

@@ -0,0 +1,7 @@
+import type { User, UserGroup } from '../../types/auth';
+import apiClient from '../apiClient';
+
+export default async function getMe(): Promise<User & { groups: UserGroup[] }> {
+  const response = await apiClient.get('/auth/me');
+  return response.data;
+}

src/api/auth/signup.ts

@@ -0,0 +1,19 @@
+import type { AuthResponse, SignUpRequest } from '../../types/auth';
+import apiClient from '../apiClient';
+
+export default async function signup(
+  data: SignUpRequest
+): Promise<AuthResponse> {
+  const formData = new FormData();
+
+  formData.append('username', data.username);
+  formData.append('password', data.password);
+  formData.append('name', data.name);
+
+  if (data.photo) {
+    formData.append('photo', data.photo); // 백엔드 필드명과 'photo' 일치시키기
+  }
+
+  const response = await apiClient.post<AuthResponse>('/auth/signup', formData);
+  return response.data;
+}

src/api/auth/social.ts

@@ -0,0 +1,9 @@
+import type { AuthResponse, SocialLoginRequest } from '../../types/auth';
+import apiClient from '../apiClient';
+
+export default async function social(
+  data: SocialLoginRequest
+): Promise<AuthResponse> {
+  const response = await apiClient.post<AuthResponse>('/auth/social', data);
+  return response.data;
+}

src/constants/auth.ts

@@ -0,0 +1,12 @@
+// .env에서 정의한 기본 리다이렉트 주소
+const REDIRECT_URI_BASE = import.meta.env.VITE_REDIRECT_URI;
+
+// 구글 인증 URL
+export const GOOGLE_AUTH_URL = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${
+  import.meta.env.VITE_GOOGLE_CLIENT_ID
+}&redirect_uri=${REDIRECT_URI_BASE}/google&response_type=code&scope=openid email profile`;
+
+// 카카오 인증 URL
+export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${
+  import.meta.env.VITE_KAKAO_CLIENT_ID
+}&redirect_uri=${REDIRECT_URI_BASE}/kakao&response_type=code`;

src/hooks/useAuth.ts

@@ -0,0 +1,85 @@
+import { useNavigate } from 'react-router';
+import loginApi from '../api/auth/login';
+import getMeApi from '../api/auth/me';
+import signupApi from '../api/auth/signup';
+import socialApi from '../api/auth/social';
+import type {
+  LoginRequest,
+  SignUpRequest,
+  SocialLoginRequest,
+} from '../types/auth';
+import useAuthStore from './useAuthStore';
+
+export default function useAuth() {
+  const navigate = useNavigate();
+
+  const { user, isLoggedIn, login, logout, updateUser } = useAuthStore(
+    (state) => state
+  );
+
+  // 1. 이메일 로그인 로직
+  const handleLogin = async (data: LoginRequest) => {
+    try {
+      const { user, token } = await loginApi(data);
+      login(user, token); // Zustand 스토어 업데이트
+      navigate('/'); // 메인 페이지로 이동
+    } catch (error) {
+      console.error('Login failed:', error);
+      alert('아이디 또는 비밀번호를 확인해주세요.');
+    }
+  };
+
+  // 2. 이메일 회원가입 로직
+  const handleSignUp = async (data: SignUpRequest) => {
+    try {
+      const { user, token } = await signupApi(data);
+      login(user, token);
+      navigate('/');
+    } catch (error) {
+      console.error('Signup failed:', error);
+      alert('회원가입 중 오류가 발생했습니다.');
+    }
+  };
+
+  // 3. 소셜 로그인 로직
+  const handleSocialLogin = async (data: SocialLoginRequest) => {
+    try {
+      const { user, token } = await socialApi(data);
+      login(user, token);
+      navigate('/');
+    } catch (error) {
+      console.error('Social login failed:', error);
+      alert('소셜 로그인에 실패했습니다.');
+    }
+  };
+
+  // 4. 내 정보 동기화
+  const refreshUser = async () => {
+    if (!isLoggedIn) return;
+    try {
+      const userData = await getMeApi();
+      // 유저 정보와 그룹 정보 등이 담긴 데이터로 스토어 갱신
+      updateUser(userData);
+    } catch (error) {
+      console.error('Refresh user failed:', error);
+      handleLogout(); // 토큰이 유효하지 않으면 로그아웃 처리
+      alert('유저 정보 동기화 중 오류가 발생했습니다.');
+    }
+  };
+
+  // 5. 로그아웃 로직
+  const handleLogout = () => {
+    logout(); // Zustand 상태 초기화
+    navigate('/login');
+  };
+
+  return {
+    user,
+    isLoggedIn,
+    handleLogin,
+    handleSignUp,
+    handleSocialLogin,
+    refreshUser,
+    handleLogout,
+  };
+}

src/hooks/useAuthStore.ts

@@ -0,0 +1,34 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import type { User } from '../types/auth';
+
+interface AuthState {
+  user: User | null;
+  token: string | null;
+  isLoggedIn: boolean;
+  // 로그인 시 유저 정보와 토큰을 함께 저장
+  login: (user: User, token: string) => void;
+  // 로그아웃 시 상태 초기화
+  logout: () => void;
+  // 유저 정보만 업데이트하는 액션
+  updateUser: (user: User) => void;
+}
+
+const useAuthStore = create<AuthState>()(
+  persist(
+    (set) => ({
+      user: null,
+      token: null,
+      isLoggedIn: false,
+
+      login: (user, token) => set({ user, token, isLoggedIn: true }),
+      logout: () => set({ user: null, token: null, isLoggedIn: false }),
+      updateUser: (user) => set({ user }),
+    }),
+    {
+      name: 'auth-storage', // 로컬 스토리지에 저장될 키 이름
+    }
+  )
+);
+
+export default useAuthStore;