유저 닉네임, 아이디 로컬 스토리지에 저장

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,16 +27,47 @@ 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,
       [key]: value,
     }));
   };
 
+  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>
       )}
 

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

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}

src/styles/calendar.css

@@ -76,6 +76,9 @@
   box-sizing: border-box !important;
 }
 
+.fc-event-title-container {
+  font-size: 0.75rem;
+}
 
 .fc {
   border: none;