Merge pull request #100 from wafflestudio/seoyeon

Refactor code for Bookmark Login modal

Author: h-seo-n

src/pages/CalendarView.tsx

@@ -20,7 +20,6 @@ import { useUserData } from "@/contexts/UserDataContext";
 import BottomNav from "@/widgets/BottomNav";
 import { FilterSheet } from "@/widgets/FilterSheet/FilterSheet";
 import { useMonthEvents, useWeekEvents, useDayEvents } from "@/contexts/useCalendarEvents";
-import Modal from "@/widgets/Modal";
 
 const CalendarView = () => {
 	// EventContext
@@ -48,10 +47,7 @@ const CalendarView = () => {
 	const [showSideMonth, setShowSideMonth] = useState<boolean>(false);
 	const [clickedDate, setClickedDate] = useState<Date>(new Date());
 
-	// 로그인 모달
-	const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
-
-	/** ----------------------  FETCH MONTH / WEEK / DAY data -------------------- */ 
+	/** ----------------------  FETCH MONTH / WEEK / DAY data -------------------- */
 
 	const navigate = useNavigate();
 
@@ -191,7 +187,7 @@ const CalendarView = () => {
 				</div>
 				{showSideMonth && (
 					<div className={styles.sidePanel} ref={sidePanelRef}>
-						<MonthSideView day={clickedDate} onClose={handleCloseSideMonth} onLoginPrompt={()=>setIsLoginModalOpen(true)}/>
+						<MonthSideView day={clickedDate} onClose={handleCloseSideMonth} />
 					</div>
 				)}
 
@@ -203,18 +199,6 @@ const CalendarView = () => {
 						<DetailView eventId={clickedEventId} />
 					</div>
 				)}
-
-				{isLoginModalOpen && (
-					<Modal
-						content="로그인 이후 이용해주세요"
-						leftText="로그인"
-						rightText="닫기"
-						onLeftClick={() => navigate("/")}
-						onRightClick={() => setIsLoginModalOpen(false)}
-						onClose={() => setIsLoginModalOpen(false)}
-					/>
-				)}
-
 			</div>
 			<FilterSheet />
 			<BottomNav />

src/pages/MainDay.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import styles from "@styles/CalendarView.module.css";
 import MonthSideView from "@widgets/Month/MonthSideView/MonthSideView";
@@ -7,16 +7,13 @@ import BottomNav from "@/widgets/BottomNav";
 import { useEvents } from "@/contexts/EventContext";
 import { useDetail } from "@/contexts/DetailContext";
 import { FilterSheet } from "@/widgets/FilterSheet/FilterSheet";
-import Modal from "@/widgets/Modal";
 
 const MOBILE_MAX_WIDTH = 576;
 
 const MainDay = () => {
 	const navigate = useNavigate();
 	const { dayDate } = useEvents();
 	const { showDetail, clickedEventId } = useDetail();
-	const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
-
 
 	useEffect(() => {
 		const checkWidth = () => {
@@ -36,7 +33,7 @@ const MainDay = () => {
 	return (
 		<div className={`${styles.container} ${styles.mainDay}`}>
 			<div className={styles.calendarContainer}>
-				<MonthSideView day={dayDate} onClose={handleClose} onLoginPrompt={()=>setIsLoginModalOpen(true)} />
+				<MonthSideView day={dayDate} onClose={handleClose} />
 				{showDetail && clickedEventId !== undefined && (
 					<div className={`${styles.sidePanel} ${styles.detailPanel}`}>
 						<DetailView eventId={clickedEventId} />
@@ -45,17 +42,6 @@ const MainDay = () => {
 			</div>
 			<FilterSheet />
 			{!showDetail && <BottomNav />}
-			{isLoginModalOpen && (
-				<Modal
-					content="로그인 이후 이용해주세요"
-					leftText="로그인"
-					rightText="닫기"
-					onLeftClick={() => navigate("/")}
-					onRightClick={() => setIsLoginModalOpen(false)}
-					onClose={() => setIsLoginModalOpen(false)}
-				/>
-			)}
-
 		</div>
 	);
 };

src/widgets/Month/MonthSideView/MonthSideView.tsx

@@ -1,4 +1,5 @@
 import { useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import { FaAngleLeft, FaAngleRight, FaAnglesRight } from "react-icons/fa6";
 import styles from "@styles/MonthSideView.module.css";
 import CardView from "./CardView";
@@ -12,16 +13,17 @@ import { useFilter } from "@/contexts/FilterContext";
 import { useUserData } from "@/contexts/UserDataContext";
 import { useDayEvents } from "@/contexts/useCalendarEvents";
 import { FilterButton } from "@/widgets/Toolbar";
+import Modal from "@/widgets/Modal";
 
 const MonthSideView = ({
 	day,
 	onClose,
-	onLoginPrompt,
 }: {
 	day: Date;
 	onClose: () => void;
-	onLoginPrompt: () => void;
 }) => {
+	const navigate = useNavigate();
+	const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
 	const { setShowDetail, setClickedEventId } = useDetail();
 	const [date, setDate] = useState<Date>(day);
 	const { globalCategory, globalOrg, globalStatus, setFilterSheetShowing } = useFilter();
@@ -76,6 +78,16 @@ const MonthSideView = ({
 
 	return (
 		<div className={styles.mainWrapper}>
+			{isLoginModalOpen && (
+				<Modal
+					content="로그인 이후 이용해주세요"
+					leftText="로그인"
+					rightText="닫기"
+					onLeftClick={() => navigate("/")}
+					onRightClick={() => setIsLoginModalOpen(false)}
+					onClose={() => setIsLoginModalOpen(false)}
+				/>
+			)}
 			<button type="button" className={styles.foldBtn} onClick={onClose}>
 				<FaAnglesRight
 					width={24}
@@ -112,7 +124,7 @@ const MonthSideView = ({
 						onKeyDown={(e) => e.key === "Enter" && handleDetailClick(event.id)}
 						className={styles.cardButton}
 					>
-						<CardView key={event.id} event={event} onLoginPrompt={onLoginPrompt} />
+						<CardView key={event.id} event={event} onLoginPrompt={() => setIsLoginModalOpen(true)} />
 					</div>
 				))}
 			</div>