refact: query 페이지 삭제 및 응답관리 페이지 수정"

hyeeuncho · hyeeuncho · commit a1bde0c36a22 · 2025-05-27T20:53:55.000+09:00
diff --git a/src/features/dashboard/ui/MultiplePieCharts.tsx b/src/features/dashboard/ui/MultiplePieCharts.tsx
@@ -26,7 +26,6 @@ const MultiplePieCharts = ({ responses }: MultiplePieChartsProps) => {
     <div className="grid grid-cols-1 gap-6 p-4">
       {responses.map((option, _index) => {
         const data = aggregateAnswers(option.answers);
-        const allSame = data.length === 1;
 
         return (
           <div key={option.optionId} className="flex flex-col items-center">
@@ -41,7 +40,7 @@ const MultiplePieCharts = ({ responses }: MultiplePieChartsProps) => {
                   cy="50%"
                   outerRadius={80}
                   label
-                  stroke={allSame ? "none" : "white"}
+                  stroke="none"
                 >
                   {data.map((_, i) => (
                     <Cell key={`cell-${i}`} fill={COLORS[i % COLORS.length]} />
diff --git a/src/features/dashboard/ui/ResponseFilter.tsx b/src/features/dashboard/ui/ResponseFilter.tsx
@@ -7,7 +7,7 @@ import leftButton from '../../../../public/assets/main/LeftButton.svg';
 
 interface ResponseFilterProps {
     responses: responsesData[];
-    listType: 'summary' | 'query' | 'individual';
+    listType: 'summary' | 'individual';
     selectedField: { v1: string; v2: string };
     setSelectedField: (v1: string, v2: string) => void;
     setCurrentIndex: (updateFn: (prevIndex: number) => number) => void;
@@ -50,8 +50,7 @@ const ResponseFilter = ({
                         selectedValue={selectedField.v1}
                         onSelect={(selectedName, selectedEmail) => {
                             const selectedOption = options.find(opt =>
-                                (listType === 'query' ? fieldMapToKorean[opt.v1] === selectedName : opt.v1 === selectedName) &&
-                                opt.v2 === selectedEmail
+                                opt.v1 === selectedName && opt.v2 === selectedEmail
                             );
                             if (selectedOption) {
                                 setSelectedField(selectedOption.v1, selectedOption.v2);
diff --git a/src/features/dashboard/ui/ResponsesList.tsx b/src/features/dashboard/ui/ResponsesList.tsx
@@ -1,8 +1,6 @@
 import { useResponseStore } from '../model/store/ResponseStore';
-import { responsesInfo } from '../../../shared/types/responseType';
 import ResponseFilter from './ResponseFilter';
 import SelectedResponseList from './SelectedResponseList';
-import { createFieldMappings } from '../../../shared/lib/createFieldMappings';
 import { useEffect } from 'react';
 import { TicketOptionAnswerResponse } from '../../ticket/model/ticketInformation';
 import MultiplePieCharts from './MultiplePieCharts';
@@ -15,58 +13,16 @@ interface ResponsesListProps {
 const ResponsesList = ({ listType, ticketOptionResponses }: ResponsesListProps) => {
   const {
     response,
-    selectedField,
-    setSelectedField,
     selectedResponse,
     setSelectedResponse,
     currentIndex,
     setCurrentIndex,
   } = useResponseStore();
-  const { fieldMap, fieldMapToKorean } = createFieldMappings(response);
-  const queryOptions =
-    response && response[0]
-      ? Object.keys(response[0])
-        .filter(key => key !== 'id' && key !== 'selectedOptions')
-        .map(key => ({
-          v1: fieldMap[key] || key,
-          v2: '',
-        }))
-      : [];
 
   useEffect(() => {
     setCurrentIndex(() => 0);
   }, [listType, setCurrentIndex]);
 
-  const renderSection = (title: string, key: keyof (typeof responsesInfo)[0], isSummaryPage: boolean) => {
-    const transTitle = fieldMapToKorean[title];
-
-    return (
-      <div className="bg-white p-4 flex flex-col gap-2 mb-4">
-        <div className="flex justify-between items-center text-xs bg-white px-2 md:px-3 py-3">
-          <p className="text-base font-bold">{transTitle}</p>
-          <p>응답 {response.length}개</p>
-        </div>
-
-        {response.length === 0 ? (
-          <p>응답이 없습니다.</p>
-        ) : (
-          <div
-            className={isSummaryPage ? 'h-full max-h-48 overflow-y-auto space-y-2' : 'h-full overflow-y-auto space-y-2'}
-          >
-            {response.map(response => (
-              <div
-                className="flex justify-between text-xs bg-gray-100 shadow-sm px-2 md:px-3 py-3 gap-2"
-                key={response.id}
-              >
-                <p>{typeof response[key] === 'object' ? JSON.stringify(response[key]) : response[key]}</p>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    );
-  };
-
   const renderList = () => {
     switch (listType) {
       case 'summary':
@@ -80,22 +36,7 @@ const ResponsesList = ({ listType, ticketOptionResponses }: ResponsesListProps)
             </div>
           </>
         );
-      case 'query':
-        return (
-          <>
-            <ResponseFilter
-              responses={response}
-              listType={listType}
-              selectedField={{ v1: fieldMapToKorean[selectedField], v2: '' }}
-              setSelectedField={setSelectedField}
-              setCurrentIndex={setCurrentIndex}
-              currentIndex={currentIndex}
-              responsesLength={queryOptions.length}
-              options={queryOptions}
-            />
-            {renderSection(selectedField, selectedField as keyof (typeof responsesInfo)[0], false)}
-          </>
-        );
+      
       case 'individual':
         return (
           <div>
diff --git a/src/pages/dashboard/ui/ResponseManagementPage.tsx b/src/pages/dashboard/ui/ResponseManagementPage.tsx
@@ -3,34 +3,32 @@ import DashboardLayout from '../../../shared/ui/backgrounds/DashboardLayout';
 import ResponsesFilterBar from '../../../widgets/dashboard/ui/ResponsesFilterBar';
 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';
 import { usePurchaserAnswers } from '../../../features/ticket/hooks/useTicketOptionHook';
 
 const ResponseManagementPage = () => {
-  const [listType, setListType] = useState<'summary' | 'query' | 'individual'>('summary');
-  const { response, setResponses, setSelectedResponse, isModalOpen, closeModal, selectedTicketId } = useResponseStore();
+  const [listType, setListType] = useState<'summary' | 'individual'>('summary');
+  const { setSelectedResponse, isModalOpen, closeModal, selectedTicketId } = useResponseStore();
   const { data } = usePurchaserAnswers(selectedTicketId);
   console.log(data)
   const location = useLocation();
   const { participantName, participantEmail } = location.state || {};
-  useEffect(() => {
-    setResponses(responsesInfo);
-  }, [setResponses]);
+
   useEffect(() => {
     if (participantName) {
       setListType('individual');
       setSelectedResponse(participantName, participantEmail);
     }
   }, [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>
+        <h1 className="text-left font-semibold md:text-2xl text-xl py-4 md:py-6 pl-4">응답 {data?.result.length}개</h1>
         <div className="flex justify-center">
           <ResponsesFilterBar listType={listType} setListType={setListType} />
         </div>
diff --git a/src/pages/dashboard/ui/ticket/TicketOptionResponsePage.tsx b/src/pages/dashboard/ui/ticket/TicketOptionResponsePage.tsx
@@ -15,7 +15,7 @@ const TicketOptionResponsePage = () => {
     if (!data?.isSuccess) return <div>옵션 정보를 불러오지 못했습니다.</div>;
 
     return (
-        <TicketOptionLayout ticketAmount={ticketCnt} ticketInfo={{ ticketId, eventId, ticketCnt }}>
+        <TicketOptionLayout ticketAmount={ticketCnt} ticketInfo={{ ticketId, eventId, ticketCnt }} options={data?.result}>
             <TicketOption options={data?.result}>
             </TicketOption>
         </TicketOptionLayout>
diff --git a/src/shared/ui/backgrounds/TicketOptionLayout.tsx b/src/shared/ui/backgrounds/TicketOptionLayout.tsx
@@ -9,14 +9,16 @@ import { useOrderTicket } from "../../../features/ticket/hooks/useOrderHook";
 import { OrderTicketRequest } from "../../../features/ticket/model/orderInformation";
 import { useTickets } from "../../../features/ticket/hooks/useTicketHook";
 import { useCreateTicketOptionAnswers } from "../../../features/ticket/hooks/useTicketOptionHook";
+import { TicketOptionResponse } from "../../../features/ticket/model/ticketInformation";
 
 interface TicketOptionLayoutProps {
     children: React.ReactNode;
     ticketAmount: number;
     ticketInfo: OrderTicketRequest;
+    options: TicketOptionResponse[];
 }
 
-const TicketOptionLayout = ({ children, ticketAmount, ticketInfo }: TicketOptionLayoutProps) => {
+const TicketOptionLayout = ({ children, ticketAmount, ticketInfo, options }: TicketOptionLayoutProps) => {
     const navigate = useNavigate();
     const { currentPage, setCurrentPage, selectedOptions, resetOptions } = useTicketOptionStore();
     const centerContent = `티켓 옵션 선택 (${currentPage}/${ticketAmount})`;
@@ -27,6 +29,7 @@ const TicketOptionLayout = ({ children, ticketAmount, ticketInfo }: TicketOption
         (ticket) => ticket.ticketId === ticketInfo.ticketId
     );
     const { mutate: submitAnswers } = useCreateTicketOptionAnswers();
+    console.log(selectedOptions)
 
     //페이지
     const pageIndicator = Array(ticketAmount).fill(" . ");
@@ -35,7 +38,28 @@ const TicketOptionLayout = ({ children, ticketAmount, ticketInfo }: TicketOption
     //버튼 텍스트
     const isLastPage = currentPage === ticketAmount;
     const buttonText = isLastPage ? "결제하기" : "다음 티켓 옵션 선택하기";
+
     const handleNextPage = () => {
+        const currentOptions = selectedOptions[currentPage];
+        const requiredOptions = options.filter((opt) => opt.isMandatory);
+        const isValid = requiredOptions.every((opt) => {
+            const answer = currentOptions?.[opt.id];
+            if (opt.type === "TEXT") {
+                return typeof answer === "string" && answer.trim() !== "";
+            }
+            if (opt.type === "SINGLE") {
+                return typeof answer === "number";
+            }
+            if (opt.type === "MULTIPLE") {
+                return Array.isArray(answer) && answer.length > 0;
+            }
+            return false;
+        });
+        if (!isValid) {
+            alert("필수 옵션을 모두 입력해주세요.");
+            return;
+        }
+
         if (isLastPage) {
             const sendAnswersByPage = async () => {
                 for (const pageIndex of Object.keys(selectedOptions).sort((a, b) => Number(a) - Number(b))) {
@@ -73,11 +97,7 @@ const TicketOptionLayout = ({ children, ticketAmount, ticketInfo }: TicketOption
                         onSuccess: (response) => {
                             if (response.isSuccess && Array.isArray(response.result)) {
                                 const orderIds = response.result;
-                                navigate('/payment/ticket-confirm', {
-                                    state: { orderIds, ...ticketInfo }
-                                });
-                            } else {
-                                alert("주문 정보를 불러올 수 없습니다.");
+                                navigate('/payment/ticket-confirm', { state: { orderIds } });
                             }
                         },
                     });
@@ -128,23 +148,23 @@ const TicketOptionLayout = ({ children, ticketAmount, ticketInfo }: TicketOption
                 </div>
             </div>
 
-      <div className="flex flex-col mt-8 mx-auto w-[85%]">
-        <p className="font-bold text-sm md:text-base">추가 옵션</p>
-        <p className="text-xs md:text-sm text-gray-500 mt-2">
-          구매하는 티켓에 추가적으로 선택할 수 있는 옵션들이 있습니다.
-        </p>
-      </div>
+            <div className="flex flex-col mt-8 mx-auto w-[85%]">
+                <p className="font-bold text-sm md:text-base">추가 옵션</p>
+                <p className="text-xs md:text-sm text-gray-500 mt-2">
+                    구매하는 티켓에 추가적으로 선택할 수 있는 옵션들이 있습니다.
+                </p>
+            </div>
 
-      {/* 내용 영역 */}
-      <div className="flex flex-col w-[85%] mx-auto mt-4">
-        {children}
-        <div className="flex flex-grow" />
-        <div className="w-full p-6">
-          <Button label={buttonText} onClick={handleNextPage} className="w-full h-12 rounded-full" />
+            {/* 내용 영역 */}
+            <div className="flex flex-col w-[85%] mx-auto mt-4">
+                {children}
+                <div className="flex flex-grow" />
+                <div className="w-full p-6">
+                    <Button label={buttonText} onClick={handleNextPage} className="w-full h-12 rounded-full" />
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  );
+    );
 };
 
 export default TicketOptionLayout;
diff --git a/src/widgets/dashboard/ui/ResponsesFilterBar.tsx b/src/widgets/dashboard/ui/ResponsesFilterBar.tsx
@@ -1,8 +1,8 @@
 import TextButton from '../../../../design-system/ui/buttons/TextButton';
 
 interface ResponsesFilterBarProps {
-  listType: 'summary' | 'query' | 'individual';
-  setListType: (type: 'summary' | 'query' | 'individual') => void;
+  listType: 'summary' | 'individual';
+  setListType: (type: 'summary' | 'individual') => void;
 }
 
 const ResponsesFilterBar = ({
@@ -16,11 +16,6 @@ const ResponsesFilterBar = ({
           onClick={() => setListType('summary')}
           className={listType === 'summary' ? 'text-main' : ''}
         />
-        <TextButton
-          label="질문"
-          onClick={() => setListType('query')}
-          className={listType === 'query' ? 'text-main' : ''}
-        />
         <TextButton
           label="개별 조회"
           onClick={() => setListType('individual')}
