From efcdd1b752bc94b66dde3158f9e14218a3e422b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=87=E1=85=A1=E1=86=A8=E1=84=80=E1=85=A5=E1=86=AB?=
 =?UTF-8?q?=E1=84=80=E1=85=B2?= <geongyu09@gmail.com>
Date: Sun, 3 Mar 2024 00:40:46 +0900
Subject: [PATCH] =?UTF-8?q?chore:=20=EB=B8=8C=EB=9E=9C=EC=B9=98=20?=
 =?UTF-8?q?=EC=B5=9C=EC=8B=A0=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../applicationNode/NextButton.component.tsx  | 33 ++++++++---------
 frontend/components/common/navbar/Button.tsx  | 13 +++----
 .../components/kanban/Navbar.component.tsx    |  2 +-
 frontend/src/constants/kanban/27.ts           | 35 +++++++++++++++++++
 4 files changed, 57 insertions(+), 26 deletions(-)
 create mode 100644 frontend/src/constants/kanban/27.ts

diff --git a/frontend/components/application/applicationNode/NextButton.component.tsx b/frontend/components/application/applicationNode/NextButton.component.tsx
index 0388b927..52edf877 100644
--- a/frontend/components/application/applicationNode/NextButton.component.tsx
+++ b/frontend/components/application/applicationNode/NextButton.component.tsx
@@ -13,34 +13,29 @@ interface ApplicationNextButtonProps {
   isLast?: boolean;
 }
 
+// etc. 단순히 boolean이 아닌 어느 곳에서 터지는 지와 그 이유를 담은 객체를 반환하면 어떨까?
 // TODO: 질문의 이름마다 side effect가 있으니 주의하면 좋을 것
-const canNext = (applicationName: Array<string>) => {
-  return applicationName.every((name) => {
+const canNext = (applicationNames: Array<string>) => {
+  return applicationNames.every((name) => {
+    const EMPTY_STRING: string = "";
+    const localStorageValueFromName = localStorage.get(name, EMPTY_STRING);
+
     if (
       name === "personalInformationAgreeForPortfolio" ||
       name === "personalInformationAgree"
     ) {
-      return (
-        localStorage.get(name) !== "동의하지 않습니다." &&
-        localStorage.get(name, "") !== ""
-      );
+      return localStorageValueFromName === "동의합니다.";
     }
     if (name === "email") {
-      return isEmail(localStorage.get(name, ""));
+      return isEmail(localStorageValueFromName);
     }
     if (name === "check") {
-      return localStorage.get(name) === "확인했습니다";
-    }
-    if (localStorage.get(name, "").length === 0) {
-      if (
-        name === "channel" &&
-        localStorage.get("channelEtc", "").length !== 0
-      ) {
-        return true;
-      }
-      return false;
+      return localStorageValueFromName === "확인했습니다";
     }
-    return true;
+    return (
+      !(localStorageValueFromName.length === 0) ||
+      (name === "channel" && localStorage.get("channelEtc", EMPTY_STRING).length !== 0)
+    );
   });
 };
 
@@ -57,7 +52,7 @@ const ApplicationNextButton = ({
     );
     if (!canNext(Array.from(applicationName))) {
       alert("필수 항목을 입력해주세요.");
-      return false;
+      return;
     }
 
     if (isLast) {
diff --git a/frontend/components/common/navbar/Button.tsx b/frontend/components/common/navbar/Button.tsx
index 867fa626..7d7530f5 100644
--- a/frontend/components/common/navbar/Button.tsx
+++ b/frontend/components/common/navbar/Button.tsx
@@ -2,6 +2,7 @@
 
 import { KANBAN_MENU } from "@/src/constants/kanban/26";
 import { KanbanSelectedButtonNumberState } from "@/src/stores/kanban/Navbar.atoms";
+import { cn } from "@/src/utils/cn";
 import { useAtom } from "jotai";
 
 type NavbarButtonProps = {
@@ -14,19 +15,19 @@ const NavbarButton = ({ value }: NavbarButtonProps) => {
   const findmenuIndex =
     KANBAN_MENU.findIndex((menu) => menu.navTitle === value) + 1;
 
-  const buttonClassName = " py-2 px-6 rounded-lg min-w-fit ";
+  const buttonClassName = "py-2 px-6 rounded-lg min-w-fit";
 
   const onClick = () => {
     setnavbarId(findmenuIndex.toString());
   };
+  const isButtonSelected = navbarId === findmenuIndex.toString();
 
   return (
     <button
-      className={
-        findmenuIndex.toString() === navbarId
-          ? `bg-dark text-white${buttonClassName}`
-          : `bg-white text-gray-400${buttonClassName}`
-      }
+      className={cn(
+        buttonClassName,
+        isButtonSelected ? `bg-dark text-white` : `bg-white text-gray-400`
+      )}
       onClick={onClick}
     >
       {value}
diff --git a/frontend/components/kanban/Navbar.component.tsx b/frontend/components/kanban/Navbar.component.tsx
index 91009e01..76eb3335 100644
--- a/frontend/components/kanban/Navbar.component.tsx
+++ b/frontend/components/kanban/Navbar.component.tsx
@@ -1,4 +1,4 @@
-import { KANBAN_MENU, KanbanMenu } from "@/src/constants/kanban/26";
+import { KANBAN_MENU, KanbanMenu } from "@/src/constants/kanban/27";
 import NavbarButton from "../common/navbar/Button";
 
 const KanbanNavbar = () => {
diff --git a/frontend/src/constants/kanban/27.ts b/frontend/src/constants/kanban/27.ts
new file mode 100644
index 00000000..84670192
--- /dev/null
+++ b/frontend/src/constants/kanban/27.ts
@@ -0,0 +1,35 @@
+export interface KanbanMenu {
+  id: number;
+  navTitle: string;
+}
+
+export const KANBAN_MENU = [
+  {
+    id: 1,
+    navTitle: "공통",
+  },
+  {
+    id: 2,
+    navTitle: "회장단",
+  },
+  {
+    id: 3,
+    navTitle: "운영팀",
+  },
+  {
+    id: 4,
+    navTitle: "홍보 및 디자인팀",
+  },
+  {
+    id: 5,
+    navTitle: "지원자 대응팀",
+  },
+  {
+    id: 6,
+    navTitle: "방송팀",
+  },
+  {
+    id: 7,
+    navTitle: "기타 참고",
+  },
+];