Skip to content

Commit

Permalink
#89 MSW - 더미 추가
Browse files Browse the repository at this point in the history
  • Loading branch information
@cxaosdev
cxaosdev committed Dec 2, 2024
1 parent e7cb3ba commit a4e694e
Show file tree
Hide file tree
Showing 6 changed files with 133 additions and 27 deletions.
2 changes: 1 addition & 1 deletion src/components/CalendarInfoModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ export default function CalendarInfo({ calendar, onClose, userId }) {
/>
<div className="ml-[0.2rem] flex h-[2rem] w-[10rem]">
{[
{ color: "#FF5C5C", label: "calendarRed" },
{ color: "#E05C5C", label: "calendarRed" },
{ color: "#FFC960", label: "calendarYellow" },
{ color: "#7DBE7E", label: "calendarGreen" },
{ color: "#9CC9FF", label: "calendarLightBlue" },
Expand Down
6 changes: 3 additions & 3 deletions src/components/CreateCalendarModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default function CreateCalendar({ onClose }) {
};

// 색상
const [calColor, setCalColor] = useState("#FF5C5C"); // 초기 값
const [calColor, setCalColor] = useState("#E05C5C"); // 초기 값

// 에러 메시지 상태 추가
const [errorMessage, setErrorMessage] = useState("");
Expand Down Expand Up @@ -68,7 +68,7 @@ export default function CreateCalendar({ onClose }) {
className="absolute right-[1.2rem] top-[1.2rem] cursor-pointer text-darkGray"
onClick={onClose}
/>
<div className="flex flex-col w-full">
<div className="flex w-full flex-col">
<div className="mb-[2.8rem] flex items-center justify-between">
<input
type="text"
Expand Down Expand Up @@ -125,7 +125,7 @@ export default function CreateCalendar({ onClose }) {
</div>
<div className="flex h-[3rem] w-[11rem] flex-wrap items-center rounded-[0.2rem] p-[0.2rem]">
{[
{ color: "#FF5C5C", label: "calendarRed" },
{ color: "#E05C5C", label: "calendarRed" },
{ color: "#FFC960", label: "calendarYellow" },
{ color: "#7DBE7E", label: "calendarGreen" },
{ color: "#9CC9FF", label: "calendarLightBlue" },
Expand Down
44 changes: 35 additions & 9 deletions src/components/InviteCodeModal.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import React, { useRef } from "react";
import React, { useRef, useState } from "react";
import axios from "axios";
import { FaXmark } from "react-icons/fa6";

export default function InviteCodeModal({ onClose }) {
export default function InviteCodeModal({ onClose, calendarId }) {
const inputRefs = useRef([]);
const [inviteCode, setInviteCode] = useState("");

const handleInputChange = (e, index) => {
let value = e.target.value;
Expand All @@ -13,6 +15,10 @@ export default function InviteCodeModal({ onClose }) {
value = value.toUpperCase();
e.target.value = value;

// 초대 코드를 조합하여 업데이트
const newCode = inputRefs.current.map((input) => input.value).join("");
setInviteCode(newCode);

// 입력 후 다음 칸으로 포커스 이동
if (index < inputRefs.current.length - 1) {
inputRefs.current[index + 1].focus();
Expand All @@ -32,12 +38,29 @@ export default function InviteCodeModal({ onClose }) {
}
};

const handleSubmit = () => {
// 초대 코드를 조합하여 출력
const inviteCode = inputRefs.current.map((input) => input.value).join("");
const handleInviteAdmin = async () => {
if (inviteCode.length === 6) {
console.log("Invite Code:", inviteCode);
// 초대 코드 처리 로직 추가
try {
const token = localStorage.getItem("token");
const response = await axios.post(
`/api/calendars/${calendarId}/admins`, // calendarId는 초대받은 캘린더의 ID로 설정 필요
{ invitation_code: inviteCode },
{
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
},
);

if (response.status === 201) {
alert("관리자로 성공적으로 초대되었습니다.");
onClose();
}
} catch (error) {
console.error("관리자 초대 실패:", error);
alert("유효하지 않은 초대 코드입니다. 다시 시도해 주세요.");
}
} else {
alert("모든 칸을 채워주세요!");
}
Expand Down Expand Up @@ -72,12 +95,15 @@ export default function InviteCodeModal({ onClose }) {
</div>
<div className="mt-[4.2rem] flex translate-x-[1rem] justify-end 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"
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={onClose}
>
<span>취소</span>
</button>
<button 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">
<button
onClick={handleInviteAdmin}
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>
Expand Down
15 changes: 7 additions & 8 deletions src/components/SideBarLeft.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,11 +118,11 @@ export default function SideBarLeft() {
</div>
</div>
{/* 캘린더 리스트 */}
<ul className="m-[1rem] mt-[1.5rem] space-y-[0.5rem] font-semibold">
<ul className="m-[1rem] mt-[1.5rem] space-y-[0.5rem]">
{myCalendars.map((calendar) => (
<li
key={calendar.calendar_id}
className="flex items-center space-x-[0.75rem]"
className="flex items-center space-x-[0.5rem]"
>
<div
className="cursor-pointer"
Expand All @@ -142,7 +142,7 @@ export default function SideBarLeft() {
</div>
<label
htmlFor={calendar.calendar_id}
className="cursor-pointer text-[0.9rem]"
className="cursor-pointer text-[0.9rem] font-medium"
style={{ color: calendar.calendar_color }}
onClick={() => handleViewCalendar(calendar)}
>
Expand All @@ -160,17 +160,16 @@ export default function SideBarLeft() {
<div className="mr-[0.3rem] flex items-center justify-between">
<span className="text-[0.9rem] text-darkGray">구독한 캘린더</span>
<FaPen
className="cursor-pointer text-[0.9rem] text-darkGray"
className="cursor-pointer text-[0.75rem] text-darkGray"
onClick={() => navigate("/subscription")}
/>
</div>
{/* 캘린더 리스트 */}
<ul className="m-[1rem] mt-[1.5rem] space-y-[0.5rem]">
{/* 더미 구독한 캘린더 데이터 그대로 사용 */}
{subscribedCalendars.map((calendar) => (
<li
key={calendar.id}
className="flex items-center space-x-[0.75rem]"
className="flex items-center space-x-[0.5rem]"
>
<div
className="cursor-pointer"
Expand All @@ -184,7 +183,7 @@ export default function SideBarLeft() {
</div>
<label
htmlFor={calendar.id}
className="flex items-center text-[0.9rem] text-eventoPurpleBase"
className="flex items-center text-[0.9rem] font-medium text-eventoPurpleBase"
>
{calendar.label}
<span className="ml-2 text-[0.7rem] font-light text-darkGray">
Expand All @@ -204,7 +203,7 @@ export default function SideBarLeft() {
<span className="w-[3rem] text-left font-bold text-eventoPurpleBase">
{item.day}
</span>
<span className="flex-1 pl-2 text-left text-[0.9rem] text-[#646464]">
<span className="flex-1 pl-2 text-left text-[0.93rem] text-[#646464]">
{item.description}
</span>
</li>
Expand Down
91 changes: 86 additions & 5 deletions src/mocks/handlers/calendarHandlers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,43 @@ import { rest } from "msw";
let mockCalendars = [
{
calendar_id: 1,
calendar_name: "내가 만든 캘린더 test",
calendar_name: "Creator test",
calendar_description: "삭제 권한 있어야 함",
calendar_color: "#FFC960",
is_public: false,
creator_id: 1,
invitation_code: "GW3HR4",
invitation_code: "ABC123",
admins: [1], // 초대된 관리자 목록 추가
},
{
calendar_id: 2,
calendar_name: "관리자로 있는 캘린더 test",
calendar_name: "Admin Test",
calendar_description: "삭제 권한 없어야 함",
calendar_color: "#6D87D5",
is_public: true,
creator_id: 2,
invitation_code: "G3G7H3",
admins: [2],
},
{
calendar_id: 3,
calendar_name: "비공개 캘린더",
calendar_description: "삭제 권한 있어야 함",
calendar_color: "#E05C5C",
is_public: false,
creator_id: 2,
invitation_code: "ABC123",
admins: [1],
},
{
calendar_id: 4,
calendar_name: "공개 캘린더",
calendar_description: "삭제 권한 있어야 함",
calendar_color: "#7DBE7E",
is_public: true,
creator_id: 2,
invitation_code: "A1B2C3",
admins: [1],
},
];

Expand All @@ -39,6 +61,64 @@ export const calendarHandlers = [
return res(ctx.status(200), ctx.json(mockCalendars));
}),

// 관리자 초대 핸들러
rest.post("/api/calendars/:calendarId/admins", async (req, res, ctx) => {
const token = req.headers.get("Authorization");
const { calendarId } = req.params;
const { invitation_code } = await req.json();
const user_id = 2; // 이 부분은 실제로 요청을 보낸 사용자 ID로 변경 필요 (여기서는 예시로 user_id = 2 사용)

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: "해당 캘린더를 찾을 수 없습니다.",
}),
);
}

// 초대 코드가 일치하는지 확인
if (mockCalendars[calendarIndex].invitation_code !== invitation_code) {
return res(
ctx.status(400),
ctx.json({
error: "유효하지 않은 초대 코드입니다.",
}),
);
}

// 관리자로 추가하기 (이미 관리자가 아닌 경우에만 추가)
if (!mockCalendars[calendarIndex].admins.includes(user_id)) {
mockCalendars[calendarIndex].admins.push(user_id);
}

// 201 Created 응답 반환
return res(
ctx.status(201),
ctx.json({
message: "사용자가 성공적으로 관리자로 초대되었습니다.",
user_id,
calendar_id: parseInt(calendarId),
}),
);
}),

// 캘린더 생성 핸들러
rest.post("/api/calendars", async (req, res, ctx) => {
const token = req.headers.get("Authorization");
Expand All @@ -64,7 +144,8 @@ export const calendarHandlers = [
calendar_color: calendar_color, // 클라이언트에서 전달된 색상 값 사용
is_public: is_public || false,
creator_id: 1,
invitation_code: "ABC123", // 생성된 초대 코드
invitation_code: "DEF456", // 생성된 초대 코드
admins: [1], // 생성자는 자동으로 관리자
};

// 가짜 데이터 목록에 새 캘린더 추가
Expand Down Expand Up @@ -126,7 +207,7 @@ export const calendarHandlers = [
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;
Expand Down
2 changes: 1 addition & 1 deletion tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ module.exports = {
eventoPurpleDark: "#4F378B",

//캘린더 색상
calendarRed: "#FF5C5C",
calendarRed: "#E05C5C",
calendarYellow: "##FFC960",
calendarGreen: "#7DBE7E",
calendarLightBlue: "#9CC9FF",
Expand Down

0 comments on commit a4e694e

Please sign in to comment.