Feat : 링크 생성 시 폴더 선택 모달창 수정

components/modal/AddFolderModal.tsx

@@ -3,6 +3,7 @@ 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";
 
 const AddFolderModal = ({ folderName }: { folderName: string }) => {
   const [value, setValue] = useState("");
@@ -27,17 +28,22 @@ const AddFolderModal = ({ folderName }: { folderName: string }) => {
     closeModal();
   };
   return (
-    <ModalContainer
-      title="폴더 추가"
-      buttonText="추가하기"
-      onClick={handleSubmit}
-    >
+    <ModalContainer title="폴더 추가">
       <ModalInput
         placeholder="내용 입력"
         name={folderName}
         value={value}
         onChange={handleChange}
       />
+      <SubmitButton
+        type="button"
+        onClick={handleSubmit}
+        width="w-full"
+        height="h-[51px] "
+        color="positive"
+      >
+        추가하기
+      </SubmitButton>
     </ModalContainer>
   );
 };

components/modal/AddModal.tsx

@@ -1,15 +1,21 @@
 import { FolderItemType } from "@/types/modalTypes";
 import FolderList from "./modalComponents/FolderList";
 import ModalContainer from "./modalComponents/ModalContainer";
+import SubmitButton from "../SubMitButton";
 
-const AddModal = ({ list }: { list: FolderItemType[] }) => {
+const AddModal = ({ list, link }: { list: FolderItemType[]; link: string }) => {
   return (
-    <ModalContainer
-      title="폴더에 추가"
-      subtitle="링크 주소"
-      buttonText="추가하기"
-    >
+    <ModalContainer title="폴더에 추가" subtitle={link}>
       <FolderList list={list} />
+      <SubmitButton
+        type="button"
+        // onClick={handleSubmit}
+        width="w-full"
+        height="h-[51px] "
+        color="positive"
+      >
+        추가하기
+      </SubmitButton>
     </ModalContainer>
   );
 };

components/modal/DeleteFolderModal.tsx

@@ -1,13 +1,19 @@
+import SubmitButton from "../SubMitButton";
 import ModalContainer from "./modalComponents/ModalContainer";
 
 const DeleteFolderModal = ({ folderName }: { folderName: string }) => {
   return (
-    <ModalContainer
-      title="폴더 삭제"
-      subtitle={folderName}
-      buttonText="삭제하기"
-      buttonColor="negative"
-    ></ModalContainer>
+    <ModalContainer title="폴더 삭제" subtitle={folderName}>
+      <SubmitButton
+        type="button"
+        // onClick={handleSubmit}
+        width="w-full"
+        height="h-[51px] "
+        color="negative"
+      >
+        삭제하기
+      </SubmitButton>
+    </ModalContainer>
   );
 };
 export default DeleteFolderModal;

components/modal/DeleteLinkModal.tsx

@@ -1,13 +1,20 @@
+import SubmitButton from "../SubMitButton";
 import ModalContainer from "./modalComponents/ModalContainer";
 
 const DeleteLinkModal = ({ link }: { link: string }) => {
   return (
-    <ModalContainer
-      title="링크 삭제"
-      subtitle={link}
-      buttonText="삭제하기"
-      buttonColor="negative"
-    ></ModalContainer>
+    <ModalContainer title="링크 삭제" subtitle={link}>
+      {" "}
+      <SubmitButton
+        type="button"
+        // onClick={handleSubmit}
+        width="w-full"
+        height="h-[51px] "
+        color="negative"
+      >
+        삭제하기
+      </SubmitButton>
+    </ModalContainer>
   );
 };
 export default DeleteLinkModal;

components/modal/EditModal.tsx

@@ -3,6 +3,7 @@ import ModalContainer from "./modalComponents/ModalContainer";
 import ModalInput from "./modalComponents/ModalInput";
 import useModalStore from "@/store/useModalStore";
 import { putFolder } from "@/lib/api/folder";
+import SubmitButton from "../SubMitButton";
 
 const EditModal = ({ folderName }: { folderName: string }) => {
   const [value, setValue] = useState("");
@@ -29,17 +30,22 @@ const EditModal = ({ folderName }: { folderName: string }) => {
     closeModal();
   };
   return (
-    <ModalContainer
-      title="폴더 이름 변경"
-      buttonText="변경하기"
-      onClick={handleSubmit}
-    >
+    <ModalContainer title="폴더 이름 변경">
       <ModalInput
         placeholder="내용 입력"
         name={folderName}
         value={value}
         onChange={handleChange}
       />
+      <SubmitButton
+        type="button"
+        // onClick={handleSubmit}
+        width="w-full"
+        height="h-[51px] "
+        color="positive"
+      >
+        변경하기
+      </SubmitButton>
     </ModalContainer>
   );
 };

components/modal/modalComponents/FolderItemRadio.tsx

@@ -0,0 +1,46 @@
+import { bindCls } from "@/lib/utils";
+import { FolderItemType } from "@/types/modalTypes";
+import { useState } from "react";
+import { FaCheck } from "react-icons/fa6";
+
+const FolderItemRadio = ({
+  item,
+  isSelected,
+}: {
+  item: FolderItemType;
+  isSelected: boolean;
+}) => {
+  // const bgColor = selected ? "bg-gray100" : "bg-white";
+
+  const { name, linkCount, id } = item;
+
+  const onClickFolder = () => {
+    // setSelected(!selected);
+  };
+  return (
+    <li
+      className={bindCls(
+        // bgColor,
+        "w-full p-2 flex h-10 rounded-lg items-center justify-between cursor-pointer"
+      )}
+      onClick={onClickFolder}
+    >
+      <div className="flex items-center gap-2">
+        <input
+          value={name}
+          type="radio"
+          className="opacity-0"
+          id={String(id)}
+        />
+        <label htmlFor={String(id)}>{name}</label>
+        <div className="text-gray400 text-sm">{linkCount}개 링크</div>
+      </div>
+      {/* {selected && ( */}
+      <div>
+        <FaCheck className="text-purple100" />
+      </div>
+      {/* )} */}
+    </li>
+  );
+};
+export default FolderItemRadio;

components/modal/modalComponents/FolderList.tsx

@@ -1,10 +1,15 @@
 import { FolderItemType } from "@/types/modalTypes";
-import FolderItem from "./FolderItem";
+import FolderItemRadio from "./FolderItemRadio";
+import { useState } from "react";
 
 const FolderList = ({ list }: { list: FolderItemType[] | undefined }) => {
+  const [isSelected, setIsSelected] = useState(false);
+  const [selectedId, setSelectedId] = useState<number[]>();
   return (
     <ul className="mb-6 flex flex-col gap-1 w-full">
-      {list?.map((item) => <FolderItem key={item.id} item={item} />)}
+      {list?.map((item) => (
+        <FolderItemRadio key={item.id} item={item} isSelected={isSelected} />
+      ))}
     </ul>
   );
 };

components/modal/modalComponents/ModalContainer.tsx

@@ -4,14 +4,7 @@ import { ModalPropType } from "@/types/modalTypes";
 import useModalStore from "@/store/useModalStore";
 import { MouseEvent, useRef } from "react";
 
-const ModalContainer = ({
-  title,
-  subtitle,
-  children,
-  buttonText,
-  buttonColor,
-  onClick,
-}: ModalPropType) => {
+const ModalContainer = ({ title, subtitle, children }: ModalPropType) => {
   const { closeModal } = useModalStore();
   const modalRef = useRef<HTMLDivElement | null>(null);
   const onClickBackDrop = (e: MouseEvent<HTMLDivElement>) => {
@@ -41,22 +34,9 @@ const ModalContainer = ({
             </div>
           )}
         </div>
-        {/* children -> inpul, sns공유, folder list 등.. */}
+        {/* children -> input, sns공유, folder list 등.. */}
         <div className="flex justify-center items-center flex-col">
           {children && <>{children}</>}
-
-          {/* 제출 버튼 */}
-          {buttonText && (
-            <SubmitButton
-              type="button"
-              onClick={onClick}
-              width="w-full"
-              height="h-[51px] "
-              color={buttonColor}
-            >
-              {buttonText}
-            </SubmitButton>
-          )}
         </div>
 
         {/* 모달 닫기 버튼 */}

components/modal/modalManager/ModalManager.tsx

@@ -36,6 +36,7 @@ export const Modal = () => {
               { id: 4, name: "나만의 장소", linkCount: 7, createAt: "" },
             ]
           }
+          link={props.link || ""}
         />
       );
     case "DeleteFolderModal":

types/modalTypes.ts

@@ -4,9 +4,6 @@ export interface ModalPropType {
   title?: string;
   subtitle?: string;
   children?: ReactNode;
-  buttonText?: string;
-  buttonColor?: "positive" | "negative";
-  onClick?: () => void;
   folderName?: string;
   list?: FolderItemType[];
   link?: string;