♻️ 버튼 컴포넌트 형식 결정 로직을 객체 형태로 변경

boostcampwm2023 · Nov 23, 2023 · 98c5ffb · 98c5ffb
1 parent 7a45dbf
commit 98c5ffb
Showing 1 changed file with 27 additions and 33 deletions.
diff --git a/app/frontend/src/components/MogacoDetail/DetailHeaderButtons.tsx b/app/frontend/src/components/MogacoDetail/DetailHeaderButtons.tsx
@@ -4,40 +4,34 @@ type DetailHeaderButtonsProps = {
   status: string;
 };
 
-export function DetailHeaderButtons({ status }: DetailHeaderButtonsProps) {
-  if (status === '모집 중') {
-    return (
+const buttonComponents = {
+  '모집 중': (
+    <Button theme="primary" shape="fill" size="large">
+      참석하기
+    </Button>
+  ),
+  마감: (
+    <>
       <Button theme="primary" shape="fill" size="large">
-        참석하기
+        채팅
       </Button>
-    );
-  }
-
-  if (status === '마감') {
-    return (
-      <>
-        <Button theme="primary" shape="fill" size="large">
-          채팅
-        </Button>
-        <Button theme="primary" shape="line" size="large">
-          참석 취소
-        </Button>
-      </>
-    );
-  }
-
-  if (status === '종료') {
-    return (
-      <>
-        <Button theme="primary" shape="line" size="large">
-          수정
-        </Button>
-        <Button theme="danger" shape="line" size="large">
-          삭제
-        </Button>
-      </>
-    );
-  }
+      <Button theme="primary" shape="line" size="large">
+        참석 취소
+      </Button>
+    </>
+  ),
+  종료: (
+    <>
+      <Button theme="primary" shape="line" size="large">
+        수정
+      </Button>
+      <Button theme="danger" shape="line" size="large">
+        삭제
+      </Button>
+    </>
+  ),
+};
 
-  return null;
+export function DetailHeaderButtons({ status }: DetailHeaderButtonsProps) {
+  return status ? buttonComponents[status as '모집 중' | '마감' | '종료'] : '';
 }