From 9cda076577690a438d2c662758fe5a20068f329f Mon Sep 17 00:00:00 2001 From: Chaeyoung Shin Date: Mon, 2 Dec 2024 15:05:40 +0900 Subject: [PATCH] =?UTF-8?q?Feat:=20#89=20=EC=BA=98=EB=A6=B0=EB=8D=94=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/CalendarInfoModal.jsx | 66 +++++++++++++++++++++----- src/components/CreateCalendarModal.jsx | 4 +- src/components/SideBarLeft.jsx | 26 ++++++++-- src/mocks/handlers/calendarHandlers.js | 51 +++++++++++++++++--- 4 files changed, 122 insertions(+), 25 deletions(-) diff --git a/src/components/CalendarInfoModal.jsx b/src/components/CalendarInfoModal.jsx index 1ee40b5..50514c0 100644 --- a/src/components/CalendarInfoModal.jsx +++ b/src/components/CalendarInfoModal.jsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from "react"; import axios from "axios"; import { CopyToClipboard } from "react-copy-to-clipboard"; -import { FaXmark } from "react-icons/fa6"; +import { FaTrashCan, FaXmark } from "react-icons/fa6"; import { FaCheck, @@ -10,9 +10,10 @@ import { FaRegCopy, FaToggleOff, FaToggleOn, + FaTrash, } from "react-icons/fa"; -export default function CalendarInfo({ calendar, onClose }) { +export default function CalendarInfo({ calendar, onClose, userId }) { // 초기 값 설정 const [title, setTitle] = useState(calendar.calendar_name); const [detailMemo, setDetailMemo] = useState(calendar.calendar_description); @@ -31,6 +32,12 @@ export default function CalendarInfo({ calendar, onClose }) { const toggleIsEdit = () => setIsEdit(!isEdit); const toggleIsPublic = () => setNewPublic(!newPublic); + // 컴포넌트가 마운트될 때 creator_id와 userId 확인 + useEffect(() => { + console.log("Calendar Creator ID:", calendar.creator_id); + console.log("Current User ID:", userId); + }, [calendar.creator_id, userId]); + // 저장 const save = async () => { try { @@ -75,6 +82,31 @@ export default function CalendarInfo({ calendar, onClose }) { toggleIsEdit(); }; + // 삭제 + const handleDelete = async () => { + try { + const token = localStorage.getItem("token"); // 토큰 가져오기 + const response = await axios.delete( + `/api/calendars/${calendar.calendar_id}`, + { + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${token}`, + }, + }, + ); + + if (response.status === 200) { + // 삭제가 성공적으로 완료되었을 때 + alert("캘린더가 성공적으로 삭제되었습니다."); + onClose(); // 삭제 후 모달 닫기 + } + } catch (error) { + console.error("캘린더 삭제 실패:", error); + alert("캘린더 삭제에 실패했습니다. 다시 시도해 주세요."); + } + }; + return (
멤버
-
+
호도니, 뚜디니, 때용이 + 10
@@ -121,7 +153,7 @@ export default function CalendarInfo({ calendar, onClose }) { setNewDetail(e.target.value)} />
@@ -149,7 +181,7 @@ export default function CalendarInfo({ calendar, onClose }) {
) : (
-
+
{detailMemo}
-
+
비공개 캘린더로 설정하기
{newPublic ? ( @@ -187,7 +219,7 @@ export default function CalendarInfo({ calendar, onClose }) { /> )}
-
+
{visitCode}
@@ -195,10 +227,10 @@ export default function CalendarInfo({ calendar, onClose }) { ) : ( <>
-
+
{isPublic ? "공개" : "비공개"}
-
+
{visitCode}
) : ( - +
+ + {calendar.creator_id === userId && ( + + )} +
)}
); diff --git a/src/components/CreateCalendarModal.jsx b/src/components/CreateCalendarModal.jsx index f890432..543d717 100644 --- a/src/components/CreateCalendarModal.jsx +++ b/src/components/CreateCalendarModal.jsx @@ -19,7 +19,7 @@ export default function CreateCalendar({ onClose }) { }; // 색상 - const [calColor, setCalColor] = useState("#FF5C5C"); // 초기 값은 빨간색 + const [calColor, setCalColor] = useState("#FF5C5C"); // 초기 값 // 에러 메시지 상태 추가 const [errorMessage, setErrorMessage] = useState(""); @@ -68,7 +68,7 @@ export default function CreateCalendar({ onClose }) { className="absolute right-[1.2rem] top-[1.2rem] cursor-pointer text-darkGray" onClick={onClose} /> -
+
{ @@ -41,10 +42,26 @@ export default function SideBarLeft() { } } - // 수정 및 생성 모달이 닫힐 때 캘린더 목록 새로고침 - if (!isCalendarInfoOpen && !isCreateCalendarOpen) { - fetchCalendars(); + async function fetchUser() { + try { + const token = localStorage.getItem("token"); // 토큰 가져오기 + const response = await axios.get("/api/users/me", { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + + if (response.status === 200) { + setMyUserId(response.data.user_id); // 사용자 ID 설정 + } + } catch (error) { + console.error("사용자 정보를 가져오는 중 오류 발생:", error); + } } + + // 사용자 정보와 캘린더 정보 모두 가져오기 + fetchCalendars(); + fetchUser(); }, [isCalendarInfoOpen, isCreateCalendarOpen]); const handleToggle = (id) => { @@ -212,6 +229,7 @@ export default function SideBarLeft() { calendar={selectedCalendar} onClose={() => setCalendarInfoOpen(false)} onSave={handleSaveCalendar} + userId={myUserId} // 현재 로그인한 사용자 ID 전달 />
)} diff --git a/src/mocks/handlers/calendarHandlers.js b/src/mocks/handlers/calendarHandlers.js index 22cfdfe..2f066ac 100644 --- a/src/mocks/handlers/calendarHandlers.js +++ b/src/mocks/handlers/calendarHandlers.js @@ -1,11 +1,10 @@ import { rest } from "msw"; -// 기존의 캘린더 데이터 (가짜 데이터) let mockCalendars = [ { calendar_id: 1, - calendar_name: "PoodingDev", - calendar_description: "개발 프로젝트 캘린더", + calendar_name: "내가 만든 캘린더", + calendar_description: "삭제 권한 있음", calendar_color: "#FFC960", is_public: false, creator_id: 1, @@ -13,8 +12,8 @@ let mockCalendars = [ }, { calendar_id: 2, - calendar_name: "헬린이의 삶", - calendar_description: "하체 뿌셔", + calendar_name: "관리자로 있는 캘린더", + calendar_description: "삭제 권한 없음", calendar_color: "#6D87D5", is_public: true, creator_id: 2, @@ -65,7 +64,7 @@ export const calendarHandlers = [ calendar_color: calendar_color, // 클라이언트에서 전달된 색상 값 사용 is_public: is_public || false, creator_id: 1, - invitation_code: "ABC123", // 생성된 초대 코드 (고정된 가짜 코드) + invitation_code: "ABC123", // 생성된 초대 코드 }; // 가짜 데이터 목록에 새 캘린더 추가 @@ -126,4 +125,44 @@ export const calendarHandlers = [ // 200 OK 응답 반환 return res(ctx.status(200), ctx.json(mockCalendars[calendarIndex])); }), + + // 캘린더 삭제 핸들러 추가 + rest.delete("/api/calendars/:calendarId", async (req, res, ctx) => { + const token = req.headers.get("Authorization"); + const { calendarId } = req.params; + + if (!token || token !== "Bearer fake_token") { + return res( + ctx.status(401), + ctx.json({ + error: "인증 실패", + message: "로그인이 필요합니다. 다시 로그인해 주세요.", + }), + ); + } + + // 가짜 데이터에서 해당 캘린더를 찾음 + const calendarIndex = mockCalendars.findIndex( + (cal) => cal.calendar_id === parseInt(calendarId), + ); + + if (calendarIndex === -1) { + return res( + ctx.status(404), + ctx.json({ + error: "not_found", + message: "해당 캘린더를 찾을 수 없습니다.", + }), + ); + } + + // 캘린더 삭제 + mockCalendars.splice(calendarIndex, 1); + + // 200 OK 응답 반환 + return res( + ctx.status(200), + ctx.json({ message: "캘린더가 성공적으로 삭제되었습니다." }), + ); + }), ];