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) => {
>
- {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}
/>