codeit-bootcamp-frontend · llucas93 · Dec 6, 2023 · Sep 3, 2023 · Oct 10, 2023 · Oct 10, 2023
diff --git a/.DS_Store b/.DS_Store
diff --git a/.env b/.env
@@ -0,0 +1 @@
+REACT_APP_KAKAO_KEY = "b95afa4b872322082f58d1e2ca1623f2"
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,16 +9,17 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "13.5.6",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "13.5.6"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "clsx": "^2.0.0",
     "eslint": "^8",
-    "eslint-config-next": "13.5.6"
+    "eslint-config-next": "13.5.6",
+    "typescript": "^5"
   }
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,6 +1,14 @@
-import '@/styles/globals.css'
-import type { AppProps } from 'next/app'
+import "@/src/assets/global.css";
+import type { AppProps } from "next/app";
+import Head from "next/head";
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return (
+    <>
+      <Head>
+        <title>linkbrary</title>
+      </Head>
+      <Component {...pageProps} />;
+    </>
+  );
 }
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -1,13 +1,13 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
-    <Html lang="en">
+    <Html lang="ko">
       <Head />
       <body>
         <Main />
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/pages/folder.module.css b/pages/folder.module.css
@@ -0,0 +1,42 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 4rem 3.2rem;
+}
+.addLink {
+  display: flex;
+  justify-content: center;
+  padding: 6rem 3.2rem 9rem 3.2rem;
+  background: var(--linkbrary-bg, #f0f6ff);
+
+  @media (max-width: 767px) {
+    padding-top: 2.4rem;
+    padding-bottom: 4rem;
+  }
+}
+.section {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 4rem;
+}
+.folderSection {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 2.4rem;
+}
+.emptyLink {
+  width: 106rem;
+  padding: 4.1rem 0 3.5rem;
+  text-align: center;
+  font-size: 1.6rem;
+  @media (max-width: 1124px) {
+    width: 100%;
+  }
+  @media (max-width: 767px) {
+    width: 100%;
+    font-size: 1.4rem;
+  }
+}
diff --git a/pages/folder.tsx b/pages/folder.tsx
@@ -0,0 +1,69 @@
+import { createContext, useEffect, useState } from "react";
+import AddLink from "@/src/components/AddLink/AddLink";
+import FolderPageCards from "@/src/components/Cards/FolderPageCards";
+import FolderList from "@/src/components/FolderList/FolderList";
+import Search from "@/src/components/Search/Search";
+// import useAsync from "../hooks/useAsync";
+import { Nav, Footer } from "@/src/containers";
+import { Link, getLink } from "@/src/api/getLink";
+import { Folder, getFolder } from "@/src/api/getFolder";
+import style from "./folder.module.css";
+import { useSearchParams } from "next/navigation";
+import CurrentFolder from "@/src/components/CurrentFolder/CurrentFolder";
+
+export const FolderPageContext = createContext<Folder[]>([]);
+
+function FolderPage() {
+  const [links, setLinks] = useState<Link[]>([]);
+  const [folders, setFolders] = useState<Folder[]>([]);
+  // const { wrappedFunction:getLinkAsync} = useAsync(getLink);
+  // const {wrappedFunction:getFolderAsync} = useAsync(getFolder);
+  const searchParams = useSearchParams();
+  const folderParam = searchParams.get("folderId");
+
+  useEffect(() => {
+    const handleLinkLoad = async () => {
+      const links = await getLink({
+        id: 1,
+        folderId: folderParam || "",
+      });
+      setLinks([...links]);
+    };
+    handleLinkLoad();
+  }, [folderParam]);
+
+  useEffect(() => {
+    const handleFolderLoad = async () => {
+      const folders = await getFolder({ id: 1 });
+      setFolders([...folders]);
+    };
+    handleFolderLoad();
+  }, []);
+  return (
+    <>
+      <Nav />
+      <div className={style.addLink}>
+        <AddLink folders={folders} />
+      </div>
+      <div className={style.root}>
+        <div className={style.section}>
+          <Search />
+          <div className={style.folderSection}>
+            <FolderList folders={folders} />
+            <CurrentFolder folderId={folderParam} folders={folders} />
+            <FolderPageContext.Provider value={folders}>
+              {links.length ? (
+                <FolderPageCards cards={links} />
+              ) : (
+                <span className={style.emptyLink}>저장된 링크가 없습니다.</span>
+              )}
+            </FolderPageContext.Provider>
+          </div>
+        </div>
+      </div>
+      <Footer />
+    </>
+  );
+}
+
+export default FolderPage;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		REACT_APP_KAKAO_KEY = "b95afa4b872322082f58d1e2ca1623f2"