Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

사이드바 디데이 MSW #146

Merged
merged 1 commit into from
Dec 5, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 42 additions & 13 deletions src/components/SideBarLeft.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,28 +17,33 @@ import {
export default function SideBarLeft() {
const [isCalendarInfoOpen, setCalendarInfoOpen] = useState(false);
const [selectedCalendar, setSelectedCalendar] = useState(null);
const [myCalendars, setMyCalendars] = useState([]);
const [subscribedCalendars, setSubscribedCalendars] = useState([]);
const navigate = useNavigate();

const navigate = useNavigate();
const [checked, setChecked] = useState({});
const [isInviteOpen, setIsInviteOpen] = useState(false);
const [isCreateCalendarOpen, setIsCreateCalendarOpen] = useState(false);
const [isCreateOpen, setIsCreateCalendarOpen] = useState(false);

const [myCalendars, setMyCalendars] = useState([]);
const [subscribedCalendars, setSubscribedCalendars] = useState([]);
const [dday, setDday] = useState([]);

const { loggedIn, userInfo } = useAuth();

useEffect(() => {
async function fetchData() {
try {
const token = localStorage.getItem("token");
const [myCalendarsResponse, subscribedCalendarsResponse] =
const [myCalendarsResponse, subscribedCalendarsResponse, ddayResponse] =
await Promise.all([
axios.get("/api/calendars/admins", {
headers: { Authorization: `Bearer ${token}` },
}),
axios.get(`/api/users/${userInfo.user_id}/subscriptions`, {
headers: { Authorization: `Bearer ${token}` },
}),
axios.get(`/api/users/${userInfo.user_id}/favorite-events`, {
headers: { Authorization: `Bearer ${token}` },
}),
]);

if (myCalendarsResponse.status === 200) {
Expand All @@ -47,6 +52,9 @@ export default function SideBarLeft() {
if (subscribedCalendarsResponse.status === 200) {
setSubscribedCalendars(subscribedCalendarsResponse.data);
}
if (ddayResponse.status === 200) {
setDday(ddayResponse.data.favorite_events);
}
} catch (error) {
console.error("캘린더 데이터를 가져오는 중 오류 발생:", error);
}
Expand All @@ -55,7 +63,7 @@ export default function SideBarLeft() {
if (userInfo?.user_id) {
fetchData();
}
}, [userInfo, isCalendarInfoOpen, isCreateCalendarOpen]);
}, [userInfo, isCalendarInfoOpen, isCreateOpen]);

const handleToggle = (id) => {
setChecked((prev) => ({
Expand Down Expand Up @@ -195,7 +203,7 @@ export default function SideBarLeft() {
<InviteCodeModal onClose={toggleInvite} />
</div>
)}
{isCreateCalendarOpen && (
{isCreateOpen && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-30">
<CreateCalendar onClose={toggleCreateCalendar} />
</div>
Expand All @@ -210,12 +218,33 @@ export default function SideBarLeft() {
/>
</div>
)}
<div className="fixed bottom-[3rem] left-[4rem] flex flex-col items-center justify-center">
<ul className="space-y-[.8rem]">
{dday.map((item, index) => {
const today = new Date();
const dDay = new Date(item.d_day);
const differenceInTime = dDay - today;
const differenceInDays = Math.ceil(
differenceInTime / (1000 * 60 * 60 * 24),
);

return (
<li key={index} className="flex">
<span className="w-[3rem] text-left text-[.9rem] font-bold text-eventoPurpleDark/70">
{differenceInDays > 0
? `D-${differenceInDays}`
: differenceInDays === 0
? "D-Day"
: `D+${Math.abs(differenceInDays)}`}
</span>
<span className="flex-1 pl-2 text-left text-[0.9rem] text-darkGray/90">
{item.event_title}
</span>
</li>
);
})}
</ul>
</div>
</div>
);
}

const dDayItems = [
{ day: "D-1", description: "evento 배포" },
{ day: "D-6", description: "푸딩즈 회식!" },
{ day: "D-69", description: "졸업 언제하냐" },
];
36 changes: 35 additions & 1 deletion src/mocks/handlers/eventHandlers.js
Original file line number Diff line number Diff line change
Expand Up @@ -168,10 +168,44 @@ export const eventHandlers = [
// 캘린더 삭제
mockEventData.splice(eventIndex, 1);

// 200 OK 응답 반환
return res(
ctx.status(200),
ctx.json({ message: "이벤트가 성공적으로 삭제되었습니다." }),
);
}),

rest.get("/api/users/:userId/favorite-events", (req, res, ctx) => {
const { userId } = req.params;
const token = req.headers.get("Authorization");

if (!token || token !== "Bearer fake_token") {
return res(
ctx.status(40),
ctx.json({
error: "인증 실패",
message: "로그인이 필요합니다. 다시 로그인해 주세요.",
}),
);
}

return res(
ctx.status(200),
ctx.json({
favorite_events: [
{
favorite_event_id: 1,
event_id: 1,
event_title: "프로젝트 끝!",
d_day: "2024-12-11",
},
{
favorite_event_id: 2,
event_id: 2,
event_title: "2025년",
d_day: "2025-01-01",
},
],
}),
);
}),
];