Merge pull request #94 from wafflestudio/haram

프론트 QA 사항 수정

Author: h-seo-n

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);
 		}
@@ -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>

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>
 	);

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[];
@@ -109,6 +110,7 @@ export const TimeTableSidebar = ({
 						<span className={styles.plus} aria-hidden="true">
 							+
 						</span>
+						<span className={styles.toggleText}>새 시간표 추가</span>
 					</button>
 				</div>
 
@@ -220,6 +222,9 @@ export const TimeTableSidebar = ({
 				/>
 				<span>시간표</span>
 			</button>
+			<div className={styles.timetableSidebarLogout}>
+				<SidebarLogoutButton />
+			</div>
 		</div>
 	);
 };

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

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;
+}

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;
 }

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 {
@@ -573,6 +573,10 @@ body::-webkit-scrollbar {
   cursor: pointer;
 }
 
+.timetableSidebarLogout {
+  margin-top: auto;
+}
+
 @media (max-width: 992px) {
   .sidebarContainer {
     width: 220px;

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;

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;
+}

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>
 	);
 };