Merge pull request #91 from wafflestudio/hotfix/timetable

모바일 화면에서 시간표 올리지 못함 설명

Author: h-seo-n

package.json

@@ -17,7 +17,7 @@
 	},
 	"dependencies": {
 		"@tanstack/query-async-storage-persister": "^5.100.9",
-		"@tanstack/react-query": "^5.100.9",
+		"@tanstack/react-query": "^5.100.10",
 		"@tanstack/react-query-persist-client": "^5.100.9",
 		"axios": "^1.13.2",
 		"date-fns": "^4.1.0",

src/pages/MyPage.tsx

@@ -233,7 +233,7 @@ const BugReportSection = () => {
 		<section className={styles.bugReportSection}>
 			<div className={styles.bugReportHeader}>
 				<div className={styles.bugReportTitle}>
-					<FaBug size={18} />
+					<FaBug size={20} />
 					<strong>버그 신고</strong>
 				</div>
 				<span>이용 중 발견한 문제를 알려주세요.</span>
@@ -382,10 +382,10 @@ const MyPage = () => {
 					<div className={styles.widgetsWrapper}>
 						<BookmarkWidget />
 						<MemoWidget />
+						<BugReportSection />
+						<LogoutSection />
+						<AccountDeletionSection />
 					</div>
-					<BugReportSection />
-					<LogoutSection />
-					<AccountDeletionSection />
 				</div>
 			) : (
 				<div className={styles.notFound}>

src/pages/timetable/TimetablePage.tsx

@@ -22,6 +22,9 @@ import { SlArrowLeft } from "react-icons/sl";
 import { TimeTableSidebar } from "./TimeTableSidebar";
 import TimeTableToolbar from "./TimeTableToolbar";
 import BottomNav from "@/widgets/BottomNav";
+import { useAuth } from "@/contexts/AuthProvider";
+import { useNavigate } from "react-router-dom";
+import Modal from "@/widgets/Modal";
 
 export default function TimetablePage() {
 	const now = new Date();
@@ -58,6 +61,9 @@ export default function TimetablePage() {
 	const [isSidebarOpen, setIsSidebarOpen] = useState(true);
 	const [isTimetableSimplified, setIsTimetableSimplified] = useState(false);
 
+	const { user } = useAuth();
+	const navigate = useNavigate();
+
 	useEffect(() => {
 		loadTimetable(year, semester);
 	}, [year, semester, loadTimetable]);
@@ -202,8 +208,14 @@ export default function TimetablePage() {
 							선택된 시간표가 없어요
 						</div>
 						<div style={{ opacity: 0.7, lineHeight: 1.5 }}>
-							왼쪽 사이드바에서 시간표를 추가하거나 선택해 주세요.
+							<span className={styles.emptyDesktop}>
+								왼쪽 사이드바에서 시간표를 추가하거나 선택해 주세요.
+							</span>
+							<span className={styles.emptyMobile}>
+								시간표는 데스크탑 뷰에서 설정해주세요!
+							</span>
 						</div>
+						
 					</div>
 				) : (
 					<TimetableGrid
@@ -239,6 +251,20 @@ export default function TimetablePage() {
 					setIsClicked={setIsAddClassPanelOpen}
 				/>
 			)}
+
+			{!user &&
+				<div className={styles.notFound}>
+					<Modal
+						content="시간표 페이지 이용을 위해서는 로그인을 해주세요."
+						leftText="로그인"
+						rightText="회원가입"
+						onLeftClick={() => navigate("/auth/login")}
+						onRightClick={() => navigate("/auth/signup")}
+						onClose={null}
+					/>
+				</div>
+			}
+
 			<BottomNav />
 		</div>
 	);

src/styles/Bookmarks.module.css

@@ -39,7 +39,7 @@ body {
   width: 100%;
   justify-content: space-between;
   align-items: center;
-  padding: 0px;
+  padding: 0 20px;
   margin-bottom: 16px;
 }
 

src/styles/Memo.module.css

@@ -238,12 +238,13 @@ body {
   .memoContent {
     font-size: 14px;
   }
+  .memosHeader {
+    padding: 0px;
+  }
   .memosHeader span {
     font-size: 17px;
   }
-  .memosHeader {
-    padding: 0 0 0 10px;
-  }
+  
   .cardsColumn {
     gap: 0;
   }

src/styles/MyPage.module.css

@@ -43,16 +43,17 @@
 	display: flex;
 	flex-direction: column;
 	width: 80%;
+	box-sizing: border-box;
 }
 
 .bugReportSection {
 	display: flex;
 	flex-direction: column;
 	gap: 14px;
-	width: 80%;
-	margin-top: 24px;
-	padding: 20px;
+	width: 100%;
+	padding: 24px 20px;
 	border-top: 1px solid #eeeeee;
+	box-sizing: border-box;
 }
 
 .bugReportHeader {
@@ -69,8 +70,9 @@
 }
 
 .bugReportTitle strong {
-	font-size: 16px;
+	font-size: 20px;
 	font-weight: 700;
+	line-height: 1.2;
 }
 
 .bugReportHeader span {
@@ -159,10 +161,10 @@
 	align-items: center;
 	justify-content: space-between;
 	gap: 16px;
-	width: 80%;
-	margin-top: 24px;
-	padding: 20px;
+	width: 100%;
+	padding: 24px 20px;
 	border-top: 1px solid #eeeeee;
+	box-sizing: border-box;
 }
 
 .logoutText {
@@ -174,8 +176,9 @@
 
 .logoutText strong {
 	color: #222222;
-	font-size: 16px;
+	font-size: 20px;
 	font-weight: 700;
+	line-height: 1.2;
 }
 
 .logoutText span {
@@ -221,10 +224,10 @@
 	align-items: center;
 	justify-content: space-between;
 	gap: 16px;
-	width: 80%;
-	margin-top: 24px;
-	padding: 20px;
+	width: 100%;
+	padding: 24px 20px;
 	border-top: 1px solid #eeeeee;
+	box-sizing: border-box;
 }
 
 .accountDeletionText {
@@ -236,8 +239,9 @@
 
 .accountDeletionText strong {
 	color: #222222;
-	font-size: 16px;
+	font-size: 20px;
 	font-weight: 700;
+	line-height: 1.2;
 }
 
 .accountDeletionText span {
@@ -494,29 +498,28 @@
 		padding: 24px 20px;
 	}
 	.bugReportSection {
-		width: 100%;
-		padding: 20px;
-		margin-top: 8px;
+		padding: 24px 0;
+	}
+	.bugReportTitle strong,
+	.logoutText strong,
+	.accountDeletionText strong {
+		font-size: 17px;
 	}
 	.bugReportSubmitButton {
 		width: 100%;
 	}
 	.logoutSection {
-		width: 100%;
 		align-items: flex-start;
 		flex-direction: column;
-		padding: 20px;
-		margin-top: 8px;
+		padding: 24px 0;
 	}
 	.logoutButton {
 		width: 100%;
 	}
 	.accountDeletionSection {
-		width: 100%;
 		align-items: flex-start;
 		flex-direction: column;
-		padding: 20px;
-		margin-top: 8px;
+		padding: 24px 0;
 	}
 	.deleteAccountButton {
 		width: 100%;