Feat: DropdownButton, DropdowMenu 공통컴포넌트 제작 및 조립

co-kkiri/src/components/commons/SelectDropButtons/DeadlineDropdownButton.tsx

@@ -0,0 +1,35 @@
+import styled from "styled-components";
+import DropdownButton from "./commons/DropdownButton";
+import { useState } from "react";
+import useOpenToggle from "@/hooks/useOpenToggle";
+import DESIGN_TOKEN from "@/styles/tokens";
+import { DatePickerWithRange } from "../DatePickerWithRange";
+
+export default function DeadlineDropdownButton() {
+  const [selectOption, setSelectOption] = useState();
+  const [isSelected, setIsSelected] = useState(false);
+  const { isOpen, openToggle: toggleDropdown, ref } = useOpenToggle();
+
+  return (
+    <Container ref={ref}>
+      <DropdownButton $selectType="date" onClick={toggleDropdown} selectOption="마감 기간" $isSelected={isSelected} />
+      {isOpen && <DatePickerWithRange />}
+    </Container>
+  );
+}
+
+const { mediaQueries } = DESIGN_TOKEN;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+  gap: 0.6rem;
+  position: relative;
+  padding: 0;
+  width: 31.4rem;
+
+  ${mediaQueries.mobile} {
+    width: 28rem;
+  }
+`;

co-kkiri/src/components/commons/SelectDropOptions/FilterDropdownButton.tsx → co-kkiri/src/components/commons/SelectDropButtons/FilterDropdownButton.tsx

@@ -1,8 +1,8 @@
 import { useState } from "react";
 import styled from "styled-components";
-import DropdownMenu from "../DropdownMenu";
 import FilterButton from "../FilterButton";
 import useOpenToggle from "@/hooks/useOpenToggle";
+import DropdownMenu from "./commons/DropdownMenu";
 
 interface FilterDropdownButtonProps {
   filterType: "position" | "meeting";
@@ -34,7 +34,12 @@ export default function FilterDropdownButton({ filterType }: FilterDropdownButto
   return (
     <Container ref={ref}>
       <FilterButton onClick={toggleDropdown} selectOption={selectOption} isSelected={isSelected} />
-      <DropdownMenu isOpen={isOpen} handleSelectOption={handleSelectOption} selectType={filterType} />
+      <DropdownMenu
+        $borderType="round"
+        isOpen={isOpen}
+        handleSelectOption={handleSelectOption}
+        $selectType={filterType}
+      />
     </Container>
   );
 }
@@ -45,4 +50,5 @@ const Container = styled.div`
   align-items: end;
   gap: 0.6rem;
   position: relative;
+  width: 10.4rem;
 `;

co-kkiri/src/components/commons/SelectDropButtons/RecruitDropdownButton.tsx

@@ -0,0 +1,73 @@
+import styled from "styled-components";
+import DropdownMenu from "./commons/DropdownMenu";
+import DropdownButton from "./commons/DropdownButton";
+import { useState } from "react";
+import useOpenToggle from "@/hooks/useOpenToggle";
+import DESIGN_TOKEN from "@/styles/tokens";
+
+interface RecruitDropdownButtonProps {
+  recruitInfoType: "meeting" | "memberCount" | "deadline" | "progressPeriod" | "contactMethod";
+}
+
+const recruitInfoDefaultValue = {
+  meeting: "진행 방식",
+  memberCount: "모집 인원",
+  deadline: "마감 기간",
+  progressPeriod: "진행 기간",
+  contactMethod: "연락 방식",
+};
+
+/**
+ * UserInfoDropdownButton 컴포넌트
+ * userInfoType에 따라 dropdown 옵션이 정해집니다.
+ * @property {"meeting" | "memberCount" | "recruitPeriod" | "progressPeriod" | "contactMethod"} recruitInfoType
+ * */
+export default function RecruitDropdownButton({ recruitInfoType }: RecruitDropdownButtonProps) {
+  const defaultValue = recruitInfoDefaultValue[recruitInfoType];
+
+  const [selectOption, setSelectOption] = useState(defaultValue);
+  const [isSelected, setIsSelected] = useState(false);
+  const { isOpen, openToggle: toggleDropdown, ref } = useOpenToggle();
+
+  const handleSelectOption = (option: string) => {
+    setSelectOption(option);
+    setIsSelected(true);
+    toggleDropdown();
+  };
+
+  return (
+    <Container ref={ref}>
+      <DropdownButton
+        $selectType={recruitInfoType}
+        onClick={toggleDropdown}
+        selectOption={selectOption}
+        $isSelected={isSelected}
+      />
+      <DropdownMenu
+        isOpen={isOpen}
+        handleSelectOption={handleSelectOption}
+        $selectType={recruitInfoType}
+        $borderType="square"></DropdownMenu>
+    </Container>
+  );
+}
+
+const { mediaQueries } = DESIGN_TOKEN;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+  gap: 0.6rem;
+  position: relative;
+  padding: 0;
+  width: 36.7rem;
+
+  ${mediaQueries.tablet} {
+    width: 46.2rem;
+  }
+
+  ${mediaQueries.mobile} {
+    width: 32rem;
+  }
+`;

co-kkiri/src/components/commons/SelectDropOptions/SortSelectButton.tsx → co-kkiri/src/components/commons/SelectDropButtons/SortDropdownButton.tsx

@@ -1,22 +1,33 @@
 import styled from "styled-components";
-import DropdownMenu from "../DropdownMenu";
-import DropdownButton from "../DropdownButton";
+import DropdownMenu from "./commons/DropdownMenu";
+import DropdownButton from "./commons/DropdownButton";
 import { useState } from "react";
 import useOpenToggle from "@/hooks/useOpenToggle";
 
 export default function SortSelectButton() {
   const [selectOption, setSelectOption] = useState("최신순");
+  const [isSelected, setIsSelected] = useState(false);
   const { isOpen, openToggle: toggleDropdown, ref } = useOpenToggle();
 
   const handleSelectOption = (option: string) => {
     setSelectOption(option);
+    setIsSelected(true);
     toggleDropdown();
   };
 
   return (
     <Container ref={ref}>
-      <DropdownButton toggleDropdown={toggleDropdown} selectOption={selectOption} />
-      <DropdownMenu isOpen={isOpen} handleSelectOption={handleSelectOption} selectType="sortList"></DropdownMenu>
+      <DropdownButton
+        $selectType="sort"
+        onClick={toggleDropdown}
+        selectOption={selectOption}
+        $isSelected={isSelected}
+      />
+      <DropdownMenu
+        isOpen={isOpen}
+        handleSelectOption={handleSelectOption}
+        $selectType="sortList"
+        $borderType="round"></DropdownMenu>
     </Container>
   );
 }
@@ -27,4 +38,6 @@ const Container = styled.div`
   align-items: end;
   gap: 1.6rem;
   position: relative;
+  padding: 0;
+  width: 10.4rem;
 `;

co-kkiri/src/components/commons/SelectDropButtons/UserInfoDropdownButton.tsx

@@ -0,0 +1,66 @@
+import styled from "styled-components";
+import DropdownMenu from "./commons/DropdownMenu";
+import DropdownButton from "./commons/DropdownButton";
+import { useState } from "react";
+import useOpenToggle from "@/hooks/useOpenToggle";
+import DESIGN_TOKEN from "@/styles/tokens";
+
+interface UserInfoDropdownButtonProps {
+  userInfoType: "position" | "career";
+}
+
+const UserInfoDefaultValue = {
+  position: "포지션",
+  career: "경력",
+};
+
+/**
+ * UserInfoDropdownButton 컴포넌트
+ * userInfoType에 따라 dropdown 옵션이 정해집니다.
+ * @property {"position" | "career"} userInfoType
+ * */
+export default function UserInfoDropdownButton({ userInfoType }: UserInfoDropdownButtonProps) {
+  const defaultValue = UserInfoDefaultValue[userInfoType];
+
+  const [selectOption, setSelectOption] = useState(defaultValue);
+  const [isSelected, setIsSelected] = useState(false);
+  const { isOpen, openToggle: toggleDropdown, ref } = useOpenToggle();
+
+  const handleSelectOption = (option: string) => {
+    setSelectOption(option);
+    setIsSelected(true);
+    toggleDropdown();
+  };
+
+  return (
+    <Container ref={ref}>
+      <DropdownButton
+        $selectType={userInfoType}
+        onClick={toggleDropdown}
+        selectOption={selectOption}
+        $isSelected={isSelected}
+      />
+      <DropdownMenu
+        isOpen={isOpen}
+        handleSelectOption={handleSelectOption}
+        $selectType={userInfoType}
+        $borderType="square"></DropdownMenu>
+    </Container>
+  );
+}
+
+const { mediaQueries } = DESIGN_TOKEN;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+  gap: 0.6rem;
+  position: relative;
+  padding: 0;
+  width: 31.4rem;
+
+  ${mediaQueries.mobile} {
+    width: 28rem;
+  }
+`;