Skip to content

Commit

Permalink
Merge pull request MSW - 캘린더 C R U
Browse files Browse the repository at this point in the history 
MSW - 캘린더
  • Loading branch information
@cxaosdev
cxaosdev authored Dec 2, 2024
2 parents e1de478 + a6de308 commit 1a92019
Show file tree
Hide file tree
Showing 9 changed files with 419 additions and 267 deletions.
236 changes: 97 additions & 139 deletions src/components/CalendarInfoModal.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,66 +1,76 @@
import React, { useEffect, useState } from "react";
import axios from "axios";
import { CopyToClipboard } from "react-copy-to-clipboard";
import { FaCopy, FaPen, FaToggleOff, FaToggleOn } from "react-icons/fa";
import { FaXmark } from "react-icons/fa6";

export default function CalendarInfo({ onClose }) {
//수정 및 편집
const [isEdit, setIsEdit] = useState(false);
const toggleIsEdit = () => setIsEdit(!isEdit);
import {
FaCheck,
FaCopy,
FaPen,
FaRegCopy,
FaToggleOff,
FaToggleOn,
} from "react-icons/fa";

//공개
const [isPublic, setIsPublic] = useState(false);
const [newPublic, setNewPublic] = useState(isPublic);
const toggleIsPublic = () => setNewPublic(!newPublic);
export default function CalendarInfo({ calendar, onClose }) {
// 초기 값 설정
const [title, setTitle] = useState(calendar.calendar_name);
const [detailMemo, setDetailMemo] = useState(calendar.calendar_description);
const [isPublic, setIsPublic] = useState(calendar.is_public);
const [calColor, setCalColor] = useState(calendar.calendar_color);
const [visitCode, setVisitCode] = useState(calendar.invitation_code);

//제목
const [title, setTitle] = useState("Pooding팀");
// 상태 관리
const [newTitle, setNewTitle] = useState(title);

//상세
const [detailMemo, setDetailMemo] = useState("푸우가 코딩한다");
const [newDetail, setNewDetail] = useState(detailMemo);

// 색상
const [calColor, setCalColor] = useState("calendarRed");
const [newPublic, setNewPublic] = useState(isPublic);
const [newColor, setNewColor] = useState(calColor);

const [textColor, setTextColor] = useState("");
useEffect(() => {
if (calColor === "calendarYellow") {
setTextColor("text-calendarYellow");
} else if (calColor === "calendarRed") {
setTextColor("text-calendarRed");
} else if (calColor === "calendarGreen") {
setTextColor("text-calendarGreen");
} else if (calColor === "calendarLightBlue") {
setTextColor("text-calendarLightBlue");
} else if (calColor === "calendarDarkPurple") {
setTextColor("text-calendarDarkPurple");
} else if (calColor === "calendarBlue") {
setTextColor("text-calendarBlue");
} else if (calColor === "calendarPurple") {
setTextColor("text-calendarPurple");
}
}, [calColor]);
// 수정 및 편집
const [isEdit, setIsEdit] = useState(false);
const toggleIsEdit = () => setIsEdit(!isEdit);
const toggleIsPublic = () => setNewPublic(!newPublic);

//초대코드
const [visitCode, setVisitCode] = useState("GW5F4");
// 저장
const save = async () => {
try {
const token = localStorage.getItem("token"); // 토큰 가져오기
const response = await axios.patch(
`/api/calendars/${calendar.calendar_id}`,
{
calendar_name: newTitle,
calendar_description: newDetail,
is_public: newPublic,
calendar_color: newColor,
},
{
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
},
);

//저장
const save = () => {
setTitle(newTitle);
setIsPublic(newPublic);
setDetailMemo(newDetail);
setCalColor(newColor);
toggleIsEdit();
if (response.status === 200) {
// 서버 응답 성공 시 상태 업데이트
setTitle(newTitle);
setDetailMemo(newDetail);
setIsPublic(newPublic);
setCalColor(newColor); // 색상 업데이트
toggleIsEdit();
onClose(); // 저장 후 모달 닫기
}
} catch (error) {
console.error("캘린더 수정 실패:", error);
alert("캘린더 수정에 실패했습니다. 다시 시도해 주세요.");
}
};

//취소
const cancle = () => {
// 취소
const cancel = () => {
setNewTitle(title);
setNewPublic(isPublic);
setNewDetail(detailMemo);
setNewPublic(isPublic);
setNewColor(calColor);
toggleIsEdit();
};
Expand All @@ -74,29 +84,22 @@ export default function CalendarInfo({ onClose }) {
/>
<div className="flex w-full flex-col">
<div className="mb-[2.8rem] flex items-center justify-between">
{/* 제목 */}
{isEdit ? (
<input
type="text"
value={newTitle}
className="w-full rounded-md bg-lightGray/20 text-[3em] font-bold text-darkGray focus:outline-none"
onChange={(e) => {
setNewTitle(e.target.value);
}}
onChange={(e) => setNewTitle(e.target.value)}
/>
) : (
<input
type="text"
value={title}
className={`w-full bg-transparent text-[3em] font-bold ${textColor} focus:outline-none`}
onChange={(e) => {
setTitle(e.target.value);
}}
disabled
/>
<div
className="w-full text-[3em] font-bold"
style={{ color: calColor }}
>
{title}
</div>
)}
</div>
{/* 멤버 */}
<div className="mb-[2rem]">
<div className="mb-[0.75rem] text-[1rem] font-bold text-eventoPurple">
멤버
Expand All @@ -105,8 +108,6 @@ export default function CalendarInfo({ onClose }) {
호도니, 뚜디니, 때용이 + 10
</div>
</div>

{/* 일정 상세 */}
<div className="flex space-x-[15.5rem]">
<div className="mb-[0.75rem] text-[1rem] font-bold text-eventoPurple">
캘린더 상세
Expand All @@ -121,85 +122,42 @@ export default function CalendarInfo({ onClose }) {
type="text"
value={newDetail}
className="mb-[3rem] mr-[2rem] h-[1.3rem] w-[18rem] rounded-md bg-lightGray/20 text-[1.1rem] font-bold text-darkGray"
onChange={(e) => {
setNewDetail(e.target.value);
}}
onChange={(e) => setNewDetail(e.target.value)}
/>
<div className="flex h-[2rem] w-[10rem] items-center">
<button
onClick={() => setNewColor("calendarYellow")}
className={
newColor === "calendarYellow"
? "mr-[0.3rem] h-[1rem] w-[1rem] border-[0.1rem] border-darkGray bg-calendarYellow"
: "mr-[0.3rem] h-[1rem] w-[1rem] bg-calendarYellow"
}
></button>
<button
onClick={() => setNewColor("calendarRed")}
className={
newColor === "calendarRed"
? "mr-[0.3rem] h-[1rem] w-[1rem] border-[0.1rem] border-darkGray bg-calendarRed"
: "mr-[0.3rem] h-[1rem] w-[1rem] bg-calendarRed"
}
></button>
<button
onClick={() => setNewColor("calendarGreen")}
className={
newColor === "calendarGreen"
? "mr-[0.3rem] h-[1rem] w-[1rem] border-[0.1rem] border-darkGray bg-calendarGreen"
: "mr-[0.3rem] h-[1rem] w-[1rem] bg-calendarGreen"
}
></button>
<button
onClick={() => setNewColor("calendarLightBlue")}
className={
newColor === "calendarLightBlue"
? "mr-[0.3rem] h-[1rem] w-[1rem] border-[0.1rem] border-darkGray bg-calendarLightBlue"
: "mr-[0.3rem] h-[1rem] w-[1rem] bg-calendarLightBlue"
}
></button>
<button
onClick={() => setNewColor("calendarDarkPurple")}
className={
newColor === "calendarDarkPurple"
? "mr-[0.3rem] h-[1rem] w-[1rem] border-[0.1rem] border-darkGray bg-calendarDarkPurple"
: "mr-[0.3rem] h-[1rem] w-[1rem] bg-calendarDarkPurple"
}
></button>
<button
onClick={() => setNewColor("calendarBlue")}
className={
newColor === "calendarBlue"
? "mr-[0.3rem] h-[1rem] w-[1rem] border-[0.1rem] border-darkGray bg-calendarBlue"
: "mr-[0.3rem] h-[1rem] w-[1rem] bg-calendarBlue"
}
></button>
<button
onClick={() => setNewColor("calendarPurple")}
className={
newColor === "calendarPurple"
? "mr-[0.3rem] h-[1rem] w-[1rem] border-[0.1rem] border-darkGray bg-calendarPurple"
: "mr-[0.3rem] h-[1rem] w-[1rem] bg-calendarPurple"
}
></button>
{[
{ color: "#FF5C5C", label: "calendarRed" },
{ color: "#FFC960", label: "calendarYellow" },
{ color: "#7DBE7E", label: "calendarGreen" },
{ color: "#9CC9FF", label: "calendarLightBlue" },
{ color: "#6D87D5", label: "calendarBlue" },
{ color: "#8867DF", label: "calendarDarkPurple" },
{ color: "#B469D3", label: "calendarPurple" },
].map(({ color, label }) => (
<button
key={label}
onClick={() => setNewColor(color)}
className={`relative mb-[0.25rem] mr-[0.3rem] flex h-[1rem] w-[1rem] items-center justify-center`}
style={{ backgroundColor: color }}
>
{newColor === color && (
<FaCheck className="absolute text-[0.6rem] text-eventoWhite" />
)}
</button>
))}
</div>
</div>
) : (
<div className="flex">
<input
type="text"
value={detailMemo}
className="mb-[3rem] h-[1.3rem] w-[20rem] bg-transparent text-[1.1rem] font-bold text-darkGray"
onChange={(e) => {
setDetailMemo(e.target.value);
}}
disabled
<div className="mb-[3rem] h-[1.3rem] w-[20rem] text-[1.1rem] font-bold text-darkGray">
{detailMemo}
</div>
<div
className="h-[1.38rem] w-[1.5rem]"
style={{ backgroundColor: calColor }}
/>
<div className={`h-[1.38rem] w-[1.5rem] bg-${calColor}`}></div>
</div>
)}

{/* 공개 여부 */}
<div className="flex">
<div className="mb-[0.7rem] w-[20rem] text-[1rem] font-bold text-eventoPurple">
캘린더 공개 여부
Expand Down Expand Up @@ -230,7 +188,7 @@ export default function CalendarInfo({ onClose }) {
)}
</div>
<div className="pr-[0.5rem] text-[1.1rem] font-bold text-darkGray">
GW5F4
{visitCode}
</div>
</div>
</>
Expand All @@ -241,13 +199,13 @@ export default function CalendarInfo({ onClose }) {
{isPublic ? "공개" : "비공개"}
</div>
<div className="pr-[0.5rem] text-[1.1rem] font-bold text-darkGray">
{`${visitCode}`}
{visitCode}
</div>
<CopyToClipboard
className="cursor-pointer text-eventoblack active:text-darkGray"
text={`${visitCode}`}
className="cursor-pointer text-eventoPurple active:text-lightGray"
text={visitCode}
>
<FaCopy />
<FaRegCopy />
</CopyToClipboard>
</div>
</>
Expand All @@ -257,7 +215,7 @@ export default function CalendarInfo({ onClose }) {
<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={cancle}
onClick={cancel}
>
<span>취소</span>
</button>
Expand Down
Loading

0 comments on commit 1a92019

Please sign in to comment.