refact: DropDown 코드 리팩토링

- LabelContainer 타입 명시 - Label과 DropDown에서 공통되는 Background color 로직 추출 - DropDownProps 하나로 처리
LikeLion-KNU · Sep 5, 2024 · 9876bae · 9876bae
1 parent d8d2d1a
commit 9876bae
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 29 deletions.
diff --git a/src/components/form/DropDown.style.ts b/src/components/form/DropDown.style.ts
@@ -1,27 +1,28 @@
+import { DropDownProps } from "./DropDown";
 import styled from "@emotion/styled";
 import { Dropdown } from "primereact/dropdown";
 
-interface DropDownProps {
+interface LabelProps {
     color: string;
-    width: string;
-    height: string;
 }
 
+const getBackgroundColor = (color: string) => {
+    switch (color) {
+        case "primary":
+            return "#ECECEC";
+        case "secondary":
+            return "#fff";
+        default:
+            return color;
+    }
+};
+
 export const DropDownWrapper = styled.div<DropDownProps>`
     display: flex;
     border-radius: 12px;
     justify-content: center;
 
-    background-color: ${(props) => {
-        switch (props.color) {
-            case "primary":
-                return "#ECECEC";
-            case "secondary":
-                return "#fff";
-            default:
-                return props.color;
-        }
-    }};
+    background-color: ${(props) => getBackgroundColor(props.color)};
 
     height: ${(props) => props.height};
     width: ${(props) => props.width};
@@ -35,22 +36,13 @@ export const DropDownContainer = styled(Dropdown)`
     padding: 10px;
 `;
 
-export const LabelContainer = styled.span`
+export const LabelContainer = styled.span<LabelProps>`
     display: inline-block;
     width: 100%;
     color: #333;
     padding: 10px;
 
-    background-color: ${(props) => {
-        switch (props.color) {
-            case "primary":
-                return "#ECECEC";
-            case "secondary":
-                return "#fff";
-            default:
-                return props.color;
-        }
-    }};
+    background-color: ${(props) => getBackgroundColor(props.color)};
 
     &:hover {
         color: ${(props) => {

diff --git a/src/components/form/DropDown.tsx b/src/components/form/DropDown.tsx
@@ -2,15 +2,15 @@ import React from "react";
 
 import { DropDownWrapper, DropDownContainer, LabelContainer } from "./DropDown.style";
 
-interface DropdownProps {
+export interface DropDownProps {
     color: string;
     width: string;
     height: string;
-    selectedMajor: string;
-    setSelectedMajor: React.Dispatch<React.SetStateAction<string>>;
+    selectedMajor?: string;
+    setSelectedMajor?: React.Dispatch<React.SetStateAction<string>>;
 }
 
-export default function DropDown({ color, width, height, selectedMajor, setSelectedMajor }: DropdownProps) {
+export default function DropDown({ color, width, height, selectedMajor, setSelectedMajor }: DropDownProps) {
     const majors = [
         { label: "📖 인문대학", value: "인문대학" },
         { label: "📋 사회과학대학", value: "사회과학대학" },
@@ -38,7 +38,7 @@ export default function DropDown({ color, width, height, selectedMajor, setSelec
         <DropDownWrapper color={color} width={width} height={height}>
             <DropDownContainer
                 value={selectedMajor}
-                onChange={(e) => setSelectedMajor(e.value)}
+                onChange={(e) => setSelectedMajor && setSelectedMajor(e.value)}
                 options={majors}
                 optionLabel="label"
                 placeholder="단과 대학을 선택하세용"