Merge pull request #60 from codeit9-temporary/feature/modalAction

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

Author: hongggyelim

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("");
@@ -18,26 +19,30 @@ const AddFolderModal = ({ folderName }: { folderName: string }) => {
     };
     if (value !== "") {
       try {
-        const res = await postFolders(body);
-        console.log(res);
+        await postFolders(body);
       } catch (error) {
-        console.log(error);
+        console.log(error, "폴더 생성 에러");
       }
     }
     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,53 @@
 import { FolderItemType } from "@/types/modalTypes";
 import FolderList from "./modalComponents/FolderList";
 import ModalContainer from "./modalComponents/ModalContainer";
+import SubmitButton from "../SubMitButton";
+import { useState } from "react";
+import { postLink } from "@/lib/api/link";
+import useModalStore from "@/store/useModalStore";
 
-const AddModal = ({ list }: { list: FolderItemType[] }) => {
+const AddModal = ({ list, link }: { list: FolderItemType[]; link: string }) => {
+  const [selectedId, setSelectedId] = useState<number | null>(null);
+  const { closeModal } = useModalStore();
+  const handleSubmit = async () => {
+    const body = {
+      folderId: Number(selectedId),
+      url: link,
+    };
+    if (link !== "" && selectedId) {
+      try {
+        await postLink(body);
+      } catch (error) {
+        console.log(error, "링크 생성 에러");
+      } finally {
+        closeModal();
+      }
+    }
+  };
+
+  const handleClickFolderItem = (id: number) => {
+    if (selectedId === id) {
+      setSelectedId(null);
+    } else {
+      setSelectedId(id);
+    }
+  };
   return (
-    <ModalContainer
-      title="폴더에 추가"
-      subtitle="링크 주소"
-      buttonText="추가하기"
-    >
-      <FolderList list={list} />
+    <ModalContainer title="폴더에 추가" subtitle={link}>
+      <FolderList
+        list={list}
+        selectedId={selectedId}
+        onClick={handleClickFolderItem}
+      />
+      <SubmitButton
+        type="button"
+        onClick={handleSubmit}
+        width="w-full"
+        height="h-[51px] "
+        color="positive"
+      >
+        추가하기
+      </SubmitButton>
     </ModalContainer>
   );
 };

components/modal/DeleteFolderModal.tsx

@@ -1,13 +1,20 @@
+import SubmitButton from "../SubMitButton";
 import ModalContainer from "./modalComponents/ModalContainer";
 
 const DeleteFolderModal = ({ folderName }: { folderName: string }) => {
+  console.log("folderName", folderName);
   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,19 @@
+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/FolderItem.tsx

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

components/modal/modalComponents/FolderItemRadio.tsx

@@ -1,10 +1,25 @@
 import { FolderItemType } from "@/types/modalTypes";
-import FolderItem from "./FolderItem";
+import FolderItemRadio from "./FolderItemRadio";
 
-const FolderList = ({ list }: { list: FolderItemType[] | undefined }) => {
+const FolderList = ({
+  list,
+  selectedId,
+  onClick,
+}: {
+  list: FolderItemType[] | undefined;
+  selectedId: number | null;
+  onClick: (id: number) => void;
+}) => {
   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}
+          selectedId={selectedId}
+          onClick={onClick}
+        />
+      ))}
     </ul>
   );
 };

components/modal/modalComponents/FolderList.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/modalComponents/ModalContainer.tsx

@@ -30,21 +30,22 @@ export const Modal = () => {
         <AddModal
           list={
             props.list || [
-              { id: 1, name: "코딩팁", linkCount: 7, createAt: "" },
-              { id: 2, name: "채용 사이트", linkCount: 7, createAt: "" },
-              { id: 3, name: "유용한 글", linkCount: 7, createAt: "" },
-              { id: 4, name: "나만의 장소", linkCount: 7, createAt: "" },
+              { id: 1, name: "코딩팁", linkCount: 7, createdAt: "" },
+              { id: 2, name: "채용 사이트", linkCount: 7, createdAt: "" },
+              { id: 3, name: "유용한 글", linkCount: 7, createdAt: "" },
+              { id: 4, name: "나만의 장소", linkCount: 7, createdAt: "" },
             ]
           }
+          link={props.link || ""}
         />
       );
     case "DeleteFolderModal":
-      return <DeleteFolderModal folderName={props.folderName || ""} />;
+      return <DeleteFolderModal folderName={props.folderName || "폴더이름"} />;
     case "DeleteLinkModal":
-      return <DeleteLinkModal link={props.link || ""} />;
+      return <DeleteLinkModal link={props.link || "링크"} />;
     case "EditModal":
-      return <EditModal folderName={props.folderName || ""} />;
+      return <EditModal folderName={props.folderName || "폴더이름"} />;
     case "SNSModal":
-      return <SNSModal folderName={props.folderName || ""} />;
+      return <SNSModal folderName={props.folderName || "폴더이름"} />;
   }
 };