diff --git a/W2/react-project/.prettierrc.js b/W2/react-project/.prettierrc.js new file mode 100644 index 000000000..9fea083da --- /dev/null +++ b/W2/react-project/.prettierrc.js @@ -0,0 +1,6 @@ +export default { + "trailingComma": "es5", + "tabWidth": 2, + "semi": false, + "singleQuote": true +} \ No newline at end of file diff --git a/W2/react-project/.vscode/settings.json b/W2/react-project/.vscode/settings.json new file mode 100644 index 000000000..aef844305 --- /dev/null +++ b/W2/react-project/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/W2/react-project/package-lock.json b/W2/react-project/package-lock.json index 5c901c077..bddcaceb1 100644 --- a/W2/react-project/package-lock.json +++ b/W2/react-project/package-lock.json @@ -14,7 +14,11 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", + "styled-components": "^6.1.1", "web-vitals": "^2.1.4" + }, + "devDependencies": { + "prettier": "^3.1.0" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -2285,6 +2289,24 @@ "postcss-selector-parser": "^6.0.10" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz", + "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==", + "dependencies": { + "@emotion/memoize": "^0.8.1" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, + "node_modules/@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -4443,6 +4465,11 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz", "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==" }, + "node_modules/@types/stylis": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.4.tgz", + "integrity": "sha512-36ZrGJ8fgtBr6nwNnuJ9jXIj+bn/pF6UoqmrQT7+Y99+tFFeHHsoR54+194dHdyhPjgbeoNz3Qru0oRt0l6ASQ==" + }, "node_modules/@types/testing-library__jest-dom": { "version": "5.14.9", "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.9.tgz", @@ -5863,6 +5890,14 @@ "node": ">= 6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -6298,6 +6333,14 @@ "postcss": "^8.4" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "engines": { + "node": ">=4" + } + }, "node_modules/css-declaration-sorter": { "version": "6.4.1", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz", @@ -6479,6 +6522,16 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -14339,6 +14392,21 @@ "node": ">= 0.8.0" } }, + "node_modules/prettier": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.1.0.tgz", + "integrity": "sha512-TQLvXjq5IAibjh8EpBIkNKxO749UEWABoiIZehEPiY4GNpVdhaFKqSTu+QrlU6D2dPAfubRmtJTi4K4YkQ5eXw==", + "dev": true, + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", @@ -15586,6 +15654,11 @@ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -16082,6 +16155,33 @@ "webpack": "^5.0.0" } }, + "node_modules/styled-components": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.1.tgz", + "integrity": "sha512-cpZZP5RrKRIClBW5Eby4JM1wElLVP4NQrJbJ0h10TidTyJf4SIIwa3zLXOoPb4gJi8MsJ8mjq5mu2IrEhZIAcQ==", + "dependencies": { + "@emotion/is-prop-valid": "^1.2.1", + "@emotion/unitless": "^0.8.0", + "@types/stylis": "^4.0.2", + "css-to-react-native": "^3.2.0", + "csstype": "^3.1.2", + "postcss": "^8.4.31", + "shallowequal": "^1.1.0", + "stylis": "^4.3.0", + "tslib": "^2.5.0" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0" + } + }, "node_modules/stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", @@ -16097,6 +16197,11 @@ "postcss": "^8.2.15" } }, + "node_modules/stylis": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.0.tgz", + "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==" + }, "node_modules/sucrase": { "version": "3.34.0", "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz", diff --git a/W2/react-project/package.json b/W2/react-project/package.json index 6a815ada5..3eafb9331 100644 --- 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 deleted file mode 100644 index a11777cc4..000000000 Binary files a/W2/react-project/public/favicon.ico and /dev/null differ diff --git a/W2/react-project/public/index.html b/W2/react-project/public/index.html index aa069f27c..1ccb79d05 100644 --- a/W2/react-project/public/index.html +++ b/W2/react-project/public/index.html @@ -2,42 +2,19 @@ - - - - - - - - - React App + Linkbrary_Part 2 Weekly Mission
- + + diff --git a/W2/react-project/public/logo192.png b/W2/react-project/public/logo192.png deleted file mode 100644 index fc44b0a37..000000000 Binary files a/W2/react-project/public/logo192.png and /dev/null differ diff --git a/W2/react-project/public/logo512.png b/W2/react-project/public/logo512.png deleted file mode 100644 index a4e47a654..000000000 Binary files a/W2/react-project/public/logo512.png and /dev/null differ diff --git a/W2/react-project/public/manifest.json b/W2/react-project/public/manifest.json deleted file mode 100644 index 080d6c77a..000000000 --- a/W2/react-project/public/manifest.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "short_name": "React App", - "name": "Create React App Sample", - "icons": [ - { - "src": "favicon.ico", - "sizes": "64x64 32x32 24x24 16x16", - "type": "image/x-icon" - }, - { - "src": "logo192.png", - "type": "image/png", - "sizes": "192x192" - }, - { - "src": "logo512.png", - "type": "image/png", - "sizes": "512x512" - } - ], - "start_url": ".", - "display": "standalone", - "theme_color": "#000000", - "background_color": "#ffffff" -} diff --git a/W2/react-project/public/robots.txt b/W2/react-project/public/robots.txt deleted file mode 100644 index e9e57dc4d..000000000 --- a/W2/react-project/public/robots.txt +++ /dev/null @@ -1,3 +0,0 @@ -# https://www.robotstxt.org/robotstxt.html -User-agent: * -Disallow: diff --git a/W2/react-project/src/App.js b/W2/react-project/src/App.js index 82a921633..262501236 100644 --- 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 (
- -
+ +
); diff --git a/W2/react-project/src/assets/defaule.png b/W2/react-project/src/assets/default.png similarity index 100% rename from W2/react-project/src/assets/defaule.png rename to 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 new file mode 100644 index 000000000..88cc9bec6 Binary files /dev/null and b/W2/react-project/src/assets/kebab.png differ diff --git a/W2/react-project/src/assets/link.svg b/W2/react-project/src/assets/link.svg new file mode 100644 index 000000000..0b9ab2e53 --- /dev/null +++ b/W2/react-project/src/assets/link.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/W2/react-project/src/assets/pen.png b/W2/react-project/src/assets/pen.png new file mode 100644 index 000000000..f4137cdf6 Binary files /dev/null and b/W2/react-project/src/assets/pen.png differ diff --git a/W2/react-project/src/assets/share.png b/W2/react-project/src/assets/share.png new file mode 100644 index 000000000..4855eb7cf Binary files /dev/null and b/W2/react-project/src/assets/share.png differ diff --git a/W2/react-project/src/assets/trash.png b/W2/react-project/src/assets/trash.png new file mode 100644 index 000000000..469c2f5e0 Binary files /dev/null and b/W2/react-project/src/assets/trash.png differ diff --git a/W2/react-project/src/components/CardList.jsx b/W2/react-project/src/components/CardList.jsx new file mode 100644 index 000000000..4ee03113f --- /dev/null +++ b/W2/react-project/src/components/CardList.jsx @@ -0,0 +1,51 @@ +import "../styles/CardList.css"; +import { useEffect, useState } from "react"; +import { timeAgo } from "../utils/timeAgo"; +import defaultImage from "../assets/default.png" +import kebab from '../assets/kebab.png' + +//1. 서버에서 데이터 가져오기. 폴더를 가져옴 + + +function formatDate(value) { + + const date = new Date(value); + return `${date.getFullYear()}. ${date.getMonth() + 1}. ${date.getDate()}`; +} + +function CardList({links}) { + + console.log('links',links) + return( +
+ + {links?.map((links, i) => { + return ( +
+
+ {links.title}/ +
+
+
+ +

{timeAgo(links.createdAt)}

+ +
+

+ {links.description} +

+

{formatDate(links.createdAt)}

+
+
+ ); + })} + +
+ + + ) +} + +export default CardList + diff --git a/W2/react-project/src/components/Footer.js b/W2/react-project/src/components/Footer.jsx similarity index 93% rename from W2/react-project/src/components/Footer.js rename to W2/react-project/src/components/Footer.jsx index cbb3abc16..d27d128a8 100644 --- a/W2/react-project/src/components/Footer.js +++ b/W2/react-project/src/components/Footer.jsx @@ -8,7 +8,8 @@ function Footer() { return (