codeit-bootcamp-frontend · sung-eunji · Dec 6, 2023 · Dec 7, 2023 · Dec 8, 2023
diff --git a/W2/react-project/.prettierrc.js b/W2/react-project/.prettierrc.js
@@ -0,0 +1,6 @@
+export default {
+   "trailingComma": "es5",
+    "tabWidth": 2,
+    "semi": false,
+    "singleQuote": true
+}
diff --git a/W2/react-project/.vscode/settings.json b/W2/react-project/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/W2/react-project/package-lock.json b/W2/react-project/package-lock.json
diff --git a/W2/react-project/package.json b/W2/react-project/package.json
@@ -9,6 +9,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -34,5 +35,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "prettier": "^3.1.0"
   }
 }
diff --git a/W2/react-project/public/favicon.ico b/W2/react-project/public/favicon.ico
diff --git a/W2/react-project/public/index.html b/W2/react-project/public/index.html
@@ -2,42 +2,19 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
+
+     <link
+      rel="stylesheet"
+      as="style"
+      crossorigin
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-gov-dynamic-subset.css"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+    <title>Linkbrary_Part 2 Weekly Mission</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+    <script src="/src/index.js"></script>
+
   </body>
 </html>
diff --git a/W2/react-project/public/logo192.png b/W2/react-project/public/logo192.png
diff --git a/W2/react-project/public/logo512.png b/W2/react-project/public/logo512.png
diff --git a/W2/react-project/public/manifest.json b/W2/react-project/public/manifest.json
diff --git a/W2/react-project/public/robots.txt b/W2/react-project/public/robots.txt
diff --git a/W2/react-project/src/App.js b/W2/react-project/src/App.js
@@ -1,35 +1,57 @@
-// import logo from "./logo.svg";
-import { useState } from "react";
-import "./styles/App.css";
-import "./styles/Global.css";
+import CardList from "./components/CardList";
 import Search from "./components/Search";
 import Header from "./components/Header";
-import Main from "./components/Main";
 import Footer from "./components/Footer";
-import Bookmark from "./components/Bookmark";
+import "./styles/App.css";
+import "./styles/Global.css";
+import Sort from "./components/Sort"
+import { useEffect, useState } from "react";
+
+
+async function getFetchCards() {
+  const response = await fetch(
+    "https://bootcamp-api.codeit.kr/api/users/1/links",
+  );
+  const body = await response.json();
+
+  return body;
+}
 
 
 function App() {
-  // const [profile, setProfile] = useState(null);
+  const [links, setLinks] = useState([]);
+
+  const getCards = async () => {
+    const {data} = await getFetchCards();
+
+    setLinks(data);
+  };
+
+  const handleClickAll = async () => {
+    const {data: links} = await getFetchCards();
+
+    setLinks(links)
+  }
 
-  // async function sendHeader() {
-  //   const { email, profileImageSource } = await GetUser();
+  const handleClickButton = async (id) => {
+    const {data: links} = await getFetchCards();
 
-  //   setProfile((prevValue) => ({
-  //     ...prevValue,
-  //     email,
-  //     profileImageSource,
-  //   }));
+    const filteredLinks = 
+      links.filter((({folder_id}) => folder_id === id));
 
-  //   return profile
-  // }
+    setLinks(filteredLinks)
+  }
 
+  useEffect(() => {
+    getCards();
+  }, []);
+
   return (
     <div>
       <Header />
-      <Bookmark />
       <Search />
-      <Main />
+      <Sort handleClickButton={handleClickButton} handleClickAll={handleClickAll}/>
+      <CardList links={links}/>
       <Footer />
     </div>
   );

diff --git a/W2/react-project/src/assets/defaule.png → W2/react-project/src/assets/default.png b/W2/react-project/src/assets/defaule.png → W2/react-project/src/assets/default.png
diff --git a/W2/react-project/src/assets/kebab.png b/W2/react-project/src/assets/kebab.png
diff --git a/W2/react-project/src/assets/link.svg b/W2/react-project/src/assets/link.svg
diff --git a/W2/react-project/src/assets/pen.png b/W2/react-project/src/assets/pen.png
diff --git a/W2/react-project/src/assets/share.png b/W2/react-project/src/assets/share.png
diff --git a/W2/react-project/src/assets/trash.png b/W2/react-project/src/assets/trash.png