[김보민] week15

.gitignore

@@ -17,6 +17,9 @@
 
 # misc
 .DS_Store
+._.DS_Store
+**/.DS_Store
+**/._.DS_Store
 *.pem
 
 # debug

jsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "baseUrl": "5-Weekly-Mission"
+    "baseUrl": "src"
   },
-  "include": ["5-Weekly-Mission"]
+  "include": ["src"]
 }

package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@hookform/error-message": "^2.0.1",
-    "axios": "^1.6.8",
+    "axios": "^1.7.2",
     "classnames": "^2.5.1",
     "next": "^13.5.6",
     "react": "^18",

pages/_app.tsx

@@ -1,5 +1,5 @@
 import type { AppProps } from "next/app";
-import "styles/giobal.css";
+import "src/styles/global.css";
 
 export default function App({ Component, pageProps }: AppProps) {
   return <Component {...pageProps} />;

pages/folder/[folderId].js

@@ -0,0 +1,83 @@
+import {
+  Header,
+  SearchBar,
+  Footer,
+  LinkInput,
+  LinkList,
+  Sorting,
+  ErrorComponent,
+  FolderTitle,
+} from "../../src/components";
+import { getData } from "../../src/utils";
+import styles from "src/styles/folder.module.scss";
+import { useEffect, useState } from "react";
+import classNames from "classnames/bind";
+import { useRouter } from "next/router";
+
+const cx = classNames.bind(styles);
+
+function FolderPage() {
+  const [linksByQuery, setLinksByQuery] = useState([]);
+  const [Folders, setFolders] = useState([]);
+  const [user, setUser] = useState([]);
+  const [searchKeyWord, setSearchKeyWord] = useState("");
+  const [name, setName] = useState("");
+
+  const router = useRouter();
+  const { folderId } = router.query;
+
+  /* 받아온 배열이 비어있을 경우 체크. */
+  function checkArrayBlank(array) {
+    return !Array.isArray(array) || array.length === 0;
+  }
+
+  /* 쿼리id로 받은 링크들, 유저데이터, 선택한 폴더 이름 데이터 가져오기*/
+  async function fetchData() {
+    const linkUrl = `/links?folderId=${folderId}`;
+    const FolderUrl = `/folders/${folderId}`;
+
+    const Folders = await getData("/folders");
+    const linksByQuery = await getData(linkUrl);
+    const user = await getData("/users");
+    const name = await getData(FolderUrl);
+
+    setLinksByQuery(linksByQuery.data.folder);
+    setUser(user.data[0]);
+    setName(name.data[0].name);
+    setFolders(Folders.data.folder);
+  }
+
+  useEffect(() => {
+    fetchData();
+  }, [folderId]);
+
+  return (
+    <div>
+      <Header userEmail={user.email} />
+      <LinkInput folders={Folders} />
+      <div className={cx("contents-wrapper")}>
+        <SearchBar
+          searchKeyWord={searchKeyWord}
+          setSearchKeyWord={setSearchKeyWord}
+        />
+        <div className={cx("links-wrapper")}>
+          <Sorting folders={Folders} folderId={folderId} />
+          <FolderTitle name={name} />
+          {checkArrayBlank(linksByQuery) ? (
+            <ErrorComponent />
+          ) : (
+            <LinkList
+              searchKeyWord={searchKeyWord}
+              links={linksByQuery}
+              createdTime="created_at"
+              image="image_source"
+            />
+          )}
+        </div>
+      </div>
+      <Footer />
+    </div>
+  );
+}
+
+export default FolderPage;

pages/folder/index.js

@@ -0,0 +1,75 @@
+import {
+  Header,
+  SearchBar,
+  Footer,
+  LinkInput,
+  LinkList,
+  Sorting,
+  ErrorComponent,
+  FolderTitle,
+} from "../../src/components";
+import { checkAccessToken, getData } from "../../src/utils";
+import styles from "src/styles/folder.module.scss";
+import { useEffect, useState } from "react";
+import classNames from "classnames/bind";
+
+const cx = classNames.bind(styles);
+
+function FolderPage() {
+  const [searchKeyWord, setSearchKeyWord] = useState("");
+  const [user, setUser] = useState("");
+  const [Folders, setFolders] = useState("");
+  const [AllLinks, setAllLinks] = useState("");
+
+  function checkArrayBlank(array) {
+    return array.length && array.length !== 0 ? false : true;
+  }
+
+  async function fetchData() {
+    const user = await getData("/users");
+    const Folders = await getData("/folders");
+    const AllLinks = await getData("/links");
+
+    setUser(user.data[0]);
+    setFolders(Folders.data.folder);
+    setAllLinks(AllLinks.data.folder);
+  }
+
+  useEffect(() => {
+    /* AccessToken없으면 signin페이지로 이동*/
+    if (!checkAccessToken("signInToken")) {
+      location.href = "signin";
+    }
+    fetchData();
+  }, []);
+
+  return (
+    <div>
+      <Header userEmail={user.email} />
+      <LinkInput folders={Folders} />
+      <div className={cx("contents-wrapper")}>
+        <SearchBar
+          searchKeyWord={searchKeyWord}
+          setSearchKeyWord={setSearchKeyWord}
+        />
+        <div className={cx("links-wrapper")}>
+          <Sorting folders={Folders} />
+          <FolderTitle name={"전체"} />
+          {checkArrayBlank(AllLinks) ? (
+            <ErrorComponent />
+          ) : (
+            <LinkList
+              searchKeyWord={searchKeyWord}
+              links={AllLinks}
+              createdTime="created_at"
+              image="image_source"
+            />
+          )}
+        </div>
+      </div>
+      <Footer />
+    </div>
+  );
+}
+
+export default FolderPage;

pages/shared.js

@@ -0,0 +1,52 @@
+import styles from "src/styles/SharedPage.module.scss";
+import classNames from "classnames/bind";
+import {
+  Header,
+  FolderInfo,
+  SearchBar,
+  LinkList,
+  Footer,
+} from "../src/components";
+import { getLinkList, getData, ApiUrl } from "../src/utils";
+import { useEffect, useState } from "react";
+
+const cx = classNames.bind(styles);
+
+function SharedPage() {
+  const [links, setLinks] = useState([]);
+  const [user, setUser] = useState([]);
+  const [searchKeyWord, setSearchKeyWord] = useState("");
+
+  const getUserData = async () => {
+    const { links } = await getLinkList();
+    const user = await getData(ApiUrl.sampleUser);
+    setLinks(links);
+    setUser(user);
+  };
+
+  useEffect(() => {
+    getUserData();
+  }, []);
+
+  return (
+    <>
+      <Header userEmail={user.email} />
+      <FolderInfo userName={user.name} />
+      <div className={cx("contents-wrapper")}>
+        <SearchBar
+          searchKeyWord={searchKeyWord}
+          setSearchKeyWord={setSearchKeyWord}
+        />
+        <LinkList
+          searchKeyWord={searchKeyWord}
+          links={links}
+          createdTime="createdAt"
+          image="imageSource"
+        />
+      </div>
+      <Footer />
+    </>
+  );
+}
+
+export default SharedPage;