From 9876bae05cfa808668d47cc4d1840d0086141eb0 Mon Sep 17 00:00:00 2001
From: 2NNS-V <msy3824@knu.ac.kr>
Date: Thu, 5 Sep 2024 12:13:00 +0900
Subject: [PATCH] =?UTF-8?q?refact:=20DropDown=20=EC=BD=94=EB=93=9C=20?=
 =?UTF-8?q?=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- LabelContainer 타입 명시
- Label과 DropDown에서 공통되는 Background color 로직 추출
- DropDownProps 하나로 처리
---
 src/components/form/DropDown.style.ts | 40 +++++++++++----------------
 src/components/form/DropDown.tsx      | 10 +++----
 2 files changed, 21 insertions(+), 29 deletions(-)

diff --git a/src/components/form/DropDown.style.ts b/src/components/form/DropDown.style.ts
index f4d11be..975000f 100644
--- 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
index 3efe359..09f7c65 100644
--- 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="단과 대학을 선택하세용"