feat: 이벤트 삭제 구현

design-system/ui/Header.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, ButtonHTMLAttributes } from 'react';
+import React, { ReactElement, ButtonHTMLAttributes, ReactNode } from 'react';
 import TextButton from './buttons/TextButton'; // TextButton 컴포넌트를 가져옵니다.
 
 type Button = ReactElement<ButtonHTMLAttributes<HTMLButtonElement>>;
@@ -7,7 +7,7 @@ type CenterContent = string | ReactElement<React.InputHTMLAttributes<HTMLInputEl
 
 interface HeaderProps {
   centerContent?: CenterContent; // 가운데 콘텐츠 (타이틀 or 검색창)
-  leftButtonLabel?: string; // 왼쪽 콘텐츠 (버튼)
+  leftButtonLabel?: ReactNode; // 왼쪽 콘텐츠 (버튼)
   leftButtonClick?: () => void; // 왼쪽 버튼 클릭 핸들러
   leftButtonClassName?: string; // 왼쪽 버튼 추가 스타일링 클래스
   rightContent?: Button; // 오른쪽 콘텐츠 (버튼)

design-system/ui/buttons/TertiaryButton.tsx

@@ -11,7 +11,7 @@ const TertiaryButton = ({ label, type, color, size, onClick, className }: Tertia
   const baseStyle = `flex justify-center items-center border rounded`;
 
   const sizeClasses = {
-    small: 'px-1.5 py-0.5 text-11 md:px-2 md:text-11',
+    small: 'px-1.5 py-0.5 text-10 md:px-2 md:text-11',
     medium: 'px-4 py-1 text-sm',
     large:
       'text-sm sm:px-2.5 sm:py-2 sm:text-xs sm:rounded md:px-3 md:py-2.5 md:text-sm md:rounded-md lg:px-3 lg:py-2.5 lg:text-base lg:rounded-md',
@@ -30,5 +30,3 @@ const TertiaryButton = ({ label, type, color, size, onClick, className }: Tertia
 };
 
 export default TertiaryButton;
-
-

src/entities/event/api/eventDetail.ts → src/entities/event/api/event.ts

@@ -73,7 +73,7 @@ export const getEventByCategory = async (
 };
 
 // 이벤트 삭제 (DELETE)
-export const deleteEvent = async (eventId: number): Promise<ApiResponse<string>> => {
-  const response = await axiosClient.delete<ApiResponse<string>>(`/events/${eventId}`);
+export const eventDeletion = async (eventId: number) => {
+  const response = await axiosClient.delete(`/events/${eventId}`);
   return response.data;
 };

src/entities/event/hook/useEventHook.ts

@@ -1,9 +1,10 @@
-import { useQuery } from '@tanstack/react-query';
-import { eventDetail } from '../api/eventDetail';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { eventDeletion, eventDetail } from '../api/event';
 import { useParams } from 'react-router-dom';
 import { useUserInfo } from '../../../features/join/hooks/useUserHook';
+import { ApiResponse } from '../../../shared/types/api/apiResponse';
 
-const useEventDetail = () => {
+export const useEventDetail = () => {
   const { id } = useParams();
   const { data: user } = useUserInfo();
 
@@ -17,4 +18,11 @@ const useEventDetail = () => {
 
   return { data };
 };
-export default useEventDetail;
+
+export const useEventDeletion = () => {
+  return useMutation<ApiResponse<null>, Error, number>({
+    mutationFn: async (eventId: number) => {
+      return await eventDeletion(eventId);
+    },
+  });
+};

src/entities/event/hook/useEventListHook.ts

@@ -1,6 +1,6 @@
 import { EventList } from '../../../features/event/model/event';
 import { useInfiniteScroll } from '../../../shared/hooks/useInfiniteScroll';
-import { getAllEventsInfinite } from '../api/eventDetail';
+import { getAllEventsInfinite } from '../api/event';
 
 const useEventList = () => {
   const { data, fetchNextPage, hasNextPage, isFetching } = useInfiniteScroll<EventList>({

src/features/event/ui/EventFunnel.tsx

@@ -98,6 +98,7 @@ const EventFunnel = ({ onNext, onPrev, Funnel, Step, currentStep }: EventFunnelI
           title="이벤트 정보를 입력해주세요"
           onNext={() => handleNext(String(currentStep + 1))}
           onPrev={() => onPrev(String(currentStep - 1))}
+          requireValidation={true}
         >
           <EventInfoPage />
         </EventRegisterLayout>

src/features/event/ui/EventList.tsx

@@ -1,6 +1,6 @@
 import { useRef, useEffect } from 'react';
 import { useInfiniteScroll } from '../../../shared/hooks/useInfiniteScroll';
-import { getAllEventsInfinite, getCategoryEventsInfinite } from '../../../entities/event/api/eventDetail';
+import { getAllEventsInfinite, getCategoryEventsInfinite } from '../../../entities/event/api/event';
 import EventCard from '../../../shared/ui/EventCard';
 import { BaseEvent, CategoryType, TagType } from '../../../shared/types/baseEventType';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

src/features/event/ui/FileUpload.tsx

@@ -1,15 +1,17 @@
 import FileUploadImage from '../../../../public/assets/event-manage/creation/FileUpload.svg';
 import { FunnelState } from '../model/FunnelContext';
 import useImageUpload from '../../../shared/hooks/useImageUpload';
+import { useEffect } from 'react';
 
 interface FileUploadProps {
   value?: string;
   onChange?: (url: string) => void;
   setEventState?: React.Dispatch<React.SetStateAction<FunnelState['eventState']>>;
   useDefaultImage?: boolean;
+  onValidationChange?: (isValid: boolean) => void;
 }
 
-const FileUpload = ({ value, onChange, setEventState, useDefaultImage }: FileUploadProps) => {
+const FileUpload = ({ value, onChange, setEventState, useDefaultImage, onValidationChange }: FileUploadProps) => {
   const { previewUrl, fileInputRef, handleFileChange, handleDrop, setIsDragging, isDragging } = useImageUpload({
     value, // 서버에서 받아온 기본 이미지
     onSuccess: url => {
@@ -19,6 +21,12 @@ const FileUpload = ({ value, onChange, setEventState, useDefaultImage }: FileUpl
     useDefaultImage,
   });
 
+  useEffect(() => {
+    if (onValidationChange) {
+      onValidationChange(!!previewUrl);
+    }
+  }, [previewUrl, onValidationChange]);
+
   return (
     <div className="flex flex-col justify-start gap-1">
       <h1 className="font-bold text-black text-lg">배너 사진 첨부</h1>

src/features/home/hooks/useEventHook.ts

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { getEventByTag } from '../../../entities/event/api/eventDetail';
+import { getEventByTag } from '../../../entities/event/api/event';
 import { TagType } from '../../../shared/types/baseEventType';
 import { EventItem } from '../../../entities/event/model/eventDetail';
 

src/pages/dashboard/ui/EventDetailPage.tsx

@@ -5,10 +5,10 @@ import FileUpload from '../../../features/event/ui/FileUpload';
 import LinkInput, { Link } from '../../../features/event/ui/LinkInput';
 import TextEditor from '../../../features/event/ui/TextEditor';
 import DashboardLayout from '../../../shared/ui/backgrounds/DashboardLayout';
-import useEventDetail from '../../../entities/event/hook/useEventHook';
 import { useUpdateEventHook } from '../../../features/dashboard/hook/useEventHook';
 import { UpdateEventRequest } from '../../../features/dashboard/model/event';
 import { OnlineType } from '../../../shared/types/baseEventType';
+import { useEventDetail } from '../../../entities/event/hook/useEventHook';
 
 const EventDetailPage = () => {
   const navigate = useNavigate();

src/pages/dashboard/ui/EventInfoPage.tsx

@@ -5,12 +5,12 @@ import EventDatePicker from '../../../features/event/ui/DatePicker';
 import DashboardLayout from '../../../shared/ui/backgrounds/DashboardLayout';
 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 { OnlineType } from '../../../shared/types/baseEventType';
 import { AddressSearch } from '../../../shared/ui/AddressSearch';
 import KakaoMap from '../../../shared/ui/KakaoMap';
 import { UpdateEventRequest } from '../../../features/dashboard/model/event';
+import { useEventDetail } from '../../../entities/event/hook/useEventHook';
 
 const EventInfoPage = () => {
   const navigate = useNavigate();

src/pages/event/ui/EventDetailsPage.tsx

@@ -15,9 +15,9 @@ import dateImg from '../../../../public/assets/event-manage/details/Date.svg';
 import timeImg from '../../../../public/assets/event-manage/details/Time.svg';
 import locationImg from '../../../../public/assets/event-manage/details/Location.svg';
 import KakaoMap from '../../../shared/ui/KakaoMap';
-import useEventDetail from '../../../entities/event/hook/useEventHook';
 import { useCreateBookmark, useDeleteBookmark } from '../../../features/bookmark/hook/useBookmarkHook';
 import { formatDate, formatTime } from '../../../shared/lib/date';
+import { useEventDetail } from '../../../entities/event/hook/useEventHook';
 
 const EventDetailsPage = () => {
   const navigate = useNavigate();

src/pages/event/ui/create-event/EventInfoPage.tsx

@@ -3,11 +3,15 @@ import TextEditor from '../../../../features/event/ui/TextEditor';
 import LinkInput from '../../../../features/event/ui/LinkInput';
 import { useFunnelState } from '../../../../features/event/model/FunnelContext';
 
-const EventInfoPage = () => {
+interface EventInfoPageProps {
+  onValidationChange?: (isValid: boolean) => void;
+}
+
+const EventInfoPage = ({ onValidationChange }: EventInfoPageProps) => {
   const { setEventState } = useFunnelState();
   return (
     <div className="w-full px-5 space-y-8">
-      <FileUpload setEventState={setEventState} useDefaultImage={false} />
+      <FileUpload setEventState={setEventState} useDefaultImage={false} onValidationChange={onValidationChange} />
       <TextEditor setEventState={setEventState} />
       <LinkInput setEventState={setEventState} />
     </div>

src/pages/menu/ui/myHost/MyHostPage.tsx

@@ -5,9 +5,13 @@ import EventCard from '../../../../shared/ui/EventCard';
 import { useState } from 'react';
 import useHostChannelList from '../../../../entities/host/hook/useHostChannelListHook';
 import useHostDetail from '../../../../entities/host/hook/useHostDetailHook';
+import TertiaryButton from '../../../../../design-system/ui/buttons/TertiaryButton';
 
 const MyHostPage = () => {
   const [selectedHostId, setSelectedHostId] = useState<number | null>(null);
+  const [deleteBtn, setDeleteBtn] = useState(false);
+  const [deletedEventId, setDeletedEventId] = useState<number[]>([]);
+
   const { data } = useHostChannelList();
   const { data: hostDetail } = useHostDetail(selectedHostId ?? 0);
 
@@ -35,21 +39,39 @@ const MyHostPage = () => {
         )}
       </div>
 
-      {/* 이벤트 카드 목록 */}
-      <div className="grid grid-cols-2 gap-4 mx-5 mt-3 md:grid-cols-2 lg:grid-cols-2 pb-6">
-        {hostDetail?.result?.events?.map(event => (
-          <EventCard
-            key={event.id}
-            id={event.id}
-            img={event.bannerImageUrl}
-            eventTitle={event.title}
-            dDay={event.remainDays}
-            host={event.hostChannelName}
-            eventDate={event.startDate}
-            location={event.onlineType}
-            hashtags={event.hashtags}
+      {hostDetail?.result?.events && hostDetail?.result?.events?.length > 0 && (
+        <div className="flex justify-end mx-6">
+          <TertiaryButton
+            label={deleteBtn ? '완료' : '삭제'}
+            type="button"
+            color="pink"
+            size="small"
+            onClick={() => setDeleteBtn(prev => !prev)}
           />
-        ))}
+        </div>
+      )}
+
+      {/* 이벤트 카드 목록 */}
+      <div className="grid grid-cols-2 gap-4 mx-5 md:grid-cols-2 lg:grid-cols-2 pb-6">
+        {hostDetail?.result?.events
+          ?.filter(event => !deletedEventId.includes(event.id))
+          .map(event => (
+            <EventCard
+              key={event.id}
+              id={event.id}
+              img={event.bannerImageUrl}
+              eventTitle={event.title}
+              dDay={event.remainDays}
+              host={event.hostChannelName}
+              eventDate={event.startDate}
+              location={event.onlineType}
+              hashtags={event.hashtags}
+              isDelete={deleteBtn}
+              onDeleteSuccess={(deletedEventId: number) => {
+                setDeletedEventId(prev => [...prev, deletedEventId]);
+              }}
+            />
+          ))}
       </div>
     </TicketHostLayout>
   );

src/shared/ui/EventCard.tsx

@@ -4,6 +4,11 @@ import Countdown from '../../../design-system/ui/texts/Countdown';
 import dateImg from '../../../public/assets/event-manage/details/Date.svg';
 import locationImg from '../../../public/assets/event-manage/details/Location.svg';
 import { formatDate } from '../lib/date';
+import IconButton from '../../../design-system/ui/buttons/IconButton';
+import deleteButton from '../../../public/assets/menu/Delete.svg';
+import { useState } from 'react';
+import DeleteConfirmModal from '../../widgets/host/DeleteConfirmModal';
+import { useEventDeletion } from '../../entities/event/hook/useEventHook';
 
 interface EventCardProps {
   id: number;
@@ -16,6 +21,8 @@ interface EventCardProps {
   hashtags: string[];
   onClick?: () => void;
   children?: React.ReactNode;
+  isDelete?: boolean;
+  onDeleteSuccess?: (eventId: number) => void;
 }
 
 const EventCard = ({
@@ -29,16 +36,20 @@ const EventCard = ({
   hashtags,
   onClick,
   children,
+  isDelete = false,
+  onDeleteSuccess,
 }: EventCardProps) => {
   const navigate = useNavigate();
   const { pathname } = useLocation();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const { mutate } = useEventDeletion();
 
   const isHostPage = pathname.startsWith(`/menu/myHost`) || pathname.startsWith(`/menu/hostDetail`);
 
   return (
     <div
       onClick={onClick}
-      className="w-full max-w-full h-full min-h-[240px] md:min-h-[300px] max-h-full p-4 bg-white rounded-lg shadow-md cursor-pointer flex flex-col justify-between"
+      className="w-full max-w-full h-full min-h-[240px] md:min-h-[300px] max-h-full p-2 md:p-4 bg-white rounded-lg shadow-md cursor-pointer flex flex-col justify-between"
     >
       {/* 이미지 */}
       <img src={img} alt={eventTitle} className="object-cover w-full rounded-md sm:h-20 md:h-24 lg:h-28" />
@@ -84,17 +95,47 @@ const EventCard = ({
 
         {/* 대시보드 버튼 */}
         {isHostPage && (
-          <TertiaryButton
-            label="호스트 대시보드 바로가기"
-            type="button"
-            color="pink"
-            size="small"
-            onClick={event => {
-              event?.stopPropagation();
-              navigate(`/dashboard/${id}`);
-            }}
-            className="w-31.5 md:w-33 mt-2"
-          />
+          <div className="flex justify-between items-center h-7">
+            <TertiaryButton
+              label="호스트 대시보드 바로가기"
+              type="button"
+              color="pink"
+              size="small"
+              onClick={event => {
+                event?.stopPropagation();
+                navigate(`/dashboard/${id}`);
+              }}
+              className="w-31.5 md:w-33"
+            />
+            {isDelete && (
+              <IconButton
+                iconPath={<img src={deleteButton} />}
+                size="small"
+                onClick={e => {
+                  e.stopPropagation();
+                  setIsModalOpen(true);
+                }}
+                iconClassName="w-5 h-5 md:w-7 md:h-7 bg-red-500 hover:bg-red-600 rounded-[5px] p-1"
+              />
+            )}
+
+            <DeleteConfirmModal
+              isOpen={isModalOpen}
+              onClose={() => setIsModalOpen(false)}
+              onConfirm={() => {
+                mutate(id, {
+                  onSuccess: () => {
+                    onDeleteSuccess?.(id);
+                    setIsModalOpen(false);
+                  },
+                  onError: () => {
+                    alert('이벤트 삭제에 실패했습니다.');
+                    setIsModalOpen(false);
+                  },
+                });
+              }}
+            />
+          </div>
         )}
       </div>
     </div>