Feat : 링크 수정 & 삭제 기능 작업

components/Dropdown.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+interface DropdownProps {
+  isDropdownOpen: boolean;
+  onEdit: () => void;
+  openDelete: () => void;
+}
+
+const Dropdown = ({ isDropdownOpen, 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;

components/LinkCard.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import timeAgo from "@/util/timAgo";
 import Image from "next/image";
+import Dropdown from "./Dropdown";
 
 interface linkDataType {
   id: number;
@@ -13,77 +14,98 @@ interface linkDataType {
 }
 
 interface CardItemProps extends linkDataType {
+  onEdit: () => void;
+  openDelete: () => void;
   isFavoritePage?: boolean; // 즐겨찾기 페이지 여부를 판별하는 flag
 }
 
-const LinkCard = ({ isFavoritePage, ...info }: CardItemProps) => {
+const LinkCard = ({
+  onEdit,
+  openDelete,
+  isFavoritePage,
+  ...info
+}: CardItemProps) => {
   const [isSubscribed, setIsSubscribed] = useState(false);
-  const [isOpen, setIsOpen] = useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
   const formattedDate = info.createdAt?.slice(0, 10).replace(/-/g, ".");
   const createdTime = timeAgo(info.createdAt);
 
+  // dropdown 버튼
+  const toggleDropdown = () => setIsDropdownOpen((prev) => !prev);
+
   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%]">
-        <Image
-          src={info.imageSource || `/images/no-content.svg`}
-          className="object-cover"
-          alt="링크 미리보기"
-          fill
-        />
-        {/* isFavoritePage가 false일 때만 즐겨찾기 버튼 렌더링 */}
-        {!isFavoritePage &&
-          (isSubscribed ? (
-            <div
-              onClick={() => setIsSubscribed(!isSubscribed)}
-              className="absolute top-[15px] right-[15px] z-1"
-            >
-              <Image
-                src="/icons/star-fill.svg"
-                width={32}
-                height={32}
-                alt="subscripe button"
-              />
-            </div>
-          ) : (
-            <div
-              onClick={() => setIsSubscribed(!isSubscribed)}
-              className="absolute top-[15px] right-[15px] z-1"
-            >
-              <Image
-                src="/icons/star-empty.svg"
-                width={32}
-                height={32}
-                alt="subscripe button"
-              />
-            </div>
-          ))}
-      </section>
+    <>
+      <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%]">
+          <Image
+            src={info.imageSource || `/images/no-content.svg`}
+            className="object-cover"
+            alt="링크 미리보기"
+            fill
+          />
+          {/* isFavoritePage가 false일 때만 즐겨찾기 버튼 렌더링 */}
+          {!isFavoritePage &&
+            (isSubscribed ? (
+              <div
+                onClick={() => setIsSubscribed(!isSubscribed)}
+                className="absolute top-[15px] right-[15px] z-1"
+              >
+                <Image
+                  src="/icons/star-fill.svg"
+                  width={32}
+                  height={32}
+                  alt="subscripe button"
+                />
+              </div>
+            ) : (
+              <div
+                onClick={() => setIsSubscribed(!isSubscribed)}
+                className="absolute top-[15px] right-[15px] z-1"
+              >
+                <Image
+                  src="/icons/star-empty.svg"
+                  width={32}
+                  height={32}
+                  alt="subscripe button"
+                />
+              </div>
+            ))}
+        </section>
 
-      <section className="w-full h-[40%] flex flex-col justify-between gap-[10px] pt-[15px] px-[20px] pb-[10px]">
-        <div className="flex justify-between">
-          <span className="text-sm text-gray-400">
-            {createdTime || "1일 전"}
-          </span>
-          {/* isFavoritePage가 false일 때만 케밥 버튼 렌더링 */}
-          {!isFavoritePage && (
-            <div
-              className="relative w-[21px] h-[17px]"
-              onClick={(state) => setIsOpen(!state)}
-            >
-              <Image src="/icons/kebab.svg" alt="kebab button" fill />
-            </div>
-          )}
-        </div>
-        <div className="text-[black100] text-lg ">
-          {info.description || "설명"}
-        </div>
-        <div className="text-sm text-[black200]">
-          {formattedDate || "2024.11.06"}
-        </div>
-      </section>
-    </div>
+        <section className="w-full h-[40%] flex flex-col justify-between gap-[10px] pt-[15px] px-[20px] pb-[10px]">
+          <div className="flex justify-between">
+            <span className="text-sm text-gray-400">
+              {createdTime || "1일 전"}
+            </span>
+            {/* isFavoritePage가 false일 때만 케밥 버튼 렌더링 */}
+            {!isFavoritePage && (
+              <div className="relative">
+                <button
+                  className="relative w-[21px] h-[17px]"
+                  onClick={toggleDropdown}
+                >
+                  <Image src="/icons/kebab.svg" alt="kebab button" fill />
+                </button>
+                {isDropdownOpen && (
+                  <Dropdown
+                    isDropdownOpen={isDropdownOpen}
+                    onEdit={onEdit}
+                    openDelete={openDelete}
+                  />
+                )}
+              </div>
+            )}
+          </div>
+          <div className="text-[black100] text-lg ">
+            {info.description || "설명"}
+          </div>
+          <div className="text-sm text-[black200]">
+            {formattedDate || "2024.11.06"}
+          </div>
+        </section>
+      </div>
+    </>
   );
 };
 

components/modal/AddFolderModal.tsx

@@ -1,7 +1,7 @@
 import { ChangeEvent, useState } from "react";
+import { postFolders } from "@/lib/api/folder";
 import ModalContainer from "./modalComponents/ModalContainer";
 import ModalInput from "./modalComponents/ModalInput";
-import { postFolders } from "@/lib/api/folder";
 import useModalStore from "@/store/useModalStore";
 import SubmitButton from "../SubMitButton";
 

components/modal/DeleteLinkModal.tsx

@@ -1,14 +1,34 @@
+import useModalStore from "@/store/useModalStore";
 import SubmitButton from "../SubMitButton";
 import ModalContainer from "./modalComponents/ModalContainer";
+import { useLinkCardStore } from "@/store/useLinkCardStore";
+
+const DeleteLinkModal = ({
+  link,
+  linkId,
+}: {
+  link: string;
+  linkId: number;
+}) => {
+  const { closeModal } = useModalStore();
+  const { deleteLink } = useLinkCardStore();
+
+  const handleDelete = async () => {
+    try {
+      await deleteLink(linkId);
+      closeModal();
+    } catch (error) {
+      console.error("Failed to delete the link:", error);
+    }
+  };
 
-const DeleteLinkModal = ({ link }: { link: string }) => {
   return (
     <ModalContainer title="링크 삭제" subtitle={link}>
       <SubmitButton
         type="button"
-        // onClick={handleSubmit}
+        onClick={handleDelete}
         width="w-full"
-        height="h-[51px] "
+        height="h-[51px]"
         color="negative"
       >
         삭제하기

components/modal/EditLink.tsx

@@ -0,0 +1,55 @@
+import { ChangeEvent, useState } from "react";
+import { putLinkURL } from "@/lib/api/link";
+import { useLinkCardStore } from "@/store/useLinkCardStore";
+import ModalContainer from "./modalComponents/ModalContainer";
+import ModalInput from "./modalComponents/ModalInput";
+import useModalStore from "@/store/useModalStore";
+import SubmitButton from "../SubMitButton";
+
+const EditLink = ({
+  folderName,
+  link,
+  linkId,
+}: {
+  folderName: string;
+  link: string;
+  linkId: number;
+}) => {
+  const [value, setValue] = useState("");
+  const { closeModal } = useModalStore();
+  const { updateLink } = useLinkCardStore();
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  };
+
+  const handleSubmit = async () => {
+    const body = {
+      url: value,
+    };
+    if (value !== "") {
+      await updateLink(linkId, body);
+    }
+    closeModal();
+  };
+  return (
+    <ModalContainer title="링크 주소 변경">
+      <ModalInput
+        placeholder={link}
+        name={folderName}
+        value={value}
+        onChange={handleChange}
+      />
+      <SubmitButton
+        type="button"
+        onClick={handleSubmit}
+        width="w-full"
+        height="h-[51px] "
+        color="positive"
+      >
+        변경하기
+      </SubmitButton>
+    </ModalContainer>
+  );
+};
+export default EditLink;

components/modal/modalManager/ModalManager.tsx

@@ -5,6 +5,7 @@ import AddFolderModal from "../AddFolderModal";
 import DeleteLinkModal from "../DeleteLinkModal";
 import EditModal from "../EditModal";
 import SNSModal from "../SNSModal";
+import EditLink from "../EditLink";
 
 export const ModalType = {
   AddFolderModal: "AddFolderModal",
@@ -13,6 +14,7 @@ export const ModalType = {
   DeleteLinkModal: "DeleteLinkModal",
   EditModal: "EditModal",
   SNSModal: "SNSModal",
+  EditLink: "EditLink",
 } as const;
 
 export type ModalKeysType = keyof typeof ModalType;
@@ -42,10 +44,23 @@ export const Modal = () => {
     case "DeleteFolderModal":
       return <DeleteFolderModal folderName={props.folderName || "폴더이름"} />;
     case "DeleteLinkModal":
-      return <DeleteLinkModal link={props.link || "링크"} />;
+      return (
+        <DeleteLinkModal
+          link={props.link || "링크"}
+          linkId={Number(props.linkId)}
+        />
+      );
     case "EditModal":
       return <EditModal folderName={props.folderName || "폴더이름"} />;
     case "SNSModal":
       return <SNSModal folderName={props.folderName || "폴더이름"} />;
+    case "EditLink":
+      return (
+        <EditLink
+          folderName={props.folderName || "폴더이름"}
+          link={props.link || "링크"}
+          linkId={Number(props.linkId)}
+        />
+      );
   }
 };