From 93a0e935257144cb8f10c3a57d08d93a74f7ab2f Mon Sep 17 00:00:00 2001 From: withyj Date: Sun, 3 Sep 2023 21:57:33 +0900 Subject: [PATCH 01/35] =?UTF-8?q?chore:=20=EB=A8=B8=EC=A7=80=20=ED=9B=84?= =?UTF-8?q?=20=EB=B8=8C=EB=9E=9C=EC=B9=98=20=EC=82=AD=EC=A0=9C=20github=20?= =?UTF-8?q?action=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/delete-merged-branch-config.yml | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 .github/delete-merged-branch-config.yml diff --git a/.github/delete-merged-branch-config.yml b/.github/delete-merged-branch-config.yml new file mode 100644 index 000000000..2a6d27bef --- /dev/null +++ b/.github/delete-merged-branch-config.yml @@ -0,0 +1,15 @@ +name: delete branch on close pr + +on: + pull_request: + types: [closed] + +permissions: + pull-requests: write + +jobs: + delete-branch: + runs-on: ubuntu-latest + steps: + - name: delete branch + uses: SvanBoxel/delete-merged-branch@main From b2e37bd7db278fa146bfb7395203b4a25bb9d4d1 Mon Sep 17 00:00:00 2001 From: hanseulhee <3021062@gmail.com> Date: Tue, 10 Oct 2023 14:15:18 +0900 Subject: [PATCH 02/35] reset --- .github/delete-merged-branch-config.yml | 15 ++++++++++++++ .github/pull_request_template.md | 27 +++++++++++++++++++++++++ 2 files changed, 42 insertions(+) create mode 100644 .github/delete-merged-branch-config.yml create mode 100644 .github/pull_request_template.md diff --git a/.github/delete-merged-branch-config.yml b/.github/delete-merged-branch-config.yml new file mode 100644 index 000000000..2a6d27bef --- /dev/null +++ b/.github/delete-merged-branch-config.yml @@ -0,0 +1,15 @@ +name: delete branch on close pr + +on: + pull_request: + types: [closed] + +permissions: + pull-requests: write + +jobs: + delete-branch: + runs-on: ubuntu-latest + steps: + - name: delete branch + uses: SvanBoxel/delete-merged-branch@main diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md new file mode 100644 index 000000000..a85814779 --- /dev/null +++ b/.github/pull_request_template.md @@ -0,0 +1,27 @@ +## 요구사항 + +### 기본 + +- [x] +- [] +- [] + +### 심화 + +- [x] +- [] + +## 주요 변경사항 + +- +- + +## 스크린샷 + +![image](이미지url) + +## 멘토에게 + +- +- +- 셀프 코드 리뷰를 통해 질문 이어가겠습니다. From e11e25f095cf9fa1909206fd16ef114c00c9442a Mon Sep 17 00:00:00 2001 From: hanseulhee <3021062@gmail.com> Date: Tue, 10 Oct 2023 14:47:30 +0900 Subject: [PATCH 03/35] =?UTF-8?q?fix:=20=EB=A8=B8=EC=A7=80=20=ED=9B=84=20?= =?UTF-8?q?=EB=B8=8C=EB=9E=9C=EC=B9=98=20=EC=82=AD=EC=A0=9C=20github=20act?= =?UTF-8?q?ion=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/delete-merged-branch-config.yml | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/.github/delete-merged-branch-config.yml b/.github/delete-merged-branch-config.yml index 2a6d27bef..d54933615 100644 --- a/.github/delete-merged-branch-config.yml +++ b/.github/delete-merged-branch-config.yml @@ -4,12 +4,11 @@ on: pull_request: types: [closed] -permissions: - pull-requests: write - jobs: delete-branch: runs-on: ubuntu-latest steps: - name: delete branch uses: SvanBoxel/delete-merged-branch@main + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} From 212e8643d8aebe6cab293e61e2800c4e9b5d6d88 Mon Sep 17 00:00:00 2001 From: hanseulhee <3021062@gmail.com> Date: Tue, 10 Oct 2023 14:50:26 +0900 Subject: [PATCH 04/35] =?UTF-8?q?env:=20workflows=20=ED=8F=B4=EB=8D=94?= =?UTF-8?q?=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/{ => workflows}/delete-merged-branch-config.yml | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename .github/{ => workflows}/delete-merged-branch-config.yml (100%) diff --git a/.github/delete-merged-branch-config.yml b/.github/workflows/delete-merged-branch-config.yml similarity index 100% rename from .github/delete-merged-branch-config.yml rename to .github/workflows/delete-merged-branch-config.yml From 98d03afd17f08b3e9116dfaf9441e474aae9a26f Mon Sep 17 00:00:00 2001 From: HellenHong Date: Sat, 13 Jan 2024 22:02:33 +0900 Subject: [PATCH 05/35] =?UTF-8?q?Chore:=20=EA=B8=B0=EB=B3=B8=20=EB=A0=88?= =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=EB=A7=8C=20=EB=82=A8=EA=B8=B4=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 129 ++++++++++++++++-- package.json | 5 +- src/api/getAllCards.tsx | 14 -- src/api/getEmailCheck.tsx | 12 -- src/api/getFolderList.tsx | 6 - src/api/getNewToken.tsx | 10 -- src/api/getSharedFolder.tsx | 7 - src/api/getSharedUser.tsx | 7 - src/api/getSignUp.tsx | 13 -- src/api/getSignin.tsx | 14 -- src/api/getUser.tsx | 7 - src/api/index.tsx | 23 ---- .../{common => }/Footer/Footer.module.scss | 0 src/components/{common => }/Footer/Footer.tsx | 0 .../{common => }/Nav/Nav.module.scss | 0 src/components/{common => }/Nav/Nav.tsx | 24 ++-- .../ResponsiveImg/ResponsiveImg.module.scss | 0 .../ResponsiveImg/ResponsiveImg.tsx | 0 src/components/common/Card/Card.module.scss | 83 ----------- src/components/common/Card/Card.tsx | 66 --------- .../common/CardList/CardList.module.scss | 29 ---- src/components/common/CardList/CardList.tsx | 57 -------- .../KebabButton/KebabButton.module.scss | 39 ------ .../common/KebabButton/KebabButton.tsx | 102 -------------- .../common/SearchBar/SearchBar.module.scss | 31 ----- src/components/common/SearchBar/SearchBar.tsx | 71 ---------- .../common/Spinner/Spinner.module.scss | 7 - src/components/common/Spinner/Spinner.tsx | 12 -- .../common/StarButton/StarButton.module.scss | 9 -- .../common/StarButton/StarButton.tsx | 38 ------ src/components/common/index.tsx | 9 -- .../FolderMaker/FolderMaker.module.scss | 38 ------ .../folder/FolderMaker/FolderMaker.tsx | 36 ----- .../FolderModifier/FolderModifier.module.scss | 38 ------ .../folder/FolderModifier/FolderModifier.tsx | 107 --------------- .../FolderTagList/FolderTagList.module.scss | 33 ----- .../folder/FolderTagList/FolderTagList.tsx | 68 --------- .../folder/LinkAddBar/LinkAddBar.module.scss | 58 -------- .../folder/LinkAddBar/LinkAddBar.tsx | 47 ------- src/components/folder/index.tsx | 6 - .../AddCardModal/AddCardModal.module.scss | 70 ---------- .../modals/AddCardModal/AddCardModal.tsx | 40 ------ .../AddFolderModal/AddFolderModal.module.scss | 40 ------ .../modals/AddFolderModal/AddFolderModal.tsx | 13 -- .../DeleteCardModal.module.scss | 32 ----- .../DeleteCardModal/DeleteCardModal.tsx | 14 -- .../DeleteFolderModal.module.scss | 32 ----- .../DeleteFolderModal/DeleteFolderModal.tsx | 14 -- .../modals/ModalBackground.module.scss | 22 --- src/components/modals/ModalBackground.tsx | 12 -- src/components/modals/ModalCreator.tsx | 17 --- .../RenameFolderModal.module.scss | 40 ------ .../RenameFolderModal/RenameFolderModal.tsx | 14 -- .../ShareFolderModal.module.scss | 62 --------- .../ShareFolderModal/ShareFolderModal.tsx | 53 ------- src/components/modals/index.tsx | 15 -- .../ShareHeader/ShareHeader.module.scss | 44 ------ .../shared/ShareHeader/ShareHeader.tsx | 38 ------ src/components/shared/index.tsx | 3 - src/components/sign/Input/Input.module.scss | 53 ------- src/components/sign/Input/Input.tsx | 79 ----------- src/components/sign/SignLayout/SignLayout.tsx | 2 +- src/components/sign/index.tsx | 5 - src/contexts/AuthProvider.tsx | 120 ---------------- src/hooks/index.tsx | 4 - src/hooks/useInputValid.tsx | 110 --------------- src/hooks/useOpenModal.tsx | 26 ---- src/hooks/useRequest.tsx | 31 ----- src/pages/404/ErrorPage.module.scss | 73 ---------- src/pages/404/index.tsx | 27 ---- src/pages/_app.tsx | 12 +- src/pages/folder/FolderPage.module.scss | 36 ----- src/pages/folder/index.tsx | 108 --------------- src/pages/index.tsx | 4 +- src/pages/shared/SharedPage.module.scss | 57 -------- src/pages/shared/index.tsx | 51 ------- src/pages/signin/index.tsx | 67 +-------- src/pages/signup/index.tsx | 77 +---------- src/{pages => styles}/Home.module.scss | 2 +- 79 files changed, 148 insertions(+), 2626 deletions(-) delete mode 100644 src/api/getAllCards.tsx delete mode 100644 src/api/getEmailCheck.tsx delete mode 100644 src/api/getFolderList.tsx delete mode 100644 src/api/getNewToken.tsx delete mode 100644 src/api/getSharedFolder.tsx delete mode 100644 src/api/getSharedUser.tsx delete mode 100644 src/api/getSignUp.tsx delete mode 100644 src/api/getSignin.tsx delete mode 100644 src/api/getUser.tsx delete mode 100644 src/api/index.tsx rename src/components/{common => }/Footer/Footer.module.scss (100%) rename src/components/{common => }/Footer/Footer.tsx (100%) rename src/components/{common => }/Nav/Nav.module.scss (100%) rename src/components/{common => }/Nav/Nav.tsx (82%) rename src/components/{common => }/ResponsiveImg/ResponsiveImg.module.scss (100%) rename src/components/{common => }/ResponsiveImg/ResponsiveImg.tsx (100%) delete mode 100644 src/components/common/Card/Card.module.scss delete mode 100644 src/components/common/Card/Card.tsx delete mode 100644 src/components/common/CardList/CardList.module.scss delete mode 100644 src/components/common/CardList/CardList.tsx delete mode 100644 src/components/common/KebabButton/KebabButton.module.scss delete mode 100644 src/components/common/KebabButton/KebabButton.tsx delete mode 100644 src/components/common/SearchBar/SearchBar.module.scss delete mode 100644 src/components/common/SearchBar/SearchBar.tsx delete mode 100644 src/components/common/Spinner/Spinner.module.scss delete mode 100644 src/components/common/Spinner/Spinner.tsx delete mode 100644 src/components/common/StarButton/StarButton.module.scss delete mode 100644 src/components/common/StarButton/StarButton.tsx delete mode 100644 src/components/common/index.tsx delete mode 100644 src/components/folder/FolderMaker/FolderMaker.module.scss delete mode 100644 src/components/folder/FolderMaker/FolderMaker.tsx delete mode 100644 src/components/folder/FolderModifier/FolderModifier.module.scss delete mode 100644 src/components/folder/FolderModifier/FolderModifier.tsx delete mode 100644 src/components/folder/FolderTagList/FolderTagList.module.scss delete mode 100644 src/components/folder/FolderTagList/FolderTagList.tsx delete mode 100644 src/components/folder/LinkAddBar/LinkAddBar.module.scss delete mode 100644 src/components/folder/LinkAddBar/LinkAddBar.tsx delete mode 100644 src/components/folder/index.tsx delete mode 100644 src/components/modals/AddCardModal/AddCardModal.module.scss delete mode 100644 src/components/modals/AddCardModal/AddCardModal.tsx delete mode 100644 src/components/modals/AddFolderModal/AddFolderModal.module.scss delete mode 100644 src/components/modals/AddFolderModal/AddFolderModal.tsx delete mode 100644 src/components/modals/DeleteCardModal/DeleteCardModal.module.scss delete mode 100644 src/components/modals/DeleteCardModal/DeleteCardModal.tsx delete mode 100644 src/components/modals/DeleteFolderModal/DeleteFolderModal.module.scss delete mode 100644 src/components/modals/DeleteFolderModal/DeleteFolderModal.tsx delete mode 100644 src/components/modals/ModalBackground.module.scss delete mode 100644 src/components/modals/ModalBackground.tsx delete mode 100644 src/components/modals/ModalCreator.tsx delete mode 100644 src/components/modals/RenameFolderModal/RenameFolderModal.module.scss delete mode 100644 src/components/modals/RenameFolderModal/RenameFolderModal.tsx delete mode 100644 src/components/modals/ShareFolderModal/ShareFolderModal.module.scss delete mode 100644 src/components/modals/ShareFolderModal/ShareFolderModal.tsx delete mode 100644 src/components/modals/index.tsx delete mode 100644 src/components/shared/ShareHeader/ShareHeader.module.scss delete mode 100644 src/components/shared/ShareHeader/ShareHeader.tsx delete mode 100644 src/components/shared/index.tsx delete mode 100644 src/components/sign/Input/Input.module.scss delete mode 100644 src/components/sign/Input/Input.tsx delete mode 100644 src/components/sign/index.tsx delete mode 100644 src/contexts/AuthProvider.tsx delete mode 100644 src/hooks/index.tsx delete mode 100644 src/hooks/useInputValid.tsx delete mode 100644 src/hooks/useOpenModal.tsx delete mode 100644 src/hooks/useRequest.tsx delete mode 100644 src/pages/404/ErrorPage.module.scss delete mode 100644 src/pages/404/index.tsx delete mode 100644 src/pages/folder/FolderPage.module.scss delete mode 100644 src/pages/folder/index.tsx delete mode 100644 src/pages/shared/SharedPage.module.scss delete mode 100644 src/pages/shared/index.tsx rename src/{pages => styles}/Home.module.scss (98%) diff --git a/package-lock.json b/package-lock.json index 697fb224a..6f689628f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,11 +8,14 @@ "name": "1-weekly-mission", "version": "0.1.0", "dependencies": { + "@tanstack/react-query": "^5.17.10", "axios": "^1.6.2", "next": "14.0.3", "react": "^18", + "react-cookie": "^7.0.1", "react-dom": "^18", - "sass": "^1.69.5" + "sass": "^1.69.5", + "zustand": "^4.4.7" }, "devDependencies": { "@trivago/prettier-plugin-sort-imports": "^4.3.0", @@ -781,6 +784,30 @@ "tslib": "^2.4.0" } }, + "node_modules/@tanstack/query-core": { + "version": "5.17.10", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.17.10.tgz", + "integrity": "sha512-bJ2oQUDBftvHcEkLS3gyzzShSeZpJyzNNRu8oHK13iNdsofyaDXtNO/c1Zy/PZYVX+PhqOXwoT42gMiEMRSSfQ==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/react-query": { + "version": "5.17.10", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.17.10.tgz", + "integrity": "sha512-TNmJN7LkSLzmv01Jen3JbcvhXZyRhc/ETJNjssmmlyMB8IoNvicfgvDRX2gX3q1FTONq+mfsmWintwI+ejmEUw==", + "dependencies": { + "@tanstack/query-core": "5.17.10" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^18.0.0" + } + }, "node_modules/@trivago/prettier-plugin-sort-imports": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/@trivago/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-4.3.0.tgz", @@ -804,6 +831,20 @@ } } }, + "node_modules/@types/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==" + }, + "node_modules/@types/hoist-non-react-statics": { + "version": "3.3.5", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz", + "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==", + "dependencies": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "node_modules/@types/json5": { "version": "0.0.29", "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", @@ -822,14 +863,12 @@ "node_modules/@types/prop-types": { "version": "15.7.11", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz", - "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==", - "dev": true + "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==" }, "node_modules/@types/react": { "version": "18.2.39", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.39.tgz", "integrity": "sha512-Oiw+ppED6IremMInLV4HXGbfbG6GyziY3kqAwJYOR0PNbkYDmLWQA3a95EhdSmamsvbkJN96ZNN+YD+fGjzSBA==", - "dev": true, "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -848,8 +887,7 @@ "node_modules/@types/scheduler": { "version": "0.16.8", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", - "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==", - "dev": true + "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==" }, "node_modules/@typescript-eslint/parser": { "version": "6.13.1", @@ -1418,6 +1456,14 @@ "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", "dev": true }, + "node_modules/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==", + "engines": { + "node": ">= 0.6" + } + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -1435,8 +1481,7 @@ "node_modules/csstype": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", - "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==", - "dev": true + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" }, "node_modules/damerau-levenshtein": { "version": "1.0.8", @@ -2539,6 +2584,14 @@ "node": ">= 0.4" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, "node_modules/ignore": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.0.tgz", @@ -3621,6 +3674,19 @@ "node": ">=0.10.0" } }, + "node_modules/react-cookie": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-7.0.1.tgz", + "integrity": "sha512-SmDjy2TFp+vS6BGOqW7HyaWKyJzVmIH74uP3mxq6kswlwLJEBtIbhkrioozdvQL9r81yprHYFQkSmcO4HiXPdA==", + "dependencies": { + "@types/hoist-non-react-statics": "^3.3.5", + "hoist-non-react-statics": "^3.3.2", + "universal-cookie": "^7.0.0" + }, + "peerDependencies": { + "react": ">= 16.3.0" + } + }, "node_modules/react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", @@ -3636,8 +3702,7 @@ "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/readdirp": { "version": "3.6.0", @@ -4276,6 +4341,15 @@ "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", "dev": true }, + "node_modules/universal-cookie": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-7.0.1.tgz", + "integrity": "sha512-6OuX9xELF6dsVJeADJAYNDOxQf/NR3Na5bGCRd+hkysMDkSt79jJ4tdv5OBe+ZgAks3ExHBdCXkD2SjqLyK59w==", + "dependencies": { + "@types/cookie": "^0.6.0", + "cookie": "^0.6.0" + } + }, "node_modules/uri-js": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", @@ -4285,6 +4359,14 @@ "punycode": "^2.1.0" } }, + "node_modules/use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/watchpack": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", @@ -4411,6 +4493,33 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zustand": { + "version": "4.4.7", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.4.7.tgz", + "integrity": "sha512-QFJWJMdlETcI69paJwhSMJz7PPWjVP8Sjhclxmxmxv/RYI7ZOvR5BHX+ktH0we9gTWQMxcne8q1OY8xxz604gw==", + "dependencies": { + "use-sync-external-store": "1.2.0" + }, + "engines": { + "node": ">=12.7.0" + }, + "peerDependencies": { + "@types/react": ">=16.8", + "immer": ">=9.0", + "react": ">=16.8" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "immer": { + "optional": true + }, + "react": { + "optional": true + } + } } } } diff --git a/package.json b/package.json index 3553f3b81..55ffd7676 100644 --- a/package.json +++ b/package.json @@ -9,11 +9,14 @@ "lint": "next lint" }, "dependencies": { + "@tanstack/react-query": "^5.17.10", "axios": "^1.6.2", "next": "14.0.3", "react": "^18", + "react-cookie": "^7.0.1", "react-dom": "^18", - "sass": "^1.69.5" + "sass": "^1.69.5", + "zustand": "^4.4.7" }, "devDependencies": { "@trivago/prettier-plugin-sort-imports": "^4.3.0", diff --git a/src/api/getAllCards.tsx b/src/api/getAllCards.tsx deleted file mode 100644 index 04f003e23..000000000 --- a/src/api/getAllCards.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { axiosInstance } from "./axiosInstance"; - -export default async function getAllCards(userId = "", folderId = "") { - let url = `${userId}/links?`; - const searchUrl = new URLSearchParams(); - if (folderId !== "") { - searchUrl.append("folderId", folderId); - url += searchUrl.toString(); - } - console.log(url); - const response = await axiosInstance.get(`${url}`); - const data = response?.data?.data; - return data?.folder; -} diff --git a/src/api/getEmailCheck.tsx b/src/api/getEmailCheck.tsx deleted file mode 100644 index 01c483b91..000000000 --- a/src/api/getEmailCheck.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { axiosInstance } from "./axiosInstance"; - -export default async function getEmailCheck(email = "") { - try { - const response = await axiosInstance.post(`check-email`, { - email: email, - }); - return response.data; - } catch (e) { - return; - } -} diff --git a/src/api/getFolderList.tsx b/src/api/getFolderList.tsx deleted file mode 100644 index f94f259e7..000000000 --- a/src/api/getFolderList.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import { axiosInstance } from "./axiosInstance"; - -export default async function getFolderList(userId = "") { - const response = await axiosInstance.get(`${userId}/folders`); - return response?.data; -} diff --git a/src/api/getNewToken.tsx b/src/api/getNewToken.tsx deleted file mode 100644 index f91d47940..000000000 --- a/src/api/getNewToken.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { axiosInstance } from "./axiosInstance"; - -export default async function getNewToken(refreshToken = "") { - if (!refreshToken) return; - - const response = await axiosInstance.post("/refresh-token", { - refresh_token: refreshToken, - }); - return response?.data; -} diff --git a/src/api/getSharedFolder.tsx b/src/api/getSharedFolder.tsx deleted file mode 100644 index 68fcb308c..000000000 --- a/src/api/getSharedFolder.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { axiosInstance } from "./axiosInstance"; -import { SHARED_USER_ID } from "./constants"; - -export default async function getSharedFolder() { - const response = await axiosInstance.get(`${SHARED_USER_ID}/folder`); - return response?.data; -} diff --git a/src/api/getSharedUser.tsx b/src/api/getSharedUser.tsx deleted file mode 100644 index d2786675b..000000000 --- a/src/api/getSharedUser.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { axiosInstance } from "./axiosInstance"; -import { SHARED_USER_ID } from "./constants"; - -export default async function getSharedUser() { - const response = await axiosInstance.get(`${SHARED_USER_ID}/user`); - return response?.data; -} diff --git a/src/api/getSignUp.tsx b/src/api/getSignUp.tsx deleted file mode 100644 index fa60b00ac..000000000 --- a/src/api/getSignUp.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { axiosInstance } from "./axiosInstance"; - -export default async function getSignUp(email = "", password = "") { - try { - const response = await axiosInstance.post("/sign-up", { - email: email, - password: password, - }); - return response.data; - } catch (e) { - return; - } -} diff --git a/src/api/getSignin.tsx b/src/api/getSignin.tsx deleted file mode 100644 index 5a0ad55f2..000000000 --- a/src/api/getSignin.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { axiosInstance } from "./axiosInstance"; - -export default async function getSignIn(email = "", password = "") { - try { - const response = await axiosInstance.post("/sign-in", { - email: email, - password: password, - }); - return response.data; - } catch (e) { - console.log(e); - return; - } -} diff --git a/src/api/getUser.tsx b/src/api/getUser.tsx deleted file mode 100644 index cc41f1e21..000000000 --- a/src/api/getUser.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { axiosInstance } from "./axiosInstance"; -import { USER_ID } from "./constants"; - -export default async function getUser() { - const response = await axiosInstance.get(`${USER_ID}`); - return response?.data; -} diff --git a/src/api/index.tsx b/src/api/index.tsx deleted file mode 100644 index bc01c2bc8..000000000 --- a/src/api/index.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import getAllCards from "./getAllCards"; -import getFolderList from "./getFolderList"; -import getUser from "./getUser"; -import getNewToken from "./getNewToken"; - -import getSharedFolder from "./getSharedFolder"; -import getSharedUser from "./getSharedUser"; - -import getEmailCheck from "./getEmailCheck"; -import getSignIn from "./getSignin"; -import getSignUp from "./getSignUp"; - -export { - getAllCards, - getFolderList, - getNewToken, - getUser, - getSharedFolder, - getSharedUser, - getEmailCheck, - getSignIn, - getSignUp, -}; diff --git a/src/components/common/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss similarity index 100% rename from src/components/common/Footer/Footer.module.scss rename to src/components/Footer/Footer.module.scss diff --git a/src/components/common/Footer/Footer.tsx b/src/components/Footer/Footer.tsx similarity index 100% rename from src/components/common/Footer/Footer.tsx rename to src/components/Footer/Footer.tsx diff --git a/src/components/common/Nav/Nav.module.scss b/src/components/Nav/Nav.module.scss similarity index 100% rename from src/components/common/Nav/Nav.module.scss rename to src/components/Nav/Nav.module.scss diff --git a/src/components/common/Nav/Nav.tsx b/src/components/Nav/Nav.tsx similarity index 82% rename from src/components/common/Nav/Nav.tsx rename to src/components/Nav/Nav.tsx index 38de8726b..8ac0f032f 100644 --- a/src/components/common/Nav/Nav.tsx +++ b/src/components/Nav/Nav.tsx @@ -8,14 +8,14 @@ import Image from "next/image"; import Link from "next/link"; import styles from "./Nav.module.scss"; -import { useAuth } from "@/contexts/AuthProvider"; + +const user = null; function Nav({ isSticky }: { isSticky?: boolean }) { let navClassName = isSticky ? { className: `${styles["sticky"]} ${styles["nav"]}` } : { className: `${styles["nav"]}` }; - const { user, logout } = useAuth(); return ( diff --git a/src/components/common/ResponsiveImg/ResponsiveImg.module.scss b/src/components/ResponsiveImg/ResponsiveImg.module.scss similarity index 100% rename from src/components/common/ResponsiveImg/ResponsiveImg.module.scss rename to src/components/ResponsiveImg/ResponsiveImg.module.scss diff --git a/src/components/common/ResponsiveImg/ResponsiveImg.tsx b/src/components/ResponsiveImg/ResponsiveImg.tsx similarity index 100% rename from src/components/common/ResponsiveImg/ResponsiveImg.tsx rename to src/components/ResponsiveImg/ResponsiveImg.tsx diff --git a/src/components/common/Card/Card.module.scss b/src/components/common/Card/Card.module.scss deleted file mode 100644 index 244a53055..000000000 --- a/src/components/common/Card/Card.module.scss +++ /dev/null @@ -1,83 +0,0 @@ -@import "@/styles/global.scss"; - -.card-container { - width: 340px; - height: 350px; - background-color: white; - box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.1); - padding: 0; - border-radius: 15px; - position: relative; - &:hover { - box-shadow: 0 0 0 2px var(--color-primary); - } - - :hover img { - transform: scale(1.5); - transition: transform 0.3s; - width: 100%; - height: 100%; - object-fit: cover; - } -} -.card-container img { - width: 100%; - height: 100%; - object-fit: cover; -} -/* 카드 컴포넌트의 이미지 파트 */ -.card-img-section { - width: 340px; - height: 200px; - border-top-left-radius: 15px; - border-top-right-radius: 15px; - overflow: hidden; -} - -/* 카드 컴포넌트의 텍스트 파트 */ -.card-text-section { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: left; - padding: 20px 15px; - gap: 10px; - position: relative; -} - -.time-stamp { - color: #666; - font-family: Pretendard; - font-size: 13px; - font-weight: 400; -} - -.introduce-text { - width: 300px; - height: 50px; - text-overflow: ellipsis; - font-size: 16px; - font-weight: 400; - line-height: 24px; - white-space: normal; - overflow: hidden; - word-break: break-word; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; -} - -.created-date { - color: #333; - text-overflow: ellipsis; - white-space: nowrap; - font-size: 14px; - font-weight: 400; -} - -/* 카드 컴포넌트의 부수적인 파트 */ - -.no-card-list { - height: 500px; - padding: 5rem; -} diff --git a/src/components/common/Card/Card.tsx b/src/components/common/Card/Card.tsx deleted file mode 100644 index d9e763e27..000000000 --- a/src/components/common/Card/Card.tsx +++ /dev/null @@ -1,66 +0,0 @@ -/*Card 컴포넌트: - - card: card 값을 받아 개별적인 Card 컴포넌트를 생성 - folderList: 값을 받아 KebabButton 컴포넌트에게 내려줌. - onClick: 값을 받아 KebabButton 컴포넌트에게 내려줌. - */ - -import Link from "next/link"; -import StarButton from "@/components/common/StarButton/StarButton"; -import KebabButton from "@/components/common/KebabButton/KebabButton"; -import { CardInterface, FolderInterface, ModalInterface } from "@/types"; -import formatDate from "@/utils/formatDate"; -import calcDate from "@/utils/calcDate"; -import styles from "./Card.module.scss"; - -function Card({ - card, - folderList, - onClick, -}: { - card: CardInterface; - folderList?: FolderInterface[]; - onClick?: (m: ModalInterface) => void; -}) { - const str = calcDate(card.created_at || card.createdAt); - return ( - <> -
- {onClick && ( - <> - - - - )} - -
- {card.title} -
-
-

{str}

-

{card.description}

-

- {formatDate(card.created_at || card.createdAt)} -

-
- -
- - ); -} - -export default Card; diff --git a/src/components/common/CardList/CardList.module.scss b/src/components/common/CardList/CardList.module.scss deleted file mode 100644 index 8b4024e26..000000000 --- a/src/components/common/CardList/CardList.module.scss +++ /dev/null @@ -1,29 +0,0 @@ -@import "@/styles/global.scss"; - -.no-card-list { - text-align: center; - font-size: 1.6rem; - font-weight: 400; - line-height: 24px; - padding: 12rem 0 20rem; -} - -.card-section { - margin: 4rem auto; - display: grid; - grid-template-columns: 1fr; - gap: 3rem; - align-items: center; - justify-content: center; - @include tablet { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 3rem; - } - - @include desktop { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - gap: 3rem; - } -} diff --git a/src/components/common/CardList/CardList.tsx b/src/components/common/CardList/CardList.tsx deleted file mode 100644 index 9f7ca9057..000000000 --- a/src/components/common/CardList/CardList.tsx +++ /dev/null @@ -1,57 +0,0 @@ -/*CardList 컴포넌트 - -cardList: cardlist 값을 받아 Card 컴포넌트들을 map으로 리턴 -keyword: keyword 값을 받아 keyword가 포함된 card 컴포넌트들만 filter 해서 map으로 리턴하고, -받은 keyword가 없다면 전체 card 컴포넌트들을 map으로 리턴 -onClick: Card 컴포넌트에게 내려줌 -folderList: Card 컴포넌트에게 내려줌 -*/ - -import Card from "@/components/common/Card/Card"; -import { CardInterface, FolderInterface, ModalInterface } from "@/types"; -import styles from "./CardList.module.scss"; - -function CardList({ - cardList, - onClick, - folderList, - keyword = "", -}: { - cardList?: CardInterface[]; - onClick?: (m: ModalInterface) => void; - folderList?: FolderInterface[]; - keyword?: string; -}) { - if (!cardList || cardList.length === 0) { - return ( -
저장된 링크가 없습니다.
- ); - } - if (keyword) { - const searchTerm = keyword.toLowerCase().split(" ").join(""); - - cardList = cardList.filter((card) => { - const searchText = `${card.description}${card.url}${card.title}` - .toLowerCase() - .split(" ") - .join(""); - return searchText.includes(searchTerm); - }); - } - return ( -
- {cardList?.map((card) => { - return ( - - ); - })} -
- ); -} - -export default CardList; diff --git a/src/components/common/KebabButton/KebabButton.module.scss b/src/components/common/KebabButton/KebabButton.module.scss deleted file mode 100644 index da20b2db0..000000000 --- a/src/components/common/KebabButton/KebabButton.module.scss +++ /dev/null @@ -1,39 +0,0 @@ -@import "@/styles/global.scss"; - -.kebab-button { - background-color: transparent; - border: none; - position: absolute; - bottom: 33%; - right: 1rem; - z-index: $KEBAB_ZINDEX; -} - -.parent-kebab { - display: relative; -} - -.kebab-menu { - position: absolute; - right: -7rem; - bottom: 4rem; - background-color: white; - border-radius: 5px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - width: 10rem; - overflow: hidden; - z-index: $KEBAB_ZINDEX; - box-shadow: 3px 3px 3px 3px var(--color-gray2); - & button { - padding: 1rem; - width: 100%; - height: 100%; - } - & button:hover { - color: var(--color-primary); - background: var(--color-linkbrary); - } -} diff --git a/src/components/common/KebabButton/KebabButton.tsx b/src/components/common/KebabButton/KebabButton.tsx deleted file mode 100644 index af655ab42..000000000 --- a/src/components/common/KebabButton/KebabButton.tsx +++ /dev/null @@ -1,102 +0,0 @@ -/*Kebab 컴포넌트: - Card 컴포넌트 각각에 붙어있는 컴포넌트로, kebab을 누르면 삭제하기, 추가하기 버튼이 있는 메뉴바가 나옴. - - card: 모달을 열 때 어떤 Card 컴포넌트에서 모달을 여는 것인지 파악하기 위한 값 - onClick: 모달을 열게 해주는 함수 - folderList: addLinkModal을 열 때 필요한 folderList 값. -*/ - -import { useState } from "react"; -import Image from "next/image"; -import { DeleteCardModal, AddCardModal } from "@/components/modals"; -import { CardInterface, FolderInterface, ModalInterface } from "@/types"; -import styles from "./KebabButton.module.scss"; - -interface Props { - card: CardInterface; - onClick: (m: ModalInterface) => void; - folderList?: FolderInterface[]; -} - -function KebabMenu({ card, folderList, onClick }: Props) { - const handleKebabClick = (id: string) => { - if (id === "deleteCardButton") { - const newModal = { - component: , - show: true, - }; - onClick(newModal); - } - if (id === "addCardButton") { - const newModal = { - component: , - show: true, - }; - onClick(newModal); - } else { - return; - } - }; - - return ( - <> -
- - -
- - ); -} - -function KebabButton({ card, folderList, onClick }: Props) { - const [isMenuOpen, setIsMenuOpen] = useState(false); - const handleMenuOpen = () => { - setIsMenuOpen(!isMenuOpen); - }; - const handleMenuClose = () => { - setTimeout(() => { - setIsMenuOpen(false); - }, 100); - }; - - return ( - <> -
- - {isMenuOpen && ( - - )} -
- - ); -} - -export default KebabButton; diff --git a/src/components/common/SearchBar/SearchBar.module.scss b/src/components/common/SearchBar/SearchBar.module.scss deleted file mode 100644 index 804fcfa4e..000000000 --- a/src/components/common/SearchBar/SearchBar.module.scss +++ /dev/null @@ -1,31 +0,0 @@ -.search-form-container { - max-width: 1060px; - width: 100%; - min-width: 500px; - background-color: white; - - .search-form { - position: relative; - } -} - -.search-bar { - padding: 1rem 4rem; - width: 100%; - height: 5rem; - border-radius: 10px; - border: none; - background-color: #f5f5f5; -} - -.search-icon { - position: absolute; - top: 1.5rem; - left: 1.5rem; -} - -.reset-button { - position: absolute; - top: 1.5rem; - right: 1.5rem; -} diff --git a/src/components/common/SearchBar/SearchBar.tsx b/src/components/common/SearchBar/SearchBar.tsx deleted file mode 100644 index 0cb6b4629..000000000 --- a/src/components/common/SearchBar/SearchBar.tsx +++ /dev/null @@ -1,71 +0,0 @@ -/*SearchBar 컴포넌트: - 검색어를 입력하는 컴포넌트. 이 검색어를 통해 원하는 Card 컴포넌트를 찾음. - - onChange: 엔터를 누를 경우 호출할 함수. - keys: 입력한 검색어가 있을 때 input 내부 글자를 reset 해주는 resetButton을 렌더링해주는 값. -*/ - -import { useState, ChangeEvent } from "react"; -import Image from "next/image"; -import styles from "./SearchBar.module.scss"; - -function SearchBar({ - onChange, - keys, -}: { - onChange: (w: string) => void; - keys?: string; -}) { - const [text, setText] = useState(""); - - const handleTitleChange = (e: ChangeEvent) => { - setText(e.target.value); - }; - const handleKeyword = (e: React.KeyboardEvent) => { - if (e?.keyCode === 13) { - e.preventDefault(); - onChange(text); - } - }; - const handleResetSearchBar = (e: React.MouseEvent) => { - e.preventDefault(); - setText(""); - onChange(""); - }; - - return ( -
-
- search icon - - {keys && ( - - )} -
-
- ); -} - -export default SearchBar; diff --git a/src/components/common/Spinner/Spinner.module.scss b/src/components/common/Spinner/Spinner.module.scss deleted file mode 100644 index 0651606d8..000000000 --- a/src/components/common/Spinner/Spinner.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -.container { - width: 350px; - height: 350px; - display: flex; - justify-content: center; - align-items: center; -} diff --git a/src/components/common/Spinner/Spinner.tsx b/src/components/common/Spinner/Spinner.tsx deleted file mode 100644 index 76a5c4a78..000000000 --- a/src/components/common/Spinner/Spinner.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import Image from "next/image"; -import styles from "./Spinner.module.scss"; - -function Spinner() { - return ( -
- loading... -
- ); -} - -export default Spinner; diff --git a/src/components/common/StarButton/StarButton.module.scss b/src/components/common/StarButton/StarButton.module.scss deleted file mode 100644 index 02c0317af..000000000 --- a/src/components/common/StarButton/StarButton.module.scss +++ /dev/null @@ -1,9 +0,0 @@ -@import "@/styles/global.scss"; - -.star-button { - position: absolute; - background: transparent; - top: 1rem; - left: 1rem; - z-index: $STAR_ZINDEX; -} diff --git a/src/components/common/StarButton/StarButton.tsx b/src/components/common/StarButton/StarButton.tsx deleted file mode 100644 index bf82fe398..000000000 --- a/src/components/common/StarButton/StarButton.tsx +++ /dev/null @@ -1,38 +0,0 @@ -/*StarButton 컴포넌트: - Card 컴포넌트의 좌측 상단 별모양 버튼. -*/ - -import { useState } from "react"; -import Image from "next/image"; -import { CardInterface } from "@/types"; -import styles from "./StarButton.module.scss"; - -function StarButton({ card }: { card: CardInterface }) { - const [isFilled, setIsFilled] = useState(false); - const handleStarButton = () => { - setIsFilled(!isFilled); - }; - return ( - <> - - - ); -} - -export default StarButton; diff --git a/src/components/common/index.tsx b/src/components/common/index.tsx deleted file mode 100644 index fc80adcf8..000000000 --- a/src/components/common/index.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import Card from "./Card/Card"; -import CardList from "./CardList/CardList"; -import Footer from "./Footer/Footer"; -import ResponsiveImg from "./ResponsiveImg/ResponsiveImg"; -import SearchBar from "./SearchBar/SearchBar"; -import Spinner from "./Spinner/Spinner"; -import Nav from "./Nav/Nav"; - -export { Card, CardList, Footer, ResponsiveImg, SearchBar, Spinner, Nav }; diff --git a/src/components/folder/FolderMaker/FolderMaker.module.scss b/src/components/folder/FolderMaker/FolderMaker.module.scss deleted file mode 100644 index 788bce491..000000000 --- a/src/components/folder/FolderMaker/FolderMaker.module.scss +++ /dev/null @@ -1,38 +0,0 @@ -@import "@/styles/global.scss"; - -.container { - position: fixed; - bottom: 101px; - width: 100%; - display: flex; - justify-content: center; - align-items: center; - z-index: $FLOATING_BUTTON_ZINDEX; - @include tablet { - position: absolute; - top: 450px; - height: 0; - } -} - -.folder-maker-button { - z-index: $FLOATING_BUTTON_ZINDEX; - text-align: center; - font-size: 16px; - font-style: normal; - font-weight: 500; - line-height: normal; - letter-spacing: -0.3px; - background-color: var(--color-primary); - padding: 8px 24px; - border-radius: 20px; - color: white; - gap: 20px; - - @include tablet { - color: var(--color-primary); - background-color: transparent; - position: absolute; - right: 4rem; - } -} diff --git a/src/components/folder/FolderMaker/FolderMaker.tsx b/src/components/folder/FolderMaker/FolderMaker.tsx deleted file mode 100644 index 77767584b..000000000 --- a/src/components/folder/FolderMaker/FolderMaker.tsx +++ /dev/null @@ -1,36 +0,0 @@ -/*FolderMaker 컴포넌트: - AddFolderModal 모달을 띄우는 버튼 컴포넌트. - 만약 화면의 크기가 tablet 미만이 되면 floating button 형태로 렌더링됨. -*/ - -import { AddFolderModal } from "@/components/modals"; -import { ModalInterface } from "@/types"; -import styles from "./FolderMaker.module.scss"; - -function FolderMaker({ onClick }: { onClick: (m: ModalInterface) => void }) { - const handleFolderCreateButton = (id: string) => { - if (id === "folderCreateButton") { - const newModal: ModalInterface = { - component: , - show: true, - }; - onClick(newModal); - } - }; - - return ( -
- -
- ); -} - -export default FolderMaker; diff --git a/src/components/folder/FolderModifier/FolderModifier.module.scss b/src/components/folder/FolderModifier/FolderModifier.module.scss deleted file mode 100644 index 3764fc87d..000000000 --- a/src/components/folder/FolderModifier/FolderModifier.module.scss +++ /dev/null @@ -1,38 +0,0 @@ -@import "@/styles/global.scss"; - -.button-modifier { - height: 0; - display: flex; - gap: 1rem; - & button { - display: flex; - justify-content: center; - } -} - -.folder-title { - font-size: 24px; - font-style: normal; - font-weight: 600; - line-height: normal; - letter-spacing: -0.2px; -} - -.modifier-container { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 1rem; - padding: 0 4rem; - - @include desktop { - flex-direction: row; - justify-content: space-between; - align-items: center; - width: 100%; - min-width: 500px; - width: 1060px; - padding: 0; - margin: 0 auto; - } -} diff --git a/src/components/folder/FolderModifier/FolderModifier.tsx b/src/components/folder/FolderModifier/FolderModifier.tsx deleted file mode 100644 index 353115606..000000000 --- a/src/components/folder/FolderModifier/FolderModifier.tsx +++ /dev/null @@ -1,107 +0,0 @@ -/*FolderModifier 컴포넌트: - 각 folder의 수정, 삭제, 공유 버튼 컴포넌트로, 전체 폴더에선 렌더링되지 않음. -*/ - -import Image from "next/image"; -import { - DeleteFolderModal, - RenameFolderModal, - ShareFolderModal, -} from "@/components/modals"; -import { FolderInterface, ModalInterface } from "@/types"; -import styles from "./FolderModifier.module.scss"; - -function FolderTitle({ title }: { title: string }) { - return

{title}

; -} - -function FolderModifier({ - folder, - onClick, -}: { - folder: FolderInterface; - onClick: (m: ModalInterface) => void; -}) { - const handleFolderModifier = (id: string) => { - if (id === "folderShareButton") { - const newModal = { - component: , - show: true, - }; - onClick(newModal); - } - if (id === "folderRenameButton") { - const newModal = { - component: , - show: true, - }; - onClick(newModal); - } - if (id === "folderDeleteButton") { - const newModal = { - component: , - show: true, - }; - onClick(newModal); - } else { - return; - } - }; - - return ( -
- - - {folder.name !== "전체" && ( -
-
- - - -
-
- )} -
- ); -} - -export default FolderModifier; diff --git a/src/components/folder/FolderTagList/FolderTagList.module.scss b/src/components/folder/FolderTagList/FolderTagList.module.scss deleted file mode 100644 index 2927fb26c..000000000 --- a/src/components/folder/FolderTagList/FolderTagList.module.scss +++ /dev/null @@ -1,33 +0,0 @@ -@import "@/styles/global.scss"; - -.folder-tag-list { - width: 100%; -} - -.folder-tags-container { - width: 60%; - display: flex; - gap: 1rem; - flex-wrap: wrap; - @include desktop { - width: 1060px; - margin: auto; - } -} - -.folder-name-button { - padding: 1rem; - white-space: nowrap; - border-radius: 10px; - background-color: white; - border: 1px solid var(--color-primary); - - &:hover { - background-color: var(--linkbrary-bg, #f0f6ff); - } -} - -.clicked { - background-color: var(--color-primary); - color: white; -} diff --git a/src/components/folder/FolderTagList/FolderTagList.tsx b/src/components/folder/FolderTagList/FolderTagList.tsx deleted file mode 100644 index be3fa4e27..000000000 --- a/src/components/folder/FolderTagList/FolderTagList.tsx +++ /dev/null @@ -1,68 +0,0 @@ -/*FolderTagList 컴포넌트 - 클릭하면 해당 folder의 CardList 컴포넌트를 보여주는 folder 이름 버튼 리스트. - - folders: 사용자의 전체 folderList 값을 가져옴. - current: 현재 위치한 folder. current folder button은 클래스 이름으로 `clicked` 를 가짐. - onClick: folder tag 버튼을 누를 때 발생하는 함수. -*/ - -import { FolderInterface } from "@/types"; -import styles from "./FolderTagList.module.scss"; - -function FolderTag({ - folder, - onClick, - clicked = false, -}: { - folder: FolderInterface; - onClick: (folder: FolderInterface) => void; - clicked?: boolean; -}) { - const handleFolderTagButton = () => { - if (folder) { - onClick(folder); - } - }; - - return ( - - ); -} -function FolderTagList({ - folders, - current, - onClick, -}: { - folders: FolderInterface[]; - current: FolderInterface; - onClick: (folder: FolderInterface) => void; -}) { - return ( -
-
- {folders?.map((folder) => { - return ( - - ); - })} -
-
- ); -} - -export default FolderTagList; diff --git a/src/components/folder/LinkAddBar/LinkAddBar.module.scss b/src/components/folder/LinkAddBar/LinkAddBar.module.scss deleted file mode 100644 index 789ef19e8..000000000 --- a/src/components/folder/LinkAddBar/LinkAddBar.module.scss +++ /dev/null @@ -1,58 +0,0 @@ -.add-form-container { - background-color: var(--linkbrary-bg, #f0f6ff); - - & form { - display: flex; - justify-content: center; - align-items: center; - } - .add-link-form { - position: relative; - max-width: 1060px; - width: 100%; - min-width: 500px; - } -} - -.add-link-button { - border-radius: 8px; - background: var( - --gra-purpleblue-to-skyblue, - linear-gradient(91deg, #6d6afe 0.12%, #6ae3fe 101.84%) - ); - text-align: center; - width: 80px; - padding: 10px 16px; - border: none; - color: white; - position: absolute; - top: 7rem; - right: 2rem; -} - -.add-link-input { - width: 100%; - height: 6rem; - margin: 6rem auto; - border: none; - border-radius: 8px; - padding: 0 50px; -} - -.add-link-icon { - position: absolute; - top: 8rem; - left: 2rem; -} - -@media (max-width: 1124px) { - .add-link-form { - padding: 0 4rem; - } - .add-link-icon { - left: 6rem; - } - .add-link-button { - right: 6rem; - } -} diff --git a/src/components/folder/LinkAddBar/LinkAddBar.tsx b/src/components/folder/LinkAddBar/LinkAddBar.tsx deleted file mode 100644 index 915994461..000000000 --- a/src/components/folder/LinkAddBar/LinkAddBar.tsx +++ /dev/null @@ -1,47 +0,0 @@ -/*LinkAddBar 컴포넌트 - input에 링크를 작성하고 submit하면 AddCardModal이 뜨게 하는 컴포넌트. -*/ - -import { useState, ChangeEvent } from "react"; -import Image from "next/image"; -import styles from "./LinkAddBar.module.scss"; - -function LinkAddBar() { - const [keyword, setKeyword] = useState(""); - const handleKeywordChange = (e: ChangeEvent) => - setKeyword(e.target.value); - - return ( - <> -
-
-
- link icon - - -
-
-
- - ); -} - -export default LinkAddBar; diff --git a/src/components/folder/index.tsx b/src/components/folder/index.tsx deleted file mode 100644 index 911cc2043..000000000 --- a/src/components/folder/index.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import FolderTagList from "./FolderTagList/FolderTagList"; -import LinkAddBar from "./LinkAddBar/LinkAddBar"; -import FolderModifier from "./FolderModifier/FolderModifier"; -import FolderMaker from "./FolderMaker/FolderMaker"; - -export { FolderTagList, LinkAddBar, FolderModifier, FolderMaker }; diff --git a/src/components/modals/AddCardModal/AddCardModal.module.scss b/src/components/modals/AddCardModal/AddCardModal.module.scss deleted file mode 100644 index 28b14c4f0..000000000 --- a/src/components/modals/AddCardModal/AddCardModal.module.scss +++ /dev/null @@ -1,70 +0,0 @@ -.folder-checkbox { - display: flex; - width: 28rem; - padding: 8px; - font-size: 16px; - font-weight: 400; - line-height: 24px; - justify-content: flex-start; - align-items: center; - gap: 1rem; -} -.checked { - border-radius: 8px; - color: var(--linkbrary-primary-color, #6d6afe); - background-color: #f0f6ff; -} -.link-counts { - color: var(--linkbrary-gray-60, #9fa6b2); - font-size: 14px; - font-style: normal; - font-weight: 400; - line-height: normal; -} -.modal-content { - display: flex; - flex-direction: column; - gap: 2.4rem; - padding: 3.2rem 4rem; - justify-content: center; - align-items: center; -} -.modal-desc { - color: #9fa6b2; - text-align: center; - font-size: 1.4rem; - font-weight: 400; - line-height: 22px; /* 157.143% */ -} - -.modal-title { - color: #373740; - font-size: 2rem; - font-weight: 700; -} - -.modal-input { - color: #9fa6b2; - width: 28rem; - padding: 1.6rem; - text-align: center; - font-size: 1.4rem; - font-weight: 400; - line-height: 22px; /* 157.143% */ - - border-radius: 8px; - border: 1px solid var(--linkbrary-primary-color, #6d6afe); -} - -.modal-button { - width: 28rem; - color: white; - font-size: 1.6rem; - padding: 1.6rem 2rem; - border-radius: 8px; - font-weight: 600; - background: var( - --gra-purpleblue-to-skyblue, - linear-gradient(91deg, #6d6afe 0.12%, #6ae3fe 101.84%) - ); -} diff --git a/src/components/modals/AddCardModal/AddCardModal.tsx b/src/components/modals/AddCardModal/AddCardModal.tsx deleted file mode 100644 index 5750825cd..000000000 --- a/src/components/modals/AddCardModal/AddCardModal.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { MouseEvent } from "react"; -import { CardInterface, FolderInterface } from "@/types"; -import styles from "./AddCardModal.module.scss"; - -function AddCardModal({ - card, - folderList, -}: { - card: CardInterface; - folderList?: FolderInterface[]; -}) { - const handleToggle = (e: MouseEvent) => { - (e.target as Element).classList.toggle(`${styles["checked"]}`); - }; - - return ( -
-

폴더에 추가

-

{card.url}

- - {folderList?.map((folder) => { - return ( -
- {folder?.name} -
- {folder?.link?.count}개 링크 -
-
- ); - })} - -
- ); -} - -export default AddCardModal; diff --git a/src/components/modals/AddFolderModal/AddFolderModal.module.scss b/src/components/modals/AddFolderModal/AddFolderModal.module.scss deleted file mode 100644 index 5145f0b46..000000000 --- a/src/components/modals/AddFolderModal/AddFolderModal.module.scss +++ /dev/null @@ -1,40 +0,0 @@ -.modal-content { - display: flex; - flex-direction: column; - gap: 2.4rem; - padding: 3.2rem 4rem; - justify-content: center; - align-items: center; -} - -.modal-title { - color: #373740; - font-size: 2rem; - font-weight: 700; -} - -.modal-input { - color: #9fa6b2; - width: 28rem; - padding: 1.6rem; - text-align: center; - font-size: 1.4rem; - font-weight: 400; - line-height: 22px; /* 157.143% */ - - border-radius: 8px; - border: 1px solid var(--linkbrary-primary-color, #6d6afe); -} - -.modal-button { - width: 28rem; - color: white; - font-size: 1.6rem; - padding: 1.6rem 2rem; - border-radius: 8px; - font-weight: 600; - background: var( - --gra-purpleblue-to-skyblue, - linear-gradient(91deg, #6d6afe 0.12%, #6ae3fe 101.84%) - ); -} diff --git a/src/components/modals/AddFolderModal/AddFolderModal.tsx b/src/components/modals/AddFolderModal/AddFolderModal.tsx deleted file mode 100644 index 9e82b4823..000000000 --- a/src/components/modals/AddFolderModal/AddFolderModal.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import styles from "./AddFolderModal.module.scss"; - -function AddFolderModal() { - return ( -
-

폴더 추가

- - -
- ); -} - -export default AddFolderModal; diff --git a/src/components/modals/DeleteCardModal/DeleteCardModal.module.scss b/src/components/modals/DeleteCardModal/DeleteCardModal.module.scss deleted file mode 100644 index 966fb3d3c..000000000 --- a/src/components/modals/DeleteCardModal/DeleteCardModal.module.scss +++ /dev/null @@ -1,32 +0,0 @@ -.modal-content { - display: flex; - flex-direction: column; - gap: 2.4rem; - padding: 3.2rem 4rem; - justify-content: center; - align-items: center; -} - -.modal-title { - color: #373740; - font-size: 2rem; - font-weight: 700; -} - -.modal-desc { - color: #9fa6b2; - text-align: center; - font-size: 1.4rem; - font-weight: 400; - line-height: 22px; /* 157.143% */ -} - -.modal-button { - width: 28rem; - color: white; - font-size: 1.6rem; - padding: 1.6rem 2rem; - border-radius: 8px; - font-weight: 600; - background-color: var(--color-red); -} diff --git a/src/components/modals/DeleteCardModal/DeleteCardModal.tsx b/src/components/modals/DeleteCardModal/DeleteCardModal.tsx deleted file mode 100644 index f4dde552e..000000000 --- a/src/components/modals/DeleteCardModal/DeleteCardModal.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { CardInterface } from "@/types"; -import styles from "./DeleteCardModal.module.scss"; - -function DeleteCardModal({ card }: { card: CardInterface }) { - return ( -
-

링크 삭제

-

{card.url}

- -
- ); -} - -export default DeleteCardModal; diff --git a/src/components/modals/DeleteFolderModal/DeleteFolderModal.module.scss b/src/components/modals/DeleteFolderModal/DeleteFolderModal.module.scss deleted file mode 100644 index 966fb3d3c..000000000 --- a/src/components/modals/DeleteFolderModal/DeleteFolderModal.module.scss +++ /dev/null @@ -1,32 +0,0 @@ -.modal-content { - display: flex; - flex-direction: column; - gap: 2.4rem; - padding: 3.2rem 4rem; - justify-content: center; - align-items: center; -} - -.modal-title { - color: #373740; - font-size: 2rem; - font-weight: 700; -} - -.modal-desc { - color: #9fa6b2; - text-align: center; - font-size: 1.4rem; - font-weight: 400; - line-height: 22px; /* 157.143% */ -} - -.modal-button { - width: 28rem; - color: white; - font-size: 1.6rem; - padding: 1.6rem 2rem; - border-radius: 8px; - font-weight: 600; - background-color: var(--color-red); -} diff --git a/src/components/modals/DeleteFolderModal/DeleteFolderModal.tsx b/src/components/modals/DeleteFolderModal/DeleteFolderModal.tsx deleted file mode 100644 index 47d067022..000000000 --- a/src/components/modals/DeleteFolderModal/DeleteFolderModal.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { FolderInterface } from "@/types"; -import styles from "./DeleteFolderModal.module.scss"; - -function DeleteFolderModal({ folder }: { folder: FolderInterface }) { - return ( -
-

폴더 삭제

-

{folder.name}

- -
- ); -} - -export default DeleteFolderModal; diff --git a/src/components/modals/ModalBackground.module.scss b/src/components/modals/ModalBackground.module.scss deleted file mode 100644 index 7ce90ded1..000000000 --- a/src/components/modals/ModalBackground.module.scss +++ /dev/null @@ -1,22 +0,0 @@ -@import "@/styles/global.scss"; - -.background { - z-index: $MODAL_BACKGROUND_ZINDEX; - display: flex; - position: fixed; - background-color: rgba(0, 0, 0, 0.4); - justify-content: center; - align-items: center; - inset: 0; -} - -.container { - position: fixed; - padding: 3rem 4rem; - background-color: white; - border-radius: 8px; - z-index: $MODAL_CONTAINER_ZINDEX; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} diff --git a/src/components/modals/ModalBackground.tsx b/src/components/modals/ModalBackground.tsx deleted file mode 100644 index c200258da..000000000 --- a/src/components/modals/ModalBackground.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { ModalProps } from "@/types"; -import styles from "./ModalBackground.module.scss"; - -function ModalBackground({ onClick }: ModalProps) { - return
; -} - -function ModalContainer({ children }: ModalProps) { - return
{children}
; -} - -export { ModalBackground, ModalContainer }; diff --git a/src/components/modals/ModalCreator.tsx b/src/components/modals/ModalCreator.tsx deleted file mode 100644 index 88412aac7..000000000 --- a/src/components/modals/ModalCreator.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import ReactDom from "react-dom"; -import { ModalProps } from "@/types"; -import { ModalBackground, ModalContainer } from "./ModalBackground"; - -const ModalCreator = ({ children, onClick }: ModalProps) => { - const modalDiv = document.getElementById("modal-root") as HTMLDivElement; - if (!modalDiv) return; - return ReactDom.createPortal( - <> - {children} - - , - modalDiv, - ); -}; - -export default ModalCreator; diff --git a/src/components/modals/RenameFolderModal/RenameFolderModal.module.scss b/src/components/modals/RenameFolderModal/RenameFolderModal.module.scss deleted file mode 100644 index 5145f0b46..000000000 --- a/src/components/modals/RenameFolderModal/RenameFolderModal.module.scss +++ /dev/null @@ -1,40 +0,0 @@ -.modal-content { - display: flex; - flex-direction: column; - gap: 2.4rem; - padding: 3.2rem 4rem; - justify-content: center; - align-items: center; -} - -.modal-title { - color: #373740; - font-size: 2rem; - font-weight: 700; -} - -.modal-input { - color: #9fa6b2; - width: 28rem; - padding: 1.6rem; - text-align: center; - font-size: 1.4rem; - font-weight: 400; - line-height: 22px; /* 157.143% */ - - border-radius: 8px; - border: 1px solid var(--linkbrary-primary-color, #6d6afe); -} - -.modal-button { - width: 28rem; - color: white; - font-size: 1.6rem; - padding: 1.6rem 2rem; - border-radius: 8px; - font-weight: 600; - background: var( - --gra-purpleblue-to-skyblue, - linear-gradient(91deg, #6d6afe 0.12%, #6ae3fe 101.84%) - ); -} diff --git a/src/components/modals/RenameFolderModal/RenameFolderModal.tsx b/src/components/modals/RenameFolderModal/RenameFolderModal.tsx deleted file mode 100644 index 5b55b3e5c..000000000 --- a/src/components/modals/RenameFolderModal/RenameFolderModal.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { FolderInterface } from "@/types"; -import styles from "./RenameFolderModal.module.scss"; - -function RenameFolderModal({ folder }: { folder: FolderInterface }) { - return ( -
-

폴더 이름 변경

- - -
- ); -} - -export default RenameFolderModal; diff --git a/src/components/modals/ShareFolderModal/ShareFolderModal.module.scss b/src/components/modals/ShareFolderModal/ShareFolderModal.module.scss deleted file mode 100644 index 327612045..000000000 --- a/src/components/modals/ShareFolderModal/ShareFolderModal.module.scss +++ /dev/null @@ -1,62 +0,0 @@ -.modal-content { - display: flex; - flex-direction: column; - gap: 2.4rem; - padding: 3.2rem 4rem; - justify-content: center; - align-items: center; -} - -.modal-title { - color: #373740; - font-size: 2rem; - font-weight: 700; -} - -.modal-input { - color: #9fa6b2; - width: 28rem; - padding: 1.6rem; - text-align: center; - font-size: 1.4rem; - font-weight: 400; - line-height: 22px; /* 157.143% */ - - border-radius: 8px; - border: 1px solid var(--linkbrary-primary-color, #6d6afe); -} - -.modal-button { - width: 28rem; - color: white; - font-size: 1.6rem; - padding: 1.6rem 2rem; - border-radius: 8px; - font-weight: 600; - background: var( - --gra-purpleblue-to-skyblue, - linear-gradient(91deg, #6d6afe 0.12%, #6ae3fe 101.84%) - ); -} -.modal-desc { - color: #9fa6b2; - text-align: center; - font-size: 1.4rem; - font-weight: 400; - line-height: 22px; /* 157.143% */ -} - -.sns-group { - display: flex; - justify-content: center; - align-items: center; - gap: 2rem; -} - -.sns-button { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - gap: 1rem; -} diff --git a/src/components/modals/ShareFolderModal/ShareFolderModal.tsx b/src/components/modals/ShareFolderModal/ShareFolderModal.tsx deleted file mode 100644 index ca0d81695..000000000 --- a/src/components/modals/ShareFolderModal/ShareFolderModal.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import Image from "next/image"; -import { FolderInterface } from "@/types"; -import styles from "./ShareFolderModal.module.scss"; - -function ShareFolderModal({ folder }: { folder: FolderInterface }) { - const handleLinkCopyButton = () => { - // Todo - 링크 복사할 때 url 뭐 복사하는지 체크하기 - let url = "https://bootcamp-api.codeit.kr/shared"; - const query = new URLSearchParams(); - query.append("user", "1"); - query.append("folder", folder.id || ""); - url = `${url}?${query.toString()}`; - navigator.clipboard.writeText(url); - }; - - return ( -
-

폴더 공유

-

{folder.name}

-
- - - -
-
- ); -} - -export default ShareFolderModal; diff --git a/src/components/modals/index.tsx b/src/components/modals/index.tsx deleted file mode 100644 index 691fad482..000000000 --- a/src/components/modals/index.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import AddCardModal from "./AddCardModal/AddCardModal"; -import AddFolderModal from "./AddFolderModal/AddFolderModal"; -import DeleteCardModal from "./DeleteCardModal/DeleteCardModal"; -import DeleteFolderModal from "./DeleteFolderModal/DeleteFolderModal"; -import RenameFolderModal from "./RenameFolderModal/RenameFolderModal"; -import ShareFolderModal from "./ShareFolderModal/ShareFolderModal"; - -export { - AddCardModal, - AddFolderModal, - DeleteCardModal, - DeleteFolderModal, - RenameFolderModal, - ShareFolderModal, -}; diff --git a/src/components/shared/ShareHeader/ShareHeader.module.scss b/src/components/shared/ShareHeader/ShareHeader.module.scss deleted file mode 100644 index 01570c670..000000000 --- a/src/components/shared/ShareHeader/ShareHeader.module.scss +++ /dev/null @@ -1,44 +0,0 @@ -.header { - width: 100%; - background-color: var(--color-gray1); - padding: 2rem 3.2rem; - display: flex; - flex-wrap: nowrap; - justify-content: center; - align-items: center; -} - -.user-section { - display: flex; - flex-direction: column; - justify-content: space-between; - gap: 1rem; - align-content: center; - text-align: center; -} - -.user-section div { - text-align: center; -} - -.folder-profile-img { - width: 6rem; - height: 6rem; - border-radius: 50%; -} - -.folder-user-name { - font-size: 1.6rem; - font-style: normal; - font-weight: 400; - line-height: 1.5rem; /* 150% */ -} - -.folder-name { - text-align: center; - font-feature-settings: "clig" off, "liga" off; - font-size: 4rem; - font-style: normal; - font-weight: 600; - line-height: normal; -} diff --git a/src/components/shared/ShareHeader/ShareHeader.tsx b/src/components/shared/ShareHeader/ShareHeader.tsx deleted file mode 100644 index ccc9fa481..000000000 --- a/src/components/shared/ShareHeader/ShareHeader.tsx +++ /dev/null @@ -1,38 +0,0 @@ -/*ShareHeader 컴포넌트: - shared 페이지에서 누가 어떤 폴더를 공유해주었는지 보여주는 header 컴포넌트. - - sharedUser: 공유를 해준 사람의 정보 - sharedFolder: 공유받은 폴더 -*/ - -import { SharedFolderInterface, SharedUserInterface } from "@/types"; -import styles from "./ShareHeader.module.scss"; - -function ShareHeader({ - sharedUser, - sharedFolder, -}: { - sharedFolder?: SharedFolderInterface; - sharedUser?: SharedUserInterface; -}) { - if (!sharedUser || !sharedFolder) { - return
공유 받은 폴더가 없습니다!
; - } - return ( -
-
-
- profile -
-
{sharedUser.name}
-
{sharedFolder?.folder.name}
-
-
- ); -} - -export default ShareHeader; diff --git a/src/components/shared/index.tsx b/src/components/shared/index.tsx deleted file mode 100644 index 971b25dc0..000000000 --- a/src/components/shared/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import ShareHeader from "./ShareHeader/ShareHeader"; - -export { ShareHeader }; diff --git a/src/components/sign/Input/Input.module.scss b/src/components/sign/Input/Input.module.scss deleted file mode 100644 index 73fe551c9..000000000 --- a/src/components/sign/Input/Input.module.scss +++ /dev/null @@ -1,53 +0,0 @@ -@import "@/styles/global.scss"; - -.container { - width: 100%; - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: flex-start; - position: relative; - margin-bottom: 30px; - & label { - width: 100%; - font-size: 14px; - font-style: normal; - font-weight: 400; - line-height: normal; - display: block; - } -} - -.input { - display: block; - margin-top: 5px; - padding: 18px 15px; - width: 100%; - background-color: white; - - border-radius: 8px; - border: 1px solid var(--linkbrary-gray-20, #ccd5e3); -} -.input:focus { - outline: 1px solid var(--linkbrary-primary-color, #6d6afe); -} - -.error-msg { - padding-top: 1rem; - color: var(--linkbrary-red, #ff5b56); - font-size: 14px; - font-style: normal; - font-weight: 400; - line-height: normal; - height: 0; -} -.input[data-status="isError"] { - outline: 1px solid #ff5b56; -} - -.icon { - position: absolute; - right: 5px; - top: 63%; - transform: translate(-50%, -50%); -} diff --git a/src/components/sign/Input/Input.tsx b/src/components/sign/Input/Input.tsx deleted file mode 100644 index a3e5d1b29..000000000 --- a/src/components/sign/Input/Input.tsx +++ /dev/null @@ -1,79 +0,0 @@ -/*Input 컴포넌트 - signin, signup 페이지에서 쓰이는 input 컴포넌트. - - id: input 태그의 id - label: input 태그와 연결될 label - type: text와 password 둘 중 하나를 받는 값. - placeholder: input 태그의 placeholder에 들어갈 값 - onChange: input 태그에 키보드 이벤트 발생 시 실행될 함수 - value: input 태그의 value 값 - hasError: 이 값이 true라면 input 태그의 스타일을 error style로 정한다 - errorMsg: hasError일 경우 input 태그 아래에 errorMsg를 띄운다 -*/ - -import React, { useState, ChangeEvent } from "react"; -import styles from "./Input.module.scss"; - -type inputType = "text" | "password"; -type eyeIconUrl = "/icons/eye-close.svg" | "/icons/eye-open.svg"; - -export default function Input({ - id = "", - label = "", - type = "text", - placeholder = "", - onChange, - value, - hasError = false, - errorMsg = "", -}: { - id: string; - label: string; - type: inputType; - placeholder?: string; - onChange?: (e: ChangeEvent) => void; - value: string; - hasError: boolean; - errorMsg?: string; -}) { - const defaultType = type; - const [inputType, setInputType] = useState(type); - const [iconUrl, setIconUrl] = useState("/icons/eye-close.svg"); - - const handleChangeInputType = () => { - if (inputType === "password") { - setInputType("text"); - setIconUrl("/icons/eye-open.svg"); - } else { - setInputType("password"); - setIconUrl("/icons/eye-close.svg"); - } - }; - - return ( -
- - {hasError &&
{errorMsg}
} - {defaultType === "password" && ( - 비밀번호 보기 아이콘 - )} -
- ); -} diff --git a/src/components/sign/SignLayout/SignLayout.tsx b/src/components/sign/SignLayout/SignLayout.tsx index eb60123bf..67567d0b9 100644 --- a/src/components/sign/SignLayout/SignLayout.tsx +++ b/src/components/sign/SignLayout/SignLayout.tsx @@ -6,8 +6,8 @@ import Link from "next/link"; import { PropsWithChildren } from "react"; +import SnsSign from "@/components/sign/SnsSign/SnsSign"; import styles from "./SignLayout.module.scss"; -import { SnsSign } from ".."; type PageType = "signin" | "signup"; diff --git a/src/components/sign/index.tsx b/src/components/sign/index.tsx deleted file mode 100644 index ab19f8334..000000000 --- a/src/components/sign/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import Input from "./Input/Input"; -import SnsSign from "./SnsSign/SnsSign"; -import SignLayout from "./SignLayout/SignLayout"; - -export { Input, SnsSign, SignLayout }; diff --git a/src/contexts/AuthProvider.tsx b/src/contexts/AuthProvider.tsx deleted file mode 100644 index c753926b1..000000000 --- a/src/contexts/AuthProvider.tsx +++ /dev/null @@ -1,120 +0,0 @@ -/* - NOTE - 지금 user에 저장하는 값은 아래 형태와 같은 데이터다!! - { - "id": 25, - "created_at": "2023-08-31T02:18:03.139213+00:00", - "name": "온우림", - "image_source": "https://avatars.githubusercontent.com/u/75120340", - "email": "test@codeit.com", - "auth_id": "955801a8-85c5-4672-b729-612e646a640a" - } -*/ -import { - createContext, - useState, - useContext, - useEffect, - ReactNode, -} from "react"; -import { axiosInstance } from "@/api/axiosInstance"; -import { getSignIn } from "@/api"; -import { useRouter } from "next/router"; -import { UserInterface } from "@/types"; - -interface INT { - user: any; - isPending: boolean; - login: any; - logout: any; -} - -const initial: INT = { - user: null, - isPending: true, - login: () => {}, - logout: () => {}, -}; -export const AuthContext = createContext(initial); - -export function AuthProvider({ children }: { children: ReactNode }) { - const [values, setValues] = useState<{ - user: UserInterface | null; - isPending: boolean; - }>({ - user: null, - isPending: true, - }); - - // 유저 데이터를 가져오는 함수. - async function getMe() { - setValues((prev) => ({ ...prev, isPending: true })); - let nextUser: UserInterface; - try { - const res = await axiosInstance.get("/users"); - nextUser = res.data; - setValues((prev) => ({ - ...prev, - user: nextUser, - isPending: false, - })); - } catch { - return; - } - } - - // 로그인 함수. 로그인하면 해당 유저 정보를 post 리퀘를 보낸다. - // data 안에 accessToken과 refreshToken 이 있다. - // 전역 변수 context.user의 값을 getMe로 업데이트해야 한다. - async function login(email = "", password = "") { - const { data } = await getSignIn(email, password); - localStorage.setItem("accessToken", data.accessToken); - localStorage.setItem("refreshToken", data.refreshToken); - await getMe(); - } - - // TODO - 로그아웃 함수. 로그아웃하면 해당 유저 정보를 delete 리퀘를 보낸다. 어라 로그아웃 api 보내는 곳이 없네... - async function logout() { - setValues((prev) => ({ - ...prev, - user: null, - isPending: false, - })); - localStorage.removeItem("accessToken"); - localStorage.removeItem("refreshToken"); - } - - // TODO - 나중에 setting 페이지도 만들 수 있음 만들어보자. - // async function updateMe(){} - - return ( - - {children} - - ); -} - -// 유저 인증이 필요한 페이지에선 required true 값을 주고, -// required가 true인데 context.user 값이 없고 로딩 중이 아니라면 로그인 페이지로 이동시킨다. -export function useAuth(required = false) { - const context = useContext(AuthContext); - const router = useRouter(); - if (!context) { - throw new Error("반드시 AuthProvider 안에서 사용해야 합니다."); - } - - useEffect(() => { - if ( - router.route !== "/signup" && - !context.user && - required && - !context.isPending - ) { - router.push("/signin"); - return; - } - }, [context.user, context.isPending, required]); - - return context; -} diff --git a/src/hooks/index.tsx b/src/hooks/index.tsx deleted file mode 100644 index 18e4dd9a6..000000000 --- a/src/hooks/index.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import useOpenModal from "./useOpenModal"; -import useInputValid from "./useInputValid"; - -export { useOpenModal, useInputValid }; diff --git a/src/hooks/useInputValid.tsx b/src/hooks/useInputValid.tsx deleted file mode 100644 index b19aabc21..000000000 --- a/src/hooks/useInputValid.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import { ChangeEvent, useState } from "react"; -import { emailChecker, pswChecker } from "@/utils/checkReg"; - -const INITIAL_ERROR_STATUS = { hasError: false, errorMsg: "" }; - -const INITIAL_INPUT = { - email: "", - password: "", - passwordRepeat: "", -}; - -const INITIAL_ERROR = { - email: INITIAL_ERROR_STATUS, - password: INITIAL_ERROR_STATUS, - passwordRepeat: INITIAL_ERROR_STATUS, -}; - -function useInputValid(inputs = "signin") { - const [inputValue, setValue] = useState(INITIAL_INPUT); - const [hasError, setHasError] = useState(INITIAL_ERROR); - - const onChange = (e: ChangeEvent) => { - const { id, value } = e.target; - setValue((prev) => { - return { ...prev, [id]: value }; - }); - - if (id === "email") { - if (!value) { - setHasError((prev) => { - return { - ...prev, - [id]: { hasError: true, errorMsg: "이메일을 입력해주세요!" }, - }; - }); - } else if (!emailChecker(value)) { - setHasError((prev) => { - return { - ...prev, - [id]: { hasError: true, errorMsg: "올바른 이메일이 아닙니다!" }, - }; - }); - } else { - setHasError(() => { - return { ...INITIAL_ERROR }; - }); - } - } else if (id === "password" && inputs === "signup") { - if (!value) { - setHasError((prev) => { - return { - ...prev, - [id]: { hasError: true, errorMsg: "비밀번호를 입력해주세요!" }, - }; - }); - } else if (!pswChecker(value)) { - setHasError((prev) => { - return { - ...prev, - [id]: { - hasError: true, - errorMsg: "비밀번호는 8자 이상, 숫자와 영어가 포함되게 해주세요!", - }, - }; - }); - } else { - setHasError(() => { - return { ...INITIAL_ERROR }; - }); - } - } else if (id === "password" && inputs === "signin") { - if (!value) { - setHasError((prev) => { - return { - ...prev, - [id]: { hasError: true, errorMsg: "비밀번호를 입력해주세요!" }, - }; - }); - } else { - setHasError(() => { - return { ...INITIAL_ERROR }; - }); - } - } else if (id === "passwordRepeat") { - if (!value) { - setHasError((prev) => { - return { - ...prev, - [id]: { hasError: true, errorMsg: "비밀번호를 확인해주세요!" }, - }; - }); - } else if (inputValue?.password !== inputValue?.passwordRepeat) { - setHasError((prev) => { - return { - ...prev, - [id]: { hasError: true, errorMsg: "비밀번호가 틀립니다!!" }, - }; - }); - } else { - setHasError(() => { - return { ...INITIAL_ERROR }; - }); - } - } - }; - - return { inputValue, onChange, hasError }; -} - -export default useInputValid; diff --git a/src/hooks/useOpenModal.tsx b/src/hooks/useOpenModal.tsx deleted file mode 100644 index 621e2f6b4..000000000 --- a/src/hooks/useOpenModal.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { useState } from "react"; -import { ModalInterface } from "@/types"; - -const INITIAL_MODAL: ModalInterface = { - show: false, -}; - -function useOpenModal() { - const [modal, setModal] = useState(INITIAL_MODAL); - - const handleOpenModal = (modal: ModalInterface) => { - setModal((prev) => { - return { ...prev, ...modal }; - }); - }; - - const handleCloseModal = () => { - setModal((prev) => { - return { ...prev, ...INITIAL_MODAL }; - }); - }; - - return { modal, handleOpenModal, handleCloseModal }; -} - -export default useOpenModal; diff --git a/src/hooks/useRequest.tsx b/src/hooks/useRequest.tsx deleted file mode 100644 index 11c731b27..000000000 --- a/src/hooks/useRequest.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { useState, useCallback, useEffect } from "react"; -import { AxiosResponse } from "axios"; - -export default function useAsync(asyncFunction: () => Promise) { - const [loading, setLoading] = useState(false); - const [error, setError] = useState(null); - const [data, setData] = useState({}); - - const execute = useCallback(async () => { - setLoading(true); - setError(null); - setData(() => { - return {}; - }); - try { - const response = await asyncFunction(); - setData(response?.data ?? null); - return response; - } catch (error) { - setError(error); - } finally { - setLoading(false); - } - }, []); - - useEffect(() => { - execute(); - }, [execute]); - - return { execute, loading, error, data }; -} diff --git a/src/pages/404/ErrorPage.module.scss b/src/pages/404/ErrorPage.module.scss deleted file mode 100644 index 579d71b79..000000000 --- a/src/pages/404/ErrorPage.module.scss +++ /dev/null @@ -1,73 +0,0 @@ -@import "@/styles/global.scss"; - -.page { - position: absolute; - inset: 0; - display: flex; - justify-content: center; - align-items: center; -} - -.container { - width: 70rem; - display: flex; - justify-content: center; - align-items: center; - gap: 2rem; - flex-direction: column; - @include tablet { - flex-direction: row; - } -} - -.content { - width: 30rem; - height: 30rem; - display: flex; - flex-direction: column; - justify-content: center; - gap: 3rem; - & h1 { - background: linear-gradient( - 99deg, - #6d7ccd 19.76%, - rgba(82, 136, 133, 0.22) 52.69% - ); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - font-size: 80px; - font-style: normal; - font-weight: 700; - line-height: normal; - } - - & p { - color: #6b6b6b; - font-size: 16px; - font-style: normal; - font-weight: 500; - line-height: 150%; /* 24px */ - } -} - -.home-button { - display: flex; - width: 250px; - color: white; - padding: 16px 20px; - justify-content: center; - align-items: center; - gap: 10px; - border-radius: 8px; - background: var( - --gra-purpleblue-to-skyblue, - linear-gradient(91deg, #6d6afe 0.12%, #6ae3fe 101.84%) - ); -} - -.img-content { - position: relative; - width: 300px; - height: 300px; -} diff --git a/src/pages/404/index.tsx b/src/pages/404/index.tsx deleted file mode 100644 index 46b9fb716..000000000 --- a/src/pages/404/index.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import Image from "next/image"; -import Link from "next/link"; -import styles from "./ErrorPage.module.scss"; -import ErrorImg from "public/images/error-img.png"; - -export default function ErrorPage() { - return ( -
-
-
-

Oops!!

-

- Nothing found in this keywords. -
- Check link path once again! -

- -
-
- error image -
-
-
- ); -} diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index e29fdb889..80f20e7b2 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,7 +1,7 @@ import type { AppProps } from "next/app"; import { useRouter } from "next/router"; -import { Nav, Footer } from "@/components/common"; -import { AuthProvider } from "@/contexts/AuthProvider"; +import Nav from "@/components/Nav/Nav"; +import Footer from "@/components/Footer/Footer"; import "@/styles/reset.css"; import "@/styles/global.scss"; @@ -11,11 +11,9 @@ export default function App({ Component, pageProps }: AppProps) { return ( <> - - {hasNav.includes(route) &&