diff --git a/components/modal/AddFolderModal.tsx b/components/modal/AddFolderModal.tsx index 31af1fd..29d6c62 100644 --- a/components/modal/AddFolderModal.tsx +++ b/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 ( - + + + 추가하기 + ); }; diff --git a/components/modal/AddModal.tsx b/components/modal/AddModal.tsx index b9b6537..99233f7 100644 --- a/components/modal/AddModal.tsx +++ b/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(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 ( - - + + + + 추가하기 + ); }; diff --git a/components/modal/DeleteFolderModal.tsx b/components/modal/DeleteFolderModal.tsx index bf37a23..f49aa4d 100644 --- a/components/modal/DeleteFolderModal.tsx +++ b/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 ( - + + + 삭제하기 + + ); }; export default DeleteFolderModal; diff --git a/components/modal/DeleteLinkModal.tsx b/components/modal/DeleteLinkModal.tsx index 46643ae..729127a 100644 --- a/components/modal/DeleteLinkModal.tsx +++ b/components/modal/DeleteLinkModal.tsx @@ -1,13 +1,19 @@ +import SubmitButton from "../SubMitButton"; 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 index 052fd35..9a24fe3 100644 --- a/components/modal/EditModal.tsx +++ b/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 ( - + + + 변경하기 + ); }; diff --git a/components/modal/modalComponents/FolderItem.tsx b/components/modal/modalComponents/FolderItem.tsx deleted file mode 100644 index b1afcb3..0000000 --- a/components/modal/modalComponents/FolderItem.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { bindCls } from "@/lib/utils"; -import { FolderItemType } from "@/types/modalTypes"; -import { useState } from "react"; -import { FaCheck } from "react-icons/fa6"; - -const FolderItem = ({ item }: { item: FolderItemType }) => { - const [selected, setSelected] = useState(false); - - const bgColor = selected ? "bg-gray100" : "bg-white"; - - const { name, linkCount } = item; - - const onClickFolder = () => { - setSelected(!selected); - }; - return ( -
  • -
    -
    - {name} -
    -
    {linkCount}개 링크
    -
    - {selected && ( -
    - -
    - )} -
    • - ); -}; -export default FolderItem; diff --git a/components/modal/modalComponents/FolderItemRadio.tsx b/components/modal/modalComponents/FolderItemRadio.tsx new file mode 100644 index 0000000..dda935d --- /dev/null +++ b/components/modal/modalComponents/FolderItemRadio.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 ( +
  • +
    + + +
    {linkCount}개 링크
    +
    + {isSelected && ( +
    + +
    + )} +
    • + ); +}; +export default FolderItemRadio; diff --git a/components/modal/modalComponents/FolderList.tsx b/components/modal/modalComponents/FolderList.tsx index 6bc3be3..2030946 100644 --- a/components/modal/modalComponents/FolderList.tsx +++ b/components/modal/modalComponents/FolderList.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 (
      - {list?.map((item) => )} + {list?.map((item) => ( + + ))}
    ); }; diff --git a/components/modal/modalComponents/ModalContainer.tsx b/components/modal/modalComponents/ModalContainer.tsx index 1173d9a..9e8138d 100644 --- a/components/modal/modalComponents/ModalContainer.tsx +++ b/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(null); const onClickBackDrop = (e: MouseEvent) => { @@ -41,22 +34,9 @@ const ModalContainer = ({ )} - {/* children -> inpul, sns공유, folder list 등.. */} + {/* children -> input, sns공유, folder list 등.. */}
    {children && <>{children}} - - {/* 제출 버튼 */} - {buttonText && ( - - {buttonText} - - )}
    {/* 모달 닫기 버튼 */} diff --git a/components/modal/modalManager/ModalManager.tsx b/components/modal/modalManager/ModalManager.tsx index fe380b3..d154400 100644 --- a/components/modal/modalManager/ModalManager.tsx +++ b/components/modal/modalManager/ModalManager.tsx @@ -30,21 +30,22 @@ export const Modal = () => { ); case "DeleteFolderModal": - return ; + return ; case "DeleteLinkModal": - return ; + return ; case "EditModal": - return ; + return ; case "SNSModal": - return ; + return ; } }; diff --git a/pages/api/folders/index.ts b/pages/api/folders/index.ts index 1883e66..1b52708 100644 --- a/pages/api/folders/index.ts +++ b/pages/api/folders/index.ts @@ -12,12 +12,11 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => { if (req.method === "POST") { try { - const response = await axiosInstance.post("/folders", req.body, { + await axiosInstance.post("/folders", req.body, { headers: { Authorization: `Bearer ${token}`, }, }); - console.log(response); return res.status(200).json({ message: "폴더 생성 성공" }); } catch (error) { if (axios.isAxiosError(error) && error.response) { diff --git a/pages/api/links/index.ts b/pages/api/links/index.ts new file mode 100644 index 0000000..4bde147 --- /dev/null +++ b/pages/api/links/index.ts @@ -0,0 +1,33 @@ +import axiosInstance from "@/lib/api/axiosInstanceApi"; +import axios, { isAxiosError } from "axios"; +import { NextApiRequest, NextApiResponse } from "next"; + +const handler = async (req: NextApiRequest, res: NextApiResponse) => { + const token = req.cookies.accessToken; + console.log("Token:", token); + + if (!token) { + return res.status(401).json({ error: "사용자 정보를 찾을 수 없습니다." }); + } + + if (req.method === "POST") { + try { + await axiosInstance.post("/links", req.body, { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + return res.status(201).json({ message: "링크 추가 성공" }); + } catch (error) { + if (isAxiosError(error) && error.response) { + const status = error.response.status; + const message = error.response.data?.message || "알 수 없는 오류 발생"; + return res.status(status).json({ message }); + } + } + } else { + res.status(405).json({ message: "허용되지 않은 접근 방법" }); + } +}; + +export default handler; diff --git a/pages/test/index.tsx b/pages/test/index.tsx index 8b64cb6..1cb144a 100644 --- a/pages/test/index.tsx +++ b/pages/test/index.tsx @@ -9,7 +9,34 @@ export default function Test() { -