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

Feat: 폴더 추가 기능 (모달)

Author: hongggyelim

components/modal/AddFolderModal.tsx

@@ -1,10 +1,43 @@
+import { ChangeEvent, useState } from "react";
 import ModalContainer from "./modalComponents/ModalContainer";
 import ModalInput from "./modalComponents/ModalInput";
+import { postFolders } from "@/lib/api/folder";
+import useModalStore from "@/store/useModalStore";
 
 const AddFolderModal = ({ folderName }: { folderName: string }) => {
+  const [value, setValue] = useState("");
+
+  const { closeModal } = useModalStore();
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  };
+  const handleSubmit = async () => {
+    const body = {
+      name: value,
+    };
+    if (value !== "") {
+      try {
+        const res = await postFolders(body);
+        console.log(res);
+      } catch (error) {
+        console.log(error);
+      }
+    }
+    closeModal();
+  };
   return (
-    <ModalContainer title="폴더 추가" buttonText="추가하기">
-      <ModalInput placeholder="내용 입력" name={folderName} />
+    <ModalContainer
+      title="폴더 추가"
+      buttonText="추가하기"
+      onClick={handleSubmit}
+    >
+      <ModalInput
+        placeholder="내용 입력"
+        name={folderName}
+        value={value}
+        onChange={handleChange}
+      />
     </ModalContainer>
   );
 };

components/modal/EditModal.tsx

@@ -1,10 +1,45 @@
+import { ChangeEvent, useState } from "react";
 import ModalContainer from "./modalComponents/ModalContainer";
 import ModalInput from "./modalComponents/ModalInput";
+import useModalStore from "@/store/useModalStore";
+import { putFolder } from "@/lib/api/folder";
 
 const EditModal = ({ folderName }: { folderName: string }) => {
+  const [value, setValue] = useState("");
+
+  const { closeModal } = useModalStore();
+
+  // 폴더 정보를 먼저 가져와야함
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  };
+  const handleSubmit = async () => {
+    const body = {
+      name: value,
+    };
+    // if (value !== "") {
+    //   try {
+    //     const res = await putFolder(folderId, body);
+    //     console.log(res);
+    //   } catch (error) {
+    //     console.log(error);
+    //   }
+    // }
+    closeModal();
+  };
   return (
-    <ModalContainer title="폴더 이름 변경" buttonText="변경하기">
-      <ModalInput placeholder="내용 입력" name={folderName} />
+    <ModalContainer
+      title="폴더 이름 변경"
+      buttonText="변경하기"
+      onClick={handleSubmit}
+    >
+      <ModalInput
+        placeholder="내용 입력"
+        name={folderName}
+        value={value}
+        onChange={handleChange}
+      />
     </ModalContainer>
   );
 };

components/modal/modalComponents/FolderItem.tsx

@@ -8,7 +8,7 @@ const FolderItem = ({ item }: { item: FolderItemType }) => {
 
   const bgColor = selected ? "bg-gray100" : "bg-white";
 
-  const { title, totalCount } = item;
+  const { name, linkCount } = item;
 
   const onClickFolder = () => {
     setSelected(!selected);
@@ -17,7 +17,7 @@ const FolderItem = ({ item }: { item: FolderItemType }) => {
     <li
       className={bindCls(
         bgColor,
-        "w-full p-2 flex h-10 rounded-lg items-center justify-between"
+        "w-full p-2 flex h-10 rounded-lg items-center justify-between cursor-pointer"
       )}
       onClick={onClickFolder}
     >
@@ -28,9 +28,9 @@ const FolderItem = ({ item }: { item: FolderItemType }) => {
             selected ? "text-purple100" : "text-black300"
           )}
         >
-          {title}
+          {name}
         </div>
-        <div className="text-gray400 text-sm">{totalCount}개 링크</div>
+        <div className="text-gray400 text-sm">{linkCount}개 링크</div>
       </div>
       {selected && (
         <div>

components/modal/modalComponents/ModalContainer.tsx

@@ -10,6 +10,7 @@ const ModalContainer = ({
   children,
   buttonText,
   buttonColor,
+  onClick,
 }: ModalPropType) => {
   const { closeModal } = useModalStore();
   const modalRef = useRef<HTMLDivElement | null>(null);
@@ -48,6 +49,7 @@ const ModalContainer = ({
           {buttonText && (
             <SubmitButton
               type="button"
+              onClick={onClick}
               width="w-full"
               height="h-[51px] "
               color={buttonColor}

components/modal/modalComponents/ModalInput.tsx

@@ -1,17 +1,24 @@
 import { bindCls } from "@/lib/utils";
+import { ChangeEvent } from "react";
 
 const ModalInput = ({
   placeholder,
   name,
+  value,
+  onChange,
 }: {
   placeholder: string;
   name: string;
+  value: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
 }) => {
   return (
     <input
       type="text"
       name={name}
       id={name}
+      value={value}
+      onChange={onChange}
       className={bindCls(
         "w-full rounded-lg border border-gray300 py-[18px] px-[15px] mb-6 text-black300",
         "placeholder:text-base placeholder:text-gray400",

components/modal/modalComponents/ModalShare.tsx

@@ -3,14 +3,24 @@ 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>
+        <ModalShareItem src="/icons/Kakao.svg" text="카카오톡" bg="#FEE500" />
+      </div>
+      <div>
+        <ModalShareItem
+          src="/icons/Facebook.svg"
+          text="페이스북"
+          bg="#1877F2"
+        />
+      </div>
+      <div>
+        <ModalShareItem
+          src="/icons/link.svg"
+          text="링크 복사"
+          bg="rgba(157, 157, 157, 0.04)"
+          color="#6D6AFE"
+        />
+      </div>
     </div>
   );
 };

components/modal/modalManager/ModalManager.tsx

@@ -30,10 +30,10 @@ export const Modal = () => {
         <AddModal
           list={
             props.list || [
-              { id: 1, title: "코딩팁", totalCount: 7 },
-              { id: 2, title: "채용 사이트", totalCount: 7 },
-              { id: 3, title: "유용한 글", totalCount: 7 },
-              { id: 4, title: "나만의 장소", totalCount: 7 },
+              { id: 1, name: "코딩팁", linkCount: 7, createAt: "" },
+              { id: 2, name: "채용 사이트", linkCount: 7, createAt: "" },
+              { id: 3, name: "유용한 글", linkCount: 7, createAt: "" },
+              { id: 4, name: "나만의 장소", linkCount: 7, createAt: "" },
             ]
           }
         />

lib/api/axiosInstanceApi.ts

@@ -8,7 +8,6 @@ const axiosInstance = axios.create({
 
 export const proxy = axios.create({
   // 배포 이후에는 배포된 URL로 변경해야 함.
-  // baseURL: "http://localhost:3000", -> baseURL을 안쓰면 로컬에서는 로컬3000, 배포했을때는 배포된 도메인으로 감
   baseURL: "http://localhost:3000",
   timeout: 5000,
   withCredentials: true,

pages/api/folders/index.ts

@@ -0,0 +1,34 @@
+import axiosInstance from "@/lib/api/axiosInstanceApi";
+import axios 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 {
+      const response = 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) {
+        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;

types/modalTypes.ts

@@ -6,14 +6,15 @@ export interface ModalPropType {
   children?: ReactNode;
   buttonText?: string;
   buttonColor?: "positive" | "negative";
+  onClick?: () => void;
   folderName?: string;
   list?: FolderItemType[];
   link?: string;
 }
 
-// 폴더 데이터 임시 타입 (실제 스웨거와 일치하지 않음)
 export interface FolderItemType {
   id: number;
-  title: string;
-  totalCount: number;
+  createAt: string;
+  name: string;
+  linkCount: number;
 }