[Feat] 탐색 페이지 검색바 구현

src/assets/svg/IcSearchGray.tsx

@@ -0,0 +1,13 @@
+import type { SVGProps } from 'react';
+
+const SvgIcSearchGray = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="#96A0B1"
+      fillRule="evenodd"
+      d="M4.149 11.04a6.891 6.891 0 1 1 12.226 4.363.75.75 0 0 1 .257.168l3 3a.75.75 0 0 1-1.061 1.06l-3-3a.75.75 0 0 1-.168-.256A6.891 6.891 0 0 1 4.149 11.04M11.04 5.65a5.391 5.391 0 1 0 0 10.783 5.391 5.391 0 0 0 0-10.783"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgIcSearchGray;

src/assets/svg/IcXCircleGray.tsx

@@ -0,0 +1,9 @@
+import type { SVGProps } from 'react';
+
+const SvgIcXCircleGray = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" {...props}>
+    <rect width={24} height={24} fill="#CFD3DE" rx={12} />
+    <path stroke="#fff" strokeLinecap="round" strokeWidth={2} d="m8 16 8-8M16 16 8 8" />
+  </svg>
+);
+export default SvgIcXCircleGray;

src/assets/svg/index.ts

@@ -1,2 +1,4 @@
 export { default as IcBack } from './IcBack'
-export { default as IcClose } from './IcClose'
+export { default as IcClose } from './IcClose'
+export { default as IcSearchGray } from './IcSearchGray'
+export { default as IcXCircleGray } from './IcXCircleGray'

src/components/Header/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useNavigate } from 'react-router-dom';
 import Head from '@/components/Head';
 import { headerRootStyle, backIconStyle, titleStyle, closeIconStyle } from '@/components/Header/index.css';
 import { IcBack, IcClose } from '@/assets/svg';
@@ -8,10 +9,6 @@ interface HeaderRootProps {
   isColor?: boolean;
 }
 
-interface BackIconProps {
-  onClick: () => void;
-}
-
 interface TitleProps {
   title: string;
 }
@@ -24,9 +21,13 @@ const HeaderRoot = ({ children, isColor = false }: HeaderRootProps): JSX.Element
   return <div className={headerRootStyle({ isColor })}>{children}</div>;
 };
 
-const BackIcon = ({ onClick }: BackIconProps): JSX.Element => {
+const BackIcon = (): JSX.Element => {
+  const navigate = useNavigate();
+  const handleBackClick = () => {
+    navigate(-1);
+  };
   return (
-    <button className={backIconStyle} onClick={onClick} aria-label="뒤로가기">
+    <button className={backIconStyle} onClick={handleBackClick} aria-label="뒤로가기">
       <IcBack width={24} height={24} />
     </button>
   );

src/components/Input/index.css.ts

@@ -35,6 +35,8 @@ export const inputStyle = recipe({
     isSearch: {
       true: {
         borderRadius: '90px',
+        padding: '1rem 4rem 1rem 4.6rem',
+        ...vars.fonts.b2,
       },
     },
   },

src/pages/search/components/SearchBar/index.css.ts

@@ -0,0 +1,25 @@
+import { style } from '@vanilla-extract/css';
+
+export const searchGrayStyle = style({
+  position: 'absolute',
+
+  top: 0,
+  bottom: 0,
+  left: 16,
+
+  margin: 'auto 0',
+
+  cursor: 'pointer',
+});
+
+export const xCircleGrayStyle = style({
+  position: 'absolute',
+
+  top: 0,
+  bottom: 0,
+  right: 12,
+
+  margin: 'auto 0',
+
+  cursor: 'pointer',
+});

src/pages/search/components/SearchBar/index.tsx

@@ -0,0 +1,41 @@
+import { forwardRef } from 'react';
+import Flex from '@/components/Flex';
+import Input from '@/components/Input';
+import { IcSearchGray, IcXCircleGray } from '@/assets/svg';
+import { searchGrayStyle, xCircleGrayStyle } from './index.css';
+
+interface SearchBarProps {
+  searchValue: string;
+  handleSearchChange: (value: string) => void;
+  handleSearchIconClick: () => void;
+}
+
+const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>(
+  ({ searchValue, handleSearchChange, handleSearchIconClick }, ref) => {
+    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      handleSearchChange(event.target.value);
+    };
+
+    const handleClearInput = () => {
+      handleSearchChange('');
+    };
+
+    return (
+      <Flex align="center" width="29.9rem" height="4.4rem" position="relative" margin="0 0 0 1.2rem">
+        <IcSearchGray className={searchGrayStyle} width={24} onClick={handleSearchIconClick} />
+        <Input
+          isSearch={true}
+          ref={ref}
+          value={searchValue}
+          placeholder="장르나 댄서 네임을 검색해 보세요"
+          onChange={handleInputChange}
+        />
+        <IcXCircleGray className={xCircleGrayStyle} width={24} onClick={handleClearInput} />
+      </Flex>
+    );
+  }
+);
+
+SearchBar.displayName = 'SearchBar';
+
+export default SearchBar;

src/pages/search/index.tsx

@@ -1,5 +1,28 @@
+import { useState } from 'react';
+import SearchBar from '@/pages/search/components/SearchBar';
+import Header from '@/components/Header';
+
 const Search = () => {
-  return <div>search</div>;
+  const [searchValue, setSearchValue] = useState('');
+
+  const handleSearchChange = (value: string) => {
+    setSearchValue(value);
+  };
+
+  const handleSearchIconClick = () => {
+    console.log(searchValue);
+  };
+
+  return (
+    <Header.Root>
+      <Header.BackIcon />
+      <SearchBar
+        searchValue={searchValue}
+        handleSearchChange={handleSearchChange}
+        handleSearchIconClick={handleSearchIconClick}
+      />
+    </Header.Root>
+  );
 };
 
 export default Search;

src/stories/Header.stories.tsx

@@ -38,11 +38,11 @@ export const Default: Story = {
   args: {
     title: 'HEADER TITLE',
   },
-  render: ({ title, onClickBack, onClickClose }) => (
+  render: ({ title }) => (
     <Header.Root>
-      <Header.BackIcon onClick={onClickBack} />
+      <Header.BackIcon />
       <Header.Title title={title} />
-      <Header.CloseIcon onClick={onClickClose} />
+      <Header.CloseIcon />
     </Header.Root>
   ),
 };
@@ -51,18 +51,18 @@ export const BackOnly: Story = {
   args: {
     title: 'Go Back',
   },
-  render: ({ title, onClickBack }) => (
+  render: ({ title }) => (
     <Header.Root>
-      <Header.BackIcon onClick={onClickBack} />
+      <Header.BackIcon />
       <Header.Title title={title} />
     </Header.Root>
   ),
 };
 
 export const CloseOnly: Story = {
-  render: ({ onClickClose }) => (
+  render: () => (
     <Header.Root>
-      <Header.CloseIcon onClick={onClickClose} />
+      <Header.CloseIcon />
     </Header.Root>
   ),
 };