[이현승] week 15

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 /WeeklyMissionPart1
+/.next
 .pnp.js
 
 # testing

.next/build-manifest.json

@@ -12,11 +12,6 @@
   ],
   "rootMainFiles": [],
   "pages": {
-    "/": [
-      "static/chunks/webpack.js",
-      "static/chunks/main.js",
-      "static/chunks/pages/index.js"
-    ],
     "/_app": [
       "static/chunks/webpack.js",
       "static/chunks/main.js",
@@ -27,15 +22,10 @@
       "static/chunks/main.js",
       "static/chunks/pages/_error.js"
     ],
-    "/folder": [
-      "static/chunks/webpack.js",
-      "static/chunks/main.js",
-      "static/chunks/pages/folder.js"
-    ],
-    "/shared": [
+    "/folder/[[...folderid]]": [
       "static/chunks/webpack.js",
       "static/chunks/main.js",
-      "static/chunks/pages/shared.js"
+      "static/chunks/pages/folder/[[...folderid]].js"
     ]
   },
   "ampFirstPages": []

.next/server/pages-manifest.json

@@ -2,7 +2,5 @@
   "/_app": "pages/_app.js",
   "/_error": "pages/_error.js",
   "/_document": "pages/_document.js",
-  "/": "pages/index.js",
-  "/folder": "pages/folder.js",
-  "/shared": "pages/shared.js"
+  "/folder/[[...folderid]]": "pages/folder/[[...folderid]].js"
 }

.next/static/chunks/webpack.js

@@ -183,7 +183,7 @@
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	!function() {
-/******/ 		__webpack_require__.h = function() { return "c45f4f379cb7f03f"; }
+/******/ 		__webpack_require__.h = function() { return "ecd5d1d48da095ab"; }
 /******/ 	}();
 /******/ 	
 /******/ 	/* webpack/runtime/global */

components/Api/Api.ts → Api/Api.ts

@@ -9,19 +9,17 @@ export interface AuthProps {
   password: string;
 }
 
-export async function getUserData() {
-  const response = await fetch(`${BASE_URL}/sample/user`, {
+export async function getUserData(userToken: string) {
+  const response = await fetch(`${BASE_URL}/users`, {
     method: "GET",
-    headers: { accept: `*/*` },
+    headers: { accept: `*/*`, Authorization: userToken },
   });
   if (!response.ok) throw new Error(`유저데이터 ${BASE_ERROR_MESSAGE}`);
-  const { name, id, email, profileImageSource } = await response.json();
-
-  return { name, id, email, profileImageSource };
+  return response.json();
 }
 
-export async function getFolderData() {
-  const response = await fetch(`${BASE_URL}/sample/folder`, {
+export async function getFolderData(folderId?: string | number) {
+  const response = await fetch(`${BASE_URL}/folders/${folderId}`, {
     method: "GET",
     headers: { accept: `*/*` },
   });
@@ -38,18 +36,30 @@ export async function getUsersData(userId?: string | number) {
   return response.json();
 }
 
-export async function getFoldersData() {
-  const response = await fetch(`${BASE_URL}/users/1/folders`, {
+export async function getFoldersData(userId: string | number = 1) {
+  const response = await fetch(`${BASE_URL}/users/${userId}/folders`, {
     method: "GET",
     headers: { accept: `*/*` },
   });
   if (!response.ok) throw new Error(`폴더들 ${BASE_ERROR_MESSAGE}`);
   return response.json();
 }
 
-export async function getLinksData(folderId?: string | number) {
+export async function getFolderDataByToken(userToken: string) {
+  const response = await fetch(`${BASE_URL}/folders`, {
+    method: "GET",
+    headers: { accept: `*/*`, Authorization: userToken },
+  });
+  if (!response.ok) throw new Error(`폴더들 ${BASE_ERROR_MESSAGE}`);
+  return response.json();
+}
+
+export async function getLinksData(
+  folderId?: string | number,
+  userId: string | number = 1
+) {
   const response = await fetch(
-    `${BASE_URL}/users/1/links?folderId=${folderId}`,
+    `${BASE_URL}/users/${userId}/links?folderId=${folderId}`,
     {
       method: "GET",
       headers: { accept: `*/*` },

Hooks/useData.ts

@@ -1,14 +1,14 @@
 import { useCallback, useState } from "react";
 
-export function useData(
-  asyncFunction: (pram?: string | number) => Promise<any>
-) {
+type Pram = (number | string | undefined | null)[];
+
+export function useData(asyncFunction: (...pram: any) => Promise<any>) {
   const [data, setData] = useState<any>(null);
 
   const getData = useCallback(
-    async (value?: string | number) => {
+    async (...value: Pram) => {
       try {
-        const result = await asyncFunction(value);
+        const result = await asyncFunction(...value);
         setData(result);
       } catch (err) {
         setData(null);
@@ -17,10 +17,7 @@ export function useData(
     [asyncFunction]
   );
 
-  const returnArray: [any, (value?: string | number) => Promise<void>] = [
-    data,
-    getData,
-  ];
+  const returnArray: [any, (...value: Pram) => Promise<void>] = [data, getData];
 
   return returnArray;
 }

components/AddLink.tsx

@@ -19,6 +19,7 @@ const AddLink = ({ folder, footView }: { folder: any; footView: boolean }) => {
     e.preventDefault();
     setAdd(!add);
     setUrl(AddLink.current?.value);
+    console.log(folder);
   };
 
   return (

components/App.tsx

@@ -1,8 +1,6 @@
 import Header from "./Header";
 import Footer from "./Footer";
-import { ReactNode, useCallback, useEffect, useState } from "react";
-import { getUsersData } from "./Api/Api";
-import { useData } from "../Hooks/useData";
+import { ReactNode } from "react";
 
 function App({
   children,
@@ -13,30 +11,9 @@ function App({
   headerFixed: boolean;
   foot?: (node?: Element | null | undefined) => void;
 }) {
-  const [user, getUser] = useData(getUsersData);
-  const [isLogIn, setIsLogIn] = useState(true);
-
-  const getData = useCallback(async () => {
-    try {
-      await getUser(1);
-      setIsLogIn(true);
-    } catch (err) {
-      setIsLogIn(false);
-    }
-  }, [getUser]);
-
-  useEffect(() => {
-    getData();
-  }, [isLogIn, getData]);
-
   return (
     <>
-      <Header
-        isLogIn={isLogIn}
-        email={user?.data[0]?.email}
-        img={user?.data[0]?.image_source}
-        fixed={headerFixed}
-      />
+      <Header fixed={headerFixed} />
       {children}
       <Footer observer={foot} />
     </>

components/CardList.tsx

@@ -5,11 +5,13 @@ export interface LinkItem {
   id: number;
   createdAt?: string;
   created_at?: string;
+  updated_at?: string | null;
   url: string;
   title: string;
   description: string;
   imageSource?: string;
   image_source?: string;
+  folder_id?: number;
 }
 
 export type FolderObject = {

components/FolderPage/Folder.tsx

@@ -3,7 +3,7 @@ import MainContent from "../MainContent";
 import SearchBar from "../SearchBar";
 import FolderBar from "./FolderBar";
 import CardList, { LinkItem } from "../CardList";
-import { FolderType } from "../../pages/folder";
+import { FolderType } from "../../pages/folder/[[...folderid]]";
 import { MouseEvent, useRef, useState } from "react";
 
 interface Props {