From efbff8f5b951be03108282248cdd86ae8cd0037e Mon Sep 17 00:00:00 2001
From: Yumin Cho <dbals081216@gmail.com>
Date: Thu, 30 May 2024 20:22:21 +0900
Subject: [PATCH] feat: save recent agendas filter option

---
 packages/web/src/components/atoms/ToggleSwitch.tsx  |  3 +++
 .../src/components/molecules/AgendaCard/Group.tsx   |  8 +++++++-
 .../web/src/components/organisms/AgendaSection.tsx  | 13 +++++++++++--
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/web/src/components/atoms/ToggleSwitch.tsx b/packages/web/src/components/atoms/ToggleSwitch.tsx
index f86338d1..8319cdde 100644
--- a/packages/web/src/components/atoms/ToggleSwitch.tsx
+++ b/packages/web/src/components/atoms/ToggleSwitch.tsx
@@ -2,11 +2,13 @@ import { bg, colors, h, margin, round, row, text, w } from "@biseo/web/styles";
 import React from "react";
 
 interface ToggleSwitchProps {
+  defaultValue: boolean;
   handleToggle: () => void;
   label: string;
 }
 
 export const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
+  defaultValue,
   handleToggle,
   label,
 }) => (
@@ -15,6 +17,7 @@ export const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
       type="checkbox"
       id="toggle"
       onChange={handleToggle}
+      checked={defaultValue}
       css={[
         w(0),
         h(0),
diff --git a/packages/web/src/components/molecules/AgendaCard/Group.tsx b/packages/web/src/components/molecules/AgendaCard/Group.tsx
index 609c2192..5ddfe8d2 100644
--- a/packages/web/src/components/molecules/AgendaCard/Group.tsx
+++ b/packages/web/src/components/molecules/AgendaCard/Group.tsx
@@ -21,11 +21,13 @@ import { EmptyAgendaCard } from "./EmptyAgendaCard";
 
 interface Props extends PropsWithChildren {
   agendaStatus: AgendaStatus;
+  recentOnly?: boolean;
   handleRecentOnly?: () => void;
 }
 
 export const Group: React.FC<Props> = ({
   agendaStatus,
+  recentOnly = false,
   handleRecentOnly = () => {},
   children = null,
 }) => (
@@ -50,7 +52,11 @@ export const Group: React.FC<Props> = ({
         </div>
       </div>
       {agendaStatus === "terminated" && (
-        <ToggleSwitch label="최근 투표만" handleToggle={handleRecentOnly} />
+        <ToggleSwitch
+          label="최근 투표만"
+          defaultValue={recentOnly}
+          handleToggle={handleRecentOnly}
+        />
       )}
     </div>
     {Children.count(children) ? (
diff --git a/packages/web/src/components/organisms/AgendaSection.tsx b/packages/web/src/components/organisms/AgendaSection.tsx
index 60a46aad..f32db6e9 100644
--- a/packages/web/src/components/organisms/AgendaSection.tsx
+++ b/packages/web/src/components/organisms/AgendaSection.tsx
@@ -37,7 +37,9 @@ const gridLayout = css`
 `;
 
 export const AgendaSection: React.FC = () => {
-  const [showRecentAgendasOnly, setShowRecentAgendasOnly] = useState(false);
+  const [showRecentAgendasOnly, setShowRecentAgendasOnly] = useState(
+    localStorage.getItem("showRecentAgendasOnly") === "true",
+  );
 
   const { preparingAgendas, ongoingAgendas, terminatedAgendas } = useAgenda(
     state => ({
@@ -88,7 +90,14 @@ export const AgendaSection: React.FC = () => {
         </AgendaCard.Group>
         <AgendaCard.Group
           agendaStatus="terminated"
-          handleRecentOnly={() => setShowRecentAgendasOnly(curr => !curr)}
+          recentOnly={showRecentAgendasOnly}
+          handleRecentOnly={() => {
+            setShowRecentAgendasOnly(curr => !curr);
+            localStorage.setItem(
+              "showRecentAgendasOnly",
+              String(!showRecentAgendasOnly),
+            );
+          }}
         >
           {getAgendaCards("terminated")}
         </AgendaCard.Group>