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) => { setChecked(e.target.id); 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) => { 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; 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({ + 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({ + key: "forumFilterStore", + default: forum.free.type, +});