diff --git a/components/modal/AddFolderModal.tsx b/components/modal/AddFolderModal.tsx new file mode 100644 index 0000000..59f447f --- /dev/null +++ b/components/modal/AddFolderModal.tsx @@ -0,0 +1,11 @@ +import ModalContainer from "./modalComponents/ModalContainer"; +import ModalInput from "./modalComponents/ModalInput"; + +const AddFolderModal = ({ folderName }: { folderName: string }) => { + return ( + + + + ); +}; +export default AddFolderModal; diff --git a/components/modal/AddModal.tsx b/components/modal/AddModal.tsx new file mode 100644 index 0000000..1a14b8f --- /dev/null +++ b/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 ( + + + + ); +}; +export default AddModal; diff --git a/components/modal/DeleteFolderModal.tsx b/components/modal/DeleteFolderModal.tsx new file mode 100644 index 0000000..bf37a23 --- /dev/null +++ b/components/modal/DeleteFolderModal.tsx @@ -0,0 +1,13 @@ +import ModalContainer from "./modalComponents/ModalContainer"; + +const DeleteFolderModal = ({ folderName }: { folderName: string }) => { + return ( + + ); +}; +export default DeleteFolderModal; diff --git a/components/modal/DeleteLinkModal.tsx b/components/modal/DeleteLinkModal.tsx new file mode 100644 index 0000000..46643ae --- /dev/null +++ b/components/modal/DeleteLinkModal.tsx @@ -0,0 +1,13 @@ +import ModalContainer from "./modalComponents/ModalContainer"; + +const DeleteLinkModal = ({ link }: { link: string }) => { + return ( + + ); +}; +export default DeleteLinkModal; diff --git a/components/modal/EditModal.tsx b/components/modal/EditModal.tsx new file mode 100644 index 0000000..e69f34b --- /dev/null +++ b/components/modal/EditModal.tsx @@ -0,0 +1,11 @@ +import ModalContainer from "./modalComponents/ModalContainer"; +import ModalInput from "./modalComponents/ModalInput"; + +const EditModal = ({ folderName }: { folderName: string }) => { + return ( + + + + ); +}; +export default EditModal; diff --git a/components/modal/SNSModal.tsx b/components/modal/SNSModal.tsx new file mode 100644 index 0000000..8adfa63 --- /dev/null +++ b/components/modal/SNSModal.tsx @@ -0,0 +1,11 @@ +import ModalContainer from "./modalComponents/ModalContainer"; +import ModalShare from "./modalComponents/ModalShare"; + +const SNSModal = ({ folderName }: { folderName: string }) => { + return ( + + + + ); +}; +export default SNSModal; diff --git a/components/modal/modalComponents/FolderItem.tsx b/components/modal/modalComponents/FolderItem.tsx new file mode 100644 index 0000000..2fa6576 --- /dev/null +++ b/components/modal/modalComponents/FolderItem.tsx @@ -0,0 +1,47 @@ +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 = ({ item }: { item: ItemType }) => { + const [selected, setSelected] = useState(false); + + const bgColor = selected ? "bg-gray100" : "bg-white"; + + const { title, totalCount } = item; + + const onClickFolder = () => { + setSelected(!selected); + }; + return ( +
  • +
    +
    + {title} +
    +
    {totalCount}개 링크
    +
    + {selected && ( +
    + +
    + )} +
    • + ); +}; +export default FolderItem; diff --git a/components/modal/modalComponents/FolderList.tsx b/components/modal/modalComponents/FolderList.tsx new file mode 100644 index 0000000..9e6a593 --- /dev/null +++ b/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 ( + + ); +}; + +export default FolderList; diff --git a/components/modal/modalComponents/ModalContainer.tsx b/components/modal/modalComponents/ModalContainer.tsx new file mode 100644 index 0000000..d5b54c8 --- /dev/null +++ b/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) => void; +}) => { + return ( +
    +
    + {/* 제목 + 부제목 */} +
    +
    + {title} +
    + {subtitle && ( +
    + {subtitle} +
    + )} +
    + {/* children -> inpul, sns공유, folder list 등.. */} +
    + {children && <>{children}} + + {/* 제출 버튼 */} + {buttonText && ( + + )} +
    + + {/* 모달 닫기 버튼 */} + +
    +
    + ); +}; +export default ModalContainer; diff --git a/components/modal/modalComponents/ModalInput.tsx b/components/modal/modalComponents/ModalInput.tsx new file mode 100644 index 0000000..3e8d76c --- /dev/null +++ b/components/modal/modalComponents/ModalInput.tsx @@ -0,0 +1,25 @@ +import { cls } from "@/lib/utils"; + +const ModalInput = ({ + placeholder, + name, +}: { + placeholder?: string; + name: string; +}) => { + return ( + + ); +}; + +export default ModalInput; diff --git a/components/modal/modalComponents/ModalShare.tsx b/components/modal/modalComponents/ModalShare.tsx new file mode 100644 index 0000000..a6213a5 --- /dev/null +++ b/components/modal/modalComponents/ModalShare.tsx @@ -0,0 +1,17 @@ +import ModalShareItem from "./ModalShareItem"; + +const ModalShare = () => { + return ( +
    + + + +
    + ); +}; +export default ModalShare; diff --git a/components/modal/modalComponents/ModalShareItem.tsx b/components/modal/modalComponents/ModalShareItem.tsx new file mode 100644 index 0000000..7ba20b7 --- /dev/null +++ b/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 ( +
    +
    + {text} +
    +
    {text}
    +
    + ); +}; +export default ModalShareItem; diff --git a/lib/utils.ts b/lib/utils.ts new file mode 100644 index 0000000..5af481a --- /dev/null +++ b/lib/utils.ts @@ -0,0 +1,4 @@ +// tailwind 동적 스타일을 위한 함수 +export const cls = (...cls: string[]) => { + return cls.join(" "); +}; diff --git a/public/icons/Facebook.svg b/public/icons/Facebook.svg new file mode 100644 index 0000000..c6f0d77 --- /dev/null +++ b/public/icons/Facebook.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/icons/Kakao.svg b/public/icons/Kakao.svg new file mode 100644 index 0000000..978f2a6 --- /dev/null +++ b/public/icons/Kakao.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/icons/link.svg b/public/icons/link.svg new file mode 100644 index 0000000..52abd0d --- /dev/null +++ b/public/icons/link.svg @@ -0,0 +1,11 @@ + + + + + + + + + + +