Merge pull request #167 from wafflestudio/haram

fix: 주별뷰 Period Bar 겹침 문제 해결

Author: h-seo-n

src/calendar_widgets/week/CustomWeekView.tsx

@@ -7,7 +7,11 @@ import type {
 } from "react-big-calendar";
 import { Views } from "react-big-calendar";
 
-import type { Event, CalendarEvent, GetCoursesResponse } from "../../util/types";
+import type {
+	Event,
+	CalendarEvent,
+	GetCoursesResponse,
+} from "../../util/types";
 import {
 	config,
 	flattenEventsToBlocks,
@@ -30,6 +34,30 @@ interface CustomWeekViewProps {
 
 type Rect = { left: number; width: number };
 
+function useElementHeight<T extends HTMLElement>(
+	elementRef: React.RefObject<T | null>,
+) {
+	const [height, setHeight] = useState(0);
+
+	useLayoutEffect(() => {
+		const el = elementRef.current;
+		if (!el) return;
+
+		const update = () => {
+			setHeight(el.getBoundingClientRect().height);
+		};
+
+		update();
+
+		const ro = new ResizeObserver(update);
+		ro.observe(el);
+
+		return () => ro.disconnect();
+	}, [elementRef]);
+
+	return height;
+}
+
 function useAnchorRect<T extends HTMLElement>(
 	anchorRef: React.RefObject<T | null>,
 ) {
@@ -103,10 +131,11 @@ function CustomWeekView({
 						cevent.end.getMonth(),
 						cevent.end.getDate(),
 					);
-					const differentDate = (startDay.getFullYear() !== endDay.getFullYear() 
-						&& startDay.getMonth() !== endDay.getMonth() 
-						&& startDay.getDate() !== endDay.getDate());
-					
+					const differentDate =
+						startDay.getFullYear() !== endDay.getFullYear() &&
+						startDay.getMonth() !== endDay.getMonth() &&
+						startDay.getDate() !== endDay.getDate();
+
 					isAllDay = Boolean(cevent.allDay) || differentDate || sameMinute;
 				}
 
@@ -166,7 +195,9 @@ function CustomWeekView({
 	);
 
 	const gridRef = useRef<HTMLDivElement>(null);
+	const periodLayerRef = useRef<HTMLDivElement>(null);
 	const { left, width } = useAnchorRect(gridRef);
+	const periodBarHeight = useElementHeight(periodLayerRef);
 
 	return (
 		<div className={styles.weekView}>
@@ -179,6 +210,11 @@ function CustomWeekView({
 			<div
 				className={styles.timetableLayer}
 				data-tour-id="week-tour-participating-events"
+				style={
+					{
+						"--period-bar-height": `${periodBarHeight}px`,
+					} as React.CSSProperties
+				}
 			>
 				<WeekGrid
 					ref={gridRef}
@@ -191,6 +227,7 @@ function CustomWeekView({
 				/>
 			</div>
 			<div
+				ref={periodLayerRef}
 				className={styles.periodLayer}
 				style={{ left, width }}
 				data-tour-id="week-tour-recruiting-events"

src/calendar_widgets/week/WeekView.module.css

@@ -7,6 +7,13 @@
 	z-index: 10;
 }
 
+@media (min-width: 577px) {
+	.timetableLayer {
+		box-sizing: border-box;
+		padding-bottom: var(--period-bar-height, 0px);
+	}
+}
+
 .periodLayer {
 	position: fixed;
 	left: 0;

src/pages/auth/OnBoarding/Onboarding.tsx

@@ -73,7 +73,7 @@ export default function Onboarding({
 			}
 			setSearchParams((prev) => {
 				const next = new URLSearchParams(prev);
-				next.set("step", "complete");
+				next.set("step", "sign-up-source");
 				return next;
 			});
 		} catch (e) {

src/pages/auth/OnBoarding/SignUpSource.module.css

@@ -0,0 +1,28 @@
+.sourceList {
+	gap: 18px;
+}
+
+.sourceOption {
+	display: flex;
+	align-items: center;
+	gap: 14px;
+	cursor: pointer;
+	box-shadow:
+		0 2px 0 rgba(0, 0, 0, 0.04),
+		0 6px 14px rgba(0, 0, 0, 0.08);
+}
+
+.checkbox {
+	flex: 0 0 auto;
+	width: 18px;
+	height: 18px;
+	margin: 0;
+	accent-color: #111;
+	cursor: pointer;
+}
+
+.labelText {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}

src/pages/auth/OnBoarding/SignUpSource.tsx

@@ -0,0 +1,89 @@
+import { useState } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import signupStyles from "../Signup/EmailSignUp.module.css";
+import styles from "./SignUpSource.module.css";
+
+const SIGN_UP_SOURCES = [
+	"에브리타임 등 커뮤니티",
+	"인스타그램 및 SNS 홍보",
+	"단톡방",
+	"인터넷 검색",
+	"지인 추천",
+	"와플스튜디오의 프로젝트가 궁금해서",
+	"기타",
+] as const;
+
+type SignUpSource = (typeof SIGN_UP_SOURCES)[number];
+
+export default function SignUpSource() {
+	const navigate = useNavigate();
+	const [, setSearchParams] = useSearchParams();
+	const [selectedSources, setSelectedSources] = useState<SignUpSource[]>([]);
+
+	const toggleSource = (source: SignUpSource) => {
+		setSelectedSources((prev) =>
+			prev.includes(source)
+				? prev.filter((selected) => selected !== source)
+				: [...prev, source],
+		);
+	};
+
+	const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+
+		if (selectedSources.length === 0) {
+			alert("가입 경로를 하나 이상 선택해주세요.");
+			return;
+		}
+
+		setSearchParams((prev) => {
+			const next = new URLSearchParams(prev);
+			next.set("step", "complete");
+			return next;
+		});
+		navigate("/auth/signup?step=complete");
+	};
+
+	return (
+		<div className={signupStyles.page}>
+			<div className={signupStyles.box}>
+				<header className={signupStyles.header}>
+					<h2 className={signupStyles.title}>가입 경로</h2>
+					<p className={signupStyles.subtitle}>
+						행사를 어떻게 알게 되었나요?
+					</p>
+				</header>
+
+				<form
+					className={`${signupStyles.form} ${styles.sourceList}`}
+					onSubmit={handleSubmit}
+				>
+					{SIGN_UP_SOURCES.map((source) => {
+						const inputId = `sign-up-source-${source}`;
+
+						return (
+							<label
+								key={source}
+								className={`${signupStyles.input} ${styles.sourceOption}`}
+								htmlFor={inputId}
+							>
+								<input
+									id={inputId}
+									className={styles.checkbox}
+									type="checkbox"
+									checked={selectedSources.includes(source)}
+									onChange={() => toggleSource(source)}
+								/>
+								<span className={styles.labelText}>{source}</span>
+							</label>
+						);
+					})}
+
+					<button className={signupStyles.submit} type="submit">
+						완료
+					</button>
+				</form>
+			</div>
+		</div>
+	);
+}

src/pages/auth/Signup/EmailSignUp.tsx

@@ -6,6 +6,7 @@ import { useAuth } from "@contexts/AuthProvider";
 import CompleteSignUp from "../OnBoarding/CompleteSignUp";
 import Onboarding from "../OnBoarding/Onboarding";
 import ProfileSetting from "../OnBoarding/ProfileSetting";
+import SignUpSource from "../OnBoarding/SignUpSource";
 import styles from "./EmailSignUp.module.css";
 
 export default function EmailSignUp() {
@@ -31,6 +32,8 @@ export default function EmailSignUp() {
 			return <ProfileSetting />;
 		case "onboarding":
 			return <Onboarding />;
+		case "sign-up-source":
+			return <SignUpSource />;
 		case "complete":
 			return <CompleteSignUp />;
 	}

src/router/AppRoutes.tsx

@@ -9,6 +9,7 @@ const Login = lazy(() => import("../pages/auth/Login/Login"));
 const LoginHandler = lazy(
 	() => import("../pages/auth/Login/SocialLoginHandler"),
 );
+const SignupSource = lazy(() => import("../pages/auth/OnBoarding/SignUpSource"));
 const EmailSignUp = lazy(() => import("../pages/auth/Signup/EmailSignUp"));
 const CalendarView = lazy(() => import("../pages/calendar/CalendarView"));
 const MainDay = lazy(() => import("../pages/calendar/MainDay"));
@@ -27,7 +28,11 @@ export default function AppRoutes() {
 				<Routes>
 					<Route path="/" element={<Home />} />
 					<Route path="/auth/login" element={<Login />} />
-					<Route path="/auth/signup" element={<EmailSignUp />} />
+          <Route path="/auth/signup" element={<EmailSignUp />} />
+          <Route
+            path="/auth/onbording/sign-up-source"
+            element={<SignupSource />}
+          />
 					{/* <Route path="/auth/complete" element={<CompleteSignUp />} /> */}
 
 					{/* OAuth Redirect */}