GoTogether-Inc · Yejiin21 · May 13, 2025 · May 12, 2025 · May 12, 2025 · May 12, 2025
diff --git a/src/entities/event/api/event.ts b/src/entities/event/api/event.ts
@@ -8,19 +8,22 @@ 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);
   params.append('page', page.toString());
   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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,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: 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">
         <h2 className="text-base font-semibold">체크리스트</h2>
         <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
@@ -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
@@ -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
@@ -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}`);