Merge pull request #61 from wafflestudio/seoyeon

Seoyeon

Author: haram831

public/assets/bottom_calendar.svg

@@ -3,22 +3,17 @@ import React, {
 	type ReactNode,
 	useCallback,
 	useContext,
-	useEffect,
 	useState,
 } from "react";
 import {
-	getCategoryGroups,
 	getDayEvents,
 	getEventDetail,
 	getEventSearch,
 	getMonthEvents,
-	getOrganizations,
 } from "@api/event";
 import { formatDateToYYYYMMDD } from "@calendarUtil/dateFormatter";
 import { getMonthRange } from "@calendarUtil/getMonthRange";
 import type {
-	Category,
-	CategoryGroupWithCategories,
 	DayViewParams,
 	Event,
 	EventDetail,
@@ -39,14 +34,10 @@ interface EventContextType {
 	setDayDate: React.Dispatch<React.SetStateAction<Date>>;
 	searchResults: SearchResult | null;
 
-	categoryGroups: CategoryGroupWithCategories[];
-	organizations: Category[];
-
 	isLoadingMonth: boolean;
 	isLoadingWeek: boolean;
 	isLoadingDay: boolean;
 	isLoadingSearch: boolean;
-	isLoadingMeta: boolean;
 	isLoadingDetail: boolean;
 
 	calendarError: string | null;
@@ -61,7 +52,6 @@ interface EventContextType {
 	clearSearch: () => void;
 
 	fetchEventById: (id: number) => Promise<EventDetail | null>;
-	refreshMetadata: () => Promise<void>;
 }
 const EventContext = createContext<EventContextType | undefined>(undefined);
 
@@ -78,44 +68,16 @@ export const EventProvider: React.FC<{ children: ReactNode }> = ({
 	const [dayViewEvents, setDayViewEvents] = useState<Event[]>([]);
 	const [searchResults, setSearchResults] = useState<SearchResult | null>(null);
 
-	const [categoryGroups, setCategoryGroups] = useState<
-		CategoryGroupWithCategories[]
-	>([]);
-	const [organizations, setOrganizations] = useState<Category[]>([]);
-
 	const [isLoadingMonth, setIsLoadingMonth] = useState(false);
 	const [isLoadingWeek, setIsLoadingWeek] = useState(false);
 	const [isLoadingDay, setIsLoadingDay] = useState(false);
 	const [isLoadingSearch, setIsLoadingSearch] = useState(false);
 	const [isLoadingDetail, setIsLoadingDetail] = useState(false);
-	const [isLoadingMeta, setIsLoadingMeta] = useState(false);
 
 	const [calendarError, setCalendarError] = useState<string | null>(null);
 	const [detailError, setDetailError] = useState<string | null>(null);
 	const [searchError, setSearchError] = useState<string | null>(null);
 
-	// Fetch category & organizations (metadata)
-	const refreshMetadata = useCallback(async () => {
-		setIsLoadingMeta(true);
-		try {
-			const [groupsData, orgsData] = await Promise.all([
-				getCategoryGroups(),
-				getOrganizations(),
-			]);
-			setCategoryGroups(groupsData);
-			setOrganizations(orgsData);
-		} catch (err) {
-			console.error("Failed to load metadata", err);
-			setCalendarError("Failed to load categories.");
-		} finally {
-			setIsLoadingMeta(false);
-		}
-	}, []);
-
-	// metadata initial load
-	useEffect(() => {
-		refreshMetadata();
-	}, [refreshMetadata]);
 
 	/* ACTIONS */
 	const fetchMonthEvents = useCallback(
@@ -260,14 +222,11 @@ export const EventProvider: React.FC<{ children: ReactNode }> = ({
 		setDayDate,
 
 		searchResults,
-		categoryGroups,
-		organizations,
 
 		isLoadingMonth,
 		isLoadingWeek,
 		isLoadingDay,
 		isLoadingSearch,
-		isLoadingMeta,
 		isLoadingDetail,
 
 		calendarError,
@@ -281,7 +240,6 @@ export const EventProvider: React.FC<{ children: ReactNode }> = ({
 		searchEvents,
 		clearSearch,
 		fetchEventById,
-		refreshMetadata,
 	};
 
 	return (

public/assets/bottom_profile.svg

@@ -3,19 +3,32 @@ import {
 	type Dispatch,
 	type ReactNode,
 	type SetStateAction,
+	useCallback,
 	useContext,
+	useEffect,
 	useState,
 } from "react";
-import type { Category } from "@types";
+import { getCategoryGroups, getOrganizations } from "@api/event";
+import type { Category, CategoryGroupWithCategories } from "@types";
 
 interface FilterContextType {
+	filterSheetShowing: boolean;
+	setFilterSheetShowing: (value: boolean) => void;
+
+	categoryGroups: CategoryGroupWithCategories[];
+	organizations: Category[];
+	refreshMetadata: () => Promise<void>;
+	isLoadingMeta: boolean;
+
 	globalStatus: Category[];
 	globalOrg: Category[];
 	globalCategory: Category[];
 
 	setGlobalStatus: Dispatch<SetStateAction<Category[]>>;
 	setGlobalOrg: Dispatch<SetStateAction<Category[]>>;
 	setGlobalCategory: Dispatch<SetStateAction<Category[]>>;
+
+	filterError: string | null;
 }
 
 const FilterContext = createContext<FilterContextType | undefined>(undefined);
@@ -25,19 +38,68 @@ export const FilterContextProvider = ({
 }: {
 	children: ReactNode;
 }) => {
-	const [globalStatus, setGlobalStatus] = useState<Category[]>([]);
+	const [categoryGroups, setCategoryGroups] = useState<
+		CategoryGroupWithCategories[]
+	>([]);
+	// 모집중
+	const isApplying: Category = 
+		categoryGroups.find((g) => g.group.id===1)?.categories.find(c => c.id === 1) 
+		|| {
+          "id": 1,
+          "groupId": 1,
+          "name": "모집중",
+          "sortOrder": 1
+        };
+	const [organizations, setOrganizations] = useState<Category[]>([]);
+	const [isLoadingMeta, setIsLoadingMeta] = useState(false);
+
+	const [globalStatus, setGlobalStatus] = useState<Category[]>([isApplying]);
 	const [globalOrg, setGlobalOrg] = useState<Category[]>([]);
 	const [globalCategory, setGlobalCategory] = useState<Category[]>([]);
 
+	const [filterSheetShowing, setFilterSheetShowing] = useState<boolean>(false);
+	const [filterError, setFilterError] = useState<string | null>(null);
+
+	// Fetch category & organizations (metadata)
+	const refreshMetadata = useCallback(async () => {
+		setIsLoadingMeta(true);
+		try {
+			const [groupsData, orgsData] = await Promise.all([
+				getCategoryGroups(),
+				getOrganizations(),
+			]);
+			setCategoryGroups(groupsData);
+			setOrganizations(orgsData);
+		} catch (err) {
+			console.error("Failed to load metadata", err);
+			setFilterError("Failed to load categories.");
+		} finally {
+			setIsLoadingMeta(false);
+		}
+	}, []);
+
+	// metadata initial load
+	useEffect(() => {
+		refreshMetadata();
+	}, [refreshMetadata]);
+	
+
 	return (
 		<FilterContext.Provider
 			value={{
+				filterSheetShowing,
+				setFilterSheetShowing,
+				categoryGroups,
+				organizations,
+				isLoadingMeta,
+				refreshMetadata,
 				globalStatus,
 				globalOrg,
 				globalCategory,
 				setGlobalStatus,
 				setGlobalOrg,
 				setGlobalCategory,
+				filterError
 			}}
 		>
 			{children}

public/assets/bottom_reviews.svg

@@ -16,6 +16,7 @@ interface UserDataContextType {
 	excludedKeywords: { id: number; keyword: string }[];
 	eventMemos: Memo[];
 	refreshUserData: () => void;
+	// fetchInterestCategories: () => void;
 	addExcludedKeyword: (keyword: string) => Promise<void>;
 	deleteExcludedKeyword: (id: number) => Promise<void>;
 	toggleBookmark: (event: Event) => Promise<void>;
@@ -79,29 +80,32 @@ export const UserDataProvider = ({ children }: { children: ReactNode }) => {
 		}
 	}, [isAuthenticated, fetchAll]);
 
-	// Optimistic UI Update for Bookmarking
-	const toggleBookmark = async (event: Event) => {
-		const isBookmarked = bookmarkedEvents.some((b) => b.id === event.id);
-
-		// 1. Optimistic Update
-		if (isBookmarked) {
-			setBookmarkedEvents((prev) => prev.filter((b) => b.id !== event.id));
-		} else {
-			setBookmarkedEvents((prev) => [...prev, event]);
+	// get interestCategories & update
+	/*		
+	const fetchInterestCategories = async () => {
+		try {
+			const newInterestCategories = await userService.getInterestCategories();
+			setInterestCategories(newInterestCategories);
+		} catch (e) {
+			console.error("error in fetching interest categories", e);
 		}
+	}
+		*/
 
-		// 2. API Call
+	const toggleBookmark = async (event: Event) => {
+		const isBookmarked = bookmarkedEvents.some((b) => b.id === event.id);
 		try {
 			if (isBookmarked) {
 				await userService.removeBookmark(event.id);
 			} else {
 				await userService.addBookmark(event.id);
 			}
+
+			const newBookmarks = await userService.getBookmarks(1);
+			setBookmarkedEvents(newBookmarks);
+
 		} catch (error) {
-			// Revert on failure
-			fetchAll();
 			console.error(error);
-			alert("Failed to update bookmark");
 		}
 	};
 
@@ -185,6 +189,7 @@ export const UserDataProvider = ({ children }: { children: ReactNode }) => {
 				interestCategories,
 				eventMemos,
 				refreshUserData: fetchAll,
+				// fetchInterestCategories,
 				toggleBookmark,
 				getMemoByTag,
 				addMemo,

public/assets/bottom_timetable.svg

@@ -17,6 +17,8 @@ import { useEvents } from "@contexts/EventContext";
 import { useFilter } from "@contexts/FilterContext";
 import { formatDateToYYYYMMDD } from "@calendarUtil/dateFormatter";
 import { useUserData } from "@/contexts/UserDataContext";
+import BottomNav from "@/widgets/BottomNav";
+import { FilterSheet } from "@/widgets/FilterSheet/FilterSheet";
 
 const CalendarView = () => {
 	// EventContext
@@ -73,8 +75,7 @@ const CalendarView = () => {
 			const paramMonth: FetchMonthEventArgs = {
 				start: currentDate,
 			};
-			if (globalCategory)
-				paramMonth.eventTypeId = globalCategory.map((g) => g.id);
+			if (globalCategory) paramMonth.eventTypeId = globalCategory.map((g) => g.id);
 			if (globalOrg) paramMonth.orgId = globalOrg.map((g) => g.id);
 			if (globalStatus) paramMonth.statusId = globalStatus.map((g) => g.id);
 
@@ -184,9 +185,7 @@ const CalendarView = () => {
 
 	return (
 		<div className={styles.container}>
-			<div className={styles.sidebarContainer}>
-				<Sidebar />
-			</div>
+			<Sidebar />
 			<div className={styles.calendarContainer}>
 				<div className={styles.calendarWrapper}>
 					<MyCalendar
@@ -212,6 +211,8 @@ const CalendarView = () => {
 					</div>
 				)}
 			</div>
+			<FilterSheet />
+			<BottomNav />
 		</div>
 	);
 };