diff --git a/components/common/Header.tsx b/components/common/Header.tsx
index 4c7a41f..f34afcb 100644
--- a/components/common/Header.tsx
+++ b/components/common/Header.tsx
@@ -3,6 +3,9 @@ import Link from 'next/link';
 import { IcNoriHeaderLogo, IcSearchIcon } from '../../public/assets/icons';
 import React, { useState } from 'react';
 import Router from 'next/router';
+import { ViewProductProps } from '../../types/viewProduct';
+import { filterCheckQuery } from '../../core/atom';
+import { useRecoilState } from 'recoil';
 
 export default function Header() {
   const [inputValue, setInputValue] = useState<string>('');
@@ -10,12 +13,17 @@ 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: { search: inputValue },
     });
+    setFilterCheckQuery({
+      search: inputValue,
+    });
   };
 
   return (
diff --git a/components/viewProduct/FilterDropdown.tsx b/components/viewProduct/FilterDropdown.tsx
index 228b63a..97f7dcb 100644
--- a/components/viewProduct/FilterDropdown.tsx
+++ b/components/viewProduct/FilterDropdown.tsx
@@ -2,25 +2,46 @@ import styled from '@emotion/styled';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import {
   checkedItemsState,
+  filterCheckQuery,
   filterTagState,
   toyKindState,
 } from '../../core/atom';
-import { FilterDropdownProps, FilterTagProps } from '../../types/viewProduct';
+import {
+  FilterDropdownProps,
+  FilterTagProps,
+  ViewProductProps,
+} from '../../types/viewProduct';
+import Router from 'next/router';
 
 export default function FilterDropdown(props: FilterDropdownProps) {
-  const {
-    categoryInfo,
-    isDrop,
-    isExcept,
-    categoryIdx,
-    checkedItem,
-    categoryKey,
-  } = props;
+  const { categoryInfo, isDrop, isExcept, categoryIdx, categoryKey } = props;
   const toyKindList = useRecoilValue<string[]>(toyKindState);
   const [checkedItems, setCheckedItems] =
     useRecoilState<Set<number>[]>(checkedItemsState);
   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,
@@ -47,15 +68,103 @@ export default function FilterDropdown(props: FilterDropdownProps) {
     } else {
       checkedItems[categoryIdx].add(elementIdx);
       setFilterTagList([...filterTagList, tag]);
-      console.log(filterTagList);
     }
-
+    handleQuery(categoryIdx, elementIdx, tagText);
     setCheckedItems({
       ...checkedItems,
       [categoryIdx]: checkedItems[categoryIdx],
     });
   };
-
+  const handleQuery = (
+    categoryIdx: number,
+    elementIdx: number,
+    tagText: string,
+  ) => {
+    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;
+    }
+  };
   return (
     <StDropdownWrapper
       isDrop={isDrop}
@@ -64,7 +173,7 @@ export default function FilterDropdown(props: FilterDropdownProps) {
         isDrop ? 'slide-fade-in-dropdown' : 'slide-fade-out-dropdown'
       }`}
     >
-      {categoryKey === '종류' && toyKindList.length !== 0
+      {categoryKey === '종류'
         ? toyKindList.map((tagText: string, elementIdx: number) => {
             return (
               <StLabel
@@ -211,27 +320,3 @@ const StDropdownWrapper = styled.div<{ isExcept: boolean; isDrop: boolean }>`
       ? 'slide-fade-in-dropdown-animation 0.2s ease-out'
       : 'slide-fade-out-dropdown-animation 0.2s ease-out'};
 `;
-// display `-객체의 노출여부/표현방식--`
-// ( justify-content / align-items)
-// ( flex-direction / flex-wrap / flex-flow ) → flex ~로 시작하는 것들
-// list-style
-// position `-위치/좌표--`
-// float
-// clear
-
-// width
-// height `-크기/여백--`
-// padding
-// margin
-
-// border
-// background `-윤곽/배경--`
-// color
-// font `-글자/정렬--`
-
-// text-decoration
-// text-align / vertical-align
-
-// white-space
-// other text
-// content `-내용--`
diff --git a/components/viewProduct/ProductFilter.tsx b/components/viewProduct/ProductFilter.tsx
index 8595677..6bd61a8 100644
--- a/components/viewProduct/ProductFilter.tsx
+++ b/components/viewProduct/ProductFilter.tsx
@@ -74,9 +74,7 @@ export default function ProductFilter() {
               categoryInfo={filterListData[idx]}
               categoryIdx={idx}
               isExcept={
-                idx == 3 || (idx == 0 && toyKindList.length !== 0)
-                  ? true
-                  : false
+                idx == 3 || (idx == 0 && toyKindList.length < 5) ? true : false
               }
               isDrop={visibility[idx]}
               checkedItem={checkedItems[idx]}
diff --git a/components/viewProduct/ToyPreview.tsx b/components/viewProduct/ToyPreview.tsx
index ad34a7c..8ecb3ff 100644
--- a/components/viewProduct/ToyPreview.tsx
+++ b/components/viewProduct/ToyPreview.tsx
@@ -26,12 +26,11 @@ export default function ToyPreview(props: ToyPreviewProps) {
   const handleToyMark = () => {
     setIsMark((prev) => !prev);
   };
+  let img = `https://nori-image.s3.ap-northeast-2.amazonaws.com/${src}`;
   return (
     <StToyWrapper onClick={handleToySite}>
       <StImgWrapper>
-        <StToyImg
-          src={`https://nori-image.s3.ap-northeast-2.amazonaws.com/${src}`}
-        />
+        <StToyImg src={img} />
         <StToyMarkWrapper onClick={handleToyMark}>
           <StToyMark />
           {isMark && <StFillToyMark />}
diff --git a/components/viewProduct/ViewProductBanner.tsx b/components/viewProduct/ViewProductBanner.tsx
index e2d3ba2..557fee3 100644
--- a/components/viewProduct/ViewProductBanner.tsx
+++ b/components/viewProduct/ViewProductBanner.tsx
@@ -1,8 +1,12 @@
 import styled from '@emotion/styled';
-import { useState } from 'react';
+import Router from 'next/router';
+import router, { useRouter } from 'next/router';
+import React, { useState } from 'react';
 import { useRecoilState } from 'recoil';
+import { getBannerViewProduct } from '../../core/api/viewProduct';
 import {
   checkedItemsState,
+  filterCheckQuery,
   filterTagState,
   toyKindState,
 } from '../../core/atom';
@@ -15,7 +19,7 @@ import {
   IcStudyProduct,
   IcPlayGroundProduct,
 } from '../../public/assets/icons';
-import { FilterTagProps } from '../../types/viewProduct';
+import { FilterTagProps, ViewProductProps } from '../../types/viewProduct';
 
 export default function ViewProductBanner() {
   //상품보기 뷰 배너 아이콘 요소 배열
@@ -43,6 +47,27 @@ export default function ViewProductBanner() {
     useRecoilState<Set<number>[]>(checkedItemsState);
   const [filterTagList, setFilterTagList] =
     useRecoilState<FilterTagProps[]>(filterTagState);
+  const [filterQuery, setFilterCheckQuery] =
+    useRecoilState<ViewProductProps>(filterCheckQuery);
+
+  const handleFilterQuery = (selectIdx: number, newQuery: ViewProductProps) => {
+    if (newQuery) setFilterCheckQuery(newQuery);
+
+    Router.push({
+      pathname: '/viewProduct',
+      query: {
+        filter: true,
+        categoryId: selectIdx,
+        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 handleProductIcon = (selectIdx: number) => {
     if (selectedIcon == selectIdx) return;
     setSeletedIcon(selectIdx);
@@ -54,30 +79,133 @@ export default function ViewProductBanner() {
       new Set<number>(),
     ]);
     setFilterTagList([]);
+    let newQuery: ViewProductProps;
     switch (selectIdx) {
       case 0:
-        setToyKindList([]);
+        setToyKindList([
+          '아기체육관',
+          '모빌',
+          '바운서',
+          '쏘서',
+          '점퍼루',
+          '위고',
+          '보행기',
+          '걸음마 보조기',
+          '러닝홈',
+          '러닝테이블',
+          '기타 학습완구',
+          '미끄럼틀',
+          '에어바운스',
+          '트램펄린',
+          '어린이 자동차',
+          '흔들말',
+          '그네',
+          '소꿉놀이',
+          '역할놀이',
+          '기타',
+        ]);
+        newQuery = {
+          search: '',
+          type: '',
+          month: '',
+          priceCd: '',
+          playHowCd: '',
+          toySiteCd: '',
+        };
+        handleFilterQuery(0, newQuery);
         break;
       case 1:
         setToyKindList(['아기체육관', '모빌', '바운서']);
+        // newQuery = {
+        //   search: '',
+        //   type: '아기체육관 모빌 바운서',
+        //   month: '',
+        //   priceCd: '',
+        //   playHowCd: '',
+        //   toySiteCd: '',
+        // };
+        newQuery = {
+          search: '',
+          type: '',
+          month: '',
+          priceCd: '',
+          playHowCd: '',
+          toySiteCd: '',
+        };
+        handleFilterQuery(1, newQuery);
         break;
       case 2:
         setToyKindList(['쏘서', '점퍼루', '위고', '보행기', '걸음마 보조기']);
+        // newQuery = {
+        //   search: '',
+        //   type: '쏘서 점퍼루 위고 보행기 걸음마 보조기',
+        //   month: '',
+        //   priceCd: '',
+        //   playHowCd: '',
+        //   toySiteCd: '',
+        // };
+        newQuery = {
+          search: '',
+          type: '',
+          month: '',
+          priceCd: '',
+          playHowCd: '',
+          toySiteCd: '',
+        };
+        handleFilterQuery(2, newQuery);
         break;
       case 3:
+        newQuery = {
+          search: '',
+          type: '',
+          month: '',
+          priceCd: '',
+          playHowCd: '',
+          toySiteCd: '',
+        };
         setToyKindList(['러닝홈', '러닝테이블', '기타 학습 완구']);
+        handleFilterQuery(3, newQuery);
         break;
       case 4:
+        newQuery = {
+          search: '',
+          type: '',
+          month: '',
+          priceCd: '',
+          playHowCd: '',
+          toySiteCd: '',
+        };
         setToyKindList(['미끄럼틀', '에어바운스', '트램펄린']);
+        handleFilterQuery(4, newQuery);
         break;
       case 5:
+        newQuery = {
+          search: '',
+          type: '',
+          month: '',
+          priceCd: '',
+          playHowCd: '',
+          toySiteCd: '',
+        };
         setToyKindList(['어린이 자동차', '흔들말', '그네']);
+        handleFilterQuery(5, newQuery);
         break;
       case 6:
+        newQuery = {
+          search: '',
+          type: '',
+          month: '',
+          priceCd: '',
+          playHowCd: '',
+          toySiteCd: '',
+        };
         setToyKindList(['소꿉 놀이', '역할 놀이']);
+        handleFilterQuery(6, newQuery);
         break;
     }
   };
+  // 패패
+
   return (
     <StProductBannerWrapper>
       <h1>상품보기</h1>
@@ -98,11 +226,16 @@ export default function ViewProductBanner() {
           );
         })}
       </StCategoryNav>
+      {filterQuery.search && (
+        <StSearchContent>
+          <span>{`“ ${filterQuery.search} ”`}</span> 에 대한 검색 결과에요
+        </StSearchContent>
+      )}
     </StProductBannerWrapper>
   );
 }
 
-const StProductBannerWrapper = styled.div`
+const StProductBannerWrapper = styled.div<{ isSearch: boolean }>`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -110,7 +243,7 @@ const StProductBannerWrapper = styled.div`
 
   width: 117.6rem;
   margin: 7.1rem 0 0.4rem 0;
-  padding: 0 3.6rem 5.4rem 3.6rem;
+  // padding: 0 3.6rem 5.4rem 3.6rem;
 
   border-bottom: 1px solid #d9d9d9;
 
@@ -127,6 +260,7 @@ const StCategoryNav = styled.nav`
 
   width: 110.4rem;
   height: 14.4rem;
+  margin: 0 3.6rem 5.4rem 3.6rem;
 `;
 const StProductItem = styled.div<{ isClicked: number; selectedIcon: number }>`
   display: flex;
@@ -140,3 +274,14 @@ const StProductItem = styled.div<{ isClicked: number; selectedIcon: number }>`
 
   cursor: pointer;
 `;
+const StSearchContent = styled.div`
+  align-self: flex-start;
+
+  height: 2.5rem;
+  margin: 0 0 1.2rem 0;
+  color: ${({ theme }) => theme.colors.gray007};
+  ${({ theme }) => theme.fonts.t3_19_medium_130};
+  & > span {
+    color: ${({ theme }) => theme.colors.gray009};
+  }
+`;
diff --git a/core/api/viewProduct.ts b/core/api/viewProduct.ts
index 5cabe9c..fb8c31e 100644
--- a/core/api/viewProduct.ts
+++ b/core/api/viewProduct.ts
@@ -2,47 +2,100 @@ import useSWR from 'swr';
 import { ViewProductProps } from '../../types/viewProduct';
 import { baseInstance } from '../axios';
 
-export const useGetViewProduct = (viewProductData: ViewProductProps) => {
-  const { data, error } = useSWR(
-    ['/toy/list', viewProductData],
-    baseInstance.get,
-    {
-      errorRetryCount: 3,
-    },
+// export const useGetViewProduct = (
+//   currentPage: number,
+//   viewProductData: string,
+// ) => {
+//   const { data, error } = useSWR(
+//     [`/toy/list?page=${currentPage}&`, viewProductData],
+//     baseInstance.get,
+//     {
+//       errorRetryCount: 3,
+//     },
+//   );
+//   return {
+//     toyFilterList: data,
+//     isLoading: !error && !data,
+//     isError: error,
+//   };
+// };
+// export const useGetBannerViewProduct = (
+//   category: number,
+//   currentPage: number,
+//   viewProductData: string,
+// ) => {
+//   const { data, error } = useSWR(
+//     [`/toy/list/${category}?page=${currentPage}&`, viewProductData],
+//     baseInstance.get,
+//     {
+//       errorRetryCount: 3,
+//     },
+//   );
+//   return {
+//     toyFilterList: data,
+//     isLoading: !error && !data,
+//     isError: error,
+//   };
+// };
+export const getViewProductFilter = (filterQuery: ViewProductProps) => {
+  console.log(filterQuery);
+  return baseInstance.get(
+    encodeURI(
+      `/toy/list?search=${filterQuery.search}&type=${filterQuery.type}&month=${filterQuery.month}&priceCd=${filterQuery.priceCd}&playHowCd=${filterQuery.playHowCd}&toySiteCd=${filterQuery.toySiteCd}`,
+    ),
   );
-  return {
-    toyFilterList: data,
-    isLoading: !error && !data,
-    isError: error,
-  };
 };
-export const useGetBannerViewProduct = (
+export const getBannerViewProductFilter = (
   category: number,
-  viewProductData: ViewProductProps,
+  filterQuery: ViewProductProps,
 ) => {
-  const { data, error } = useSWR(
-    ['/toy/list', category, viewProductData],
-    baseInstance.get,
-    {
-      errorRetryCount: 3,
-    },
+  console.log(filterQuery);
+  return baseInstance.get(
+    encodeURI(
+      `/toy/list/${category}?search=${filterQuery.search}&type=${filterQuery.type}&month=${filterQuery.month}&priceCd=${filterQuery.priceCd}&playHowCd=${filterQuery.playHowCd}&toySiteCd=${filterQuery.toySiteCd}`,
+    ),
   );
-  return {
-    toyFilterList: data,
-    isLoading: !error && !data,
-    isError: error,
-  };
 };
-export const getBannerViewProduct = (params: { category: number }) => {
-  const { data, error } = useSWR(['/toy/list', params], baseInstance.get, {
-    errorRetryCount: 3,
-  });
-  return {
-    toyFilterList: data,
-    isLoading: !error && !data,
-    isError: error,
-  };
+// export const getBannerViewProduct = (category: number, currentPage: number) => {
+//   return baseInstance.get(`/toy/list/${category}?page=${currentPage}`);
+// };
+// export const getViewProduct = (currentPage: number) => {
+//   return baseInstance.get(`/toy/list/?page=${currentPage}`);
+// };
+// export const useGetViewProduct = (viewProductData: string) => {
+//   const { data, error } = useSWR(
+//     [`/toy/list?`, viewProductData],
+//     baseInstance.get,
+//     {
+//       errorRetryCount: 3,
+//     },
+//   );
+//   return {
+//     toyFilterList: data,
+//     isLoading: !error && !data,
+//     isError: error,
+//   };
+// };
+// export const useGetBannerViewProduct = (
+//   category: number,
+//   viewProductData: string,
+// ) => {
+//   const { data, error } = useSWR(
+//     [`/toy/list/${category}?`, viewProductData],
+//     baseInstance.get,
+//     {
+//       errorRetryCount: 3,
+//     },
+//   );
+//   return {
+//     toyFilterList: data,
+//     isLoading: !error && !data,
+//     isError: error,
+//   };
+// };
+export const getBannerViewProduct = (category: number) => {
+  return baseInstance.get(`/toy/list/${category}?`);
 };
-export const getViewProduct = (currentPage: number) => {
-  return baseInstance.get(`/toy/list?page=${currentPage}`);
+export const getViewProduct = () => {
+  return baseInstance.get(`/toy/list`);
 };
diff --git a/core/atom.ts b/core/atom.ts
index 62d5990..bdfa332 100644
--- a/core/atom.ts
+++ b/core/atom.ts
@@ -2,7 +2,7 @@ import { atom } from 'recoil';
 import { recoilPersist } from 'recoil-persist'; //페이지가 변경되더라도 상태관리를 유지
 import { PostCommunityBody, IsChangeCommunity } from '../types/community';
 import { PostLoginBody } from '../types/user';
-import { FilterTagProps } from '../types/viewProduct';
+import { FilterTagProps, ViewProductProps } from '../types/viewProduct';
 
 const { persistAtom } = recoilPersist();
 
@@ -109,5 +109,37 @@ export const checkedItemsState = atom<Set<number>[]>({
 
 export const toyKindState = atom<string[]>({
   key: 'toyKindState',
-  default: [],
+  default: [
+    '아기체육관',
+    '모빌',
+    '바운서',
+    '쏘서',
+    '점퍼루',
+    '위고',
+    '보행기',
+    '걸음마 보조기',
+    '러닝홈',
+    '러닝테이블',
+    '기타 학습완구',
+    '미끄럼틀',
+    '에어바운스',
+    '트램펄린',
+    '어린이 자동차',
+    '흔들말',
+    '그네',
+    '소꿉놀이',
+    '역할놀이',
+    '기타',
+  ],
+});
+export const filterCheckQuery = atom<ViewProductProps>({
+  key: 'filterCheckQuery',
+  default: {
+    search: '',
+    type: '',
+    month: '',
+    priceCd: '',
+    playHowCd: '',
+    toySiteCd: '',
+  },
 });
diff --git a/core/axios.ts b/core/axios.ts
index 117ac55..5c48544 100644
--- a/core/axios.ts
+++ b/core/axios.ts
@@ -11,6 +11,7 @@ const baseInstance = axios.create({
 // // client side base instance (default)
 // // 로컬스토리지 접근이 가능하고 token이 필요한 api 호출에서 사용
 baseInstance.interceptors.request.use((config) => {
+  console.log(config);
   const headers = {
     ...config.headers,
     accessToken: LocalStorage.getItem('accessToken'),
@@ -22,8 +23,6 @@ baseInstance.interceptors.request.use((config) => {
 
 baseInstance.interceptors.response.use(
   async function (res) {
-    console.log('응답');
-    console.log(res);
     return res;
   },
   async function (error: { config: any; response: { status: any } }) {
diff --git a/pages/viewProduct.tsx b/pages/viewProduct.tsx
index 7d93e9e..7e27a05 100644
--- a/pages/viewProduct.tsx
+++ b/pages/viewProduct.tsx
@@ -17,26 +17,42 @@ import {
 import { PriceFilter, PageNavigation } from '../components/common';
 import { ToyData } from '../types/toy';
 import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
-import { useRecoilValue } from 'recoil';
-import { FilterTagProps } from '../types/viewProduct';
-import { filterTagState } from '../core/atom';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import {
+  FilterTagProps,
+  ViewProductProps,
+  ViewProductServerSide,
+} from '../types/viewProduct';
+import {
+  checkedItemsState,
+  filterCheckQuery,
+  filterTagState,
+} from '../core/atom';
 import { IcGrayEmpty } from '../public/assets/icons';
 import {
   getBannerViewProduct,
+  getViewProductFilter,
   getViewProduct,
-  useGetBannerViewProduct,
+  getBannerViewProductFilter,
 } from '../core/api/viewProduct';
-
+import { Router, useRouter } from 'next/router';
+import { GetViewProduct } from '../types/viewProduct';
 const limit = 40;
 
 export default function viewProduct({
   filterData,
   result,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
-  console.log(filterData, result);
+  const router = useRouter();
+
+  console.log(result);
   const [priceDesc, setPriceDesc] = useState<boolean>(true);
   const [toyList, setToyList] = useState<ToyData[]>([]);
   const [currentPage, setCurrentPage] = useState<number>(1);
+  const [initial, setInitial] = useState<boolean>(true);
+  const filterQuery = useRecoilValue<ViewProductProps>(filterCheckQuery);
+  const [checkedItems, setCheckedItems] =
+    useRecoilState<Set<number>[]>(checkedItemsState);
 
   const handleClickPrice = (clickPrice: string) => {
     clickPrice === 'price-desc' ? setPriceDesc(true) : setPriceDesc(false);
@@ -45,24 +61,49 @@ export default function viewProduct({
   const handleCurrentPage = (nextPage: number) => {
     setCurrentPage(nextPage);
   };
-
+  // console.log('체크', Object.keys(checkedItems));
+  // console.log('결과조회', filterData);
   const filterTagList = useRecoilValue<FilterTagProps[]>(filterTagState);
 
-  // let { productList, isLoading, isError } = priceDesc
-  //   ? (useGetCollectionProduct('price-desc') as GetCollectionProduct)
-  //   : (useGetCollectionProduct('price-asc') as GetCollectionProduct);
+  // let { toyFilterList } =
+  //   router.query.iconId && Number(router.query.iconId) !== 0
+  //     ? getBannerViewProductFilter(
+  //         Number(router.query.iconId),
+  //         `search=${filterQuery.search}&type=${filterQuery.type}&month=${filterQuery.month}&priceCd=${filterQuery.priceCd}&playHowCd=${filterQuery.playHowCd}&toySiteCd=${filterQuery.toySiteCd}`,
+  //       )
+  //     : getViewProductFilter(
+  //         `search=${filterQuery.search}&type=${filterQuery.type}&month=${filterQuery.month}&priceCd=${filterQuery.priceCd}&playHowCd=${filterQuery.playHowCd}&toySiteCd=${filterQuery.toySiteCd}`,
+  //       );
 
   useEffect(() => {
     if (result) {
-      const filterData = result.filter(
+      filterData = result.filter(
         (_: any, idx: number) =>
           (currentPage - 1) * 40 <= idx && idx < currentPage * 40,
       );
+      console.log('여기', filterData);
       setToyList(filterData);
       window.scrollTo(0, 0);
+      setInitial(false);
+      console.log('초기렌더링');
     }
   }, [result, currentPage]);
-
+  // useEffect(() => {
+  //   if (toyFilterList && !initial) {
+  //     // const filterData = toyFilterList.data.filter(
+  //     //   (_: any, idx: number) =>
+  //     //     (currentPage - 1) * 40 <= idx && idx < currentPage * 40,
+  //     // );
+  //     // setToyList(filterData);
+  //     // window.scrollTo(0, 0);
+  //     console.log(
+  //       '이것은?',
+  //       Boolean(router.query.iconId && Number(router.query.iconId) !== 0),
+  //     );
+  //     console.log('토이리스트', toyFilterList.data.data.result);
+  //   }
+  // }, [toyFilterList]);
+  console.log('목록', toyList);
   return (
     <StViewProductWrapper>
       {!filterData ? (
@@ -157,13 +198,68 @@ const StEmptyView = styled.section`
 
   margin: 0 23.8rem;
 `;
+
 export const getServerSideProps: GetServerSideProps = async (context) => {
-  const res = await getViewProduct(0);
+  // useGetBa
 
-  return {
-    props: {
-      filterData: res.data.data.filterData,
-      result: res.data.data.result,
-    },
-  };
+  console.log('쿼링', context.query);
+  if (context.query.filter === 'true') {
+    const { search, type, month, priceCd, playHowCd, toySiteCd } =
+      context.query as ViewProductProps;
+
+    if (context.query.categoryId && Number(context.query.categoryId) !== 0) {
+      const res = await getBannerViewProductFilter(
+        Number(context.query.categoryId),
+        {
+          search,
+          type,
+          month,
+          priceCd,
+          playHowCd,
+          toySiteCd,
+        },
+      );
+      console.log(res.data);
+      return {
+        props: {
+          filterData: res.data.data.filterData,
+          result: res.data.data.result,
+        },
+      };
+    }
+    const res = await getViewProductFilter({
+      search,
+      type,
+      month,
+      priceCd,
+      playHowCd,
+      toySiteCd,
+    });
+    console.log(res);
+    return {
+      props: {
+        filterData: res.data.data.filterData,
+        result: res.data.data.result,
+      },
+    };
+  }
+  if (context.query.iconId && Number(context.query.iconId) !== 0) {
+    const res = await getBannerViewProduct(Number(context.query.iconId));
+    console.log(res.data.data.result);
+    return {
+      props: {
+        filterData: res.data.data.filterData,
+        result: res.data.data.result,
+      },
+    };
+  } else {
+    const res = await getViewProduct();
+
+    return {
+      props: {
+        filterData: res.data.data.filterData,
+        result: res.data.data.result,
+      },
+    };
+  }
 };
diff --git a/types/viewProduct.ts b/types/viewProduct.ts
index 60a580d..0a92c4c 100644
--- a/types/viewProduct.ts
+++ b/types/viewProduct.ts
@@ -16,9 +16,40 @@ export interface FilterTagProps {
 }
 export interface ViewProductProps {
   search?: string;
-  type: string;
+  type?: string;
   month?: string;
-  price?: string;
-  playHow?: string;
-  store?: string;
+  priceCd?: string;
+  playHowCd?: string;
+  toySiteCd?: string;
+}
+export interface FilterData {
+  type: string[];
+  month: string[];
+  price: string[];
+  playHow: string[];
+  store: string[];
+}
+export interface ToyFilterData {
+  image: string;
+  title: string;
+  siteName: string;
+  price: string;
+  month: number;
+  siteUrl: string;
+}
+export interface GetViewProduct {
+  result: {
+    data: { data: { filterData: FilterData; toyFilterList: ToyFilterData[] } };
+  };
+  isLoading: boolean;
+  isError: string;
+}
+
+export interface ViewProductServerSide {
+  search: string;
+  type: string;
+  month: string;
+  price: string;
+  playHow: string;
+  store: string;
 }