diff --git a/src/assets/svg/down-arrow-gray.svg b/src/assets/svg/down-arrow-gray.svg new file mode 100644 index 0000000..9d11bc8 --- /dev/null +++ b/src/assets/svg/down-arrow-gray.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/down-arrow-white.svg b/src/assets/svg/down-arrow-white.svg new file mode 100644 index 0000000..26d67ef --- /dev/null +++ b/src/assets/svg/down-arrow-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/up-arrow-white.svg b/src/assets/svg/up-arrow-white.svg new file mode 100644 index 0000000..12b5861 --- /dev/null +++ b/src/assets/svg/up-arrow-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Global/Dropdown/DefaultDropdown.tsx b/src/components/Global/Dropdown/DefaultDropdown.tsx new file mode 100644 index 0000000..79bd8ee --- /dev/null +++ b/src/components/Global/Dropdown/DefaultDropdown.tsx @@ -0,0 +1,65 @@ +"use client" +import React, { useState } from 'react'; +import DArrowWhiteIcon from "@/assets/svg/down-arrow-white.svg" +import Image from 'next/image'; + + +interface Props { + text: string; // 드롭다운에 보여줄 텍스트 + height: number; // 드롭다운 높이 (48 or 54) + + isOpen: boolean; // 드롭다운 클릭 여부 + handleDropdown: () => void; // 드롭다운 클릭 이벤트 함수 + + items: string[]; // 아이템 텍스트 리스트 + onItemClick: (item: string) => void; // 아이템 클릭 이벤트 처리 함수 +} + +const Dropdown = ({text, height, isOpen, handleDropdown, items, onItemClick}: Props) => { + /* + // 드롭다운 클릭 여부 + const [isOpen, setIsOpen] = useState(false); + + // 드롭다운 클릭 이벤트 함수 + const handleDropdown = () => { + setIsOpen(!isOpen); + }; + */ + + return ( +
+ {/* 드롭다운 버튼 */} +
+
+ {text} +
+ {/* V, ^ 버튼 이미지 (활성화 상태에 따라 이미지 변경) */} + 화살표 +
+ + + + {/* 드롭다운 메뉴 (isOpen이 true일 때만 표시) */} + {isOpen && ( +
+
    + {items.map((item, index) => ( +
  • onItemClick(item)} + > + {item} +
    • + ))} +
+
+ )} +
+ ); +}; + +export default Dropdown;