게시판 state 리코일로 변경

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);

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;

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,
+});

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,
+});