Feat : 모달 UI 구현

components/modal/AddFolderModal.tsx

@@ -0,0 +1,11 @@
+import ModalContainer from "./modalComponents/ModalContainer";
+import ModalInput from "./modalComponents/ModalInput";
+
+const AddFolderModal = ({ folderName }: { folderName: string }) => {
+  return (
+    <ModalContainer title="폴더 추가" buttonText="추가하기">
+      <ModalInput placeholder="내용 입력" name={folderName} />
+    </ModalContainer>
+  );
+};
+export default AddFolderModal;

components/modal/AddModal.tsx

@@ -0,0 +1,26 @@
+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[] }) => {
+  return (
+    <ModalContainer
+      title="폴더에 추가"
+      subtitle="링크 주소"
+      buttonText="추가하기"
+    >
+      <FolderList list={list} />
+    </ModalContainer>
+  );
+};
+export default AddModal;

components/modal/DeleteFolderModal.tsx

@@ -0,0 +1,13 @@
+import ModalContainer from "./modalComponents/ModalContainer";
+
+const DeleteFolderModal = ({ folderName }: { folderName: string }) => {
+  return (
+    <ModalContainer
+      title="폴더 삭제"
+      subtitle={folderName}
+      buttonText="삭제하기"
+      buttonColor="negative"
+    ></ModalContainer>
+  );
+};
+export default DeleteFolderModal;

components/modal/DeleteLinkModal.tsx

@@ -0,0 +1,13 @@
+import ModalContainer from "./modalComponents/ModalContainer";
+
+const DeleteLinkModal = ({ link }: { link: string }) => {
+  return (
+    <ModalContainer
+      title="링크 삭제"
+      subtitle={link}
+      buttonText="삭제하기"
+      buttonColor="negative"
+    ></ModalContainer>
+  );
+};
+export default DeleteLinkModal;

components/modal/EditModal.tsx

@@ -0,0 +1,11 @@
+import ModalContainer from "./modalComponents/ModalContainer";
+import ModalInput from "./modalComponents/ModalInput";
+
+const EditModal = ({ folderName }: { folderName: string }) => {
+  return (
+    <ModalContainer title="폴더 이름 변경" buttonText="변경하기">
+      <ModalInput placeholder="내용 입력" name={folderName} />
+    </ModalContainer>
+  );
+};
+export default EditModal;

components/modal/SNSModal.tsx

@@ -0,0 +1,11 @@
+import ModalContainer from "./modalComponents/ModalContainer";
+import ModalShare from "./modalComponents/ModalShare";
+
+const SNSModal = ({ folderName }: { folderName: string }) => {
+  return (
+    <ModalContainer title="폴더 공유" subtitle={folderName}>
+      <ModalShare />
+    </ModalContainer>
+  );
+};
+export default SNSModal;

components/modal/modalComponents/FolderItem.tsx

@@ -0,0 +1,44 @@
+import { cls } from "@/lib/utils";
+import { useState } from "react";
+import { FaCheck } from "react-icons/fa6";
+
+interface ItemType {
+  id: number;
+  title: string;
+  totalCount: number;
+}
+const FolderItem = ({ index, item }: { index: number; item: ItemType }) => {
+  const [selected, setSelected] = useState(false);
+  const bgColor = index % 2 === 0 ? "bg-white" : "bg-[#F0F6FF]";
+  const { title, totalCount } = item;
+  const onClickFolder = () => {
+    setSelected(!selected);
+  };
+  return (
+    <li
+      className={cls(
+        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(
+            "text-base",
+            selected ? "text-purple100" : "text-black300"
+          )}
+        >
+          {title}
+        </div>
+        <div className="text-gray400 text-sm">{totalCount}개 링크</div>
+      </div>
+      {selected && (
+        <div>
+          <FaCheck className="text-purple100" />
+        </div>
+      )}
+    </li>
+  );
+};
+export default FolderItem;

components/modal/modalComponents/FolderList.tsx

@@ -0,0 +1,24 @@
+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[] }) => {
+  return (
+    <ul className="mb-6 flex flex-col gap-1 min-w-[280px] w-full">
+      {list.map((item, index) => (
+        <FolderItem key={item.id} item={item} index={index} />
+      ))}
+    </ul>
+  );
+};
+
+export default FolderList;

components/modal/modalComponents/ModalContainer.tsx

@@ -0,0 +1,63 @@
+import { MouseEvent, ReactNode } from "react";
+import { IoIosClose } from "react-icons/io";
+import Button from "../../Button";
+
+const ModalContainer = ({
+  title,
+  subtitle,
+  children,
+  buttonText,
+  buttonColor,
+  onClick,
+}: {
+  title: string;
+  subtitle?: string;
+  children?: ReactNode;
+  buttonText?: string;
+  buttonColor?: "positive" | "negative";
+  onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+}) => {
+  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 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>
+          {subtitle && (
+            <div className="text-sm leading-[22px] font-normal text-gray400">
+              {subtitle}
+            </div>
+          )}
+        </div>
+        {/* children -> inpul, sns공유, folder list 등.. */}
+        <div className="flex justify-center items-center flex-col">
+          {children && <>{children}</>}
+
+          {/* 제출 버튼 */}
+          {buttonText && (
+            <Button
+              type="button"
+              width="w-full"
+              height="h-[51px] "
+              color={buttonColor}
+            >
+              {buttonText}
+            </Button>
+          )}
+        </div>
+
+        {/* 모달 닫기 버튼 */}
+        <button
+          type="button"
+          onClick={onClick}
+          className="bg-gray200 absolute top-4 right-4 rounded-full size-6 flex justify-center items-center"
+        >
+          <IoIosClose className="text-gray400" strokeWidth={2} />
+        </button>
+      </div>
+    </div>
+  );
+};
+export default ModalContainer;

components/modal/modalComponents/ModalInput.tsx

@@ -0,0 +1,25 @@
+import { cls } from "@/lib/utils";
+
+const ModalInput = ({
+  placeholder,
+  name,
+}: {
+  placeholder?: string;
+  name: string;
+}) => {
+  return (
+    <input
+      type="text"
+      name={name}
+      id={name}
+      className={cls(
+        "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"
+      )}
+      placeholder={placeholder}
+    ></input>
+  );
+};
+
+export default ModalInput;

components/modal/modalComponents/ModalShare.tsx

@@ -0,0 +1,17 @@
+import ModalShareItem from "./ModalShareItem";
+
+const ModalShare = () => {
+  return (
+    <div className="flex gap-8">
+      <ModalShareItem src="/icons/Kakao.svg" text="카카오톡" bg="#FEE500" />
+      <ModalShareItem src="/icons/Facebook.svg" text="페이스북" bg="#1877F2" />
+      <ModalShareItem
+        src="/icons/link.svg"
+        text="링크 복사"
+        bg="rgba(157, 157, 157, 0.04)"
+        color="#6D6AFE"
+      />
+    </div>
+  );
+};
+export default ModalShare;

components/modal/modalComponents/ModalShareItem.tsx

@@ -0,0 +1,33 @@
+import { cls } from "@/lib/utils";
+import Image from "next/image";
+
+const ModalShareItem = ({
+  src,
+  text,
+  bg,
+  color,
+}: {
+  src: string;
+  text: string;
+  bg: string;
+  color?: string;
+}) => {
+  return (
+    <div className="flex flex-col justify-center items-center gap-[10px]">
+      <div
+        style={{ backgroundColor: bg }}
+        className={`bg-[${bg}] size-[42px] rounded-full flex justify-center items-center`}
+      >
+        <Image
+          src={src}
+          width={18}
+          height={18}
+          alt={text}
+          style={{ fill: color }}
+        />
+      </div>
+      <div className="text-[13px] leading-[15px] text-[#444444] ">{text}</div>
+    </div>
+  );
+};
+export default ModalShareItem;

lib/utils.ts

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

pages/test/index.tsx

@@ -0,0 +1,32 @@
+import AddFolderModal from "@/components/modal/AddFolderModal";
+import AddModal from "@/components/modal/AddModal";
+import DeleteFolderModal from "@/components/modal/DeleteFolderModal";
+import DeleteLinkModal from "@/components/modal/DeleteLinkModal";
+import EditModal from "@/components/modal/EditModal";
+import SNSModal from "@/components/modal/SNSModal";
+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 },
+];
+export default function Test() {
+  return (
+    <div className="m-10">
+      <div>테스트 페이지</div>
+      <div>
+        <AddFolderModal folderName="공부" />
+        <AddModal list={list} />
+        <DeleteFolderModal folderName="공부" />
+        <DeleteLinkModal link="www.abc.com" />
+        <SNSModal folderName="공부" />
+        <EditModal folderName="공부" />
+      </div>
+    </div>
+  );
+}