From 3daf2176bf692a35837e15294b98b2483c4ffff1 Mon Sep 17 00:00:00 2001
From: Ubinquitous <ubinquitous1@gmail.com>
Date: Sun, 2 Jul 2023 23:16:38 +0900
Subject: [PATCH 1/3] =?UTF-8?q?refactor(recoil):=20cateogry=20recoil=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/forum/layouts/Categories.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/page/forum/layouts/Categories.tsx b/src/page/forum/layouts/Categories.tsx
index 40d4bc6f..68d58321 100644
--- a/src/page/forum/layouts/Categories.tsx
+++ b/src/page/forum/layouts/Categories.tsx
@@ -1,8 +1,10 @@
 import Row from "@/components/Flex/Row";
+import { categoriesStore } from "@/store/categories.store";
 import color from "@/styles/color";
 import { font } from "@/styles/font";
 import forum from "@/utils/constants/forum.constant";
 import React from "react";
+import { useRecoilState } from "recoil";
 import styled, { css } from "styled-components";
 
 const categories = [
@@ -25,7 +27,7 @@ const categories = [
 ];
 
 const Categories = () => {
-  const [checked, setChecked] = React.useState(forum.category.all.type);
+  const [checked, setChecked] = useRecoilState(categoriesStore);
 
   const onCheckCategory = (e: React.ChangeEvent<HTMLInputElement>) => {
     setChecked(e.target.id);

From 16db6a0042130f4410e7c76a169c8cc71ad18a7d Mon Sep 17 00:00:00 2001
From: Ubinquitous <ubinquitous1@gmail.com>
Date: Sun, 2 Jul 2023 23:17:02 +0900
Subject: [PATCH 2/3] =?UTF-8?q?refactor(filter):=20forum=20filter=20recoil?=
 =?UTF-8?q?=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/forum/layouts/ForumFilter.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/page/forum/layouts/ForumFilter.tsx b/src/page/forum/layouts/ForumFilter.tsx
index 40881b75..e95f5016 100644
--- a/src/page/forum/layouts/ForumFilter.tsx
+++ b/src/page/forum/layouts/ForumFilter.tsx
@@ -1,9 +1,11 @@
 import Row from "@/components/Flex/Row";
+import { forumFilterStore } from "@/store/forumType.store";
 import color from "@/styles/color";
 import { font } from "@/styles/font";
 import forum from "@/utils/constants/forum.constant";
 import React from "react";
-import styled, { css } from "styled-components";
+import { useRecoilState } from "recoil";
+import styled, { css, keyframes } from "styled-components";
 
 const filters = [
   {
@@ -17,7 +19,7 @@ const filters = [
 ];
 
 const ForumFilter = () => {
-  const [checked, setChecked] = React.useState(forum.student.type);
+  const [checked, setChecked] = useRecoilState(forumFilterStore);
 
   const onCheckFilter = (e: React.ChangeEvent<HTMLInputElement>) => {
     setChecked(e.target.id);
@@ -46,6 +48,12 @@ const ForumRadio = styled.input`
   display: none;
 `;
 
+const selected = keyframes`
+  to {
+    ${font.H2};
+  }
+`;
+
 const ForumLabel = styled.label<{ checked: boolean }>`
   ${({ checked }) =>
     checked
@@ -60,6 +68,12 @@ const ForumLabel = styled.label<{ checked: boolean }>`
   &:after {
     content: "게시판";
   }
+
+  &:hover {
+    animation-fill-mode: forwards;
+    animation-duration: 0.1s;
+    animation-name: ${selected};
+  }
 `;
 
 export default ForumFilter;

From add01843f6dd7adc73380d986d27d30401ce6b4a Mon Sep 17 00:00:00 2001
From: Ubinquitous <ubinquitous1@gmail.com>
Date: Sun, 2 Jul 2023 23:17:20 +0900
Subject: [PATCH 3/3] =?UTF-8?q?feat(recoil):=20state=20recoil=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/categories.store.ts | 7 +++++++
 src/store/forumType.store.ts  | 7 +++++++
 2 files changed, 14 insertions(+)
 create mode 100644 src/store/categories.store.ts
 create mode 100644 src/store/forumType.store.ts

diff --git a/src/store/categories.store.ts b/src/store/categories.store.ts
new file mode 100644
index 00000000..1d533cb2
--- /dev/null
+++ b/src/store/categories.store.ts
@@ -0,0 +1,7 @@
+import forum from "@/utils/constants/forum.constant";
+import { atom } from "recoil";
+
+export const categoriesStore = atom<string>({
+  key: "categoriesStore",
+  default: forum.category.all.type,
+});
diff --git a/src/store/forumType.store.ts b/src/store/forumType.store.ts
new file mode 100644
index 00000000..25bfad3c
--- /dev/null
+++ b/src/store/forumType.store.ts
@@ -0,0 +1,7 @@
+import forum from "@/utils/constants/forum.constant";
+import { atom } from "recoil";
+
+export const forumFilterStore = atom<string>({
+  key: "forumFilterStore",
+  default: forum.free.type,
+});