From 82b19dd1079adf2410280455441fdb76dc12f72d Mon Sep 17 00:00:00 2001 From: hakyoung12 Date: Fri, 17 May 2024 19:48:43 +0900 Subject: [PATCH 01/18] =?UTF-8?q?chore:=20=EB=B3=80=EC=88=98=EB=AA=85=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 4 ++++ components/AddLinkInput.tsx | 2 +- pages/Shared.tsx | 4 ++-- pages/_document.tsx | 6 +++--- pages/folder.tsx | 4 ++-- tsconfig.json | 11 +---------- 6 files changed, 13 insertions(+), 18 deletions(-) diff --git a/.gitignore b/.gitignore index ba0f05b66..58c930b52 100644 --- a/.gitignore +++ b/.gitignore @@ -56,3 +56,7 @@ next-env.d.ts npm-debug.log* yarn-debug.log* yarn-error.log* + +# dist + +dist/ \ No newline at end of file diff --git a/components/AddLinkInput.tsx b/components/AddLinkInput.tsx index 78d437197..c90ee9cb8 100644 --- a/components/AddLinkInput.tsx +++ b/components/AddLinkInput.tsx @@ -3,7 +3,7 @@ import styles from "./AddLinkInput.module.css"; import InputBtn from "./InputBtn"; import Image from "next/image"; -const AddLinkInput: React.FC = () => { +const AddLinkInput = () => { return (
diff --git a/pages/Shared.tsx b/pages/Shared.tsx index af49144dd..fa2582270 100644 --- a/pages/Shared.tsx +++ b/pages/Shared.tsx @@ -20,7 +20,7 @@ interface Link { [key: string]: any; } -interface LinkProps { +interface SharedProps { links: Link[]; } @@ -34,7 +34,7 @@ export async function getStaticProps() { }; } -function Shared({ links }: LinkProps) { +function Shared({ links }: SharedProps) { const [searchTerm, setSearchTerm] = useState(""); const handleSearch = (term: string): void => { diff --git a/pages/_document.tsx b/pages/_document.tsx index 54e8bf3e2..057c8a57b 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -1,13 +1,13 @@ -import { Html, Head, Main, NextScript } from 'next/document' +import { Html, Head, Main, NextScript } from "next/document"; export default function Document() { return ( - +
- ) + ); } diff --git a/pages/folder.tsx b/pages/folder.tsx index 1eb455374..e3499cb5f 100644 --- a/pages/folder.tsx +++ b/pages/folder.tsx @@ -6,7 +6,7 @@ import useData from "@/hooks/useData"; import { getFolderListData } from "@/api/Api"; import AddLinkInput from "@/components/AddLinkInput"; -interface FolderProps { +interface Folder { created_at: string; favorite: boolean; id: number; @@ -18,7 +18,7 @@ interface FolderProps { } interface FolderProps { - folders: FolderProps[]; + folders: Folder[]; } export async function getStaticProps() { diff --git a/tsconfig.json b/tsconfig.json index bfe006106..670224f3e 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -17,15 +17,6 @@ "@/*": ["./*"] } }, - "include": [ - "next-env.d.ts", - "**/*.ts", - "**/*.tsx", - "components/Input.jsx", - "pages/folder.jsx", - "pages/folder.jsx", - "pages/folder.jsx", - "pages/folder.jsx" - ], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], "exclude": ["node_modules"] } From f7463b0986f0a80d0265220482c82955229f0652 Mon Sep 17 00:00:00 2001 From: hakyoung12 Date: Fri, 17 May 2024 20:21:46 +0900 Subject: [PATCH 02/18] =?UTF-8?q?refactor:=20=ED=8F=B4=EB=8D=94=EB=A9=94?= =?UTF-8?q?=EB=89=B4=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/FolderList.module.css | 34 ------------------- components/FolderList.tsx | 31 ++--------------- components/FolderMenu.module.css | 33 ++++++++++++++++++ components/FolderMenu.tsx | 58 ++++++++++++++++++++++++++++++++ pages/Shared.tsx | 3 +- 5 files changed, 94 insertions(+), 65 deletions(-) create mode 100644 components/FolderMenu.module.css create mode 100644 components/FolderMenu.tsx diff --git a/components/FolderList.module.css b/components/FolderList.module.css index 12990efdb..cdb28813f 100644 --- a/components/FolderList.module.css +++ b/components/FolderList.module.css @@ -7,40 +7,6 @@ margin-top: 40px; } -.folderLinkList__folders { - display: flex; - align-items: flex-start; - gap: 12px; -} - -.folderLinkList__folder { - cursor: pointer; - border-radius: 5px; - border: 1px solid var(--Linkbrary-primary-color, #6d6afe); - background: #fff; - padding: 8px 12px; - color: #000; - font-size: 16px; - font-family: Pretendard; - font-style: normal; - font-weight: 400; - line-height: normal; -} - -.folderLinkList__folder__active { - cursor: pointer; - border-radius: 5px; - border: 1px solid var(--Linkbrary-primary-color, #6d6afe); - background: var(--Linkbrary-primary-color, #6d6afe); - padding: 8px 12px; - color: #fff; - font-size: 16px; - font-family: Pretendard; - font-style: normal; - font-weight: 400; - line-height: normal; -} - .folderLinkList__folder:hover { background: var(--Linkbrary-gray10, #e7effb); } diff --git a/components/FolderList.tsx b/components/FolderList.tsx index 0c8305d22..0c2ab6d82 100644 --- a/components/FolderList.tsx +++ b/components/FolderList.tsx @@ -9,6 +9,7 @@ import EditAndAddFolder from "../modals/EditAndAddFolder"; import ShareFolder from "../modals/ShareFolder"; import { useState } from "react"; import CardListSection from "./CardListSection"; +import FolderMenu from "./FolderMenu"; import SearchInput from "./SearchInput"; import Image from "next/image"; @@ -50,35 +51,7 @@ const FolderList: React.FC = ({ folders }) => {
-
- - {folders.map((folder) => ( - - ))} -
+ + {folders.map((folder) => ( + + ))} +
+ ); +}; + +export default FolderMenu; diff --git a/pages/Shared.tsx b/pages/Shared.tsx index fa2582270..b064ae248 100644 --- a/pages/Shared.tsx +++ b/pages/Shared.tsx @@ -3,8 +3,7 @@ import Footer from "../components/Footer"; import Header from "../components/Header"; import CardList from "../components/CardList"; import { getSampleFolderData } from "../api/Api"; -import { useEffect, useState } from "react"; -import useData from "../hooks/useData"; +import { useState } from "react"; import PropTypes from "prop-types"; import SearchInput from "@/components/SearchInput"; From cfd76d8261f1d105e86aee6a75b35d022e14d960 Mon Sep 17 00:00:00 2001 From: hakyoung12 Date: Fri, 17 May 2024 22:17:11 +0900 Subject: [PATCH 03/18] =?UTF-8?q?refactor:=20=ED=8F=B4=EB=8D=94=EB=A6=AC?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/AddFolderButton.tsx | 47 ++++++++++++++ components/CardListSection.tsx | 3 +- components/FolderList.module.css | 54 +++++++--------- components/FolderList.tsx | 103 ++++++++++--------------------- components/FolderMenu.module.css | 7 +++ components/KebabMenu.tsx | 8 ++- hooks/useIsMobile.tsx | 21 +++++++ modals/AddLinkToFolder.tsx | 4 +- modals/DeleteFolder.tsx | 4 +- modals/EditAndAddFolder.tsx | 4 +- modals/ShareFolder.tsx | 4 +- 11 files changed, 149 insertions(+), 110 deletions(-) create mode 100644 components/AddFolderButton.tsx create mode 100644 hooks/useIsMobile.tsx diff --git a/components/AddFolderButton.tsx b/components/AddFolderButton.tsx new file mode 100644 index 000000000..471013a59 --- /dev/null +++ b/components/AddFolderButton.tsx @@ -0,0 +1,47 @@ +import styles from "./FolderList.module.css"; +import addBtn from "@/public/add.svg"; +import addBtnMobile from "@/public/add 2.svg"; +import Image from "next/image"; + +interface addFolderButtonProps { + isMobile: boolean; + setModalOpen: React.Dispatch>; +} + +const AddFolderButton: React.FC = ({ + isMobile, + setModalOpen, +}) => { + if (isMobile) { + return ( + + ); + } else { + return ( + + ); + } +}; +export default AddFolderButton; diff --git a/components/CardListSection.tsx b/components/CardListSection.tsx index 9eb608c94..b0616e831 100644 --- a/components/CardListSection.tsx +++ b/components/CardListSection.tsx @@ -40,8 +40,9 @@ const CardListSection: React.FC = ({ folders, searchTerm, }) => { - const result = useSelectFolder({ url }); + const result = useSelectFolder({ url }); // url을 받아 카드 배열 리턴 const links = result?.data; + return ( <> {links ? ( diff --git a/components/FolderList.module.css b/components/FolderList.module.css index cdb28813f..e6820074a 100644 --- a/components/FolderList.module.css +++ b/components/FolderList.module.css @@ -1,10 +1,9 @@ .folderLinkList { display: flex; - grid-template-rows: 1fr 1fr; - grid-template-columns: 8fr 2fr; align-items: center; justify-content: space-between; margin-top: 40px; + gap: 40px; } .folderLinkList__folder:hover { @@ -29,9 +28,30 @@ letter-spacing: -0.3px; flex-shrink: 0; } - .folderLinkList__addFolderButton__mobile { - display: none; + cursor: pointer; + position: fixed; + left: 50%; + bottom: 110px; + transform: translate(-50%, -50%); + display: flex; + width: 135px; + height: 36px; + padding: 8px 24px; + align-items: flex-start; + gap: 4px; + color: var(--Linkbrary-gray10, #e7effb); + text-align: center; + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: normal; + letter-spacing: -0.3px; + border-radius: 20px; + border: 1px solid var(--Linkbrary-white, #fff); + background: var(--Linkbrary-primary-color, #6d6afe); + z-index: 9999; } .folderLinkList__addFolderIcon { @@ -103,32 +123,6 @@ display: none; } - .folderLinkList__addFolderButton__mobile { - cursor: pointer; - position: fixed; - left: 50%; - bottom: 110px; - transform: translate(-50%, -50%); - display: flex; - width: 135px; - height: 36px; - padding: 8px 24px; - align-items: flex-start; - gap: 4px; - color: var(--Linkbrary-gray10, #e7effb); - text-align: center; - font-family: Pretendard; - font-size: 16px; - font-style: normal; - font-weight: 500; - line-height: normal; - letter-spacing: -0.3px; - border-radius: 20px; - border: 1px solid var(--Linkbrary-white, #fff); - background: var(--Linkbrary-primary-color, #6d6afe); - z-index: 9999; - } - .folderLinkList__folderMenu { flex-direction: column; } diff --git a/components/FolderList.tsx b/components/FolderList.tsx index 0c2ab6d82..aabc88c1b 100644 --- a/components/FolderList.tsx +++ b/components/FolderList.tsx @@ -1,6 +1,4 @@ import styles from "./FolderList.module.css"; -import addBtn from "@/public/add.svg"; -import addBtnMobile from "@/public/add 2.svg"; import shareBtn from "@/public/share.svg"; import renameBtn from "@/public/pen.svg"; import deleteBtn from "@/public/Group 36.svg"; @@ -10,6 +8,8 @@ import ShareFolder from "../modals/ShareFolder"; import { useState } from "react"; import CardListSection from "./CardListSection"; import FolderMenu from "./FolderMenu"; +import AddFolderButton from "./AddFolderButton"; +import useIsMobile from "@/hooks/useIsMobile"; import SearchInput from "./SearchInput"; import Image from "next/image"; @@ -32,12 +32,17 @@ const FolderList: React.FC = ({ folders }) => { const [title, setTitle] = useState("전체"); const [id, setId] = useState(null); const [searchTerm, setSearchTerm] = useState(""); + const isMobile = useIsMobile(); function handleTitle(folderName: string, folderId: number | null) { setTitle(folderName); setId(folderId); } + function handleClose() { + setModalOpen(""); + } + const url = id === null ? "https://bootcamp-api.codeit.kr/api/users/1/links" @@ -52,65 +57,19 @@ const FolderList: React.FC = ({ folders }) => {
- - - {modalOpen === "addFolder" && ( - - )} +
- {title === "전체" ? ( - <> -
-
- {title} -
+ <> +
+
+ {title}
- - - ) : ( - <> -
-
- {title} -
+ {title !== "전체" && (
-
- - - )} + )} +
+ +
- + {modalOpen === "addFolder" && ( + + )} {modalOpen === "shareLink" && id && ( - + )} {modalOpen === "alterName" && ( )} @@ -174,7 +139,7 @@ const FolderList: React.FC = ({ folders }) => { )}
diff --git a/components/FolderMenu.module.css b/components/FolderMenu.module.css index f70fb7d94..99167042b 100644 --- a/components/FolderMenu.module.css +++ b/components/FolderMenu.module.css @@ -1,9 +1,14 @@ .folderLinkList__folders { display: flex; + overflow: auto; align-items: flex-start; gap: 12px; } +.folderLinkList__folders::-webkit-scrollbar { + display: none; +} + .folderLinkList__folder { cursor: pointer; border-radius: 5px; @@ -16,6 +21,7 @@ font-style: normal; font-weight: 400; line-height: normal; + white-space: nowrap; } .folderLinkList__folder__active { @@ -30,4 +36,5 @@ font-style: normal; font-weight: 400; line-height: normal; + white-space: nowrap; } diff --git a/components/KebabMenu.tsx b/components/KebabMenu.tsx index 0d58eca36..f9d2fe38c 100644 --- a/components/KebabMenu.tsx +++ b/components/KebabMenu.tsx @@ -49,6 +49,10 @@ const KebabMenu: React.FC = ({ url, folders }) => { setViewDropdown(!viewDropdown); }; + function handleClose() { + setModalOpen(""); + } + return (
); diff --git a/hooks/useIsMobile.tsx b/hooks/useIsMobile.tsx new file mode 100644 index 000000000..923536ef1 --- /dev/null +++ b/hooks/useIsMobile.tsx @@ -0,0 +1,21 @@ +import { useState, useEffect } from "react"; + +function useIsMobile(): boolean { + const [isMobile, setIsMobile] = useState(false); + + useEffect(() => { + const handleResize = () => { + setIsMobile(window.innerWidth <= 768); + }; + + window.addEventListener("resize", handleResize); + + return () => { + window.removeEventListener("resize", handleResize); + }; + }, [isMobile]); + + return isMobile; +} + +export default useIsMobile; diff --git a/modals/AddLinkToFolder.tsx b/modals/AddLinkToFolder.tsx index fc3b6c971..830abe6bd 100644 --- a/modals/AddLinkToFolder.tsx +++ b/modals/AddLinkToFolder.tsx @@ -18,7 +18,7 @@ interface Folder { interface AddLinkToFolderProps { title: string; folders: Folder[]; - onClose: (close: string) => void; + onClose: () => void; } const AddLinkToFolder: React.FC = ({ @@ -30,7 +30,7 @@ const AddLinkToFolder: React.FC = ({ const onClosing = (e: MouseEvent): void => { e.preventDefault(); - onClose(""); + onClose(); }; return (
diff --git a/modals/DeleteFolder.tsx b/modals/DeleteFolder.tsx index 85a64c8c3..fb7924b5e 100644 --- a/modals/DeleteFolder.tsx +++ b/modals/DeleteFolder.tsx @@ -5,7 +5,7 @@ import { MouseEvent } from "react"; interface DeleteFolderProps { madalTitle: string; title: string; - onClose: (close: string) => void; + onClose: () => void; } const DeleteFolder: React.FC = ({ @@ -15,7 +15,7 @@ const DeleteFolder: React.FC = ({ }) => { const onClosing = (e: MouseEvent) => { e.preventDefault(); - onClose(""); + onClose(); }; return ( diff --git a/modals/EditAndAddFolder.tsx b/modals/EditAndAddFolder.tsx index 6531e87e7..21f0a62b6 100644 --- a/modals/EditAndAddFolder.tsx +++ b/modals/EditAndAddFolder.tsx @@ -5,7 +5,7 @@ import { MouseEvent } from "react"; interface EditAndAddFolderProps { madalTitle: string; alter: string; - onClose: (close: string) => void; + onClose: () => void; } const EditAndAddFolder: React.FC = ({ @@ -15,7 +15,7 @@ const EditAndAddFolder: React.FC = ({ }) => { const onClosing = (e: MouseEvent) => { e.preventDefault(); - onClose(""); + onClose(); }; return ( diff --git a/modals/ShareFolder.tsx b/modals/ShareFolder.tsx index a7f3ed918..434e63fa4 100644 --- a/modals/ShareFolder.tsx +++ b/modals/ShareFolder.tsx @@ -4,7 +4,7 @@ import { MouseEvent } from "react"; interface EditAndAddFolderProps { title: string; id: number; - onClose: (close: string) => void; + onClose: () => void; } const ShareFolder: React.FC = ({ @@ -14,7 +14,7 @@ const ShareFolder: React.FC = ({ }) => { const onClosing = (e: MouseEvent) => { e.preventDefault(); - onClose(""); + onClose(); }; const sendUrl = `https://linkbrary-hakyoung.netlify.app/shared/${id}`; From e38ebf232ab779152cd339223bbbd09747ada11d Mon Sep 17 00:00:00 2001 From: hakyoung12 Date: Fri, 17 May 2024 22:29:07 +0900 Subject: [PATCH 04/18] =?UTF-8?q?chore:=20=ED=8C=8C=EC=9D=BC=20=EB=8C=80?= =?UTF-8?q?=EC=86=8C=EB=AC=B8=EC=9E=90=EB=B3=80=EA=B2=BD1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- next.config.js | 1 - package-lock.json | 18 +++++++++++++++++- package.json | 3 ++- pages/{Shared.tsx => test.tsx} | 0 4 files changed, 19 insertions(+), 3 deletions(-) rename pages/{Shared.tsx => test.tsx} (100%) diff --git a/next.config.js b/next.config.js index 58c9ebb2a..463789e2f 100644 --- a/next.config.js +++ b/next.config.js @@ -12,7 +12,6 @@ const nextConfig = { async headers() { return [ { - // matching all API routes source: "/api/:path*", headers: [ { key: "Access-Control-Allow-Credentials", value: "true" }, diff --git a/package-lock.json b/package-lock.json index db0d6c2d9..374fe0778 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,8 @@ "next": "^13.5.6", "prop-types": "^15.8.1", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "react-hook-form": "^7.51.4" }, "devDependencies": { "@types/node": "^20", @@ -5740,6 +5741,21 @@ "react": "^18.3.1" } }, + "node_modules/react-hook-form": { + "version": "7.51.4", + "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.4.tgz", + "integrity": "sha512-V14i8SEkh+V1gs6YtD0hdHYnoL4tp/HX/A45wWQN15CYr9bFRmmRdYStSO5L65lCCZRF+kYiSKhm9alqbcdiVA==", + "engines": { + "node": ">=12.22.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-hook-form" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17 || ^18" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index 23ba07ea8..aac6ea07e 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,8 @@ "next": "^13.5.6", "prop-types": "^15.8.1", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "react-hook-form": "^7.51.4" }, "devDependencies": { "@types/node": "^20", diff --git a/pages/Shared.tsx b/pages/test.tsx similarity index 100% rename from pages/Shared.tsx rename to pages/test.tsx From 694c7c282d084d39365a90fa1cc2894344a3f942 Mon Sep 17 00:00:00 2001 From: hakyoung12 Date: Fri, 17 May 2024 22:29:40 +0900 Subject: [PATCH 05/18] =?UTF-8?q?chore:=20=ED=8C=8C=EC=9D=BC=20=EB=8C=80?= =?UTF-8?q?=EC=86=8C=EB=AC=B8=EC=9E=90=EB=B3=80=EA=B2=BD2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/{test.tsx => shared.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename pages/{test.tsx => shared.tsx} (100%) diff --git a/pages/test.tsx b/pages/shared.tsx similarity index 100% rename from pages/test.tsx rename to pages/shared.tsx From 423f093383d721fa4429e9d612893deb2634a62c Mon Sep 17 00:00:00 2001 From: hakyoung12 Date: Sat, 18 May 2024 17:58:52 +0900 Subject: [PATCH 06/18] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=ED=8F=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/SigninForm.module.css | 69 ++++++++++++++++++++++++++++++++ components/SigninForm.tsx | 57 ++++++++++++++++++++++++++ components/SocialAuthForm.jsx | 0 pages/signin.jsx | 12 ++++++ pages/signin.module.css | 0 5 files changed, 138 insertions(+) create mode 100644 components/SigninForm.module.css create mode 100644 components/SigninForm.tsx create mode 100644 components/SocialAuthForm.jsx create mode 100644 pages/signin.jsx create mode 100644 pages/signin.module.css diff --git a/components/SigninForm.module.css b/components/SigninForm.module.css new file mode 100644 index 000000000..39c1e617e --- /dev/null +++ b/components/SigninForm.module.css @@ -0,0 +1,69 @@ +.authForm { + display: flex; + flex-direction: column; + align-items: center; + gap: 30px; +} + +.inputGroup { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 12px; +} + +.inputGroup label { + color: var(--black, #000); + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: normal; +} + +.inputGroup input { + display: flex; + width: 370px; + padding: 18px 15px; + justify-content: center; + align-items: center; + border-radius: 8px; + border: 1px solid var(--Linkbrary-gray20, #ccd5e3); + background: var(--Linkbrary-white, #fff); +} + +.inputGroup input:hover { + border-radius: 8px; + border: 1px solid var(--Linkbrary-primary-color, #6d6afe); + background: var(--Linkbrary-white, #fff); +} + +.errorMessage { + color: var(--Linkbrary-red, #ff5b56); + font-family: Pretendard; + font-size: 0.875rem; + font-style: normal; + font-weight: 400; + line-height: normal; +} + +.signinButton { + display: flex; + width: 400px; + 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%) + ); + border-style: none; + color: var(--Grey-Light, #f5f5f5); + font-family: Pretendard; + font-size: 18px; + font-style: normal; + font-weight: 600; + line-height: normal; +} diff --git a/components/SigninForm.tsx b/components/SigninForm.tsx new file mode 100644 index 000000000..46711f4e4 --- /dev/null +++ b/components/SigninForm.tsx @@ -0,0 +1,57 @@ +import styles from "./SigninForm.module.css"; +import { useForm, SubmitHandler } from "react-hook-form"; + +interface SigninFormValues { + email: string; + password: string; +} + +function SigninForm() { + const { + register, + handleSubmit, + formState: { errors }, + } = useForm(); + + const onSubmit: SubmitHandler = (data) => { + console.log(data); + }; + + return ( + +
+ + + {

{errors.email?.message}

} +
+
+ + +

{errors.password?.message}

+
+ + + ); +} + +export default SigninForm; diff --git a/components/SocialAuthForm.jsx b/components/SocialAuthForm.jsx new file mode 100644 index 000000000..e69de29bb diff --git a/pages/signin.jsx b/pages/signin.jsx new file mode 100644 index 000000000..0a6681b7b --- /dev/null +++ b/pages/signin.jsx @@ -0,0 +1,12 @@ +import styles from "./signin.module.css"; +import SigninForm from "../components/SigninForm"; + +function Signin() { + return ( + <> + + + ); +} + +export default Signin; diff --git a/pages/signin.module.css b/pages/signin.module.css new file mode 100644 index 000000000..e69de29bb From 227784fae459f359a4c3d99ec6be8beef7e29de7 Mon Sep 17 00:00:00 2001 From: hakyoung12 Date: Sat, 18 May 2024 18:23:12 +0900 Subject: [PATCH 07/18] =?UTF-8?q?feat:=20=EC=86=8C=EC=85=9C=20=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/SocialAuthForm.jsx | 35 ++++++++++++++++++++++++++++ components/SocialAuthForm.module.css | 22 +++++++++++++++++ pages/signin.jsx | 2 ++ public/Google.svg | 10 ++++++++ public/Kakao.svg | 12 ++++++++++ 5 files changed, 81 insertions(+) create mode 100644 components/SocialAuthForm.module.css create mode 100644 public/Google.svg create mode 100644 public/Kakao.svg diff --git a/components/SocialAuthForm.jsx b/components/SocialAuthForm.jsx index e69de29bb..1cfaa53be 100644 --- a/components/SocialAuthForm.jsx +++ b/components/SocialAuthForm.jsx @@ -0,0 +1,35 @@ +import GoogleIcon from "@/public/Google.svg"; +import KakaoIcon from "@/public/kakao.svg"; +import styles from "./SocialAuthForm.module.css"; +import Link from "next/link"; +import Image from "next/image"; + +function SocialAuthForm({ message }) { + return ( +
+ {message} +
+ +
+ 구글계정 연동하기 +
+ + +
+ 카카오톡계정 연결하기 +
+ +
+
+ ); +} + +export default SocialAuthForm; diff --git a/components/SocialAuthForm.module.css b/components/SocialAuthForm.module.css new file mode 100644 index 000000000..bb3bcfcbd --- /dev/null +++ b/components/SocialAuthForm.module.css @@ -0,0 +1,22 @@ +.socialAuthForm { + display: flex; + width: 352px; + padding: 12px 24px; + justify-content: space-between; + align-items: center; + border-radius: 8px; + border: 1px solid var(--Linkbrary-gray20, #ccd5e3); + background: var(--Linkbrary-gray10, #e7effb); +} + +.socialAuthIcons { + display: flex; + align-items: flex-start; + gap: 16px; +} + +.socialAuthIcon { + position: relative; + width: 42px; + height: 42px; +} diff --git a/pages/signin.jsx b/pages/signin.jsx index 0a6681b7b..d2029d034 100644 --- a/pages/signin.jsx +++ b/pages/signin.jsx @@ -1,10 +1,12 @@ import styles from "./signin.module.css"; import SigninForm from "../components/SigninForm"; +import SocialAuthForm from "../components/SocialAuthForm"; function Signin() { return ( <> + ); } diff --git a/public/Google.svg b/public/Google.svg new file mode 100644 index 000000000..bae0bd3d7 --- /dev/null +++ b/public/Google.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/Kakao.svg b/public/Kakao.svg new file mode 100644 index 000000000..445b82295 --- /dev/null +++ b/public/Kakao.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + From 883a0d1aa2388510cebbd4143f7ffafca6451c2d Mon Sep 17 00:00:00 2001 From: hakyoung12 Date: Sat, 18 May 2024 18:50:17 +0900 Subject: [PATCH 08/18] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8/?= =?UTF-8?q?=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20=ED=8F=BC=20=ED=97=A4?= =?UTF-8?q?=EB=8D=94=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/AuthFormHeader.module.css | 24 +++++++++++++++++ components/AuthFormHeader.tsx | 27 +++++++++++++++++++ components/SigninForm.module.css | 3 ++- ...{SocialAuthForm.jsx => SocialAuthForm.tsx} | 6 ++++- pages/{signin.jsx => signin.tsx} | 5 ++++ 5 files changed, 63 insertions(+), 2 deletions(-) create mode 100644 components/AuthFormHeader.module.css create mode 100644 components/AuthFormHeader.tsx rename components/{SocialAuthForm.jsx => SocialAuthForm.tsx} (89%) rename pages/{signin.jsx => signin.tsx} (62%) diff --git a/components/AuthFormHeader.module.css b/components/AuthFormHeader.module.css new file mode 100644 index 000000000..b8e4c60df --- /dev/null +++ b/components/AuthFormHeader.module.css @@ -0,0 +1,24 @@ +.AuthFormHeader { + display: flex; + flex-direction: column; + align-items: center; + gap: 16px; +} + +.logoWrap { + position: relative; + width: 210.583px; + height: 38px; +} + +.AuthFormMessage { + display: flex; + align-items: center; + gap: 8px; + color: var(--black, #000); + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; +} diff --git a/components/AuthFormHeader.tsx b/components/AuthFormHeader.tsx new file mode 100644 index 000000000..e87c59ed0 --- /dev/null +++ b/components/AuthFormHeader.tsx @@ -0,0 +1,27 @@ +import Logo from "@/public/logo.svg"; +import styles from "./AuthFormHeader.module.css"; +import Link from "next/link"; +import Image from "next/image"; + +interface AuthFormHeaderProps { + message: string; + linkMassege: string; +} + +function AuthFormHeader({ message, linkMassege }: AuthFormHeaderProps) { + return ( +
+ +
+ 링크브러리 로고 +
+ +
+ {message} + {linkMassege} +
+
+ ); +} + +export default AuthFormHeader; diff --git a/components/SigninForm.module.css b/components/SigninForm.module.css index 39c1e617e..b79471591 100644 --- a/components/SigninForm.module.css +++ b/components/SigninForm.module.css @@ -1,8 +1,9 @@ .authForm { display: flex; + margin: 30px 0 32px; flex-direction: column; align-items: center; - gap: 30px; + gap: 24px; } .inputGroup { diff --git a/components/SocialAuthForm.jsx b/components/SocialAuthForm.tsx similarity index 89% rename from components/SocialAuthForm.jsx rename to components/SocialAuthForm.tsx index 1cfaa53be..09e0adf07 100644 --- a/components/SocialAuthForm.jsx +++ b/components/SocialAuthForm.tsx @@ -4,7 +4,11 @@ import styles from "./SocialAuthForm.module.css"; import Link from "next/link"; import Image from "next/image"; -function SocialAuthForm({ message }) { +interface SocialAuthFormProps { + message: string; +} + +function SocialAuthForm({ message }: SocialAuthFormProps) { return (
{message} diff --git a/pages/signin.jsx b/pages/signin.tsx similarity index 62% rename from pages/signin.jsx rename to pages/signin.tsx index d2029d034..c88ee5d29 100644 --- a/pages/signin.jsx +++ b/pages/signin.tsx @@ -1,10 +1,15 @@ import styles from "./signin.module.css"; import SigninForm from "../components/SigninForm"; import SocialAuthForm from "../components/SocialAuthForm"; +import AuthFormHeader from "../components/AuthFormHeader"; function Signin() { return ( <> + From b99d85b5832f59f0d9e755f23e23c5c5d7919291 Mon Sep 17 00:00:00 2001 From: hakyoung12 Date: Sat, 18 May 2024 19:39:17 +0900 Subject: [PATCH 09/18] =?UTF-8?q?feat:=20=ED=9A=8C=EC=9B=90=EA=B0=80?= =?UTF-8?q?=EC=9E=85=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...ninForm.module.css => AuthForm.module.css} | 0 components/SigninForm.tsx | 2 +- components/SignupForm.tsx | 88 +++++++++++++++++++ pages/signup.tsx | 18 ++++ 4 files changed, 107 insertions(+), 1 deletion(-) rename components/{SigninForm.module.css => AuthForm.module.css} (100%) create mode 100644 components/SignupForm.tsx create mode 100644 pages/signup.tsx diff --git a/components/SigninForm.module.css b/components/AuthForm.module.css similarity index 100% rename from components/SigninForm.module.css rename to components/AuthForm.module.css diff --git a/components/SigninForm.tsx b/components/SigninForm.tsx index 46711f4e4..62e1219f3 100644 --- a/components/SigninForm.tsx +++ b/components/SigninForm.tsx @@ -1,4 +1,4 @@ -import styles from "./SigninForm.module.css"; +import styles from "./AuthForm.module.css"; import { useForm, SubmitHandler } from "react-hook-form"; interface SigninFormValues { diff --git a/components/SignupForm.tsx b/components/SignupForm.tsx new file mode 100644 index 000000000..af1f1041a --- /dev/null +++ b/components/SignupForm.tsx @@ -0,0 +1,88 @@ +import styles from "./AuthForm.module.css"; +import { useForm, SubmitHandler } from "react-hook-form"; +import { useRef } from "react"; + +interface SigninFormValues { + email: string; + password: string; + passwordConfirm: string; +} + +function SigninForm() { + const { + register, + handleSubmit, + formState: { errors }, + watch, + } = useForm(); + + const passwordRef = useRef(null); + passwordRef.current = watch("password"); + + const onSubmit: SubmitHandler = (data) => { + console.log(data); + }; + + return ( +
+
+ + + {

{errors.email?.message}

} +
+
+ + +

{errors.password?.message}

+
+
+ + + value === passwordRef.current || "비밀번호가 일치하지 않아요.", + })} + /> +

{errors.passwordConfirm?.message}

+
+ +
+ ); +} + +export default SigninForm; diff --git a/pages/signup.tsx b/pages/signup.tsx new file mode 100644 index 000000000..07fb8213d --- /dev/null +++ b/pages/signup.tsx @@ -0,0 +1,18 @@ +import AuthFormHeader from "@/components/AuthFormHeader"; +import SignupForm from "@/components/SignupForm"; +import SocialAuthForm from "@/components/SocialAuthForm"; + +function Signup() { + return ( + <> + + + + + ); +} + +export default Signup; From 53d5abaf2ea0f1958e89f49c00132a21dffbf5fe Mon Sep 17 00:00:00 2001 From: hakyoung12 Date: Sat, 18 May 2024 20:15:26 +0900 Subject: [PATCH 10/18] =?UTF-8?q?styles:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8/?= =?UTF-8?q?=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/AuthFormHeader.tsx | 5 +++-- pages/auth.module.css | 7 +++++++ pages/{index.jsx => index.tsx} | 0 pages/signin.module.css | 0 pages/signin.tsx | 7 ++++--- pages/signup.tsx | 6 ++++-- 6 files changed, 18 insertions(+), 7 deletions(-) create mode 100644 pages/auth.module.css rename pages/{index.jsx => index.tsx} (100%) delete mode 100644 pages/signin.module.css diff --git a/components/AuthFormHeader.tsx b/components/AuthFormHeader.tsx index e87c59ed0..3319b1fdb 100644 --- a/components/AuthFormHeader.tsx +++ b/components/AuthFormHeader.tsx @@ -5,10 +5,11 @@ import Image from "next/image"; interface AuthFormHeaderProps { message: string; + link: string; linkMassege: string; } -function AuthFormHeader({ message, linkMassege }: AuthFormHeaderProps) { +function AuthFormHeader({ message, link, linkMassege }: AuthFormHeaderProps) { return (
@@ -18,7 +19,7 @@ function AuthFormHeader({ message, linkMassege }: AuthFormHeaderProps) {
{message} - {linkMassege} + {linkMassege}
); diff --git a/pages/auth.module.css b/pages/auth.module.css new file mode 100644 index 000000000..cae6586d0 --- /dev/null +++ b/pages/auth.module.css @@ -0,0 +1,7 @@ +.contentWrap { + background: var(--Linkbrary-bg, #f0f6ff); + padding: 238px 0px 117px 0px; + display: flex; + flex-direction: column; + align-items: center; +} diff --git a/pages/index.jsx b/pages/index.tsx similarity index 100% rename from pages/index.jsx rename to pages/index.tsx diff --git a/pages/signin.module.css b/pages/signin.module.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/pages/signin.tsx b/pages/signin.tsx index c88ee5d29..61ed8da70 100644 --- a/pages/signin.tsx +++ b/pages/signin.tsx @@ -1,18 +1,19 @@ -import styles from "./signin.module.css"; +import styles from "./auth.module.css"; import SigninForm from "../components/SigninForm"; import SocialAuthForm from "../components/SocialAuthForm"; import AuthFormHeader from "../components/AuthFormHeader"; function Signin() { return ( - <> +
- +
); } diff --git a/pages/signup.tsx b/pages/signup.tsx index 07fb8213d..908c02e1a 100644 --- a/pages/signup.tsx +++ b/pages/signup.tsx @@ -1,17 +1,19 @@ +import styles from "./auth.module.css"; import AuthFormHeader from "@/components/AuthFormHeader"; import SignupForm from "@/components/SignupForm"; import SocialAuthForm from "@/components/SocialAuthForm"; function Signup() { return ( - <> +
- +
); } From 50d4d551aaebcc785ef814058c0af8d1452ea2d7 Mon Sep 17 00:00:00 2001 From: hakyoung12 Date: Sat, 18 May 2024 20:51:55 +0900 Subject: [PATCH 11/18] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8/?= =?UTF-8?q?=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- api/Auth.jsx | 65 +++++++++++++++++++++++++++++++++++++++ components/SigninForm.tsx | 4 ++- components/SignupForm.tsx | 3 +- 3 files changed, 70 insertions(+), 2 deletions(-) create mode 100644 api/Auth.jsx diff --git a/api/Auth.jsx b/api/Auth.jsx new file mode 100644 index 000000000..0de9c66a7 --- /dev/null +++ b/api/Auth.jsx @@ -0,0 +1,65 @@ +import { useEffect, useState } from "react"; +import { useRouter } from "next/router"; + +/** 로그인폼 제출 */ +export async function submitLoginForm(email, password) { + const router = useRouter(); + try { + const response = await fetch("https://bootcamp-api.codeit.kr/api/sign-in", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + email: email, + password: password, + }), + }); + const result = await response.json(); + if (!response.ok) { + throw new Error("로그인 오류!"); + } else { + router.push("/folder"); + localStorage.setItem("accessToken", result.data.accessToken); + } + } catch (error) { + alert(error); + } +} + +/** 회원가입폼 제출 */ +export async function submitSignUpForm(email, password) { + const router = useRouter(); + try { + const response = await fetch("https://bootcamp-api.codeit.kr/api/sign-up", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + email: email, + password: password, + }), + }); + const result = await response.json(); + if (!response.ok) { + throw new Error("회원가입 오류!"); + } else { + router.push("/folder"); + localStorage.setItem("accessToken", result.data.accessToken); + } + } catch (error) { + alert(error); + } +} + +/** 로그인/회원가입 토큰체크 */ +export function accessTokenCheck() { + const router = useRouter(); + useEffect(() => { + const token = localStorage.getItem("accessToken"); + if (token) { + router.push("/folder"); + } + }, []); +} diff --git a/components/SigninForm.tsx b/components/SigninForm.tsx index 62e1219f3..7c1687f43 100644 --- a/components/SigninForm.tsx +++ b/components/SigninForm.tsx @@ -1,5 +1,6 @@ import styles from "./AuthForm.module.css"; import { useForm, SubmitHandler } from "react-hook-form"; +import { submitLoginForm, accessTokenCheck } from "@/api/Auth"; interface SigninFormValues { email: string; @@ -14,8 +15,9 @@ function SigninForm() { } = useForm(); const onSubmit: SubmitHandler = (data) => { - console.log(data); + submitLoginForm(data.email, data.password); }; + accessTokenCheck(); return (
diff --git a/components/SignupForm.tsx b/components/SignupForm.tsx index af1f1041a..3fa603bed 100644 --- a/components/SignupForm.tsx +++ b/components/SignupForm.tsx @@ -1,6 +1,7 @@ import styles from "./AuthForm.module.css"; import { useForm, SubmitHandler } from "react-hook-form"; import { useRef } from "react"; +import { submitSignUpForm } from "@/api/Auth"; interface SigninFormValues { email: string; @@ -20,7 +21,7 @@ function SigninForm() { passwordRef.current = watch("password"); const onSubmit: SubmitHandler = (data) => { - console.log(data); + submitSignUpForm(data.email, data.password); }; return ( From 555e0d8790ef23bb35a50ee8f83544082e1824bc Mon Sep 17 00:00:00 2001 From: hakyoung12 Date: Sat, 18 May 2024 22:08:34 +0900 Subject: [PATCH 12/18] =?UTF-8?q?feat:=20=EB=B9=84=EB=B0=80=EB=B2=88?= =?UTF-8?q?=ED=98=B8=20=EB=B3=B4=EC=9D=B4=EA=B8=B0/=EC=95=88=EB=B3=B4?= =?UTF-8?q?=EC=9D=B4=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/AuthForm.module.css | 4 + components/PasswordToggleButton.module.css | 5 ++ components/PasswordToggleButton.tsx | 31 ++++++++ components/SigninForm.tsx | 35 ++++++--- components/SignupForm.tsx | 87 ++++++++++++++-------- pages/{index.tsx => index.jsx} | 0 public/eye-off.svg | 6 ++ public/eye-on.svg | 6 ++ 8 files changed, 135 insertions(+), 39 deletions(-) create mode 100644 components/PasswordToggleButton.module.css create mode 100644 components/PasswordToggleButton.tsx rename pages/{index.tsx => index.jsx} (100%) create mode 100644 public/eye-off.svg create mode 100644 public/eye-on.svg diff --git a/components/AuthForm.module.css b/components/AuthForm.module.css index b79471591..a5a867948 100644 --- a/components/AuthForm.module.css +++ b/components/AuthForm.module.css @@ -39,6 +39,10 @@ background: var(--Linkbrary-white, #fff); } +.passwordInput { + position: relative; +} + .errorMessage { color: var(--Linkbrary-red, #ff5b56); font-family: Pretendard; diff --git a/components/PasswordToggleButton.module.css b/components/PasswordToggleButton.module.css new file mode 100644 index 000000000..0975077c4 --- /dev/null +++ b/components/PasswordToggleButton.module.css @@ -0,0 +1,5 @@ +.PasswordToggleButton { + position: absolute; + top: 18px; + right: 15px; +} diff --git a/components/PasswordToggleButton.tsx b/components/PasswordToggleButton.tsx new file mode 100644 index 000000000..d8ebdc9c0 --- /dev/null +++ b/components/PasswordToggleButton.tsx @@ -0,0 +1,31 @@ +import visible from "@/public/eye-on.svg"; +import hidden from "@/public/eye-off.svg"; +import Image from "next/image"; +import styles from "./PasswordToggleButton.module.css"; +import { MouseEventHandler } from "react"; + +interface passwordToggleButtonProps { + passwordType: string; + handlePasswordType: () => void; +} + +function PasswordToggleButton({ + passwordType, + handlePasswordType, +}: passwordToggleButtonProps) { + return ( + + ); +} + +export default PasswordToggleButton; diff --git a/components/SigninForm.tsx b/components/SigninForm.tsx index 7c1687f43..79d5e2d64 100644 --- a/components/SigninForm.tsx +++ b/components/SigninForm.tsx @@ -1,6 +1,8 @@ import styles from "./AuthForm.module.css"; import { useForm, SubmitHandler } from "react-hook-form"; +import { useState } from "react"; import { submitLoginForm, accessTokenCheck } from "@/api/Auth"; +import PasswordToggleButton from "./PasswordToggleButton"; interface SigninFormValues { email: string; @@ -8,6 +10,9 @@ interface SigninFormValues { } function SigninForm() { + const [passwordType, setPasswordType] = useState<"password" | "text">( + "password" + ); const { register, handleSubmit, @@ -17,7 +22,13 @@ function SigninForm() { const onSubmit: SubmitHandler = (data) => { submitLoginForm(data.email, data.password); }; - accessTokenCheck(); + // accessTokenCheck(); + + const handlePasswordType = ( + setType: React.Dispatch> + ) => { + setType((prevType) => (prevType === "password" ? "text" : "password")); + }; return ( @@ -39,14 +50,20 @@ function SigninForm() {
- +
+ + handlePasswordType(setPasswordType)} + /> +

{errors.password?.message}

+ + +
+ ); +} + +export default FolderEditMenu; diff --git a/components/FolderList.module.css b/components/FolderList.module.css index e6820074a..432f1dc9f 100644 --- a/components/FolderList.module.css +++ b/components/FolderList.module.css @@ -67,32 +67,6 @@ justify-content: space-between; } -.folderLinkList__folderEditBtns { - display: flex; - gap: 12px; -} - -.folderLinkList__folderEditBtn { - cursor: pointer; - display: flex; - align-items: center; - gap: 4px; - background: none; - border: none; - color: var(--Linkbrary-gray60, #9fa6b2); - font-family: Pretendard; - font-size: 14px; - font-style: normal; - font-weight: 600; - line-height: normal; -} - -.folderLinkList__folderEditIcon { - position: relative; - width: 18px; - height: 18px; -} - .folderLinkList__folderName { color: #000; font-family: Pretendard; diff --git a/components/FolderList.tsx b/components/FolderList.tsx index aabc88c1b..d09c827a2 100644 --- a/components/FolderList.tsx +++ b/components/FolderList.tsx @@ -1,7 +1,4 @@ import styles from "./FolderList.module.css"; -import shareBtn from "@/public/share.svg"; -import renameBtn from "@/public/pen.svg"; -import deleteBtn from "@/public/Group 36.svg"; import DeleteFolder from "../modals/DeleteFolder"; import EditAndAddFolder from "../modals/EditAndAddFolder"; import ShareFolder from "../modals/ShareFolder"; @@ -12,6 +9,7 @@ import AddFolderButton from "./AddFolderButton"; import useIsMobile from "@/hooks/useIsMobile"; import SearchInput from "./SearchInput"; import Image from "next/image"; +import FolderEditMenu from "./FolderEditMenu"; interface Folder { created_at: string; @@ -69,47 +67,7 @@ const FolderList: React.FC = ({ folders }) => { > {title}
- {title !== "전체" && ( -
- - - - -
- )} + {title !== "전체" && } Date: Sat, 18 May 2024 23:13:44 +0900 Subject: [PATCH 14/18] =?UTF-8?q?chore:=20=EC=98=A4=EB=A5=98=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- api/Auth.tsx | 78 +++++++++++++++++++++++++++++++++++ components/SocialAuthForm.tsx | 4 +- 2 files changed, 80 insertions(+), 2 deletions(-) create mode 100644 api/Auth.tsx diff --git a/api/Auth.tsx b/api/Auth.tsx new file mode 100644 index 000000000..218c81199 --- /dev/null +++ b/api/Auth.tsx @@ -0,0 +1,78 @@ +import { useEffect } from "react"; + +/** 로그인폼 제출 */ +export async function submitLoginForm(email: string, password: string) { + try { + const response = await fetch("https://bootcamp-api.codeit.kr/api/sign-in", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + email: email, + password: password, + }), + }); + const result = await response.json(); + if (!response.ok) { + throw new Error("로그인 오류!"); + } else { + window.location.href = "/folder"; + localStorage.setItem("accessToken", result.data.accessToken); + } + } catch (error) { + alert(error); + } +} + +/** 이메일 중복체크 */ +export async function checkEmail(email: string) { + const response = await fetch( + "https://bootcamp-api.codeit.kr/api/check-email", + { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + email: email, + }), + } + ); + return response; +} + +/** 회원가입폼 제출 */ +export async function submitSignUpForm(email: string, password: string) { + try { + const response = await fetch("https://bootcamp-api.codeit.kr/api/sign-up", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + email: email, + password: password, + }), + }); + const result = await response.json(); + if (!response.ok) { + throw new Error("회원가입 오류!"); + } else { + window.location.href = "/folder"; + localStorage.setItem("accessToken", result.data.accessToken); + } + } catch (error) { + alert(error); + } +} + +/** 로그인/회원가입 토큰체크 */ +export function accessTokenCheck() { + useEffect(() => { + const token = localStorage.getItem("accessToken"); + if (token) { + window.location.href = "/folder"; + } + }, []); +} diff --git a/components/SocialAuthForm.tsx b/components/SocialAuthForm.tsx index 09e0adf07..c88301b38 100644 --- a/components/SocialAuthForm.tsx +++ b/components/SocialAuthForm.tsx @@ -1,5 +1,5 @@ -import GoogleIcon from "@/public/Google.svg"; -import KakaoIcon from "@/public/kakao.svg"; +import GoogleIcon from "/Google.svg"; +import KakaoIcon from "/kakao.svg"; import styles from "./SocialAuthForm.module.css"; import Link from "next/link"; import Image from "next/image"; From dd31edcdf51b19b3be59fcface2ace3c1b44e89f Mon Sep 17 00:00:00 2001 From: hakyoung12 Date: Sat, 18 May 2024 23:23:47 +0900 Subject: [PATCH 15/18] =?UTF-8?q?chore:=20=ED=8C=8C=EC=9D=BC=EC=9D=B4?= =?UTF-8?q?=EB=A6=84=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- api/Auth.tsx | 78 ----------------------------------- components/SocialAuthForm.tsx | 4 +- 2 files changed, 2 insertions(+), 80 deletions(-) delete mode 100644 api/Auth.tsx diff --git a/api/Auth.tsx b/api/Auth.tsx deleted file mode 100644 index 218c81199..000000000 --- a/api/Auth.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { useEffect } from "react"; - -/** 로그인폼 제출 */ -export async function submitLoginForm(email: string, password: string) { - try { - const response = await fetch("https://bootcamp-api.codeit.kr/api/sign-in", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - email: email, - password: password, - }), - }); - const result = await response.json(); - if (!response.ok) { - throw new Error("로그인 오류!"); - } else { - window.location.href = "/folder"; - localStorage.setItem("accessToken", result.data.accessToken); - } - } catch (error) { - alert(error); - } -} - -/** 이메일 중복체크 */ -export async function checkEmail(email: string) { - const response = await fetch( - "https://bootcamp-api.codeit.kr/api/check-email", - { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - email: email, - }), - } - ); - return response; -} - -/** 회원가입폼 제출 */ -export async function submitSignUpForm(email: string, password: string) { - try { - const response = await fetch("https://bootcamp-api.codeit.kr/api/sign-up", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - email: email, - password: password, - }), - }); - const result = await response.json(); - if (!response.ok) { - throw new Error("회원가입 오류!"); - } else { - window.location.href = "/folder"; - localStorage.setItem("accessToken", result.data.accessToken); - } - } catch (error) { - alert(error); - } -} - -/** 로그인/회원가입 토큰체크 */ -export function accessTokenCheck() { - useEffect(() => { - const token = localStorage.getItem("accessToken"); - if (token) { - window.location.href = "/folder"; - } - }, []); -} diff --git a/components/SocialAuthForm.tsx b/components/SocialAuthForm.tsx index c88301b38..7f0cbb015 100644 --- a/components/SocialAuthForm.tsx +++ b/components/SocialAuthForm.tsx @@ -1,5 +1,5 @@ -import GoogleIcon from "/Google.svg"; -import KakaoIcon from "/kakao.svg"; +import GoogleIcon from "../public/Google.svg"; +import KakaoIcon from "../public/kakao.svg"; import styles from "./SocialAuthForm.module.css"; import Link from "next/link"; import Image from "next/image"; From 61593a012f6f83e5fd6494e6a26845df5402e74d Mon Sep 17 00:00:00 2001 From: hakyoung12 Date: Sat, 18 May 2024 23:26:58 +0900 Subject: [PATCH 16/18] =?UTF-8?q?chore:=20=ED=8C=8C=EC=9D=BC=20=EC=9D=B4?= =?UTF-8?q?=EB=A6=84=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- api/Auth.jsx | 2 +- components/SocialAuthForm.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/api/Auth.jsx b/api/Auth.jsx index 0de9c66a7..3cdac0418 100644 --- a/api/Auth.jsx +++ b/api/Auth.jsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import { useEffect } from "react"; import { useRouter } from "next/router"; /** 로그인폼 제출 */ diff --git a/components/SocialAuthForm.tsx b/components/SocialAuthForm.tsx index 7f0cbb015..18af2fea9 100644 --- a/components/SocialAuthForm.tsx +++ b/components/SocialAuthForm.tsx @@ -1,5 +1,5 @@ import GoogleIcon from "../public/Google.svg"; -import KakaoIcon from "../public/kakao.svg"; +import KakaoIcon from "../public/Kakao.svg"; import styles from "./SocialAuthForm.module.css"; import Link from "next/link"; import Image from "next/image"; From 126f3d263a8c4a46a7ccbca68f3d6d7a20591eb6 Mon Sep 17 00:00:00 2001 From: hakyoung12 Date: Sat, 18 May 2024 23:34:03 +0900 Subject: [PATCH 17/18] =?UTF-8?q?chore:=20=EC=95=84=EC=9D=B4=EC=BD=98=20?= =?UTF-8?q?=EB=A3=A8=ED=8A=B8=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/index.html b/public/index.html index f6d742507..dac367048 100644 --- a/public/index.html +++ b/public/index.html @@ -2,7 +2,7 @@ - + - + React App From 14dd26dac8a718fce9c8231413917a7ab5391371 Mon Sep 17 00:00:00 2001 From: hakyoung12 Date: Sat, 18 May 2024 23:39:44 +0900 Subject: [PATCH 18/18] =?UTF-8?q?chore:=20=EC=95=84=EC=9D=B4=EC=BD=98=20?= =?UTF-8?q?=EB=A3=A8=ED=8A=B8=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/index.html b/public/index.html index dac367048..f6d742507 100644 --- a/public/index.html +++ b/public/index.html @@ -2,7 +2,7 @@ - + - + React App