fix: modal style changes & bookmark feat guard by login modal

Author: h-seo-n

src/pages/MainDay.tsx

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

src/pages/MyPage.tsx

@@ -390,11 +390,9 @@ const MyPage = () => {
 			) : (
 				<div className={styles.notFound}>
 					<Modal
-						content="마이페이지 이용을 위해서는 로그인을 해주세요."
-						leftText="로그인"
-						rightText="회원가입"
-						onLeftClick={() => navigate("/auth/login")}
-						onRightClick={() => navigate("/auth/signup")}
+						content={"마이페이지 이용을 위해서는\n로그인이 필요해요."}
+						leftText="로그인 · 회원가입 페이지로 이동"
+						onLeftClick={() => navigate("/")}
 						onClose={null}
 					/>
 				</div>

src/pages/bookmark/Bookmark.tsx

@@ -53,7 +53,7 @@ const BookmarksPage = () => {
 						className={styles.backBtn}
 						color="ABABAB"
 						size={18}
-						onClick={() => navigate("/my")}
+						onClick={() => (window.history.length > 1 ? navigate(-1) : navigate("/my"))}
 					/>
 					<div className={styles.row}>
 						<span>내 찜 목록</span>

src/pages/memo/Memo.tsx

@@ -77,11 +77,9 @@ const MemoPage = () => {
 		return (<div className={styles.notFound}>
 			<Navigationbar />
 			<Modal
-				content="메모 이용을 위해서는 로그인을 해주세요."
-				leftText="로그인"
-				rightText="회원가입"
-				onLeftClick={() => navigate("/auth/login")}
-				onRightClick={() => navigate("/auth/signup")}
+				content={"메모 이용을 위해서는\n로그인이 필요해요."}
+				leftText="로그인 ·회원가입 페이지로 이동"
+				onLeftClick={() => navigate("/")}
 				onClose={null}
 			/>
 			<BottomNav />

src/pages/timetable/TimetablePage.tsx

@@ -255,11 +255,9 @@ export default function TimetablePage() {
 			{!user &&
 				<div className={styles.notFound}>
 					<Modal
-						content="시간표 페이지 이용을 위해서는 로그인을 해주세요."
-						leftText="로그인"
-						rightText="회원가입"
-						onLeftClick={() => navigate("/auth/login")}
-						onRightClick={() => navigate("/auth/signup")}
+						content={"시간표 페이지 이용을 위해서는\n로그인이 필요해요."}
+						leftText="로그인 ·회원가입 페이지로 이동"
+						onLeftClick={() => navigate("/")}
 						onClose={null}
 					/>
 				</div>

src/styles/Modal.module.css

@@ -8,14 +8,14 @@
   left: 50%;
   transform: translate(-50%, -50%);
 
-  background-color: #faf9f6;
-  padding: 50px 40px 30px 40px;
+  background-color: #fbfbff;
+  padding: 40px 20px 30px 20px;
 
-  border: 1px solid rgb(220, 220, 220);
-  border-radius: 18px;
+  border: 1px solid rgb(204, 204, 204);
+  border-radius: 10px;
 
   min-width: 300px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.131);
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
 }
 
 .modalWrapper {
@@ -24,7 +24,7 @@
   justify-content: center;
   align-items: center;
 
-  gap: 20px;
+  gap: 15px;
   z-index: 40;
 
   position: relative;
@@ -40,11 +40,12 @@
 }
 
 .modalContent {
-  font-size: 18px;
-  font-weight: 500;
+  font-size: 17px;
+  font-weight: 600;
   word-break: keep-all;
   overflow-wrap: break-word;
   text-align: center;
+  white-space: pre-line;
 }
 
 .buttonsRow {
@@ -58,26 +59,57 @@
 .buttonsRow > button {
   font-size: 16px;
   font-weight: 600;
-  padding: 10px 15px;
-  border-radius: 15px;
+  padding: 10px 20px;
+  border-radius: 10px;
   cursor: pointer;
 }
 
 .leftBtn {
-  background-color: #494949;
+  background-color: #4d80e8;
   color: white;
   border: none;
 }
 
+.linkBtn {
+  background: none;
+  border: none;
+  text-decoration: underline;
+  cursor: pointer;
+  display: flex;
+  gap: 5px;
+  color: #4d80e8;
+}
+
 .leftBtn:hover {
-  background-color: #303030;
+  background-color: #406cc3;
 }
 
 .rightBtn {
+  color: #4d80e8;
   background-color: rgb(255, 255, 255);
-  border: 1px solid #d9d9d9;
+  border: 1px solid #7699df;
 }
 
 .rightBtn:hover {
   background-color: rgb(223, 223, 223);
 }
+
+@media (max-width: 612px) {
+  .modalContainer {
+    padding: 40px 15px 30px 15px;
+  }
+}
+
+@media (max-width: 360px) {
+  .modalContainer {
+    padding: 30px 5px 20px 5px;
+  }
+  .modalContent {
+    font-size: 16px;
+  }
+  .linkBtn,
+  .leftBtn,
+  .rightBtn {
+    font-size: 16px;
+  }
+}

src/widgets/Modal.tsx

@@ -1,12 +1,13 @@
 import styles from "@styles/Modal.module.css";
+import { FaExternalLinkAlt } from "react-icons/fa";
 import { IoIosClose } from "react-icons/io";
 
 interface ModalProps {
 	content: string;
 	leftText: string;
-	rightText: string;
+	rightText?: string | null;
 	onLeftClick: () => void;
-	onRightClick: () => void;
+	onRightClick?: (() =>  void) | null;
 	onClose: (() => void) | null;
 }
 
@@ -33,19 +34,23 @@ const Modal = ({
 				<span className={styles.modalContent}>{content}</span>
 				<div className={styles.buttonsRow}>
 					<button
-						className={styles.leftBtn}
+						className={`${rightText ? styles.leftBtn : styles.linkBtn}`}
 						type="button"
 						onClick={onLeftClick}
 					>
-						{leftText}
+						{!rightText && 
+							<FaExternalLinkAlt />
+						}
+						<span>{leftText}</span>
 					</button>
+					{rightText && onRightClick &&
 					<button
 						className={styles.rightBtn}
 						type="button"
 						onClick={onRightClick}
 					>
 						{rightText}
-					</button>
+					</button>}
 				</div>
 			</div>
 		</div>

src/widgets/Month/MonthSideView/CardView.tsx

@@ -5,6 +5,7 @@ import { CATEGORY_COLORS, CATEGORY_LIST } from "@constants";
 import type { Event } from "@types";
 import { useUserData } from "@/contexts/UserDataContext";
 import { StartDate } from "@/widgets/EventDate";
+import { useAuth } from "@/contexts/AuthProvider";
 
 const MobileChipsList = ({ event }: { event: Event }) => {
 	const ddayTargetDate = event.applyEnd;
@@ -55,8 +56,9 @@ const MobileChipsList = ({ event }: { event: Event }) => {
 	)
 }
 
-const CardView = ({ event }: { event: Event }) => {
+const CardView = ({ event, onLoginPrompt }: { event: Event; onLoginPrompt: () => void; }) => {
 	const ddayTargetDate = event.applyEnd;
+	const {user} = useAuth();
 
 	const [isBookmarked, setIsBookmarked] = useState<boolean>(
 		event.isBookmarked || false,
@@ -69,6 +71,11 @@ const CardView = ({ event }: { event: Event }) => {
 		const previousState = isBookmarked;
 		e.stopPropagation();
 
+		if (!user) {	
+			onLoginPrompt();
+			return;
+		}
+
 		// optimistic update
 		setIsBookmarked(!previousState);
 

src/widgets/Month/MonthSideView/MonthSideView.tsx

@@ -16,9 +16,11 @@ import { FilterButton } from "@/widgets/Toolbar";
 const MonthSideView = ({
 	day,
 	onClose,
+	onLoginPrompt,
 }: {
 	day: Date;
 	onClose: () => void;
+	onLoginPrompt: () => void;
 }) => {
 	const { setShowDetail, setClickedEventId } = useDetail();
 	const [date, setDate] = useState<Date>(day);
@@ -110,7 +112,7 @@ const MonthSideView = ({
 						onKeyDown={(e) => e.key === "Enter" && handleDetailClick(event.id)}
 						className={styles.cardButton}
 					>
-						<CardView key={event.id} event={event} />
+						<CardView key={event.id} event={event} onLoginPrompt={onLoginPrompt} />
 					</div>
 				))}
 			</div>