From 4014a0776223d72e12bdb91719d59fc747c0a35b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=98=A4=EC=88=98=ED=98=84?=
 <ohsuhyeon@osuhyeon-ui-MacBookPro.local>
Date: Sun, 17 May 2026 15:32:36 +0900
Subject: [PATCH 01/10] feat: redesign admin page with two-column layout and
 CSS module

- Replace inline styles with CSS module (AdminEvents.module.css)
- Split page into left (controls) / right (form) panel layout
- Warm off-white background, rounded cards with shadow
- Pill-style toggle buttons for override fields
- Left panel last card grows to match right panel height

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/pages/AdminEvents.tsx         | 343 ++++++++++++----------
 src/styles/AdminEvents.module.css | 462 ++++++++++++++++++++++++++++++
 2 files changed, 656 insertions(+), 149 deletions(-)
 create mode 100644 src/styles/AdminEvents.module.css

diff --git a/src/pages/AdminEvents.tsx b/src/pages/AdminEvents.tsx
index 77d4f27..7ef7a73 100644
--- a/src/pages/AdminEvents.tsx
+++ b/src/pages/AdminEvents.tsx
@@ -10,6 +10,7 @@ import {
 	type AdminEventPatchRequest,
 } from "@/api/adminEvent";
 import { useState } from "react";
+import styles from "@/styles/AdminEvents.module.css";
 
 const EMPTY_FORM = {
 	title: "",
@@ -351,157 +352,201 @@ export default function AdminEventsPage() {
 		["location", "장소", "text"],
 		["applyLink", "신청 링크", "text"],
 
-		["tags", "태그, 쉼표 구분", "text"],
+		["tags", "태그 (쉼표 구분)", "text"],
 	];
 
 	return (
-		<main
-			style={{
-				width: "100vw",
-				height: "100dvh",
-				overflowY: "auto",
-				boxSizing: "border-box",
-				maxWidth: 1080,
-				margin: "0 auto",
-				padding: 24,
-			}}
-		>
-			<h1>행샤 어드민</h1>
-
-			<section style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
-				<input
-					value={eventId}
-					onChange={(e) => setEventId(e.currentTarget.value)}
-					placeholder="행사 ID"
-				/>
-
-				<button type="button" onClick={handleLoad} disabled={isLoading}>
-					불러오기
-				</button>
-
-				<button type="button" onClick={handlePatch} disabled={isLoading}>
-					수정
-				</button>
-
-				<button type="button" onClick={handleDelete} disabled={isLoading}>
-					단건 삭제
-				</button>
-
-				<button type="button" onClick={handleDeleteAll} disabled={isLoading}>
-					전체 삭제
-				</button>
-
-				<button type="button" onClick={handleCreate} disabled={isLoading}>
-					신규 생성
-				</button>
-			</section>
-
-			<section style={{ marginTop: 20 }}>
-				<h2>JSON 파일 Sync</h2>
-
-				<input
-					type="file"
-					accept=".json,application/json"
-					onChange={(e) => {
-						setSelectedFile(e.currentTarget.files?.[0] ?? null);
-					}}
-				/>
-
-				<button
-					type="button"
-					onClick={handleSyncFile}
-					disabled={isLoading}
-					style={{ marginLeft: 8 }}
-				>
-					sync-file 업로드
-				</button>
-			</section>
-
-			<section style={{ marginTop: 20 }}>
-				<h2>adminOverriddenFields lock/unlock</h2>
-
-				<p style={{ margin: "8px 0" }}>
-					마지막 응답 기준 lock: {overrideFields.length > 0 ? overrideFields.join(", ") : "없음"}
-				</p>
-
-				<div
-					style={{
-						display: "grid",
-						gridTemplateColumns: "repeat(4, minmax(0, 1fr))",
-						gap: 8,
-					}}
-				>
-					{OVERRIDABLE_FIELDS.map(({ key, label }) => (
-						<label key={key} style={{ display: "flex", gap: 6 }}>
-							<input
-								type="checkbox"
-								checked={selectedOverrideFields.includes(key)}
-								onChange={() => toggleOverrideField(key)}
-							/>
-							{label} ({key})
-						</label>
-					))}
+		<div className={styles.page}>
+			<div className={styles.inner}>
+				<h1 className={styles.pageTitle}>행샤 어드민</h1>
+
+				<div className={styles.layout}>
+					{/* ── 왼쪽 패널 ── */}
+					<div className={styles.leftPanel}>
+						{/* 행사 관리 */}
+						<div className={styles.card}>
+							<p className={styles.cardTitle}>행사 관리</p>
+							<div className={styles.idBar}>
+								<input
+									className={styles.idInput}
+									value={eventId}
+									onChange={(e) => setEventId(e.currentTarget.value)}
+									placeholder="행사 ID"
+								/>
+
+								<button
+									type="button"
+									className={`${styles.btn} ${styles.btnPrimary}`}
+									onClick={handleLoad}
+									disabled={isLoading}
+								>
+									불러오기
+								</button>
+
+								<button
+									type="button"
+									className={`${styles.btn} ${styles.btnPrimary}`}
+									onClick={handlePatch}
+									disabled={isLoading}
+								>
+									수정
+								</button>
+
+								<button
+									type="button"
+									className={`${styles.btn} ${styles.btnPrimary}`}
+									onClick={handleCreate}
+									disabled={isLoading}
+								>
+									신규 생성
+								</button>
+
+								<div className={styles.divider} />
+
+								<button
+									type="button"
+									className={`${styles.btn} ${styles.btnDanger}`}
+									onClick={handleDelete}
+									disabled={isLoading}
+								>
+									단건 삭제
+								</button>
+
+								<button
+									type="button"
+									className={`${styles.btn} ${styles.btnDanger}`}
+									onClick={handleDeleteAll}
+									disabled={isLoading}
+								>
+									전체 삭제
+								</button>
+							</div>
+						</div>
+
+						{/* 피드백 메시지 */}
+						{message && <p className={styles.message}>{message}</p>}
+
+						{/* JSON 파일 Sync */}
+						<div className={styles.card}>
+							<p className={styles.cardTitle}>JSON 파일 Sync</p>
+							<div className={styles.fileRow}>
+								<label className={styles.fileLabel}>
+									파일 선택
+									<input
+										type="file"
+										accept=".json,application/json"
+										className={styles.fileInput}
+										onChange={(e) => {
+											setSelectedFile(e.currentTarget.files?.[0] ?? null);
+										}}
+									/>
+								</label>
+
+								<span className={styles.fileName}>
+									{selectedFile ? selectedFile.name : "선택된 파일 없음"}
+								</span>
+
+								<button
+									type="button"
+									className={`${styles.btn} ${styles.btnSecondary}`}
+									onClick={handleSyncFile}
+									disabled={isLoading}
+								>
+									업로드
+								</button>
+							</div>
+						</div>
+
+						{/* adminOverriddenFields lock/unlock */}
+						<div className={`${styles.card} ${styles.cardGrow}`}>
+							<p className={styles.cardTitle}>Override Fields</p>
+
+							<div className={styles.overrideMeta}>
+								<span className={styles.overrideMetaLabel}>현재 lock</span>
+								{overrideFields.length > 0 ? (
+									overrideFields.map((f) => (
+										<span key={f} className={styles.lockedBadge}>
+											{f}
+										</span>
+									))
+								) : (
+									<span className={styles.overrideMetaLabel}>없음</span>
+								)}
+							</div>
+
+							<div className={styles.checkboxGrid}>
+								{OVERRIDABLE_FIELDS.map(({ key, label }) => {
+									const checked = selectedOverrideFields.includes(key);
+									return (
+										<label
+											key={key}
+											className={`${styles.checkboxLabel} ${checked ? styles.checkboxLabelChecked : ""}`}
+										>
+											<input
+												type="checkbox"
+												className={styles.checkboxNative}
+												checked={checked}
+												onChange={() => toggleOverrideField(key)}
+											/>
+											{label}
+											<span className={styles.checkboxKey}>({key})</span>
+										</label>
+									);
+								})}
+							</div>
+
+							<div className={styles.overrideActions}>
+								<button
+									type="button"
+									className={`${styles.btn} ${styles.btnLock}`}
+									onClick={() => handleUpdateOverrides("lock")}
+									disabled={isLoading}
+								>
+									선택 필드 lock
+								</button>
+
+								<button
+									type="button"
+									className={`${styles.btn} ${styles.btnSecondary}`}
+									onClick={() => handleUpdateOverrides("unlock")}
+									disabled={isLoading}
+								>
+									선택 필드 unlock
+								</button>
+							</div>
+						</div>
+					</div>
+
+					{/* ── 오른쪽 패널 ── */}
+					<div className={styles.rightPanel}>
+						<div className={styles.formCard}>
+							<p className={styles.cardTitle}>행사 데이터</p>
+							<div className={styles.formGrid}>
+								{fields.map(([key, label, type]) => (
+									<div key={key} className={styles.formField}>
+										<label className={styles.formLabel}>{label}</label>
+										<input
+											type={type}
+											className={styles.formInput}
+											value={form[key]}
+											onChange={(e) => updateForm(key, e.currentTarget.value)}
+										/>
+									</div>
+								))}
+
+								<div className={`${styles.formField} ${styles.formFieldFull}`}>
+									<label className={styles.formLabel}>상세 HTML</label>
+									<textarea
+										className={styles.formTextarea}
+										value={form.mainContentHtml}
+										onChange={(e) => updateForm("mainContentHtml", e.currentTarget.value)}
+									/>
+								</div>
+							</div>
+						</div>
+					</div>
 				</div>
-
-				<div style={{ display: "flex", gap: 8, marginTop: 12 }}>
-					<button
-						type="button"
-						onClick={() => handleUpdateOverrides("lock")}
-						disabled={isLoading}
-					>
-						선택 필드 lock
-					</button>
-
-					<button
-						type="button"
-						onClick={() => handleUpdateOverrides("unlock")}
-						disabled={isLoading}
-					>
-						선택 필드 unlock
-					</button>
-				</div>
-			</section>
-
-			{message && <p style={{ marginTop: 16 }}>{message}</p>}
-
-			<section
-				style={{
-					display: "grid",
-					gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
-					gap: 12,
-					marginTop: 20,
-				}}
-			>
-				{fields.map(([key, label, type]) => (
-					<label
-						key={key}
-						style={{ display: "flex", flexDirection: "column", gap: 4 }}
-					>
-						{label}
-						<input
-							type={type}
-							value={form[key]}
-							onChange={(e) => updateForm(key, e.currentTarget.value)}
-						/>
-					</label>
-				))}
-
-				<label
-					style={{
-						display: "flex",
-						flexDirection: "column",
-						gap: 4,
-						gridColumn: "1 / -1",
-					}}
-				>
-					상세 HTML
-					<textarea
-						value={form.mainContentHtml}
-						onChange={(e) => updateForm("mainContentHtml", e.currentTarget.value)}
-						rows={12}
-					/>
-				</label>
-			</section>
-		</main>
+			</div>
+		</div>
 	);
-}
\ No newline at end of file
+}
diff --git a/src/styles/AdminEvents.module.css b/src/styles/AdminEvents.module.css
new file mode 100644
index 0000000..5d81bbf
--- /dev/null
+++ b/src/styles/AdminEvents.module.css
@@ -0,0 +1,462 @@
+* {
+	font-family:
+		-apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo",
+		sans-serif;
+}
+
+/* ── Page shell ─────────────────────────────────────────────────────────── */
+
+.page {
+	width: 100vw;
+	height: 100dvh;
+	overflow: hidden;
+	box-sizing: border-box;
+	background-color: #f5f3ee;
+}
+
+.inner {
+	height: 100%;
+	max-width: 1280px;
+	margin: 0 auto;
+	padding: 32px 28px 24px;
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+}
+
+/* ── Page header ─────────────────────────────────────────────────────────── */
+
+.pageTitle {
+	font-size: 34px;
+	font-weight: 800;
+	color: #111111;
+	margin: 0 0 22px;
+	flex-shrink: 0;
+	letter-spacing: -0.03em;
+}
+
+/* ── Two-column layout ───────────────────────────────────────────────────── */
+
+.layout {
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	gap: 24px;
+}
+
+.leftPanel {
+	width: 400px;
+	flex-shrink: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	overflow-y: auto;
+	-ms-overflow-style: none;
+	scrollbar-width: none;
+}
+
+.leftPanel::-webkit-scrollbar {
+	display: none;
+}
+
+.rightPanel {
+	flex: 1;
+	min-width: 0;
+	overflow-y: auto;
+	-ms-overflow-style: none;
+	scrollbar-width: none;
+}
+
+.rightPanel::-webkit-scrollbar {
+	display: none;
+}
+
+/* ── Card ─────────────────────────────────────────────────────────────────── */
+
+.card {
+	background-color: #ffffff;
+	border-radius: 20px;
+	padding: 20px;
+	flex-shrink: 0;
+	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05), 0 4px 20px rgba(0, 0, 0, 0.06);
+}
+
+.cardTitle {
+	font-size: 11px;
+	font-weight: 700;
+	color: #b0b0b0;
+	text-transform: uppercase;
+	letter-spacing: 0.08em;
+	margin: 0 0 14px;
+}
+
+/* ── ID bar ──────────────────────────────────────────────────────────────── */
+
+.idBar {
+	display: flex;
+	align-items: center;
+	gap: 7px;
+	flex-wrap: wrap;
+}
+
+.idInput {
+	width: 110px;
+	height: 38px;
+	padding: 0 12px;
+	border: 1.5px solid #e8e8e8;
+	border-radius: 10px;
+	background-color: #fafafa;
+	color: #222222;
+	font-size: 14px;
+	font-weight: 600;
+	outline: none;
+	transition: border-color 0.15s, background-color 0.15s;
+	box-sizing: border-box;
+}
+
+.idInput::placeholder {
+	color: #c8c8c8;
+	font-weight: 400;
+}
+
+.idInput:focus {
+	border-color: #aaaaaa;
+	background-color: #ffffff;
+}
+
+.divider {
+	width: 1px;
+	height: 20px;
+	background-color: #e8e8e8;
+	margin: 0 1px;
+}
+
+/* ── Buttons ─────────────────────────────────────────────────────────────── */
+
+.btn {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	height: 38px;
+	padding: 0 15px;
+	border-radius: 10px;
+	font-size: 13px;
+	font-weight: 700;
+	cursor: pointer;
+	transition: all 0.15s ease;
+	white-space: nowrap;
+	border: none;
+	letter-spacing: -0.01em;
+}
+
+.btn:disabled {
+	opacity: 0.4;
+	cursor: not-allowed;
+}
+
+.btnPrimary {
+	background-color: #2a2a2a;
+	color: #ffffff;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
+}
+
+.btnPrimary:hover:not(:disabled) {
+	background-color: #111111;
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
+	transform: translateY(-1px);
+}
+
+.btnPrimary:active:not(:disabled) {
+	transform: translateY(0);
+	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+}
+
+.btnSecondary {
+	background-color: #f2f2f2;
+	color: #444444;
+	border: none;
+}
+
+.btnSecondary:hover:not(:disabled) {
+	background-color: #e8e8e8;
+}
+
+.btnDanger {
+	background-color: #fff0f0;
+	color: #d33b3b;
+	border: none;
+}
+
+.btnDanger:hover:not(:disabled) {
+	background-color: #ffe0e0;
+}
+
+/* ── Message ─────────────────────────────────────────────────────────────── */
+
+.message {
+	padding: 12px 14px;
+	border-radius: 12px;
+	background-color: #fdfcfa;
+	border: 1.5px solid #e8e5df;
+	color: #555555;
+	font-size: 11.5px;
+	font-weight: 500;
+	line-height: 1.55;
+	word-break: break-all;
+	flex-shrink: 0;
+}
+
+/* ── File sync ───────────────────────────────────────────────────────────── */
+
+.fileRow {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	flex-wrap: wrap;
+}
+
+.fileLabel {
+	display: inline-flex;
+	align-items: center;
+	height: 36px;
+	padding: 0 14px;
+	border-radius: 10px;
+	background-color: #f2f2f2;
+	color: #444444;
+	font-size: 13px;
+	font-weight: 700;
+	cursor: pointer;
+	transition: background-color 0.15s;
+	letter-spacing: -0.01em;
+}
+
+.fileLabel:hover {
+	background-color: #e8e8e8;
+}
+
+.fileInput {
+	display: none;
+}
+
+.fileName {
+	font-size: 12px;
+	color: #aaaaaa;
+	font-weight: 500;
+	flex: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+/* ── Override fields ─────────────────────────────────────────────────────── */
+
+/* 왼쪽 패널 마지막 카드가 남은 높이를 채움 */
+.cardGrow {
+	flex: 1;
+	min-height: 0;
+	overflow-y: auto;
+	-ms-overflow-style: none;
+	scrollbar-width: none;
+}
+
+.cardGrow::-webkit-scrollbar {
+	display: none;
+}
+
+.overrideMeta {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	margin-bottom: 12px;
+	flex-wrap: wrap;
+}
+
+.overrideMetaLabel {
+	font-size: 12px;
+	color: #aaaaaa;
+	font-weight: 500;
+}
+
+.lockedBadge {
+	font-size: 11px;
+	font-weight: 700;
+	color: #ffffff;
+	background-color: #2a2a2a;
+	border-radius: 999px;
+	padding: 2px 9px;
+}
+
+/* pill toggle — 네이티브 체크박스 없이 라벨 자체가 토글 */
+.checkboxGrid {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 6px;
+	margin-bottom: 14px;
+}
+
+.checkboxLabel {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 4px;
+	padding: 7px 10px;
+	border-radius: 999px;
+	background-color: #f4f4f4;
+	cursor: pointer;
+	font-size: 12px;
+	color: #555555;
+	font-weight: 600;
+	transition: background-color 0.12s, color 0.12s;
+	user-select: none;
+	text-align: center;
+}
+
+.checkboxLabel:hover {
+	background-color: #ebebeb;
+}
+
+.checkboxLabelChecked {
+	background-color: #2a2a2a;
+	color: #ffffff;
+}
+
+.checkboxLabelChecked .checkboxKey {
+	color: #aaaaaa;
+}
+
+.checkboxNative {
+	display: none;
+}
+
+.checkboxKey {
+	color: #b8b8b8;
+	font-size: 10px;
+	font-weight: 400;
+}
+
+.overrideActions {
+	display: flex;
+	gap: 7px;
+}
+
+/* ── Form (right panel) ──────────────────────────────────────────────────── */
+
+.formCard {
+	background-color: #ffffff;
+	border-radius: 20px;
+	padding: 22px;
+	height: 100%;
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05), 0 4px 20px rgba(0, 0, 0, 0.06);
+}
+
+.formGrid {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 12px;
+}
+
+.formField {
+	display: flex;
+	flex-direction: column;
+	gap: 5px;
+}
+
+.formFieldFull {
+	grid-column: 1 / -1;
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+}
+
+.formLabel {
+	font-size: 11.5px;
+	font-weight: 700;
+	color: #999999;
+	letter-spacing: 0.01em;
+}
+
+.formInput {
+	height: 40px;
+	padding: 0 12px;
+	border: 1.5px solid #efefef;
+	border-radius: 10px;
+	background-color: #fafafa;
+	color: #222222;
+	font-size: 13px;
+	font-weight: 500;
+	outline: none;
+	width: 100%;
+	box-sizing: border-box;
+	transition: border-color 0.15s, background-color 0.15s;
+}
+
+.formInput::placeholder {
+	color: #d0d0d0;
+}
+
+.formInput:focus {
+	border-color: #c0c0c0;
+	background-color: #ffffff;
+}
+
+.formTextarea {
+	padding: 11px 12px;
+	border: 1.5px solid #efefef;
+	border-radius: 12px;
+	background-color: #fafafa;
+	color: #222222;
+	font-size: 13px;
+	font-weight: 500;
+	outline: none;
+	width: 100%;
+	box-sizing: border-box;
+	resize: none;
+	line-height: 1.65;
+	transition: border-color 0.15s, background-color 0.15s;
+	flex: 1;
+	min-height: 100px;
+}
+
+.formTextarea:focus {
+	border-color: #c0c0c0;
+	background-color: #ffffff;
+}
+
+/* ── Responsive ──────────────────────────────────────────────────────────── */
+
+@media (max-width: 860px) {
+	.page {
+		height: auto;
+		min-height: 100dvh;
+		overflow-y: auto;
+	}
+
+	.inner {
+		height: auto;
+	}
+
+	.layout {
+		flex-direction: column;
+	}
+
+	.leftPanel {
+		width: 100%;
+		overflow-y: visible;
+	}
+
+	.rightPanel {
+		overflow-y: visible;
+	}
+
+	.formCard {
+		height: auto;
+	}
+
+	.formTextarea {
+		min-height: 200px;
+	}
+}

From c88510c302d9fbedf53f92241b26bfdf7870a6f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=ED=95=98=EB=9E=8C?= <gim222932@gmail.com>
Date: Sun, 17 May 2026 15:44:54 +0900
Subject: [PATCH 02/10] =?UTF-8?q?feat:=20Set=20initial=20timetable=20value?=
 =?UTF-8?q?=20in=20the=20mobile=20view=20header=20"=EB=82=98=EC=9D=98=20?=
 =?UTF-8?q?=EC=8B=9C=EA=B0=84=ED=91=9C"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/timetable/TimeTableToolbar.tsx |  2 ++
 src/styles/Toolbar.module.css            | 10 ++++++++++
 2 files changed, 12 insertions(+)

diff --git a/src/pages/timetable/TimeTableToolbar.tsx b/src/pages/timetable/TimeTableToolbar.tsx
index 84ec7a5..562050b 100644
--- a/src/pages/timetable/TimeTableToolbar.tsx
+++ b/src/pages/timetable/TimeTableToolbar.tsx
@@ -31,6 +31,7 @@ const TimeTableToolbar = ({
 }: TimeTableToolbarProps) => {
 	const { user } = useAuth();
 	const navigate = useNavigate();
+	const displayTimetableName = timetableName.trim() || "나의 시간표";
 	const yearOptions =
 		years ??
 		Array.from({ length: 7 }, (_, i) => new Date().getFullYear() - 3 + i);
@@ -78,6 +79,7 @@ const TimeTableToolbar = ({
 						</span>
 					</div>
 					<p className={styles.dateTitle}>{timetableName}</p>
+					<p className={styles.mobileTimetableTitle}>{displayTimetableName}</p>
 					<div className={styles.timetableToggleGroup}>
 						<span className={styles.timetableToggleLabel}>행사 함께 보기</span>
 						<button
diff --git a/src/styles/Toolbar.module.css b/src/styles/Toolbar.module.css
index b541d4f..5395638 100644
--- a/src/styles/Toolbar.module.css
+++ b/src/styles/Toolbar.module.css
@@ -109,6 +109,10 @@
   padding-left: 5px;
 }
 
+.mobileTimetableTitle {
+  display: none;
+}
+
 .navBtnGroup {
   display: flex;
   align-items: center;
@@ -370,11 +374,17 @@
     display: none;
   }
   .timetableToolbarContainer .dateTitle {
+    display: none;
+  }
+  .timetableToolbarContainer .mobileTimetableTitle {
+    display: block;
     min-width: 0;
+    margin: 0;
     padding-left: 0;
     overflow: hidden;
     font-size: 18px;
     font-weight: 700;
+    color: #111827;
     line-height: 1.25;
     text-overflow: ellipsis;
     white-space: nowrap;

From 19db4fe6b3b824ef5a6dc18c699121243ec359cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=ED=95=98=EB=9E=8C?= <gim222932@gmail.com>
Date: Sun, 17 May 2026 15:53:45 +0900
Subject: [PATCH 03/10] =?UTF-8?q?chore:=20add=20"=EC=83=88=20=EC=8B=9C?=
 =?UTF-8?q?=EA=B0=84=ED=91=9C=20=EC=B6=94=EA=B0=80"=20label=20on=20+btn?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/timetable/TimeTableSidebar.tsx | 1 +
 src/styles/Sidebar.module.css            | 8 ++++----
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/pages/timetable/TimeTableSidebar.tsx b/src/pages/timetable/TimeTableSidebar.tsx
index f4bd893..c1a44e8 100644
--- a/src/pages/timetable/TimeTableSidebar.tsx
+++ b/src/pages/timetable/TimeTableSidebar.tsx
@@ -109,6 +109,7 @@ export const TimeTableSidebar = ({
 						<span className={styles.plus} aria-hidden="true">
 							+
 						</span>
+						<span className={styles.toggleText}>새 시간표 추가</span>
 					</button>
 				</div>
 
diff --git a/src/styles/Sidebar.module.css b/src/styles/Sidebar.module.css
index ec27a4c..6dbee78 100644
--- a/src/styles/Sidebar.module.css
+++ b/src/styles/Sidebar.module.css
@@ -168,14 +168,14 @@ body::-webkit-scrollbar {
 }
 
 .iconBtn {
-  width: 30px;
+  width: 100%;
   height: 30px;
-  border-radius: 10px;
   border: 0;
   background: transparent;
   cursor: pointer;
-  display: grid;
-  place-items: center;
+  display: flex;
+  place-items: left;
+  gap: 10px;
 }
 
 .iconBtn:hover {

From b9e469050c641e6d8e83c0be082cc87c7a76d43b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=ED=95=98=EB=9E=8C?= <gim222932@gmail.com>
Date: Sun, 17 May 2026 16:06:59 +0900
Subject: [PATCH 04/10] feat: Separate sidebar logout button into a component &
 add it to timetable sidebar

---
 src/pages/timetable/TimeTableSidebar.tsx |  4 ++++
 src/styles/Sidebar.module.css            |  4 ++++
 src/widgets/Sidebar.tsx                  | 16 +++------------
 src/widgets/SidebarLogoutButton.tsx      | 25 ++++++++++++++++++++++++
 4 files changed, 36 insertions(+), 13 deletions(-)
 create mode 100644 src/widgets/SidebarLogoutButton.tsx

diff --git a/src/pages/timetable/TimeTableSidebar.tsx b/src/pages/timetable/TimeTableSidebar.tsx
index c1a44e8..37e5bab 100644
--- a/src/pages/timetable/TimeTableSidebar.tsx
+++ b/src/pages/timetable/TimeTableSidebar.tsx
@@ -4,6 +4,7 @@ import { useNavigate } from "react-router-dom";
 import { useAuth } from "../../contexts/AuthProvider";
 import styles from "../../styles/Sidebar.module.css";
 import type { PatchTimetableRequest, Timetable } from "../../util/types";
+import { SidebarLogoutButton } from "../../widgets/SidebarLogoutButton";
 
 interface TimeTableSidebarProps {
 	timetables: Timetable[];
@@ -221,6 +222,9 @@ export const TimeTableSidebar = ({
 				/>
 				<span>시간표</span>
 			</button>
+			<div className={styles.timetableSidebarLogout}>
+				<SidebarLogoutButton />
+			</div>
 		</div>
 	);
 };
diff --git a/src/styles/Sidebar.module.css b/src/styles/Sidebar.module.css
index 6dbee78..3359799 100644
--- a/src/styles/Sidebar.module.css
+++ b/src/styles/Sidebar.module.css
@@ -573,6 +573,10 @@ body::-webkit-scrollbar {
   cursor: pointer;
 }
 
+.timetableSidebarLogout {
+  margin-top: auto;
+}
+
 @media (max-width: 992px) {
   .sidebarContainer {
     width: 220px;
diff --git a/src/widgets/Sidebar.tsx b/src/widgets/Sidebar.tsx
index 9d8e719..bd88e70 100644
--- a/src/widgets/Sidebar.tsx
+++ b/src/widgets/Sidebar.tsx
@@ -14,6 +14,7 @@ import type { Category } from "@types";
 import { useUserData } from "@/contexts/UserDataContext";
 import { IoIosClose } from "react-icons/io";
 import { CATEGORY_BUTTON_COLORS } from "@/util/constants";
+import { SidebarLogoutButton } from "./SidebarLogoutButton";
 
 export const Sidebar = () => {
 	type FilterType = "status" | "org" | "category";
@@ -26,7 +27,7 @@ export const Sidebar = () => {
 		globalSetter: React.Dispatch<React.SetStateAction<Category[]>>;
 	}
 
-	const { user, logout } = useAuth();
+	const { user } = useAuth();
 	const { excludedKeywords, addExcludedKeyword, deleteExcludedKeyword, excludedKeywordLoading } =
 		useUserData();
 	const { categoryGroups, isLoadingMeta } = useFilter();
@@ -366,18 +367,7 @@ export const Sidebar = () => {
 				/>
 				<span>시간표</span>
 			</button>
-			{user && (
-				<button
-					type="button"
-					onClick={() => {
-						logout();
-						ref?.current?.scrollTo(0, 0);
-					}}
-					className={styles.logout}
-				>
-					로그아웃
-				</button>
-			)}
+			<SidebarLogoutButton onLogout={() => ref.current?.scrollTo(0, 0)} />
 		</div>
 	);
 };
diff --git a/src/widgets/SidebarLogoutButton.tsx b/src/widgets/SidebarLogoutButton.tsx
new file mode 100644
index 0000000..5aeb873
--- /dev/null
+++ b/src/widgets/SidebarLogoutButton.tsx
@@ -0,0 +1,25 @@
+import { useAuth } from "@contexts/AuthProvider";
+import styles from "@styles/Sidebar.module.css";
+
+interface SidebarLogoutButtonProps {
+	onLogout?: () => void;
+}
+
+export const SidebarLogoutButton = ({ onLogout }: SidebarLogoutButtonProps) => {
+	const { user, logout } = useAuth();
+
+	if (!user) return null;
+
+	return (
+		<button
+			type="button"
+			onClick={() => {
+				void logout();
+				onLogout?.();
+			}}
+			className={styles.logout}
+		>
+			로그아웃
+		</button>
+	);
+};

From 96f255a45b3728827aeb618cc3c0e19a073264b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=ED=95=98=EB=9E=8C?= <gim222932@gmail.com>
Date: Sun, 17 May 2026 16:24:55 +0900
Subject: [PATCH 05/10] feat: add Login btn in SignUp page

---
 src/pages/auth/Signup/EmailSignUp.tsx |  8 +++++++-
 src/styles/EmailSignUp.module.css     | 28 ++++++++++++++++++++++++---
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/pages/auth/Signup/EmailSignUp.tsx b/src/pages/auth/Signup/EmailSignUp.tsx
index a2de616..1473672 100644
--- a/src/pages/auth/Signup/EmailSignUp.tsx
+++ b/src/pages/auth/Signup/EmailSignUp.tsx
@@ -1,7 +1,7 @@
 import axios from "axios";
 import type React from "react";
 import { useRef, useState } from "react";
-import { useSearchParams } from "react-router-dom";
+import { Link, useSearchParams } from "react-router-dom";
 import { useAuth } from "@contexts/AuthProvider";
 import CompleteSignUp from "../OnBoarding/CompleteSignUp";
 import Onboarding from "../OnBoarding/Onboarding";
@@ -165,6 +165,12 @@ export default function EmailSignUp() {
 						계정 생성
 					</button>
 				</form>
+				<div className={styles.loginLink}>
+					<p className={styles.loginText}>이미 계정이 있으신가요?</p>
+					<Link to="/auth/login" className={styles.loginText}>
+						로그인하러 가기
+					</Link>
+				</div>
 			</div>
 		</div>
 	);
diff --git a/src/styles/EmailSignUp.module.css b/src/styles/EmailSignUp.module.css
index c33f677..d2de7a6 100644
--- a/src/styles/EmailSignUp.module.css
+++ b/src/styles/EmailSignUp.module.css
@@ -22,13 +22,13 @@
 
 .header {
 	text-align: center;
-	margin-bottom: 22px;
+	margin-bottom: 54px;
 }
 
 .title {
 	margin: 0;
-	font-size: 20px;
-	font-weight: 800;
+	font-size: 28px;
+	font-weight: 700;
 	letter-spacing: -0.03em;
 	color: #111;
 }
@@ -138,3 +138,25 @@
 	transform: translateY(1px);
 	box-shadow: 0 7px 16px rgba(0, 0, 0, 0.12);
 }
+
+
+.loginLink {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin-top: 24px;
+}
+.loginText {
+	margin: 0;
+  	border: 0;
+  	background: transparent;
+  	color: #8a8a8a;
+  	font-size: 14px;
+  	font-weight: 500;
+  	cursor: pointer;
+}
+
+.loginText:active {
+  color: #666666;
+  text-decoration: underline;
+}

From c8b3ac894f86f3bdb7b99269f974f85cb5379257 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=ED=95=98=EB=9E=8C?= <gim222932@gmail.com>
Date: Sun, 17 May 2026 16:29:06 +0900
Subject: [PATCH 06/10] chore: signcronize style with Signup.tsx  & Home.tsx

---
 src/pages/auth/Login/Login.tsx |  2 +-
 src/styles/Login.module.css    | 26 +++++++++++++-------------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/pages/auth/Login/Login.tsx b/src/pages/auth/Login/Login.tsx
index 96f23e8..2915260 100644
--- a/src/pages/auth/Login/Login.tsx
+++ b/src/pages/auth/Login/Login.tsx
@@ -75,7 +75,7 @@ export default function Login() {
 						<span className={styles.loginSignupText}>
 							회원가입을 하시겠어요?
 						</span>
-						<Link to="/auth/signup" className={styles.loginSignupLink}>
+						<Link to="/auth/signup" className={styles.loginSignupText}>
 							회원가입
 						</Link>
 					</div>
diff --git a/src/styles/Login.module.css b/src/styles/Login.module.css
index f23b8b4..8c9ac0c 100644
--- a/src/styles/Login.module.css
+++ b/src/styles/Login.module.css
@@ -24,7 +24,7 @@
 
 /* 타이틀 */
 .loginTitle {
-	margin: 0 0 28px;
+	margin: 0 0 54px;
 	font-size: 28px;
 	font-weight: 700;
 	letter-spacing: -0.02em;
@@ -99,23 +99,23 @@
 
 /* 회원가입 안내 */
 .loginSignup {
-	margin-top: 10px;
 	display: flex;
-	gap: 8px;
 	align-items: center;
-	justify-content: center;
+	gap: 8px;
+	margin-top: 24px;
 }
 
 .loginSignupText {
-	font-size: 12px;
-	color: #777;
+	margin: 0;
+  	border: 0;
+  	background: transparent;
+  	color: #8a8a8a;
+  	font-size: 14px;
+  	font-weight: 500;
+  	cursor: pointer;
 }
 
-.loginSignupLink {
-	font-size: 12px;
-	font-weight: 600;
-	color: #000;
-	cursor: pointer;
-	text-decoration: underline;
-	text-underline-offset: 3px;
+.loginSignupText:active {
+  color: #666666;
+  text-decoration: underline;
 }

From 71acdd5c307f0bd9f4808abe13de422fc55cc5b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=ED=95=98=EB=9E=8C?= <gim222932@gmail.com>
Date: Sun, 17 May 2026 16:31:39 +0900
Subject: [PATCH 07/10] fix: redirect to main after login

---
 src/pages/auth/Login/Login.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/auth/Login/Login.tsx b/src/pages/auth/Login/Login.tsx
index 2915260..3829602 100644
--- a/src/pages/auth/Login/Login.tsx
+++ b/src/pages/auth/Login/Login.tsx
@@ -27,7 +27,7 @@ export default function Login() {
 		try {
 			await login(email, password);
 			setCheck(true);
-			navigate("/auth/complete");
+			navigate("/main");
 		} catch {
 			setCheck(false);
 		}

From d588c91f20931c3ddf0dd94a93c5d82179efbb66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=ED=95=98=EB=9E=8C?= <gim222932@gmail.com>
Date: Sun, 17 May 2026 16:44:03 +0900
Subject: [PATCH 08/10] feat: add place info to week view event block

---
 src/styles/WeekGrid.module.css | 9 +++++++++
 src/widgets/Week/WeekGrid.tsx  | 5 +++++
 2 files changed, 14 insertions(+)

diff --git a/src/styles/WeekGrid.module.css b/src/styles/WeekGrid.module.css
index a7795cb..9540a2f 100644
--- a/src/styles/WeekGrid.module.css
+++ b/src/styles/WeekGrid.module.css
@@ -190,3 +190,12 @@
 	color: #333;
 	opacity: 0.85;
 }
+
+.blockLocation {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-size: 11px;
+	color: #333;
+	opacity: 0.85;
+}
diff --git a/src/widgets/Week/WeekGrid.tsx b/src/widgets/Week/WeekGrid.tsx
index 35ae202..d772415 100644
--- a/src/widgets/Week/WeekGrid.tsx
+++ b/src/widgets/Week/WeekGrid.tsx
@@ -130,6 +130,8 @@ function DayColumn({
 			{blocks.map((b) => {
 				const { event } = b.raw.resource;
 				const color = CATEGORY_COLORS[event.eventTypeId] || CATEGORY_COLORS[6];
+				const location = event.location?.trim();
+				const shouldShowLocation = location && location !== "-";
 
 				return (
 					<button
@@ -152,6 +154,9 @@ function DayColumn({
 							{formatAmPmFromMinutes(b.startMin)} -{" "}
 							{formatAmPmFromMinutes(b.endMin)}
 						</div>
+						{shouldShowLocation && (
+							<div className={styles.blockLocation}>{location}</div>
+						)}
 					</button>
 				);
 			})}

From 6afb63a74cbff7920ef6ef59ba451d694d01c684 Mon Sep 17 00:00:00 2001
From: Seoyeon HEO <best3487@snu.ac.kr>
Date: Sun, 17 May 2026 16:46:26 +0900
Subject: [PATCH 09/10] fix: modal style changes & bookmark feat guard by login
 modal

---
 src/pages/MainDay.tsx                         | 18 +++++-
 src/pages/MyPage.tsx                          |  8 +--
 src/pages/bookmark/Bookmark.tsx               |  2 +-
 src/pages/memo/Memo.tsx                       |  8 +--
 src/pages/timetable/TimetablePage.tsx         |  8 +--
 src/styles/Modal.module.css                   | 58 ++++++++++++++-----
 src/widgets/Modal.tsx                         | 15 +++--
 src/widgets/Month/MonthSideView/CardView.tsx  |  9 ++-
 .../Month/MonthSideView/MonthSideView.tsx     |  4 +-
 9 files changed, 92 insertions(+), 38 deletions(-)

diff --git a/src/pages/MainDay.tsx b/src/pages/MainDay.tsx
index ef4cab9..b1f7831 100644
--- a/src/pages/MainDay.tsx
+++ b/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,6 +7,7 @@ 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;
 
@@ -14,6 +15,8 @@ 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>
 	);
 };
diff --git a/src/pages/MyPage.tsx b/src/pages/MyPage.tsx
index 985b4e7..82a7a72 100644
--- a/src/pages/MyPage.tsx
+++ b/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>
diff --git a/src/pages/bookmark/Bookmark.tsx b/src/pages/bookmark/Bookmark.tsx
index 0b93416..290d980 100644
--- a/src/pages/bookmark/Bookmark.tsx
+++ b/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>
diff --git a/src/pages/memo/Memo.tsx b/src/pages/memo/Memo.tsx
index eddfc00..5986638 100644
--- a/src/pages/memo/Memo.tsx
+++ b/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 />
diff --git a/src/pages/timetable/TimetablePage.tsx b/src/pages/timetable/TimetablePage.tsx
index 4ca999c..6e95ab4 100644
--- a/src/pages/timetable/TimetablePage.tsx
+++ b/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>
diff --git a/src/styles/Modal.module.css b/src/styles/Modal.module.css
index 45f8cf9..b06d120 100644
--- a/src/styles/Modal.module.css
+++ b/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;
+  }
+}
diff --git a/src/widgets/Modal.tsx b/src/widgets/Modal.tsx
index 7a16c62..0e35acd 100644
--- a/src/widgets/Modal.tsx
+++ b/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>
diff --git a/src/widgets/Month/MonthSideView/CardView.tsx b/src/widgets/Month/MonthSideView/CardView.tsx
index 49bb668..63609b0 100644
--- a/src/widgets/Month/MonthSideView/CardView.tsx
+++ b/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);
 
diff --git a/src/widgets/Month/MonthSideView/MonthSideView.tsx b/src/widgets/Month/MonthSideView/MonthSideView.tsx
index 744ad4d..3a68071 100644
--- a/src/widgets/Month/MonthSideView/MonthSideView.tsx
+++ b/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>

From 4247bfbefe939b573f65b9a9d42e4589d0391877 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=ED=95=98=EB=9E=8C?= <gim222932@gmail.com>
Date: Sun, 17 May 2026 17:10:07 +0900
Subject: [PATCH 10/10] fix: apply category text colors to weekly period events

---
 src/widgets/Week/PeriodBar.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/widgets/Week/PeriodBar.tsx b/src/widgets/Week/PeriodBar.tsx
index fa0659f..4492439 100644
--- a/src/widgets/Week/PeriodBar.tsx
+++ b/src/widgets/Week/PeriodBar.tsx
@@ -2,7 +2,11 @@ import { useMemo, useCallback } from "react";
 import type { Event, CalendarEvent } from "@/util/types";
 import { clampDate, dayIndexFromWeekStart } from "@/util/weekly_timetable/time";
 import styles from "@styles/PeriodBar.module.css";
-import { CATEGORY_COLORS } from "@/util/constants";
+import {
+	CATEGORY_COLORS,
+	CATEGORY_OTHER_INDEX,
+	CATEGORY_TEXT_COLORS,
+} from "@/util/constants";
 import type { CSSProperties } from "react";
 
 type Props = {
@@ -149,7 +153,11 @@ export function PeriodBars({
 				const displayTitle = truncate40(b.title);
 
 				const categoryId = b.raw.resource.event.eventTypeId;
-				const color = CATEGORY_COLORS[categoryId] ?? "#999";
+				const lineColor =
+					CATEGORY_COLORS[categoryId] ?? CATEGORY_COLORS[CATEGORY_OTHER_INDEX];
+				const textColor =
+					CATEGORY_TEXT_COLORS[categoryId] ??
+					CATEGORY_TEXT_COLORS[CATEGORY_OTHER_INDEX];
 
 				const style: CSSVarStyle = {
 					left: `${leftPct}px`,
@@ -157,8 +165,8 @@ export function PeriodBars({
 					bottom: b.lane * (laneHeight + laneGap),
 					height: laneHeight,
 
-					"--period-line": color,
-					"--period-text": color,
+					"--period-line": lineColor,
+					"--period-text": textColor,
 				};
 
 				return (