[김현서] Week15

weekly-mission/next-project/lib/api/index.ts

@@ -1,7 +1,71 @@
 import axios from "axios";
+import { useRouter } from "next/router";
 
 const instance = axios.create({
   baseURL: "https://bootcamp-api.codeit.kr/api",
+  headers: { "Content-Type": "application/json" },
 });
 
+// 요청 인터셉터
+// 요청 인터셉터
+instance.interceptors.request.use(
+  function (config) {
+    // 스토리지에서 토큰을 가져온다.
+    const accessToken = localStorage.getItem("accessToken");
+    const refreshToken = localStorage.getItem("refreshToken");
+
+    // 토큰이 있으면 요청 헤더에 추가한다.
+    if (accessToken) {
+      config.headers["Authorization"] = `Bearer ${accessToken}`;
+    }
+    // Refresh 토큰을 보낼 경우 사용하고자 하는 커스텀 인증 헤더를 사용하면 된다.
+    if (refreshToken) {
+      config.headers["x-refresh-token"] = refreshToken;
+    }
+
+    return config;
+  },
+  function (error) {
+    // 요청 오류 처리
+    return Promise.reject(error);
+  }
+);
+
+// 응답 인터셉터
+instance.interceptors.response.use(
+  async function (response) {
+    return response;
+  },
+  async function (error) {
+    const {
+      config,
+      response: { status },
+    } = error;
+
+    if (status === 401 && data.message === "InvalidTokenException") {
+      // 토큰이 없거나 잘못되었을 경우
+      logout();
+    }
+    if (status === 401 && data.message === "TokenExpired") {
+      try {
+        const tokenRefreshResult = await instance.post("/refresh-token");
+        if (tokenRefreshResult.status === 200) {
+          const { accessToken, refreshToken } = tokenRefreshResult.data;
+          // 새로 발급받은 토큰을 스토리지에 저장
+          localStorage.setItem("accessToken", accessToken);
+          localStorage.setItem("refreshToken", refreshToken);
+          // 토큰 갱신 성공. API 재요청
+          return instance(config);
+        } else {
+          logout();
+        }
+      } catch (e) {
+        logout();
+      }
+    }
+
+    return Promise.reject(error);
+  }
+);
+
 export default instance;

weekly-mission/next-project/next.config.mjs

@@ -83,6 +83,12 @@ const nextConfig = {
         port: "",
         pathname: "/badges/**",
       },
+      {
+        protocol: "https",
+        hostname: "ca.slack-edge.com",
+        port: "",
+        pathname: "/**",
+      },
     ],
   },
 };

weekly-mission/next-project/pages/_app.tsx

@@ -1,9 +1,14 @@
 import "@/styles/globals.css";
 import { AppProps } from "next/app";
 import React from "react";
+import { FolderProvider } from "src/context/FolderContext";
 
 function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  return (
+    <FolderProvider>
+      <Component {...pageProps} />
+    </FolderProvider>
+  );
 }
 
 export default App;

weekly-mission/next-project/pages/folder/[folderId].tsx

@@ -0,0 +1,20 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import FolderPageLayout from "@components/Layout/FolderPageLayout";
+import { useFolder, useUser } from "src/context/FolderContext";
+
+function FolderIdPage() {
+  const router = useRouter();
+  const { folderId } = router.query;
+  const { user, getUser } = useUser();
+
+  useEffect(() => {
+    if (folderId) {
+      getUser();
+    }
+  }, [folderId]);
+
+  return <FolderPageLayout user={user} />;
+}
+
+export default FolderIdPage;

weekly-mission/next-project/pages/folder/index.tsx

@@ -0,0 +1,15 @@
+import React, { useEffect } from "react";
+import { useUser, useFolder } from "src/context/FolderContext";
+import FolderPageLayout from "@components/Layout/FolderPageLayout";
+
+function FolderPage() {
+  const { user, getUser } = useUser();
+
+  useEffect(() => {
+    getUser();
+  }, []);
+
+  return <FolderPageLayout user={user} />;
+}
+
+export default FolderPage;

weekly-mission/next-project/pages/service/useFetchLink.ts

@@ -0,0 +1,42 @@
+import { useEffect, useState } from "react";
+import { AxiosResponse } from "axios";
+import instance from "lib/api";
+
+export interface LinkData {
+  data: {
+    id: number;
+    title: string;
+    created_at: string;
+    url: string;
+    description?: string;
+    image_source?: string;
+  }[];
+}
+
+export async function useFetchLinks(userId: number, folderId: number) {
+  const [links, setLinks] = useState<LinkData>({ data: [] });
+
+  useEffect(() => {
+    async function fetchLinks() {
+      try {
+        const response: AxiosResponse<LinkData> = await instance.get(
+          `/api/users/${userId}/links`,
+          {
+            params: {
+              folderId: folderId,
+            },
+          }
+        );
+        setLinks(response.data);
+      } catch (error) {
+        console.error("Error fetching links:", error);
+      }
+    }
+
+    if (folderId) {
+      fetchLinks();
+    }
+  }, [userId, folderId]);
+
+  return links;
+}

weekly-mission/next-project/pages/service/useFolderData.ts

@@ -0,0 +1,42 @@
+import { useState, useEffect } from "react";
+import instance from "lib/api";
+
+interface FolderData {
+  email: string;
+  id: number;
+  name: string;
+  profileImageSource: string;
+}
+
+const useFolderData = (
+  folderId: string
+): {
+  data: FolderData | null;
+  isLoading: boolean;
+} => {
+  const [data, setData] = useState<FolderData | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await instance.get(
+          `${process.env.NEXT_PUBLIC_BASE_URL}/folders/${folderId}`
+        );
+        const fetchedData: FolderData = await response.data.data;
+
+        setData(fetchedData);
+      } catch (error) {
+        console.error("Error fetching folder data:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [folderId]);
+
+  return { data, isLoading };
+};
+
+export default useFolderData;

weekly-mission/next-project/pages/service/useFolderList.tsx

@@ -1,4 +1,6 @@
 import { useState, useEffect } from "react";
+import instance from "lib/api";
+import { AxiosResponse } from "axios";
 
 interface Owner {
   id: number;
@@ -30,19 +32,17 @@ interface FolderListState {
   isLoading: boolean;
 }
 
-const useFolderList = (): FolderListState => {
+const useFolderList = (userId: number): FolderListState => {
   const [data, setData] = useState<FolderData | null>(null);
   const [isLoading, setIsLoading] = useState<boolean>(true);
 
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const response = await fetch(
+        const response: AxiosResponse<FolderData> = await instance.get(
           `${process.env.NEXT_PUBLIC_BASE_URL}/sample/folder`
         );
-        const fetchedData = await response.json();
-
-        setData(fetchedData);
+        setData(response.data);
       } catch (error) {
         console.error("Error fetching folders data:", error);
       } finally {
@@ -57,3 +57,5 @@ const useFolderList = (): FolderListState => {
 };
 
 export default useFolderList;
+
+//${process.env.NEXT_PUBLIC_BASE_URL}/sample/folder

weekly-mission/next-project/pages/service/useFoldersByUserId.tsx

@@ -28,7 +28,7 @@ const useFoldersByUserId = (userId: number): useFoldersByUserIdResponse => {
     const fetchData = async () => {
       try {
         const response = await fetch(
-          `${process.env.NEXT_PUBLIC_BASE_URL}/users/${userId}/folders`
+          `${process.env.NEXT_PUBLIC_BASE_URL}/users/${userId}`
         );
         const fetchedData: Folder = await response.json();
 
@@ -49,3 +49,5 @@ const useFoldersByUserId = (userId: number): useFoldersByUserIdResponse => {
 };
 
 export default useFoldersByUserId;
+
+/*${process.env.NEXT_PUBLIC_BASE_URL}/users/${userId}/folders*/