diff --git a/components/Dropdown.tsx b/components/Dropdown.tsx index 6102d17..b39a441 100644 --- a/components/Dropdown.tsx +++ b/components/Dropdown.tsx @@ -1,22 +1,35 @@ +import Link from "next/link"; import React from "react"; +interface DropdownItem { + label: string; + href?: string; + onClick?: () => void; +} + interface DropdownProps { - onEdit?: () => void; - openDelete?: () => void; + items: DropdownItem[]; } -const Dropdown = ({ onEdit, openDelete }: DropdownProps) => { +const Dropdown = ({ items }: DropdownProps) => { const buttonStyle = "block w-full py-2 text-sm hover:bg-gray200 hover:text-purple100"; return (
- - + {items.map((item, index) => + // href가 있으면 Link로 렌더링 + item.href ? ( + + {item.label} + + ) : ( + // href가 없으면 버튼으로 렌더링 + + ) + )}
); }; diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx index 173a9ab..fccbc83 100644 --- a/components/LinkCard.tsx +++ b/components/LinkCard.tsx @@ -15,11 +15,11 @@ interface LinkCardProps { url: string; createdAt: string; }; - onEdit?: () => void; + openEdit?: () => void; openDelete?: () => void; } -const LinkCard = ({ onEdit, openDelete, info }: LinkCardProps) => { +const LinkCard = ({ openEdit, openDelete, info }: LinkCardProps) => { const [isSubscribed, setIsSubscribed] = useState(false); const [isDropdownOpen, setIsDropdownOpen] = useState(false); const { isOpen: isModalOpen } = useModalStore(); // 모달 열림 상태 구독 @@ -38,6 +38,17 @@ const LinkCard = ({ onEdit, openDelete, info }: LinkCardProps) => { // dropdown 버튼 const toggleDropdown = () => setIsDropdownOpen((prev) => !prev); + const dropdownItems = [ + { + label: "수정하기", + onClick: openEdit, + }, + { + label: "삭제하기", + onClick: openDelete, + }, + ]; + return (
@@ -79,9 +90,7 @@ const LinkCard = ({ onEdit, openDelete, info }: LinkCardProps) => { > kebab button - {isDropdownOpen && ( - - )} + {isDropdownOpen && }
)} diff --git a/pages/link/index.tsx b/pages/link/index.tsx index c971187..7a0bbf7 100644 --- a/pages/link/index.tsx +++ b/pages/link/index.tsx @@ -88,7 +88,7 @@ const LinkPage = ({ linkList, folderList }: LinkPageProps) => { {linkCardList.map((link) => ( openEdit(link.url, link.id)} + openEdit={() => openEdit(link.url, link.id)} openDelete={() => openDelete(link.url, link.id)} info={link} />