diff --git a/FE/error/src/components/EconoCalendar.jsx b/FE/error/src/components/EconoCalendar.jsx
index 8e52858..2320cac 100644
--- a/FE/error/src/components/EconoCalendar.jsx
+++ b/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("일정이 삭제되었습니다", {
diff --git a/FE/error/src/components/SideBar/individualFilter/IndividualFilter.jsx b/FE/error/src/components/SideBar/individualFilter/IndividualFilter.jsx
index c31c60b..c32be69 100644
--- a/FE/error/src/components/SideBar/individualFilter/IndividualFilter.jsx
+++ b/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 = ({
)}
diff --git a/FE/error/src/pages/MainPage.jsx b/FE/error/src/pages/MainPage.jsx
index 69da177..7102b19 100644
--- a/FE/error/src/pages/MainPage.jsx
+++ b/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,13 +131,20 @@ const MainPage = () => {
)}
-
+
);
@@ -82,6 +152,8 @@ const MainPage = () => {
export default MainPage;
+// ... 나머지 styled-components 코드는 그대로 유지
+
const SideBar = styled.div`
width: 15.625rem;
height: 98.1vh;
diff --git a/FE/error/src/utils/filterUtils/FilterList.jsx b/FE/error/src/utils/filterUtils/FilterList.jsx
index 33b72f4..c17782a 100644
--- a/FE/error/src/utils/filterUtils/FilterList.jsx
+++ b/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 (
{filterLists.map((filterList, index) => (
-
+
{filterList.filterName}
diff --git a/FE/error/src/utils/filterUtils/ScheduleToggle.jsx b/FE/error/src/utils/filterUtils/ScheduleToggle.jsx
index fe7127c..3e4fa3a 100644
--- a/FE/error/src/utils/filterUtils/ScheduleToggle.jsx
+++ b/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 (