👽 Apply API changes on 24 Jan (#38)

### 📝 작업 내용

- 1월 24일(토) 회의에서 있었던 API 변경사항을 반영하였습니다.
- 기타 소소한 리팩토링 작업을 진행하였습니다.

### 📸 스크린샷

없음

### 🚀 리뷰 요구사항

- API에 있는 모든 요청·응답 형식을 타입으로 규정하였습니다. 이 타입 중에서는 실제로 쓰이지 않은 것도 있는지라, CI를
통과하지 못할 것입니다. 이 점 감안하여 주시기 바랍니다.

Author: young-52

src/api/auth/signup.ts

@@ -1,7 +1,7 @@
 import apiClient from '@/api/apiClient';
 import type { SignUpRequest, SignUpResponse } from '@/types/auth';
 
-export default async function signup(
+export default async function signUp(
   data: SignUpRequest
 ): Promise<SignUpResponse> {
   const formData = new FormData();

src/api/event.ts

@@ -0,0 +1,42 @@
+import type {
+  CreateEventRequest,
+  EventDetailResponse,
+  UpdateEventRequest,
+  UpdateEventResponse,
+} from '@/types/events';
+import apiClient from '../apiClient';
+
+// 일정 생성 (POST /api/events)
+export async function createEvent(data: CreateEventRequest) {
+  const response = await apiClient.post(`/events`, data);
+
+  return {
+    data: response.data,
+    status: response.status,
+  };
+}
+
+// 일정 상세 응답 (GET /api/events/:id)
+export async function getEventDetail(id: string) {
+  const response = await apiClient.get<EventDetailResponse>(`/events/${id}`);
+
+  return {
+    data: response.data,
+    status: response.status,
+  };
+}
+
+// 일정 수정 (PUT /api/events/:id)
+export async function updateEvent(id: string, data: UpdateEventRequest) {
+  const response = await apiClient.put<UpdateEventResponse>(
+    `/events/${id}`,
+    data
+  );
+
+  return {
+    data: response.data,
+    status: response.status,
+  };
+}
+
+// TODO: 일정 삭제 (DELETE /api/events/:id)

src/api/events/event.ts

@@ -0,0 +1,12 @@
+import type { MyEventsResponse } from '@/types/events';
+import apiClient from '../apiClient';
+
+// 내가 생성한 일정 목록 (GET /api/events/me)
+export default async function getMyEvents() {
+  const response = await apiClient.get<MyEventsResponse>(`/events/me`);
+
+  return {
+    data: response.data,
+    status: response.status,
+  };
+}

src/api/events/me.ts

@@ -0,0 +1,33 @@
+import type {
+  GuestsParams,
+  GuestsResponse,
+  JoinEventRequest,
+  JoinEventResponse,
+} from '@/types/events';
+import apiClient from '../apiClient';
+
+// 참여자 명단 (GET /api/events/:id/registrations)
+export async function getGuests(id: string, params?: GuestsParams) {
+  const response = await apiClient.get<GuestsResponse>(
+    `/events/${id}/registrations`,
+    { params }
+  );
+
+  return {
+    data: response.data,
+    status: response.status,
+  };
+}
+
+// 참여 신청 (POST /api/events/:id/registrations)
+export async function joinEvent(id: string, data: JoinEventRequest) {
+  const response = await apiClient.post<JoinEventResponse>(
+    `/events/${id}/registrations`,
+    data
+  );
+
+  return {
+    data: response.data,
+    status: response.status,
+  };
+}

src/api/events/registrations.ts

@@ -0,0 +1,8 @@
+import apiClient from '@/api/apiClient';
+import type { MyRegistrationsResponse } from '@/types/registrations';
+
+// 내가 신청한 일정 조회 (GET /api/registrations/me)
+export default async function getMyRegistrations(): Promise<MyRegistrationsResponse> {
+  const response = await apiClient.get('/registrations/me');
+  return response.data;
+}

src/api/registrations/me.ts

@@ -0,0 +1,14 @@
+import apiClient from '@/api/apiClient';
+import type {
+  PatchRegistrationRequest,
+  PatchRegistrationResponse,
+} from '@/types/registrations';
+
+// 신청 상태 수정 (PATCH /api/registrations/:id)
+export default async function patchRegistration(
+  id: string,
+  data: PatchRegistrationRequest
+): Promise<PatchRegistrationResponse> {
+  const response = await apiClient.patch(`/registrations/${id}`, data);
+  return response.data;
+}

src/api/registrations/registration.ts

@@ -1,10 +1,24 @@
 import apiClient from '@/api/apiClient';
-import type { GetMeResponse } from '@/types/users';
+import type {
+  GetMeResponse,
+  PatchMeRequest,
+  PatchMeResponse,
+} from '@/types/users';
 
-export default async function getMe(token?: string): Promise<GetMeResponse> {
+// 나의 정보 조회 (GET /api/users/me)
+export async function getMe(token?: string): Promise<GetMeResponse> {
   // token이 인자로 들어오면 헤더에 명시적으로 넣어주고, 없으면 인터셉터가 처리
-  const response = await apiClient.get('/users/me', {
+  const headers = {
     headers: token ? { Authorization: `Bearer ${token}` } : {},
-  });
+  };
+  const response = await apiClient.get('/users/me', headers);
   return response.data;
 }
+
+// 나의 정보 수정 (PATCH /api/users/me)
+export async function patchMe(data: PatchMeRequest): Promise<PatchMeResponse> {
+  const response = await apiClient.patch('/users/me', data);
+  return response.data;
+}
+
+// TODO: 회원 탈퇴 (DELETE /api/users/me)

src/api/users/me.ts

@@ -7,35 +7,35 @@ import {
   ItemMedia,
   ItemTitle,
 } from '@/components/ui/item';
-import type { Event } from '@/types/schemas';
+import type { MyEvent } from '@/types/events';
 import { getShortenedDate } from '@/utils/date';
 import { ChevronRightIcon, Plus } from 'lucide-react';
 import { Link } from 'react-router';
 import { Button } from './ui/button';
 
 function getDateLabel(
-  startEpoch: number | undefined,
-  endEpoch: number | undefined
+  startISODate: string | undefined,
+  endISODate: string | undefined
 ) {
-  if (!endEpoch) {
+  if (!endISODate) {
     return '상시 모집 중';
   }
 
   const now = new Date();
-  const endDate = new Date(endEpoch);
+  const endDate = new Date(endISODate);
 
-  if (startEpoch && now < new Date(startEpoch)) {
-    return `${getShortenedDate(startEpoch)}부터 모집`;
+  if (startISODate && now < new Date(startISODate)) {
+    return `${getShortenedDate(startISODate)}부터 모집`;
   }
 
   if (now <= endDate) {
-    return `${getShortenedDate(endEpoch)}까지 모집`;
+    return `${getShortenedDate(endISODate)}까지 모집`;
   }
 
   return '모집 마감';
 }
 
-export default function EventCardView({ events }: { events: Event[] }) {
+export default function EventCardView({ events }: { events: MyEvent[] }) {
   if (events.length === 0) {
     return (
       <div className="flex-1 flex items-center justify-center">
@@ -73,16 +73,16 @@ export default function EventCardView({ events }: { events: Event[] }) {
         </Link>
       </Item>
       {events.map((event) => (
-        <Item key={event.id} variant="outline" asChild role="listitem">
-          <Link to={`/event/${event.id}`}>
+        <Item key={event.publicId} variant="outline" asChild role="listitem">
+          <Link to={`/event/${event.publicId}`}>
             <ItemContent>
               <ItemTitle>
                 <h2 className="text-lg font-semibold line-clamp-1">
                   {event.title}
                 </h2>
               </ItemTitle>
               <ItemDescription>
-                {getDateLabel(undefined, event.registrationDeadline)}
+                {getDateLabel(undefined, event.registrationEndsAt)}
               </ItemDescription>
             </ItemContent>
             <ItemActions>

src/components/EventCardView.tsx

@@ -1,10 +1,10 @@
 import { ScrollArea } from '@/components/ui/scroll-area';
-import type { Event } from '@/types/schemas';
+import type { DetailedEvent } from '@/types/events';
 import { useNavigate } from 'react-router';
 import { formatEventDate } from '../utils/date';
 
 interface EventDetailContentProps {
-  schedule: Event;
+  schedule: DetailedEvent;
   currentParticipants: number;
 }
 
@@ -35,7 +35,7 @@ export default function EventDetailContent({
       {/* 1. 일시 및 장소 */}
       <div className="text-left space-y-3 w-full">
         <p className="text-lg sm:text-xl font-bold text-black">
-          일시 {formatEventDate(schedule.startAt)}
+          일시 {formatEventDate(schedule.startsAt)}
         </p>
         <p className="text-lg sm:text-xl font-bold text-black">
           장소 {schedule.location || '미정'}
@@ -44,7 +44,7 @@ export default function EventDetailContent({
 
       {/* 2. 신청 현황 버튼 */}
       <button
-        onClick={() => navigate(`/event/${schedule.id}/guests`)}
+        onClick={() => navigate(`/event/${schedule.publicId}/guests`)}
         className="flex items-center text-lg font-bold group hover:opacity-70 transition-opacity"
       >
         {schedule.capacity}명 중{' '}
@@ -65,8 +65,8 @@ export default function EventDetailContent({
 
       {/* 4. 마감 정보 (버튼 상단 문구) */}
       <p className="text-lg font-bold text-black">
-        {schedule.registrationDeadline
-          ? `${formatEventDate(schedule.registrationDeadline)} 모집 마감`
+        {schedule.registrationEndsAt
+          ? `${formatEventDate(schedule.registrationEndsAt)} 모집 마감`
           : '상시 모집'}
       </p>
     </div>