[ ViewProduct ] 코드 리팩토링

components/common/Header.tsx

@@ -2,18 +2,18 @@ import styled from '@emotion/styled';
 import Link from 'next/link';
 import { IcNoriHeaderLogo, IcSearchIcon } from '../../public/assets/icons';
 import React, { useState } from 'react';
-import Router from 'next/router';
+import Router, { useRouter } from 'next/router';
 import { FilterTagProps, ViewProductProps } from '../../types/viewProduct';
 import {
   checkedItemsState,
-  filterCheckQuery,
   filterTagState,
   selectIconState,
   toyKindState,
 } from '../../core/atom';
 import { useRecoilState } from 'recoil';
 
 export default function Header() {
+  const router = useRouter();
   const [inputValue, setInputValue] = useState<string>('');
   const [toyKindList, setToyKindList] = useRecoilState<string[]>(toyKindState);
   const [selectedIcon, setSeletedIcon] =
@@ -25,31 +25,18 @@ export default function Header() {
   const handleInputValue = (e: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(e.target.value);
   };
-  const [filterQuery, setFilterCheckQuery] =
-    useRecoilState<ViewProductProps>(filterCheckQuery);
 
   const handleClick = () => {
-    Router.push({
-      pathname: '/viewProduct',
-      query: {
-        filter: true,
-        search: inputValue,
-        type: '',
-        month: '',
-        priceCd: '',
-        playHowCd: '',
-        toySiteCd: '',
+    router.push(
+      {
+        pathname: '/viewProduct',
+        query: { filter: true, search: inputValue },
       },
-    });
+      undefined,
+      { shallow: true },
+    );
+
     setInputValue('');
-    setFilterCheckQuery({
-      search: inputValue,
-      type: '',
-      month: '',
-      priceCd: '',
-      playHowCd: '',
-      toySiteCd: '',
-    });
     setCheckedItems([
       new Set<number>(),
       new Set<number>(),
@@ -58,40 +45,32 @@ export default function Header() {
       new Set<number>(),
     ]);
     setFilterTagList([]);
-    setToyKindList([
-      '아기체육관',
-      '모빌',
-      '바운서',
-      '쏘서',
-      '점퍼루',
-      '위고',
-      '보행기',
-      '걸음마 보조기',
-      '러닝홈',
-      '러닝테이블',
-      '기타 학습완구',
-      '미끄럼틀',
-      '에어바운스',
-      '트램펄린',
-      '어린이 자동차',
-      '흔들말',
-      '그네',
-      '소꿉놀이',
-      '역할놀이',
-      '기타',
-    ]);
-    setSeletedIcon(0);
+    // setToyKindList([
+    //   '아기체육관',
+    //   '모빌',
+    //   '바운서',
+    //   '쏘서',
+    //   '점퍼루',
+    //   '위고',
+    //   '보행기',
+    //   '걸음마 보조기',
+    //   '러닝홈',
+    //   '러닝테이블',
+    //   '기타 학습완구',
+    //   '미끄럼틀',
+    //   '에어바운스',
+    //   '트램펄린',
+    //   '어린이 자동차',
+    //   '흔들말',
+    //   '그네',
+    //   '소꿉놀이',
+    //   '역할놀이',
+    //   '기타',
+    // ]);
+    // setSeletedIcon(0);
   };
   const handleClickExcept = () => {
     setInputValue('');
-    setFilterCheckQuery({
-      search: inputValue,
-      type: '',
-      month: '',
-      priceCd: '',
-      playHowCd: '',
-      toySiteCd: '',
-    });
     setCheckedItems([
       new Set<number>(),
       new Set<number>(),

components/viewProduct/FilterDropdown.tsx

@@ -1,8 +1,10 @@
 import styled from '@emotion/styled';
+import { useRouter } from 'next/router';
+import { useState } from 'react';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import {
   checkedItemsState,
-  filterCheckQuery,
+  currentQueryState,
   filterTagState,
   toyKindState,
 } from '../../core/atom';
@@ -11,37 +13,25 @@ import {
   FilterTagProps,
   ViewProductProps,
 } from '../../types/viewProduct';
-import Router from 'next/router';
-
+import { chQuery } from '../../utils/check';
+export const viewProductName: string[] = [
+  'type',
+  'month',
+  'priceCd',
+  'playHowCd',
+  'toySiteCd',
+];
 export default function FilterDropdown(props: FilterDropdownProps) {
+  const router = useRouter();
   const { categoryInfo, isDrop, isExcept, categoryIdx, categoryKey } = props;
   const toyKindList = useRecoilValue<string[]>(toyKindState);
   const [checkedItems, setCheckedItems] =
     useRecoilState<Set<number>[]>(checkedItemsState);
+  // const [currentQuery, setQuery] =
+  //   useRecoilState<ViewProductProps>(currentQueryState);
   const [filterTagList, setFilterTagList] =
     useRecoilState<FilterTagProps[]>(filterTagState);
 
-  const [filterQuery, setFilterCheckQuery] =
-    useRecoilState<ViewProductProps>(filterCheckQuery);
-
-  const handleFilterQuery = (newQuery: ViewProductProps) => {
-    setFilterCheckQuery(newQuery);
-
-    Router.push({
-      pathname: '/viewProduct',
-      query: {
-        filter: true,
-        search: newQuery.search,
-        type: newQuery.type,
-        month: newQuery.month,
-        priceCd: newQuery.priceCd,
-        playHowCd: newQuery.playHowCd,
-        toySiteCd: newQuery.toySiteCd,
-      },
-    });
-    // if doesn't work then use window.location.href
-  };
-
   const handleCheckedItems = (
     categoryIdx: number,
     elementIdx: number,
@@ -60,107 +50,50 @@ export default function FilterDropdown(props: FilterDropdownProps) {
           item.categoryIdx === categoryIdx && item.elementIdx === elementIdx
         );
       });
-
       let copyFilterTagList = [...filterTagList];
       copyFilterTagList.splice(deleteidx, 1);
       setFilterTagList(copyFilterTagList);
-      console.log(filterTagList);
     } else {
       checkedItems[categoryIdx].add(elementIdx);
       setFilterTagList([...filterTagList, tag]);
     }
-    handleQuery(categoryIdx);
     setCheckedItems({
       ...checkedItems,
       [categoryIdx]: checkedItems[categoryIdx],
     });
+    handleQuery(categoryIdx);
   };
-  const handleQuery = (categoryIdx: number) => {
+  function handleQuery(categoryIdx: number) {
     let newQuery: ViewProductProps;
-    let newStr: string;
-    switch (categoryIdx) {
-      case 0:
-        newStr = '';
-        checkedItems[0].forEach(function (item, index) {
-          newStr += `${toyKindList[index]} `;
-        });
-        newQuery = {
-          search: filterQuery.search,
-          type: newStr,
-          month: filterQuery.month,
-          priceCd: filterQuery.priceCd,
-          playHowCd: filterQuery.playHowCd,
-          toySiteCd: filterQuery.toySiteCd,
-        };
-        handleFilterQuery(newQuery);
-        console.log('str', newStr);
-        break;
-      case 1:
-        newStr = '';
-        checkedItems[1].forEach(function (item, index) {
-          newStr += `${item + 1}`;
-        });
-        newQuery = {
-          search: filterQuery.search,
-          type: filterQuery.type,
-          month: newStr,
-          priceCd: filterQuery.priceCd,
-          playHowCd: filterQuery.playHowCd,
-          toySiteCd: filterQuery.toySiteCd,
-        };
-        handleFilterQuery(newQuery);
-        console.log('str', newStr);
-        break;
-      case 2:
-        newStr = '';
-        checkedItems[2].forEach(function (item, index) {
-          newStr += `${item + 1}`;
-        });
-        newQuery = {
-          search: filterQuery.search,
-          type: filterQuery.type,
-          month: filterQuery.month,
-          priceCd: newStr,
-          playHowCd: filterQuery.playHowCd,
-          toySiteCd: filterQuery.toySiteCd,
-        };
-        handleFilterQuery(newQuery);
-        console.log('str', newStr);
-        break;
-      case 3:
-        newStr = '';
-        checkedItems[3].forEach(function (item, index) {
-          newStr += `${item + 1}`;
-        });
-        newQuery = {
-          search: filterQuery.search,
-          type: filterQuery.type,
-          month: filterQuery.month,
-          priceCd: filterQuery.priceCd,
-          playHowCd: newStr,
-          toySiteCd: filterQuery.toySiteCd,
-        };
-        handleFilterQuery(newQuery);
-        console.log('str', newStr);
-        break;
-      case 4:
-        newStr = '';
-        checkedItems[4].forEach(function (item, index) {
-          newStr += `${item + 1}`;
-        });
-        newQuery = {
-          search: filterQuery.search,
-          type: filterQuery.type,
-          month: filterQuery.month,
-          priceCd: filterQuery.priceCd,
-          playHowCd: filterQuery.playHowCd,
-          toySiteCd: newStr,
-        };
-        handleFilterQuery(newQuery);
-        console.log('str', newStr);
-        break;
+    let newStr: string = '';
+    if (categoryIdx === 0) {
+      checkedItems[0].forEach(function (_, index) {
+        newStr += `${toyKindList[index]} `;
+      });
+    } else {
+      checkedItems[categoryIdx].forEach(function (item) {
+        newStr += `${item + 1}`;
+      });
     }
-  };
+    newQuery = {
+      ...router.query,
+      [viewProductName[categoryIdx]]: newStr,
+      filter: 'true',
+    };
+    // setQuery(newQuery);
+    // 추후 window.history.state.url 를 이용해서 제대로 동작하도록
+    router.push(
+      {
+        pathname: '/viewProduct',
+        query: { ...newQuery },
+      },
+      undefined,
+      { shallow: true },
+    );
+
+    console.log(`헤헤 ${JSON.stringify(router.query)}`);
+  }
+
   return (
     <StDropdownWrapper
       isDrop={isDrop}