[김진우] Week19

api/services/config.ts

@@ -1,46 +1,19 @@
-import {
-  getRefreshToken,
-  setAccessToken,
-  setRefreshToken,
-} from "@/utils/localStorage";
 import axios from "axios";
 
-const BASE_URL = "https://bootcamp-api.codeit.kr";
+const BASE_URL = "https://bootcamp-api.codeit.kr/api/linkbrary/v1";
 const SAMPLE_USER_ENDPOINT = "/api/users/1";
 const SAMPLE_FOLDER_ENDPOINT = "/api/sample/folder";
-const USERS_ENDPOINT = "/api/users";
-const SIGNIN_ENDPOINT = "/api/sign-in";
-const SIGNUP_ENDPOINT = "/api/sign-up";
+const USERS_ENDPOINT = "/users";
+const SIGNIN_ENDPOINT = "/auth/sign-in";
+const SIGNUP_ENDPOINT = "/auth/sign-up";
 const FOLDER_ENDPOINT = `/api/folders`;
 const LINKS_ENDPOINT = `/api/links`;
 
 const instance = axios.create({
-  baseURL: "https://bootcamp-api.codeit.kr",
+  baseURL: "https://bootcamp-api.codeit.kr/api/linkbrary/v1",
   timeout: 3000,
 });
 
-instance.interceptors.response.use(
-  (res) => res,
-  async (error) => {
-    const originalRequest = error.config;
-    let res;
-    if (error.response?.status === 401 && !originalRequest._retry) {
-      res = await instance.post(
-        "/api/refresh-token",
-        {
-          refresh_token: getRefreshToken(),
-        },
-        { _retry: true } as any
-      );
-      setAccessToken(res?.data.data.accessToken);
-      setRefreshToken(res?.data.data.refreshToken);
-      originalRequest._retry = true;
-      return instance(originalRequest);
-    }
-    return Promise.reject(error);
-  }
-);
-
 export {
   BASE_URL,
   SAMPLE_USER_ENDPOINT,

components/addLinkInput/AddLinkInput.tsx

@@ -41,7 +41,7 @@ const AddLinkInput = forwardRef<HTMLDivElement, AddLinkInputProps>(
           <Dialog onClick={close} isModalOpen={isModalOpen}>
             <Dialog.Title>폴더에 추가</Dialog.Title>
             <Dialog.Link>{url}</Dialog.Link>
-            {folders.map((folder) => (
+            {folders?.map((folder) => (
               <Dialog.FolderList key={folder.id}>
                 <span className="dialog-folder-name">{folder.name}</span>
                 <span className="dialog-folder-count">개 링크</span>

components/card/Card.tsx

@@ -67,15 +67,15 @@ function Card({ linkInfo, folders }: CardProps) {
         </div>
       </a>
       <div className={styles.cardTextSection}>
-        <p className={styles.timeStamp}>
+        <div className={styles.timeStamp}>
           {formattedTime}
           <KebabButton
             onClick={handleKebabClick}
             isPopoverOpen={isPopoverOpen}
             url={linkInfo.url}
             folders={folders}
           />
-        </p>
+        </div>
         <p className={styles.introduceText}>{linkInfo?.description}</p>
         <p className={styles.createdDate}>{`${year}. ${month}. ${date}`}</p>
       </div>

components/header/Header.tsx

@@ -1,15 +1,14 @@
 import styles from "./header.module.css";
 import Image from "next/image";
-import useUserStore from "@/hooks/useStore";
+import { User } from "@/types/types";
 
 interface HeaderProps {
   folderName: string;
+  user: User[];
 }
 
-export default function Header({ folderName }: HeaderProps) {
-  const { user } = useUserStore();
-  const name = user[0]?.name;
-
+export default function Header({ folderName, user }: HeaderProps) {
+  const name = user?.length > 0 ? user[0].name : "";
   return (
     <header className={styles.header}>
       <div className={styles.userInfoBox}>
@@ -23,7 +22,6 @@ export default function Header({ folderName }: HeaderProps) {
             height={24}
           />
         ))}
-
         <span className={styles.userName}>{name}</span>
       </div>
       <span className={styles.folderName}>{folderName}</span>

components/layout/nav/Nav.tsx

@@ -11,20 +11,24 @@ import { getAccessToken } from "@/utils/localStorage";
 export default function Nav() {
   const router = useRouter();
   const isFolderPage = router.pathname === "/folder";
-  const [userProfile, setUserProfile] = useState<User[]>([]);
+  const [user, setUser] = useState<User[]>();
 
-  const fetchUsers = async () => {
-    const res = await instance.get(USERS_ENDPOINT, {
-      headers: {
-        Authorization: `Bearer ${getAccessToken()}`,
-      },
-    });
-    const user = res?.data.data;
-    setUserProfile(user);
+  const getUser = async () => {
+    try {
+      const res = await instance.get(USERS_ENDPOINT, {
+        headers: {
+          Authorization: `Bearer ${getAccessToken()}`,
+        },
+      });
+      const nextUser = res?.data;
+      setUser(nextUser);
+    } catch (error) {
+      console.error(error);
+    }
   };
 
   useEffect(() => {
-    fetchUsers();
+    getUser();
   }, []);
 
   return (
@@ -39,19 +43,19 @@ export default function Nav() {
             height={24}
           />
         </Link>
-        {userProfile ? (
+        {user ? (
           <div className={styles.userProfileBox}>
             <Image
-              src={userProfile[0]?.image_source}
+              src={user[0]?.image_source}
               alt="userProfile"
               className={styles.userProfileIcon}
               width={24}
               height={24}
             />
-            <span>{userProfile[0]?.email}</span>
+            <span>{user[0]?.email}</span>
           </div>
         ) : (
-          <Link href="/pages/signin/SigninPage.js">
+          <Link href="/signin">
             <button type="button" className={styles.loginButton}>
               로그인
             </button>

components/modal/components/dialogButton/DialogButton.tsx

@@ -4,14 +4,17 @@ import styles from "./dialogButton.module.css";
 interface DialogButtonProps {
   children?: ReactNode;
   isAddButton?: boolean;
+  onClick?: () => void;
 }
 
 export default function DialogButton({
   children,
   isAddButton,
+  onClick,
 }: DialogButtonProps) {
   return (
     <div
+      onClick={onClick}
       className={
         isAddButton
           ? `${styles.dialogButton} ${styles.addButton} `

components/modal/components/dialogInput/DialogInput.tsx

@@ -1,15 +1,17 @@
+import { ChangeEvent } from "react";
 import styles from "./dialogInput.module.css";
 
 interface DialogInputProps {
   value?: string | undefined;
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
 
-export default function DialogInput({ value }: DialogInputProps) {
+export default function DialogInput({ value, onChange }: DialogInputProps) {
   return (
     <input
       className={styles.dialogInput}
-      value={value}
       placeholder="내용 입력"
+      onChange={onChange}
     />
   );
 }

components/optionButton/OptionButton.tsx

@@ -1,6 +1,11 @@
 import Image from "next/image";
 import styles from "./optionButton.module.css";
 import useModal from "@/hooks/useModal";
+import { instance } from "@/api/services/config";
+import { ChangeEvent, useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { getAccessToken } from "@/utils/localStorage";
+import { QUERY_KEYS } from "@/constants/queryKeys";
 
 interface OptionButtonProps {
   iconSrc: string;
@@ -18,6 +23,58 @@ export default function OptionButton({
   folderId,
 }: OptionButtonProps) {
   const { open, close, Dialog, isModalOpen } = useModal();
+  const [newName, setNewName] = useState("");
+  const queryClient = useQueryClient();
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setNewName(e.target.value);
+  };
+
+  const putFolderName = async (folderId: number | string) => {
+    try {
+      const res = await instance.put(
+        `/folders/${folderId}`,
+        {
+          name: newName,
+        },
+        {
+          headers: {
+            Authorization: `Bearer ${getAccessToken()}`,
+          },
+        }
+      );
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const deleteFolder = async (folderId: number | string) => {
+    try {
+      instance.delete(`/folders/${folderId}`, {
+        headers: {
+          Authorization: `Bearer ${getAccessToken()}`,
+        },
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const deleteFolderMutation = useMutation({
+    mutationFn: () => deleteFolder(folderId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.FOLDER_NAMES] });
+    },
+  });
+
+  const putFolderNameMutation = useMutation({
+    mutationFn: () => putFolderName(folderId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEYS.FOLDER_NAMES],
+      });
+    },
+  });
 
   return (
     <div className={styles.optionIconContainer} onClick={open} role="none">
@@ -31,15 +88,25 @@ export default function OptionButton({
       {name === "이름 변경" ? (
         <Dialog isModalOpen={isModalOpen} onClick={close}>
           <Dialog.Title>폴더 이름 변경</Dialog.Title>
-          <Dialog.Input value={folderName} />
-          <Dialog.Button isAddButton>변경하기</Dialog.Button>
+          <Dialog.Input onChange={handleChange} />
+          <Dialog.Button
+            isAddButton
+            onClick={() => putFolderNameMutation.mutate()}
+          >
+            변경하기
+          </Dialog.Button>
         </Dialog>
       ) : null}
       {name === "삭제" ? (
         <Dialog isModalOpen={isModalOpen} onClick={close}>
           <Dialog.Title>폴더 삭제</Dialog.Title>
           <Dialog.Link>{folderName}</Dialog.Link>
-          <Dialog.Button isAddButton={false}>삭제하기</Dialog.Button>
+          <Dialog.Button
+            isAddButton={false}
+            onClick={() => deleteFolderMutation.mutate()}
+          >
+            삭제하기
+          </Dialog.Button>
         </Dialog>
       ) : null}
       <Image src={iconSrc} alt={alt} role="none" width={18} height={18} />

components/popover/Popover.tsx

@@ -60,7 +60,7 @@ export default function Popover({ url, folders }: PopoverProps) {
                 <Dialog.FolderList key={folder.id}>
                   <span className={styles.dialogFolderName}>{folder.name}</span>
                   <span className={styles.dialogFolderCount}>
-                    {folder.link.count}개 링크
+                    {folder.link_count}개 링크
                   </span>
                 </Dialog.FolderList>
               ))}

components/shareCard/ShareCard.tsx

@@ -7,21 +7,21 @@ import Image from "next/image";
 interface ShareCardProps {
   linkInfo: {
     id: number;
-    createdAt: string;
+    created_at: string;
     url: string;
     title: string;
     description: string;
-    imageSource: string;
+    image_source: string;
   };
 }
 
 function ShareCard({ linkInfo }: ShareCardProps) {
-  const createdAt = new Date(linkInfo?.createdAt);
-  const formattedTime = calcCreateTime(createdAt);
+  const created_at = new Date(linkInfo?.created_at);
+  const formattedTime = calcCreateTime(created_at);
 
-  const year = createdAt.getFullYear();
-  const month = createdAt.getMonth() + 1;
-  const date = createdAt.getDate();
+  const year = created_at.getFullYear();
+  const month = created_at.getMonth() + 1;
+  const date = created_at.getDate();
 
   return (
     <div className={styles.card}>
@@ -33,14 +33,14 @@ function ShareCard({ linkInfo }: ShareCardProps) {
       >
         <div
           className={
-            linkInfo?.imageSource
+            linkInfo?.image_source
               ? styles.cardImgSection
               : styles.cardImgSectionEmpty
           }
         >
-          {linkInfo?.imageSource ? (
+          {linkInfo?.image_source ? (
             <Image
-              src={linkInfo?.imageSource}
+              src={linkInfo?.image_source}
               className={styles.linkImg}
               alt="cat"
               fill