refactor: 호스트 생성 및 대시보드 리팩토링

src/app/Layout.tsx

@@ -1,10 +1,10 @@
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-      <div className="w-full h-full min-h-screen bg-gray-50">
-        <div className="mx-auto w-full max-w-lg min-h-screen bg-white">
-          <main>{children}</main>
-          <div id="portal" />
-        </div>
+    <div className="w-full h-full min-h-screen bg-gray-50">
+      <div className="mx-auto w-full max-w-lg min-h-screen bg-white">
+        <main>{children}</main>
+        <div id="portal" />
       </div>
+    </div>
   );
 }

src/features/dashboard/ui/PariticipantsList.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import ParticipantCard from './ParicipantCard';
+import ParticipantCard from './ParticipantCard';
 import { useParticipantStore } from '../model/store/ParticipantStore';
 import { usePersonalTicketOptionAnswers } from '../../ticket/hooks/useTicketOptionHook';
 import OrderAnswerModal from '../../../widgets/dashboard/ui/response/OrderAnswerModal';

src/features/dashboard/ui/ParicipantCard.tsx → src/features/dashboard/ui/ParticipantCard.tsx

@@ -3,6 +3,7 @@ import SecondaryButton from '../../../../design-system/ui/buttons/SecondaryButto
 import { useApproveParticipants } from '../hook/useParticipants';
 import { ParticipantResponse } from '../model/participantInformation';
 import { formatDate, formatTime } from '../../../shared/lib/date';
+import { usePersonalTicketOptionAnswers } from '../../ticket/hooks/useTicketOptionHook';
 
 interface ParticipantCardProps {
   participant: ParticipantResponse;
@@ -12,7 +13,21 @@ interface ParticipantCardProps {
 }
 
 const ParticipantCard = ({ participant, onCheckClick }: ParticipantCardProps) => {
-  const { mutate: approveParticipant } = useApproveParticipants(participant.id);
+  const { mutate: approveParticipant } = useApproveParticipants(participant.orderId);
+
+  // useQuery를 사용한 에러 핸들링
+  const { error } = usePersonalTicketOptionAnswers(participant.ticketId);
+
+
+  // 티켓 옵션 응답 개별 조회 사용 중 -> 올바른 API 수정해야함(에러 핸들링만 처리한 상태)
+  const handleCheckClick = () => {
+    if (error) {
+      alert('응답 데이터가 없습니다.');
+      return;
+    }
+    onCheckClick();
+  };
+
   return (
     <div className="flex items-center justify-between w-full text-xs bg-white px-2 md:px-3 py-2 shadow-sm">
       <div className="flex gap-2 md:gap-3">
@@ -30,7 +45,8 @@ const ParticipantCard = ({ participant, onCheckClick }: ParticipantCardProps) =>
         </div>
       </div>
       <div className="flex items-center justify-center gap-3">
-        {<SecondaryButton label="확인하기" color="pink" size="small" onClick={onCheckClick} />}
+        {/* 에러 핸들링 여기도 수정해야함 */}
+        {<SecondaryButton label="확인하기" color="pink" size="small" onClick={handleCheckClick} />}
         {participant.checkedIn ? (
           <p className="text-[#888686] text-10 md:text-12">완료</p>
         ) : (

src/features/ticket/hooks/useTicketOptionDnD.ts

@@ -30,7 +30,7 @@ export const useTicketOptionDnD = () => {
       const ticketId = parseInt(destination.droppableId.replace('ticket-', ''), 10);
       const ticketOptionId = parseInt(result.draggableId, 10);
 
-      if (isNaN(ticketId) || isNaN(ticketOptionId)) {
+      if (!isNaN(ticketId) && !isNaN(ticketOptionId)) {
         attachOption({ ticketId, ticketOptionId });
       }
       return;

src/main.tsx

@@ -12,7 +12,7 @@ createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <QueryClientProvider client={queryClient}>
       <RouterProvider router={router} />
-      {import.meta.env.NODE_ENV === 'development' && <ReactQueryDevtools initialIsOpen={false} position="left" />}
+      {import.meta.env.DEV && <ReactQueryDevtools initialIsOpen={true} position="left" />}
     </QueryClientProvider>
   </StrictMode>
 );

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

@@ -3,6 +3,7 @@ import { useFunnel } from '../../../../features/event/hooks/useFunnelHook';
 import EventFunnel from '../../../../features/event/ui/EventFunnel';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { FunnelProvider } from '../../../../features/event/model/FunnelContext';
+// import { MAIN_ROUTES } from '../../../../app/routes/routes';
 
 const FunnelPage = () => {
   const { Funnel, Step, setStep, currentStep, steps } = useFunnel(0);
@@ -19,7 +20,14 @@ const FunnelPage = () => {
     }
   };
 
+
+  // ${MAIN_ROUTES.eventCreation}?step=${steps[0]}`
   const onPrevClick = () => {
+    if (currentStep === 1 || currentStep === 2) {
+      // HostCreation에서 뒤로가기: 브라우저 히스토리 뒤로
+      navigate(-1);
+      return;
+    }
     const prevStep = previousStep.pop();
     if (prevStep !== undefined) {
       setStep(prevStep);
@@ -38,6 +46,15 @@ const FunnelPage = () => {
     }
   }, [location.search, setStep, steps]);
 
+  // Funnel current step을 HostSelection으로 초기화
+  useEffect(() => {
+    setStep(0);
+    setPreviousStep([]);
+    if (!new URLSearchParams(location.search).get('step')) {
+      navigate(`${location.pathname}?step=${steps[0]}`, { replace: true });
+    }
+  }, []);
+
   return (
     <FunnelProvider>
       <EventFunnel

src/pages/event/ui/host/HostSelectionPage.tsx

@@ -40,6 +40,7 @@ const HostSelectionPage = ({ onNext, currentStep, onValidationChange }: HostSele
       },
       onError: error => {
         console.error('호스트 삭제 실패:', error);
+        alert(`${error.message}`);
       },
     });
   };
@@ -50,24 +51,24 @@ const HostSelectionPage = ({ onNext, currentStep, onValidationChange }: HostSele
 
   return (
     <div className="flex flex-col w-full px-2">
-      <div
-        onClick={() => {
-          if (!isLoggedIn) {
-            alert('로그인이 필요한 서비스입니다.');
-            return;
-          }
-          onNext(String(currentStep + 1));
-        }}
-        className="flex justify-start items-center px-3 py-4 cursor-pointer"
-      >
-        <button className="flex justify-center items-center w-12 h-12 md:w-14 md:h-14 bg-gray2 rounded-full">
-          <IconButton
-            iconPath={<img src={AddButton} alt="추가 버튼" className="w-6 h-6 md:w-7 md:h-7" />}
-            onClick={() => onNext(String(currentStep + 1))}
-          />
-        </button>
-        <span className="font-bold text-base md:text-xl ml-4">채널 새로 만들기</span>
-      </div>
+      {isLoggedIn ? (
+        <div
+          onClick={() => {
+            onNext(String(currentStep + 1));
+          }}
+          className="flex justify-start items-center px-3 py-4 cursor-pointer"
+        >
+          <button className="flex justify-center items-center w-12 h-12 md:w-14 md:h-14 bg-gray2 rounded-full">
+            <IconButton
+              iconPath={<img src={AddButton} alt="추가 버튼" className="w-6 h-6 md:w-7 md:h-7" />}
+              onClick={() => { }}
+            />
+          </button>
+          <span className="font-bold text-base md:text-xl ml-4">채널 새로 만들기</span>
+        </div>
+      ) : (
+        <p className="col-span-2 mt-10 text-center text-sm md:text-base text-red-500">로그인이 필요한 서비스입니다.</p>
+      )}
       {data?.result.map(host => (
         <div
           key={host.id}

src/widgets/dashboard/ui/main/TicketRevenue.tsx

@@ -10,7 +10,7 @@ const TicketRevenue = ({ icon, title, value }: TicketRevenueProps) => {
       <div className="flex justify-center items-center w-12 h-12 md:w-14 md:h-14 bg-main rounded-[5px]">{icon}</div>
       <div className="flex flex-col">
         <span className="text-xs md:text-base text-main font-semibold">{title}</span>
-        <h2 className="text-16 md:text-xl font-bold">{value}</h2>
+        <h2 className="text-15 md:text-17 font-bold">{value}</h2>
       </div>
     </div>
   );

tailwind.config.js

@@ -51,6 +51,8 @@ export default {
         14: '14px',
         15: '15px',
         16: '16px',
+        17: '17px',
+        18: '18px',
         19: '19px',
         20: '20px',
         21: '21px',