codeit-bootcamp-frontend · kich555 · May 13, 2024 · May 1, 2024 · May 10, 2024 · May 10, 2024
diff --git a/.gitignore → 1-weekly-mission-week9-main/.gitignore b/.gitignore → 1-weekly-mission-week9-main/.gitignore
@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local
@@ -21,3 +22,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# editor directories and files
+.vscode
diff --git a/README.md → 1-weekly-mission-week9-main/README.md b/README.md → 1-weekly-mission-week9-main/README.md
diff --git a/package-lock.json → ...ekly-mission-week9-main/package-lock.json b/package-lock.json → ...ekly-mission-week9-main/package-lock.json
diff --git a/package.json → 1-weekly-mission-week9-main/package.json b/package.json → 1-weekly-mission-week9-main/package.json
@@ -1,18 +1,20 @@
 {
-  "name": "1-weekly-mission",
+  "name": "weekly-mission-react",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "date-fns": "^3.6.0",
+    "axios": "^1.5.1",
+    "classnames": "^2.3.2",
+    "date-fns": "^2.30.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^5.0.1",
-    "react-router-dom": "^6.22.3",
+    "react-router-dom": "^6.17.0",
     "react-scripts": "5.0.1",
-    "styled-components": "^6.1.8"
+    "sass": "^1.69.4",
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -37,5 +39,13 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/preset-typescript": "^7.24.1",
+    "@types/node": "^20.12.11",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.4.5"
   }
 }
diff --git a/1-weekly-mission-week9-main/public/images/card-default.png b/1-weekly-mission-week9-main/public/images/card-default.png
diff --git a/1-weekly-mission-week9-main/public/images/check.svg b/1-weekly-mission-week9-main/public/images/check.svg
diff --git a/1-weekly-mission-week9-main/public/images/close.svg b/1-weekly-mission-week9-main/public/images/close.svg
diff --git a/1-weekly-mission-week9-main/public/images/facebook.svg b/1-weekly-mission-week9-main/public/images/facebook.svg
diff --git a/1-weekly-mission-week9-main/public/images/instagram.svg b/1-weekly-mission-week9-main/public/images/instagram.svg
diff --git a/1-weekly-mission-week9-main/public/images/kebab.svg b/1-weekly-mission-week9-main/public/images/kebab.svg
diff --git a/1-weekly-mission-week9-main/public/images/link.svg b/1-weekly-mission-week9-main/public/images/link.svg
diff --git a/src/assets/linkbrary.svg → ...on-week9-main/public/images/linkbrary.svg b/src/assets/linkbrary.svg → ...on-week9-main/public/images/linkbrary.svg
diff --git a/1-weekly-mission-week9-main/public/images/pen.svg b/1-weekly-mission-week9-main/public/images/pen.svg
diff --git a/1-weekly-mission-week9-main/public/images/search.svg b/1-weekly-mission-week9-main/public/images/search.svg
diff --git a/1-weekly-mission-week9-main/public/images/share.svg b/1-weekly-mission-week9-main/public/images/share.svg
diff --git a/1-weekly-mission-week9-main/public/images/star.svg b/1-weekly-mission-week9-main/public/images/star.svg
diff --git a/1-weekly-mission-week9-main/public/images/trash.svg b/1-weekly-mission-week9-main/public/images/trash.svg
diff --git a/1-weekly-mission-week9-main/public/images/twitter.svg b/1-weekly-mission-week9-main/public/images/twitter.svg
diff --git a/1-weekly-mission-week9-main/public/images/youtube.svg b/1-weekly-mission-week9-main/public/images/youtube.svg
diff --git a/1-weekly-mission-week9-main/public/index.html b/1-weekly-mission-week9-main/public/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <title>Linkbrary</title>
+    <meta property="og:title" content="Linkbrary" key="title" />
+    <meta
+      name="description"
+      property="og:description"
+      content="세상의 모든 정보를 쉽게 저장하고 관리해 보세요"
+      key="description"
+    />
+    <meta
+      property="og:image"
+      content="https://visitbusan.net/uploadImgs/files/cntnts/20211130150754165_wufrotr"
+      key="image"
+    />
+    <meta
+      name="viewport"
+      content="width=device-width,minimum-scale=1,initial-scale=1,maximum-scale=1,user-scalable=no"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/1-weekly-mission-week9-main/src/App.tsx b/1-weekly-mission-week9-main/src/App.tsx
@@ -0,0 +1,17 @@
+import 'sharing/styles/reset.css';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { SharedPage } from 'pages/SharedPage';
+import { FolderPage } from 'pages/FolderPage';
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/shared" element={<SharedPage />} />
+        <Route path="/folder" element={<FolderPage />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default App;
diff --git a/1-weekly-mission-week9-main/src/folder/data-access-folder/index.ts b/1-weekly-mission-week9-main/src/folder/data-access-folder/index.ts
@@ -0,0 +1,2 @@
+export * from "./useGetFolder";
+export * from "./useGetFolders";
diff --git a/1-weekly-mission-week9-main/src/folder/data-access-folder/useGetFolder.tsx b/1-weekly-mission-week9-main/src/folder/data-access-folder/useGetFolder.tsx
@@ -0,0 +1,14 @@
+import { mapFolderData } from 'folder/util-map';
+import { useAsync } from 'sharing/util';
+import { axiosInstance } from 'sharing/util';
+import { Folder } from 'sharing/util';
+
+export const useGetFolder = () => {
+  const getFolder = () => axiosInstance.get('sample/folder');
+  const { loading, error, data } = useAsync<Folder>(getFolder);
+  if (data && data.hasOwnProperty('folder')) {
+    const folderData = mapFolderData(data);
+
+    return { loading, error, data: folderData };
+  }
+};
diff --git a/1-weekly-mission-week9-main/src/folder/data-access-folder/useGetFolders.tsx b/1-weekly-mission-week9-main/src/folder/data-access-folder/useGetFolders.tsx
@@ -0,0 +1,27 @@
+import { axiosInstance } from 'sharing/util';
+import { useAsync } from 'sharing/util';
+
+export interface Folders {
+  data: {
+    id: number;
+    created_at: string;
+    name: string;
+    user_id: number;
+    favorite: boolean;
+    link: {
+      count: number;
+    };
+  }[];
+}
+
+export const useGetFolders = () => {
+  const getFolders = () => axiosInstance.get('users/1/folders');
+  const { loading, error, data } = useAsync<Folders>(getFolders);
+  if (data) {
+    const folders = data.data;
+    const sortedFolders = folders.sort((a, b) => a.id - b.id);
+
+    return { loading, error, data: sortedFolders };
+  }
+  return;
+};
diff --git a/1-weekly-mission-week9-main/src/folder/feature-folder-tool-bar/FolderToolBar.module.scss b/1-weekly-mission-week9-main/src/folder/feature-folder-tool-bar/FolderToolBar.module.scss
@@ -0,0 +1,69 @@
+@import "sharing/styles/global.scss";
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  row-gap: 1.2rem;
+
+  @include tablet {
+    display: grid;
+    grid-template-areas:
+      "folders folders add-button"
+      "folder-name buttons buttons";
+    justify-content: space-between;
+    align-items: center;
+    row-gap: 2.4rem;
+    column-gap: 1.2rem;
+  }
+}
+
+.folders {
+  grid-area: folders;
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 0.8rem;
+  row-gap: 1.2rem;
+  flex-grow: 1;
+}
+
+.add-button {
+  grid-area: add-button;
+
+  position: fixed;
+  bottom: 10.1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: $z-index-fab;
+
+  @include tablet {
+    justify-self: flex-end;
+
+    position: static;
+    transform: none;
+  }
+}
+
+.folder-name {
+  grid-area: folder-name;
+  margin-top: 1.6rem;
+  font-size: 2rem;
+  font-weight: 600;
+  letter-spacing: -0.02rem;
+
+  @include tablet {
+    margin-top: 0;
+    font-size: 2.4rem;
+  }
+}
+
+.buttons {
+  justify-self: flex-start;
+  grid-area: buttons;
+  display: flex;
+  column-gap: 1.2rem;
+
+  @include tablet {
+    justify-self: flex-end;
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from "./useGetFolder";
		export * from "./useGetFolders";