👽 Use the API for authorisation & co.

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/signup.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/social.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/users/me.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/components/EventCardView.tsx

@@ -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/Header.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: 'user@example.com',
-  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/ProfileButton.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/hooks/useAuth.ts

@@ -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,
   };
 }

src/hooks/useAuthStore.ts

@@ -1,6 +1,6 @@
+import type { User } from '@/types/user';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
-import type { User } from '../types/auth';
 
 interface AuthState {
   user: User | null;

src/routes/Home.tsx

@@ -5,38 +5,18 @@ import { Link } from 'react-router';
 
 const events = [
   {
-    id: 1,
-    title: '제2회 기획 세미나',
-    description:
-      '일정설명 일정설명 일정설명 일정설명 일정설명 일정설명 일정설명 일정설명 일정설명 일정설명 일정설명 일정설명 일정설명 일정설명 일정설명 일정설명 ...',
-    location: '서울대',
-    start_at: '2026-02-02T18:00:00Z',
-    end_at: '2026-02-02T20:00:00Z',
-    guests: 12,
-    capacity: 10,
-    waitlist_enabled: true,
-    registration_start: '2026-01-20T09:00:00Z',
-    registration_deadline: '2026-02-02T17:00:00Z',
-    created_by: 123,
-    created_at: '2026-01-14T00:00:00Z',
-    updated_at: '2026-01-14T00:00:00Z',
-  },
-  {
-    id: 2,
-    title: '2026 와커톤',
-    description:
-      '그동안 각자의 위치에서 몰두해 온 여러분들이 한자리에 모여 뜨거운 에너지를 나누고, 무박 2일간 개발에 집중하며 즐길 수 있는 행사입니다.',
-    location: '성수 엘리스랩 라운지',
-    start_at: '2026-01-01T18:00:00Z',
-    end_at: '2026-02-13T20:00:00Z',
-    guests: 6,
-    capacity: 10,
-    waitlist_enabled: true,
-    registration_start: '2025-02-01T09:00:00Z',
-    registration_deadline: '2026-02-02T17:00:00Z',
-    created_by: 124,
-    created_at: '2026-01-14T00:00:00Z',
-    updated_at: '2026-01-14T00:00:00Z',
+    id: 0,
+    title: 'string',
+    description: 'string',
+    location: 'string',
+    startAt: 0,
+    endAt: 0,
+    capacity: 0,
+    waitlistEnabled: true,
+    registrationDeadline: 0,
+    createdBy: 0,
+    createdAt: 0,
+    updatedAt: 0,
   },
 ];
 

src/routes/Login.tsx

@@ -1,16 +1,16 @@
+import { GOOGLE_AUTH_URL, KAKAO_AUTH_URL } from '@/constants/auth';
+import useAuth from '@/hooks/useAuth';
 import { useState } from 'react';
 import { Link } from 'react-router';
-import { GOOGLE_AUTH_URL, KAKAO_AUTH_URL } from '../constants/auth';
-import useAuth from '../hooks/useAuth';
 
 export default function Login() {
-  const [username, setUsername] = useState('');
+  const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const { handleLogin } = useAuth();
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    handleLogin({ username, password });
+    handleLogin({ email, password });
   };
 
   return (
@@ -37,8 +37,8 @@ export default function Login() {
                 required
                 className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
                 placeholder="이메일 (아이디)"
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
               />
             </div>
             <div>