Repository: GoTogether-Inc/frontend
Pull request #124: feat: 대시보드 메인페이지 API 연동
Author: login: Yejiin21
Labels: name: 🔧 Feature
description: 기능 구현
Created: 2025-05-12T11:09:17Z | Merged: 2025-05-13T07:36:36Z

### 작업 사항
- 호스트 대시보드 메인페이지 API 연동
- 대시보드 체크리스트 데이터 유무에 따라 UI 설정
- 날짜 포멧 데이터 설정

![스크린샷 2025-05-12 오후 8 06 12](https://github.com/user-attachments/assets/c47bc6cd-ca9d-466a-8c4d-7c5ed3961528)

### 추후 리팩토링 할 부분
- API return 타입을 대부분 response.data로 하고 각페이지마다 데이터를 불러올때 date.result.(변수명)으로 설정. 하지만 일부분에서는 response.data.result로 API return 타입을 설정하여서 타입 통일을 할 필요가 있다.

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **신규 기능**
  - 호스트 대시보드 데이터를 조회하는 API 및 커스텀 훅이 추가되었습니다.
  - 체크리스트 및 대시보드 페이지에서 호스트 대시보드 데이터를 활용하도록 개선되었습니다.
  - 날짜 선택 컴포넌트가 외부에서 날짜를 제어하고 변경 사항을 알릴 수 있도록 확장되었습니다.

- **버그 수정**
  - 이벤트 상세 페이지에서 이벤트 데이터 접근 방식이 일관되게 수정되었습니다.
  - 날짜 및 시간 포맷팅이 개선되어 일관된 형식으로 표시됩니다.

- **리팩터링**
  - 이벤트 정보 및 수정 페이지에서 이벤트 데이터 관리 방식이 명확하게 변경되었습니다.
  - 불필요한 유틸리티 함수가 제거되고, 관련 로직이 각 컴포넌트로 이동되었습니다.

- **스타일**
  - 체크리스트 진행률 표시 및 아이콘 표시가 조건에 따라 동적으로 변경됩니다.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->


Diff:
diff --git a/src/entities/event/api/event.ts b/src/entities/event/api/event.ts
index ab935158..4124666b 100644
--- a/src/entities/event/api/event.ts
+++ b/src/entities/event/api/event.ts
@@ -8,11 +8,14 @@ export const eventDetail = async (dto: EventDetailRequest) => {
   const response = await axiosClient.get(`/events/${dto.eventId}`, {
     params: { userId: dto.userId },
   });
-  return response.data.result;
+  return response.data;
 };
 
 // 이벤트 검색 (기본 정보)
-export const searchEvents = async (keyword: string, { page, size }: PaginationParams): Promise<ApiResponse<EventItem[]>> => {
+export const searchEvents = async (
+  keyword: string,
+  { page, size }: PaginationParams
+): Promise<ApiResponse<EventItem[]>> => {
   const params = new URLSearchParams();
 
   params.append('keyword', keyword);
@@ -20,7 +23,7 @@ export const searchEvents = async (keyword: string, { page, size }: PaginationPa
   params.append('size', size.toString());
 
   const response = await axiosClient.get<ApiResponse<EventItem[]>>(`/events/search?${params.toString()}`);
-  
+
   return response.data;
 };
 
diff --git a/src/entities/event/hook/useEventHook.ts b/src/entities/event/hook/useEventHook.ts
index cf72f632..7ab82739 100644
--- a/src/entities/event/hook/useEventHook.ts
+++ b/src/entities/event/hook/useEventHook.ts
@@ -11,8 +11,8 @@ const useEventDetail = () => {
 
   const { data } = useQuery({
     queryKey: ['eventDetail', eventId],
-    queryFn: () => eventDetail({ eventId, userId: user?.id  }),
-    enabled: !!user?.id, 
+    queryFn: () => eventDetail({ eventId, userId: user?.id }),
+    enabled: !!user?.id,
   });
 
   return { data };
diff --git a/src/entities/host/api/hostDashboard.ts b/src/entities/host/api/hostDashboard.ts
new file mode 100644
index 00000000..ff1a6e85
--- /dev/null
+++ b/src/entities/host/api/hostDashboard.ts
@@ -0,0 +1,13 @@
+import { axiosClient } from '../../../shared/types/api/http-client';
+import { HostDashboardResponse } from '../model/hostDashboard';
+import { ApiResponse } from '../../../shared/types/api/apiResponse';
+
+const hostDashboard = async (eventId: number) => {
+  const response = await axiosClient.get<ApiResponse<HostDashboardResponse>>(`/host-channels/dashboard`, {
+    params: { eventId },
+  });
+
+  return response.data.result;
+};
+
+export default hostDashboard;
diff --git a/src/entities/host/hook/hostDashboardHook.ts b/src/entities/host/hook/hostDashboardHook.ts
new file mode 100644
index 00000000..3f5b1b7f
--- /dev/null
+++ b/src/entities/host/hook/hostDashboardHook.ts
@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query';
+import hostDashboard from '../api/hostDashboard';
+import { useParams } from 'react-router-dom';
+
+const useHostDashboard = () => {
+  const { id } = useParams();
+
+  const eventId = Number(id);
+
+  const { data, refetch } = useQuery({
+    queryKey: ['hostDashboard', eventId],
+    queryFn: () => hostDashboard(eventId),
+    enabled: !!eventId,
+  });
+
+  return { data, refetch };
+};
+
+export default useHostDashboard;
diff --git a/src/entities/host/model/hostDashboard.ts b/src/entities/host/model/hostDashboard.ts
new file mode 100644
index 00000000..c8b6247e
--- /dev/null
+++ b/src/entities/host/model/hostDashboard.ts
@@ -0,0 +1,9 @@
+export interface HostDashboardResponse {
+  eventName: string;
+  eventStartDate: string;
+  eventEndDate: string;
+  totalTicketCnt: number;
+  totalPrice: number;
+  ticketOption: boolean;
+  ticket: boolean;
+}
diff --git a/src/features/dashboard/ui/Checklist.tsx b/src/features/dashboard/ui/Checklist.tsx
index 2c9ba53b..a9965b71 100644
--- a/src/features/dashboard/ui/Checklist.tsx
+++ b/src/features/dashboard/ui/Checklist.tsx
@@ -1,12 +1,14 @@
 import { useNavigate } from 'react-router-dom';
 import check from '../../../../public/assets/dashboard/main/Check.svg';
+import completeCheck from '../../../../public/assets/dashboard/main/Check(complete).svg';
 import { getMenuLists } from '../../../shared/types/dashboardType';
 import { useParams } from 'react-router-dom';
-// import completeCheck from '../../../../public/assets/dashboard/main/Check(complete).svg';
+import useHostDashboard from '../../../entities/host/hook/hostDashboardHook';
 
 const CheckList = () => {
   const { id } = useParams();
   const navigate = useNavigate();
+  const { data, refetch } = useHostDashboard();
 
   const menuLists = id ? getMenuLists(id) : []; // id가 있을 때만 리스트 생성
 
@@ -16,6 +18,22 @@ const CheckList = () => {
     )
     .map(items => ({ text: items.text, path: items.path }));
 
+  const getProgressStatus = (index: number) => {
+    const statusMap = {
+      0: true, // 이벤트 기본 정보는 항상 true
+      1: true, // 이벤트 상세와 사진은 항상 true
+      2: Boolean(data?.ticket), // 티켓 생성하기
+      3: Boolean(data?.ticketOption), // 티켓에 추가 옵션 부착
+    };
+
+    return statusMap[index as keyof typeof statusMap];
+  };
+
+  const handleNavigate = (path: string) => {
+    refetch();
+    navigate(path);
+  };
+
   return (
     <div className="flex flex-col w-full h-full bg-white shadow-md rounded-[10px] gap-4 px-4 py-6">
       <div className="flex flex-col">
@@ -23,14 +41,21 @@ const CheckList = () => {
         <h3 className="text-11 text-gray-500">이벤트를 열기 위해 꼭 필요한 정보에요.</h3>
       </div>
       <div className="flex w-full justify-between gap-2">
-        {[...Array(3)].map((_, index) => (
-          <div key={index} className="w-full h-[0.8vh] bg-gray-200 rounded-full" />
+        {[...Array(4)].map((_, index) => (
+          <div
+            key={index}
+            className={`w-full h-[0.8vh] rounded-full ${getProgressStatus(index) ? 'bg-main' : 'bg-gray-200'}`}
+          />
         ))}
       </div>
       <div className="flex flex-col gap-2">
         {checkLists.map((item, index) => (
-          <div key={index} onClick={() => navigate(item.path)} className="flex items-center gap-3 cursor-pointer">
-            <img src={check} alt="체크" className="w-4 h-4" />
+          <div key={index} onClick={() => handleNavigate(item.path)} className="flex items-center gap-3 cursor-pointer">
+            {getProgressStatus(index) ? (
+              <img src={completeCheck} alt="완료된 체크" className="w-4 h-4" />
+            ) : (
+              <img src={check} alt="체크" className="w-4 h-4" />
+            )}
             <div className="text-xs md:text-sm">{item.text}</div>
             <span className="font-bold">&gt;</span>
           </div>
diff --git a/src/features/event-manage/event-create/ui/DatePicker.tsx b/src/features/event-manage/event-create/ui/DatePicker.tsx
index 0f779fe3..fcff64dd 100644
--- a/src/features/event-manage/event-create/ui/DatePicker.tsx
+++ b/src/features/event-manage/event-create/ui/DatePicker.tsx
@@ -8,23 +8,55 @@ interface DatePickerProps {
   className?: string;
   eventState?: FunnelState['eventState'];
   setEventState?: React.Dispatch<React.SetStateAction<FunnelState['eventState']>>;
+  startDate?: string;
+  endDate?: string;
+  onStartDateChange?: (date: string) => void;
+  onEndDateChange?: (date: string) => void;
   isLabel?: boolean;
 }
 
-const EventDatePicker = ({ className, eventState, setEventState, isLabel = false }: DatePickerProps) => {
-  const [startDate, setStartDate] = useState<Date | null>(
-    eventState?.startDate ? new Date(eventState.startDate) : new Date()
-  );
-  const [endDate, setEndDate] = useState<Date | null>(eventState?.endDate ? new Date(eventState.endDate) : new Date());
+const EventDatePicker = ({
+  className,
+  eventState,
+  setEventState,
+  startDate: initialStartDate,
+  endDate: initialEndDate,
+  onStartDateChange,
+  onEndDateChange,
+  isLabel = false,
+}: DatePickerProps) => {
+  const [startDate, setStartDate] = useState<Date | null>(null);
+  const [endDate, setEndDate] = useState<Date | null>(null);
   const [startTime, setStartTime] = useState<string>('06:00');
   const [endTime, setEndTime] = useState<string>('23:00');
 
+  useEffect(() => {
+    const start = eventState?.startDate || initialStartDate;
+    const end = eventState?.endDate || initialEndDate;
+
+    if (start && !startDate) {
+      const startDate = new Date(start);
+      setStartDate(startDate);
+      const hours = startDate.getHours().toString().padStart(2, '0');
+      const minutes = startDate.getMinutes().toString().padStart(2, '0');
+      setStartTime(`${hours}:${minutes}`);
+    }
+
+    if (end && !endDate) {
+      const endDate = new Date(end);
+      setEndDate(endDate);
+      const hours = endDate.getHours().toString().padStart(2, '0');
+      const minutes = endDate.getMinutes().toString().padStart(2, '0');
+      setEndTime(`${hours}:${minutes}`);
+    }
+  }, [eventState, initialStartDate, initialEndDate]);
+
   const generateTimeOptions = () => {
     const options = [];
     for (let i = 0; i < 24; i++) {
       for (let j = 0; j < 4; j++) {
         const hour = i.toString().padStart(2, '0');
-        const minute = (j * 15).toString().padEnd(2, '0');
+        const minute = (j * 15).toString().padStart(2, '0');
         options.push(`${hour}:${minute}`);
       }
     }
@@ -34,7 +66,7 @@ const EventDatePicker = ({ className, eventState, setEventState, isLabel = false
   const timeOptions = generateTimeOptions();
 
   useEffect(() => {
-    if (setEventState && startDate && endDate) {
+    if (startDate && endDate) {
       const [startHour, startMin] = startTime.split(':').map(Number);
       const [endHour, endMin] = endTime.split(':').map(Number);
 
@@ -44,13 +76,26 @@ const EventDatePicker = ({ className, eventState, setEventState, isLabel = false
       const end = new Date(endDate);
       end.setHours(endHour, endMin, 0, 0);
 
-      setEventState(prev => ({
-        ...prev,
-        startDate: start.toISOString(),
-        endDate: end.toISOString(),
-      }));
+      const startISO = new Date(start.getTime() + 9 * 60 * 60 * 1000).toISOString();
+      const endISO = new Date(end.getTime() + 9 * 60 * 60 * 1000).toISOString();
+
+      if (setEventState) {
+        setEventState(prev => ({
+          ...prev,
+          startDate: startISO,
+          endDate: endISO,
+        }));
+      }
+
+      if (onStartDateChange) {
+        onStartDateChange(startISO);
+      }
+
+      if (onEndDateChange) {
+        onEndDateChange(endISO);
+      }
     }
-  }, [startDate, endDate, startTime, endTime, setEventState]);
+  }, [startDate, endDate, startTime, endTime, setEventState, onStartDateChange, onEndDateChange]);
 
   return (
     <div className={`flex flex-col w-full ${className}`}>
diff --git a/src/pages/dashboard/ui/DashbaordPage.tsx b/src/pages/dashboard/ui/DashbaordPage.tsx
index 86c6be57..6141dd76 100644
--- a/src/pages/dashboard/ui/DashbaordPage.tsx
+++ b/src/pages/dashboard/ui/DashbaordPage.tsx
@@ -4,26 +4,27 @@ import TicketRevenue from '../../../widgets/dashboard/ui/TicketRevenue';
 import ticket from '../../../../public/assets/dashboard/main/Ticket(white).svg';
 import cash from '../../../../public/assets/dashboard/main/Cash.svg';
 import CheckList from '../../../features/dashboard/ui/Checklist';
-import { useGetEventHook } from '../../../features/dashboard/hook/useEventHook';
+import useHostDashboard from '../../../entities/host/hook/hostDashboardHook';
+
 const DashboardPage = () => {
-  const { eventInfo } = useGetEventHook();
+  const { data } = useHostDashboard();
 
   return (
     <DashboardLayout centerContent="대시보드" pinkBg={true}>
       <div className="flex flex-col mt-8 md:mt-13 px-7 gap-4">
-        <h1 className="text-2xl font-bold">{eventInfo?.eventName || '이벤트 이름 없음'}</h1>
+        <h1 className="text-2xl font-bold">{data?.eventName || '이벤트 이름 없음'}</h1>
         <CheckList />
-        <EventOverview eventInfo={eventInfo} />
+        <EventOverview eventInfo={data} />
         <div className="flex w-full justify-between gap-3">
           <TicketRevenue
             icon={<img src={ticket} alt="티켓" className="w-8 md:w-9" />}
             title="티켓 판매 수"
-            value={`${eventInfo?.totalTicketCnt || '-'}장`}
+            value={`${data?.totalTicketCnt || '-'}장`}
           />
           <TicketRevenue
             icon={<img src={cash} alt="돈" className="w-8 md:w-9" />}
             title="판매 금액"
-            value={`${eventInfo?.totalPrice || '-'}원`}
+            value={`${data?.totalPrice || '-'}원`}
           />
         </div>
       </div>
diff --git a/src/pages/dashboard/ui/EventDetailPage.tsx b/src/pages/dashboard/ui/EventDetailPage.tsx
index c472897d..0a75313a 100644
--- a/src/pages/dashboard/ui/EventDetailPage.tsx
+++ b/src/pages/dashboard/ui/EventDetailPage.tsx
@@ -7,7 +7,8 @@ import TextEditor from '../../../features/event-manage/event-create/ui/TextEdito
 import DashboardLayout from '../../../shared/ui/backgrounds/DashboardLayout';
 import useEventDetail from '../../../entities/event/hook/useEventHook';
 import { useUpdateEventHook } from '../../../features/dashboard/hook/useEventHook';
-import { formatEventRequest } from '../../../shared/lib/formatEventRequest';
+import { UpdateEventRequest } from '../../../features/dashboard/model/event';
+import { OnlineType } from '../../../shared/types/baseEventType';
 
 const EventDetailPage = () => {
   const navigate = useNavigate();
@@ -31,16 +32,26 @@ const EventDetailPage = () => {
   const handleSave = () => {
     if (!data?.result.id) return;
 
-    const formatData = formatEventRequest(data.result);
-
-    const finalPayload = {
-      ...formatData,
-      hostChannelId,
-      bannerImageUrl,
-      description,
-      referenceLinks: referenceLinks.map(({ title, url }) => ({ title, url })),
+    const requestData: UpdateEventRequest = {
+      hostChannelId: data.result.hostChannelId || hostChannelId,
+      title: data.result.title,
+      startDate: data.result.startDate,
+      endDate: data.result.endDate,
+      bannerImageUrl: bannerImageUrl || data.result.bannerImageUrl || '',
+      description: description || data.result.description || '',
+      referenceLinks: referenceLinks.map(({ title, url }) => ({ title, url })) || data.result.referenceLinks || [],
+      onlineType: data.result.onlineType as OnlineType,
+      address: data.result.address || '',
+      detailAddress: data.result.detailAddress || '',
+      locationLat: data.result.locationLat || 0,
+      locationLng: data.result.locationLng || 0,
+      category: data.result.category || 'DEVELOPMENT_STUDY',
+      hashtags: data.result.hashtags || [],
+      organizerEmail: data.result.organizerEmail || '',
+      organizerPhoneNumber: data.result.organizerPhoneNumber || '',
     };
-    mutate(finalPayload, {
+
+    mutate(requestData, {
       onSuccess: () => {
         alert('이벤트 정보가 저장되었습니다.');
         navigate(`/dashboard/${data?.result.id}`);
diff --git a/src/pages/dashboard/ui/EventInfoPage.tsx b/src/pages/dashboard/ui/EventInfoPage.tsx
index cd6f81d8..aeec62dd 100644
--- a/src/pages/dashboard/ui/EventInfoPage.tsx
+++ b/src/pages/dashboard/ui/EventInfoPage.tsx
@@ -7,10 +7,10 @@ import { useNavigate } from 'react-router-dom';
 import Button from '../../../../design-system/ui/Button';
 import useEventDetail from '../../../entities/event/hook/useEventHook';
 import { useUpdateEventHook } from '../../../features/dashboard/hook/useEventHook';
-import { formatEventRequest } from '../../../shared/lib/formatEventRequest';
 import { OnlineType } from '../../../shared/types/baseEventType';
 import { AddressSearch } from '../../../shared/ui/AddressSearch';
 import KakaoMap from '../../../shared/ui/KakaoMap';
+import { UpdateEventRequest } from '../../../features/dashboard/model/event';
 
 const EventInfoPage = () => {
   const navigate = useNavigate();
@@ -32,41 +32,41 @@ const EventInfoPage = () => {
   const [detailAddress, setDetailAddress] = useState('');
   const [locationLat, setLocationLat] = useState<number>(0);
   const [locationLng, setLocationLng] = useState<number>(0);
+  const [startDate, setStartDate] = useState<string>('');
+  const [endDate, setEndDate] = useState<string>('');
 
   const handleSave = () => {
     if (!data?.result.id) return;
 
-    const formatData = formatEventRequest(data.result);
-
-    const toIsoDateTime = (date: string, time: string) => {
-      return `${date}T${time}`;
+    const requestData: UpdateEventRequest = {
+      hostChannelId: data.result.hostChannelId || hostChannelId,
+      title: title || data.result.title,
+      startDate: startDate || data.result.startDate,
+      endDate: endDate || data.result.endDate,
+      bannerImageUrl: data.result.bannerImageUrl || '',
+      description: data.result.description || '',
+      referenceLinks: data.result.referenceLinks || [],
+      onlineType: (selectedOption || data.result.onlineType) as OnlineType,
+      address: address || data.result.address || '',
+      detailAddress: detailAddress || data.result.detailAddress || '',
+      locationLat: locationLat || data.result.locationLat || 0,
+      locationLng: locationLng || data.result.locationLng || 0,
+      category: data.result.category || 'DEVELOPMENT_STUDY',
+      hashtags: data.result.hashtags || [],
+      organizerEmail: email || data.result.organizerEmail || '',
+      organizerPhoneNumber: phone || data.result.organizerPhoneNumber || '',
     };
 
-    mutate(
-      {
-        ...formatData,
-        hostChannelId,
-        title,
-        startDate: toIsoDateTime(data.result.startDate, data.result.startTime),
-        endDate: toIsoDateTime(data.result.endDate, data.result.endTime),
-        organizerEmail: email,
-        organizerPhoneNumber: phone,
-        onlineType: selectedOption as OnlineType,
-        address,
-        detailAddress,
-        locationLat,
-        locationLng,
+    mutate(requestData, {
+      onSuccess: () => {
+        alert('이벤트 정보가 저장되었습니다.');
+        navigate(`/dashboard/${data?.result.id}`);
+      },
+      onError: error => {
+        console.error('Error details:', error);
+        alert('저장에 실패했습니다.');
       },
-      {
-        onSuccess: () => {
-          alert('이벤트 정보가 저장되었습니다.');
-          navigate(`/dashboard/${data?.result.id}`);
-        },
-        onError: () => {
-          alert('저장에 실패했습니다.');
-        },
-      }
-    );
+    });
   };
 
   useEffect(() => {
@@ -82,6 +82,8 @@ const EventInfoPage = () => {
       setDetailAddress(info.detailAddress);
       setLocationLat(info.locationLat || 0);
       setLocationLng(info.locationLng || 0);
+      setStartDate(info.startDate);
+      setEndDate(info.endDate);
     }
   }, [data]);
 
@@ -96,7 +98,12 @@ const EventInfoPage = () => {
           value={title}
           onChange={e => setTitle(e.target.value)}
         />
-        <EventDatePicker />
+        <EventDatePicker
+          startDate={startDate}
+          endDate={endDate}
+          onStartDateChange={setStartDate}
+          onEndDateChange={setEndDate}
+        />
         <DefaultTextField
           label="주최자 이메일"
           placeholder="example@example.com"
diff --git a/src/pages/event/ui/EventDetailsPage.tsx b/src/pages/event/ui/EventDetailsPage.tsx
index 2bae0851..3babc87e 100644
--- a/src/pages/event/ui/EventDetailsPage.tsx
+++ b/src/pages/event/ui/EventDetailsPage.tsx
@@ -40,9 +40,9 @@ const EventDetailsPage = () => {
       if (event.bookmarkId === null) {
         return;
       }
-      deleteBookmark({ eventId: event.id, bookmarkId: event.bookmarkId });
+      deleteBookmark({ eventId: event.result.id, bookmarkId: event.result.bookmarkId });
     } else {
-      createBookmark(event.id);
+      createBookmark(event.result.id);
     }
   };
 
@@ -65,24 +65,24 @@ const EventDetailsPage = () => {
       />
       {event ? (
         <>
-          <img src={event.bannerImageUrl} alt="이벤트 배너" className="w-full h-64 mb-6" />
+          <img src={event.result.bannerImageUrl} alt="이벤트 배너" className="w-full h-64 mb-6" />
           <div className="flex flex-col gap-3 px-4 md:px-6">
-            <div key={event.id} className="flex flex-col gap-2">
-              <h1 className="text-xl md:text-2xl font-bold">{event.title}</h1>
+            <div key={event.result.id} className="flex flex-col gap-2">
+              <h1 className="text-xl md:text-2xl font-bold">{event.result.title}</h1>
               <div className="flex justify-between items-center gap-1">
                 <div className="flex gap-2">
                   <img src={participantsImg} alt="인원수 이미지" />
                   <span className="font-bold text-base md:text-lg py-2">
-                    현재 {event.participantCount}명이 참가 신청했습니다.
+                    현재 {event.result.participantCount}명이 참가 신청했습니다.
                   </span>
                 </div>
                 <div className="flex gap-3">
                   <IconButton
                     iconPath={<img src={share} alt="공유하기 버튼" />}
-                    onClick={() => handleShareClick(event.title)}
+                    onClick={() => handleShareClick(event.result.title)}
                   />
                   <IconButton
-                    iconPath={<img src={event.bookmarked ? liked : like} alt="좋아요 버튼" />}
+                    iconPath={<img src={event.result.bookmarked ? liked : like} alt="좋아요 버튼" />}
                     onClick={handleLikeClick}
                   />
                 </div>
@@ -90,34 +90,34 @@ const EventDetailsPage = () => {
               <div className="flex gap-2">
                 <img src={dateImg} alt="달력 이미지" />
                 <span className="text-sm md:text-base">
-                  {formatDate(event.startDate)} ~ {formatDate(event.endDate)}
+                  {formatDate(event.result.startDate)} ~ {formatDate(event.result.endDate)}
                 </span>
               </div>
               <div className="flex gap-2">
                 <img src={timeImg} alt="시간 이미지" />
                 <span className="text-sm md:text-base">
-                  {formatTime(event.startDate)} ~ {formatTime(event.endDate)}
+                  {formatTime(event.result.startDate)} ~ {formatTime(event.result.endDate)}
                 </span>
               </div>
               <div className="flex gap-2">
                 <img src={locationImg} alt="위치 이미지" />
-                <span className="text-sm md:text-base">{event.address}</span>
+                <span className="text-sm md:text-base">{event.result.address}</span>
               </div>
-              <span className="text-sm md:text-base py-3">{event.description}</span>
+              <span className="text-sm md:text-base py-3">{event.result.description}</span>
             </div>
 
             <h2 className="font-bold text-xl">위치</h2>
-            <KakaoMap lat={event.locationLat} lng={event.locationLng} />
+            <KakaoMap lat={event.result.locationLat} lng={event.result.locationLng} />
 
             <OrganizerInfo
-              name={event.hostChannelName}
-              description={event.hostChannelDescription}
-              phone={event.organizerPhoneNumber}
-              email={event.organizerEmail}
+              name={event.result.hostChannelName}
+              description={event.result.hostChannelDescription}
+              phone={event.result.organizerPhoneNumber}
+              email={event.result.organizerEmail}
             />
 
             <h2 className="font-bold text-xl">티켓 옵션</h2>
-            <TicketInfo eventId={event.id} />
+            <TicketInfo eventId={event.result.id} />
 
             <div className="flex flex-col gap-2">
               <h2 className="font-bold text-xl">관련 링크</h2>
diff --git a/src/shared/lib/formatEventRequest.ts b/src/shared/lib/formatEventRequest.ts
deleted file mode 100644
index 3a5951a9..00000000
--- a/src/shared/lib/formatEventRequest.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { BaseEvent } from '../types/baseEventType';
-
-export const formatEventRequest = (data: Partial<BaseEvent>): BaseEvent => ({
-  title: data.title || '',
-  startDate: data.startDate || '',
-  endDate: data.endDate || '',
-  bannerImageUrl: data.bannerImageUrl || '',
-  description: data.description || '',
-  referenceLinks: data.referenceLinks || [],
-  onlineType: data.onlineType || 'ONLINE',
-  address: data.address || '',
-  detailAddress: data.detailAddress || '',
-  locationLat: data.locationLat || 0,
-  locationLng: data.locationLng || 0,
-  category: data.category || 'DEVELOPMENT_STUDY',
-  hashtags: data.hashtags || [],
-  organizerEmail: data.organizerEmail || '',
-  organizerPhoneNumber: data.organizerPhoneNumber || '',
-});
diff --git a/src/widgets/dashboard/ui/EventOverview.tsx b/src/widgets/dashboard/ui/EventOverview.tsx
index 2d4a5308..14c8cfb7 100644
--- a/src/widgets/dashboard/ui/EventOverview.tsx
+++ b/src/widgets/dashboard/ui/EventOverview.tsx
@@ -1,6 +1,7 @@
-import { dashboardData } from '../../../shared/types/dashboardType';
+import { HostDashboardResponse } from '../../../entities/host/model/hostDashboard';
+import { formatDate, formatTime } from '../../../shared/lib/date';
 
-const EventOverview = ({ eventInfo }: { eventInfo?: dashboardData }) => {
+const EventOverview = ({ eventInfo }: { eventInfo?: HostDashboardResponse }) => {
   return (
     <div className="flex flex-col w-full h-full bg-white shadow-md rounded-[10px] gap-5 px-4 py-6">
       <div>
@@ -14,12 +15,16 @@ const EventOverview = ({ eventInfo }: { eventInfo?: dashboardData }) => {
         </h4>
         <div className="flex gap-2">
           <span>
-            {' '}
-            {/*@TODO 포맷팅?*/}
-            {eventInfo ? `${eventInfo.eventStartDate} ${eventInfo.eventStartTime}` : '날짜 정보 없음'}
+            {eventInfo
+              ? `${formatDate(eventInfo.eventStartDate)} ${formatTime(eventInfo.eventStartDate)}`
+              : '날짜 정보 없음'}
           </span>
           <span>&gt;</span>
-          <span>{eventInfo ? `${eventInfo.eventEndDate} ${eventInfo.eventEndTime}` : '날짜 정보 없음'} </span>
+          <span>
+            {eventInfo
+              ? `${formatDate(eventInfo.eventEndDate)} ${formatTime(eventInfo.eventEndDate)}`
+              : '날짜 정보 없음'}
+          </span>
         </div>
       </div>
     </div>


Reviews:
user: login: coderabbitai[bot]
body: **Actionable comments posted: 5**

<details>
<summary>🔭 Outside diff range comments (1)</summary><blockquote>

<details>
<summary>src/pages/event/ui/EventDetailsPage.tsx (1)</summary><blockquote>

`39-46`: _⚠️ Potential issue_

**데이터 접근 방식에 일관성 없음**

여기 북마크 관련 처리에서 일관성 문제가 있습니다. 북마크 여부 확인 시에는 `event.bookmarked`와 `event.bookmarkId`를 사용하지만, 실제 함수 호출에서는 `event.result.id`와 `event.result.bookmarkId`를 사용합니다.

다음과 같이 모든 event 데이터 접근을 일관되게 수정하세요:

```diff
  const handleLikeClick = () => {
-    if (event.bookmarked) {
-      if (event.bookmarkId === null) {
+    if (event.result.bookmarked) {
+      if (event.result.bookmarkId === null) {
        return;
      }
      deleteBookmark({ eventId: event.result.id, bookmarkId: event.result.bookmarkId });
    } else {
      createBookmark(event.result.id);
    }
  };
```

</blockquote></details>

</blockquote></details>

<details>
<summary>🧹 Nitpick comments (2)</summary><blockquote>

<details>
<summary>src/pages/dashboard/ui/DashbaordPage.tsx (1)</summary><blockquote>

`27-28`: **판매 금액 표시에 적절한 fallback 처리가 되었습니다.**

데이터가 없을 경우의 fallback 처리가 잘 되어 있습니다.


파일 이름에 오타가 있습니다: `DashbaordPage.tsx`는 `DashboardPage.tsx`로 수정하는 것이 좋습니다.

</blockquote></details>
<details>
<summary>src/entities/host/model/hostDashboard.ts (1)</summary><blockquote>

`1-9`: **인터페이스 명확성 개선 제안**

인터페이스 구조는 명확하지만, 각 필드에 대한 설명이 없어 특히 `ticketOption`과 `ticket` 불리언 필드의 목적이 불분명합니다.


아래와 같이 JSDoc 주석을 추가하여 각 필드의 용도를 명확히 하는 것이 좋습니다:

```diff
+/**
+ * 호스트 대시보드 응답 데이터 인터페이스
+ */
 export interface HostDashboardResponse {
+  /** 이벤트 이름 */
   eventName: string;
+  /** 이벤트 시작 일시 (ISO 8601 형식) */
   eventStartDate: string;
+  /** 이벤트 종료 일시 (ISO 8601 형식) */
   eventEndDate: string;
+  /** 총 티켓 수량 */
   totalTicketCnt: number;
+  /** 총 가격 */
   totalPrice: number;
+  /** 티켓 옵션 활성화 여부 */
   ticketOption: boolean;
+  /** 티켓 생성 여부 */
   ticket: boolean;
 }
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 92c43d17fde3d233b9b128be6ebb8914c9848ef9 and 5252efea5e6e120ce136a546707bd76c73cdc2d0.

</details>

<details>
<summary>📒 Files selected for processing (10)</summary>

* `src/entities/event/api/event.ts` (1 hunks)
* `src/entities/event/hook/useEventHook.ts` (1 hunks)
* `src/entities/host/api/hostDashboard.ts` (1 hunks)
* `src/entities/host/hook/hostDashboardHook.ts` (1 hunks)
* `src/entities/host/model/hostDashboard.ts` (1 hunks)
* `src/features/dashboard/ui/Checklist.tsx` (2 hunks)
* `src/pages/dashboard/ui/DashbaordPage.tsx` (1 hunks)
* `src/pages/event/ui/EventDetailsPage.tsx` (2 hunks)
* `src/pages/search/ui/SearchPage.tsx` (1 hunks)
* `src/widgets/dashboard/ui/EventOverview.tsx` (2 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧬 Code Graph Analysis (4)</summary>

<details>
<summary>src/entities/event/hook/useEventHook.ts (1)</summary><blockquote>

<details>
<summary>src/entities/event/api/event.ts (1)</summary>

* `eventDetail` (7-12)

</details>

</blockquote></details>
<details>
<summary>src/entities/event/api/event.ts (3)</summary><blockquote>

<details>
<summary>src/entities/event/model/event.ts (2)</summary>

* `PaginationParams` (19-22)
* `EventItem` (30-34)

</details>
<details>
<summary>src/shared/types/api/apiResponse.ts (1)</summary>

* `ApiResponse` (1-5)

</details>
<details>
<summary>src/shared/types/api/http-client.ts (1)</summary>

* `axiosClient` (6-13)

</details>

</blockquote></details>
<details>
<summary>src/entities/host/api/hostDashboard.ts (3)</summary><blockquote>

<details>
<summary>src/shared/types/api/http-client.ts (1)</summary>

* `axiosClient` (6-13)

</details>
<details>
<summary>src/shared/types/api/apiResponse.ts (1)</summary>

* `ApiResponse` (1-5)

</details>
<details>
<summary>src/entities/host/model/hostDashboard.ts (1)</summary>

* `HostDashboardResponse` (1-9)

</details>

</blockquote></details>
<details>
<summary>src/widgets/dashboard/ui/EventOverview.tsx (2)</summary><blockquote>

<details>
<summary>src/entities/host/model/hostDashboard.ts (1)</summary>

* `HostDashboardResponse` (1-9)

</details>
<details>
<summary>src/shared/lib/date.ts (2)</summary>

* `formatDate` (1-9)
* `formatTime` (10-15)

</details>

</blockquote></details>

</details>

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (1)</summary>

* GitHub Check: storybook

</details>

<details>
<summary>🔇 Additional comments (17)</summary><blockquote>

<details>
<summary>src/pages/search/ui/SearchPage.tsx (1)</summary>

`85-85`: **EventCard 컴포넌트에 id prop 추가 구현이 잘되었습니다.**

이벤트 카드에 id prop을 추가한 변경사항은 PR 목표에 맞게 API 응답 데이터 구조 표준화를 지원합니다. 이것은 향후 API 반환 타입을 일관되게 만들기 위한 좋은 단계입니다.

</details>
<details>
<summary>src/pages/dashboard/ui/DashbaordPage.tsx (5)</summary>

`7-8`: **새로운 useHostDashboard 훅 import 잘 구현되었습니다.**

대시보드 페이지에서 새롭게 구현된 `useHostDashboard` 훅을 import하는 변경이 적절하게 이루어졌습니다.

---

`10-10`: **useHostDashboard 훅 사용으로 변경 잘 적용되었습니다.**

기존 훅에서 새로운 `useHostDashboard` 훅으로의 변경이 깔끔하게 이루어졌습니다.

---

`15-15`: **이벤트 이름 표시에 대한 fallback 처리가 적절합니다.**

데이터가 없을 경우의 fallback 텍스트 처리가 잘 되어 있습니다.

---

`17-17`: **EventOverview 컴포넌트에 데이터 전달 방식 변경이 잘 적용되었습니다.**

새로운 데이터 구조에 맞게 `eventInfo` 속성에 `data`를 전달하도록 변경되었습니다.

---

`22-23`: **티켓 판매 수 표시에 적절한 fallback 처리가 되었습니다.**

데이터가 없을 경우의 fallback 처리가 잘 되어 있습니다.

</details>
<details>
<summary>src/entities/event/api/event.ts (2)</summary>

`15-18`: **함수 시그니처 개선**

`searchEvents` 함수의 시그니처가 가독성 있게 재구성되었습니다. 가독성이 좋아졌네요!

---

`7-11`: <details>
<summary>✅ Verification successful</summary>

**API 반환 패턴 변경에 대한 주의**

`eventDetail` 함수가 이전에는 `response.data.result`를 반환했을 것으로 추정되나, 이제 `response.data` 전체를 반환하도록 변경되었습니다. 이는 PR 설명에서 언급된 API 반환 타입 통일을 위한 일부로 보입니다.


이 변경으로 인해 `eventDetail` 함수를 사용하는 컴포넌트에서는 데이터 접근 방식을 수정해야 할 수 있습니다:

---

🏁 Script executed:

```shell
#!/bin/bash
# eventDetail 함수 사용 패턴 확인
echo "eventDetail 함수 사용 패턴 확인..."
rg -A 3 "eventDetail\(" src/
```

Length of output: 348

---

🏁 Script executed:

```shell
#!/bin/bash
# useEventHook.ts 전체 내용 확인
cat src/entities/event/hook/useEventHook.ts
```

Length of output: 609

---

🏁 Script executed:

```shell
#!/bin/bash
# useEventDetail 훅 사용 위치 확인
echo "useEventDetail 사용 위치 검색 중..."
rg -n "useEventDetail" src/
```

Length of output: 839

---

🏁 Script executed:

```shell
#!/bin/bash
# 페이지에서 eventDetail 반환값 사용 방식 확인
echo "=== EventInfoPage.tsx ==="
cat src/pages/dashboard/ui/EventInfoPage.tsx
echo ""
echo "=== EventDetailPage.tsx ==="
cat src/pages/dashboard/ui/EventDetailPage.tsx
echo ""
echo "=== EventDetailsPage.tsx ==="
cat src/pages/event/ui/EventDetailsPage.tsx
```

Length of output: 13844

---



</details>

**eventDetail 반환 형태 확인 완료 – 변경 반영됨**

`eventDetail`이 이제 `response.data` 전체를 반환하고, 이를 사용하는 훅과 페이지들에서 모두 `data?.result`로 접근하도록 이미 업데이트된 것을 확인했습니다. 추가 수정이 필요 없습니다.

</details>
<details>
<summary>src/widgets/dashboard/ui/EventOverview.tsx (3)</summary>

`1-2`: **적절한 타입 및 유틸리티 함수 가져오기**

기존 `dashboardData` 타입 대신 `HostDashboardResponse` 타입을 사용하고, 날짜 형식화를 위한 유틸리티 함수를 가져오도록 변경되었습니다. 이는 올바른 접근법입니다.

---

`4-4`: **컴포넌트 프롭 타입 업데이트**

컴포넌트 프롭 타입이 새로운 `HostDashboardResponse` 인터페이스에 맞게 올바르게 업데이트되었습니다.

---

`18-27`: **날짜 형식화 개선**

날짜 표시 방식이 하드코딩된 문자열 연결에서 재사용 가능한 유틸리티 함수를 사용하는 방식으로 개선되었습니다. 이런 접근법은 날짜 형식을 일관되게 유지하는 데 도움이 됩니다.



조건부 렌더링도 적절하게 처리되어 `eventInfo`가 없을 경우 "날짜 정보 없음"을 표시합니다.

</details>
<details>
<summary>src/pages/event/ui/EventDetailsPage.tsx (1)</summary>

`68-120`: **이벤트 데이터 접근 개선**

이벤트 데이터를 `event.result` 객체를 통해 일관되게 접근하도록 수정한 것이 좋습니다. 이는 PR 목표에 언급된 API 반환 타입 통일화 작업과 일치합니다.

</details>
<details>
<summary>src/features/dashboard/ui/Checklist.tsx (5)</summary>

`3-6`: **리소스 및 훅 추가 적절**

완료 상태를 표시하기 위한 아이콘과 대시보드 데이터를 가져오기 위한 훅을 적절하게 추가했습니다.

---

`11-11`: **대시보드 데이터 사용 구현**

호스트 대시보드 데이터를 가져오기 위한 훅 사용이 적절합니다. 데이터와 함께 refetch 함수도 가져와 상태 업데이트에 활용하고 있습니다.

---

`32-35`: **네비게이션 처리 함수 적절**

네비게이션 전 데이터를 다시 가져오는 함수가 적절하게 구현되었습니다. 페이지 이동 시 최신 상태를 유지하는 데 도움이 됩니다.

---

`44-49`: **진행 상태 표시 UI 구현 적절**

진행 상태에 따라 프로그레스 바의 색상이 변경되도록 구현이 잘 되었습니다. 사용자에게 시각적 피드백을 적절히 제공합니다.

---

`53-58`: **체크리스트 아이콘 조건부 표시 적절**

완료 상태에 따라 체크 아이콘을 다르게 표시하는 구현이 잘 되었습니다. 사용자에게 명확한 시각적 피드백을 제공합니다.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-05-12T11:13:23Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 1**

<details>
<summary>🧹 Nitpick comments (1)</summary><blockquote>

<details>
<summary>src/pages/dashboard/ui/EventDetailPage.tsx (1)</summary><blockquote>

`35-52`: **UpdateEventRequest 객체 구성이 체계적으로 구현됨**

기존 formatEventRequest 유틸리티 함수 대신 명시적으로 UpdateEventRequest 객체를 구성하는 방식으로 변경한 것이 좋습니다. 각 필드마다 fallback 값을 제공하여 데이터 무결성을 보장하고 있습니다.

다만, `data.result`가 존재하는지 확인하는 방어적인 코드가 추가되면 더 안전할 것 같습니다.


```diff
 const requestData: UpdateEventRequest = {
-  hostChannelId: data.result.hostChannelId || hostChannelId,
+  hostChannelId: data?.result?.hostChannelId || hostChannelId,
   title: data.result.title,
   startDate: data.result.startDate,
   endDate: data.result.endDate,
   // ... 다른 필드들
 };
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 5252efea5e6e120ce136a546707bd76c73cdc2d0 and ee6d293eb8ca94b328be818e5ea9753d62c6598f.

</details>

<details>
<summary>📒 Files selected for processing (6)</summary>

* `src/entities/host/hook/hostDashboardHook.ts` (1 hunks)
* `src/features/dashboard/ui/Checklist.tsx` (2 hunks)
* `src/features/event-manage/event-create/ui/DatePicker.tsx` (3 hunks)
* `src/pages/dashboard/ui/EventDetailPage.tsx` (2 hunks)
* `src/pages/dashboard/ui/EventInfoPage.tsx` (4 hunks)
* `src/shared/lib/formatEventRequest.ts` (0 hunks)

</details>

<details>
<summary>💤 Files with no reviewable changes (1)</summary>

* src/shared/lib/formatEventRequest.ts

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (2)</summary>

* src/entities/host/hook/hostDashboardHook.ts
* src/features/dashboard/ui/Checklist.tsx

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧬 Code Graph Analysis (2)</summary>

<details>
<summary>src/pages/dashboard/ui/EventDetailPage.tsx (2)</summary><blockquote>

<details>
<summary>src/features/dashboard/model/event.ts (1)</summary>

* `UpdateEventRequest` (3-10)

</details>
<details>
<summary>src/shared/types/baseEventType.ts (1)</summary>

* `OnlineType` (1-1)

</details>

</blockquote></details>
<details>
<summary>src/pages/dashboard/ui/EventInfoPage.tsx (2)</summary><blockquote>

<details>
<summary>src/features/dashboard/model/event.ts (1)</summary>

* `UpdateEventRequest` (3-10)

</details>
<details>
<summary>src/shared/types/baseEventType.ts (1)</summary>

* `OnlineType` (1-1)

</details>

</blockquote></details>

</details>

</details>

<details>
<summary>🔇 Additional comments (15)</summary><blockquote>

<details>
<summary>src/pages/dashboard/ui/EventDetailPage.tsx (2)</summary>

`10-11`: **적절한 import 추가**

새로운 타입을 가져오는 import 문이 깔끔하게 추가되었습니다.

---

`54-54`: **mutate 호출 구조 변경**

요청 데이터를 명시적으로 전달하는 방식으로 변경되었습니다. 이는 코드의 가독성과 유지보수성을 향상시킵니다.

</details>
<details>
<summary>src/pages/dashboard/ui/EventInfoPage.tsx (6)</summary>

`13-13`: **필요한 타입 import 추가**

UpdateEventRequest 타입을 명시적으로 가져와서 타입 안정성을 높였습니다.

---

`35-36`: **날짜 상태 변수의 명시적 관리**

`startDate`와 `endDate` 상태 변수를 추가하여 날짜 정보를 명시적으로 관리하는 것은 좋은 개선입니다. 이를 통해 날짜 정보의 관리가 더 명확해집니다.

---

`41-58`: **UpdateEventRequest 객체 구성이 개선됨**

이전의 formatEventRequest 유틸리티 함수 대신 명시적으로 UpdateEventRequest 객체를 구성하는 방식으로 변경한 것이 좋습니다. 각 필드마다 현재 상태 값과 data.result의 값을 적절하게 체크하고 fallback을 제공하고 있습니다.

---

`60-68`: **에러 핸들링 개선**

에러 발생 시 `console.error`를 통해 자세한 에러 정보를 로깅하는 기능이 추가되었습니다. 이는 디버깅과 문제 해결에 큰 도움이 됩니다.

---

`85-86`: **상태 초기화 로직 추가**

useEffect 내에서 startDate와 endDate 상태를 초기화하는 로직이 추가되었습니다. 이는 데이터가 로드될 때 적절하게 상태를 설정하기 위한 중요한 부분입니다.

---

`101-106`: **DatePicker 컴포넌트 사용 방식 개선**

EventDatePicker 컴포넌트에 startDate, endDate 및 변경 핸들러를 명시적으로 전달하여 제어 컴포넌트 방식으로 사용하는 것으로 변경되었습니다. 이는 상태 관리를 더 명확하게 하고 코드의 가독성을 높입니다.

</details>
<details>
<summary>src/features/event-manage/event-create/ui/DatePicker.tsx (7)</summary>

`11-14`: **DatePickerProps 인터페이스 확장**

컴포넌트의 재사용성을 높이기 위해 인터페이스에 새로운 속성들을 추가한 것은 좋은 개선입니다. 이를 통해 제어 컴포넌트 방식으로도 사용할 수 있게 되었습니다.

---

`18-27`: **컴포넌트 파라미터 구조 개선**

새로 추가된 속성들을 반영하여 컴포넌트 파라미터 구조를 업데이트했습니다. 이름을 initialStartDate와 initialEndDate로 변경하여 의도를 더 명확하게 표현했습니다.

---

`28-29`: **상태 초기화 방식 개선**

Date 객체를 null로 초기화하는 것은 적절한 방식입니다. 이전에는 빈 문자열로 초기화되어 있었을 수 있는데, Date 객체에 대해 null을 사용하는 것이 더 의미론적으로 맞습니다.

---

`33-52`: **useEffect를 통한 날짜 상태 동기화 로직**

컴포넌트가 두 가지 방식(eventState와 props)으로 동작할 수 있도록 useEffect를 사용하여 날짜 상태를 동기화하는 로직이 잘 구현되었습니다. 기존 코드와의 호환성을 유지하면서 새로운 기능을 추가한 좋은 예입니다.

---

`59-59`: **시간 옵션 포맷팅 수정**

padStart를 사용하여 시간 옵션의 분 값을 포맷팅하도록 수정한 것은 좋은 개선입니다. 이렇게 하면 "0:0"과 같은 형식 대신 "00:00"과 같이 일관된 형식의 시간 문자열을 얻을 수 있습니다.

---

`82-97`: **조건부 상태 업데이트 및 콜백 호출**

setEventState와 onStartDateChange, onEndDateChange 콜백을 조건부로 호출하는 로직이 잘 구현되어 있습니다. 이를 통해 컴포넌트가 두 가지 사용 방식(내부 상태 관리와 외부 제어)을 모두 지원할 수 있게 되었습니다.

---

`98-98`: **의존성 배열 업데이트**

useEffect의 의존성 배열에 새로운 콜백 함수들을 추가한 것은 적절합니다. 이를 통해 콜백 함수가 변경될 때마다 effect가 다시 실행되어 최신 상태를 유지할 수 있습니다.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-05-12T12:42:25Z
user: login: hyeeuncho
body: 고생하셨습니당
state: APPROVED
author_association: MEMBER
submitted_at: 2025-05-13T06:05:57Z

Review comments:
diff_hunk: @@ -11,8 +11,8 @@ const useEventDetail = () => {
 
   const { data } = useQuery({
     queryKey: ['eventDetail', eventId],
-    queryFn: () => eventDetail({ eventId, userId: user?.id  }),
-    enabled: !!user?.id, 
+    queryFn: () => eventDetail({ eventId, userId: user?.id }),
+    enabled: !!user?.id,
path: src/entities/event/hook/useEventHook.ts
user: login: coderabbitai[bot]
body: _💡 Verification agent_

<details>
<summary>🧩 Analysis chain</summary>

**공백 제거 변경이 잘 적용되었습니다.**

이 부분의 변경은 단순 공백 제거에 불과하지만, eventDetail API 함수의 반환 구조 변경(response.data.result → response.data)과 연관되어 있습니다. 현재 이 훅 자체는 큰 수정이 필요하지 않았지만, 이 훅을 사용하는 컴포넌트들이 데이터 접근 방식을 적절히 수정했는지 확인해주세요.


---

🏁 Script executed:

```shell
#!/bin/bash
# 이 훅을 사용하는 컴포넌트 검색
echo "useEventDetail 훅을 사용하는 파일 검색:"
rg -l "useEventDetail" --type tsx
```

Length of output: 130

---

🏁 Script executed:

```shell
#!/bin/bash
# useEventHook 훅을 사용하는 컴포넌트 검색
echo "useEventHook 훅을 사용하는 파일 검색:"
rg -l "useEventHook" -g '*.{ts,tsx}'
```

Length of output: 318

---

🏁 Script executed:

```shell
#!/bin/bash
# data.result 사용 여부 검색
echo "data.result 사용 검색:"
rg -n "data\\.result" -g '*.{ts,tsx}'
```

Length of output: 2536

---



</details>

**eventDetail 반환 구조 변경에 따른 컴포넌트 수정 필요**

`response.data.result` → `response.data`로 API 반환값이 바뀌었으므로, 아직 `data.result`를 참조하고 있는 컴포넌트들을 직접 `data`로 참조하도록 수정해야 합니다. 다음 파일들을 점검 및 리팩토링해 주세요:

- src/widgets/event/ui/TicketInfo.tsx  
- src/pages/dashboard/ui/EventInfoPage.tsx  
- src/pages/dashboard/ui/ticket/TicketListPage.tsx  
- src/pages/dashboard/ui/EventDetailPage.tsx  
- 기타 `data.result`를 사용 중인 파일들 (rg 결과 참조)

수정 예시:
```diff
- const tickets = data.result;
+ const tickets = data;
```

위 파일들의 모든 `data.result` 참조를 `data`로 교체하고, 맵핑 로직이나 변수명도 일관되게 업데이트해 주세요.  


> Committable suggestion skipped: line range outside the PR's diff.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-12T11:13:22Z
author_association: NONE
diff_hunk: @@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query';
+import hostDashboard from '../api/hostDashboard';
+import { useParams } from 'react-router-dom';
+
+const useHostDashboard = () => {
+  const { id } = useParams();
+
+  const eventId = Number(id);
+
+  const { data, refetch } = useQuery({
+    queryKey: ['hostDashboard', eventId],
+    queryFn: () => hostDashboard(eventId!),
+    enabled: !!eventId,
+  });
+
+  return { data, refetch };
+};
+
+export default useHostDashboard;
path: src/entities/host/hook/hostDashboardHook.ts
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**대시보드 데이터를 위한 커스텀 훅 잘 구현되었습니다.**

대시보드 API 연동을 위한 새로운 훅 구현이 전반적으로 잘 되었습니다. React Query를 활용한 데이터 페칭 로직이 깔끔하게 정리되었습니다.


다음 두 가지 개선 사항을 고려해보세요:

1. 12번 라인의 non-null assertion(`!`)은 TypeScript에서 권장되지 않습니다. 이를 제거하고 명시적인 조건 처리를 하는 것이 더 안전합니다.
2. 에러 처리가 없습니다. `useQuery`에서 `error` 상태를 반환하여 사용하는 컴포넌트에서 에러 상황을 처리할 수 있도록 하는 것이 좋습니다.

```diff
- const { data, refetch } = useQuery({
+ const { data, error, refetch } = useQuery({
  queryKey: ['hostDashboard', eventId],
- queryFn: () => hostDashboard(eventId!),
+ queryFn: () => eventId ? hostDashboard(eventId) : Promise.resolve(null),
  enabled: !!eventId,
});

- return { data, refetch };
+ return { data, error, refetch };
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
import { useQuery } from '@tanstack/react-query';
import hostDashboard from '../api/hostDashboard';
import { useParams } from 'react-router-dom';

const useHostDashboard = () => {
  const { id } = useParams();

  const eventId = Number(id);

  const { data, error, refetch } = useQuery({
    queryKey: ['hostDashboard', eventId],
    queryFn: () => eventId ? hostDashboard(eventId) : Promise.resolve(null),
    enabled: !!eventId,
  });

  return { data, error, refetch };
};

export default useHostDashboard;
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-12T11:13:22Z
author_association: NONE
diff_hunk: @@ -0,0 +1,13 @@
+import { axiosClient } from '../../../shared/types/api/http-client';
+import { HostDashboardResponse } from '../model/hostDashboard';
+import { ApiResponse } from '../../../shared/types/api/apiResponse';
+
+const hostDashboard = async (eventId: number) => {
+  const response = await axiosClient.get<ApiResponse<HostDashboardResponse>>(`/host-channels/dashboard`, {
+    params: { eventId },
+  });
+
+  return response.data.result;
+};
path: src/entities/host/api/hostDashboard.ts
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**API 함수 구현 전략에 대한 의견**

이 API 함수는 정상적으로 구현되어 있으나, 오류 처리가 없습니다. API 호출 실패 시 또는 `response.data.result`가 `undefined`인 경우에 대한 처리가 필요합니다.


다음과 같이 기본적인 오류 처리를 추가하는 것이 좋습니다:

```diff
const hostDashboard = async (eventId: number) => {
-  const response = await axiosClient.get<ApiResponse<HostDashboardResponse>>(`/host-channels/dashboard`, {
-    params: { eventId },
-  });
-
-  return response.data.result;
+  try {
+    const response = await axiosClient.get<ApiResponse<HostDashboardResponse>>(`/host-channels/dashboard`, {
+      params: { eventId },
+    });
+    
+    if (!response.data.result) {
+      throw new Error('대시보드 데이터를 찾을 수 없습니다.');
+    }
+    
+    return response.data.result;
+  } catch (error) {
+    console.error('대시보드 데이터 조회 실패:', error);
+    throw error;
+  }
};
```

---

_💡 Verification agent_

<details>
<summary>🧩 Analysis chain</summary>

**API 응답 구조에 대한 고려사항**

PR 설명에서 언급된 것처럼 API 반환 타입이 `response.data`와 `response.data.result`로 일관되지 않은 문제가 있습니다. 현재 이 함수는 `response.data.result`를 반환하고 있습니다.


API 응답 구조의 일관성 검증:

---

🏁 Script executed:

```shell
#!/bin/bash
# API 응답 구조 일관성 검증
echo "API 응답 구조 패턴 분석 중..."
rg -A 1 "return response.data" src/entities
```

Length of output: 1017

---



</details>

**API 응답 반환 형태 일관화 필요**

현재 여러 API 함수에서 `response.data` 또는 `response.data.result`를 혼용하고 있어 호출 측에서 매번 다른 형태를 처리해야 합니다.  
아래 파일들의 반환 값을 검토하고, 모든 함수가 동일한 구조(예: `response.data.result`)를 반환하도록 통일하거나 공통 유틸(예: `parseApiResponse`)을 도입해 처리 로직을 합치는 것을 권장드립니다.

- src/entities/host/api/hostDashboard.ts: `return response.data.result;`  
- src/entities/host/api/hostDetail.ts:    `return response.data;`  
- src/entities/host/api/hostChannelInfo.ts:`return response.data;`  
- src/entities/host/api/hostChannelList.ts:`return response.data;`  
- src/entities/event/api/event.ts:         `return response.data;` / `return response.data.result || [];`

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-12T11:13:22Z
author_association: NONE
diff_hunk: @@ -16,21 +18,44 @@ const CheckList = () => {
     )
     .map(items => ({ text: items.text, path: items.path }));
 
+  const getProgressStatus = (index: number) => {
+    const statusMap = {
+      0: true, // 이벤트 기본 정보는 항상 true
+      1: true, // 이벤트 상세와 사진은 항상 true
+      2: data?.ticket ?? false, // 티켓 생성하기
+      3: data?.ticketOption ?? false, // 티켓에 추가 옵션 부착
+    };
+
+    return statusMap[index as keyof typeof statusMap];
+  };
path: src/features/dashboard/ui/Checklist.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**체크리스트 진행 상태 처리 로직 개선 필요**

체크리스트 진행 상태를 처리하는 로직이 잘 구현되었지만, `data`가 undefined일 때의 처리가 미흡할 수 있습니다.

다음과 같이 더 안전하게 처리하는 것이 좋습니다:

```diff
  const getProgressStatus = (index: number) => {
    const statusMap = {
-     2: data?.ticket ?? false, // 티켓 생성하기
-     3: data?.ticketOption ?? false, // 티켓에 추가 옵션 부착
+     2: Boolean(data?.ticket), // 티켓 생성하기
+     3: Boolean(data?.ticketOption), // 티켓에 추가 옵션 부착
    };

    return statusMap[index as keyof typeof statusMap];
  };
```

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-12T11:13:22Z
author_association: NONE
diff_hunk: @@ -44,13 +76,26 @@ const EventDatePicker = ({ className, eventState, setEventState, isLabel = false
       const end = new Date(endDate);
       end.setHours(endHour, endMin, 0, 0);
 
-      setEventState(prev => ({
-        ...prev,
-        startDate: start.toISOString(),
-        endDate: end.toISOString(),
-      }));
+      const startISO = new Date(start.getTime() + 9 * 60 * 60 * 1000).toISOString();
+      const endISO = new Date(end.getTime() + 9 * 60 * 60 * 1000).toISOString();
path: src/features/event-manage/event-create/ui/DatePicker.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**타임존 처리 관련 고려사항**

날짜에 9시간을 더하는 방식으로 타임존 처리를 하고 있는데, 이는 한국 시간(KST, UTC+9)을 위한 것으로 보입니다. 하지만 이러한 하드코딩된 시간 조정은 문제가 될 수 있습니다.


타임존 처리는 Date 객체의 메서드나 moment.js, date-fns와 같은 라이브러리를 사용하여 좀 더 명시적으로 처리하는 것이 좋습니다. 현재 방식은 다른 타임존의 사용자에게 혼란을 줄 수 있습니다.

```diff
- const startISO = new Date(start.getTime() + 9 * 60 * 60 * 1000).toISOString();
- const endISO = new Date(end.getTime() + 9 * 60 * 60 * 1000).toISOString();
+ // date-fns 사용 예시
+ import { format, addHours } from 'date-fns';
+ import { zonedTimeToUtc } from 'date-fns-tz';
+ 
+ const startISO = zonedTimeToUtc(start, 'Asia/Seoul').toISOString();
+ const endISO = zonedTimeToUtc(end, 'Asia/Seoul').toISOString();
```


> Committable suggestion skipped: line range outside the PR's diff.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-12T12:42:24Z
author_association: NONE

PR comments:
user: login: coderabbitai[bot]
created_at: 2025-05-12T11:09:24Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- This is an auto-generated comment: failure by coderabbit.ai -->

> [!CAUTION]
> ## Review failed
> 
> The pull request is closed.

<!-- end of auto-generated comment: failure by coderabbit.ai -->
<!-- walkthrough_start -->

## Walkthrough

이 변경사항은 이벤트 상세 API 반환 구조를 수정하고, 호스트 대시보드 기능을 추가하며, 날짜 선택기와 대시보드 관련 컴포넌트의 데이터 흐름을 개선합니다. 또한, 이벤트 정보 관리 페이지에서 날짜 상태를 명시적으로 관리하도록 리팩토링하고, 불필요해진 이벤트 포맷팅 유틸리티를 삭제하였습니다.

## Changes

| 파일/경로 그룹                                                                 | 변경 요약                                                                                                                             |
|-------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------|
| src/entities/event/api/event.ts                                               | `eventDetail` 함수가 `response.data.result` 대신 `response.data` 전체를 반환하도록 수정. `searchEvents` 함수 시그니처를 가독성 좋게 개행. |
| src/entities/event/hook/useEventHook.ts                                       | `useEventDetail` 훅 내 일부 라인에서 불필요한 공백 제거.                                                                               |
| src/entities/host/api/hostDashboard.ts<br>src/entities/host/hook/hostDashboardHook.ts<br>src/entities/host/model/hostDashboard.ts | 호스트 대시보드 API 함수, 관련 타입, 커스텀 훅(`useHostDashboard`) 추가.                                                                |
| src/features/dashboard/ui/Checklist.tsx                                       | `useHostDashboard` 훅 사용, 체크리스트 진행 상태 로직 추가, 네비게이션 시 `refetch` 호출 추가, 진행 바 3→4단계로 확장.                   |
| src/pages/dashboard/ui/DashbaordPage.tsx                                      | `useGetEventHook` → `useHostDashboard`로 데이터 소스 변경, 변수명 및 참조 업데이트.                                                     |
| src/pages/event/ui/EventDetailsPage.tsx                                       | 이벤트 데이터 접근을 `event.result`로 일괄 변경.                                                                                        |
| src/widgets/dashboard/ui/EventOverview.tsx                                    | prop 타입을 `dashboardData` → `HostDashboardResponse`로 변경, 날짜/시간 포맷팅 함수 적용.                                               |
| src/features/event-manage/event-create/ui/DatePicker.tsx                      | `DatePickerProps`에 `startDate`, `endDate`, 변경 콜백 추가, 내부 상태 관리 및 외부와 동기화 로직 개선.                                  |
| src/pages/dashboard/ui/EventDetailPage.tsx                                    | 이벤트 수정 요청 시 직접 객체 생성 방식으로 변경, 기존 포맷팅 함수 제거.                                                               |
| src/pages/dashboard/ui/EventInfoPage.tsx                                      | 날짜 상태를 명시적으로 관리, 이벤트 수정 요청 방식 단순화, `EventDatePicker`에 컨트롤드 props 적용.                                    |
| src/shared/lib/formatEventRequest.ts                                          | 이벤트 데이터 포맷팅 유틸리티 함수 및 파일 삭제.                                                                                        |

## Sequence Diagram(s)

```mermaid
sequenceDiagram
    participant DashboardPage
    participant useHostDashboard
    participant hostDashboard API
    participant EventOverview

    DashboardPage->>useHostDashboard: 호출
    useHostDashboard->>hostDashboard API: eventId로 데이터 요청
    hostDashboard API-->>useHostDashboard: HostDashboardResponse 반환
    useHostDashboard-->>DashboardPage: data, refetch 반환
    DashboardPage->>EventOverview: eventInfo={data}
```

```mermaid
sequenceDiagram
    participant EventInfoPage
    participant EventDatePicker

    EventInfoPage->>EventDatePicker: startDate, endDate, onStartDateChange, onEndDateChange 전달
    EventDatePicker-->>EventInfoPage: 날짜 변경 시 콜백 호출
    EventInfoPage->>EventDatePicker: 상태 업데이트
```

## Possibly related PRs

- GoTogether-Inc/frontend#108: `src/entities/event/api/event.ts`에서 `eventDetail` 함수 추가 및 API 호출 로직 관련, 동일 파일과 함수에 대한 변경이 있어 직접적으로 연관됨.
- GoTogether-Inc/frontend#118: `eventDetail` 함수 반환 구조를 본 PR과 반대로 수정하여 반환값 구조에 대해 충돌 가능성이 있음.

## Suggested reviewers

- xaexunxang

## Poem

> 🐰  
> 대시보드에 햇살이,  
> 이벤트 정보 쏙쏙 담아  
> 날짜도 콕, 체크리스트도 똑!  
> 새 훅과 타입이 춤을 추네,  
> 오래된 유틸은 안녕~  
> 토끼는 깡충, 코드도 깔끔!  
> 🎉  


<!-- walkthrough_end -->
<!-- internal state start -->


<!-- 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= -->

<!-- internal state end -->
<!-- announcements_start -->

> [!TIP]
> <details>
> <summary>⚡️ Faster reviews with caching</summary>
> 
> - CodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure `Review - Disable Cache` at either the organization or repository level. If you prefer to disable all data retention across your organization, simply turn off the `Data Retention` setting under your Organization Settings.
> 
> Enjoy the performance boost—your workflow just got faster.
> 
> </details>

<!-- announcements_end -->

---

<details>
<summary>📜 Recent review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between ee6d293eb8ca94b328be818e5ea9753d62c6598f and a8c5924414dc7d78c3ca97deba45093967391d26.

</details>

<details>
<summary>📒 Files selected for processing (13)</summary>

* `src/entities/event/api/event.ts` (1 hunks)
* `src/entities/event/hook/useEventHook.ts` (1 hunks)
* `src/entities/host/api/hostDashboard.ts` (1 hunks)
* `src/entities/host/hook/hostDashboardHook.ts` (1 hunks)
* `src/entities/host/model/hostDashboard.ts` (1 hunks)
* `src/features/dashboard/ui/Checklist.tsx` (2 hunks)
* `src/features/event-manage/event-create/ui/DatePicker.tsx` (3 hunks)
* `src/pages/dashboard/ui/DashbaordPage.tsx` (1 hunks)
* `src/pages/dashboard/ui/EventDetailPage.tsx` (2 hunks)
* `src/pages/dashboard/ui/EventInfoPage.tsx` (4 hunks)
* `src/pages/event/ui/EventDetailsPage.tsx` (2 hunks)
* `src/shared/lib/formatEventRequest.ts` (0 hunks)
* `src/widgets/dashboard/ui/EventOverview.tsx` (2 hunks)

</details>

</details>
<!-- finishing_touch_checkbox_start -->

<details open="true">
<summary>✨ Finishing Touches</summary>

- [ ] <!-- {"checkboxId": "7962f53c-55bc-4827-bfbf-6a18da830691"} --> 📝 Generate Docstrings

</details>

<!-- finishing_touch_checkbox_end -->
<!-- tips_start -->

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

<details>
<summary>❤️ Share</summary>

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai)
- [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai)
- [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai)
- [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

</details>

<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=GoTogether-Inc/frontend&utm_content=124):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Explain this complex logic.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai explain this code block.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and explain its main purpose.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

### Support

Need help? Create a ticket on our [support page](https://www.coderabbit.ai/contact-us/support) for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai generate sequence diagram` to generate a sequence diagram of the changes in this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-12T11:11:05Z
body: 📖storybook: https://677a88d1e04e06676106db14-bcsfzebozp.chromatic.com/
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-12T12:31:28Z
body: 📖storybook: https://677a88d1e04e06676106db14-xnoiaxewvr.chromatic.com/
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-13T07:37:44Z
body: 📖storybook: https://677a88d1e04e06676106db14-dfxjpzsonx.chromatic.com/
author_association: NONE