Merge pull request #158 from JNU-econovation/feat/148/filtering-view

feat: 필터링 일정 조회

FE/error/src/components/EconoCalendar.jsx

@@ -1,48 +1,23 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import toast, { Toaster } from "react-hot-toast";
 import FullCalendar from "@fullcalendar/react";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import styled from "styled-components";
 import interactionPlugin from "@fullcalendar/interaction";
-import axios from "axios";
 import CreateModal from "./scheduleCreate/CreateModal";
 import CheckCalendar from "./scheduleCheck/CheckCalendar";
 
-const EconoCalendar = ({ isLoggedIn, setIsLoggedIn }) => {
-  const [events, setEvents] = useState([]);
+const EconoCalendar = ({
+  isLoggedIn,
+  setIsLoggedIn,
+  setEvents,
+  events,
+  setToken,
+}) => {
   const [selectID, setSelectID] = useState("");
   const [checkModalIsOpen, setCheckModalIsOpen] = useState(false);
   const [createModalIsOpen, setCreateModalIsOpen] = useState(false);
   const [selectedDate, setSelectedDate] = useState("");
-  const [token, setToken] = useState(null);
-
-  useEffect(() => {
-    const storedToken = localStorage.getItem("slackToken");
-    setToken(storedToken);
-
-    const isUserLoggedIn = !!storedToken;
-    setIsLoggedIn(isUserLoggedIn);
-
-    const uri = isUserLoggedIn
-      ? "/api/calendar/all"
-      : "/api/calendar/all/public";
-
-    axios
-      .get(uri, { headers: { Authorization: `Bearer ${storedToken}` } })
-      .then((res) => {
-        const fetchedEvents = res.data.data.map((event) => ({
-          title: event.eventName,
-          id: event.eventId,
-          start: event.eventStartDate.split("T")[0],
-          end: event.eventEndDate.split("T")[0],
-          color: "#FFC0CB",
-        }));
-        setEvents(fetchedEvents);
-      })
-      .catch((error) => {
-        console.error("Error fetching events:", error);
-      });
-  }, []);
 
   const handleDelete = () => {
     toast("일정이 삭제되었습니다", {

FE/error/src/components/SideBar/individualFilter/IndividualFilter.jsx

@@ -10,6 +10,7 @@ const IndividualFilter = ({
   filterLists,
   addNewFilter,
   updateDeleteFilter,
+  onFilterChange,
 }) => {
   const [individualFilterIsOpen, setindividualFilterIsOpen] = useState(false);
   const [filterListsIsOpen, setFilterListsIsOpen] = useState(true);
@@ -69,6 +70,7 @@ const IndividualFilter = ({
         <FilterList
           filterLists={filterLists}
           updateDeleteFilter={updateDeleteFilter}
+          onFilterChange={onFilterChange}
         />
       )}
     </>

FE/error/src/pages/MainPage.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import styled from "styled-components";
 import EconoCalendar from "../components/EconoCalendar";
 import ProfileBar from "../components/SideBar/ProfileBar";
@@ -11,6 +11,59 @@ const MainPage = () => {
   const [filterIndividualLists, setFilterIndividualLists] = useState([]);
   const [filterGroupLists, setFilterGroupLists] = useState([]);
   const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [events, setEvents] = useState([]);
+  const [activeFilters, setActiveFilters] = useState(new Set());
+  const [token, setToken] = useState(null);
+
+  // 필터링된 이벤트를 계산
+  const filteredEvents = useMemo(() => {
+    if (activeFilters.size === 0) return events;
+    return events.filter((event) => activeFilters.has(event.filterId));
+  }, [events, activeFilters]);
+
+  useEffect(() => {
+    const storedToken = localStorage.getItem("slackToken");
+    setToken(storedToken);
+
+    const isUserLoggedIn = !!storedToken;
+    setIsLoggedIn(isUserLoggedIn);
+
+    const uri = isUserLoggedIn
+      ? "/api/calendar/all/private"
+      : "/api/calendar/all/public";
+
+    axios
+      .get(uri, { headers: { Authorization: `Bearer ${storedToken}` } })
+      .then((res) => {
+        const fetchedEvents = res.data.data.map((event) => ({
+          title: event.eventName,
+          id: event.eventId,
+          start: event.eventStartDate.split("T")[0],
+          end: event.eventEndDate.split("T")[0],
+          color: event.filterColor,
+          filterId: event.filterId,
+        }));
+        setEvents(fetchedEvents);
+        // 모든 필터를 초기에 활성화
+        setActiveFilters(new Set(fetchedEvents.map((event) => event.filterId)));
+      })
+      .catch((error) => {
+        console.error("Error fetching events:", error);
+      });
+  }, []);
+
+  const handleFilterChange = (filterId, isChecked) => {
+    setActiveFilters((prevFilters) => {
+      const newFilters = new Set(prevFilters);
+      if (isChecked) {
+        newFilters.add(filterId);
+      } else {
+        newFilters.delete(filterId);
+      }
+      return newFilters;
+    });
+  };
+
   useEffect(() => {
     const token = localStorage.getItem("slackToken");
     setIsLoggedIn(!!token);
@@ -23,29 +76,39 @@ const MainPage = () => {
   const addNewGroupFilter = (newGroupFilter) => {
     setFilterGroupLists([...filterGroupLists, newGroupFilter]);
   };
+
   const updateDeleteFilter = (newFilter) => {
     setFilterIndividualLists(
       filterIndividualLists.filter((filter) => filter.filterId !== newFilter)
     );
+    // 삭제된 필터를 activeFilters에서도 제거
+    setActiveFilters((prevFilters) => {
+      const newFilters = new Set(prevFilters);
+      newFilters.delete(newFilter);
+      return newFilters;
+    });
   };
-  const storedToken = localStorage.getItem("slackToken");
 
   useEffect(() => {
+    const storedToken = localStorage.getItem("slackToken");
     axios
       .get("/api/filter", {
         headers: { Authorization: `Bearer ${storedToken}` },
       })
       .then((res) => {
-        console.log(res);
         const fetchedFilter = res.data.data.map((filter) => ({
           filterId: filter.filterId,
           filterName: filter.filterName,
           filterColor: filter.filterColor,
         }));
         setFilterIndividualLists(fetchedFilter);
+        // 모든 개인 필터를 초기에 활성화
+        setActiveFilters(
+          new Set(fetchedFilter.map((filter) => filter.filterId))
+        );
       })
       .catch((err) => {
-        console.log("Error fetching events:", err);
+        console.log("Error fetching filters:", err);
       });
   }, []);
 
@@ -68,20 +131,29 @@ const MainPage = () => {
                   <IndividualFilter
                     filterLists={filterIndividualLists}
                     addNewFilter={addNewIndividualFilter}
+                    onFilterChange={handleFilterChange}
                   />
                 </>
               )}
             </FilterFrame>
           </ScrollableContent>
         </SideBar>
-        <EconoCalendar isLoggedIn={isLoggedIn} setIsLoggedIn={setIsLoggedIn} />
+        <EconoCalendar
+          isLoggedIn={isLoggedIn}
+          setIsLoggedIn={setIsLoggedIn}
+          events={filteredEvents}
+          setEvents={setEvents}
+          setToken={setToken}
+        />
       </CalendarPage>
     </div>
   );
 };
 
 export default MainPage;
 
+// ... 나머지 styled-components 코드는 그대로 유지
+
 const SideBar = styled.div`
   width: 15.625rem;
   height: 98.1vh;

FE/error/src/utils/filterUtils/FilterList.jsx

@@ -3,13 +3,18 @@ import ScheduleToggle from "./ScheduleToggle";
 import FilterModify from "./FilterModify";
 import FilterDelete from "./FilterDelete";
 
-const FilterList = ({ filterLists, updateDeleteFilter }) => {
+const FilterList = ({ filterLists, updateDeleteFilter, onFilterChange }) => {
   return (
     <StyledFilterListFrame>
       {filterLists.map((filterList, index) => (
         <StyledScheduleType key={index}>
           <StyledTitle>
-            <ScheduleToggle color={filterList.filterColor} />
+            <ScheduleToggle
+              key={filterList.id}
+              color={filterList.filterColor}
+              id={filterList.filterId}
+              onToggle={onFilterChange}
+            />
             {filterList.filterName}
           </StyledTitle>
           <StyledDetail>

FE/error/src/utils/filterUtils/ScheduleToggle.jsx

@@ -1,11 +1,13 @@
 import { useState } from "react";
 import styled from "styled-components";
 
-const ScheduleToggle = ({ color }) => {
+const ScheduleToggle = ({ color, id, onToggle }) => {
   const [clicked, setClicked] = useState(true);
-
   const handleOnClick = () => {
-    setClicked(!clicked);
+    const newClickedState = !clicked;
+    setClicked(newClickedState);
+
+    onToggle(id, newClickedState);
   };
 
   return (