feat: 티켓 종류 선택 퍼블리싱

src/app/routes/Router.tsx

@@ -31,7 +31,7 @@ import PaymentPage from '../../pages/payment/ui/PaymentPage';
 import TicketConfirmPage from '../../pages/dashboard/ui/ticket/TIcketConfirmPage';
 import TicketOptionPage from '../../pages/dashboard/ui/ticket/TicketOptionPage';
 import TicketOptionCreatePage from '../../pages/dashboard/ui/ticket/TicketOptionCreatePage';
-import ResponseManagementPage from '../../pages/dashboard/ui/ResponsesManagementPage';
+import ResponseManagementPage from '../../pages/dashboard/ui/ResponseManagementPage';
 import TicketOptionResponsePage from '../../pages/dashboard/ui/ticket/TicketOptionResponsePage';
 import AuthCallback from '../../pages/join/AuthCallback';
 import LogoutPage from '../../pages/join/LogoutPage';

src/features/dashboard/model/store/ResponseStore.tsx

@@ -6,18 +6,25 @@ interface ResponseState {
   selectedField: string;
   selectedResponse: responsesData[];
   currentIndex: number;
+  isModalOpen: boolean;
+  selectedTicketId: number | null;
 
   setResponses: (responses: responsesData[]) => void;
   setSelectedField: (field: string) => void;
   setSelectedResponse: (responseName: string, responseEmail: string) => void;
   setCurrentIndex: (updateFn: (prevIndex: number) => number) => void;
+  openModal: () => void;
+  closeModal: () => void;
+  setSelectedTicketId: (id: number) => void;
 }
 
 export const useResponseStore = create<ResponseState>(set => ({
   response: [],
   selectedField: '',
   selectedResponse: [],
   currentIndex: 0,
+  isModalOpen: false,
+  selectedTicketId: 0,
 
   setResponses: response => {
     set(() => ({
@@ -44,4 +51,11 @@ export const useResponseStore = create<ResponseState>(set => ({
     set(state => ({
       currentIndex: updateFn(state.currentIndex),
     })),
+
+  openModal: () => set({ isModalOpen: true }),
+  closeModal: () => set({ isModalOpen: false }),
+
+  setSelectedTicketId: (ticketId) => {
+    set({selectedTicketId: ticketId})
+  }
 }));

src/pages/dashboard/ui/ParticipantsMangementPage.tsx

@@ -55,7 +55,7 @@ const ParticipantsManagementPage = () => {
           allParticipantEmails={participants.map((p: { email: string }) => p.email)}
         />
       )}
-      {ticketModalOpen && <SelectTicketModal onClose={() => setTicketModalOpen(false)} participants={participants} />}
+      {ticketModalOpen && <SelectTicketModal onClose={() => setTicketModalOpen(false)} />}
     </DashboardLayout>
   );
 };

src/pages/dashboard/ui/ResponsesManagementPage.tsx → src/pages/dashboard/ui/ResponseManagementPage.tsx

@@ -5,10 +5,11 @@ import ResponsesList from '../../../features/dashboard/ui/ResponsesList';
 import { useResponseStore } from '../../../features/dashboard/model/store/ResponseStore';
 import { responsesInfo } from '../../../shared/types/responseType';
 import { useLocation } from 'react-router-dom';
+import ResponesModal from '../../../widgets/dashboard/ui/response/ResponseModal';
 
-const ResponsesManagementPage = () => {
+const ResponseManagementPage = () => {
   const [listType, setListType] = useState<'summary' | 'query' | 'individual'>('summary');
-  const { response, setResponses, setSelectedResponse } = useResponseStore();
+  const { response, setResponses, setSelectedResponse, isModalOpen, closeModal } = useResponseStore();
   const location = useLocation();
   const { participantName, participantEmail } = location.state || {};
   useEffect(() => {
@@ -22,6 +23,9 @@ const ResponsesManagementPage = () => {
   }, [participantName]);
   return (
     <DashboardLayout centerContent="WOOACON 2024" pinkBg={true}>
+      {isModalOpen && (
+        <ResponesModal onClose={closeModal}></ResponesModal>
+      )}
       <div className="flex flex-col px-2 md:px-4">
         <h1 className="text-left font-semibold md:text-2xl text-xl py-4 md:py-6 pl-4">응답 {response.length}개</h1>
         <div className="flex justify-center">
@@ -32,4 +36,4 @@ const ResponsesManagementPage = () => {
     </DashboardLayout>
   );
 };
-export default ResponsesManagementPage;
+export default ResponseManagementPage;

src/shared/types/dashboardType.ts

@@ -16,6 +16,8 @@ import sentEmail from '../../../public/assets/dashboard/menu/SentMail(black).svg
 import clickedSentEmail from '../../../public/assets/dashboard/menu/SentMail(pink).svg';
 import participants from '../../../public/assets/dashboard/menu/Participants(black).svg';
 import clickedParticipants from '../../../public/assets/dashboard/menu/Participants(pink).svg';
+import response from '../../../public/assets/dashboard/menu/Response(black).svg';
+import clickedResponse from '../../../public/assets/dashboard/menu/Response(pink).svg';
 
 export const getMenuLists = (id: string | number) => [
   { text: '대시보드', icon: dashboard, clickedIcon: clickedDashboard, path: `/dashboard/${id}` },
@@ -29,6 +31,7 @@ export const getMenuLists = (id: string | number) => [
   { text: '이벤트 태그 정보', icon: tag, clickedIcon: clickedTag, path: `/dashboard/${id}/eventTag` },
   { text: '티켓 생성하기', icon: ticket, clickedIcon: clickedTicket, path: `/dashboard/${id}/ticket` },
   { text: '티켓에 추가 옵션 부착', icon: option, clickedIcon: clickedOption, path: `/dashboard/${id}/ticket/option` },
+  { text: '사용자 응답 관리', icon: response, clickedIcon: clickedResponse, path: `/dashboard/${id}/responses-management`},
   { text: '이메일 예약 발송', icon: email, clickedIcon: clickedEmail, path: `/dashboard/${id}/email` },
   { text: '보낸 이메일', icon: sentEmail, clickedIcon: clickedSentEmail, path: `/dashboard/${id}/mailBox` },
   {

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

@@ -4,20 +4,28 @@ import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { getMenuLists } from '../../../../shared/types/dashboardType';
 import Header from '../../../../../design-system/ui/Header';
 import HorizontalCardButton from '../../../../../design-system/ui/buttons/HorizontalCardButton';
+import { useResponseStore } from '../../../../features/dashboard/model/store/ResponseStore';
 
 const SideBar = ({ onClose }: { onClose: () => void }) => {
   const navigate = useNavigate();
   const location = useLocation();
   const { id } = useParams();
   const [selectedIcon, setSelectedIcon] = useState<string>('');
+  const { openModal } = useResponseStore();
 
   const menuLists = id ? getMenuLists(id) : [];
 
   const handleMenuClick = (menuText: string, path: string) => {
     if (location.pathname === path) {
+      if (menuText === '사용자 응답 관리') {
+      openModal();
+    }
       onClose();
     } else {
       setSelectedIcon(menuText);
+      if (menuText === '사용자 응답 관리') {
+      openModal();
+    }
       navigate(path);
     }
   };

src/widgets/dashboard/ui/response/ResponseModal.tsx

@@ -0,0 +1,54 @@
+import { useParams } from 'react-router-dom';
+import TextButton from '../../../../../design-system/ui/buttons/TextButton';
+import SelectTicketInfo from '../ticket/SelectTicketInfo';
+import { useTickets } from '../../../../features/ticket/hooks/useTicketHook';
+import { useResponseStore } from '../../../../features/dashboard/model/store/ResponseStore';
+
+interface ResponesModalProps {
+  onClose: () => void;
+}
+
+const ResponesModal = ({ onClose }: ResponesModalProps) => {
+  const { id } = useParams();
+  const eventId = id ? parseInt(id) : 0;
+
+  const { data, isLoading } = useTickets(eventId);
+  const tickets = data?.result ?? [];
+
+  const { setSelectedTicketId } = useResponseStore();
+
+  const handleClick = (ticketId: number) => {
+    setSelectedTicketId(ticketId);
+    console.log(ticketId)
+    onClose();
+  };
+  return (
+    <div className="fixed inset-0 flex items-center justify-center w-full max-w-lg h-full mx-auto bg-black bg-opacity-30 z-50">
+      <div className="flex flex-col w-[95%] px-4 py-6 gap-3 rounded-[5px] bg-white">
+        <div className="flex gap-3 mb-2">
+          <TextButton
+            label="<"
+            onClick={() => {
+              onClose();
+            }}
+          />
+          <h1 className="font-bold text-lg">응답을 확인할 티켓을 선택하세요</h1>
+        </div>
+        {isLoading ? (
+          <div>로딩 중...</div>
+        ) : (
+          tickets.map(ticket => (
+            <SelectTicketInfo
+              key={ticket.ticketId}
+              tickets={ticket}
+              onClick={() => {
+                handleClick(ticket.ticketId);
+              }}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  );
+};
+export default ResponesModal;