From 95a4441911025ab2d713632835e1917548824fd9 Mon Sep 17 00:00:00 2001 From: grapefruit13 Date: Tue, 5 Dec 2023 14:21:18 +0900 Subject: [PATCH 1/9] =?UTF-8?q?Refactor:=20ESLint=20=EC=A0=81=EC=9A=A9=20?= =?UTF-8?q?=EB=B0=8F=20class=20->=20className=20=EC=98=A4=ED=83=80=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 15 +++++++++++++++ package.json | 3 +++ src/.eslintrc.js | 23 +++++++++++++++++++++++ src/components/error/NoLinks.css | 2 +- src/components/footer/Footer.css | 1 - src/components/footer/Footer.js | 4 ++-- src/components/header/Header.js | 1 + src/components/header/LoginButton.js | 2 +- src/components/header/Logo.js | 2 +- src/components/main/Card.js | 2 +- src/components/pages/FolderPage.js | 8 ++++---- src/components/pages/SharedPage.js | 1 - src/index.js | 1 - 13 files changed, 52 insertions(+), 13 deletions(-) create mode 100644 src/.eslintrc.js diff --git a/package-lock.json b/package-lock.json index 51e112851..3bd9cdfc2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,9 @@ "react-router-dom": "^6.20.0", "react-scripts": "5.0.0", "web-vitals": "^2.1.4" + }, + "devDependencies": { + "eslint-config-prettier": "^9.1.0" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -7388,6 +7391,18 @@ "url": "https://opencollective.com/eslint" } }, + "node_modules/eslint-config-prettier": { + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz", + "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==", + "dev": true, + "bin": { + "eslint-config-prettier": "bin/cli.js" + }, + "peerDependencies": { + "eslint": ">=7.0.0" + } + }, "node_modules/eslint-config-react-app": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-7.0.1.tgz", diff --git a/package.json b/package.json index 5d3333164..ed255a0cd 100644 --- a/package.json +++ b/package.json @@ -35,5 +35,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "eslint-config-prettier": "^9.1.0" } } diff --git a/src/.eslintrc.js b/src/.eslintrc.js new file mode 100644 index 000000000..48c493e7d --- /dev/null +++ b/src/.eslintrc.js @@ -0,0 +1,23 @@ +module.exports = { + env: { + browser: true, + es2021: true, + }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", + "plugin:react/jsx-runtime", + "prettier", + ], + overrides: [], + parserOptions: { + ecmaVersion: "latest", + sourceType: "module", + }, + plugins: ["react"], + rules: { + semi: ["error", "always"], + quotes: ["warn", "double"], + "react/prop-types": "off", + }, +}; diff --git a/src/components/error/NoLinks.css b/src/components/error/NoLinks.css index 2d4a8be9d..38a8cb981 100644 --- a/src/components/error/NoLinks.css +++ b/src/components/error/NoLinks.css @@ -3,7 +3,7 @@ text-align: center; font-size: 1rem; font-weight: 400; - line-height: 1.5rem; /* 150% */ + line-height: 1.5rem; margin: auto; padding: 2.5625rem 0rem 2.1875rem 0rem; } diff --git a/src/components/footer/Footer.css b/src/components/footer/Footer.css index a31a051d6..a0a6c3c05 100644 --- a/src/components/footer/Footer.css +++ b/src/components/footer/Footer.css @@ -4,7 +4,6 @@ background: #111322; display: flex; justify-content: space-between; - /* align-items: center; */ } .footer-wrapper > span { diff --git a/src/components/footer/Footer.js b/src/components/footer/Footer.js index 876011886..f9526a533 100644 --- a/src/components/footer/Footer.js +++ b/src/components/footer/Footer.js @@ -41,9 +41,9 @@ export function Footer() {
- {footerSnsDatas.map((data, i) => { + {footerSnsDatas.map((data) => { return ( -
+
); diff --git a/src/components/header/Header.js b/src/components/header/Header.js index 59a338dcd..4b9fc5a15 100644 --- a/src/components/header/Header.js +++ b/src/components/header/Header.js @@ -11,6 +11,7 @@ export function Header({ profileDatas }) { {profileDatas.name}

{profileDatas.email}

diff --git a/src/components/header/LoginButton.js b/src/components/header/LoginButton.js index 0384b2725..8472e87ad 100644 --- a/src/components/header/LoginButton.js +++ b/src/components/header/LoginButton.js @@ -2,7 +2,7 @@ export function LoginButton() { return ( <> - + ); diff --git a/src/components/header/Logo.js b/src/components/header/Logo.js index 612eb31ec..461a3b7ec 100644 --- a/src/components/header/Logo.js +++ b/src/components/header/Logo.js @@ -2,7 +2,7 @@ import logo from "../../assets/logo.png"; export function Logo() { return ( <> -
-
{currentFolderName}
+
{currentFolderName}
{currentFolderName === "전체" ? "" : }
{!links.length ? ( diff --git a/src/components/pages/SharedPage.js b/src/components/pages/SharedPage.js index 96d3543d9..fe3115d10 100644 --- a/src/components/pages/SharedPage.js +++ b/src/components/pages/SharedPage.js @@ -1,6 +1,5 @@ import Header from "../header/Header.js"; import Footer from "../footer/Footer.js"; -// import Main from "../main/Main.js"; import { useEffect, useState } from "react"; import { getData } from "../api/api"; import MainHeader from "../main/MainHeader.js"; diff --git a/src/index.js b/src/index.js index 2e6d146ce..b842e3cb4 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,3 @@ -import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./components/App"; From f490bed89286340e33019e89f037f0af88b3b303 Mon Sep 17 00:00:00 2001 From: grapefruit13 Date: Wed, 6 Dec 2023 16:50:28 +0900 Subject: [PATCH 2/9] =?UTF-8?q?refactor(mentor):=207=EC=A3=BC=EC=B0=A8=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=EC=97=90=EC=84=9C=20=EB=94=94=EB=A0=89?= =?UTF-8?q?=ED=86=A0=EB=A6=AC=20=EA=B5=AC=EC=A1=B0=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/.eslintrc.js => .eslintrc.js | 0 src/{components => }/App.js | 0 src/assets/{ => icons/card}/add.svg | 0 src/assets/{ => icons/card}/card_no-img.svg | 0 src/assets/{ => icons}/card/kebab.svg | 0 src/assets/{ => icons}/footer/facebook.png | Bin src/assets/{ => icons}/footer/instagram.png | Bin src/assets/{ => icons}/footer/twitter.png | Bin src/assets/{ => icons}/footer/youtube.png | Bin src/assets/{ => icons/header}/link.svg | 0 src/assets/{ => icons/header}/logo.png | Bin src/assets/{ => icons}/option/pen.svg | 0 src/assets/{ => icons}/option/share.svg | 0 src/assets/{ => icons}/option/star.svg | 0 src/assets/{ => icons}/option/trash-can.svg | 0 src/assets/{ => icons/search}/Search.svg | 0 .../main => assets/styles}/Responsive.css | 0 .../main => assets/styles/card}/Card.css | 0 .../styles/card/CardWrapper.css} | 49 +++--------------- .../styles/folderPage}/AddLink.css | 2 +- .../styles/folderPage}/NoLinks.css | 0 .../styles}/footer/Footer.css | 0 .../styles}/header/Header.css | 0 src/assets/styles/header/MainHeader.css | 41 +++++++++++++++ .../styles/search}/SearchBar.css | 2 +- src/components/{main => common}/Card.js | 15 +++--- src/components/{main => common}/CardInfo.js | 0 .../{main => common}/CardWrapper.js | 0 src/components/{footer => common}/Footer.js | 10 ++-- src/components/{header => common}/Header.js | 2 +- .../{header => common}/LoginButton.js | 0 src/components/{header => common}/Logo.js | 2 +- src/components/{main => common}/SearchBar.js | 2 +- src/components/{footer => common}/Sns.js | 2 +- .../{header => common/folderPage}/AddLink.js | 2 +- .../folderPage}/FolderOptions.js | 6 +-- .../{main => common/folderPage}/Folders.js | 0 .../{error => common/folderPage}/NoLinks.js | 2 +- .../{main => common/folderPage}/Option.js | 0 .../{main => common/sharedPage}/MainHeader.js | 4 +- src/index.js | 2 +- src/{components => }/pages/ErrorPage.js | 0 src/{components => }/pages/FolderPage.js | 24 ++++----- src/{components => }/pages/SharedPage.js | 14 ++--- src/{components/api => utils}/api.js | 0 45 files changed, 94 insertions(+), 87 deletions(-) rename src/.eslintrc.js => .eslintrc.js (100%) rename src/{components => }/App.js (100%) rename src/assets/{ => icons/card}/add.svg (100%) rename src/assets/{ => icons/card}/card_no-img.svg (100%) rename src/assets/{ => icons}/card/kebab.svg (100%) rename src/assets/{ => icons}/footer/facebook.png (100%) rename src/assets/{ => icons}/footer/instagram.png (100%) rename src/assets/{ => icons}/footer/twitter.png (100%) rename src/assets/{ => icons}/footer/youtube.png (100%) rename src/assets/{ => icons/header}/link.svg (100%) rename src/assets/{ => icons/header}/logo.png (100%) rename src/assets/{ => icons}/option/pen.svg (100%) rename src/assets/{ => icons}/option/share.svg (100%) rename src/assets/{ => icons}/option/star.svg (100%) rename src/assets/{ => icons}/option/trash-can.svg (100%) rename src/assets/{ => icons/search}/Search.svg (100%) rename src/{components/main => assets/styles}/Responsive.css (100%) rename src/{components/main => assets/styles/card}/Card.css (100%) rename src/{components/main/Main.css => assets/styles/card/CardWrapper.css} (67%) rename src/{components/header => assets/styles/folderPage}/AddLink.css (94%) rename src/{components/error => assets/styles/folderPage}/NoLinks.css (100%) rename src/{components => assets/styles}/footer/Footer.css (100%) rename src/{components => assets/styles}/header/Header.css (100%) create mode 100644 src/assets/styles/header/MainHeader.css rename src/{components/main => assets/styles/search}/SearchBar.css (86%) rename src/components/{main => common}/Card.js (88%) rename src/components/{main => common}/CardInfo.js (100%) rename src/components/{main => common}/CardWrapper.js (100%) rename src/components/{footer => common}/Footer.js (80%) rename src/components/{header => common}/Header.js (93%) rename src/components/{header => common}/LoginButton.js (100%) rename src/components/{header => common}/Logo.js (77%) rename src/components/{main => common}/SearchBar.js (81%) rename src/components/{footer => common}/Sns.js (77%) rename src/components/{header => common/folderPage}/AddLink.js (86%) rename src/components/{main => common/folderPage}/FolderOptions.js (73%) rename src/components/{main => common/folderPage}/Folders.js (100%) rename src/components/{error => common/folderPage}/NoLinks.js (66%) rename src/components/{main => common/folderPage}/Option.js (100%) rename src/components/{main => common/sharedPage}/MainHeader.js (84%) rename src/{components => }/pages/ErrorPage.js (100%) rename src/{components => }/pages/FolderPage.js (86%) rename src/{components => }/pages/SharedPage.js (80%) rename src/{components/api => utils}/api.js (100%) diff --git a/src/.eslintrc.js b/.eslintrc.js similarity index 100% rename from src/.eslintrc.js rename to .eslintrc.js diff --git a/src/components/App.js b/src/App.js similarity index 100% rename from src/components/App.js rename to src/App.js diff --git a/src/assets/add.svg b/src/assets/icons/card/add.svg similarity index 100% rename from src/assets/add.svg rename to src/assets/icons/card/add.svg diff --git a/src/assets/card_no-img.svg b/src/assets/icons/card/card_no-img.svg similarity index 100% rename from src/assets/card_no-img.svg rename to src/assets/icons/card/card_no-img.svg diff --git a/src/assets/card/kebab.svg b/src/assets/icons/card/kebab.svg similarity index 100% rename from src/assets/card/kebab.svg rename to src/assets/icons/card/kebab.svg diff --git a/src/assets/footer/facebook.png b/src/assets/icons/footer/facebook.png similarity index 100% rename from src/assets/footer/facebook.png rename to src/assets/icons/footer/facebook.png diff --git a/src/assets/footer/instagram.png b/src/assets/icons/footer/instagram.png similarity index 100% rename from src/assets/footer/instagram.png rename to src/assets/icons/footer/instagram.png diff --git a/src/assets/footer/twitter.png b/src/assets/icons/footer/twitter.png similarity index 100% rename from src/assets/footer/twitter.png rename to src/assets/icons/footer/twitter.png diff --git a/src/assets/footer/youtube.png b/src/assets/icons/footer/youtube.png similarity index 100% rename from src/assets/footer/youtube.png rename to src/assets/icons/footer/youtube.png diff --git a/src/assets/link.svg b/src/assets/icons/header/link.svg similarity index 100% rename from src/assets/link.svg rename to src/assets/icons/header/link.svg diff --git a/src/assets/logo.png b/src/assets/icons/header/logo.png similarity index 100% rename from src/assets/logo.png rename to src/assets/icons/header/logo.png diff --git a/src/assets/option/pen.svg b/src/assets/icons/option/pen.svg similarity index 100% rename from src/assets/option/pen.svg rename to src/assets/icons/option/pen.svg diff --git a/src/assets/option/share.svg b/src/assets/icons/option/share.svg similarity index 100% rename from src/assets/option/share.svg rename to src/assets/icons/option/share.svg diff --git a/src/assets/option/star.svg b/src/assets/icons/option/star.svg similarity index 100% rename from src/assets/option/star.svg rename to src/assets/icons/option/star.svg diff --git a/src/assets/option/trash-can.svg b/src/assets/icons/option/trash-can.svg similarity index 100% rename from src/assets/option/trash-can.svg rename to src/assets/icons/option/trash-can.svg diff --git a/src/assets/Search.svg b/src/assets/icons/search/Search.svg similarity index 100% rename from src/assets/Search.svg rename to src/assets/icons/search/Search.svg diff --git a/src/components/main/Responsive.css b/src/assets/styles/Responsive.css similarity index 100% rename from src/components/main/Responsive.css rename to src/assets/styles/Responsive.css diff --git a/src/components/main/Card.css b/src/assets/styles/card/Card.css similarity index 100% rename from src/components/main/Card.css rename to src/assets/styles/card/Card.css diff --git a/src/components/main/Main.css b/src/assets/styles/card/CardWrapper.css similarity index 67% rename from src/components/main/Main.css rename to src/assets/styles/card/CardWrapper.css index 6ff2fa961..f23f5fdbe 100644 --- a/src/components/main/Main.css +++ b/src/assets/styles/card/CardWrapper.css @@ -1,45 +1,3 @@ -.main-header { - display: flex; - flex-direction: column; - align-items: center; - gap: 1.25rem; - padding-top: 1.25rem; - padding-bottom: 3.75rem; - background: var(--linkbrary-bg, #f0f6ff); -} -.main-header_profile { - display: flex; - flex-direction: column; - align-items: center; - gap: 0.75rem; -} -.main-header_profile_img { - width: 3.75rem; - height: 3.75rem; -} - -.main-header_profile_name { - color: var(--text-color-light-mode, #000); - font-size: 1rem; - font-weight: 400; - line-height: 1.5rem; -} - -.main-header_folder-name { - color: #000; - text-align: center; - font-feature-settings: "clig" off, "liga" off; - font-size: 2.5rem; - font-weight: 600; -} - -.main-wrapper { - width: 66.25rem; - padding-top: 2.5rem; - padding-bottom: 6.25rem; - margin: auto; -} - .card-wrapper { display: grid; grid-template-columns: repeat(3, 21.25rem); @@ -116,3 +74,10 @@ font-size: 0.875rem; font-weight: 600; } + +.main-wrapper { + width: 66.25rem; + padding-top: 2.5rem; + padding-bottom: 6.25rem; + margin: auto; +} diff --git a/src/components/header/AddLink.css b/src/assets/styles/folderPage/AddLink.css similarity index 94% rename from src/components/header/AddLink.css rename to src/assets/styles/folderPage/AddLink.css index 49f9edd9d..9fbbdb0b3 100644 --- a/src/components/header/AddLink.css +++ b/src/assets/styles/folderPage/AddLink.css @@ -15,7 +15,7 @@ height: 4.31rem; margin: 3.75rem 0 5.62rem 0; background: var(--linkbrary-white, #fff); - background-image: url("../../assets/link.svg"); + background-image: url("../../icons/header/link.svg"); background-repeat: no-repeat; background-size: 1.25rem; background-position: 1.25rem; diff --git a/src/components/error/NoLinks.css b/src/assets/styles/folderPage/NoLinks.css similarity index 100% rename from src/components/error/NoLinks.css rename to src/assets/styles/folderPage/NoLinks.css diff --git a/src/components/footer/Footer.css b/src/assets/styles/footer/Footer.css similarity index 100% rename from src/components/footer/Footer.css rename to src/assets/styles/footer/Footer.css diff --git a/src/components/header/Header.css b/src/assets/styles/header/Header.css similarity index 100% rename from src/components/header/Header.css rename to src/assets/styles/header/Header.css diff --git a/src/assets/styles/header/MainHeader.css b/src/assets/styles/header/MainHeader.css new file mode 100644 index 000000000..1fb271e38 --- /dev/null +++ b/src/assets/styles/header/MainHeader.css @@ -0,0 +1,41 @@ +.main-header { + display: flex; + flex-direction: column; + align-items: center; + gap: 1.25rem; + padding-top: 1.25rem; + padding-bottom: 3.75rem; + background: var(--linkbrary-bg, #f0f6ff); +} +.main-header_profile { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.75rem; +} +.main-header_profile_img { + width: 3.75rem; + height: 3.75rem; +} + +.main-header_profile_name { + color: var(--text-color-light-mode, #000); + font-size: 1rem; + font-weight: 400; + line-height: 1.5rem; +} + +.main-header_folder-name { + color: #000; + text-align: center; + font-feature-settings: "clig" off, "liga" off; + font-size: 2.5rem; + font-weight: 600; +} + +.main-wrapper { + width: 66.25rem; + padding-top: 2.5rem; + padding-bottom: 6.25rem; + margin: auto; +} diff --git a/src/components/main/SearchBar.css b/src/assets/styles/search/SearchBar.css similarity index 86% rename from src/components/main/SearchBar.css rename to src/assets/styles/search/SearchBar.css index 59f36fa82..d00c8b461 100644 --- a/src/components/main/SearchBar.css +++ b/src/assets/styles/search/SearchBar.css @@ -2,7 +2,7 @@ width: 100%; height: 3.375rem; background: #f5f5f5; - background-image: url("../../assets/Search.svg"); + background-image: url("../../icons/search/Search.svg"); background-repeat: no-repeat; background-size: 1rem; background-position: 1rem; diff --git a/src/components/main/Card.js b/src/components/common/Card.js similarity index 88% rename from src/components/main/Card.js rename to src/components/common/Card.js index d80009b76..06d1c71cf 100644 --- a/src/components/main/Card.js +++ b/src/components/common/Card.js @@ -1,7 +1,8 @@ import { useEffect, useState } from "react"; -import "./Card.css"; -import NoImg from "../../assets/card_no-img.svg"; -import kebab from "../../assets/card/kebab.svg"; +import "../../assets/styles/card/Card.css"; +import "../../assets/styles/card/CardWrapper.css"; +import NoImg from "../../assets/icons/card/card_no-img.svg"; +import kebab from "../../assets/icons/card/kebab.svg"; import CardInfo from "./CardInfo"; export function Card({ link }) { @@ -47,17 +48,17 @@ export function Card({ link }) { if (months > 23) { setMins(`${Math.floor(months / 12)} years ago`); } else if (months >= 12) { - setMins(`1 year ago`); + setMins("1 year ago"); } else if (days > 30) { setMins(`${months} month ago`); } else if (days <= 30) { setMins(`${days} days ago`); } else if (hours >= 24) { - setMins(`1 day ago`); + setMins("1 day ago"); } else if (hours <= 23) { setMins(`${hours} hours ago`); } else if (minutes >= 60) { - setMins(`1 hour ago`); + setMins("1 hour ago"); } else if (minutes <= 59) { setMins({ minutes } + "minutes ago"); } else if (minutes < 2) { @@ -81,7 +82,7 @@ export function Card({ link }) { return ( <> - +
{imageSource ? ( diff --git a/src/components/main/CardInfo.js b/src/components/common/CardInfo.js similarity index 100% rename from src/components/main/CardInfo.js rename to src/components/common/CardInfo.js diff --git a/src/components/main/CardWrapper.js b/src/components/common/CardWrapper.js similarity index 100% rename from src/components/main/CardWrapper.js rename to src/components/common/CardWrapper.js diff --git a/src/components/footer/Footer.js b/src/components/common/Footer.js similarity index 80% rename from src/components/footer/Footer.js rename to src/components/common/Footer.js index f9526a533..c568a4ba6 100644 --- a/src/components/footer/Footer.js +++ b/src/components/common/Footer.js @@ -1,9 +1,9 @@ -import "./Footer.css"; +import "../../assets/styles/footer/Footer.css"; import Sns from "./Sns.js"; -import facebook from "../../assets/footer/facebook.png"; -import twitter from "../../assets/footer/twitter.png"; -import instagram from "../../assets/footer/instagram.png"; -import youtube from "../../assets/footer/youtube.png"; +import facebook from "../../assets/icons/footer/facebook.png"; +import twitter from "../../assets/icons/footer/twitter.png"; +import instagram from "../../assets/icons/footer/instagram.png"; +import youtube from "../../assets/icons/footer/youtube.png"; export function Footer() { const getThisYear = () => { diff --git a/src/components/header/Header.js b/src/components/common/Header.js similarity index 93% rename from src/components/header/Header.js rename to src/components/common/Header.js index 4b9fc5a15..869bf43fa 100644 --- a/src/components/header/Header.js +++ b/src/components/common/Header.js @@ -1,6 +1,6 @@ import LoginButton from "./LoginButton"; import Logo from "./Logo"; -import "./Header.css"; +import "../../assets/styles/header/Header.css"; export function Header({ profileDatas }) { return (
diff --git a/src/components/header/LoginButton.js b/src/components/common/LoginButton.js similarity index 100% rename from src/components/header/LoginButton.js rename to src/components/common/LoginButton.js diff --git a/src/components/header/Logo.js b/src/components/common/Logo.js similarity index 77% rename from src/components/header/Logo.js rename to src/components/common/Logo.js index 461a3b7ec..97279c240 100644 --- a/src/components/header/Logo.js +++ b/src/components/common/Logo.js @@ -1,4 +1,4 @@ -import logo from "../../assets/logo.png"; +import logo from "../../assets/icons/header/logo.png"; export function Logo() { return ( <> diff --git a/src/components/main/SearchBar.js b/src/components/common/SearchBar.js similarity index 81% rename from src/components/main/SearchBar.js rename to src/components/common/SearchBar.js index d4a7cb25a..82b1b198a 100644 --- a/src/components/main/SearchBar.js +++ b/src/components/common/SearchBar.js @@ -1,4 +1,4 @@ -import "./SearchBar.css"; +import "../../assets/styles/search/SearchBar.css"; export function SearchBar() { return ( <> diff --git a/src/components/footer/Sns.js b/src/components/common/Sns.js similarity index 77% rename from src/components/footer/Sns.js rename to src/components/common/Sns.js index 12b1407e8..911ada030 100644 --- a/src/components/footer/Sns.js +++ b/src/components/common/Sns.js @@ -3,7 +3,7 @@ export function Sns({ footerSnsData }) { return ( <> - + {name} diff --git a/src/components/header/AddLink.js b/src/components/common/folderPage/AddLink.js similarity index 86% rename from src/components/header/AddLink.js rename to src/components/common/folderPage/AddLink.js index 5b4c31c7a..6b7fe8fd8 100644 --- a/src/components/header/AddLink.js +++ b/src/components/common/folderPage/AddLink.js @@ -1,4 +1,4 @@ -import "./AddLink.css"; +import "../../../assets/styles/folderPage/AddLink.css"; function AddLink() { return (
diff --git a/src/components/main/FolderOptions.js b/src/components/common/folderPage/FolderOptions.js similarity index 73% rename from src/components/main/FolderOptions.js rename to src/components/common/folderPage/FolderOptions.js index e2b275724..d6a26aa2c 100644 --- a/src/components/main/FolderOptions.js +++ b/src/components/common/folderPage/FolderOptions.js @@ -1,6 +1,6 @@ -import share from "../../assets/option/share.svg"; -import pen from "../../assets/option/pen.svg"; -import trashCan from "../../assets/option/trash-can.svg"; +import share from "../../../assets/icons/option/share.svg"; +import pen from "../../../assets/icons/option/pen.svg"; +import trashCan from "../../../assets/icons/option/trash-can.svg"; import Option from "./Option"; export function FolderOptions() { diff --git a/src/components/main/Folders.js b/src/components/common/folderPage/Folders.js similarity index 100% rename from src/components/main/Folders.js rename to src/components/common/folderPage/Folders.js diff --git a/src/components/error/NoLinks.js b/src/components/common/folderPage/NoLinks.js similarity index 66% rename from src/components/error/NoLinks.js rename to src/components/common/folderPage/NoLinks.js index 30bdfbf07..b6072e8e8 100644 --- a/src/components/error/NoLinks.js +++ b/src/components/common/folderPage/NoLinks.js @@ -1,4 +1,4 @@ -import "./NoLinks.css"; +import "../../../assets/styles/folderPage/NoLinks.css"; export function Nolinks({ msg }) { return
{msg}
; } diff --git a/src/components/main/Option.js b/src/components/common/folderPage/Option.js similarity index 100% rename from src/components/main/Option.js rename to src/components/common/folderPage/Option.js diff --git a/src/components/main/MainHeader.js b/src/components/common/sharedPage/MainHeader.js similarity index 84% rename from src/components/main/MainHeader.js rename to src/components/common/sharedPage/MainHeader.js index b9dcdb3bc..0997f91fa 100644 --- a/src/components/main/MainHeader.js +++ b/src/components/common/sharedPage/MainHeader.js @@ -1,8 +1,8 @@ function MainHeader({ ownerDatas, folderDatas }) { return ( <> -
-
+
+
); diff --git a/src/components/pages/ErrorPage.js b/src/pages/ErrorPage.js similarity index 100% rename from src/components/pages/ErrorPage.js rename to src/pages/ErrorPage.js diff --git a/src/components/pages/FolderPage.js b/src/pages/FolderPage.js similarity index 86% rename from src/components/pages/FolderPage.js rename to src/pages/FolderPage.js index c62b36831..c351db4b2 100644 --- a/src/components/pages/FolderPage.js +++ b/src/pages/FolderPage.js @@ -1,16 +1,16 @@ import { useEffect, useState } from "react"; -import { getData } from "../api/api"; -import { Footer } from "../footer/Footer.js"; -import AddLink from "../header/AddLink.js"; -import Header from "../header/Header.js"; -import Folders from "../main/Folders.js"; -import SearchBar from "../main/SearchBar.js"; -import CardWrapper from "../main/CardWrapper.js"; -import FolderOptions from "../main/FolderOptions.js"; -import Nolinks from "../error/NoLinks.js"; -import add from "../../assets/add.svg"; -import "../main/Main.css"; -import "../main/Responsive.css"; +import { getData } from "../utils/api.js"; +import { Footer } from "../components/common/Footer.js"; +import AddLink from "../components/common/folderPage/AddLink.js"; +import Header from "../components/common/Header.js"; +import Folders from "../components/common/folderPage/Folders.js"; +import SearchBar from "../components/common/SearchBar.js"; +import CardWrapper from "../components/common/CardWrapper.js"; +import FolderOptions from "../components/common/folderPage/FolderOptions.js"; +import Nolinks from "../components/common/folderPage/NoLinks.js"; +import add from "../assets/icons/card/add.svg"; +import "../assets/styles/header/MainHeader.css"; +import "../assets/styles/Responsive.css"; function FolderPage() { const [profileDatas, setProfileDatas] = useState({ diff --git a/src/components/pages/SharedPage.js b/src/pages/SharedPage.js similarity index 80% rename from src/components/pages/SharedPage.js rename to src/pages/SharedPage.js index fe3115d10..6e1b49dfb 100644 --- a/src/components/pages/SharedPage.js +++ b/src/pages/SharedPage.js @@ -1,11 +1,11 @@ -import Header from "../header/Header.js"; -import Footer from "../footer/Footer.js"; +import Header from "../components/common/Header.js"; +import Footer from "../components/common/Footer.js"; import { useEffect, useState } from "react"; -import { getData } from "../api/api"; -import MainHeader from "../main/MainHeader.js"; -import SearchBar from "../main/SearchBar.js"; -import CardWrapper from "../main/CardWrapper.js"; -import "../main/Main.css"; +import { getData } from "../utils/api.js"; +import MainHeader from "../components/common/sharedPage/MainHeader.js"; +import SearchBar from "../components/common/SearchBar.js"; +import CardWrapper from "../components/common/CardWrapper.js"; +import "../assets/styles/header/MainHeader.css"; function SharedPage() { const [profileDatas, setProfileDatas] = useState({ diff --git a/src/components/api/api.js b/src/utils/api.js similarity index 100% rename from src/components/api/api.js rename to src/utils/api.js From 8dc5c5f72655f1a875866b800c680ea36b5ee8e7 Mon Sep 17 00:00:00 2001 From: grapefruit13 Date: Thu, 7 Dec 2023 12:18:58 +0900 Subject: [PATCH 3/9] Refactor(mentor): week7-add code spliting in App --- src/App.js | 7 ++-- src/components/common/Card.js | 60 ++++++----------------------------- src/index.js | 7 +++- src/utils/date.js | 49 ++++++++++++++++++++++++++++ 4 files changed, 69 insertions(+), 54 deletions(-) create mode 100644 src/utils/date.js diff --git a/src/App.js b/src/App.js index b4486c5c9..d9016da15 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,8 @@ import { BrowserRouter, Routes, Route } from "react-router-dom"; -import SharedPage from "./pages/SharedPage"; -import FolderPage from "./pages/FolderPage"; -import ErrorPage from "./pages/ErrorPage"; +import { lazy } from "react"; +const SharedPage = lazy(() => import("./pages/SharedPage")); +const FolderPage = lazy(() => import("./pages/FolderPage")); +const ErrorPage = lazy(() => import("./pages/ErrorPage")); function App() { return ( diff --git a/src/components/common/Card.js b/src/components/common/Card.js index 06d1c71cf..b5fe4e13b 100644 --- a/src/components/common/Card.js +++ b/src/components/common/Card.js @@ -1,4 +1,5 @@ import { useEffect, useState } from "react"; +import { calCreatedAt, calCreatedDates } from "../../utils/date"; import "../../assets/styles/card/Card.css"; import "../../assets/styles/card/CardWrapper.css"; import NoImg from "../../assets/icons/card/card_no-img.svg"; @@ -11,59 +12,18 @@ export function Card({ link }) { const [createdDates, setCreatedDates] = useState({}); const [isHovered, setIsHovered] = useState(false); - function calCreatedDates() { - const splited = createdAt.split("T").slice(0, 1); - const yearMonthDay = splited[0].split("-"); - + function getCreatedDates() { + const { year, month, day } = calCreatedDates(createdAt); setCreatedDates((prev) => ({ ...prev, - year: yearMonthDay[0], - month: yearMonthDay[1], - day: yearMonthDay[2], + year: year, + month: month, + day: day, })); } - function calCreatedAt() { - const now = new Date(); - - const createdDate = new Date( - createdDates.year, - Number(createdDates.month) * 1 - 1, - createdDates.day - ); - - const diffMSec = now.getTime() - createdDate.getTime(); - const MIN = 1000 * 60; - const HOUR = MIN * 60; - const DAY = HOUR * 24; - const MONTH = DAY * 30; - - const calTime = (diffMSec, time) => Math.floor(diffMSec / time); - - const minutes = calTime(diffMSec, MIN); - const hours = calTime(diffMSec, HOUR); - const days = calTime(diffMSec, DAY); - const months = calTime(diffMSec, MONTH); - - if (months > 23) { - setMins(`${Math.floor(months / 12)} years ago`); - } else if (months >= 12) { - setMins("1 year ago"); - } else if (days > 30) { - setMins(`${months} month ago`); - } else if (days <= 30) { - setMins(`${days} days ago`); - } else if (hours >= 24) { - setMins("1 day ago"); - } else if (hours <= 23) { - setMins(`${hours} hours ago`); - } else if (minutes >= 60) { - setMins("1 hour ago"); - } else if (minutes <= 59) { - setMins({ minutes } + "minutes ago"); - } else if (minutes < 2) { - setMins("1 minute ago"); - } + function getCreatedAt() { + setMins(calCreatedAt(createdDates)); } function onMouseEnterHandler() { @@ -73,11 +33,11 @@ export function Card({ link }) { setIsHovered(false); } useEffect(() => { - calCreatedDates(); + getCreatedDates(); }, [createdAt]); useEffect(() => { - calCreatedAt(); + getCreatedAt(); }, [createdDates]); return ( diff --git a/src/index.js b/src/index.js index fc5698278..92a5b545c 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,11 @@ import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; +import { Suspense } from "react"; const root = ReactDOM.createRoot(document.getElementById("root")); -root.render(); +root.render( + is loading...
}> + + +); diff --git a/src/utils/date.js b/src/utils/date.js new file mode 100644 index 000000000..297da64cf --- /dev/null +++ b/src/utils/date.js @@ -0,0 +1,49 @@ +export function calCreatedDates(createdAt) { + const splited = createdAt.split("T").slice(0, 1); + const yearMonthDay = splited[0].split("-"); + + return yearMonthDay; +} + +export function calCreatedAt(createdDates) { + const now = new Date(); + + const createdDate = new Date( + createdDates.year, + Number(createdDates.month) * 1 - 1, + createdDates.day + ); + + const diffMSec = now.getTime() - createdDate.getTime(); + const MIN = 1000 * 60; + const HOUR = MIN * 60; + const DAY = HOUR * 24; + const MONTH = DAY * 30; + + const calTime = (diffMSec, time) => Math.floor(diffMSec / time); + + const minutes = calTime(diffMSec, MIN); + const hours = calTime(diffMSec, HOUR); + const days = calTime(diffMSec, DAY); + const months = calTime(diffMSec, MONTH); + + if (months > 23) { + return `${Math.floor(months / 12)} years ago`; + } else if (months >= 12) { + return "1 year ago"; + } else if (days > 30) { + return `${months} month ago`; + } else if (days <= 30) { + return `${days} days ago`; + } else if (hours >= 24) { + return "1 day ago"; + } else if (hours <= 23) { + return `${hours} hours ago`; + } else if (minutes >= 60) { + return "1 hour ago"; + } else if (minutes <= 59) { + return `${minutes} minutes ago`; + } else if (minutes < 2) { + return "1 minute ago"; + } +} From f0717b82f4b5039a054be3929508f84f84febdb4 Mon Sep 17 00:00:00 2001 From: grapefruit13 Date: Thu, 7 Dec 2023 12:49:11 +0900 Subject: [PATCH 4/9] Refactor(mentor): week7- use axios instead of fetch --- package-lock.json | 29 +++++++++++++++++++++++++++++ package.json | 1 + src/utils/api.js | 16 ++++++++-------- 3 files changed, 38 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3bd9cdfc2..c6632a9a7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "axios": "^1.6.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.20.0", @@ -5326,6 +5327,29 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz", + "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==", + "dependencies": { + "follow-redirects": "^1.15.0", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, + "node_modules/axios/node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/axobject-query": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz", @@ -14469,6 +14493,11 @@ "node": ">= 0.10" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/psl": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz", diff --git a/package.json b/package.json index ed255a0cd..f2de9d065 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "axios": "^1.6.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.20.0", diff --git a/src/utils/api.js b/src/utils/api.js index d97f45387..d700a3813 100644 --- a/src/utils/api.js +++ b/src/utils/api.js @@ -1,12 +1,12 @@ -const BASE_URL = "https://bootcamp-api.codeit.kr/api"; +import axios from "axios"; + +axios.defaults.baseURL = "https://bootcamp-api.codeit.kr/api"; export async function getData(url) { - const response = await fetch(`${BASE_URL}/${url}`); - if (!response.ok) { - throw new Error( - `${BASE_URL}/${url}에서 데이터를 받아오는 데 실패했습니다.` - ); + try { + const response = await axios.get(`${url}`); + return response.data; + } catch (e) { + console.log(`getData에서 ${e} 발생`); } - const result = await response.json(); - return result; } From 935548a14b621df26b1d6c95aa20a2f539091287 Mon Sep 17 00:00:00 2001 From: grapefruit13 Date: Thu, 7 Dec 2023 16:14:01 +0900 Subject: [PATCH 5/9] Refactor(mentor): week7- extract FooterSnsDatas component from Footer component --- src/components/common/Footer.js | 24 ++---------------------- src/components/common/FooterSnsDatas.jsx | 23 +++++++++++++++++++++++ 2 files changed, 25 insertions(+), 22 deletions(-) create mode 100644 src/components/common/FooterSnsDatas.jsx diff --git a/src/components/common/Footer.js b/src/components/common/Footer.js index c568a4ba6..25d809915 100644 --- a/src/components/common/Footer.js +++ b/src/components/common/Footer.js @@ -1,32 +1,12 @@ import "../../assets/styles/footer/Footer.css"; import Sns from "./Sns.js"; -import facebook from "../../assets/icons/footer/facebook.png"; -import twitter from "../../assets/icons/footer/twitter.png"; -import instagram from "../../assets/icons/footer/instagram.png"; -import youtube from "../../assets/icons/footer/youtube.png"; - +import FooterSnsDatas from "./FooterSnsDatas.jsx"; export function Footer() { const getThisYear = () => { const date = new Date(); const thisYear = date.getFullYear(); return thisYear; }; - const footerSnsDatas = [ - { id: 1, name: "facebook", url: "https://www.facebook.com", img: facebook }, - { id: 2, name: "twitter", url: "https://www.twitter.com", img: twitter }, - { - id: 3, - name: "youtube", - url: "https://www.youtube.com", - img: youtube, - }, - { - id: 4, - name: "instagram", - url: "https://www.instagram.com", - img: instagram, - }, - ]; return ( <> @@ -41,7 +21,7 @@ export function Footer() {
- {footerSnsDatas.map((data) => { + {FooterSnsDatas.map((data) => { return (
diff --git a/src/components/common/FooterSnsDatas.jsx b/src/components/common/FooterSnsDatas.jsx new file mode 100644 index 000000000..4bf17e552 --- /dev/null +++ b/src/components/common/FooterSnsDatas.jsx @@ -0,0 +1,23 @@ +import facebook from "../../assets/icons/footer/facebook.png"; +import twitter from "../../assets/icons/footer/twitter.png"; +import instagram from "../../assets/icons/footer/instagram.png"; +import youtube from "../../assets/icons/footer/youtube.png"; + +export const FooterSnsDatas = [ + { id: 1, name: "facebook", url: "https://www.facebook.com", img: facebook }, + { id: 2, name: "twitter", url: "https://www.twitter.com", img: twitter }, + { + id: 3, + name: "youtube", + url: "https://www.youtube.com", + img: youtube, + }, + { + id: 4, + name: "instagram", + url: "https://www.instagram.com", + img: instagram, + }, +]; + +export default FooterSnsDatas; From c6315c3c12dad83adb0d2c3fa3ed7702a34ad34c Mon Sep 17 00:00:00 2001 From: grapefruit13 Date: Thu, 7 Dec 2023 16:35:35 +0900 Subject: [PATCH 6/9] Refactor(mentor): week7-change property name in setProfileDatas, destructure profiledDatas in Header component --- src/components/common/Header.js | 13 +++++++++---- src/pages/SharedPage.js | 6 ++---- 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/src/components/common/Header.js b/src/components/common/Header.js index 869bf43fa..45745261e 100644 --- a/src/components/common/Header.js +++ b/src/components/common/Header.js @@ -2,18 +2,23 @@ import LoginButton from "./LoginButton"; import Logo from "./Logo"; import "../../assets/styles/header/Header.css"; export function Header({ profileDatas }) { + const { + name = "defaultName", + image_source = "https://images.unsplash.com/photo-1701600713610-0f724c65168d?q=80&w=1074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + email = "default@email.com", + } = profileDatas; return (