Feat: Drop다운 구현 및 DROPDOWN_INFO 수정 (#126)

co-kkiri/src/components/commons/DropDowns/Dropdown.tsx

@@ -0,0 +1,42 @@
+import useOpenToggle from "@/hooks/useOpenToggle";
+import SquareDropButton from "./commons/SquareDropButton";
+import DropMenu from "./commons/DropMenu";
+import styled from "styled-components";
+
+interface DropdownProps {
+  placeholder?: string;
+  selectedOption?: string;
+  options: string[];
+  onSelect: (option: string) => void;
+}
+
+export default function Dropdown({ placeholder, selectedOption, options, onSelect }: DropdownProps) {
+  const { isOpen, openToggle: toggleDropdown, ref } = useOpenToggle();
+
+  const handleSelectOption = (option: string) => {
+    onSelect(option);
+    toggleDropdown();
+  };
+
+  return (
+    <Container ref={ref}>
+      <SquareDropButton
+        selectOption={selectedOption || placeholder || ""}
+        onClick={toggleDropdown}
+        $isSelected={!!selectedOption}
+        $iconType="default"
+      />
+      <DropMenu isOpen={isOpen} handleSelectOption={handleSelectOption} $borderType="square" options={options} />
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+  position: relative;
+  padding: 0;
+  gap: 0.8rem;
+`;

co-kkiri/src/components/commons/DropDowns/commons/DropMenu.tsx

@@ -2,8 +2,8 @@ import styled, { css } from "styled-components";
 import DESIGN_TOKEN from "@/styles/tokens";
 
 interface DropdownMenuProps {
-  options: string[] | number[];
-  handleSelectOption: (option: string | number) => void;
+  options: string[];
+  handleSelectOption: (option: string) => void;
   isOpen: boolean;
   $borderType: "round" | "square";
 }
@@ -24,7 +24,7 @@ interface ContainerProps {
 export default function DropMenu({ options, isOpen, handleSelectOption, $borderType }: DropdownMenuProps) {
   return (
     <Container $isOpen={isOpen} $borderType={$borderType}>
-      {options.map((option: string | number) => (
+      {options.map((option: string) => (
         <Option
           $borderType={$borderType}
           onClick={() => {

co-kkiri/src/constants/dropDown.ts

@@ -11,6 +11,7 @@ export const DROPDOWN_INFO = {
     career: {
       defaultValue: "경력",
       options: ["신입", "1년차", "2년차", "3년차", "4년차", "5년차", "5년차 이상"],
+      values: [0, 1, 2, 3, 4, 5, 999],
     },
   },
   recruitment: {
@@ -24,7 +25,8 @@ export const DROPDOWN_INFO = {
     },
     capacity: {
       defaultValue: "모집 인원",
-      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+      options: ["1명", "2명", "3명", "4명", "5명", "6명", "7명", "8명", "9명", "10명 이상"],
+      values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 999],
     },
     contactWay: {
       defaultValue: "연락 방식",