[ refactor ] seperate filter tag value with custom hook

TeamPiickle · Feb 24, 2023 · cfed6dc · cfed6dc
1 parent 756d3d5
commit cfed6dc
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 31 deletions.
diff --git a/src/@components/CardCollectionPage/FilterModal/@hooks/useFilterTags.ts b/src/@components/CardCollectionPage/FilterModal/@hooks/useFilterTags.ts
@@ -0,0 +1,32 @@
+import { useEffect } from "react";
+import { useRecoilState } from "recoil";
+
+import { filterTagsState } from "../../../../core/atom/slider";
+
+export default function useFilterTags() {
+  const [filterTags, setFilterTags] = useRecoilState(filterTagsState);
+
+  useEffect(() => {
+    if (!filterTags.isActive) setFilterTags({ tags: new Set(), intimacy: [0], isActive: false });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filterTags.isActive]);
+
+  // 태그를 눌렀을 때 함수
+  const toggleTag = (_tag: string) => {
+    if (_tag === "19금") return;
+
+    setFilterTags((prevFilterTags) => {
+      const tempCheckedTags = new Set(filterTags.tags);
+      tempCheckedTags.has(_tag) ? tempCheckedTags.delete(_tag) : tempCheckedTags.add(_tag);
+      return { ...prevFilterTags, tags: tempCheckedTags };
+    });
+  };
+
+  const handleChangeIntimacyValue = (values: number[]) => {
+    setFilterTags((prevFilterTags) => {
+      return { ...prevFilterTags, intimacy: values };
+    });
+  };
+
+  return { filterTags, toggleTag, handleChangeIntimacyValue };
+}
diff --git a/src/@components/CardCollectionPage/FilterModal/IntimacySlider/index.tsx b/src/@components/CardCollectionPage/FilterModal/IntimacySlider/index.tsx
@@ -1,9 +1,9 @@
 import { Range } from "react-range";
 
+import useFilterTags from "../@hooks/useFilterTags";
 import St from "./style";
 interface IntimacySliderProps {
   price: number[];
-  onChange: (values: number[]) => void;
 }
 
 const rangeOption = {
@@ -13,7 +13,9 @@ const rangeOption = {
 };
 
 export default function IntimacySlider(props: IntimacySliderProps) {
-  const { price, onChange } = props;
+  const { price } = props;
+
+  const { handleChangeIntimacyValue } = useFilterTags();
 
   return (
     <St.IntimacySlider>
@@ -22,7 +24,7 @@ export default function IntimacySlider(props: IntimacySliderProps) {
         min={rangeOption.min}
         max={rangeOption.max}
         values={price}
-        onChange={onChange}
+        onChange={handleChangeIntimacyValue}
         renderTrack={({ props, children }) => (
           <St.RangeTrack {...props} min={rangeOption.min} max={rangeOption.max} price={price}>
             {children}

diff --git a/src/@components/CardCollectionPage/FilterModal/index.tsx b/src/@components/CardCollectionPage/FilterModal/index.tsx
@@ -1,10 +1,9 @@
-import React, { useEffect } from "react";
-import { useRecoilState } from "recoil";
+import React from "react";
 
-import { filterTagsState } from "../../../core/atom/slider";
 import { filterTagsInfo, intimacyTags } from "../../../core/cardCollection/filter";
 import { GTM_CLASS_NAME } from "../../../util/const/gtm";
 import Modal from "../../@common/Modal";
+import useFilterTags from "./@hooks/useFilterTags";
 import IntimacySlider from "./IntimacySlider";
 import St from "./style";
 
@@ -16,23 +15,7 @@ interface FilterModalProps {
 export default function FilterModal(props: FilterModalProps) {
   const { closeHandler, fetchCardListsWithFilter } = props;
 
-  const [filterTags, setFilterTags] = useRecoilState(filterTagsState);
-
-  useEffect(() => {
-    if (!filterTags.isActive) setFilterTags({ tags: new Set(), intimacy: [0], isActive: false });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filterTags.isActive]);
-
-  // 태그를 눌렀을 때 함수
-  const toggleTag = (_tag: string) => {
-    if (_tag === "19금") return;
-
-    setFilterTags((prevFilterTags) => {
-      const tempCheckedTags = new Set(filterTags.tags);
-      tempCheckedTags.has(_tag) ? tempCheckedTags.delete(_tag) : tempCheckedTags.add(_tag);
-      return { ...prevFilterTags, tags: tempCheckedTags };
-    });
-  };
+  const { filterTags, toggleTag } = useFilterTags();
 
   // 추천 시작하기를 눌렀을 때, 태그 정보들과 친밀도 정보를 담아주고 창닫기
   const submitFilter = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
@@ -64,14 +47,7 @@ export default function FilterModal(props: FilterModalProps) {
 
         <St.FilterIntimacyWrapper>
           <St.Title>친밀도</St.Title>
-          <IntimacySlider
-            price={filterTags.intimacy}
-            onChange={(values: number[]) => {
-              setFilterTags((prevFilterTags) => {
-                return { ...prevFilterTags, intimacy: values };
-              });
-            }}
-          />
+          <IntimacySlider price={filterTags.intimacy} />
           <St.FilterIntimacyTagsWrapper>
             {intimacyTags.map((tag, index) => (
               <St.FilterIntimacyTag isactive={index === filterTags.intimacy[0]} key={index}>