Feat: 폴더 추가 기능 구현

codeit-bootcamp-frontend · Jul 2, 2024 · 86a959d · 86a959d
1 parent 7a8bdff
commit 86a959d
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 38 deletions.
diff --git a/pages/folder/index.js b/pages/folder/index.js
@@ -12,13 +12,13 @@ import { checkAccessToken, getData } from "../../src/utils";
 import styles from "src/styles/folder.module.scss";
 import { useEffect, useState } from "react";
 import classNames from "classnames/bind";
+import { useQuery } from "@tanstack/react-query";
 
 const cx = classNames.bind(styles);
 
 function FolderPage() {
   const [searchKeyWord, setSearchKeyWord] = useState("");
   const [user, setUser] = useState("");
-  const [Folders, setFolders] = useState("");
   const [AllLinks, setAllLinks] = useState("");
 
   function checkArrayBlank(array) {
@@ -27,14 +27,16 @@ function FolderPage() {
 
   async function fetchData() {
     const user = await getData("/users");
-    const Folders = await getData("/folders");
     const AllLinks = await getData("/links");
-
     setUser(user.data[0]);
-    setFolders(Folders.data.folder);
     setAllLinks(AllLinks.data.folder);
   }
 
+  const { data: FoldersData } = useQuery({
+    queryKey: ["Folders"],
+    queryFn: () => getData("/folders"),
+  });
+
   useEffect(() => {
     /* AccessToken없으면 signin페이지로 이동*/
     if (!checkAccessToken("signInToken")) {
@@ -43,6 +45,8 @@ function FolderPage() {
     fetchData();
   }, []);
 
+  const Folders = FoldersData?.data.folder ?? [];
+
   return (
     <div>
       <Header userEmail={user.email} />
@@ -61,8 +65,8 @@ function FolderPage() {
             <LinkList
               searchKeyWord={searchKeyWord}
               links={AllLinks}
-              createdTime="created_at"
-              image="image_source"
+              createdTime='created_at'
+              image='image_source'
             />
           )}
         </div>

diff --git a/src/components/FolderTitle/FolderTitle.js b/src/components/FolderTitle/FolderTitle.js
@@ -26,22 +26,22 @@ export function FolderTitle({ name }) {
         <div className={cx("folder-name")}>{name}</div>
         <div className={cx("title-button-wrapper")}>
           <p onClick={() => toggleHandler("share")}>
-            <img src="/images/share.svg" alt="share-button" />
+            <img src='/images/share.svg' alt='share-button' />
             공유
           </p>
           <p onClick={() => toggleHandler("nameChange")}>
-            <img src="/images/pen.svg" alt="nameChange-button" />
+            <img src='/images/pen.svg' alt='nameChange-button' />
             이름 변경
           </p>
           <p onClick={() => toggleHandler("delete")}>
-            <img src="/images/Group 36.svg" alt="delete-button" />
+            <img src='/images/Group 36.svg' alt='delete-button' />
             삭제
           </p>
         </div>
       </div>
       {isOpen.share && (
         <ModalLayout
-          title="폴더 공유"
+          title='폴더 공유'
           description={name}
           toggleHandler={() => toggleHandler("share")}
         >
@@ -50,16 +50,16 @@ export function FolderTitle({ name }) {
       )}
       {isOpen.delete && (
         <ModalLayout
-          title="폴더 삭제"
+          title='폴더 삭제'
           description={name}
           toggleHandler={() => toggleHandler("delete")}
         >
-          <div className={cx("button delete")}>삭제하기</div>
+          <button className={cx("button delete")}>삭제하기</button>
         </ModalLayout>
       )}
       {isOpen.nameChange && (
         <ModalLayout
-          title="폴더 이름 변경"
+          title='폴더 이름 변경'
           toggleHandler={() => toggleHandler("nameChange")}
         >
           <div className={cx("modal-contents")}>

diff --git a/src/components/ModalLayout/ModalLayout.js b/src/components/ModalLayout/ModalLayout.js
@@ -13,15 +13,12 @@ export function ModalLayout({
   return (
     <>
       <div className={cx("modal-container")}>
-        <img
-          src="images/_close.png"
-          className={cx("close-button")}
-          onClick={toggleHandler}
-          alt="close-button"
-        />
+        <button className={cx("close-button")} onClick={toggleHandler}>
+          X
+        </button>
         <div>
           <p className={cx("title")}>{title}</p>
-          {description && <p className="description">{description}</p>}
+          {description && <p className='description'>{description}</p>}
         </div>
         {children}
       </div>

diff --git a/src/components/Sorting/Sorting.js b/src/components/Sorting/Sorting.js
@@ -3,29 +3,49 @@ import styles from "./Sorting.module.scss";
 import { ModalLayout } from "../ModalLayout";
 import classNames from "classnames/bind";
 import Link from "next/link";
+import { postFolder } from "../../utils";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 const cx = classNames.bind(styles);
 
 export function Sorting({ folders, folderId }) {
   const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+
+  const queryClient = useQueryClient();
+
+  const postFolderMutation = useMutation({
+    mutationFn: (inputValue) => postFolder(inputValue),
+  });
 
   const toggleHandler = () => {
     setIsOpen(!isOpen);
   };
 
+  const handleAddFolder = () => {
+    postFolderMutation.mutate(inputValue);
+    queryClient.invalidateQueries();
+  };
+
+  const handleChange = (e) => {
+    setInputValue(e.target.value);
+  };
+
   return (
     <>
       <div className={cx("sorting-wrapper")}>
         <div className={cx("button-wrapper")}>
+          {/* 링크 전체 */}
           <Link
-            href="/folder"
+            href='/folder'
             className={cx(
               "folder-name-wrapper",
               folderId ? "" : "selected-folder"
             )}
           >
             <p className={cx("sort-name")}>전체</p>
           </Link>
+          {/* 폴더 모두 */}
           {folders &&
             folders.map((folder) => {
               return (
@@ -42,29 +62,25 @@ export function Sorting({ folders, folderId }) {
               );
             })}
         </div>
-        <div className={cx("folder-title-wrapper")} onClick={toggleHandler}>
+        <button className={cx("folder-title-wrapper")} onClick={toggleHandler}>
           폴더추가
-          <img src="/images/add.svg" alt="addbutton" />
-        </div>
+          <img src='/images/add.svg' alt='addbutton' />
+        </button>
         {isOpen && (
-          <ModalLayout toggleHandler={toggleHandler} title="폴더 추가">
+          <ModalLayout toggleHandler={toggleHandler} title='폴더 추가'>
             <div className={cx("modal-contents")}>
-              <input placeholder="내용 입력" />
-              <div className={cx("add", "button")}>추가하기</div>
+              <input
+                placeholder='내용 입력'
+                value={inputValue}
+                onChange={handleChange}
+              />
+              <button className={cx("add", "button")} onClick={handleAddFolder}>
+                추가하기
+              </button>
             </div>
           </ModalLayout>
         )}
       </div>
     </>
   );
 }
-
-// useEffect(() => {
-//   onChangeName(selectedId); // eslint-disable-next-line
-// }, [selectedId]);
-
-// const onChangeName = (id) => {
-//   const nameById =
-//     id && folders ? folders.find((item) => item.id === id)?.name : "전체";
-//   setName(nameById);
-// };
diff --git a/src/utils/api.js b/src/utils/api.js
@@ -1,4 +1,4 @@
-import { ApiUrl } from "./url";
+import { ApiUrl, baseUrl } from "./url";
 import axiosInstance from "./axios";
 
 export async function postSignUp(inputData) {
@@ -92,6 +92,17 @@ export async function getData(url) {
   }
 }
 
+export async function postFolder(inputName) {
+  try {
+    const response = await axiosInstance.post(`${baseUrl}folders`, {
+      name: inputName,
+    });
+    return response.data;
+  } catch (error) {
+    console.log(error);
+  }
+}
+
 export function saveAccessTokenToLocalStorage(accessToken, accessTokenName) {
   localStorage.setItem(accessTokenName, accessToken);
 }