diff --git a/api/services/config.ts b/api/services/config.ts
index c2b74f664..b3d3b4ced 100644
--- a/api/services/config.ts
+++ b/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,
diff --git a/components/addLinkInput/AddLinkInput.tsx b/components/addLinkInput/AddLinkInput.tsx
index 2e5e326c5..195657a7e 100644
--- a/components/addLinkInput/AddLinkInput.tsx
+++ b/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>
diff --git a/components/card/Card.tsx b/components/card/Card.tsx
index b0f7ccda3..27d1d0703 100644
--- a/components/card/Card.tsx
+++ b/components/card/Card.tsx
@@ -67,7 +67,7 @@ function Card({ linkInfo, folders }: CardProps) {
         </div>
       </a>
       <div className={styles.cardTextSection}>
-        <p className={styles.timeStamp}>
+        <div className={styles.timeStamp}>
           {formattedTime}
           <KebabButton
             onClick={handleKebabClick}
@@ -75,7 +75,7 @@ function Card({ linkInfo, folders }: CardProps) {
             url={linkInfo.url}
             folders={folders}
           />
-        </p>
+        </div>
         <p className={styles.introduceText}>{linkInfo?.description}</p>
         <p className={styles.createdDate}>{`${year}. ${month}. ${date}`}</p>
       </div>
diff --git a/components/header/Header.tsx b/components/header/Header.tsx
index e1550e236..ab7913f37 100644
--- a/components/header/Header.tsx
+++ b/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>
diff --git a/components/layout/nav/Nav.tsx b/components/layout/nav/Nav.tsx
index 953c898ce..2e284c79b 100644
--- a/components/layout/nav/Nav.tsx
+++ b/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>
diff --git a/components/modal/components/dialogButton/DialogButton.tsx b/components/modal/components/dialogButton/DialogButton.tsx
index 2df058bf6..9ea65bf22 100644
--- a/components/modal/components/dialogButton/DialogButton.tsx
+++ b/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} `
diff --git a/components/modal/components/dialogInput/DialogInput.tsx b/components/modal/components/dialogInput/DialogInput.tsx
index cfe843dc9..c891e219b 100644
--- a/components/modal/components/dialogInput/DialogInput.tsx
+++ b/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}
     />
   );
 }
diff --git a/components/optionButton/OptionButton.tsx b/components/optionButton/OptionButton.tsx
index 5b93206ec..a1be70bfe 100644
--- a/components/optionButton/OptionButton.tsx
+++ b/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} />
diff --git a/components/popover/Popover.tsx b/components/popover/Popover.tsx
index 9d5318f3f..91dacb3de 100644
--- a/components/popover/Popover.tsx
+++ b/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>
               ))}
diff --git a/components/shareCard/ShareCard.tsx b/components/shareCard/ShareCard.tsx
index c80777706..57287938b 100644
--- a/components/shareCard/ShareCard.tsx
+++ b/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
diff --git a/components/signinForm/SigninForm.tsx b/components/signinForm/SigninForm.tsx
index 607c6b6b5..8ebe6339a 100644
--- a/components/signinForm/SigninForm.tsx
+++ b/components/signinForm/SigninForm.tsx
@@ -22,6 +22,7 @@ import {
   setRefreshToken,
 } from "@/utils/localStorage";
 import useUserStore from "@/hooks/useStore";
+import { QueryClient, useMutation, useQuery } from "@tanstack/react-query";
 
 export interface FormValues {
   email: string;
@@ -36,8 +37,10 @@ export function SigninForm() {
     formState: { errors },
     handleSubmit,
     setError,
+    watch,
   } = useForm<FormValues>({ mode: "onBlur" });
 
+  const queryClient = new QueryClient();
   const { setUser } = useUserStore();
 
   const getUser = async () => {
@@ -47,26 +50,35 @@ export function SigninForm() {
           Authorization: `Bearer ${getAccessToken()}`,
         },
       });
-      const nextUser = res?.data.data;
+      const nextUser = res?.data;
       setUser(nextUser);
     } catch (error) {
       console.error(error);
     }
   };
 
+  const postSignin = async () => {
+    const res = await instance.post(`/auth/sign-in`, {
+      email: watch("email"),
+      password: watch("password"),
+    });
+    const accessToken = res?.data.accessToken;
+    const refreshToken = res?.data.refreshToken;
+    setAccessToken(accessToken);
+    setRefreshToken(refreshToken);
+    await getUser();
+    if (res.status === 200) {
+      router.push("/folder");
+    }
+  };
+
+  const signinMutation = useMutation({
+    mutationFn: postSignin,
+  });
+
   const onSubmit = handleSubmit(async (data: FormValues) => {
-    let res;
     try {
-      res = await instance.post(`${SIGNIN_ENDPOINT}`, {
-        email: data.email,
-        password: data.password,
-      });
-      const accessToken = res?.data.data.accessToken;
-      const refreshToken = res?.data.data.refreshToken;
-      setAccessToken(accessToken);
-      setRefreshToken(refreshToken);
-      await getUser();
-      res?.status === 200 && router.push("/folder");
+      signinMutation.mutate();
     } catch (error) {
       if (axios.isAxiosError(error) && error.response?.status === 400) {
         setError("email", { message: CHECK_EMAIL_TEXT });
@@ -78,7 +90,7 @@ export function SigninForm() {
 
   return (
     <>
-      <form className={styles.form} onSubmit={onSubmit} noValidate>
+      <form className={styles.form} noValidate onSubmit={onSubmit}>
         <div className={styles.inputContainer}>
           <label htmlFor="email" className={styles.label}>
             이메일
diff --git a/components/signupForm/SignupForm.tsx b/components/signupForm/SignupForm.tsx
index 1bf2a4a23..3a89b33af 100644
--- a/components/signupForm/SignupForm.tsx
+++ b/components/signupForm/SignupForm.tsx
@@ -7,6 +7,7 @@ import { SIGNUP_ENDPOINT, instance } from "@/api/services/config";
 import { useRouter } from "next/router";
 import { setAccessToken } from "@/utils/localStorage";
 import { EMAIL_PATTERN, PASSWORD_PATTERN } from "@/constants/authConstant";
+import { useMutation } from "@tanstack/react-query";
 
 export interface FormValues {
   email: string;
@@ -21,20 +22,25 @@ export function SignupForm() {
     formState: { errors },
     handleSubmit,
     getValues,
+    watch,
   } = useForm<FormValues>({ mode: "onBlur" });
 
-  const onSubmit = handleSubmit(async (data: FormValues) => {
-    try {
-      const res = await instance.post(`${SIGNUP_ENDPOINT}`, {
-        email: data.email,
-        password: data.password,
-      });
-      const accessToken = res?.data.data.accessToken;
-      setAccessToken(accessToken);
-      res.status === 200 && router.push("/folder");
-    } catch (error) {
-      console.error(error);
-    }
+  const signup = async () => {
+    const res = await instance.post(`${SIGNUP_ENDPOINT}`, {
+      email: watch("email"),
+      password: watch("password"),
+    });
+    const accessToken = res?.data.accessToken;
+    setAccessToken(accessToken);
+    res.status === 200 && router.push("/folder");
+  };
+
+  const signupMutation = useMutation({
+    mutationFn: signup,
+  });
+
+  const onSubmit = handleSubmit(async () => {
+    signupMutation.mutate();
   });
 
   const { password } = getValues();
diff --git a/constants/queryKeys.ts b/constants/queryKeys.ts
new file mode 100644
index 000000000..9cebe88b0
--- /dev/null
+++ b/constants/queryKeys.ts
@@ -0,0 +1,7 @@
+export const QUERY_KEYS = {
+  LINKS: "links",
+  FOLDER_NAMES: "folderNames",
+  FOLDERS: "folders",
+  CURRENT_USER: "currentUser",
+  USER: "user",
+};
diff --git a/next.config.js b/next.config.js
index ef2679f57..afccf39aa 100644
--- a/next.config.js
+++ b/next.config.js
@@ -51,6 +51,22 @@ const nextConfig = {
         protocol: "https",
         hostname: "avatars.githubusercontent.com",
       },
+      {
+        protocol: "https",
+        hostname: "legacy.reactjs.org",
+      },
+      {
+        protocol: "https",
+        hostname: "www.youtube.com",
+      },
+      {
+        protocol: "https",
+        hostname: "i.ytimg.com",
+      },
+      {
+        protocol: "https",
+        hostname: "www.codeit.kr",
+      },
     ],
   },
 };
diff --git a/package-lock.json b/package-lock.json
index 0245e8862..eddf1a1d2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,8 @@
       "version": "0.1.0",
       "dependencies": {
         "@hookform/devtools": "^4.3.1",
+        "@tanstack/react-query": "^5.17.9",
+        "@tanstack/react-query-devtools": "^5.17.9",
         "axios": "^1.6.2",
         "next": "^13.5.6",
         "react": "^18",
@@ -680,6 +682,55 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.17.9",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.17.9.tgz",
+      "integrity": "sha512-8xcvpWIPaRMDNLMvG9ugcUJMgFK316ZsqkPPbsI+TMZsb10N9jk0B6XgPk4/kgWC2ziHyWR7n7wUhxmD0pChQw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/query-devtools": {
+      "version": "5.17.7",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.17.7.tgz",
+      "integrity": "sha512-TfgvOqza5K7Sk6slxqkRIvXlEJoUoPSsGGwpuYSrpqgSwLSSvPPpZhq7hv7hcY5IvRoTNGoq6+MT01C/jILqoQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.17.9",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.17.9.tgz",
+      "integrity": "sha512-M5E9gwUq1Stby/pdlYjBlL24euIVuGbWKIFCbtnQxSdXI4PgzjTSdXdV3QE6fc+itF+TUvX/JPTKIwq8yuBXcg==",
+      "dependencies": {
+        "@tanstack/query-core": "5.17.9"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0"
+      }
+    },
+    "node_modules/@tanstack/react-query-devtools": {
+      "version": "5.17.9",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.17.9.tgz",
+      "integrity": "sha512-1viWP/jlO0LaeCdtTFqtF1k2RfM3KVpvwVffWv+PMNkS2u4s8YGUM17r3p82udbF9BY1mE7aHqQ3MM1errF5lQ==",
+      "dependencies": {
+        "@tanstack/query-devtools": "5.17.7"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@tanstack/react-query": "^5.17.9",
+        "react": "^18.0.0"
+      }
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
diff --git a/package.json b/package.json
index c35a4a3bc..8a272eaa5 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,8 @@
   },
   "dependencies": {
     "@hookform/devtools": "^4.3.1",
+    "@tanstack/react-query": "^5.17.9",
+    "@tanstack/react-query-devtools": "^5.17.9",
     "axios": "^1.6.2",
     "next": "^13.5.6",
     "react": "^18",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index b1f4bde9b..8c4bd7e33 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -2,25 +2,42 @@ import Footer from "@/components/layout/footer/Footer";
 import Nav from "@/components/layout/nav/Nav";
 import { AuthProvider } from "@/context/AuthProvider";
 import "@/styles/global.css";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import type { AppProps } from "next/app";
 import { useRouter } from "next/router";
+import { useState } from "react";
 
 export default function App({ Component, pageProps }: AppProps) {
   const router = useRouter();
   const isAuthPage =
     router.pathname === "/signin" || router.pathname === "/signup";
 
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 60 * 1000,
+          },
+        },
+      })
+  );
+
   return (
-    <AuthProvider>
-      {isAuthPage ? (
-        <Component {...pageProps} />
-      ) : (
-        <>
-          <Nav />
+    <QueryClientProvider client={queryClient}>
+      <AuthProvider>
+        {isAuthPage ? (
           <Component {...pageProps} />
-          <Footer />
-        </>
-      )}
-    </AuthProvider>
+        ) : (
+          <>
+            <Nav />
+            <Component {...pageProps} />
+            <ReactQueryDevtools initialIsOpen={false} />
+            <Footer />
+          </>
+        )}
+      </AuthProvider>
+    </QueryClientProvider>
   );
 }
diff --git a/pages/folder/[folderId]/index.tsx b/pages/folder/[folderId]/index.tsx
index 413d06abc..70a190d7d 100644
--- a/pages/folder/[folderId]/index.tsx
+++ b/pages/folder/[folderId]/index.tsx
@@ -1,10 +1,6 @@
 import styles from "./folderPage.module.css";
-import { KeyboardEvent, useEffect, useRef, useState } from "react";
-import {
-  FOLDER_ENDPOINT,
-  LINKS_ENDPOINT,
-  instance,
-} from "../../../api/services/config";
+import { ChangeEvent, KeyboardEvent, useEffect, useRef, useState } from "react";
+import { instance } from "../../../api/services/config";
 import { FolderName, LinkInfo } from "@/types/types";
 import { ALL_LINK_NAME, OPTION_ICONS } from "../../../constants/folderConstant";
 import AddLinkInput from "../../../components/addLinkInput/AddLinkInput";
@@ -21,14 +17,14 @@ import Image from "next/image";
 import { useIntersectionObserver } from "@/hooks/useIntersectionObserver";
 import { getAccessToken } from "@/utils/localStorage";
 import { useRouter } from "next/router";
-import useUserStore from "@/hooks/useStore";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { QUERY_KEYS } from "@/constants/queryKeys";
 
 function FolderPage() {
-  const [links, setLinks] = useState<LinkInfo[]>([]);
-  const [folders, setFolders] = useState<FolderName[]>([]);
   const [folderId, setFolderId] = useState<string | number>(ALL_LINK_NAME);
   const [filteredLinks, setFilteredLinks] = useState<LinkInfo[]>([]);
   const [keyword, setKeyword] = useState("");
+  const [addFolderName, setAddFolderName] = useState("");
   const { open, close, isModalOpen, Dialog } = useModal();
   const inputRef = useRef<HTMLInputElement>(null);
   const [isResultEmpty, setIsResultEmpty] = useState(false);
@@ -37,26 +33,28 @@ function FolderPage() {
     useIntersectionObserver<HTMLDivElement>();
   const showFixedAddLinkInput = !isIntersecting && !isHeaderIntersecting;
   const router = useRouter();
-  const { user } = useUserStore();
-  console.log(user);
+  const queryClient = useQueryClient();
 
   const getFolderNames = async () => {
     const token = localStorage.getItem("accessToken");
     try {
-      const res = await instance.get(`${FOLDER_ENDPOINT}`, {
+      const res = await instance.get(`/folders`, {
         headers: {
           Authorization: `Bearer ${token}`,
         },
       });
-      setFolders(res?.data.data.folder);
+      const { data } = res;
+      return data;
     } catch (error) {
       console.error(error);
     }
   };
 
-  useEffect(() => {
-    getFolderNames();
-  }, []);
+  const folderNames = useQuery({
+    queryKey: [QUERY_KEYS.FOLDER_NAMES],
+    queryFn: getFolderNames,
+  });
+  const folders: FolderName[] = folderNames?.data;
 
   useEffect(() => {
     if (!getAccessToken()) {
@@ -70,25 +68,42 @@ function FolderPage() {
       : folders?.find(({ id }) => id === folderId)?.name;
 
   const getUserLinks = async (folderId: string | number) => {
-    const query = folderId === "전체" ? "" : `?folderId=${folderId}`;
-    try {
-      const res = await instance.get(`${LINKS_ENDPOINT}${query}`, {
-        headers: {
-          Authorization: `Bearer ${getAccessToken()}`,
-        },
-      });
-      const nextLinks = res?.data.data.folder;
-      setLinks(nextLinks);
-      setFilteredLinks(nextLinks);
-    } catch (error) {
-      console.error(error);
+    let links;
+    if (folderId === ALL_LINK_NAME) {
+      try {
+        const res = await instance.get(`/links`, {
+          headers: {
+            Authorization: `Bearer ${getAccessToken()}`,
+          },
+        });
+        const { data } = res;
+        links = data;
+        setFilteredLinks(links);
+      } catch (error) {
+        console.error(error);
+      }
+    } else if (typeof folderId === "number") {
+      try {
+        const res = await instance.get(`/folders/${folderId}/links`, {
+          headers: {
+            Authorization: `Bearer ${getAccessToken()}`,
+          },
+        });
+        const { data } = res;
+        links = data;
+        setFilteredLinks(links);
+      } catch (error) {
+        console.error(error);
+      }
     }
+    return links;
   };
 
-  useEffect(() => {
-    if (!folderId) return;
-    getUserLinks(folderId);
-  }, [folderId]);
+  const linkData = useQuery({
+    queryKey: [QUERY_KEYS.LINKS, folderId],
+    queryFn: () => getUserLinks(folderId),
+  });
+  const links: LinkInfo[] = linkData.data;
 
   const handleCloseButtonClick = () => {
     setKeyword("");
@@ -103,7 +118,7 @@ function FolderPage() {
   };
 
   const filterByKeyword = () => {
-    const filteredData = filteredLinks.filter((links) => {
+    const filteredData = links.filter((links) => {
       const { description, url, title } = links;
       const searchContent = `${description} ${url} ${title}`
         .toLowerCase()
@@ -117,6 +132,7 @@ function FolderPage() {
       setIsResultEmpty(true);
     }
   };
+
   useEffect(() => {
     if (!keyword) {
       getUserLinks(folderId);
@@ -124,7 +140,31 @@ function FolderPage() {
       return;
     }
     filterByKeyword();
-  }, [keyword]);
+  }, [keyword, folderId]);
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setAddFolderName(e.target.value);
+  };
+
+  const addFolder = async () => {
+    instance.post(
+      `/folders`,
+      {
+        name: addFolderName,
+      },
+      {
+        headers: {
+          Authorization: `Bearer ${getAccessToken()}`,
+        },
+      }
+    );
+  };
+
+  const addFolderMutation = useMutation({
+    mutationFn: () => addFolder(),
+    onSuccess: () =>
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.FOLDER_NAMES] }),
+  });
 
   return (
     <div className={styles.folderContainer}>
@@ -172,8 +212,13 @@ function FolderPage() {
             </button>
             <Dialog onClick={close} isModalOpen={isModalOpen}>
               <Dialog.Title>폴더 추가</Dialog.Title>
-              <Dialog.Input value="" />
-              <Dialog.Button isAddButton>추가하기</Dialog.Button>
+              <Dialog.Input value="" onChange={handleChange} />
+              <Dialog.Button
+                isAddButton
+                onClick={() => addFolderMutation.mutate()}
+              >
+                추가하기
+              </Dialog.Button>
             </Dialog>
           </div>
           <div className={styles.folderCategoryContainer}>
diff --git a/pages/shared/[folderId]/index.tsx b/pages/shared/[folderId]/index.tsx
index b4a6d396f..0df519ac8 100644
--- a/pages/shared/[folderId]/index.tsx
+++ b/pages/shared/[folderId]/index.tsx
@@ -1,45 +1,75 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import Header from "../../../components/header/Header";
 import styles from "./sharedpage.module.css";
 import ShareCard from "../../../components/shareCard/ShareCard";
-import { Folder } from "../../../types/types";
-import { FOLDER_ENDPOINT, instance } from "../../../api/services/config";
-import useUserStore from "@/hooks/useStore";
+import { USERS_ENDPOINT, instance } from "../../../api/services/config";
 import { useRouter } from "next/router";
+import { useQuery } from "@tanstack/react-query";
+import { getAccessToken } from "@/utils/localStorage";
+import { QUERY_KEYS } from "@/constants/queryKeys";
 
 export default function SharedPage() {
-  const [folders, setFolders] = useState<Folder[]>([]);
-  const { user } = useUserStore();
-  const [links, setLinks] = useState([]);
   const router = useRouter();
-  const { folderId } = router.query;
-  const folderName = folders[0]?.name;
+  const folderId = Number(router.query.folderId);
+
+  const getCurrentUser = async () => {
+    try {
+      const res = await instance.get(USERS_ENDPOINT, {
+        headers: {
+          Authorization: `Bearer ${getAccessToken()}`,
+        },
+      });
+      const { data } = res;
+      return data;
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  const currentUser = useQuery({
+    queryKey: [QUERY_KEYS.CURRENT_USER],
+    queryFn: getCurrentUser,
+  });
+  const userId = currentUser.data?.length > 0 ? currentUser?.data[0]?.id : "";
 
   const getFolders = async () => {
-    const res = await instance.get(`${FOLDER_ENDPOINT}/${folderId}`);
-    const nextFolders = res?.data.data.folder;
-    setFolders(nextFolders);
+    const res = await instance.get(`folders/${folderId}`);
+    const { data } = res;
+    return data;
   };
 
-  const getLinks = async (userId: number) => {
-    const res = await instance.get(
-      `/api/users/${userId}/links/?folderId=${folderId}`
-    );
-    const nextLinks = res.data.data.links;
-    setLinks(nextLinks);
+  const folderData = useQuery({
+    queryKey: [QUERY_KEYS.FOLDERS, folderId],
+    queryFn: getFolders,
+  });
+  const folders = folderData.data;
+  const folderName = folders?.length > 0 ? folders[0]?.name : "";
+
+  const getLinks = async (folderId: number) => {
+    const res = await instance.get(`/folders/${folderId}/links`);
+    const { data } = res;
+    return data;
   };
 
-  useEffect(() => {
-    getFolders();
-  }, []);
+  const linksData = useQuery({
+    queryKey: [QUERY_KEYS.LINKS, folderId],
+    queryFn: () => getLinks(folderId),
+  });
+  const links = linksData.data;
+
+  const getUser = async () => {
+    const res = await instance.get(`/users/${userId}`);
+    const { data } = res;
+    return data;
+  };
 
-  useEffect(() => {
-    getLinks(user[0].id);
-  }, []);
+  const user = useQuery({
+    queryKey: [QUERY_KEYS.USER, userId],
+    queryFn: getUser,
+  });
 
   return (
     <>
-      <Header folderName={folderName} />
+      <Header folderName={folderName} user={user.data} />
       <main className={styles.main}>
         <section className={styles.contentSection}>
           <div className={styles.container}>
diff --git a/types/types.d.ts b/types/types.d.ts
index ec7677c97..45792c90f 100644
--- a/types/types.d.ts
+++ b/types/types.d.ts
@@ -18,9 +18,7 @@ export interface FolderName {
   created_at: string;
   name: string;
   user_id: number;
-  link: {
-    count: number;
-  };
+  link_count: number;
 }
 
 export interface ChildrenProps {
@@ -65,7 +63,6 @@ export interface User {
   name: string;
   image_source: string;
   email: string;
-  auth_id: string;
 }
 
 export interface Folder {