diff --git a/src/pages/SchedulePage.jsx b/src/pages/SchedulePage.jsx index 3fd46fe2bdf2b0e5047d64b286726c6aae595220..a39e13a6180ddafac0378240457cd5b131f9a97b 100644 --- a/src/pages/SchedulePage.jsx +++ b/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> - <p className="mb-1 body-1"> - <strong>Title:</strong> {selectedSchedule.title} - </p> - <p className="mb-1 body-1"> - <strong>Fixed:</strong>{" "} - {selectedSchedule.is_fixed ? "고정" : "유동"} - </p> - <div className="mb-4 body-1"> - <span>Time Indices:</span> - {selectedSchedule.time_indices.map((time_idx) => ( - <Label key={time_idx} theme="indigo" size="sm"> - {time_idx} - </Label> - ))} + <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>제목:</strong> {selectedSchedule.title} + </p> + <p className="mb-1 body-1"> + <strong>스케줄 타입:</strong>{" "} + {selectedSchedule.is_fixed ? "고정" : "유동"} + </p> + <div className="mb-4 body-1"> + <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> ) : ( - <button - className="px-4 py-2 font-bold text-white rounded bg-gradient-pink" - onClick={() => handleCreateSchedule()} - > - Add 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()} + > + 추가 + </button> + </div> )} </> )}