From 1aeeffbfd9615f1faabe3bedc7af17227613136b Mon Sep 17 00:00:00 2001
From: say-young516 <sychoi0516@naver.com>
Date: Fri, 22 Jul 2022 20:23:24 +0900
Subject: [PATCH] =?UTF-8?q?[=20feat=20]=20=EA=B2=80=EC=83=89=ED=96=88?=
 =?UTF-8?q?=EC=9D=84=20=EB=95=8C=20=EA=B2=80=EC=83=89=EC=96=B4=20=EB=82=98?=
 =?UTF-8?q?=EC=98=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/common/Header.tsx                 |  8 +++++++
 components/viewProduct/ViewProductBanner.tsx | 23 +++++++++++++++++---
 pages/viewProduct.tsx                        |  2 +-
 3 files changed, 29 insertions(+), 4 deletions(-)

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/ViewProductBanner.tsx b/components/viewProduct/ViewProductBanner.tsx
index 6f04fca..557fee3 100644
--- a/components/viewProduct/ViewProductBanner.tsx
+++ b/components/viewProduct/ViewProductBanner.tsx
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import Router from 'next/router';
 import router, { useRouter } from 'next/router';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { useRecoilState } from 'recoil';
 import { getBannerViewProduct } from '../../core/api/viewProduct';
 import {
@@ -226,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;
@@ -238,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;
 
@@ -255,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;
@@ -268,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/pages/viewProduct.tsx b/pages/viewProduct.tsx
index 25ed65a..7e27a05 100644
--- a/pages/viewProduct.tsx
+++ b/pages/viewProduct.tsx
@@ -202,7 +202,7 @@ const StEmptyView = styled.section`
 export const getServerSideProps: GetServerSideProps = async (context) => {
   // useGetBa
 
-  console.log(context.query);
+  console.log('쿼링', context.query);
   if (context.query.filter === 'true') {
     const { search, type, month, priceCd, playHowCd, toySiteCd } =
       context.query as ViewProductProps;