refact: API 호출 전 데이터 검증 추가

Author: hyeeuncho

src/features/ticket/model/TicketContext.tsx

@@ -1,20 +1,22 @@
 import { createContext, ReactNode, useContext, useState } from 'react';
+import { CreateTicketRequest } from './ticketCreation';
 
 export interface TicketState {
-  ticketState: {
-    startDate: string; 
-    endDate: string;   
-    startTime: string; 
-    endTime: string;   
-  };
-  setTicketState: React.Dispatch<React.SetStateAction<TicketState['ticketState']>>;
+  ticketState: CreateTicketRequest;
+  setTicketState: React.Dispatch<React.SetStateAction<CreateTicketRequest>>;
   setTicketChannelId: (ticketChannelId: number) => void;
 }
 
 const TicketContext = createContext<TicketState | undefined>(undefined);
 
 export const TicketProvider = ({ children }: { children: ReactNode }) => {
-  const [ticketState, setTicketState] = useState<TicketState['ticketState']>({
+  const [ticketState, setTicketState] = useState<CreateTicketRequest>({
+    eventId: 0, 
+    ticketType: '',
+    ticketName: '',
+    ticketDescription: '',
+    ticketPrice: 0,
+    availableQuantity: 0,
     startDate: '',
     endDate: '',
     startTime: '06:00',
@@ -38,4 +40,4 @@ export const useTicketState = () => {
     throw new Error('useTicketState must be used within a TicketProvider');
   }
   return context;
-};
+};

src/features/ticket/model/TicketDatePicker.tsx

@@ -25,7 +25,7 @@ const TicketDatePicker = ({ className, ticketState, setTicketState, isLabel = fa
     for (let i = 0; i < 24; i++) {
       for (let j = 0; j < 4; j++) {
         const hour = i.toString().padStart(2, '0');
-        const minute = (j * 15).toString().padEnd(2, '0');
+        const minute = (j * 15).toString().padStart(2, '0');
         options.push(`${hour}:${minute}`);
       }
     }
@@ -44,7 +44,6 @@ const TicketDatePicker = ({ className, ticketState, setTicketState, isLabel = fa
 
   useEffect(() => {
     if (setTicketState) {
-      // Update state only when values change
       setTicketState(prev => {
         const newStartDate = startDate ? formatDate(startDate) : '';
         const newEndDate = endDate ? formatDate(endDate) : '';
@@ -54,7 +53,6 @@ const TicketDatePicker = ({ className, ticketState, setTicketState, isLabel = fa
           prev.startTime !== startTime ||
           prev.endTime !== endTime
         ) {
-          // Call the parent function to pass updated values
           onDateChange({
             startDate: newStartDate,
             endDate: newEndDate,
@@ -69,7 +67,7 @@ const TicketDatePicker = ({ className, ticketState, setTicketState, isLabel = fa
             endTime,
           };
         }
-        return prev; // Return previous state if no change
+        return prev; 
       });
     }
   }, [startDate, endDate, startTime, endTime, setTicketState, onDateChange]);

src/pages/dashboard/ui/ticket/TicketCreatePage.tsx

@@ -21,12 +21,6 @@ const TicketCreatePage = () => {
     startTime: '',
     endTime: '',
   });
-  const [eventState, setEventState] = useState({
-    startDate: '',
-    endDate: '',
-    startTime: '',
-    endTime: '',
-  });
 
   const handleTicketTypeChange = (type: string) => {
     let mappedType: string;
@@ -44,6 +38,9 @@ const TicketCreatePage = () => {
   // 필드값 업데이트
   const handleInputChange = (field: keyof CreateTicketRequest) => (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
+    if ((field === 'ticketPrice' || field === 'availableQuantity') && Number(value) < 0) {
+      return;
+    }
     setTicketData((prev) => ({
       ...prev,
       [field]: field === 'ticketPrice' || field === 'availableQuantity' ? Number(value) : value,
@@ -52,7 +49,6 @@ const TicketCreatePage = () => {
 
   // 시간 업데이트
   const handleDateChange = (dates: { startDate: string; endDate: string; startTime: string; endTime: string }) => {
-    setEventState(dates);
     setTicketData((prevState) => ({
       ...prevState,
       startDate: dates.startDate,
@@ -76,11 +72,17 @@ const TicketCreatePage = () => {
 
   // API 호출
   const handleSaveClick = async () => {
+    if (!ticketData.ticketName || !ticketData.ticketDescription || ticketData.ticketPrice < 0 || !ticketData.availableQuantity) {
+      alert('모든 필수 입력 항목을 작성해주세요.');
+      return;
+    }
     try {
       const response = await createTicket(ticketData);
       console.log('티켓 저장 성공:', response);
+      alert('티켓이 성공적으로 저장되었습니다.');
     } catch (err) {
       console.error('티켓 저장에 실패했습니다.', err);
+      alert('티켓 저장에 실패했습니다. 다시 시도해주세요.');
     }
   };
 
@@ -97,7 +99,7 @@ const TicketCreatePage = () => {
         <div>
           <div className="w-32 md:w-40 my-1">
             <p className="font-semibold px-1 mb-1 text-gray-700">티켓 종류</p>
-            <ChoiceChip {...TwoOptions.args} onSelect={handleTicketTypeChange}/>
+            <ChoiceChip {...TwoOptions.args} onSelect={handleTicketTypeChange} />
           </div>
           <p className="block px-1 mb-1 text-placeholderText text-11 md:text-13">
             참가자가 선착순으로 발행된 티켓을 구매합니다.
@@ -139,13 +141,11 @@ const TicketCreatePage = () => {
         {/*캘린더가 들어갈 자리*/}
         <div className="flex flex-col gap-2">
           <p className="px-1 text-gray-700 font-semibold">판매 기간</p>
-          <TicketDatePicker isLabel={true} ticketState={eventState} 
-            setTicketState={setEventState} onDateChange={handleDateChange}/>
+          <TicketDatePicker isLabel={true} ticketState={ticketData}
+            setTicketState={setTicketData} onDateChange={handleDateChange} />
         </div>
+        
         <div className="flex-grow"></div>
-        <div className="ticket-data-output">
-          <pre>{JSON.stringify(ticketData, null, 2)}</pre>
-        </div>
 
         <div className="w-full ">
           <Button label="저장하기" onClick={handleSaveClick} className="w-full h-12 rounded-full" />
@@ -155,5 +155,4 @@ const TicketCreatePage = () => {
   );
 };
 
-export default TicketCreatePage;
-
+export default TicketCreatePage;