Fix: handleModalOpen linkcard 컴포넌트 내부에서 호출

Author: 99minji

components/Link/LinkCard.tsx

@@ -17,14 +17,12 @@ interface LinkCardProps {
     url: string;
     createdAt: string;
   };
-  openEdit?: () => void;
-  openDelete?: () => void;
 }
 
-const LinkCard = ({ openEdit, openDelete, info }: LinkCardProps) => {
+const LinkCard = ({ info }: LinkCardProps) => {
   const [isSubscribed, setIsSubscribed] = useState(info.favorite || false);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const { isOpen: isModalOpen } = useModalStore();
+  const { isOpen, openModal } = useModalStore();
   const { updateFavorite } = useLinkCardStore();
 
   const formattedDate = info.createdAt?.slice(0, 10).replace(/-/g, ".");
@@ -35,8 +33,8 @@ const LinkCard = ({ openEdit, openDelete, info }: LinkCardProps) => {
 
   // 모달이 열릴 때 드롭다운 닫기
   useEffect(() => {
-    if (isModalOpen) setIsDropdownOpen(false);
-  }, [isModalOpen]);
+    if (isOpen) setIsDropdownOpen(false);
+  }, [isOpen]);
 
   // 즐겨찾기 버튼 클릭 시 호출되는 함수
   const handleFavoriteToggle = async () => {
@@ -52,14 +50,22 @@ const LinkCard = ({ openEdit, openDelete, info }: LinkCardProps) => {
   // dropdown 버튼
   const toggleDropdown = () => setIsDropdownOpen((prev) => !prev);
 
+  const handleModalOpen = (
+    type: "EditLink" | "DeleteLinkModal",
+    link: string,
+    linkId: number
+  ) => {
+    openModal(type, { link, linkId });
+  };
+
   const dropdownItems = [
     {
       label: "수정하기",
-      onClick: openEdit,
+      onClick: () => handleModalOpen("EditLink", info.url, info.id),
     },
     {
       label: "삭제하기",
-      onClick: openDelete,
+      onClick: () => handleModalOpen("DeleteLinkModal", info.url, info.id),
     },
   ];
 

pages/link/index.tsx

@@ -52,8 +52,8 @@ const LinkPage = ({
 }: LinkPageProps) => {
   const router = useRouter();
   const { search } = router.query;
-  const { isOpen, openModal } = useModalStore();
   const { linkCardList, setLinkCardList } = useLinkCardStore();
+  const { isOpen } = useModalStore();
   const [folderList, setFolderList] = useState(initialFolderList);
 
   // 링크페이지의 query가 바뀌면 새로운 리스트로 업데이트 해주는 훅
@@ -64,14 +64,6 @@ const LinkPage = ({
     setLinkCardList(initialLinkList);
   }, [initialLinkList, setLinkCardList]);
 
-  const handleModalOpen = (
-    type: "EditLink" | "DeleteLinkModal",
-    link: string,
-    linkId: number
-  ) => {
-    openModal(type, { link, linkId });
-  };
-
   return (
     <>
       <div className="bg-gray100 w-full h-[219px] flex justify-center items-center">
@@ -91,14 +83,7 @@ const LinkPage = ({
           </div>
           <CardsLayout>
             {linkCardList.map((link) => (
-              <LinkCard
-                key={link.id}
-                openEdit={() => handleModalOpen("EditLink", link.url, link.id)}
-                openDelete={() =>
-                  handleModalOpen("DeleteLinkModal", link.url, link.id)
-                }
-                info={link}
-              />
+              <LinkCard key={link.id} info={link} />
             ))}
           </CardsLayout>
           <Pagination totalCount={totalCount} />