From 411f1b7a7dd74138fd42473b2a7a2680bbfccacb Mon Sep 17 00:00:00 2001 From: kanghaeun Date: Thu, 25 Jul 2024 01:52:37 +0900 Subject: [PATCH 1/5] =?UTF-8?q?chore:=20private=20=EC=9D=BC=EC=A0=95=20?= =?UTF-8?q?=EC=A1=B0=ED=9A=8C=20=EC=9A=94=EC=B2=AD=20url=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FE/error/src/components/EconoCalendar.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/FE/error/src/components/EconoCalendar.jsx b/FE/error/src/components/EconoCalendar.jsx index 8e52858..df17a79 100644 --- a/FE/error/src/components/EconoCalendar.jsx +++ b/FE/error/src/components/EconoCalendar.jsx @@ -24,7 +24,7 @@ const EconoCalendar = ({ isLoggedIn, setIsLoggedIn }) => { setIsLoggedIn(isUserLoggedIn); const uri = isUserLoggedIn - ? "/api/calendar/all" + ? "/api/calendar/all/private" : "/api/calendar/all/public"; axios From 6a9af5b52d83aeb63dffd9fca75da2be7ab244c6 Mon Sep 17 00:00:00 2001 From: kanghaeun Date: Thu, 25 Jul 2024 02:31:51 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=EC=B5=9C=EC=83=81=EC=9C=84?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EC=9D=BC?= =?UTF-8?q?=EC=A0=95=EC=A1=B0=ED=9A=8C=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?= =?UTF-8?q?=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FE/error/src/components/EconoCalendar.jsx | 33 +---------------------- FE/error/src/pages/MainPage.jsx | 33 +++++++++++++++++++++++ 2 files changed, 34 insertions(+), 32 deletions(-) diff --git a/FE/error/src/components/EconoCalendar.jsx b/FE/error/src/components/EconoCalendar.jsx index df17a79..8785e13 100644 --- a/FE/error/src/components/EconoCalendar.jsx +++ b/FE/error/src/components/EconoCalendar.jsx @@ -1,48 +1,17 @@ -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 [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/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: "#FFC0CB", - })); - setEvents(fetchedEvents); - }) - .catch((error) => { - console.error("Error fetching events:", error); - }); - }, []); const handleDelete = () => { toast("일정이 삭제되었습니다", { diff --git a/FE/error/src/pages/MainPage.jsx b/FE/error/src/pages/MainPage.jsx index 69da177..dd374e2 100644 --- a/FE/error/src/pages/MainPage.jsx +++ b/FE/error/src/pages/MainPage.jsx @@ -11,6 +11,39 @@ const MainPage = () => { const [filterIndividualLists, setFilterIndividualLists] = useState([]); const [filterGroupLists, setFilterGroupLists] = useState([]); const [isLoggedIn, setIsLoggedIn] = useState(false); + const [events, setEvents] = useState([]); + const [filteredEvents, setFilteredEvents] = useState([]); + const [activeFilters, setActiveFilters] = 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/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, + })); + setEvents(fetchedEvents); + }) + .catch((error) => { + console.error("Error fetching events:", error); + }); + }, []); + useEffect(() => { const token = localStorage.getItem("slackToken"); setIsLoggedIn(!!token); From a1dbfc3d64666ca69e216d56d2d36f536888b881 Mon Sep 17 00:00:00 2001 From: kanghaeun Date: Thu, 25 Jul 2024 02:40:33 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=ED=98=84=EC=9E=AC=20=ED=95=84?= =?UTF-8?q?=ED=84=B0=EB=A7=81=20=EB=90=9C=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20?= =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20=EC=A0=80=EC=9E=A5=20=EB=B0=8F=20=ED=98=84?= =?UTF-8?q?=EC=9E=AC=20=ED=99=9C=EC=84=B1=ED=99=94=EB=90=9C=20=ED=95=84?= =?UTF-8?q?=ED=84=B0=EB=93=A4=20=EC=B6=94=EC=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../individualFilter/IndividualFilter.jsx | 1 + FE/error/src/pages/MainPage.jsx | 28 +++++++++++++++++-- 2 files changed, 27 insertions(+), 2 deletions(-) diff --git a/FE/error/src/components/SideBar/individualFilter/IndividualFilter.jsx b/FE/error/src/components/SideBar/individualFilter/IndividualFilter.jsx index c31c60b..638d87f 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); diff --git a/FE/error/src/pages/MainPage.jsx b/FE/error/src/pages/MainPage.jsx index dd374e2..04b4724 100644 --- a/FE/error/src/pages/MainPage.jsx +++ b/FE/error/src/pages/MainPage.jsx @@ -12,8 +12,8 @@ const MainPage = () => { const [filterGroupLists, setFilterGroupLists] = useState([]); const [isLoggedIn, setIsLoggedIn] = useState(false); const [events, setEvents] = useState([]); - const [filteredEvents, setFilteredEvents] = useState([]); - const [activeFilters, setActiveFilters] = useState([]); + const [filteredEvents, setFilteredEvents] = useState([]); //현재 필터링된 이벤트 목록 저장 + const [activeFilters, setActiveFilters] = useState([]); //현재 활서화된 필터들을 추적 const [token, setToken] = useState(null); useEffect(() => { @@ -44,6 +44,29 @@ const MainPage = () => { }); }, []); + const handleFilterChange = (filterId, filterName, isChecked) => { + // 필터 감지하여 배열에 업데이트 + setActiveFilters((prevFilters) => { + if (isChecked) { + return [...prevFilters, { id: filterId, name: filterName }]; + } else { + return prevFilters.filter((filter) => filter.id !== filterId); + } + }); + + // filteredEvents 업데이트 + setFilteredEvents((prevFilteredEvents) => { + if (isChecked) { + const newEvents = events.filter((event) => event.filterId === filterId); + return [...prevFilteredEvents, ...newEvents]; + } else { + return prevFilteredEvents.filter( + (event) => event.filterId !== filterId + ); + } + }); + }; + useEffect(() => { const token = localStorage.getItem("slackToken"); setIsLoggedIn(!!token); @@ -101,6 +124,7 @@ const MainPage = () => { )} From b476587277c4cb4c3641946ddc538931da757844 Mon Sep 17 00:00:00 2001 From: kanghaeun Date: Thu, 25 Jul 2024 04:45:05 +0900 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=ED=95=84=ED=84=B0=EB=A7=81?= =?UTF-8?q?=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EC=9D=BC=EC=A0=95=20=EC=A1=B0?= =?UTF-8?q?=ED=9A=8C=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FE/error/src/components/EconoCalendar.jsx | 24 +++++--- .../individualFilter/IndividualFilter.jsx | 1 + FE/error/src/pages/MainPage.jsx | 61 ++++++++++++------- FE/error/src/utils/filterUtils/FilterList.jsx | 9 ++- .../src/utils/filterUtils/ScheduleToggle.jsx | 8 ++- 5 files changed, 66 insertions(+), 37 deletions(-) diff --git a/FE/error/src/components/EconoCalendar.jsx b/FE/error/src/components/EconoCalendar.jsx index 8785e13..afa7763 100644 --- a/FE/error/src/components/EconoCalendar.jsx +++ b/FE/error/src/components/EconoCalendar.jsx @@ -7,7 +7,13 @@ import interactionPlugin from "@fullcalendar/interaction"; import CreateModal from "./scheduleCreate/CreateModal"; import CheckCalendar from "./scheduleCheck/CheckCalendar"; -const EconoCalendar = ({ isLoggedIn, setIsLoggedIn }) => { +const EconoCalendar = ({ + isLoggedIn, + setIsLoggedIn, + setEvents, + events, + setToken, +}) => { const [selectID, setSelectID] = useState(""); const [checkModalIsOpen, setCheckModalIsOpen] = useState(false); const [createModalIsOpen, setCreateModalIsOpen] = useState(false); @@ -55,16 +61,16 @@ const EconoCalendar = ({ isLoggedIn, setIsLoggedIn }) => { localStorage.removeItem("slackToken"); setIsLoggedIn(false); setToken(null); - // } else { - // const newToken = "dummyToken" + Math.random().toString(36).substr(2, 9); // 임의의 토큰 생성 - // localStorage.setItem("slackToken", newToken); - // setToken(newToken); - // setIsLoggedIn(true); - // } - //TODO: 추후 아래 코드로 변경 } else { - window.location.href = "/login"; + const newToken = "dummyToken" + Math.random().toString(36).substr(2, 9); // 임의의 토큰 생성 + localStorage.setItem("slackToken", newToken); + setToken(newToken); + setIsLoggedIn(true); } + //TODO: 추후 아래 코드로 변경 + // } else { + // window.location.href = "/login"; + // } }; return ( diff --git a/FE/error/src/components/SideBar/individualFilter/IndividualFilter.jsx b/FE/error/src/components/SideBar/individualFilter/IndividualFilter.jsx index 638d87f..c32be69 100644 --- a/FE/error/src/components/SideBar/individualFilter/IndividualFilter.jsx +++ b/FE/error/src/components/SideBar/individualFilter/IndividualFilter.jsx @@ -70,6 +70,7 @@ const IndividualFilter = ({ )} diff --git a/FE/error/src/pages/MainPage.jsx b/FE/error/src/pages/MainPage.jsx index 04b4724..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"; @@ -12,10 +12,15 @@ const MainPage = () => { const [filterGroupLists, setFilterGroupLists] = useState([]); const [isLoggedIn, setIsLoggedIn] = useState(false); const [events, setEvents] = useState([]); - const [filteredEvents, setFilteredEvents] = useState([]); //현재 필터링된 이벤트 목록 저장 - const [activeFilters, setActiveFilters] = 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); @@ -36,34 +41,26 @@ const MainPage = () => { 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, filterName, isChecked) => { - // 필터 감지하여 배열에 업데이트 + const handleFilterChange = (filterId, isChecked) => { setActiveFilters((prevFilters) => { + const newFilters = new Set(prevFilters); if (isChecked) { - return [...prevFilters, { id: filterId, name: filterName }]; + newFilters.add(filterId); } else { - return prevFilters.filter((filter) => filter.id !== filterId); - } - }); - - // filteredEvents 업데이트 - setFilteredEvents((prevFilteredEvents) => { - if (isChecked) { - const newEvents = events.filter((event) => event.filterId === filterId); - return [...prevFilteredEvents, ...newEvents]; - } else { - return prevFilteredEvents.filter( - (event) => event.filterId !== filterId - ); + newFilters.delete(filterId); } + return newFilters; }); }; @@ -79,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); }); }, []); @@ -131,7 +138,13 @@ const MainPage = () => { - + ); @@ -139,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 ( From 025f3a70bdc995f62879668be15e9b661c4fe339 Mon Sep 17 00:00:00 2001 From: kanghaeun Date: Thu, 25 Jul 2024 04:47:06 +0900 Subject: [PATCH 5/5] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EC=8B=9C=20=EB=B0=B0=ED=8F=AC=EB=A7=81=ED=81=AC=EB=A1=9C=20?= =?UTF-8?q?=EC=9D=B4=EB=8F=99=ED=95=98=EA=B2=8C=EB=81=94=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FE/error/src/components/EconoCalendar.jsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/FE/error/src/components/EconoCalendar.jsx b/FE/error/src/components/EconoCalendar.jsx index afa7763..2320cac 100644 --- a/FE/error/src/components/EconoCalendar.jsx +++ b/FE/error/src/components/EconoCalendar.jsx @@ -61,16 +61,16 @@ const EconoCalendar = ({ localStorage.removeItem("slackToken"); setIsLoggedIn(false); setToken(null); + // } else { + // const newToken = "dummyToken" + Math.random().toString(36).substr(2, 9); // 임의의 토큰 생성 + // localStorage.setItem("slackToken", newToken); + // setToken(newToken); + // setIsLoggedIn(true); + // } + //TODO: 추후 아래 코드로 변경 } else { - const newToken = "dummyToken" + Math.random().toString(36).substr(2, 9); // 임의의 토큰 생성 - localStorage.setItem("slackToken", newToken); - setToken(newToken); - setIsLoggedIn(true); + window.location.href = "/login"; } - //TODO: 추후 아래 코드로 변경 - // } else { - // window.location.href = "/login"; - // } }; return (