👽 Use the API for authorisation & co. (#32)

### 📝 작업 내용

- 엔드포인트 `/users`, `/auth`에 관련된 타입을 정의하였습니다.
- 로그인, 회원가입 화면과 헤더, `EventCardView` 컴포넌트에 있었던 예시 데이터를 지우고 API와 통신하도록 코드를
수정하였습니다.

### 📸 스크린샷

없음

### 🚀 기타

- CORS 문제로 실제 통신이 잘 이루어지는지는 시험해 보지 못했는데요, AWS로 배포하거나 백엔드 개발자분들께 요청드리면 큰
문제 없이 해결될 듯합니다.

Author: young-52

src/api/auth/login.ts

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

src/api/auth/logout.ts

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

src/api/auth/me.ts

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

src/api/auth/signup.ts

@@ -1,9 +1,12 @@
-import type { AuthResponse, SocialLoginRequest } from '../../types/auth';
+import type { SocialLoginRequest, SocialLoginResponse } 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);
+): Promise<SocialLoginResponse> {
+  const response = await apiClient.post<SocialLoginResponse>(
+    '/auth/social',
+    data
+  );
   return response.data;
 }

src/api/auth/social.ts

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

src/api/users/me.ts

@@ -7,31 +7,29 @@ import {
   ItemMedia,
   ItemTitle,
 } from '@/components/ui/item';
-import type { Events } from '@/types/schema';
+import type { Event } from '@/types/event';
 import { getShortenedDate } from '@/utils/date';
 import { ChevronRightIcon, Plus } from 'lucide-react';
 import { Link } from 'react-router';
 import { Button } from './ui/button';
 
-type Event = Events & { guests: number; registration_start: string | null };
-
 function getDateLabel(
-  startDateString: string | null,
-  endDateString: string | null
+  startEpoch: number | undefined,
+  endEpoch: number | undefined
 ) {
-  if (!endDateString) {
+  if (!endEpoch) {
     return '상시 모집 중';
   }
 
   const now = new Date();
-  const endDate = new Date(endDateString!);
+  const endDate = new Date(endEpoch);
 
-  if (startDateString && now < new Date(startDateString)) {
-    return `${getShortenedDate(startDateString)}부터 모집`;
+  if (startEpoch && now < new Date(startEpoch)) {
+    return `${getShortenedDate(startEpoch)}부터 모집`;
   }
 
   if (now <= endDate) {
-    return `${getShortenedDate(endDateString)}까지 모집`;
+    return `${getShortenedDate(endEpoch)}까지 모집`;
   }
 
   return '모집 마감';
@@ -84,10 +82,7 @@ export default function EventCardView({ events }: { events: Event[] }) {
                 </h2>
               </ItemTitle>
               <ItemDescription>
-                {getDateLabel(
-                  event.registration_start,
-                  event.registration_deadline
-                )}
+                {getDateLabel(undefined, event.registrationDeadline)}
               </ItemDescription>
             </ItemContent>
             <ItemActions>

src/components/EventCardView.tsx

@@ -2,17 +2,8 @@ import ProfileButton from '@/components/ProfileButton';
 import useAuth from '@/hooks/useAuth';
 import { Link, NavLink } from 'react-router';
 
-const userExample = {
-  id: 1,
-  email: '[email protected]',
-  name: '박준영',
-  profileImage: 'https://github.com/shadcn.png',
-  createdAt: '2023-01-01T00:00:00.000Z',
-  updatedAt: '2023-01-01T00:00:00.000Z',
-};
-
 export default function Header() {
-  const { isLoggedIn, handleLogout } = useAuth();
+  const { user, isLoggedIn, handleLogout } = useAuth();
 
   const linkClassName = (isActive: boolean) => `
     h-[42px] items-center px-4 py-2 rounded-md text-black font-semibold
@@ -26,7 +17,7 @@ export default function Header() {
           모이샤
         </Link>
         <div className="items-center space-x-2">
-          {!isLoggedIn ? (
+          {!isLoggedIn || !user ? (
             <>
               <NavLink
                 to="/login"
@@ -42,7 +33,7 @@ export default function Header() {
               </NavLink>
             </>
           ) : (
-            <ProfileButton user={userExample} handleLogout={handleLogout} />
+            <ProfileButton user={user} handleLogout={handleLogout} />
           )}
         </div>
       </div>

src/components/Header.tsx

@@ -8,7 +8,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import type { User } from '@/types/auth';
+import type { User } from '@/types/user';
 
 interface ProfileButtonProps {
   user: User;

src/components/ProfileButton.tsx

@@ -1,14 +1,15 @@
-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 loginApi from '@/api/auth/login';
+import logoutApi from '@/api/auth/logout';
+import signupApi from '@/api/auth/signup';
+import socialApi from '@/api/auth/social';
+import getMeApi from '@/api/users/me';
+import useAuthStore from '@/hooks/useAuthStore';
 import type {
   LoginRequest,
   SignUpRequest,
   SocialLoginRequest,
-} from '../types/auth';
-import useAuthStore from './useAuthStore';
+} from '@/types/auth';
+import { useNavigate } from 'react-router';
 
 export default function useAuth() {
   const navigate = useNavigate();
@@ -20,7 +21,8 @@ export default function useAuth() {
   // 1. 이메일 로그인 로직
   const handleLogin = async (data: LoginRequest) => {
     try {
-      const { user, token } = await loginApi(data);
+      const { token } = await loginApi(data);
+      const user = await getMeApi();
       login(user, token); // Zustand 스토어 업데이트
       navigate('/'); // 메인 페이지로 이동
     } catch (error) {
@@ -32,9 +34,8 @@ export default function useAuth() {
   // 2. 이메일 회원가입 로직
   const handleSignUp = async (data: SignUpRequest) => {
     try {
-      const { user, token } = await signupApi(data);
-      login(user, token);
-      navigate('/');
+      await signupApi(data);
+      navigate('/login');
     } catch (error) {
       console.error('Signup failed:', error);
       alert('회원가입 중 오류가 발생했습니다.');
@@ -44,7 +45,7 @@ export default function useAuth() {
   // 3. 소셜 로그인 로직
   const handleSocialLogin = async (data: SocialLoginRequest) => {
     try {
-      const { user, token } = await socialApi(data);
+      const { token, user } = await socialApi(data);
       login(user, token);
       navigate('/');
     } catch (error) {
@@ -68,16 +69,12 @@ export default function useAuth() {
   };
 
   // 5. 로그아웃 로직
-  const handleLogout = () => {
+  const handleLogout = async () => {
+    await logoutApi();
     logout(); // Zustand 상태 초기화
     navigate('/login');
   };
 
-  // 6. 관리자 확인
-  const isAdmin = (ownerId: number | undefined) => {
-    return isLoggedIn && user?.id === ownerId;
-  };
-
   return {
     user,
     isLoggedIn,
@@ -86,6 +83,5 @@ export default function useAuth() {
     handleSocialLogin,
     refreshUser,
     handleLogout,
-    isAdmin,
   };
 }