feat: props 에 따른 드롭다운 설정

Author: 봄

src/common/component/CycleDropDown/CycleDropDown.tsx

@@ -1,31 +1,39 @@
 import { useState } from 'react';
 
 import { IcDropdown } from '@/assets/svg';
+import CycleList from '@/common/component/CycleDropDown/CycleList';
 import {
   cycleContainer,
   cycleText,
   dropdownIcon,
 } from '@/common/component/CycleDropDown/CycleDropDown.css';
-import CycleList from '@/common/component/CycleDropDown/CycleList';
 
-const CYCLE_TYPE = '매일';
+const CYCLE_TYPE = ['매일', '매주', '한 번'] as const;
+
+type CycleType = (typeof CYCLE_TYPE)[number];
 
 const CycleDropDown = () => {
   const [isOpen, setIsOpen] = useState(false);
-  const state = isOpen ? 'clicked' : 'default';
+  const [selectedType, setSelectedType] = useState<CycleType>(CYCLE_TYPE[0]);
 
   const toggleDropdown = () => {
     setIsOpen((prev) => !prev);
   };
+  const handleType = (type: CycleType) => {
+    setSelectedType(type);
+    setIsOpen(false);
+  };
+
+  const state = isOpen ? 'clicked' : 'default';
 
   return (
     <>
       <button className={cycleContainer} onClick={toggleDropdown}>
-        <p className={cycleText({ state })}>{CYCLE_TYPE}</p>
+        <p className={cycleText({ state })}>{selectedType}</p>
         <IcDropdown className={dropdownIcon({ state })} />
       </button>
 
-      {isOpen && <CycleList />}
+      {isOpen && <CycleList selectedType={selectedType} onSelect={handleType} />}
     </>
   );
 };

src/common/component/CycleDropDown/CycleList.tsx

@@ -1,26 +1,22 @@
-import { useState } from 'react';
-
 import { listContainer, listItem, listText } from '@/common/component/CycleDropDown/CycleList.css';
 
 const CYCLE_TYPE = ['매일', '매주', '한 번'] as const;
-
 type CycleType = (typeof CYCLE_TYPE)[number];
 
-const CycleList = () => {
-  const [selectedType, setSelectedType] = useState<CycleType>(CYCLE_TYPE[0]);
-
-  const handleType = (currentType: CycleType) => {
-    setSelectedType(currentType);
-  };
+type CycleProps = {
+  selectedType: CycleType;
+  onSelect: (type: CycleType) => void;
+};
 
+const CycleList = ({ selectedType, onSelect }: CycleProps) => {
   return (
     <div className={listContainer}>
-      {CYCLE_TYPE.map((cycle) => {
-        const state = selectedType === cycle ? 'selected' : 'default';
+      {CYCLE_TYPE.map((type) => {
+        const state = selectedType === type ? 'selected' : 'default';
 
         return (
-          <button key={cycle} className={listItem} onClick={() => handleType(cycle)}>
-            <p className={listText({ state })}>{cycle}</p>
+          <button key={type} className={listItem} onClick={() => onSelect(type)}>
+            <p className={listText({ state })}>{type}</p>
           </button>
         );
       })}