0404 CLANBE 개발일지

오늘은 전체적인 코드정리 및 리팩토링에 시간을 투자한 날이었다.

하드코딩 되어 있던 헤더 컴포넌트를

레이아웃 단위로 컴포넌트화 한후,

type MenuItem = {
  title: string;
  description: string;
  icon: string;
  href: string;
};

type HeaderDropdownProps = {
  buttonTitle?: string;
  menuItems: MenuItem[];
};

export const HeaderDropdown: React.FC<HeaderDropdownProps> = ({
  buttonTitle,
  menuItems,
}) => {
  const router = useRouter();

  return (
    <Dropdown>
      <NavbarItem>
        <DropdownTrigger>
          <Button
            disableRipple
            className="p-0 bg-transparent data-[hover=true]:bg-transparent"
            endContent={headerIcon.chevron}
            radius="sm"
            variant="light"
          >
            {buttonTitle}
          </Button>
        </DropdownTrigger>
      </NavbarItem>
      <DropdownMenu
        aria-label="ACME features"
        className="w-[250px]"
        itemClasses={{
          base: "gap-4",
        }}
      >
        {menuItems.map((menuItem) => (
          <DropdownItem
            key={menuItem.title}
            description={menuItem.description}
            startContent={headerIcon[menuItem.icon]}
            onClick={() => router.push(menuItem.href)}
          >
            {menuItem.title}
          </DropdownItem>
        ))}
      </DropdownMenu>
    </Dropdown>
  );
};

전체 컴포넌트들의 타입을 확실하게 매기면서 es6+ 문법을 활용해 코드를 정리했다.

덕분에 코드 가독성을 올리고 코드길이를 크게 줄일 수 있었으며,

카테고리들에 대한 방식을 주입받는 방식으로 리팩토링하여

고정되는 방식이 아니라 추후 어드민페이지 등에서 손쉽게 유지보수/관리 할 수 있게 되었다.

다른 작업이 끝나는대로 마찬가지로 mongoDB와 서버를 통해 레이아웃과 메뉴정보를 받아오는 방식으로 변경 할 생각이다.