[ feat ] 검색했을 때 검색어 나옴

components/common/Header.tsx

@@ -3,19 +3,27 @@ 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>('');
 
   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 (

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,19 +226,24 @@ 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;
   flex-direction: column;
 
   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};
+  }
+`;

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;