feat: 검색창 드롭다운 UI 추가

검색창 및 드롭다운 Blur 이벤트 추가

src/asset/css/SearchBar.css

@@ -4,6 +4,7 @@
   display: flex;
   border-radius: 6.1rem;
   background-color: #f2f2f2;
+  position: relative;
 }
 
 .search-bar__wrapper.short {

src/asset/css/SearchBarDropDown.css

@@ -0,0 +1,21 @@
+.search-bar__dropdown {
+  text-align: left;
+  background-color: white !important;
+  position: absolute;
+  top: 6.4rem;
+  padding: 1rem;
+  margin-right: 2.6rem;
+  white-space: wrap;
+}
+
+@media screen and (max-width: 1200px) {
+  .search-bar__dropdown {
+    top: 5.5rem;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .search-bar__dropdown {
+    top: 5rem;
+  }
+}

src/component/utils/BookSearchBar.tsx

@@ -1,10 +1,14 @@
-import { FormEventHandler, useEffect, useState } from "react";
+import { FormEventHandler, useEffect, useRef, useState } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
-import SearchBar from "./SearchBar";
+import SearchBar from "~/component/utils/SearchBar";
+import BookSearchPreview from "~/component/utils/BookSearchPreview";
+import BookSearchRecentKeyword from "~/component/utils/BookSearchRecentKeywords";
 
 const BookSearchBar = () => {
+  const [isOpened, setIsOpened] = useState(false);
   const [keyword, setKeyword] = useState("");
   const [params] = useSearchParams();
+  const ref = useRef<HTMLInputElement>(null);
   const navigate = useNavigate();
 
   const goToSearchPage: FormEventHandler<HTMLFormElement> = e => {
@@ -23,8 +27,20 @@ const BookSearchBar = () => {
       <SearchBar.Input
         value={keyword}
         onChange={e => setKeyword(e.target.value)}
-        ref={undefined}
+        onFocus={() => setIsOpened(true)}
+        ref={ref}
       />
+      <SearchBar.DropDown
+        isOpened={isOpened}
+        setIsOpened={setIsOpened}
+        searchBarRef={ref}
+      >
+        {keyword.length == 0 ? (
+          <BookSearchRecentKeyword />
+        ) : (
+          <BookSearchPreview />
+        )}
+      </SearchBar.DropDown>
       <SearchBar.Button />
     </SearchBar>
   );

src/component/utils/BookSearchPreview.tsx

@@ -0,0 +1,5 @@
+const BookSearchPreview = () => {
+  return <div>결과 미리보기</div>;
+};
+
+export default BookSearchPreview;

src/component/utils/BookSearchRecentKeywords.tsx

@@ -0,0 +1,5 @@
+const BookSearchRecentKeyword = () => {
+  return <div>최근 검색어</div>;
+};
+
+export default BookSearchRecentKeyword;

src/component/utils/SearchBar.tsx

@@ -1,6 +1,7 @@
 import { ComponentProps } from "react";
 import SearchBarInput from "~/component/utils/SearchBarInput";
 import SearchBarButton from "~/component/utils/SearchBarButton";
+import SearchBarDropDown from "~/component/utils/SearchBarDropDown";
 import "~/asset/css/SearchBar.css";
 
 export type Props = ComponentProps<"form"> & {
@@ -24,3 +25,4 @@ export default SearchBar;
 
 SearchBar.Input = SearchBarInput;
 SearchBar.Button = SearchBarButton;
+SearchBar.DropDown = SearchBarDropDown;

src/component/utils/SearchBarDropDown.tsx

@@ -0,0 +1,50 @@
+import {
+  Dispatch,
+  ReactNode,
+  RefObject,
+  SetStateAction,
+  useEffect,
+  useRef,
+} from "react";
+import "~/asset/css/SearchBarDropdown.css";
+
+type Props = {
+  isOpened: boolean;
+  setIsOpened: Dispatch<SetStateAction<boolean>>;
+  searchBarRef: RefObject<HTMLInputElement>;
+  children: ReactNode;
+};
+const SearchBarDropDown = ({
+  isOpened,
+  setIsOpened,
+  searchBarRef,
+  children,
+}: Props) => {
+  const dropDownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const closeWhenClickedOutside = (e: MouseEvent) => {
+      if (
+        searchBarRef.current &&
+        dropDownRef.current &&
+        !searchBarRef.current.contains(e.target as Node) &&
+        !dropDownRef.current.contains(e.target as Node)
+      )
+        setIsOpened(false);
+    };
+    document.addEventListener("click", closeWhenClickedOutside);
+    return () => {
+      document.removeEventListener("click", closeWhenClickedOutside);
+    };
+  }, []);
+
+  if (isOpened)
+    return (
+      <div ref={dropDownRef} className="search-bar__dropdown">
+        {children}
+      </div>
+    );
+  return null;
+};
+
+export default SearchBarDropDown;