Merge pull request #71 from wafflestudio/haram

소셜로그인 URL 수정, 시간표 기능 추가 및 모바일 뷰 개발

Author: h-seo-n

src/pages/auth/Home.tsx

@@ -3,12 +3,10 @@ import { useNavigate } from "react-router-dom";
 import logo from "/assets/logo.png";
 import styles from "@styles/Home.module.css";
 
-const API_URL = import.meta.env.VITE_API_URL || "";
-
 const SOCIAL_LOGIN_ENTRY = {
-	google: `${API_URL}/auth/login/google`,
-	kakao: `${API_URL}/auth/login/kakao`,
-	naver: `${API_URL}/auth/login/naver`,
+	google: `/oauth2/authorization/google`,
+	kakao: `/oauth2/authorization/kakao`,
+	naver: `/oauth2/authorization/naver`,
 } as const;
 
 export default function Home() {

src/pages/timetable/TimeTableToolbar.tsx

@@ -11,6 +11,8 @@ interface TimeTableToolbarProps {
 	SEMESTER_LABEL: { id: Semester; label: string }[];
 	onYearChange: (year: number) => void;
 	onSemesterChange: (semester: Semester) => void;
+	isToggleOn: boolean;
+	onToggleChange: (isToggleOn: boolean) => void;
 	years?: number[];
 }
 
@@ -21,6 +23,8 @@ const TimeTableToolbar = ({
 	SEMESTER_LABEL,
 	onYearChange,
 	onSemesterChange,
+	isToggleOn,
+	onToggleChange,
 	years,
 }: TimeTableToolbarProps) => {
 	const { user } = useAuth();
@@ -62,6 +66,17 @@ const TimeTableToolbar = ({
 						</select>
 					</span>
 					<p className={styles.dateTitle}>{timetableName}</p>
+					<button
+						type="button"
+						className={`${styles.timetableToggle} ${
+							isToggleOn ? styles.timetableToggleOn : ""
+						}`}
+						aria-label="시간표 토글"
+						aria-pressed={isToggleOn}
+						onClick={() => onToggleChange(!isToggleOn)}
+					>
+						<span className={styles.timetableToggleThumb} />
+					</button>
 				</div>
 
 				<div className={styles.profileRow}>

src/pages/timetable/TimetableGrid.tsx

@@ -1,15 +1,23 @@
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import {
 	DAY_LABELS_KO,
 	type Day,
 	type GetCoursesResponse,
 	type Course,
+	type CalendarEvent,
+	type Event,
 } from "../../util/types";
 import type {
 	GridConfig,
 	TimetableGridBlock,
+	LayoutedBlock,
+} from "../../util/weekly_timetable/layout";
+import {
+	flattenEventsToBlocks,
+	layoutDayBlocksLane,
 } from "../../util/weekly_timetable/layout";
 import { formatAmPmFromMinutes } from "../../util/weekly_timetable/time";
+import { CATEGORY_COLORS } from "../../util/constants";
 import { MdCancel } from "react-icons/md";
 import styles from "@styles/Timetable.module.css";
 
@@ -24,6 +32,9 @@ export type TimetableProps = {
 	onSelectBlock?: (id: number, item: Course) => void;
 	onAddBlock?: (id: number, item: Course) => void;
 	onRemoveBlock?: (timetableId: number, enrollId: number) => Promise<void>;
+	isSimplified?: boolean;
+	weekEvents?: CalendarEvent[];
+	onSelectEvent?: (event: Event) => void;
 	dayLabels?: Record<Day, string>;
 };
 
@@ -35,23 +46,40 @@ export function TimetableGrid({
 	config,
 	toBlocks,
 	onRemoveBlock,
+	isSimplified = false,
+	weekEvents = [],
+	onSelectEvent,
 	dayLabels = DAY_LABELS_KO,
 }: TimetableProps) {
+	const [isMobile, setIsMobile] = useState(false);
 	const blocks = useMemo(
 		() => toBlocks(items, config),
 		[items, config, toBlocks],
 	);
-	const totalHeight = config.endHour * 60 * config.ppm;
+	const totalHeight = (config.endHour - config.startHour) * 60 * config.ppm;
+
+	useEffect(() => {
+		const checkIsMobile = () => {
+			setIsMobile(window.innerWidth <= 576);
+		};
+
+		checkIsMobile();
+		window.addEventListener("resize", checkIsMobile);
+
+		return () => window.removeEventListener("resize", checkIsMobile);
+	}, []);
 
 	const hourMarks = useMemo(() => {
 		const list: { hour: number; top: number; label: string }[] = [];
 		for (let h = config.startHour; h <= config.endHour; h++) {
 			const top = (h * 60 - config.startHour * 60) * config.ppm;
-			const labelHour = formatAmPmFromMinutes(h * 60);
+			const labelHour = isMobile
+				? String(h % 12 || 12)
+				: formatAmPmFromMinutes(h * 60);
 			list.push({ hour: h, top, label: labelHour });
 		}
 		return list;
-	}, [config]);
+	}, [config, isMobile]);
 
 	const blocksByDay = useMemo(() => {
 		const map: Record<Day, TimetableGridBlock<Course>[]> = {
@@ -67,6 +95,28 @@ export function TimetableGrid({
 		return map;
 	}, [blocks]);
 
+	const eventBlocksByDay = useMemo(() => {
+		const eventBlocks = flattenEventsToBlocks(
+			weekEvents.filter((event) => event.allDay !== true),
+			config,
+		);
+		const map: Record<Day, LayoutedBlock[]> = {
+			0: [],
+			1: [],
+			2: [],
+			3: [],
+			4: [],
+			5: [],
+			6: [],
+		};
+
+		for (const day of Days) {
+			map[day] = layoutDayBlocksLane(eventBlocks.filter((b) => b.day === day));
+		}
+
+		return map;
+	}, [weekEvents, config]);
+
 	return (
 		<div className={styles.gridWrap}>
 			<div className={styles.headerRow}>
@@ -101,6 +151,9 @@ export function TimetableGrid({
 							config={config}
 							// onSelectBlock={onSelectBlock}
 							onRemoveBlock={onRemoveBlock}
+							isSimplified={isSimplified}
+							eventBlocks={isSimplified ? eventBlocksByDay[d] : []}
+							onSelectEvent={onSelectEvent}
 						/>
 					))}
 				</div>
@@ -116,13 +169,19 @@ function DayColumn<T>({
 	config,
 	onSelectBlock,
 	onRemoveBlock,
+	isSimplified,
+	eventBlocks,
+	onSelectEvent,
 }: {
 	timetableId: number;
 	height: number;
 	blocks: TimetableGridBlock<T>[];
 	config: GridConfig;
 	onSelectBlock?: (id: number, item: T) => void;
 	onRemoveBlock?: (timetableId: number, enrollId: number) => Promise<void>;
+	isSimplified: boolean;
+	eventBlocks: LayoutedBlock[];
+	onSelectEvent?: (event: Event) => void;
 }) {
 	return (
 		<div className={styles.dayCol} style={{ height }}>
@@ -131,7 +190,9 @@ function DayColumn<T>({
 			{blocks.map((b) => (
 				<button
 					key={b.id}
-					className={styles.block}
+					className={`${styles.block} ${
+						isSimplified ? styles.simplifiedBlock : ""
+					}`}
 					style={{
 						top: b.top,
 						height: b.height,
@@ -158,6 +219,35 @@ function DayColumn<T>({
 					</div>
 				</button>
 			))}
+
+			{eventBlocks.map((b) => {
+				const { event } = b.raw.resource;
+				const color = CATEGORY_COLORS[event.eventTypeId] || CATEGORY_COLORS[6];
+
+				return (
+					<button
+						key={`event-${b.blockId}-${b.sourceId}`}
+						className={styles.eventBlock}
+						style={{
+							top: b.top,
+							height: b.height,
+							left: `${b.leftPct}%`,
+							width: `${b.widthPct}%`,
+							backgroundColor: color,
+							opacity: b.opacity,
+							zIndex: b.zIndex,
+						}}
+						onClick={() => onSelectEvent?.(event)}
+						type="button"
+					>
+						<div className={styles.eventBlockTitle}>{b.title}</div>
+						<div className={styles.eventBlockTime}>
+							{formatAmPmFromMinutes(b.startMin)} -{" "}
+							{formatAmPmFromMinutes(b.endMin)}
+						</div>
+					</button>
+				);
+			})}
 		</div>
 	);
 }

src/pages/timetable/TimetablePage.tsx

@@ -1,11 +1,21 @@
 import { useEffect, useState, useMemo } from "react";
+import { Views } from "react-big-calendar";
 import { useTimetable } from "../../contexts/TimetableContext";
-import type { Semester } from "../../util/types";
+import { useEvents } from "../../contexts/EventContext";
+import { useFilter } from "../../contexts/FilterContext";
+import type {
+	CalendarEvent,
+	Event,
+	FetchWeekEventArgs,
+	Semester,
+} from "../../util/types";
 import { AddClassPanel } from "./AddClassPanel";
 import {
 	flattenCoursesToBlocks,
 	config,
 } from "../../util/weekly_timetable/layout";
+import calendarEventMapper from "../../util/Calendar/calendarEventMapper";
+import { formatDateToYYYYMMDD } from "../../util/Calendar/dateFormatter";
 import { TimetableGrid } from "./TimetableGrid";
 import styles from "@styles/Timetable.module.css";
 import { SlArrowLeft } from "react-icons/sl";
@@ -38,12 +48,15 @@ export default function TimetablePage() {
 		// updateCustomCourse,
 		deleteCourse,
 	} = useTimetable();
+	const { weekViewData, fetchWeekEvents } = useEvents();
+	const { globalCategory, globalOrg, globalStatus } = useFilter();
 
 	const [year, setYear] = useState<number>(now.getFullYear());
 	const [semester, setSemester] = useState<Semester>("SPRING");
 	const [tableName, setTableName] = useState<string>("");
 	const [isAddClassPanelOpen, setIsAddClassPanelOpen] = useState(false);
 	const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+	const [isTimetableSimplified, setIsTimetableSimplified] = useState(false);
 
 	useEffect(() => {
 		loadTimetable(year, semester);
@@ -72,12 +85,87 @@ export default function TimetablePage() {
 		[visibleCourses],
 	);
 
+	useEffect(() => {
+		const today = new Date();
+		const from = new Date(today);
+		from.setDate(from.getDate() - from.getDay());
+
+		const to = new Date(from);
+		to.setDate(to.getDate() + 6);
+
+		const params: FetchWeekEventArgs = {
+			from: formatDateToYYYYMMDD(from),
+			to: formatDateToYYYYMMDD(to),
+		};
+
+		if (globalCategory) params.eventTypeId = globalCategory.map((g) => g.id);
+		if (globalOrg) params.orgId = globalOrg.map((g) => g.id);
+		if (globalStatus) params.statusId = globalStatus.map((g) => g.id);
+
+		void fetchWeekEvents(params);
+	}, [fetchWeekEvents, globalCategory, globalOrg, globalStatus]);
+
+	const weekCalendarEvents = useMemo(() => {
+		const weekStart = new Date();
+		weekStart.setHours(0, 0, 0, 0);
+		weekStart.setDate(weekStart.getDate() - weekStart.getDay());
+
+		const weekEnd = new Date(weekStart);
+		weekEnd.setDate(weekEnd.getDate() + 6);
+		weekEnd.setHours(23, 59, 59, 999);
+
+		const rawWeekEvents = Object.values(weekViewData?.byDate || {}).flatMap(
+			(bucket) => bucket.events,
+		);
+		const uniqueWeekEvents = Array.from(
+			new Map(rawWeekEvents.map((event: Event) => [event.id, event])).values(),
+		);
+
+		return uniqueWeekEvents
+			.map((event) => calendarEventMapper(event, Views.WEEK) as CalendarEvent)
+			.filter(
+				(calendarEvent) =>
+					calendarEvent.start >= weekStart && calendarEvent.end <= weekEnd,
+			)
+			.map((calendarEvent) => {
+				const sameMinute =
+					Math.floor(calendarEvent.start.getTime() / 60000) ===
+					Math.floor(calendarEvent.end.getTime() / 60000);
+				const startDay = new Date(
+					calendarEvent.start.getFullYear(),
+					calendarEvent.start.getMonth(),
+					calendarEvent.start.getDate(),
+				);
+				const endDay = new Date(
+					calendarEvent.end.getFullYear(),
+					calendarEvent.end.getMonth(),
+					calendarEvent.end.getDate(),
+				);
+				const differentDate =
+					startDay.getFullYear() !== endDay.getFullYear() ||
+					startDay.getMonth() !== endDay.getMonth() ||
+					startDay.getDate() !== endDay.getDate();
+
+				return {
+					...calendarEvent,
+					allDay: Boolean(calendarEvent.allDay) || differentDate || sameMinute,
+				};
+			})
+			.filter(
+				(calendarEvent) =>
+					calendarEvent.resource.isPeriodEvent === false &&
+					calendarEvent.allDay === false,
+			);
+	}, [weekViewData]);
+
 	if (isLoading) return <div>로딩 중...</div>;
 
 	return (
 		<div
 			className={`${styles.page} ${
-				isAddClassPanelOpen ? styles.AddClassPanelOpen : styles.AddClassPanelClosed
+				isAddClassPanelOpen
+					? styles.AddClassPanelOpen
+					: styles.AddClassPanelClosed
 			} ${isSidebarOpen ? styles.sidebarOpen : styles.sidebarClosed}`}
 		>
 			<TimeTableSidebar
@@ -104,6 +192,8 @@ export default function TimetablePage() {
 					SEMESTER_LABEL={semesters}
 					onSemesterChange={setSemester}
 					onYearChange={setYear}
+					isToggleOn={isTimetableSimplified}
+					onToggleChange={setIsTimetableSimplified}
 					years={years}
 				/>
 
@@ -123,6 +213,8 @@ export default function TimetablePage() {
 						config={config}
 						toBlocks={flattenCoursesToBlocks}
 						onRemoveBlock={deleteCourse}
+						isSimplified={isTimetableSimplified}
+						weekEvents={isTimetableSimplified ? weekCalendarEvents : []}
 					/>
 				)}
 			</main>

src/router/AppRoutes.tsx

@@ -22,9 +22,7 @@ export default function AppRoutes() {
 			<Route path="/auth/complete" element={<CompleteSignUp />} />
 
 			{/* OAuth Redirect */}
-			<Route path="/login/callback/kakao" element={<LoginHandler />} />
-			<Route path="/login/callback/google" element={<LoginHandler />} />
-			<Route path="/login/callback/naver" element={<LoginHandler />} />
+			<Route path="/auth/callback" element={<LoginHandler />} />
 
 			{/* Main Feature page */}
 			<Route path="/main" element={<CalendarView />} />