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

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

Author: mungyun

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 (
     <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>
+      {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>
   );
 };

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 (
     <div className="w-[340px] h-[344px] rounded-[12px] shadow-lg overflow-hidden cursor-pointer hover:scale-105 hover:duration-300">
       <section className="relative w-full h-[60%]">
@@ -79,9 +90,7 @@ const LinkCard = ({ onEdit, openDelete, info }: LinkCardProps) => {
               >
                 <Image src="/icons/kebab.svg" alt="kebab button" fill />
               </button>
-              {isDropdownOpen && (
-                <Dropdown onEdit={onEdit} openDelete={openDelete} />
-              )}
+              {isDropdownOpen && <Dropdown items={dropdownItems} />}
             </div>
           )}
         </div>

pages/link/index.tsx

@@ -88,7 +88,7 @@ const LinkPage = ({ linkList, folderList }: LinkPageProps) => {
             {linkCardList.map((link) => (
               <LinkCard
                 key={link.id}
-                onEdit={() => openEdit(link.url, link.id)}
+                openEdit={() => openEdit(link.url, link.id)}
                 openDelete={() => openDelete(link.url, link.id)}
                 info={link}
               />