diff --git a/src/asset/css/SearchBar.css b/src/asset/css/SearchBar.css index 400c4d79..66a404a3 100644 --- a/src/asset/css/SearchBar.css +++ b/src/asset/css/SearchBar.css @@ -56,21 +56,13 @@ .search-bar__button { all: unset; margin-left: auto; - background-image: url("../img/search_icon_black.svg"); - background-repeat: no-repeat; - background-size: cover; width: 2.8rem; height: 2.8rem; margin: auto; - color: transparent; -} - -.search-bar__button.submit { - background-image: url("../img/search_icon_black.svg"); + cursor: pointer; } .search-bar__button.barcode { - background-image: url("../img/barcode.svg"); margin-right: 2rem; } @@ -100,9 +92,11 @@ .search-bar__wrapper.center { padding: 0 2rem 0 2rem; } + .search-bar__wrapper.long { padding: 0 2.5rem 0 2.2rem; } + .search-bar__wrapper.short { margin-right: 1.8rem; padding: 0 2.5rem 0 2.2rem; diff --git a/src/component/utils/SearchBar.tsx b/src/component/utils/SearchBar.tsx index 8ce8ae71..40098031 100644 --- a/src/component/utils/SearchBar.tsx +++ b/src/component/utils/SearchBar.tsx @@ -1,13 +1,15 @@ import { - useRef, - useState, - useEffect, ChangeEventHandler, FormEventHandler, MouseEventHandler, + useEffect, + useRef, + useState, } from "react"; import { useNavigate, useSearchParams } from "react-router-dom"; import "../../asset/css/SearchBar.css"; +import BarCodeIcon from "../../asset/img/barcode.svg"; +import SearchIcon from "../../asset/img/search_icon_black.svg"; type Props = { setQuery?: (query: string) => void; @@ -75,12 +77,13 @@ const SearchBar = ({ type="button" className="search-bar__button barcode" onClick={onClickBarcodeButton} + aria-label="바코드" > - 바코드 + ) : null} - );