api 설정 변경 완료

.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,10 +22,10 @@
       "static/chunks/main.js",
       "static/chunks/pages/_error.js"
     ],
-    "/shared/[folderid]": [
+    "/folder/[[...folderid]]": [
       "static/chunks/webpack.js",
       "static/chunks/main.js",
-      "static/chunks/pages/shared/[folderid].js"
+      "static/chunks/pages/folder/[[...folderid]].js"
     ]
   },
   "ampFirstPages": []

.next/server/pages-manifest.json

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

.next/server/webpack-runtime.js

@@ -44,6 +44,75 @@
 /******/ 	__webpack_require__.m = __webpack_modules__;
 /******/ 	
 /************************************************************************/
+/******/ 	/* webpack/runtime/async module */
+/******/ 	(() => {
+/******/ 		var webpackQueues = typeof Symbol === "function" ? Symbol("webpack queues") : "__webpack_queues__";
+/******/ 		var webpackExports = typeof Symbol === "function" ? Symbol("webpack exports") : "__webpack_exports__";
+/******/ 		var webpackError = typeof Symbol === "function" ? Symbol("webpack error") : "__webpack_error__";
+/******/ 		var resolveQueue = (queue) => {
+/******/ 			if(queue && queue.d < 1) {
+/******/ 				queue.d = 1;
+/******/ 				queue.forEach((fn) => (fn.r--));
+/******/ 				queue.forEach((fn) => (fn.r-- ? fn.r++ : fn()));
+/******/ 			}
+/******/ 		}
+/******/ 		var wrapDeps = (deps) => (deps.map((dep) => {
+/******/ 			if(dep !== null && typeof dep === "object") {
+/******/ 				if(dep[webpackQueues]) return dep;
+/******/ 				if(dep.then) {
+/******/ 					var queue = [];
+/******/ 					queue.d = 0;
+/******/ 					dep.then((r) => {
+/******/ 						obj[webpackExports] = r;
+/******/ 						resolveQueue(queue);
+/******/ 					}, (e) => {
+/******/ 						obj[webpackError] = e;
+/******/ 						resolveQueue(queue);
+/******/ 					});
+/******/ 					var obj = {};
+/******/ 					obj[webpackQueues] = (fn) => (fn(queue));
+/******/ 					return obj;
+/******/ 				}
+/******/ 			}
+/******/ 			var ret = {};
+/******/ 			ret[webpackQueues] = x => {};
+/******/ 			ret[webpackExports] = dep;
+/******/ 			return ret;
+/******/ 		}));
+/******/ 		__webpack_require__.a = (module, body, hasAwait) => {
+/******/ 			var queue;
+/******/ 			hasAwait && ((queue = []).d = -1);
+/******/ 			var depQueues = new Set();
+/******/ 			var exports = module.exports;
+/******/ 			var currentDeps;
+/******/ 			var outerResolve;
+/******/ 			var reject;
+/******/ 			var promise = new Promise((resolve, rej) => {
+/******/ 				reject = rej;
+/******/ 				outerResolve = resolve;
+/******/ 			});
+/******/ 			promise[webpackExports] = exports;
+/******/ 			promise[webpackQueues] = (fn) => (queue && fn(queue), depQueues.forEach(fn), promise["catch"](x => {}));
+/******/ 			module.exports = promise;
+/******/ 			body((deps) => {
+/******/ 				currentDeps = wrapDeps(deps);
+/******/ 				var fn;
+/******/ 				var getResult = () => (currentDeps.map((d) => {
+/******/ 					if(d[webpackError]) throw d[webpackError];
+/******/ 					return d[webpackExports];
+/******/ 				}))
+/******/ 				var promise = new Promise((resolve) => {
+/******/ 					fn = () => (resolve(getResult));
+/******/ 					fn.r = 0;
+/******/ 					var fnQueue = (q) => (q !== queue && !depQueues.has(q) && (depQueues.add(q), q && !q.d && (fn.r++, q.push(fn))));
+/******/ 					currentDeps.map((dep) => (dep[webpackQueues](fnQueue)));
+/******/ 				});
+/******/ 				return fn.r ? promise : getResult();
+/******/ 			}, (err) => ((err ? reject(promise[webpackError] = err) : outerResolve(exports)), resolveQueue(queue)));
+/******/ 			queue && queue.d < 0 && (queue.d = 0);
+/******/ 		};
+/******/ 	})();
+/******/ 	
 /******/ 	/* webpack/runtime/compat get default export */
 /******/ 	(() => {
 /******/ 		// getDefaultExport function for compatibility with non-harmony modules

.next/static/chunks/webpack.js

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

Api/Api.ts

@@ -9,15 +9,13 @@ 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(folderId?: string | number) {
@@ -47,6 +45,15 @@ export async function getFoldersData(userId: string | number = 1) {
   return response.json();
 }
 
+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

Hooks/useData.ts

@@ -1,8 +1,8 @@
 import { useCallback, useState } from "react";
 
-type Pram = (number | string | undefined)[];
+type Pram = (number | string | undefined | null)[];
 
-export function useData(asyncFunction: (...pram: Pram) => Promise<any>) {
+export function useData(asyncFunction: (...pram: any) => Promise<any>) {
   const [data, setData] = useState<any>(null);
 
   const getData = useCallback(

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/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/[folderid]";
+import { FolderType } from "../../pages/folder/[[...folderid]]";
 import { MouseEvent, useRef, useState } from "react";
 
 interface Props {

components/FolderPage/FolderBar.tsx

@@ -4,7 +4,7 @@ import FolderNameBar from "@/components/FolderPage/FolderNameBar";
 import { MouseEvent, ReactNode, useState } from "react";
 import Portal from "../../Portal/Portal";
 import ModalAddFolder from "../Modal/ModalAddFolder";
-import { FolderType } from "../../pages/folder/[folderid]";
+import { FolderType } from "../../pages/folder/[[...folderid]]";
 
 const FolderBlock = ({
   itemId,
@@ -72,7 +72,7 @@ function FolderBar({
       <Bar>
         <FolderIndex
           onClick={onClick}
-          items={folderInfo?.data}
+          items={folderInfo}
           selectedId={selectedId}
         />
         <AddFolder type="button" onClick={handleAddFolder}>

components/FolderPage/FolderNameBar.tsx

@@ -4,7 +4,7 @@ import { useState } from "react";
 import ModalDeleteFolder from "../Modal/ModalDeleteFolder";
 import ModalEdit from "../Modal/ModalEdit";
 import ModalShare from "../Modal/ModalShare";
-import { FolderType } from "../../pages/folder/[folderid]";
+import { FolderType } from "../../pages/folder/[[...folderid]]";
 import { GRAY2 } from "../color";
 
 const ICON_MARGIN = "4px";

components/Header.tsx

@@ -2,14 +2,24 @@ import styled from "styled-components";
 import { GRAY5 } from "./color";
 import Link from "next/link";
 import Image from "next/image";
+import { useEffect, useState } from "react";
+import { useUser } from "@/contexts/UserContext";
 
 interface UserProfileProps {
+  email?: string;
+  img?: string;
+}
+
+export interface UserData {
+  id: number;
+  created_at: string;
+  name: string;
+  image_source: string;
   email: string;
-  img: string;
+  auth_id: string;
 }
 
-interface HeaderProps extends UserProfileProps {
-  isLogIn: boolean;
+interface HeaderProps {
   fixed: boolean;
 }
 
@@ -29,7 +39,18 @@ const UserProfile = ({ email, img }: UserProfileProps) => {
   );
 };
 
-const Header = ({ isLogIn, email, img, fixed }: HeaderProps) => {
+const Header = ({ fixed }: HeaderProps) => {
+  const { user: userData, isLogin: isLogIn } = useUser();
+  const [img, setImg] = useState<string>();
+  const [email, setEmail] = useState<string>();
+
+  useEffect(() => {
+    if (userData) {
+      setEmail(userData.data[0].email);
+      setImg(userData.data[0].image_source);
+    }
+  }, [userData]);
+
   return (
     <Heading $headerFixed={fixed}>
       <HeaderContent>

components/Modal/ModalAddLink/Folder.tsx

@@ -25,7 +25,7 @@ const Folder = ({ item }: { item: Item }) => {
       onClick={handleClick}
     >
       <FolderName>{item?.name}</FolderName>
-      <FolderLinks>{item?.link.count}개 링크</FolderLinks>
+      {/* <FolderLinks>{item?.link.count}개 링크</FolderLinks> */}
     </Folders>
   );
 };

components/Modal/ModalAddLink/ModalAddLink.tsx

@@ -1,13 +1,12 @@
 import ModalFrame from "../ModalFrame";
 import BlueButton from "../BlueButton";
 import styled from "styled-components";
-import { FolderObject, LinkItem } from "../../CardList";
 import Folder from "./Folder";
 
 interface AddLinkProps {
   url?: string;
   onClick: (...props: any[]) => void;
-  folder: FolderObject;
+  folder: any;
 }
 
 const ModalAddLink = ({ url, onClick, folder }: AddLinkProps) => {
@@ -18,7 +17,7 @@ const ModalAddLink = ({ url, onClick, folder }: AddLinkProps) => {
     <ModalFrame name="폴더에 추가" onClick={onClick}>
       <Span>{url}</Span>
       <Folders>
-        {folder?.data.map((item) => {
+        {folder.map((item: any) => {
           if (item.id !== 14)
             return <Folder item={item} key={item?.id * -17} />;
         })}