feat #1: 드롭다운 구현

package.json

@@ -11,11 +11,15 @@
     "@types/node": "^16.11.49",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
+    "axios": "^0.27.2",
+    "history": "5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.4.0",
-    "react-router-dom": "^6.3.0",
+    "react-redux": "^8.0.2",
+    "react-router-dom": "6",
     "react-scripts": "5.0.1",
+    "redux": "^4.2.0",
     "typescript": "^4.7.4",
     "web-vitals": "^2.1.4"
   },
@@ -48,6 +52,7 @@
     "@types/react-router-dom": "^5.3.3",
     "autoprefixer": "^10.4.8",
     "postcss": "^8.4.16",
+    "redux-devtools-extension": "^2.13.9",
     "tailwindcss": "^3.1.8"
   }
 }

src/App.css

@@ -16,7 +16,6 @@ div{
   color: gray;
 }
 .active {
-  color: yellow;
 }
 .grid{
   display: grid;
@@ -58,6 +57,7 @@ div{
   color: #61dafb;
 }
 
+
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);

src/App.tsx

@@ -7,6 +7,7 @@ import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";
 import Order from "./components/page/Order";
 import Login from './components/page/Login';
 import SignUp from './components/page/SignUp';
+import AlcoholSearch from './components/page/AlcoholSearch';
 
 function App() {
   return (
@@ -17,6 +18,7 @@ function App() {
           <Route path='/Order' element={<Order/>}/>
           <Route path='/Login' element={<Login/>}/>
           <Route path='/SignUp' element={<SignUp/>}/>
+          <Route path='/AlcoholSearch' element={<AlcoholSearch/>}/>
         </Routes>
       </BrowserRouter>
     </div>

src/components/atom/DropDown.tsx

@@ -1,13 +1,44 @@
 import { IoIosArrowDown } from "react-icons/io";
 import { IoIosArrowUp } from "react-icons/io";
 import Input from "./Input";
-import React,{useState} from "react";
+import React, { useEffect, useState } from "react";
+
+type DropDownProps = {
+  alcohol: string[];
+  showDropDown: boolean;
+  toggleDropDown: Function;
+  Selection: Function;
+};
+
+const DropDown: React.FC<DropDownProps> = ({
+  alcohol,
+  Selection,
+}: DropDownProps): JSX.Element => {
+  const [showDropDown, setShowDropDown] = useState<boolean>(false);
+
+  const onClickHandler = (alcohol: string): void => {
+    Selection(alcohol);
+  };
+
+  useEffect(() => {
+    setShowDropDown(showDropDown);
+  }, [showDropDown]);
 
-function DropDown() {
   return (
-    <div className="">
-
+    <div className={showDropDown ? "dropdown" : "dropdown active"}>
+      {alcohol.map((alcohol: string, index: number): JSX.Element => {
+        return (
+          <p
+            key={index}
+            onClick={(): void => {
+              onClickHandler(alcohol);
+            }}
+          >
+            {alcohol}
+          </p>
+        );
+      })}
     </div>
   );
-}
+};
 export default DropDown;

src/components/atom/Menu.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from "react";
+import DropDown from "./DropDown";
+
+const Menu: React.FC = (): JSX.Element => {
+  const [showDropDown, setShowDropDown] = useState<boolean>(false);
+  const [select, setSelect] = useState<string>("");
+  const degree = () => {
+    return ["낮음", "중간", "높음"];
+  };
+
+  /**
+   * Toggle the drop down menu
+   */
+  const toggleDropDown = () => {
+    setShowDropDown(!showDropDown);
+  };
+
+  /**
+   * Hide the drop down menu if click occurs
+   * outside of the drop-down element.
+   *
+   * @param event  The mouse event
+   */
+  const dismissHandler = (event: React.FocusEvent<HTMLButtonElement>): void => {
+    if (event.currentTarget === event.target) {
+      setShowDropDown(false);
+    }
+  };
+
+  /**
+   * Callback function to consume the
+   * city name from the child component
+   *
+   * @param city  The selected city
+   */
+  const Selection = (degree: string): void => {
+    setSelect(degree);
+  };
+
+  return (
+    <>
+      <div className="border-b border-solid"></div>
+      <button
+        className={showDropDown ? "active" : undefined}
+        onClick={(): void => toggleDropDown()}
+        onBlur={(e: React.FocusEvent<HTMLButtonElement>): void =>
+          dismissHandler(e)
+        }
+      >
+        <div className="border p-2 rounded-lg">
+          {select ? "알코올 도수: " + select : "알코올 도수"}{" "}
+        </div>
+        {showDropDown && (
+          <DropDown
+            alcohol={degree()}
+            showDropDown={false}
+            toggleDropDown={(): void => toggleDropDown()}
+            Selection={Selection}
+          />
+        )}
+      </button>
+    </>
+  );
+};
+
+export default Menu;

src/components/molecule/Searchbar.tsx

@@ -4,7 +4,7 @@ import { HiSearch } from "react-icons/hi";
 function Searchbar(props: any) {
   return (
     <div
-      className="bg-[#74bb41] grid
+      className="grid
      justify-center justify-items-center gap-2 m-0 p-3"
     >
       <input className='rounded-2xl w-80 p-2 

src/components/page/AlcoholSearch.tsx

@@ -0,0 +1,27 @@
+import React, { SetStateAction } from "react";
+import Display from "../atom/Display";
+import RatingSection from "../atom/RatingSection";
+import OrderSection from "../organisms/OrderSection";
+import AlcoholTitle from "../atom/Title";
+import Elements from "../atom/Elements";
+import Searchbar from "../molecule/Searchbar";
+import { HiSearch } from "react-icons/hi";
+import Menu from "../atom/Menu";
+
+function AlcoholSearchPage() {
+  return (
+    <div className="">
+        <div className="flex justify-center mt-10">
+        <input className='rounded-2xl w-80 p-2 
+        text-base font-semibold outline-1 outline-[#cdcdcd]'
+      type="search" placeholder="주류를 검색해보세요!"></input>
+
+            <HiSearch className="m-2"size="30px" />
+        </div>
+        <Menu/>
+
+    </div>
+  );
+}
+
+export default AlcoholSearchPage;