From 4a4b319c92accef46817249bab6705ef4a9cf5dd Mon Sep 17 00:00:00 2001
From: Chaeyoung Shin <scy0723123@gmail.com>
Date: Tue, 10 Dec 2024 00:10:37 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20=EC=9C=A0=EC=A0=80=20=EB=8B=89=EB=84=A4=EC=9E=84=20?=
 =?UTF-8?q?=EB=A1=9C=EC=BB=AC=20=EC=8A=A4=ED=86=A0=EB=A6=AC=EC=A7=80?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20=EA=B0=80=EC=A0=B8=EC=98=A4=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CalendarInfoModal.jsx | 75 ++++++++++++++++++++++------
 src/components/CreateEventModal.jsx  |  2 +-
 src/components/EventInfo.jsx         |  6 +--
 src/styles/calendar.css              |  3 ++
 4 files changed, 68 insertions(+), 18 deletions(-)

diff --git a/src/components/CalendarInfoModal.jsx b/src/components/CalendarInfoModal.jsx
index ea56b56..6658640 100644
--- a/src/components/CalendarInfoModal.jsx
+++ b/src/components/CalendarInfoModal.jsx
@@ -16,7 +16,6 @@ import {
 
 export default function CalendarInfo({ calendar, onClose, userId }) {
   const user_id = localStorage.getItem("user_id");
-  console.log(user_id);
   const [calendarState, setCalendarState] = useState({
     name: calendar.name,
     description: calendar.description,
@@ -28,9 +27,7 @@ export default function CalendarInfo({ calendar, onClose, userId }) {
   });
   const [isDeleteModalOpen, setDeleteModalOpen] = useState(false);
   const [isEdit, setIsEdit] = useState(false);
-  // 상태 변경 핸들러
-  console.log("---");
-  console.log(calendar);
+  // 상태 변경 핸들러;
   const updateState = (key, value) => {
     setCalendarState((prev) => ({
       ...prev,
@@ -38,6 +35,39 @@ export default function CalendarInfo({ calendar, onClose, userId }) {
     }));
   };
 
+  const save = async () => {
+    try {
+      const token = localStorage.getItem("token"); // 토큰 가져오기
+      console.log(calendarState);
+      const response = await instance.patch(
+        `/api/calendars/${calendar.calendar_id}/`,
+        {
+          name: calendarState.name,
+          description: calendarState.description,
+          is_public: calendarState.isPublic,
+          color: calendarState.color,
+          creator: calendarState.creator,
+          invitation_code: calendarState.invitation_code,
+        },
+
+        {
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+        },
+      );
+
+      if (response.status === 200) {
+        // 상태 업데이트 및 편집 종료
+        resetState();
+        onClose();
+      }
+    } catch (error) {
+      console.error("캘린더 수정 실패:", error);
+      alert("캘린더 수정에 실패했습니다. 다시 시도해 주세요.");
+    }
+  };
   const resetState = () => {
     setCalendarState({
       name: calendar.name,
@@ -213,18 +243,35 @@ export default function CalendarInfo({ calendar, onClose, userId }) {
               </div>
             )}
           </div>
-          <div className="absolute bottom-[3rem] right-[3rem] flex space-x-[0.5rem]">
-            <FaPen
-              className="cursor-pointer text-[1.5rem] text-darkGray"
-              onClick={() => setIsEdit(true)}
-            />
-            {calendar.creator_id == user_id && (
-              <FaTrashCan
+          {isEdit ? (
+            <div className="absolute bottom-[2rem] right-[2rem] flex space-x-[0.5rem]">
+              <button
+                className="flex h-[2.5rem] w-[5rem] items-center justify-center rounded-[0.5rem] border-[0.15rem] border-solid border-eventoPurple/80 text-center text-[1.1rem] text-eventoPurple/80 hover:bg-eventoPurpleLight/70 active:bg-eventoPurpleLight"
+                onClick={resetState}
+              >
+                <span>취소</span>
+              </button>
+              <button
+                onClick={save}
+                className="flex h-[2.5rem] w-[5rem] items-center justify-center rounded-[0.5rem] bg-eventoPurple/90 text-center text-[1.1rem] text-eventoWhite hover:bg-eventoPurple/70 active:bg-eventoPurple/50"
+              >
+                <span>저장</span>
+              </button>
+            </div>
+          ) : (
+            <div className="absolute bottom-[3rem] right-[3rem] flex space-x-[0.5rem]">
+              <FaPen
                 className="cursor-pointer text-[1.5rem] text-darkGray"
-                onClick={() => setDeleteModalOpen(true)}
+                onClick={() => setIsEdit(true)}
               />
-            )}
-          </div>
+              {calendar.creator_id == user_id && (
+                <FaTrashCan
+                  className="cursor-pointer text-[1.5rem] text-darkGray"
+                  onClick={handleDelete}
+                />
+              )}
+            </div>
+          )}
         </div>
       )}
 
diff --git a/src/components/CreateEventModal.jsx b/src/components/CreateEventModal.jsx
index 0dddaa3..94d5ff4 100644
--- a/src/components/CreateEventModal.jsx
+++ b/src/components/CreateEventModal.jsx
@@ -196,7 +196,7 @@ export default function CreateEvent({ onClose, setEvents }) {
         className="absolute right-[1.2rem] top-[1.2rem] cursor-pointer text-darkGray"
         onClick={onClose}
       />
-      <div className="flex w-full flex-col">
+      <div className="flex flex-col w-full">
         <div className="mb-[1rem] flex items-center justify-between">
           {/* 이벤트 제목 */}
           <input
diff --git a/src/components/EventInfo.jsx b/src/components/EventInfo.jsx
index d1295ad..2d87173 100644
--- a/src/components/EventInfo.jsx
+++ b/src/components/EventInfo.jsx
@@ -15,6 +15,7 @@ import {
   FaRegCommentDots,
 } from "react-icons/fa";
 export default function EventInfo({ onClose, eventDetails, setEvents }) {
+  const user_nickname = localStorage.getItem("user_nickname");
   const [viewMode, setViewMode] = useState("info");
   console.log(`viewMode:${viewMode}`);
   const handleViewChange = (mode) => {
@@ -430,9 +431,8 @@ export default function EventInfo({ onClose, eventDetails, setEvents }) {
             <div className="absolute bottom-[3rem] right-[3rem] flex space-x-[0.5rem] text-[1.5rem] text-darkGray">
               <FaPen onClick={() => handleViewChange("edit")} />
               {calInfo.members &&
-                calInfo.members.find(
-                  (cal) => cal === userInfo.user_nickname,
-                ) !== undefined && (
+                calInfo.members.find((cal) => cal === user_nickname) !==
+                  undefined && (
                   <FaRegTrashAlt
                     className="cursor-pointer text-[1.5rem] text-darkGray"
                     onClick={handleDelete}
diff --git a/src/styles/calendar.css b/src/styles/calendar.css
index 24c68e3..5810084 100644
--- a/src/styles/calendar.css
+++ b/src/styles/calendar.css
@@ -76,6 +76,9 @@
   box-sizing: border-box !important;
 }
 
+.fc-event-title-container {
+  font-size: 0.75rem;
+}
 
 .fc {
   border: none;