[ Feature/DEV-64 ] 메뉴바 토글 컴포넌트 및 기능 구현

[Happhee]

🔥 Related Issues

https://linear.app/fewletter/issue/DEV-64/햄버거바-클릭시-나타나는-마이페이지-ui-구현

💜 작업 내용

• 토글 메뉴바 구현
• 테스트 진행

✅ PR Point

DropDownMenuItemList

• 메뉴에 어떤 컴포넌트가 올지 몰라 함수형으로 아래와같이 상수를 만들었고, 로그인 여부에따라 메뉴아이템을 다르게 보여주도록 추가할 예정입니다.

export function DropDownMenuItemList() {
  // TODO : 로그인 여부따라서 메뉴 제어 필요
  const MENU_ITEM_LIST = UNAUTH_LINK;
  const lastIdx = MENU_ITEM_LIST.length - 1;
  return (
    <ul className="absolute left-0 top-[66px] z-20 h-screen w-full bg-white">
      {MENU_ITEM_LIST.map(({ title, component }, idx) => (
        <li
          key={`link-to-${idx}`}
          className={cn(
            "flex flex-col justify-center",
            "sub2-bold min-h-[66px] w-full px-[20px] py-[10px]",
            lastIdx !== idx && "border-b-[0.5px] border-text-gray3",
          )}
        >
          {component({ title })}
        </li>
      ))}
    </ul>
  );
}

dropdownMenu 상수

• 컴포넌트 형식으로 상수를 만들어서 핸들러까지 받을 수 있게 구현하였습니다.

import { DropdownMenuItem } from "@main/types/dropdownMenu";
import Link from "next/link";
import FewLogo from "public/assets/icon/fewlogo.svg";

export const AUTH_LINK: DropdownMenuItem[] = [
  {
    title: "내 이메일",
    component: ({ title, email }: { title: string; email?: string }) => (
      <div className="flex flex-col gap-[15px]">
        <span>{title}</span>
        <div className="flex items-center gap-[9px]">
          <FewLogo
            width={32}
            height={32}
            className="rounded-full bg-main p-[3px]"
          />
          <span className="sub2-bold text-text-gray1">{email}</span>
        </div>
      </div>
    ),
  },
  {
    title: "회원탈퇴",
    component: ({ title }: { title: string }) => (
      <Link href="/" onClick={() => window.location.reload()}>
        {title}
      </Link>
    ),
  },

  {
    title: "로그아웃",
    component: ({ title }: { title: string }) => (
      <Link href="/" onClick={() => window.location.reload()}>
        {title}
      </Link>
    ),
  },
  {
    title: "FEW와 협업하려면",
    component: ({ title }: { title: string }) => (
      <Link href="https://tally.so/r/nP0OMQ" target="_blank">
        {title}
      </Link>
    ),
  },
  {
    title: "인스타그램",
    component: ({ title }: { title: string }) => (
      <Link href="https://www.instagram.com/few.letter" target="_blank">
        {title}
      </Link>
    ),
  },
];
export const UNAUTH_LINK: DropdownMenuItem[] = [
  {
    title: "로그인 또는 회원가입",
    component: ({ title }: { title: string }) => (
      <Link href="/auth">{title}</Link>
    ),
  },
  {
    title: "FEW와 협업하려면",
    component: ({ title }: { title: string }) => (
      <Link href="https://tally.so/r/nP0OMQ" target="_blank">
        {title}
      </Link>
    ),
  },
  {
    title: "인스타그램",
    component: ({ title }: { title: string }) => (
      <Link href="https://www.instagram.com/few.letter" target="_blank">
        {title}
      </Link>
    ),
  },
];

test

• 햄버거아이콘 클릭시 메뉴가 나오고, x아이콘 클릭시 메뉴가 닫히는 부분을 테스트 하였습니다.

const renderComponent = () => {
  return render(<MainHeader />);
};

describe("헤더 햄버거바 테스트", () => {
  beforeEach(() => {
    renderComponent();
  });
  it("햄버거 바 노출되고, 클릭하면 메뉴가 나타난다.", async () => {
    const hamburgerMenu = screen.getByTestId("hamburger-menu");

    await userEvent.click(hamburgerMenu);

    const loginOrSignup = screen.getByText("로그인 또는 회원가입");
    const withFewWork = screen.getByText("FEW와 협업하려면");
    const instagram = screen.getByText("인스타그램");

    const xMenu = screen.getByTestId("x-menu");

    await userEvent.click(xMenu);
  });
});

👀 스크린샷 / GIF / 링크

[soomin9106]

이 부분 엄청 크게 리뷰할 거는 없어보여서 일단 머지해서 로그아웃 API 달아놓겠습니다!!
(추후 리뷰할게욥!)
@Happhee