feat: 대시보드 이벤트 정보 API 연동

design-system/ui/ChoiceChip.tsx

@@ -1,20 +1,40 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+
+interface ChoiceChipOption {
+  label?: string; // UI에 보여질 한국어
+  value?: string; // 서버에서 오는 값
+}
 
 interface ChoiceChipProps {
   label?: string;
-  options: string[];
+  value?: string;
+  options: ChoiceChipOption[];
   onSelect: (selected: string) => void;
   className?: string;
   labelClassName?: string;
   buttonClassName?: string;
 }
 
-const ChoiceChip = ({ label, options, onSelect, className, labelClassName = '', buttonClassName = '' }: ChoiceChipProps) => {
-  const [selected, setSelected] = useState(options[0]);
+const ChoiceChip = ({
+  label,
+  options,
+  onSelect,
+  className,
+  labelClassName = '',
+  buttonClassName = '',
+  value,
+}: ChoiceChipProps) => {
+  const [selected, setSelected] = useState(value || options[0]);
+
+  useEffect(() => {
+    if (value) {
+      setSelected(value);
+    }
+  }, [value]);
 
-  const handleClick = (option: string) => {
-    setSelected(option);
-    onSelect(option);
+  const handleClick = (optionValue: string) => {
+    setSelected(optionValue);
+    onSelect(optionValue);
   };
 
   return (
@@ -26,12 +46,12 @@ const ChoiceChip = ({ label, options, onSelect, className, labelClassName = '',
             key={index}
             className={`
             flex justify-center items-center sm:text-xs md:text-sm lg:text-base px-2 rounded-full
-            ${selected === option ? 'bg-white text-black' : 'text-black bg-transparent'}
+            ${selected === option.value ? 'bg-white text-black' : 'text-black bg-transparent'}
             ${buttonClassName}
           `}
-            onClick={() => handleClick(option)}
+            onClick={() => handleClick(option.value || '')}
           >
-            {option}
+            {option.label}
           </button>
         ))}
       </div>

src/entities/event/api/event.ts

@@ -0,0 +1,7 @@
+import { axiosClient } from '../../../shared/types/api/http-client';
+import { EventDetailRequest } from '../model/event';
+
+export const eventDetail = async (dto: EventDetailRequest) => {
+  const response = await axiosClient.get(`/events/${dto.eventId}`);
+  return response.data;
+};

src/entities/event/hook/useEventHook.ts

@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query';
+import { eventDetail } from '../api/event';
+import { useParams } from 'react-router-dom';
+
+const useEventDetail = () => {
+  const { id } = useParams();
+
+  const eventId = Number(id);
+
+  const { data } = useQuery({
+    queryKey: ['eventDetail', eventId],
+    queryFn: () => eventDetail({ eventId }),
+  });
+
+  return { data };
+};
+export default useEventDetail;

src/entities/event/model/event.ts

@@ -0,0 +1,15 @@
+import { BaseEvent } from '../../../shared/types/baseEventType';
+
+export interface EventDetailRequest {
+  eventId: number;
+}
+
+export interface EventDetailResponse {
+  result: BaseEvent & {
+    id: number;
+    participantCount: number;
+    hostChannelName: string;
+    hostChannelDescription: string;
+    status: string;
+  };
+}

src/features/dashboard/api/event.ts

@@ -1,10 +1,16 @@
 import { axiosClient } from '../../../shared/types/api/http-client';
+import { UpdateEventRequest } from '../model/event';
 
-export const getEventInfo = async (eventId: string) => {
+export const getHostDashboard = async (eventId: number) => {
   const response = await axiosClient.get('/host-channels/dashboard', {
     params: {
       eventId: eventId,
     },
   });
   return response.data.result;
 };
+
+export const updateEventInfo = async (eventId: number, dto: Partial<UpdateEventRequest>) => {
+  const response = await axiosClient.put(`/events/${eventId}`, dto);
+  return response.data;
+};

src/features/dashboard/hook/useEventHook.ts

@@ -0,0 +1,29 @@
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { useParams } from 'react-router-dom';
+import { getHostDashboard, updateEventInfo } from '../api/event';
+import { dashboardData } from '../../../shared/types/dashboardType';
+import { UpdateEventRequest } from '../model/event';
+
+export const useGetEventHook = () => {
+  const { id } = useParams();
+
+  const eventId = Number(id);
+
+  const { data: eventInfo } = useQuery<dashboardData>({
+    queryKey: ['eventInfo', eventId],
+    queryFn: () => getHostDashboard(eventId),
+  });
+
+  return { eventInfo };
+};
+
+export const useUpdateEventHook = () => {
+  const { id } = useParams();
+  const eventId = Number(id);
+
+  const mutation = useMutation({
+    mutationFn: (dto: Partial<UpdateEventRequest>) => updateEventInfo(eventId, dto),
+  });
+
+  return mutation;
+};

src/features/dashboard/model/event.ts

@@ -0,0 +1,5 @@
+import { BaseEvent } from '../../../shared/types/baseEventType';
+
+export interface UpdateEventRequest extends BaseEvent {
+  hostChannelId: number;
+}

src/features/event-manage/event-create/api/event.ts

@@ -5,8 +5,3 @@ export const createEvent = async (data: CreateEventRequest) => {
   const response = await axiosClient.post('/events', data);
   return response.data;
 };
-
-export const readEventDetail = async (eventId: number) => {
-  const response = await axiosClient.get(`/events/${eventId}`);
-  return response.data;
-};

src/features/event-manage/event-create/model/eventCreation.ts

@@ -1,18 +1,5 @@
-export interface CreateEventRequest {
+import { BaseEvent } from '../../../../shared/types/baseEventType';
+
+export interface CreateEventRequest extends BaseEvent {
   hostChannelId: number;
-  title: string;
-  startDate: string;
-  endDate: string;
-  startTime: string;
-  endTime: string;
-  bannerImageUrl: string;
-  description: string;
-  referenceLinks: { address: string; detailAddress: string; title: string; url: string }[];
-  onlineType: 'ONLINE' | 'OFFLINE';
-  address: string;
-  location: { lat: number; lng: number };
-  category: string;
-  hashtags: string[];
-  organizerEmail: string;
-  organizerPhoneNumber: string;
 }

src/features/event-manage/event-create/ui/FileUpload.tsx

@@ -1,13 +1,18 @@
 import FileUploadImage from '../../../../../public/assets/event-manage/creation/FileUpload.svg';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { uploadFile } from '../hooks/usePresignedUrlHook';
-import { useFunnelState } from '../model/FunnelContext';
+import { FunnelState } from '../model/FunnelContext';
 
-const FileUpload = () => {
+interface FileUploadProps {
+  value?: string;
+  onChange?: (url: string) => void;
+  setEventState?: React.Dispatch<React.SetStateAction<FunnelState['eventState']>>;
+}
+
+const FileUpload = ({ value, onChange, setEventState }: FileUploadProps) => {
   const [isDragging, setIsDragging] = useState(false);
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const { setEventState } = useFunnelState();
 
   const handleFileUpload = async (file: File) => {
     if (file.size > 500 * 1024) {
@@ -23,7 +28,10 @@ const FileUpload = () => {
     try {
       const imageUrl = await uploadFile(file);
       setPreviewUrl(imageUrl);
-      setEventState(prev => ({ ...prev, bannerImageUrl: imageUrl }));
+      onChange?.(imageUrl);
+      if (setEventState) {
+        setEventState(prev => ({ ...prev, bannerImageUrl: imageUrl }));
+      }
     } catch (error) {
       console.error('파일 업로드 실패:', error);
     }
@@ -55,6 +63,10 @@ const FileUpload = () => {
     if (file) handleFileUpload(file);
   };
 
+  useEffect(() => {
+    if (value) setPreviewUrl(value);
+  }, [value]);
+
   return (
     <div className="flex flex-col justify-start gap-1">
       <h1 className="font-bold text-black text-lg">배너 사진 첨부</h1>

src/features/event-manage/event-create/ui/LinkInput.tsx

@@ -1,64 +1,62 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import { FunnelState } from '../model/FunnelContext';
 import AddButton from '../../../../../public/assets/event-manage/creation/AddBtn.svg';
 import CloseButton from '../../../../../public/assets/event-manage/creation/CloseBtn.svg';
 import Link from '../../../../../public/assets/event-manage/creation/Link.svg';
-import { FunnelState } from '../model/FunnelContext';
 
 interface LinkInputProps {
-  eventState?: FunnelState['eventState'];
+  value?: Link[];
+  onChange?: (links: Link[]) => void;
   setEventState?: React.Dispatch<React.SetStateAction<FunnelState['eventState']>>;
 }
 
-const LinkInput = ({ eventState, setEventState }: LinkInputProps) => {
-  const [links, setLinks] = useState<{ title: string; url: string; address: string; detailAddress: string }[]>(
-    eventState?.referenceLinks || []
-  );
+export interface Link {
+  title: string;
+  url: string;
+  address: string;
+  detailAddress: string;
+}
+
+const LinkInput = ({ value, onChange, setEventState }: LinkInputProps) => {
+  const [links, setLinks] = useState<Link[]>([]);
   const [activeInput, setActiveInput] = useState<{ field: 'title' | 'url' | null }>({
     field: null,
   });
   const [hoveredInput, setHoveredInput] = useState<{ field: 'title' | 'url' | null }>({
     field: null,
   });
 
+  const updateAll = (newLinks: Link[]) => {
+    setLinks(newLinks);
+    onChange?.(newLinks);
+    setEventState?.(prev => ({ ...prev, referenceLinks: newLinks }));
+  };
+
   const addNewLink = () => {
     const newLink = {
       title: '',
       url: '',
       address: '',
       detailAddress: '',
     };
-    setLinks([...links, newLink]);
-    setActiveInput({ field: null });
-    if (setEventState) {
-      setEventState(prev => ({
-        ...prev,
-        referenceLinks: [...prev.referenceLinks, newLink],
-      }));
-    }
+    updateAll([...links, newLink]);
   };
 
-  const removeLink = (title: string) => {
-    const updatedLinks = links.filter(link => link.title !== title);
-    setLinks(updatedLinks);
-    if (setEventState) {
-      setEventState(prev => ({
-        ...prev,
-        referenceLinks: updatedLinks,
-      }));
-    }
+  const removeLink = (index: number) => {
+    const newLinks = links.filter((_, i) => i !== index);
+    updateAll(newLinks);
   };
 
-  const updateLink = (title: string, field: 'url' | 'title', value: string) => {
-    const updatedLinks = links.map(link => (link.title === title ? { ...link, [field]: value } : link));
-    setLinks(updatedLinks);
-    if (setEventState) {
-      setEventState(prev => ({
-        ...prev,
-        referenceLinks: updatedLinks,
-      }));
-    }
+  const updateLink = (index: number, field: keyof Link, value: string) => {
+    const newLinks = [...links];
+    newLinks[index] = { ...newLinks[index], [field]: value };
+    updateAll(newLinks);
   };
 
+  useEffect(() => {
+    setLinks(value ?? []);
+  }, [value]);
+
   return (
     <div className="flex flex-col gap-1">
       <h1 className="font-bold text-black text-lg">관련 링크</h1>
@@ -77,7 +75,7 @@ const LinkInput = ({ eventState, setEventState }: LinkInputProps) => {
               <input
                 type="text"
                 value={link.title}
-                onChange={e => updateLink(link.title, 'title', e.target.value)}
+                onChange={e => updateLink(index, 'title', e.target.value)}
                 className="w-full min-w-[3rem] md:min-w-[6rem] h-8 text-placeholderText ml-1 outline-none bg-transparent text-sm md:text-base"
                 placeholder="참조링크"
                 autoFocus={activeInput.field === link.title && activeInput.field === 'title'}
@@ -94,7 +92,7 @@ const LinkInput = ({ eventState, setEventState }: LinkInputProps) => {
               <input
                 type="text"
                 value={link.url}
-                onChange={e => updateLink(link.title, 'url', e.target.value)}
+                onChange={e => updateLink(index, 'url', e.target.value)}
                 className="w-full min-w-[10rem] md:min-w-[15rem] h-8 text-placeholderText ml-2 outline-none bg-transparent text-sm md:text-base"
                 placeholder="URL을 입력하세요"
                 autoFocus={activeInput.field === 'url'}
@@ -104,7 +102,7 @@ const LinkInput = ({ eventState, setEventState }: LinkInputProps) => {
                 <button
                   onClick={e => {
                     e.stopPropagation();
-                    removeLink(link.title);
+                    removeLink(index);
                   }}
                   className="absolute top-1/2 right-2 transform -translate-y-1/2"
                 >