Merge pull request #47 from codeit9-temporary/feature/modalstore/link

Feature : modal store 세팅

Author: hongggyelim

components/modal/AddFolderModal.tsx

@@ -8,4 +8,5 @@ const AddFolderModal = ({ folderName }: { folderName: string }) => {
     </ModalContainer>
   );
 };
+
 export default AddFolderModal;

components/modal/AddModal.tsx

@@ -1,18 +1,8 @@
+import { FolderItemType } from "@/types/modalTypes";
 import FolderList from "./modalComponents/FolderList";
 import ModalContainer from "./modalComponents/ModalContainer";
-interface ItemType {
-  id: number;
-  title: string;
-  totalCount: number;
-}
-const list: ItemType[] = [
-  { id: 1, title: "코딩팁", totalCount: 7 },
-  { id: 2, title: "채용 사이트", totalCount: 7 },
-  { id: 3, title: "유용한 글", totalCount: 7 },
-  { id: 4, title: "나만의 장소", totalCount: 7 },
-];
 
-const AddModal = ({ list }: { list: ItemType[] }) => {
+const AddModal = ({ list }: { list: FolderItemType[] }) => {
   return (
     <ModalContainer
       title="폴더에 추가"

components/modal/modalComponents/FolderItem.tsx

@@ -1,13 +1,9 @@
-import { cls } from "@/lib/utils";
+import { bindCls } from "@/lib/utils";
+import { FolderItemType } from "@/types/modalTypes";
 import { useState } from "react";
 import { FaCheck } from "react-icons/fa6";
 
-interface ItemType {
-  id: number;
-  title: string;
-  totalCount: number;
-}
-const FolderItem = ({ item }: { item: ItemType }) => {
+const FolderItem = ({ item }: { item: FolderItemType }) => {
   const [selected, setSelected] = useState(false);
 
   const bgColor = selected ? "bg-gray100" : "bg-white";
@@ -19,15 +15,15 @@ const FolderItem = ({ item }: { item: ItemType }) => {
   };
   return (
     <li
-      className={cls(
+      className={bindCls(
         bgColor,
         "w-full p-2 flex h-10 rounded-lg items-center justify-between"
       )}
       onClick={onClickFolder}
     >
       <div className="flex items-center gap-2">
         <div
-          className={cls(
+          className={bindCls(
             "text-base",
             selected ? "text-purple100" : "text-black300"
           )}

components/modal/modalComponents/FolderList.tsx

@@ -1,22 +1,10 @@
+import { FolderItemType } from "@/types/modalTypes";
 import FolderItem from "./FolderItem";
-interface ItemType {
-  id: number;
-  title: string;
-  totalCount: number;
-}
 
-const list: ItemType[] = [
-  { id: 1, title: "코딩팁", totalCount: 7 },
-  { id: 2, title: "채용 사이트", totalCount: 7 },
-  { id: 3, title: "유용한 글", totalCount: 7 },
-  { id: 4, title: "나만의 장소", totalCount: 7 },
-];
-const FolderList = ({ list }: { list: ItemType[] }) => {
+const FolderList = ({ list }: { list: FolderItemType[] | undefined }) => {
   return (
-    <ul className="mb-6 flex flex-col gap-1 min-w-[280px] w-full">
-      {list.map((item) => (
-        <FolderItem key={item.id} item={item} />
-      ))}
+    <ul className="mb-6 flex flex-col gap-1 w-full">
+      {list?.map((item) => <FolderItem key={item.id} item={item} />)}
     </ul>
   );
 };

components/modal/modalComponents/ModalContainer.tsx

@@ -1,30 +1,39 @@
-import { MouseEvent, ReactNode } from "react";
 import { IoIosClose } from "react-icons/io";
 import Button from "../../Button";
+import { ModalPropType } from "@/types/modalTypes";
+import useModalStore from "@/store/useModalStore";
+import { MouseEvent, useRef } from "react";
 
 const ModalContainer = ({
   title,
   subtitle,
   children,
   buttonText,
   buttonColor,
-  onClick,
-}: {
-  title: string;
-  subtitle?: string;
-  children?: ReactNode;
-  buttonText?: string;
-  buttonColor?: "positive" | "negative";
-  onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
-}) => {
+}: ModalPropType) => {
+  const { closeModal } = useModalStore();
+  const modalRef = useRef<HTMLDivElement | null>(null);
+  const onClickBackDrop = (e: MouseEvent<HTMLDivElement>) => {
+    if (modalRef.current && !modalRef.current.contains(e.target as Node))
+      closeModal();
+  };
+
   return (
-    <div className="z-30 absolute top-0 left-0 flex justify-center items-center bg-black/40 h-screen w-screen">
-      <div className="z-20 relative w-[360px] py-8 px-10 flex flex-col gap-6 bg-white rounded-[15px] border border-gray300">
+    <div
+      onClick={onClickBackDrop}
+      className="z-30 absolute top-0 left-0 flex justify-center items-center bg-black/40 h-screen w-screen"
+    >
+      <div
+        ref={modalRef}
+        className="z-20 relative w-[300px] md:w-[360px] lg:w-[360px] py-8 px-10 flex flex-col gap-6 bg-white rounded-[15px] border border-gray300"
+      >
         {/* 제목 + 부제목 */}
         <div className="flex flex-col items-center justify-center gap-2">
-          <div className="text-center w-[280px] gap-2 text-black300 text-xl leading-6 font-bold">
-            {title}
-          </div>
+          {title && (
+            <div className="text-center w-[250px] md:w-[280px] lg:w-[280px] gap-2 text-black300 text-xl leading-6 font-bold">
+              {title}
+            </div>
+          )}
           {subtitle && (
             <div className="text-sm leading-[22px] font-normal text-gray400">
               {subtitle}
@@ -51,7 +60,7 @@ const ModalContainer = ({
         {/* 모달 닫기 버튼 */}
         <button
           type="button"
-          onClick={onClick}
+          onClick={() => closeModal()}
           className="bg-gray200 absolute top-4 right-4 rounded-full size-6 flex justify-center items-center"
         >
           <IoIosClose className="text-gray400" strokeWidth={2} />

components/modal/modalComponents/ModalInput.tsx

@@ -1,18 +1,18 @@
-import { cls } from "@/lib/utils";
+import { bindCls } from "@/lib/utils";
 
 const ModalInput = ({
   placeholder,
   name,
 }: {
-  placeholder?: string;
+  placeholder: string;
   name: string;
 }) => {
   return (
     <input
       type="text"
       name={name}
       id={name}
-      className={cls(
+      className={bindCls(
         "w-full rounded-lg border border-gray300 py-[18px] px-[15px] mb-6 text-black300",
         "placeholder:text-base placeholder:text-gray400",
         "focus:outline-1px focus:outline-purple100"

components/modal/modalComponents/ModalShareItem.tsx

@@ -1,4 +1,3 @@
-import { cls } from "@/lib/utils";
 import Image from "next/image";
 
 const ModalShareItem = ({

components/modal/modalManager/ModalManager.tsx

@@ -0,0 +1,50 @@
+import useModalStore from "@/store/useModalStore";
+import AddModal from "../AddModal";
+import DeleteFolderModal from "../DeleteFolderModal";
+import AddFolderModal from "../AddFolderModal";
+import DeleteLinkModal from "../DeleteLinkModal";
+import EditModal from "../EditModal";
+import SNSModal from "../SNSModal";
+
+export const ModalType = {
+  AddFolderModal: "AddFolderModal",
+  AddModal: "AddModal",
+  DeleteFolderModal: "DeleteFolderModal",
+  DeleteLinkModal: "DeleteLinkModal",
+  EditModal: "EditModal",
+  SNSModal: "SNSModal",
+} as const;
+
+export type ModalKeysType = keyof typeof ModalType;
+
+export const Modal = () => {
+  const { modalType, isOpen, props } = useModalStore();
+
+  if (!modalType || !isOpen) return null;
+
+  switch (modalType) {
+    case "AddFolderModal":
+      return <AddFolderModal folderName={props.folderName || ""} />;
+    case "AddModal":
+      return (
+        <AddModal
+          list={
+            props.list || [
+              { id: 1, title: "코딩팁", totalCount: 7 },
+              { id: 2, title: "채용 사이트", totalCount: 7 },
+              { id: 3, title: "유용한 글", totalCount: 7 },
+              { id: 4, title: "나만의 장소", totalCount: 7 },
+            ]
+          }
+        />
+      );
+    case "DeleteFolderModal":
+      return <DeleteFolderModal folderName={props.folderName || ""} />;
+    case "DeleteLinkModal":
+      return <DeleteLinkModal link={props.link || ""} />;
+    case "EditModal":
+      return <EditModal folderName={props.folderName || ""} />;
+    case "SNSModal":
+      return <SNSModal folderName={props.folderName || ""} />;
+  }
+};

lib/utils.ts

@@ -1,4 +1,4 @@
 // tailwind 동적 스타일을 위한 함수
-export const cls = (...cls: string[]) => {
+export const bindCls = (...cls: string[]) => {
   return cls.join(" ");
 };