Refactor : 드롭다운 재사용 가능한 컴포넌트로 구현

[99minji]

📢 로그아웃 드롭다운 메뉴 생성을 위해 코드 변경했습니다.

[기존 코드]

const Dropdown = ({ onEdit, openDelete }: DropdownProps) => {
  const buttonStyle =
    "block w-full py-2 text-sm hover:bg-gray200 hover:text-purple100";

  return (
    <div className="absolute top-[17px] right-0 flex flex-col gap-[2px] min-w-[100px] bg-white shadow-lg rounded">
      <button className={buttonStyle} onClick={onEdit}>
        수정하기
      </button>
      <button className={buttonStyle} onClick={openDelete}>
        삭제하기
      </button>
    </div>
  );
};

export default Dropdown;

[바뀐 코드]

const Dropdown = ({ items }: DropdownProps) => {
  const buttonStyle =
    "block w-full py-2 text-sm hover:bg-gray200 hover:text-purple100";

  return (
    <div className="absolute top-[17px] right-0 flex flex-col gap-[2px] min-w-[100px] bg-white shadow-lg rounded">
      {items.map((item, index) =>
        // href가 있으면 Link로 렌더링
        item.href ? (
          <Link key={index} href={item.href} className={buttonStyle}>
            {item.label}
          </Link>
        ) : (
          // href가 없으면 버튼으로 렌더링
          <button key={index} onClick={item.onClick} className={buttonStyle}>
            {item.label}
          </button>
        )
      )}
    </div>
  );
};

export default Dropdown;

[hongggyelim]

item 넘겨줄때 onClick에 대한 핸들러도 같이 넘겨주는거군요! 👍

[hongggyelim]

수고하셨습니닷!

[venise5224]

감사합니다
잘써보겠습니당