👽️ Use the API for event-related pages (#30)

### 📝 작업 내용

- 일정 상세 불러오기, 참여자 명단 불러오기, 일정 신청하기 api를 구현했습니다.
- 각 페이지에 하드코딩된 데이터를 지우고, api를 연결했습니다.

### 📸 스크린샷 (선택)

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

- api에서 추가로 필요한 필드가 몇가지 있습니다. 추후 백엔드와 협의해서 api를 수정해야 할 것 같습니다.
  - 참여자 명단에서 프로필 이미지와, 로그인 된 사람인 경우 이름이 없습니다.
  - 대기 번호 순번 필드가 필요합니다.
  - 몇 명이 참여했는지 필드가 없습니다.(이 부분은 프론트에서 구현이 쉬워 만들어 놓았습니다.)
  - 상태 코드 설정이 필요합니다.
 
- 하드 코딩 부분을 다 지웠습니다(Event.tsx와 Guests.tsx에는 주석처리, 나머지 페이지에서는 모두 삭제) 이에
따라 페이지 시현이 되지 않습니다. 중간 평가때는 일정 상세 및 신청 페이지는 하드코딩한 데이터로 평가 받고, 이후 이 PR을
머지하는 것도 좋을 것 같습니다.(오늘 3시 전에 연결이 잘 될지 모르겠네요...)

---------

Co-authored-by: PARK Junyoung <[email protected]>

Author: jun-0411

src/api/apiClient.ts

@@ -3,8 +3,9 @@ import useAuthStore from '../hooks/useAuthStore';
 
 // 공통 설정을 가진 axios 인스턴스 생성
 const apiClient = axios.create({
-  baseURL: '/api', // 모든 요청의 기본 경로
+  baseURL: 'http://3.35.89.220/api/v1', // 모든 요청의 기본 경로
   timeout: 5000,
+  headers: { 'Content-Type': 'application/json' },
 });
 
 // 요청 인터셉터: 모든 요청 직전에 실행됨

src/api/event.ts

@@ -0,0 +1,50 @@
+import type {
+  EventDetailResponse,
+  JoinEventRequest,
+  JoinEventResponse,
+  RegistrationListResponse,
+} from '../types/event';
+import apiClient from './apiClient';
+
+// 일정 상세 응답 (GET /api/events/:id)
+export const getEventDetail = async (id: string) => {
+  const response = await apiClient.get<EventDetailResponse>(`/events/${id}`);
+  return {
+    data: response.data,
+    status: response.status,
+  };
+};
+
+// 참여자 명단 (GET /api/events/:id/registrations)
+export const getRegistrations = async (id: string) => {
+  const response = await apiClient.get<RegistrationListResponse>(
+    `/events/${id}/registrations`
+  );
+  return response.data;
+};
+
+// 참여 신청 (POST /api/events/:id/registrations)
+export const registerEvent = async (id: string, data: JoinEventRequest) => {
+  const response = await apiClient.post<JoinEventResponse>(
+    `/events/${id}/registrations`,
+    data
+  );
+  return {
+    data: response.data,
+    status: response.status,
+  };
+};
+
+// 이벤트 신청 취소(POST /api/v1/events/{eventId}/registrations/{registrationId}/cancel)
+// export const cancelRegistration = async (
+//   eventId: string,
+//   registrationId: number,
+//   token: string
+// ) => {
+//   const response = await apiClient.post(
+//     `/events/${eventId}/registrations/${registrationId}/cancel`,
+//     null, // body는 비우고 query parameter로 전달
+//     { params: { token } }
+//   );
+//   return response.data;
+// };

src/components/EventDetailContent.tsx

@@ -1,10 +1,11 @@
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { useNavigate } from 'react-router';
-import type { Events } from '../types/schema';
+import type { Event } from '../types/event';
 import { formatEventDate } from '../utils/date';
 
-interface Props {
-  schedule: Events;
+interface EventDetailContentProps {
+  schedule: Event;
+  currentParticipants: number;
 }
 
 // 아이콘
@@ -23,15 +24,18 @@ const IconChevronLeft = () => (
   </svg>
 );
 
-export default function EventDetailContent({ schedule }: Props) {
+export default function EventDetailContent({
+  schedule,
+  currentParticipants,
+}: EventDetailContentProps) {
   const navigate = useNavigate();
 
   return (
     <div className="w-full flex flex-col items-start gap-10">
       {/* 1. 일시 및 장소 */}
       <div className="text-left space-y-3 w-full">
         <p className="text-lg sm:text-xl font-bold text-black">
-          일시 {formatEventDate(schedule.start_at)}
+          일시 {formatEventDate(schedule.startAt)}
         </p>
         <p className="text-lg sm:text-xl font-bold text-black">
           장소 {schedule.location || '미정'}
@@ -40,12 +44,12 @@ export default function EventDetailContent({ schedule }: Props) {
 
       {/* 2. 신청 현황 버튼 */}
       <button
-        onClick={() => navigate('guests')}
+        onClick={() => navigate(`/event/${schedule.id}/guests`)}
         className="flex items-center text-lg font-bold group hover:opacity-70 transition-opacity"
       >
         {schedule.capacity}명 중{' '}
         <span className="text-black ml-2 font-extrabold">
-          {/* 신청 인원 필드 필요 */}8명 신청
+          {currentParticipants}명 신청
         </span>
         <div className="rotate-180 ml-2 group-hover:translate-x-1 transition-transform text-black">
           <IconChevronLeft />
@@ -61,8 +65,8 @@ export default function EventDetailContent({ schedule }: Props) {
 
       {/* 4. 마감 정보 (버튼 상단 문구) */}
       <p className="text-lg font-bold text-black">
-        {schedule.registration_deadline
-          ? `${formatEventDate(schedule.registration_deadline)} 모집 마감`
+        {schedule.registrationDeadline
+          ? `${formatEventDate(schedule.registrationDeadline)} 모집 마감`
           : '상시 모집'}
       </p>
     </div>

src/components/GuestSummaryList.tsx

@@ -1,12 +1,8 @@
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
+import type { Guest } from '@/types/event';
 import { useNavigate } from 'react-router';
 
-interface Guest {
-  name: string;
-  img?: string;
-}
-
 interface Props {
   guests: Guest[];
   totalCount: number;
@@ -42,13 +38,13 @@ export default function GuestSummaryList({
           {guests.map((p, idx) => (
             <div key={idx} className="flex flex-col items-center gap-4">
               <Avatar className="w-16 h-16 border-none">
-                <AvatarImage src={p.img} />
+                <AvatarImage src={p.guestEmail ?? undefined} />
                 <AvatarFallback className="bg-black text-white text-xs">
-                  {p.name.slice(0, 2)}
+                  {p.guestName?.slice(0, 2)}
                 </AvatarFallback>
               </Avatar>
               <span className="text-sm font-bold text-gray-700 truncate w-full text-center">
-                {p.name}
+                {p.guestName}
               </span>
             </div>
           ))}

src/hooks/useEventDetail.ts

@@ -0,0 +1,97 @@
+import { isAxiosError } from 'axios';
+import { useCallback, useState } from 'react';
+import { toast } from 'sonner';
+import { getEventDetail, getRegistrations, registerEvent } from '../api/event';
+import type { Event, Guest, JoinEventRequest } from '../types/event';
+
+type EventFetchStatus =
+  | 'GUEST'
+  | 'ADMIN'
+  | 'REGISTERED'
+  | 'NOT_FOUND'
+  | 'ERROR';
+
+export default function useEventDetail() {
+  const [loading, setLoading] = useState<boolean>(false);
+  const [event, setEvent] = useState<Event | null>(null);
+  const [registrations, setRegistrations] = useState<Guest[]>([]);
+
+  // 1. 일정 상세 정보 로드 핸들러
+  const handleFetchDetail = useCallback(
+    async (id: string): Promise<EventFetchStatus> => {
+      setLoading(true);
+      try {
+        const [eventRes, guestsRes] = await Promise.all([
+          getEventDetail(id),
+          getRegistrations(id),
+        ]);
+        setEvent(eventRes.data);
+        setRegistrations(guestsRes);
+
+        if (eventRes.status === 202) return 'ADMIN';
+        if (eventRes.status === 204) return 'REGISTERED';
+        return 'GUEST';
+      } catch (error: unknown) {
+        if (isAxiosError(error)) {
+          if (error.response?.status === 404) return 'NOT_FOUND';
+        }
+        console.error('Fetch event detail failed:', error);
+        toast.error('일정 정보를 불러오지 못했습니다.');
+        return 'ERROR';
+      } finally {
+        setLoading(false);
+      }
+    },
+    []
+  );
+
+  // 2. 참여자 전체 명단 로드 핸들러
+  const handleFetchRegistrations = useCallback(async (id: string) => {
+    setLoading(true);
+    try {
+      const data = await getRegistrations(id);
+      setRegistrations(data);
+    } catch (error: unknown) {
+      console.error('Fetch registrations error:', error);
+      toast.error('참여자 명단을 불러오지 못했습니다.');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // 3. 참여 신청 로직 핸들러
+  const handleJoinEvent = async (
+    id: string,
+    data: JoinEventRequest
+  ): Promise<boolean> => {
+    setLoading(true);
+    try {
+      const { status } = await registerEvent(id, data);
+      return status === 200 || status === 201;
+    } catch (error: unknown) {
+      if (isAxiosError(error) && error.response?.status === 409) {
+        toast.error('이미 신청이 완료된 모임입니다.');
+      } else {
+        toast.error('신청 처리 중 오류가 발생했습니다.');
+      }
+      console.error('Join event error:', error);
+      return false;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const confirmedCount = registrations.filter(
+    (r) => r.status === 'CONFIRMED'
+  ).length;
+
+  return {
+    loading,
+    event,
+    registrations,
+    confirmedCount,
+    handleFetchDetail,
+    handleFetchRegistrations,
+    handleJoinEvent,
+  };
+}