feat: 선택취소 기능 개발 및 안내 메세지 수정(#8)

src/pages/SchedulePage.jsx

@@ -66,6 +66,19 @@ const SchedulePage = () => {
   const handleSlotClick = async (timeIdx) => {
     if (!isEditMode) return;
 
+    // API 호출 준비가 되었을 때 사용:
+    // try {
+    //   const response = await fetchScheduleByTimeIndex(timeIdx);
+    //   if (response && response.data && response.data.schedule) {
+    //     setSelectedSchedule(response.data.schedule); // API로 가져온 스케줄 설정
+    //   } else {
+    //     console.error("No schedule found for time index:", timeIdx);
+    //   }
+    // } catch (error) {
+    //   console.error("Failed to fetch schedule for time index:", timeIdx, error);
+    // }
+
+    //임시 코드
     const slotInSchedule = schedules.find((s) =>
       s.time_indices.includes(timeIdx)
     );
@@ -82,18 +95,13 @@ const SchedulePage = () => {
     } else {
       setSelectedSlots((prev) => [...prev, timeIdx]);
     }
+  };
 
-    // API 호출 준비가 되었을 때 사용:
-    // try {
-    //   const response = await fetchScheduleByTimeIndex(timeIdx);
-    //   if (response && response.data && response.data.schedule) {
-    //     setSelectedSchedule(response.data.schedule); // API로 가져온 스케줄 설정
-    //   } else {
-    //     console.error("No schedule found for time index:", timeIdx);
-    //   }
-    // } catch (error) {
-    //   console.error("Failed to fetch schedule for time index:", timeIdx, error);
-    // }
+  const handleCancelSchedule = () => {
+    setSelectedSlots([]);
+    setNewTitle("");
+    setIsFixed(true);
+    setSelectedSchedule(null);
   };
 
   const handleEditSchedule = () => {
@@ -130,10 +138,10 @@ const SchedulePage = () => {
       setSelectedSlots([]);
       setNewTitle("");
       setIsFixed(true);
-      alert("Schedule update successfully!");
+      alert("스케줄을 수정했습니다.!");
     } catch (error) {
-      console.error("Failed to update schedule:", error);
-      alert("Failed to update schedule.");
+      console.error("스케줄 수정에 실패했습니다.:", error);
+      alert("스케줄 수정에 실패했습니다.");
     } finally {
       setIsUpdateMode(false);
     }
@@ -162,10 +170,10 @@ const SchedulePage = () => {
       setSelectedSlots([]);
       setNewTitle("");
       setIsFixed(true);
-      alert("Schedule created successfully!");
+      alert("스케줄이 추가되었습니다!");
     } catch (error) {
-      console.error("Failed to create schedule:", error);
-      alert("Failed to create schedule.");
+      console.error("스케줄 삭제에 실패했습니다:", error);
+      alert("스케줄 추가에 실패했습니다.");
     }
   };
 
@@ -185,10 +193,11 @@ const SchedulePage = () => {
       setSchedules((prev) =>
         prev.filter((s) => s.title !== selectedSchedule.title)
       );
+
       setSelectedSchedule(null);
-      alert("Schedule deleted successfully!");
+      alert("스케줄이 삭제되었습니다.");
     } catch (error) {
-      console.error("Failed to delete schedule:", error);
+      console.error("스케줄 삭제에 실패했습니다:", error);
     }
   };
 
@@ -225,49 +234,49 @@ const SchedulePage = () => {
             className={`transform transition-transform w-full max-w-[768px] tablet:rounded-2xl bg-primary-100 p-6 text-center shadow-lg`}
           >
             {selectedSlots.length === 0 && selectedSchedule ? (
-              <>
-                <h3 className="mb-2 heading-2 text-primary-500">
-                  Schedule Details
-                </h3>
+              <div className="flex flex-col items-center justify-center w-full">
+                <h3 className="mb-2 heading-2 text-primary-500">스케줄 정보</h3>
+                <div className="flex flex-col items-start w-1/2">
                   <p className="mb-1 body-1">
-                  <strong>Title:</strong> {selectedSchedule.title}
+                    <strong>제목:</strong> {selectedSchedule.title}
                   </p>
                   <p className="mb-1 body-1">
-                  <strong>Fixed:</strong>{" "}
+                    <strong>스케줄 타입:</strong>{" "}
                     {selectedSchedule.is_fixed ? "고정" : "유동"}
                   </p>
                   <div className="mb-4 body-1">
-                  <span>Time Indices:</span>
+                    <strong>선택된 시간:</strong>{" "}
                     {selectedSchedule.time_indices.map((time_idx) => (
                       <Label key={time_idx} theme="indigo" size="sm">
                         {time_idx}
                       </Label>
                     ))}
                   </div>
+                </div>
                 <div className="flex justify-center mt-4 space-x-4">
                   <button
                     className="px-4 py-2 font-bold text-white rounded bg-gradient-purple"
                     onClick={handleEditSchedule}
                   >
-                    Edit
+                    수정하기
                   </button>
                   <button
                     className="px-4 py-2 font-bold text-white rounded bg-gradient-pink"
                     onClick={handleDeleteSchedule}
                   >
-                    Delete
+                    삭제하기
                   </button>
                 </div>
-              </>
+              </div>
             ) : (
               <>
                 {isUpdateMode ? (
                   <h3 className="mb-4 heading-2 text-primary-500">
-                    Update Schedule
+                    스케줄 수정하기
                   </h3>
                 ) : (
                   <h3 className="mb-4 heading-2 text-primary-500">
-                    Create New Schedule
+                    새 스케줄 만들기
                   </h3>
                 )}
                 <input
@@ -286,7 +295,7 @@ const SchedulePage = () => {
                       checked={isFixed === true}
                       onChange={() => setIsFixed(true)}
                     />
-                    <span className="body-1">고정</span>
+                    <span className="body-1">고정 스케줄</span>
                   </label>
                   <label className="flex items-center space-x-2">
                     <input
@@ -296,11 +305,11 @@ const SchedulePage = () => {
                       checked={isFixed === false}
                       onChange={() => setIsFixed(false)}
                     />
-                    <span className="body-1">유동</span>
+                    <span className="body-1">유동 스케줄</span>
                   </label>
                 </div>
                 <div className="mb-4 body-1">
-                  <span>Selected Slots:</span>
+                  <span>선택된 시간:</span>
                   {selectedSlots.map((time_idx) => (
                     <Label key={time_idx} theme="indigo" size="sm">
                       {time_idx}
@@ -312,15 +321,23 @@ const SchedulePage = () => {
                     className="px-4 py-2 font-bold text-white rounded bg-gradient-pink"
                     onClick={() => handleUpdateSchedule()}
                   >
-                    Update Schedule
+                    수정 완료
                   </button>
                 ) : (
+                  <div className="flex justify-center mt-4 space-x-4">
+                    <button
+                      className="px-4 py-2 font-bold text-white rounded bg-tertiary-900"
+                      onClick={() => handleCancelSchedule()}
+                    >
+                      취소
+                    </button>
                     <button
                       className="px-4 py-2 font-bold text-white rounded bg-gradient-pink"
                       onClick={() => handleCreateSchedule()}
                     >
-                    Add Schedule
+                      추가
                     </button>
+                  </div>
                 )}
               </>
             )}