refactor: 검색 바 아이콘 img로 변경 (#546)

* refactor: 검색 바 아이콘 img로 변경

* fix: `alt=""` 속성 추가

장식(아이콘)이라는 점을 명시적으로 표시

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;

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="바코드"
         >
-          바코드
+          <img src={BarCodeIcon} alt="" />
         </button>
       ) : null}
-      <button className="search-bar__button submit" type="submit">
-        검색
+      <button className="search-bar__button" type="submit" aria-label="검색">
+        <img src={SearchIcon} alt="" />
       </button>
     </form>
   );