From 4ff3eacc48bbd8c2474825f9d8fb51eb46fa9fc1 Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Wed, 8 May 2024 16:37:44 +0900 Subject: [PATCH 01/56] feat: Create Button Component --- components/Button/Button.module.css | 23 +++++++++++++++++++++++ components/Button/Button.tsx | 17 +++++++++++++++++ 2 files changed, 40 insertions(+) create mode 100644 components/Button/Button.module.css create mode 100644 components/Button/Button.tsx diff --git a/components/Button/Button.module.css b/components/Button/Button.module.css new file mode 100644 index 000000000..0fa7e20a8 --- /dev/null +++ b/components/Button/Button.module.css @@ -0,0 +1,23 @@ +.btn { + background-image: linear-gradient(to right, #6d6afe, #6de3fe); + padding: 10px 16px; + border-radius: 8px; + display: flex; + justify-content: center; + align-items: center; + font-size: 1.125em; + font-weight: 600; + color: #f5f5f5; + text-decoration-line: none; + flex-shrink: 0; + font-family: Pretendard; + &:hover, + &:focus { + cursor: pointer; + } + + @media (max-width: 767px) { + padding: 10px 16px; + font-size: 14px; + } +} diff --git a/components/Button/Button.tsx b/components/Button/Button.tsx new file mode 100644 index 000000000..f35cc8dfa --- /dev/null +++ b/components/Button/Button.tsx @@ -0,0 +1,17 @@ +import styles from './Button.module.css'; + +interface ButtonProps { + children?: React.ReactNode; + onClick?: () => void; + className?: string; +} + +const Button = ({ children, onClick, className }: ButtonProps) => { + return ( + + ); +}; + +export default Button; From afc85a46ab75b1b0740682358acc1c36928f6d9b Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Wed, 8 May 2024 17:05:30 +0900 Subject: [PATCH 02/56] style: Fix incorrect syntax in css --- components/Button/Button.module.css | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/components/Button/Button.module.css b/components/Button/Button.module.css index 0fa7e20a8..943969d83 100644 --- a/components/Button/Button.module.css +++ b/components/Button/Button.module.css @@ -11,12 +11,14 @@ text-decoration-line: none; flex-shrink: 0; font-family: Pretendard; - &:hover, - &:focus { - cursor: pointer; - } +} + +.btn:hover { + cursor: pointer; +} - @media (max-width: 767px) { +@media (max-width: 767px) { + .btn { padding: 10px 16px; font-size: 14px; } From 51cd32b34a44d79b5eed3cb28625d15421f1fc5e Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Wed, 8 May 2024 17:06:03 +0900 Subject: [PATCH 03/56] feat: Add Header component --- components/Header/Header.module.css | 17 +++++++++++++++++ components/Header/Header.tsx | 17 +++++++++++++++++ public/assets/images/logo.svg | 11 +++++++++++ 3 files changed, 45 insertions(+) create mode 100644 components/Header/Header.module.css create mode 100644 components/Header/Header.tsx create mode 100644 public/assets/images/logo.svg diff --git a/components/Header/Header.module.css b/components/Header/Header.module.css new file mode 100644 index 000000000..3f451e783 --- /dev/null +++ b/components/Header/Header.module.css @@ -0,0 +1,17 @@ +.headerContainer { + padding: 20px 200px; +} + +.headerBar { + position: relative; + display: flex; + max-width: 1920px; + justify-content: space-between; + align-items: center; +} + +.logoImageContainer { + position: relative; + width: 133px; + height: 24px; +} diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx new file mode 100644 index 000000000..34237b2e8 --- /dev/null +++ b/components/Header/Header.tsx @@ -0,0 +1,17 @@ +import Button from '../Button/Button'; +import Image from 'next/image'; +import styles from './Header.module.css'; +export default function Header() { + return ( + <> +
+
+
+ Logo +
+ +
+
+ + ); +} diff --git a/public/assets/images/logo.svg b/public/assets/images/logo.svg new file mode 100644 index 000000000..0b384a107 --- /dev/null +++ b/public/assets/images/logo.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + From 4b13e6724f5590b02d5dcf7988b7d20bf080d52a Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Wed, 8 May 2024 17:06:45 +0900 Subject: [PATCH 04/56] feat: Render Header component as common component --- pages/_app.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/pages/_app.tsx b/pages/_app.tsx index 021681f4d..9e710304b 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,6 +1,12 @@ -import '@/styles/globals.css' -import type { AppProps } from 'next/app' +import '@/styles/globals.css'; +import type { AppProps } from 'next/app'; +import Header from '@/components/Header/Header'; export default function App({ Component, pageProps }: AppProps) { - return + return ( + <> +
+ + + ); } From 80657d1cf211492210ecb5e03a71865fbd7de53c Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Wed, 8 May 2024 17:07:36 +0900 Subject: [PATCH 05/56] chore: Remove initial codes in Home Component --- pages/index.tsx | 114 +++++------------------------------------------- 1 file changed, 10 insertions(+), 104 deletions(-) diff --git a/pages/index.tsx b/pages/index.tsx index 02c4dee04..4e4b5e857 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,114 +1,20 @@ -import Head from 'next/head' -import Image from 'next/image' -import { Inter } from 'next/font/google' -import styles from '@/styles/Home.module.css' +import Head from 'next/head'; +import Image from 'next/image'; +import { Inter } from 'next/font/google'; +import styles from '@/styles/Home.module.css'; -const inter = Inter({ subsets: ['latin'] }) +const inter = Inter({ subsets: ['latin'] }); export default function Home() { return ( <> Create Next App - - - + + + -
-
-

- Get started by editing  - pages/index.tsx -

- -
- -
- Next.js Logo -
- - -
+
- ) + ); } From 5a20445988e5ecf5e84dc3c9c29bccfd1c631ca0 Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Wed, 8 May 2024 17:13:05 +0900 Subject: [PATCH 06/56] chore: Change Logo image to Link Component --- components/Header/Header.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx index 34237b2e8..2088f4a34 100644 --- a/components/Header/Header.tsx +++ b/components/Header/Header.tsx @@ -1,14 +1,15 @@ import Button from '../Button/Button'; import Image from 'next/image'; import styles from './Header.module.css'; +import Link from 'next/link'; export default function Header() { return ( <>
-
+ Logo -
+
From 71fc42e8a67da61d70ff62cae0f19449d0b84d95 Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Wed, 8 May 2024 17:17:03 +0900 Subject: [PATCH 07/56] style: Apply reset.css in _app.tsx --- pages/_app.tsx | 1 + styles/reset.css | 97 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 98 insertions(+) create mode 100644 styles/reset.css diff --git a/pages/_app.tsx b/pages/_app.tsx index 9e710304b..2bc673a3b 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,3 +1,4 @@ +import '@/styles/reset.css'; import '@/styles/globals.css'; import type { AppProps } from 'next/app'; import Header from '@/components/Header/Header'; diff --git a/styles/reset.css b/styles/reset.css new file mode 100644 index 000000000..6400312ab --- /dev/null +++ b/styles/reset.css @@ -0,0 +1,97 @@ +/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */ +blockquote, +body, +dd, +dl, +dt, +fieldset, +figure, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +html, +iframe, +legend, +li, +ol, +p, +pre, +textarea, +ul { + margin: 0; + padding: 0; +} +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: 100%; + font-weight: 400; +} +ul { + list-style: none; +} +button, +input, +select { + margin: 0; + padding: 0; +} +html { + box-sizing: border-box; +} +*, +:after, +:before { + box-sizing: inherit; +} +img, +video { + height: auto; + max-width: 100%; +} +iframe { + border: 0; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +td, +th { + padding: 0; +} + +button { + border: none; + background-color: transparent; + &:hover, + &:focus { + cursor: pointer; + } +} + +div { + margin: 0; + padding: 0; +} + +input { + outline: none; +} + +main { + margin: 0; + padding: 0; +} + +a { + text-decoration: none; + color: inherit; +} From c06e1efea30e074abf234376da57ccaf293de7e1 Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Wed, 8 May 2024 17:17:20 +0900 Subject: [PATCH 08/56] style: Initialize global.css --- styles/globals.css | 104 +-------------------------------------------- 1 file changed, 2 insertions(+), 102 deletions(-) diff --git a/styles/globals.css b/styles/globals.css index d4f491e15..9c94b7f3f 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -1,107 +1,7 @@ :root { - --max-width: 1100px; - --border-radius: 12px; - --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', - 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', - 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace; - - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; - - --primary-glow: conic-gradient( - from 180deg at 50% 50%, - #16abff33 0deg, - #0885ff33 55deg, - #54d6ff33 120deg, - #0071ff33 160deg, - transparent 360deg - ); - --secondary-glow: radial-gradient( - rgba(255, 255, 255, 1), - rgba(255, 255, 255, 0) - ); - - --tile-start-rgb: 239, 245, 249; - --tile-end-rgb: 228, 232, 233; - --tile-border: conic-gradient( - #00000080, - #00000040, - #00000030, - #00000020, - #00000010, - #00000010, - #00000080 - ); - - --callout-rgb: 238, 240, 241; - --callout-border-rgb: 172, 175, 176; - --card-rgb: 180, 185, 188; - --card-border-rgb: 131, 134, 135; -} - -@media (prefers-color-scheme: dark) { - :root { - --foreground-rgb: 255, 255, 255; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; - - --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0)); - --secondary-glow: linear-gradient( - to bottom right, - rgba(1, 65, 255, 0), - rgba(1, 65, 255, 0), - rgba(1, 65, 255, 0.3) - ); - - --tile-start-rgb: 2, 13, 46; - --tile-end-rgb: 2, 5, 19; - --tile-border: conic-gradient( - #ffffff80, - #ffffff40, - #ffffff30, - #ffffff20, - #ffffff10, - #ffffff10, - #ffffff80 - ); - - --callout-rgb: 20, 20, 20; - --callout-border-rgb: 108, 108, 108; - --card-rgb: 100, 100, 100; - --card-border-rgb: 200, 200, 200; - } -} - -* { - box-sizing: border-box; - padding: 0; - margin: 0; -} - -html, -body { - max-width: 100vw; - overflow-x: hidden; + --background-color: #f0f6ff; } body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); -} - -a { - color: inherit; - text-decoration: none; -} - -@media (prefers-color-scheme: dark) { - html { - color-scheme: dark; - } + background-color: var(--background-color); } From 7450edd45c244acaa4188309a717883bc975cea3 Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Wed, 8 May 2024 17:30:14 +0900 Subject: [PATCH 09/56] feat: Add Footer Component --- components/Footer/Footer.module.css | 67 +++++++++++++++++++++++ components/Footer/Footer.tsx | 73 +++++++++++++++++++++++++ pages/_app.tsx | 2 + public/assets/images/facebook_logo.svg | 9 +++ public/assets/images/instagram_logo.svg | 5 ++ public/assets/images/twitter_logo.svg | 5 ++ public/assets/images/youtube_logo.svg | 14 +++++ 7 files changed, 175 insertions(+) create mode 100644 components/Footer/Footer.module.css create mode 100644 components/Footer/Footer.tsx create mode 100644 public/assets/images/facebook_logo.svg create mode 100644 public/assets/images/instagram_logo.svg create mode 100644 public/assets/images/twitter_logo.svg create mode 100644 public/assets/images/youtube_logo.svg diff --git a/components/Footer/Footer.module.css b/components/Footer/Footer.module.css new file mode 100644 index 000000000..fc4305478 --- /dev/null +++ b/components/Footer/Footer.module.css @@ -0,0 +1,67 @@ +@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap'); + +.mainFooter { + font-family: Abel, sans-serif; + background-color: #111322; + display: flex; + flex-direction: column; + align-items: center; + width: inherit; + padding: 32px 104px 64px; +} + +.footerBar { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1920px; + width: 100%; +} + +.copyright { + color: #676767; + font-family: Abel; + font-size: 1em; + line-height: normal; +} + +.policyBar { + display: flex; + gap: 30px; + color: #cfcfcf; + font-family: Abel; + font-size: 1em; +} + +.infoLinkList { + display: flex; + gap: 12px; +} + +.footerLink { + text-decoration: none; + color: inherit; +} + +@media (max-width: 767px) { + .mainFooter { + padding: 32px; + } + + .footerBar { + display: grid; + grid-template-columns: 181px 116px; + column-gap: auto; + row-gap: 60px; + } + + .copyright { + order: 1; + } +} + +.infoLinkLogo { + width: 24px; + height: 24px; + position: relative; +} diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx new file mode 100644 index 000000000..395528595 --- /dev/null +++ b/components/Footer/Footer.tsx @@ -0,0 +1,73 @@ +import Link from 'next/link'; +import Image from 'next/image'; +import facebookLogo from '@/public/assets/images/facebook_logo.svg'; +import twitterLogo from '@/public/assets/images/twitter_logo.svg'; +import youtubeLogo from '@/public/assets/images/youtube_logo.svg'; +import instagramLogo from '@/public/assets/images/instagram_logo.svg'; +import styles from './Footer.module.css'; + +export default function Footer() { + return ( +
+
+
©codeit - 2023
+
+ + Privacy Policy + + + FAQ + +
+
    +
  • + +
    + Facebook link logo +
    + +
    • +
  • + +
    + Twitter link logo +
    + +
    • +
  • + +
    + {' '} + Youtube link logo +
    + +
    • +
  • + +
    + {' '} + Instagram link logo +
    + +
    • +
+
+
+ ); +} diff --git a/pages/_app.tsx b/pages/_app.tsx index 2bc673a3b..21e7281ca 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -2,12 +2,14 @@ import '@/styles/reset.css'; import '@/styles/globals.css'; import type { AppProps } from 'next/app'; import Header from '@/components/Header/Header'; +import Footer from '@/components/Footer/Footer'; export default function App({ Component, pageProps }: AppProps) { return ( <>
+
From d85cd765a99269a288db93ad457625af1d2c7d77 Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Thu, 9 May 2024 12:52:55 +0900 Subject: [PATCH 15/56] feat: Add link feature using useRouter from homepage to signup page --- pages/index.tsx | 11 ++++++++++- pages/signup/index.tsx | 3 +++ 2 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 pages/signup/index.tsx diff --git a/pages/index.tsx b/pages/index.tsx index 90d30c342..e71579f85 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -3,10 +3,17 @@ import { Inter } from 'next/font/google'; import styles from '@/styles/Home.module.css'; import Button from '@/components/Button/Button'; import Image from 'next/image'; +import { useRouter } from 'next/router'; const inter = Inter({ subsets: ['latin'] }); export default function Home() { + const router = useRouter(); // Access the router object + + const handleAddLinkClick = () => { + router.push('/signup'); // Navigate to /signup route when button is clicked + }; + return ( <> @@ -22,7 +29,9 @@ export default function Home() { 쉽게 저장하고 관리해 보세요 - +
회원가입
; +} From 54a6d8653c03696a8b2d006c2111c2fffb4f7ae0 Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Thu, 9 May 2024 13:50:23 +0900 Subject: [PATCH 16/56] feat: Add optional rendering of header and footer in app.tsx --- pages/_app.tsx | 14 +++++++++++--- styles/AuthPage.module.css | 0 2 files changed, 11 insertions(+), 3 deletions(-) create mode 100644 styles/AuthPage.module.css diff --git a/pages/_app.tsx b/pages/_app.tsx index 21e7281ca..414555e40 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -5,11 +5,19 @@ import Header from '@/components/Header/Header'; import Footer from '@/components/Footer/Footer'; export default function App({ Component, pageProps }: AppProps) { + const isAuthPage = Component.name === 'SignIn' || Component.name === 'SignUp'; + return ( <> -
- -
+ {isAuthPage ? ( + + ) : ( + <> +
+ +
+ + )} ); } diff --git a/styles/AuthPage.module.css b/styles/AuthPage.module.css new file mode 100644 index 000000000..e69de29bb From 38f02df38caf7fdaa19e8c27d7c8af08c00df8c0 Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Thu, 9 May 2024 14:11:44 +0900 Subject: [PATCH 17/56] style: Add global color variable and font --- styles/globals.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/styles/globals.css b/styles/globals.css index c703c1296..84692a261 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -2,8 +2,10 @@ :root { --background-color: #f0f6ff; + --Linkbrary-primary-color: #6d6afe; } body { background-color: var(--background-color); + font-family: Pretendard, sans-serif; } From 0ef3b30fdc422f1e5eee37d4018664fac2dcdd92 Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Thu, 9 May 2024 14:11:59 +0900 Subject: [PATCH 18/56] feat: Add header for sign up page --- pages/signup/index.tsx | 27 +++++++++++++++++++++++- styles/AuthPage.module.css | 43 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 69 insertions(+), 1 deletion(-) diff --git a/pages/signup/index.tsx b/pages/signup/index.tsx index fe1537bf3..1b30e7fb5 100644 --- a/pages/signup/index.tsx +++ b/pages/signup/index.tsx @@ -1,3 +1,28 @@ +import Link from 'next/link'; +import styles from '@/styles/AuthPage.module.css'; +import Image from 'next/image'; + export default function SignUp() { - return
회원가입
; + return ( + <> +
+
+
+ + Linkbrary + + +
+ + 이미 회원이신가요?? + + + 로그인 하기 + +
+
+
+
+ + ); } diff --git a/styles/AuthPage.module.css b/styles/AuthPage.module.css index e69de29bb..e331031e8 100644 --- a/styles/AuthPage.module.css +++ b/styles/AuthPage.module.css @@ -0,0 +1,43 @@ +.authPage { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 238px 0; +} + +.authPageContainer { + max-width: 400px; + display: flex; + flex-direction: column; + align-items: center; + gap: 30px; +} + +.authPageHeader { + display: flex; + flex-direction: column; + gap: 16px; + align-items: center; +} + +.logo { + position: relative; + width: 218px; + height: 38px; +} + +.membershipPromptBar { + display: flex; + gap: 8px; + font-family: inherit; +} + +.membershipPromptText { + font-family: inherit; +} + +.membershipPromptLink { + text-decoration: underline; + color: var(--Linkbrary-primary-color); +} From abf29561b43ae740a90eeaef105da43c1210fdcd Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Thu, 9 May 2024 14:22:14 +0900 Subject: [PATCH 19/56] refactor: Extract authHeader from authPage into a seperate component --- components/AuthHeader/AuthHeader.module.css | 27 +++++++++++++++++++++ components/AuthHeader/AuthHeader.tsx | 25 +++++++++++++++++++ pages/signup/index.tsx | 18 ++------------ 3 files changed, 54 insertions(+), 16 deletions(-) create mode 100644 components/AuthHeader/AuthHeader.module.css create mode 100644 components/AuthHeader/AuthHeader.tsx diff --git a/components/AuthHeader/AuthHeader.module.css b/components/AuthHeader/AuthHeader.module.css new file mode 100644 index 000000000..717cd1aef --- /dev/null +++ b/components/AuthHeader/AuthHeader.module.css @@ -0,0 +1,27 @@ +.authPageHeader { + display: flex; + flex-direction: column; + gap: 16px; + align-items: center; +} + +.logo { + position: relative; + width: 218px; + height: 38px; +} + +.membershipPromptBar { + display: flex; + gap: 8px; + font-family: inherit; +} + +.membershipPromptText { + font-family: inherit; +} + +.membershipPromptLink { + text-decoration: underline; + color: var(--Linkbrary-primary-color); +} diff --git a/components/AuthHeader/AuthHeader.tsx b/components/AuthHeader/AuthHeader.tsx new file mode 100644 index 000000000..dfbb1e678 --- /dev/null +++ b/components/AuthHeader/AuthHeader.tsx @@ -0,0 +1,25 @@ +import Link from 'next/link'; +import Image from 'next/image'; +import styles from './AuthHeader.module.css'; + +interface AuthHeaderProps { + text: string; + linkText: string; +} + +export default function AuthHeader({ text, linkText }: AuthHeaderProps) { + return ( +
+ + Linkbrary + + +
+ {text} + + {linkText} + +
+
+ ); +} diff --git a/pages/signup/index.tsx b/pages/signup/index.tsx index 1b30e7fb5..25a739fc7 100644 --- a/pages/signup/index.tsx +++ b/pages/signup/index.tsx @@ -1,26 +1,12 @@ -import Link from 'next/link'; import styles from '@/styles/AuthPage.module.css'; -import Image from 'next/image'; +import AuthHeader from '@/components/AuthHeader/AuthHeader'; export default function SignUp() { return ( <>
-
- - Linkbrary - - -
- - 이미 회원이신가요?? - - - 로그인 하기 - -
-
+
From 235a8a2d7a7ef73803192bfcddfd64fb187419d6 Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Thu, 9 May 2024 15:59:08 +0900 Subject: [PATCH 20/56] feat: Add sign up form in sign up page --- components/AuthInput/AuthInput.module.scss | 35 +++++ components/AuthInput/AuthInput.tsx | 55 +++++++ components/SignUpForm/SignUpForm.module.scss | 11 ++ components/SignUpForm/SignUpForm.tsx | 32 ++++ components/SocialAuth/SocialAuth.module.scss | 0 components/SocialAuth/SocialAuth.tsx | 5 + package-lock.json | 146 ++++++++++++++++++- package.json | 9 +- pages/signup/index.tsx | 2 + public/assets/images/eye-off.svg | 5 + public/assets/images/eye-on.svg | 6 + styles/AuthPage.module.css | 28 ---- styles/mixins.scss | 6 + 13 files changed, 301 insertions(+), 39 deletions(-) create mode 100644 components/AuthInput/AuthInput.module.scss create mode 100644 components/AuthInput/AuthInput.tsx create mode 100644 components/SignUpForm/SignUpForm.module.scss create mode 100644 components/SignUpForm/SignUpForm.tsx create mode 100644 components/SocialAuth/SocialAuth.module.scss create mode 100644 components/SocialAuth/SocialAuth.tsx create mode 100644 public/assets/images/eye-off.svg create mode 100644 public/assets/images/eye-on.svg create mode 100644 styles/mixins.scss diff --git a/components/AuthInput/AuthInput.module.scss b/components/AuthInput/AuthInput.module.scss new file mode 100644 index 000000000..2e9278d3d --- /dev/null +++ b/components/AuthInput/AuthInput.module.scss @@ -0,0 +1,35 @@ +@use '@/styles/mixins.scss' as m; + +.inputBox { + @include m.flex(column); + gap: 12px; +} + +.inputWrapper { + display: flex; + justify-content: space-between; + border: 1px solid #ccd5e3; + padding: 18px 15px; + border-radius: 8px; + background-color: #fff; + width: 370px; +} + +.inputWrapper:focus-within { + border: 1px solid var(--Linkbrary-primary-color); +} + +.authInput { + width: 100%; + border: none; /* Remove border from authInput to avoid double border */ +} + +.toggleButton { + position: relative; + width: 16px; + height: 16px; + + &:hover { + filter: brightness(0); + } +} diff --git a/components/AuthInput/AuthInput.tsx b/components/AuthInput/AuthInput.tsx new file mode 100644 index 000000000..9817feb80 --- /dev/null +++ b/components/AuthInput/AuthInput.tsx @@ -0,0 +1,55 @@ +import { useState } from 'react'; +import styles from './AuthInput.module.scss'; +import Image from 'next/image'; +import { text } from 'stream/consumers'; + +interface AuthInputProps { + type: string; + labelText: string; + id: string; + enableVisibilityToggle: boolean; +} + +export default function AuthInput({ + type, + labelText, + id, + enableVisibilityToggle, +}: AuthInputProps) { + const [showText, setShowText] = useState(false); + + const handleToggleClick = () => { + setShowText(!showText); + }; + + const inputType = showText ? 'text' : type; + return ( +
+ +
+ + {enableVisibilityToggle && ( + + )} +
+
+ ); +} diff --git a/components/SignUpForm/SignUpForm.module.scss b/components/SignUpForm/SignUpForm.module.scss new file mode 100644 index 000000000..2e411c91c --- /dev/null +++ b/components/SignUpForm/SignUpForm.module.scss @@ -0,0 +1,11 @@ +@use '@/styles/mixins' as a; + +.authForm { + @include a.flex(column); + gap: 24px; +} + +.signUpButton { + padding: 16px 20px; + margin-top: 20px; +} diff --git a/components/SignUpForm/SignUpForm.tsx b/components/SignUpForm/SignUpForm.tsx new file mode 100644 index 000000000..47cbcc56b --- /dev/null +++ b/components/SignUpForm/SignUpForm.tsx @@ -0,0 +1,32 @@ +import AuthInput from '../AuthInput/AuthInput'; +import Button from '../Button/Button'; +import styles from './SignUpForm.module.scss'; + +export default function SignUpForm() { + return ( +
+ + + + + + + + + ); +} diff --git a/components/SocialAuth/SocialAuth.module.scss b/components/SocialAuth/SocialAuth.module.scss new file mode 100644 index 000000000..e69de29bb diff --git a/components/SocialAuth/SocialAuth.tsx b/components/SocialAuth/SocialAuth.tsx new file mode 100644 index 000000000..584fda165 --- /dev/null +++ b/components/SocialAuth/SocialAuth.tsx @@ -0,0 +1,5 @@ +interface SocialAuthProps { + text: string; +} + +export default function SocialAuth({ text }: SocialAuthProps) {} diff --git a/package-lock.json b/package-lock.json index baa2b6655..96d74508b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "@types/react-dom": "^18", "eslint": "^8", "eslint-config-next": "13.5.6", + "sass": "^1.77.0", "typescript": "^5" } }, @@ -545,6 +546,19 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "devOptional": true, + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, "node_modules/argparse": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", @@ -741,6 +755,18 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "dev": true }, + "node_modules/binary-extensions": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz", + "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==", + "devOptional": true, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -755,7 +781,7 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", - "dev": true, + "devOptional": true, "dependencies": { "fill-range": "^7.0.1" }, @@ -832,6 +858,42 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/chokidar": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", + "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", + "devOptional": true, + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/chokidar/node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "devOptional": true, + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/client-only": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", @@ -1601,7 +1663,7 @@ "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", - "dev": true, + "devOptional": true, "dependencies": { "to-regex-range": "^5.0.1" }, @@ -1660,6 +1722,20 @@ "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", "dev": true }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, "node_modules/function-bind": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", @@ -1939,6 +2015,12 @@ "node": ">= 4" } }, + "node_modules/immutable": { + "version": "4.3.5", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz", + "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==", + "devOptional": true + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -2035,6 +2117,18 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "devOptional": true, + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/is-boolean-object": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz", @@ -2094,7 +2188,7 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", - "dev": true, + "devOptional": true, "engines": { "node": ">=0.10.0" } @@ -2130,7 +2224,7 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", - "dev": true, + "devOptional": true, "dependencies": { "is-extglob": "^2.1.1" }, @@ -2163,7 +2257,7 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", - "dev": true, + "devOptional": true, "engines": { "node": ">=0.12.0" } @@ -2596,6 +2690,15 @@ } } }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "devOptional": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", @@ -2833,7 +2936,7 @@ "version": "2.3.1", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true, + "devOptional": true, "engines": { "node": ">=8.6" }, @@ -2946,6 +3049,18 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "dev": true }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "devOptional": true, + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, "node_modules/reflect.getprototypeof": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz", @@ -3104,6 +3219,23 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/sass": { + "version": "1.77.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.0.tgz", + "integrity": "sha512-eGj4HNfXqBWtSnvItNkn7B6icqH14i3CiCGbzMKs3BAPTq62pp9NBYsBgyN4cA+qssqo9r26lW4JSvlaUUWbgw==", + "devOptional": true, + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/scheduler": { "version": "0.23.0", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", @@ -3379,7 +3511,7 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", - "dev": true, + "devOptional": true, "dependencies": { "is-number": "^7.0.0" }, diff --git a/package.json b/package.json index 1ce24924f..c057fc78e 100644 --- a/package.json +++ b/package.json @@ -9,16 +9,17 @@ "lint": "next lint" }, "dependencies": { + "next": "13.5.6", "react": "^18", - "react-dom": "^18", - "next": "13.5.6" + "react-dom": "^18" }, "devDependencies": { - "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "eslint": "^8", - "eslint-config-next": "13.5.6" + "eslint-config-next": "13.5.6", + "sass": "^1.77.0", + "typescript": "^5" } } diff --git a/pages/signup/index.tsx b/pages/signup/index.tsx index 25a739fc7..0aa3168e8 100644 --- a/pages/signup/index.tsx +++ b/pages/signup/index.tsx @@ -1,5 +1,6 @@ import styles from '@/styles/AuthPage.module.css'; import AuthHeader from '@/components/AuthHeader/AuthHeader'; +import SignUpForm from '@/components/SignUpForm/SignUpForm'; export default function SignUp() { return ( @@ -7,6 +8,7 @@ export default function SignUp() {
+
diff --git a/public/assets/images/eye-off.svg b/public/assets/images/eye-off.svg new file mode 100644 index 000000000..80101b8d5 --- /dev/null +++ b/public/assets/images/eye-off.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/images/eye-on.svg b/public/assets/images/eye-on.svg new file mode 100644 index 000000000..f5376825e --- /dev/null +++ b/public/assets/images/eye-on.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/styles/AuthPage.module.css b/styles/AuthPage.module.css index e331031e8..553a9d24e 100644 --- a/styles/AuthPage.module.css +++ b/styles/AuthPage.module.css @@ -13,31 +13,3 @@ align-items: center; gap: 30px; } - -.authPageHeader { - display: flex; - flex-direction: column; - gap: 16px; - align-items: center; -} - -.logo { - position: relative; - width: 218px; - height: 38px; -} - -.membershipPromptBar { - display: flex; - gap: 8px; - font-family: inherit; -} - -.membershipPromptText { - font-family: inherit; -} - -.membershipPromptLink { - text-decoration: underline; - color: var(--Linkbrary-primary-color); -} diff --git a/styles/mixins.scss b/styles/mixins.scss new file mode 100644 index 000000000..15ef3fca9 --- /dev/null +++ b/styles/mixins.scss @@ -0,0 +1,6 @@ +@mixin flex($direction: row, $justify: flex-start, $align: stretch) { + display: flex; + flex-direction: $direction; + justify-content: $justify; + align-items: $align; +} From 9c7af942e8ad751f9fd48c58745e0892b92b9704 Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Thu, 9 May 2024 16:17:56 +0900 Subject: [PATCH 21/56] feat: Add social link bar in sign up page --- components/SocialAuth/SocialAuth.module.scss | 16 +++++++++ components/SocialAuth/SocialAuth.tsx | 38 +++++++++++++++++++- pages/signup/index.tsx | 2 ++ public/assets/images/google.svg | 10 ++++++ public/assets/images/kakao.svg | 12 +++++++ 5 files changed, 77 insertions(+), 1 deletion(-) create mode 100644 public/assets/images/google.svg create mode 100644 public/assets/images/kakao.svg diff --git a/components/SocialAuth/SocialAuth.module.scss b/components/SocialAuth/SocialAuth.module.scss index e69de29bb..bc5a99c60 100644 --- a/components/SocialAuth/SocialAuth.module.scss +++ b/components/SocialAuth/SocialAuth.module.scss @@ -0,0 +1,16 @@ +@use '@/styles/mixins' as m; + +.socialAuthWrapper { + @include m.flex(row, space-between, center); + padding: 12px 24px; + border-radius: 8px; + border: 1px solid #ccd5e3; + background: #e7effb; + width: 100%; + font-size: 14px; +} + +.socialButtonBar { + display: flex; + gap: 16px; +} diff --git a/components/SocialAuth/SocialAuth.tsx b/components/SocialAuth/SocialAuth.tsx index 584fda165..ddc47942c 100644 --- a/components/SocialAuth/SocialAuth.tsx +++ b/components/SocialAuth/SocialAuth.tsx @@ -1,5 +1,41 @@ +import styles from './SocialAuth.module.scss'; +import Image from 'next/image'; +import Link from 'next/link'; + interface SocialAuthProps { text: string; } -export default function SocialAuth({ text }: SocialAuthProps) {} +export default function SocialAuth({ text }: SocialAuthProps) { + return ( +
+ {text} +
+ + google + + + kakao + +
+
+ ); +} diff --git a/pages/signup/index.tsx b/pages/signup/index.tsx index 0aa3168e8..60cd69ab7 100644 --- a/pages/signup/index.tsx +++ b/pages/signup/index.tsx @@ -1,6 +1,7 @@ import styles from '@/styles/AuthPage.module.css'; import AuthHeader from '@/components/AuthHeader/AuthHeader'; import SignUpForm from '@/components/SignUpForm/SignUpForm'; +import SocialAuth from '@/components/SocialAuth/SocialAuth'; export default function SignUp() { return ( @@ -9,6 +10,7 @@ export default function SignUp() {
+
diff --git a/public/assets/images/google.svg b/public/assets/images/google.svg new file mode 100644 index 000000000..b468e8c6e --- /dev/null +++ b/public/assets/images/google.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/assets/images/kakao.svg b/public/assets/images/kakao.svg new file mode 100644 index 000000000..1a155750e --- /dev/null +++ b/public/assets/images/kakao.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + From 0a80ad0d0ee7f47e9821c346e024c866fc9f4641 Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Thu, 9 May 2024 16:21:16 +0900 Subject: [PATCH 22/56] feat: Add routing feature to AuthHeader component --- components/AuthHeader/AuthHeader.tsx | 5 +++-- pages/signup/index.tsx | 6 +++++- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/components/AuthHeader/AuthHeader.tsx b/components/AuthHeader/AuthHeader.tsx index dfbb1e678..8c0245ee3 100644 --- a/components/AuthHeader/AuthHeader.tsx +++ b/components/AuthHeader/AuthHeader.tsx @@ -5,9 +5,10 @@ import styles from './AuthHeader.module.css'; interface AuthHeaderProps { text: string; linkText: string; + link: string; } -export default function AuthHeader({ text, linkText }: AuthHeaderProps) { +export default function AuthHeader({ text, linkText, link }: AuthHeaderProps) { return (
@@ -16,7 +17,7 @@ export default function AuthHeader({ text, linkText }: AuthHeaderProps) {
{text} - + {linkText}
diff --git a/pages/signup/index.tsx b/pages/signup/index.tsx index 60cd69ab7..484bb8a7b 100644 --- a/pages/signup/index.tsx +++ b/pages/signup/index.tsx @@ -8,7 +8,11 @@ export default function SignUp() { <>
- +
From c661db39d5b82c96e16ec7bf99563d5606a63dd7 Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Thu, 9 May 2024 16:24:49 +0900 Subject: [PATCH 23/56] refactor: Change SignUpForm stylesheet to AuthForm --- components/SignUpForm/SignUpForm.tsx | 2 +- .../SignUpForm.module.scss => styles/AuthForm.module.scss | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename components/SignUpForm/SignUpForm.module.scss => styles/AuthForm.module.scss (100%) diff --git a/components/SignUpForm/SignUpForm.tsx b/components/SignUpForm/SignUpForm.tsx index 47cbcc56b..ff5e46166 100644 --- a/components/SignUpForm/SignUpForm.tsx +++ b/components/SignUpForm/SignUpForm.tsx @@ -1,6 +1,6 @@ import AuthInput from '../AuthInput/AuthInput'; import Button from '../Button/Button'; -import styles from './SignUpForm.module.scss'; +import styles from '@/styles/AuthForm.module.scss'; export default function SignUpForm() { return ( diff --git a/components/SignUpForm/SignUpForm.module.scss b/styles/AuthForm.module.scss similarity index 100% rename from components/SignUpForm/SignUpForm.module.scss rename to styles/AuthForm.module.scss From 25948dd4aac484970de7dee73c2ad7cf72fcdd9d Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Thu, 9 May 2024 16:28:33 +0900 Subject: [PATCH 24/56] feat: Create sign in page --- components/Header/Header.tsx | 4 +++- components/SignInForm/SignInForm.tsx | 28 ++++++++++++++++++++++++++++ pages/signin/index.tsx | 22 ++++++++++++++++++++++ 3 files changed, 53 insertions(+), 1 deletion(-) create mode 100644 components/SignInForm/SignInForm.tsx create mode 100644 pages/signin/index.tsx diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx index 94f44dc1c..4e38619c2 100644 --- a/components/Header/Header.tsx +++ b/components/Header/Header.tsx @@ -10,7 +10,9 @@ export default function Header() { Logo - + + +
diff --git a/components/SignInForm/SignInForm.tsx b/components/SignInForm/SignInForm.tsx new file mode 100644 index 000000000..4890b4657 --- /dev/null +++ b/components/SignInForm/SignInForm.tsx @@ -0,0 +1,28 @@ +import { useState } from 'react'; +import AuthInput from '../AuthInput/AuthInput'; +import Button from '../Button/Button'; +import styles from '@/styles/AuthForm.module.scss'; + +export default function SignInForm() { + const [emailValue, setEmailValue] = useState(''); + const [passwordValue, setPasswordValue] = useState(''); + + return ( +
+ + + + + + ); +} diff --git a/pages/signin/index.tsx b/pages/signin/index.tsx new file mode 100644 index 000000000..9b699de13 --- /dev/null +++ b/pages/signin/index.tsx @@ -0,0 +1,22 @@ +import styles from '@/styles/AuthPage.module.css'; +import AuthHeader from '@/components/AuthHeader/AuthHeader'; +import SignInForm from '@/components/SignInForm/SignInForm'; +import SocialAuth from '@/components/SocialAuth/SocialAuth'; + +export default function SignUp() { + return ( + <> +
+
+ + + +
+
+ + ); +} From 572c3a19f493880b1e3ccb3dff8d0ba63ede738d Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Thu, 9 May 2024 17:21:04 +0900 Subject: [PATCH 25/56] feat: Add type prop for Button component --- components/Button/Button.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/components/Button/Button.tsx b/components/Button/Button.tsx index f35cc8dfa..3a0a363fd 100644 --- a/components/Button/Button.tsx +++ b/components/Button/Button.tsx @@ -4,11 +4,21 @@ interface ButtonProps { children?: React.ReactNode; onClick?: () => void; className?: string; + type?: 'button' | 'submit' | 'reset' | undefined; } -const Button = ({ children, onClick, className }: ButtonProps) => { +const Button = ({ + children, + onClick, + className, + type = 'button', +}: ButtonProps) => { return ( - ); From ea1481fec359d69643840300585df60c6828971a Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Sat, 11 May 2024 16:27:18 +0900 Subject: [PATCH 26/56] install libraries.. --- components/AuthInput/AuthInput.tsx | 21 ++++++++++- components/SignInForm/SignInForm.tsx | 36 +++++++++++++++++- components/SignUpForm/SignUpForm.tsx | 41 ++++++++++++++++++-- package-lock.json | 56 +++++++++++++++++++++++++++- package.json | 4 +- utils/validateEmail.ts | 8 ++++ 6 files changed, 157 insertions(+), 9 deletions(-) create mode 100644 utils/validateEmail.ts diff --git a/components/AuthInput/AuthInput.tsx b/components/AuthInput/AuthInput.tsx index 9817feb80..6b6f098e1 100644 --- a/components/AuthInput/AuthInput.tsx +++ b/components/AuthInput/AuthInput.tsx @@ -1,13 +1,17 @@ import { useState } from 'react'; import styles from './AuthInput.module.scss'; import Image from 'next/image'; -import { text } from 'stream/consumers'; interface AuthInputProps { type: string; labelText: string; id: string; enableVisibilityToggle: boolean; + value: string; + onChange: (e: React.ChangeEvent) => void; + onBlur?: () => void; // Add onBlur event handler + error?: string; + hasError:boolean; } export default function AuthInput({ @@ -15,6 +19,10 @@ export default function AuthInput({ labelText, id, enableVisibilityToggle, + value, + onChange, + onBlur, + error, // Add error prop }: AuthInputProps) { const [showText, setShowText] = useState(false); @@ -27,7 +35,14 @@ export default function AuthInput({
- + {enableVisibilityToggle && (
+ {error &&

{error}

}{' '} + {/* Display error message if error exists */}
); } diff --git a/components/SignInForm/SignInForm.tsx b/components/SignInForm/SignInForm.tsx index 4890b4657..0be8650d6 100644 --- a/components/SignInForm/SignInForm.tsx +++ b/components/SignInForm/SignInForm.tsx @@ -2,18 +2,45 @@ import { useState } from 'react'; import AuthInput from '../AuthInput/AuthInput'; import Button from '../Button/Button'; import styles from '@/styles/AuthForm.module.scss'; +import { validateEmail } from '@/utils/validateEmail'; +import { setegid } from 'process'; export default function SignInForm() { const [emailValue, setEmailValue] = useState(''); const [passwordValue, setPasswordValue] = useState(''); + const [emailError, setEmailError] = useState(false); + + const handleEmailChange = (e: React.ChangeEvent) => { + setEmailValue(e.target.value); + }; + + const handlePasswordChange = (e: React.ChangeEvent) => { + setPasswordValue(e.target.value); + }; + + const handleEmailFocusOut = () => { + const isValidEmail = validateEmail(emailValue); + if (!isValidEmail) { + setEmailError(true); + } + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + }; return ( -
+ - + ); } diff --git a/components/SignUpForm/SignUpForm.tsx b/components/SignUpForm/SignUpForm.tsx index ff5e46166..24531d0e2 100644 --- a/components/SignUpForm/SignUpForm.tsx +++ b/components/SignUpForm/SignUpForm.tsx @@ -1,15 +1,42 @@ +import { useState } from 'react'; import AuthInput from '../AuthInput/AuthInput'; import Button from '../Button/Button'; import styles from '@/styles/AuthForm.module.scss'; export default function SignUpForm() { + const [emailValue, setEmailValue] = useState(''); + const [passwordValue, setPasswordValue] = useState(''); + const [passwordCheckValue, setPasswordCheckValue] = useState(''); + + const handleEmailChange = (e: React.ChangeEvent) => { + setEmailValue(e.target.value); + }; + + const handlePasswordChange = (e: React.ChangeEvent) => { + setPasswordValue(e.target.value); + }; + + const handlePasswordCheckChange = ( + e: React.ChangeEvent + ) => { + setPasswordCheckValue(e.target.value); + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + // Validate form fields and perform signup logic here + }; + return ( -
+ - + ); } diff --git a/package-lock.json b/package-lock.json index 96d74508b..48b209313 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,9 @@ "dependencies": { "next": "13.5.6", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "react-hook-form": "^7.51.4", + "yup": "^1.4.0" }, "devDependencies": { "@types/node": "^20", @@ -2991,6 +2993,11 @@ "react-is": "^16.13.1" } }, + "node_modules/property-expr": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz", + "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==" + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", @@ -3043,6 +3050,21 @@ "react": "^18.2.0" } }, + "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", @@ -3507,6 +3529,11 @@ "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==", "dev": true }, + "node_modules/tiny-case": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz", + "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==" + }, "node_modules/to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", @@ -3519,6 +3546,11 @@ "node": ">=8.0" } }, + "node_modules/toposort": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz", + "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==" + }, "node_modules/ts-api-utils": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.0.3.tgz", @@ -3806,6 +3838,28 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/yup": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/yup/-/yup-1.4.0.tgz", + "integrity": "sha512-wPbgkJRCqIf+OHyiTBQoJiP5PFuAXaWiJK6AmYkzQAh5/c2K9hzSApBZG5wV9KoKSePF7sAxmNSvh/13YHkFDg==", + "dependencies": { + "property-expr": "^2.0.5", + "tiny-case": "^1.0.3", + "toposort": "^2.0.2", + "type-fest": "^2.19.0" + } + }, + "node_modules/yup/node_modules/type-fest": { + "version": "2.19.0", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz", + "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==", + "engines": { + "node": ">=12.20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } } } } diff --git a/package.json b/package.json index c057fc78e..04958cb55 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,9 @@ "dependencies": { "next": "13.5.6", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "react-hook-form": "^7.51.4", + "yup": "^1.4.0" }, "devDependencies": { "@types/node": "^20", diff --git a/utils/validateEmail.ts b/utils/validateEmail.ts new file mode 100644 index 000000000..fd4663d50 --- /dev/null +++ b/utils/validateEmail.ts @@ -0,0 +1,8 @@ +export function validateEmail(emailValue: string): boolean { + const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + if (!emailPattern.test(emailValue)) { + return false; + } + + return true; +} From ff659cdb93283b6d04a73613a89e7ba867359163 Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Sat, 11 May 2024 21:44:40 +0900 Subject: [PATCH 27/56] feat: Add disable feature in Button component --- components/Button/Button.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/components/Button/Button.tsx b/components/Button/Button.tsx index 3a0a363fd..a31002be8 100644 --- a/components/Button/Button.tsx +++ b/components/Button/Button.tsx @@ -5,6 +5,7 @@ interface ButtonProps { onClick?: () => void; className?: string; type?: 'button' | 'submit' | 'reset' | undefined; + disabled?: boolean; } const Button = ({ @@ -12,14 +13,16 @@ const Button = ({ onClick, className, type = 'button', + disabled = false, }: ButtonProps) => { return ( ); }; From be585da576308091e7f832fb08060314c361705d Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Sat, 11 May 2024 22:20:58 +0900 Subject: [PATCH 28/56] refactor: Refactor sign in form using react-hook-form --- components/SignInForm/SignInForm.tsx | 112 ++++++++++++++++----------- package-lock.json | 50 ++++-------- package.json | 3 +- styles/AuthForm.module.scss | 49 +++++++++++- 4 files changed, 131 insertions(+), 83 deletions(-) diff --git a/components/SignInForm/SignInForm.tsx b/components/SignInForm/SignInForm.tsx index 0be8650d6..ddbe5e4e7 100644 --- a/components/SignInForm/SignInForm.tsx +++ b/components/SignInForm/SignInForm.tsx @@ -1,58 +1,80 @@ -import { useState } from 'react'; -import AuthInput from '../AuthInput/AuthInput'; import Button from '../Button/Button'; import styles from '@/styles/AuthForm.module.scss'; -import { validateEmail } from '@/utils/validateEmail'; -import { setegid } from 'process'; +import { z } from 'zod'; +import { useForm, SubmitHandler } from 'react-hook-form'; +import { zodResolver } from '@hookform/resolvers/zod'; -export default function SignInForm() { - const [emailValue, setEmailValue] = useState(''); - const [passwordValue, setPasswordValue] = useState(''); - const [emailError, setEmailError] = useState(false); +const schema = z.object({ + email: z + .string() + .min(1, { message: '이메일을 입력해주세요' }) + .email({ message: '올바른 이메일 형식이 아닙니다' }), - const handleEmailChange = (e: React.ChangeEvent) => { - setEmailValue(e.target.value); - }; + password: z + .string() + .min(1, { message: '비밀번호를 입력해주세요' }) + .min(8, { message: '비밀번호는 최소 8자 이상이어야 합니다.' }), +}); - const handlePasswordChange = (e: React.ChangeEvent) => { - setPasswordValue(e.target.value); - }; +type SignInFormFields = z.infer; - const handleEmailFocusOut = () => { - const isValidEmail = validateEmail(emailValue); - if (!isValidEmail) { - setEmailError(true); - } - }; +export default function SignInForm() { + const { + register, + handleSubmit, + formState: { errors, isSubmitting }, + } = useForm({ + resolver: zodResolver(schema), + }); - const handleSubmit = (e: React.FormEvent) => { - e.preventDefault(); + const onSubmit: SubmitHandler = async (data) => { + await new Promise((resolve) => setTimeout(resolve, 1000)); + console.log(data); }; return ( -
- - - - diff --git a/package-lock.json b/package-lock.json index 48b209313..7291ba208 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,11 +8,12 @@ "name": "fe-weekly-mission", "version": "0.1.0", "dependencies": { + "@hookform/resolvers": "^3.3.4", "next": "13.5.6", "react": "^18", "react-dom": "^18", "react-hook-form": "^7.51.4", - "yup": "^1.4.0" + "zod": "^3.23.8" }, "devDependencies": { "@types/node": "^20", @@ -101,6 +102,14 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@hookform/resolvers": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.3.4.tgz", + "integrity": "sha512-o5cgpGOuJYrd+iMKvkttOclgwRW86EsWJZZRC23prf0uU2i48Htq4PuT73AVb9ionFyZrwYEITuOFGF+BydEtQ==", + "peerDependencies": { + "react-hook-form": "^7.0.0" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.13", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz", @@ -2993,11 +3002,6 @@ "react-is": "^16.13.1" } }, - "node_modules/property-expr": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz", - "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==" - }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", @@ -3529,11 +3533,6 @@ "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==", "dev": true }, - "node_modules/tiny-case": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz", - "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==" - }, "node_modules/to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", @@ -3546,11 +3545,6 @@ "node": ">=8.0" } }, - "node_modules/toposort": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz", - "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==" - }, "node_modules/ts-api-utils": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.0.3.tgz", @@ -3839,26 +3833,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/yup": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/yup/-/yup-1.4.0.tgz", - "integrity": "sha512-wPbgkJRCqIf+OHyiTBQoJiP5PFuAXaWiJK6AmYkzQAh5/c2K9hzSApBZG5wV9KoKSePF7sAxmNSvh/13YHkFDg==", - "dependencies": { - "property-expr": "^2.0.5", - "tiny-case": "^1.0.3", - "toposort": "^2.0.2", - "type-fest": "^2.19.0" - } - }, - "node_modules/yup/node_modules/type-fest": { - "version": "2.19.0", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz", - "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==", - "engines": { - "node": ">=12.20" - }, + "node_modules/zod": { + "version": "3.23.8", + "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz", + "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==", "funding": { - "url": "https://github.com/sponsors/sindresorhus" + "url": "https://github.com/sponsors/colinhacks" } } } diff --git a/package.json b/package.json index 04958cb55..8ce47dbb0 100644 --- a/package.json +++ b/package.json @@ -9,11 +9,12 @@ "lint": "next lint" }, "dependencies": { + "@hookform/resolvers": "^3.3.4", "next": "13.5.6", "react": "^18", "react-dom": "^18", "react-hook-form": "^7.51.4", - "yup": "^1.4.0" + "zod": "^3.23.8" }, "devDependencies": { "@types/node": "^20", diff --git a/styles/AuthForm.module.scss b/styles/AuthForm.module.scss index 2e411c91c..d859f2da9 100644 --- a/styles/AuthForm.module.scss +++ b/styles/AuthForm.module.scss @@ -1,7 +1,7 @@ -@use '@/styles/mixins' as a; +@use '@/styles/mixins' as m; .authForm { - @include a.flex(column); + @include m.flex(column); gap: 24px; } @@ -9,3 +9,48 @@ padding: 16px 20px; margin-top: 20px; } + +.inputBox { + @include m.flex(column); + position: relative; + gap: 12px; +} + +.inputWrapper { + display: flex; + justify-content: space-between; + border: 1px solid #ccd5e3; + padding: 18px 15px; + border-radius: 8px; + background-color: #fff; + width: 370px; +} + +.inputWrapper:focus-within { + border: 1px solid var(--Linkbrary-primary-color); +} + +.authInput { + width: 100%; + border: none; /* Remove border from authInput to avoid double border */ +} + +.toggleButton { + position: relative; + width: 16px; + height: 16px; + + &:hover { + filter: brightness(0); + } +} + +.errorMessage { + position: absolute; + bottom: -25px; + color: red; +} + +.errorInput { + border: 1px solid red; +} From 7adf8d7993ed545fca87b39c74f58180f3fff579 Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Sat, 11 May 2024 22:45:09 +0900 Subject: [PATCH 29/56] refactor: Use react-hook-form to handle sign up form --- components/SignUpForm/SignUpForm.tsx | 148 +++++++++++++++++---------- 1 file changed, 95 insertions(+), 53 deletions(-) diff --git a/components/SignUpForm/SignUpForm.tsx b/components/SignUpForm/SignUpForm.tsx index 24531d0e2..2cbe041d1 100644 --- a/components/SignUpForm/SignUpForm.tsx +++ b/components/SignUpForm/SignUpForm.tsx @@ -1,66 +1,108 @@ -import { useState } from 'react'; -import AuthInput from '../AuthInput/AuthInput'; import Button from '../Button/Button'; import styles from '@/styles/AuthForm.module.scss'; +import { z } from 'zod'; +import { useForm, SubmitHandler } from 'react-hook-form'; +import { zodResolver } from '@hookform/resolvers/zod'; -export default function SignUpForm() { - const [emailValue, setEmailValue] = useState(''); - const [passwordValue, setPasswordValue] = useState(''); - const [passwordCheckValue, setPasswordCheckValue] = useState(''); +const schema = z + .object({ + email: z + .string() + .min(1, { message: '이메일을 입력해주세요' }) + .email({ message: '올바른 이메일 형식이 아닙니다' }), - const handleEmailChange = (e: React.ChangeEvent) => { - setEmailValue(e.target.value); - }; + password: z + .string() + .min(1, { message: '비밀번호를 입력해주세요' }) + .min(8, { message: '비밀번호는 최소 8자 이상이어야 합니다.' }), - const handlePasswordChange = (e: React.ChangeEvent) => { - setPasswordValue(e.target.value); - }; + confirmPassword: z.string().min(1, { message: '비밀번호를 확인해주세요' }), + }) + .refine((data) => data.confirmPassword === data.password, { + message: '비밀번호가 일치하지 않습니다.', + path: ['confirmPassword'], + }); - const handlePasswordCheckChange = ( - e: React.ChangeEvent - ) => { - setPasswordCheckValue(e.target.value); - }; +type SignUpFormFields = z.infer; - const handleSubmit = (e: React.FormEvent) => { - e.preventDefault(); - // Validate form fields and perform signup logic here +export default function SignUpForm() { + const { + register, + handleSubmit, + formState: { errors, isSubmitting }, + } = useForm({ + resolver: zodResolver(schema), + }); + + const onSubmit: SubmitHandler = async (data) => { + await new Promise((resolve) => setTimeout(resolve, 1000)); + console.log(data); }; return ( -
- - - - - - - ); From bb1eb9503b31d0909f37a4a825b36758befea8a8 Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Mon, 13 May 2024 11:22:36 +0900 Subject: [PATCH 30/56] chore: Remove AuthInput component --- components/AuthInput/AuthInput.module.scss | 35 ----------- components/AuthInput/AuthInput.tsx | 72 ---------------------- 2 files changed, 107 deletions(-) delete mode 100644 components/AuthInput/AuthInput.module.scss delete mode 100644 components/AuthInput/AuthInput.tsx diff --git a/components/AuthInput/AuthInput.module.scss b/components/AuthInput/AuthInput.module.scss deleted file mode 100644 index 2e9278d3d..000000000 --- a/components/AuthInput/AuthInput.module.scss +++ /dev/null @@ -1,35 +0,0 @@ -@use '@/styles/mixins.scss' as m; - -.inputBox { - @include m.flex(column); - gap: 12px; -} - -.inputWrapper { - display: flex; - justify-content: space-between; - border: 1px solid #ccd5e3; - padding: 18px 15px; - border-radius: 8px; - background-color: #fff; - width: 370px; -} - -.inputWrapper:focus-within { - border: 1px solid var(--Linkbrary-primary-color); -} - -.authInput { - width: 100%; - border: none; /* Remove border from authInput to avoid double border */ -} - -.toggleButton { - position: relative; - width: 16px; - height: 16px; - - &:hover { - filter: brightness(0); - } -} diff --git a/components/AuthInput/AuthInput.tsx b/components/AuthInput/AuthInput.tsx deleted file mode 100644 index 6b6f098e1..000000000 --- a/components/AuthInput/AuthInput.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { useState } from 'react'; -import styles from './AuthInput.module.scss'; -import Image from 'next/image'; - -interface AuthInputProps { - type: string; - labelText: string; - id: string; - enableVisibilityToggle: boolean; - value: string; - onChange: (e: React.ChangeEvent) => void; - onBlur?: () => void; // Add onBlur event handler - error?: string; - hasError:boolean; -} - -export default function AuthInput({ - type, - labelText, - id, - enableVisibilityToggle, - value, - onChange, - onBlur, - error, // Add error prop -}: AuthInputProps) { - const [showText, setShowText] = useState(false); - - const handleToggleClick = () => { - setShowText(!showText); - }; - - const inputType = showText ? 'text' : type; - return ( -
- -
- - {enableVisibilityToggle && ( - - )} -
- {error &&

{error}

}{' '} - {/* Display error message if error exists */} -
- ); -} From 318d23e3df0a638acc4a0b0e8826b97f8097ca5b Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Mon, 13 May 2024 11:34:39 +0900 Subject: [PATCH 31/56] intall axios --- package-lock.json | 91 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + 2 files changed, 92 insertions(+) diff --git a/package-lock.json b/package-lock.json index 7291ba208..9d6193a23 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.1.0", "dependencies": { "@hookform/resolvers": "^3.3.4", + "axios": "^1.6.8", "next": "13.5.6", "react": "^18", "react-dom": "^18", @@ -730,6 +731,11 @@ "has-symbols": "^1.0.3" } }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" + }, "node_modules/available-typed-arrays": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz", @@ -751,6 +757,16 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "1.6.8", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz", + "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/axobject-query": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz", @@ -928,6 +944,17 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -1014,6 +1041,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/dequal": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", @@ -1718,6 +1753,25 @@ "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==", "dev": true }, + "node_modules/follow-redirects": { + "version": "1.15.6", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", + "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, "node_modules/for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -1727,6 +1781,19 @@ "is-callable": "^1.1.3" } }, + "node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -2606,6 +2673,25 @@ "node": ">=8.6" } }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", @@ -3002,6 +3088,11 @@ "react-is": "^16.13.1" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", diff --git a/package.json b/package.json index 8ce47dbb0..9d1d65076 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "@hookform/resolvers": "^3.3.4", + "axios": "^1.6.8", "next": "13.5.6", "react": "^18", "react-dom": "^18", From ae1190f57ec5595f987528bcf2cdc5c06cdb71b9 Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Mon, 13 May 2024 11:39:01 +0900 Subject: [PATCH 32/56] feat: Create axios instance --- utils/axiosInstance.ts | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 utils/axiosInstance.ts diff --git a/utils/axiosInstance.ts b/utils/axiosInstance.ts new file mode 100644 index 000000000..cafeaac99 --- /dev/null +++ b/utils/axiosInstance.ts @@ -0,0 +1,5 @@ +import axios from 'axios'; + +export const axiosInstance = axios.create({ + baseURL: 'https://bootcamp-api.codeit.kr/api/', +}); From ebec153d7717db72f7814a0012b3011b597fa0e5 Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Mon, 13 May 2024 13:58:32 +0900 Subject: [PATCH 33/56] feat: Create ShowTextToggle component --- components/ShowTextToggle/ShowTextToggle.tsx | 24 ++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 components/ShowTextToggle/ShowTextToggle.tsx diff --git a/components/ShowTextToggle/ShowTextToggle.tsx b/components/ShowTextToggle/ShowTextToggle.tsx new file mode 100644 index 000000000..8e66446f2 --- /dev/null +++ b/components/ShowTextToggle/ShowTextToggle.tsx @@ -0,0 +1,24 @@ +import Image from 'next/image'; + +interface ShowTextToggleProps { + showText: boolean; + onClick: () => void; +} + +export default function ShowTextToggle({ + showText, + onClick, +}: ShowTextToggleProps) { + return ( + + ); +} From 92f5aeaff219a3f6f3c4497d91a86309dd3dd36a Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Mon, 13 May 2024 13:59:02 +0900 Subject: [PATCH 34/56] feat: Add toggle button and error trigger to sign up page --- components/SignUpForm/SignUpForm.tsx | 36 ++++++++++++++++++++++++---- 1 file changed, 32 insertions(+), 4 deletions(-) diff --git a/components/SignUpForm/SignUpForm.tsx b/components/SignUpForm/SignUpForm.tsx index 2cbe041d1..ae1116b1e 100644 --- a/components/SignUpForm/SignUpForm.tsx +++ b/components/SignUpForm/SignUpForm.tsx @@ -3,6 +3,8 @@ import styles from '@/styles/AuthForm.module.scss'; import { z } from 'zod'; import { useForm, SubmitHandler } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; +import { useState } from 'react'; +import ShowTextToggle from '../ShowTextToggle/ShowTextToggle'; const schema = z .object({ @@ -14,9 +16,14 @@ const schema = z password: z .string() .min(1, { message: '비밀번호를 입력해주세요' }) - .min(8, { message: '비밀번호는 최소 8자 이상이어야 합니다.' }), + .min(8, { + message: '비밀번호는 최소 8자 이상 영문, 숫자 조합이어야 합니다.', + }) + .regex(/^(?=.*[A-Za-z])(?=.*\d).{8,}$/, { + message: '비밀번호는 영문과 조합이어야 합니다', + }), - confirmPassword: z.string().min(1, { message: '비밀번호를 확인해주세요' }), + confirmPassword: z.string().min(1, { message: '비밀번호를 입력해주세요' }), }) .refine((data) => data.confirmPassword === data.password, { message: '비밀번호가 일치하지 않습니다.', @@ -30,15 +37,27 @@ export default function SignUpForm() { register, handleSubmit, formState: { errors, isSubmitting }, + trigger, } = useForm({ resolver: zodResolver(schema), }); + const [showPassword, setShowPassword] = useState(false); + const [showCPW, setShowCPW] = useState(false); + const onSubmit: SubmitHandler = async (data) => { await new Promise((resolve) => setTimeout(resolve, 1000)); console.log(data); }; + const handlePWToggleClick = () => { + setShowPassword(!showPassword); + }; + + const handleCPWToggleClick = () => { + setShowCPW(!showCPW); + }; + return (
@@ -53,6 +72,7 @@ export default function SignUpForm() { type='text' placeholder='Email' className={styles.authInput} + onBlur={() => trigger('email')} />
{errors.email && ( @@ -68,9 +88,15 @@ export default function SignUpForm() { > trigger('password')} + /> + + {errors.password && ( @@ -86,10 +112,12 @@ export default function SignUpForm() { > trigger('confirmPassword')} /> + {errors.confirmPassword && (
From c55266b9ab680463f2b44e02483f27d9cc9c5e1f Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Mon, 13 May 2024 14:01:25 +0900 Subject: [PATCH 35/56] feat: Add password toggle feature to sign in page --- components/SignInForm/SignInForm.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/components/SignInForm/SignInForm.tsx b/components/SignInForm/SignInForm.tsx index ddbe5e4e7..ba35bfbe4 100644 --- a/components/SignInForm/SignInForm.tsx +++ b/components/SignInForm/SignInForm.tsx @@ -3,6 +3,8 @@ import styles from '@/styles/AuthForm.module.scss'; import { z } from 'zod'; import { useForm, SubmitHandler } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; +import { useState } from 'react'; +import ShowTextToggle from '../ShowTextToggle/ShowTextToggle'; const schema = z.object({ email: z @@ -27,6 +29,12 @@ export default function SignInForm() { resolver: zodResolver(schema), }); + const [showPassword, setShowPassword] = useState(false); + + const handleToggleClick = () => { + setShowPassword(!showPassword); + }; + const onSubmit: SubmitHandler = async (data) => { await new Promise((resolve) => setTimeout(resolve, 1000)); console.log(data); @@ -61,10 +69,11 @@ export default function SignInForm() { > +
{errors.password && (
{errors.password.message}
From a21a6b4b852f69cae5132be91cd5feb6bfddd3cd Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Mon, 13 May 2024 14:03:08 +0900 Subject: [PATCH 36/56] feat: Trigger validation at onBlur --- components/SignInForm/SignInForm.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/components/SignInForm/SignInForm.tsx b/components/SignInForm/SignInForm.tsx index ba35bfbe4..1d494784e 100644 --- a/components/SignInForm/SignInForm.tsx +++ b/components/SignInForm/SignInForm.tsx @@ -25,6 +25,7 @@ export default function SignInForm() { register, handleSubmit, formState: { errors, isSubmitting }, + trigger, } = useForm({ resolver: zodResolver(schema), }); @@ -54,6 +55,7 @@ export default function SignInForm() { type='text' placeholder='Email' className={styles.authInput} + onBlur={() => trigger('email')} /> {errors.email && ( @@ -72,6 +74,7 @@ export default function SignInForm() { type={showPassword ? 'text' : 'password'} placeholder='Password' className={styles.authInput} + onBlur={() => trigger('password')} /> From 006447ccc79981eb2d78059ade3350a13c139816 Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Mon, 13 May 2024 14:13:10 +0900 Subject: [PATCH 37/56] chore: Change button type to 'button' --- components/ShowTextToggle/ShowTextToggle.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/components/ShowTextToggle/ShowTextToggle.tsx b/components/ShowTextToggle/ShowTextToggle.tsx index 8e66446f2..ec3192b69 100644 --- a/components/ShowTextToggle/ShowTextToggle.tsx +++ b/components/ShowTextToggle/ShowTextToggle.tsx @@ -11,6 +11,7 @@ export default function ShowTextToggle({ }: ShowTextToggleProps) { return ( - + + {userInfo ? ( + + ) : ( + + + + )}
diff --git a/components/SignInForm/SignInForm.tsx b/components/SignInForm/SignInForm.tsx index be739c2a0..4ea7a2471 100644 --- a/components/SignInForm/SignInForm.tsx +++ b/components/SignInForm/SignInForm.tsx @@ -44,6 +44,8 @@ export default function SignInForm() { try { const response = await axiosInstance.post('/sign-in', data); if (response.status >= 200 && response.status < 300) { + const accessToken = response.data.data.accessToken; + localStorage.setItem('accessToken', accessToken); router.push('/folder'); } else { } diff --git a/pages/folder/index.tsx b/pages/folder/index.tsx new file mode 100644 index 000000000..5dc1de770 --- /dev/null +++ b/pages/folder/index.tsx @@ -0,0 +1,22 @@ +import { useUserInfo } from '@/contexts/UserInfoContext'; +import { axiosInstance } from '@/utils/axiosInstance'; +import { useEffect, useContext } from 'react'; + +export default function Folder() { + const { userInfo, setUserInfo } = useUserInfo(); + const loadUser = async () => { + const accessToken = localStorage.getItem('accessToken'); + const response = await axiosInstance.get('/users', { + headers: { + Authorization: `Bearer ${accessToken}`, + }, + }); + setUserInfo(response.data.data[0]); + }; + + useEffect(() => { + loadUser(); + }, []); + + return
FolderPage
; +} From 24f16bbed0f94318ac7b1ca21d301eecfc8f3aa3 Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Mon, 13 May 2024 19:05:24 +0900 Subject: [PATCH 44/56] feat: Create folder page --- pages/folder/index.tsx | 32 +++++++++++++++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) diff --git a/pages/folder/index.tsx b/pages/folder/index.tsx index 5dc1de770..f3d16e78b 100644 --- a/pages/folder/index.tsx +++ b/pages/folder/index.tsx @@ -1,11 +1,19 @@ import { useUserInfo } from '@/contexts/UserInfoContext'; import { axiosInstance } from '@/utils/axiosInstance'; -import { useEffect, useContext } from 'react'; +import { useRouter } from 'next/router'; +import { useEffect, useState } from 'react'; export default function Folder() { const { userInfo, setUserInfo } = useUserInfo(); + const [folders, setFolders] = useState(); + const [links, setLinks] = useState(); + const router = useRouter(); + const loadUser = async () => { const accessToken = localStorage.getItem('accessToken'); + if (!accessToken) { + router.push('/signin'); + } const response = await axiosInstance.get('/users', { headers: { Authorization: `Bearer ${accessToken}`, @@ -14,9 +22,31 @@ export default function Folder() { setUserInfo(response.data.data[0]); }; + const getUserFolders = async () => { + if (userInfo) { + const response = await axiosInstance.get(`/users/${userInfo.id}/folders`); + setFolders(response.data.data); + } + }; + + const getUserLinks = async (folderId?: number) => { + if (userInfo) { + const folderEndPoint = folderId ? `?folderId=${folderId}` : ''; + const response = await axiosInstance.get( + `/users/${userInfo.id}/links${folderEndPoint}` + ); + setLinks(response.data.data); + } + }; + useEffect(() => { loadUser(); }, []); + useEffect(() => { + getUserFolders(); + getUserLinks(); + }, [userInfo]); + return
FolderPage
; } From 4e99ba4d4ae57f721e13eda035766f84d849b2fe Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Mon, 13 May 2024 19:24:52 +0900 Subject: [PATCH 45/56] feat: Add sign up api feature to sign up page --- components/SignUpForm/SignUpForm.tsx | 30 +++++++++++++++++++++++++--- 1 file changed, 27 insertions(+), 3 deletions(-) diff --git a/components/SignUpForm/SignUpForm.tsx b/components/SignUpForm/SignUpForm.tsx index ae1116b1e..107c7e9e0 100644 --- a/components/SignUpForm/SignUpForm.tsx +++ b/components/SignUpForm/SignUpForm.tsx @@ -5,6 +5,8 @@ import { useForm, SubmitHandler } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; import { useState } from 'react'; import ShowTextToggle from '../ShowTextToggle/ShowTextToggle'; +import { axiosInstance } from '@/utils/axiosInstance'; +import { useRouter } from 'next/router'; const schema = z .object({ @@ -38,18 +40,40 @@ export default function SignUpForm() { handleSubmit, formState: { errors, isSubmitting }, trigger, + setError, } = useForm({ resolver: zodResolver(schema), }); + const router = useRouter(); const [showPassword, setShowPassword] = useState(false); const [showCPW, setShowCPW] = useState(false); const onSubmit: SubmitHandler = async (data) => { - await new Promise((resolve) => setTimeout(resolve, 1000)); - console.log(data); - }; + const { email, password } = data; + try { + const response = await axiosInstance.post('/check-email', { + email: email, + }); + } catch (error) { + setError('email', { message: '이미 사용중인 이메일입니다' }); + return; + } + try { + const response = await axiosInstance.post('/sign-up', { + email, + password, + }); + if (response.status >= 200 && response.status < 300) { + const accessToken = response.data.data.accessToken; + localStorage.setItem('accessToken', accessToken); + router.push('/folder'); + } + } catch (error) { + setError('email', { message: '사용할 수 없는 이메일 입니다' }); + } + }; const handlePWToggleClick = () => { setShowPassword(!showPassword); }; From facb247501021264ce62d0b23676f457fb6ae2ea Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Mon, 13 May 2024 20:26:31 +0900 Subject: [PATCH 46/56] feat: Add routing to folder page when userInfo exists --- pages/index.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/pages/index.tsx b/pages/index.tsx index e71579f85..a16191d03 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -4,14 +4,15 @@ import styles from '@/styles/Home.module.css'; import Button from '@/components/Button/Button'; import Image from 'next/image'; import { useRouter } from 'next/router'; +import { useUserInfo } from '@/contexts/UserInfoContext'; const inter = Inter({ subsets: ['latin'] }); export default function Home() { const router = useRouter(); // Access the router object - + const { userInfo } = useUserInfo(); const handleAddLinkClick = () => { - router.push('/signup'); // Navigate to /signup route when button is clicked + userInfo ? router.push('/folder') : router.push('/signup'); // Navigate to /signup route when button is clicked }; return ( From 12e3cb58a2fcfef955dc549973471041281e807f Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Thu, 16 May 2024 15:17:49 +0900 Subject: [PATCH 47/56] feat: Add temporary loading feature for header(needs to be fixed) --- components/Header/Header.tsx | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx index f1b7f0bfe..b49a02241 100644 --- a/components/Header/Header.tsx +++ b/components/Header/Header.tsx @@ -4,8 +4,25 @@ import styles from './Header.module.css'; import Link from 'next/link'; import Account from '@/components/Account/Account'; import { useUserInfo } from '@/contexts/UserInfoContext'; +import { axiosInstance } from '@/utils/axiosInstance'; +import { useEffect } from 'react'; export default function Header() { - const { userInfo } = useUserInfo(); + const { userInfo, setUserInfo } = useUserInfo(); + const loadUser = async () => { + const accessToken = localStorage.getItem('accessToken'); + if (accessToken) { + const response = await axiosInstance.get('/users', { + headers: { + Authorization: `Bearer ${accessToken}`, + }, + }); + setUserInfo(response.data.data[0]); + } + }; + + useEffect(() => { + loadUser(); + }, []); return ( <>
From 84fe27dafd52e680a51ce12ea46b0fed007903a0 Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Thu, 16 May 2024 16:44:11 +0900 Subject: [PATCH 48/56] feat: Add SearchBar Component --- components/SearchBar/SearchBar.module.scss | 37 ++++++++++++++ components/SearchBar/SearchBar.tsx | 53 +++++++++++++++++++++ public/assets/images/delete_text.png | Bin 0 -> 649 bytes public/assets/images/search_icon.svg | 4 ++ 4 files changed, 94 insertions(+) create mode 100644 components/SearchBar/SearchBar.module.scss create mode 100644 components/SearchBar/SearchBar.tsx create mode 100644 public/assets/images/delete_text.png create mode 100644 public/assets/images/search_icon.svg diff --git a/components/SearchBar/SearchBar.module.scss b/components/SearchBar/SearchBar.module.scss new file mode 100644 index 000000000..52f4c6d57 --- /dev/null +++ b/components/SearchBar/SearchBar.module.scss @@ -0,0 +1,37 @@ +.searchInput { + background-color: #f5f5f5; + border: none; + color: #666; + line-height: 1.5em; + flex-grow: 1; +} + +.searchBar { + background-color: #f5f5f5; + width: 1060px; + display: flex; + gap: 10px; + padding: 16px; + align-items: center; + border-radius: 10px; + + @media (max-width: 1124px) { + width: 706px; + } + + @media (max-width: 767px) { + width: 325px; + } +} + +.searchButton { + position: relative; + background-color: transparent; + padding: 0; + width: 16px; + height: 16px; + + &:hover { + cursor: pointer; + } +} diff --git a/components/SearchBar/SearchBar.tsx b/components/SearchBar/SearchBar.tsx new file mode 100644 index 000000000..1d0b87ca9 --- /dev/null +++ b/components/SearchBar/SearchBar.tsx @@ -0,0 +1,53 @@ +import styles from './SearchBar.module.scss'; // Import the CSS module +import searchIcon from '@/public/assets/images/search_icon.svg'; +import { ChangeEvent } from 'react'; +import deleteTextIcon from '@/public/assets/images/delete_text.png'; +import Image from 'next/image'; + +export const SEARCH_INPUT_ID = 'search-link'; +const SEARCH_INPUT_PLACEHOLDER = '링크를 검색하세요'; +const SEARCH_INPUT_ICON_ALT = 'Search Icon'; + +interface SearchBarProps { + onChange: (keyword: string) => void; + searchText: string; +} + +const SearchBar = ({ onChange, searchText }: SearchBarProps) => { + const handleChange = (e: ChangeEvent) => { + e.preventDefault(); + onChange(e.target.value); + }; + + const handleSearchDelete = () => { + onChange(''); + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + }; + + return ( + + + + {searchText !== '' && ( + + )} + + ); +}; + +export default SearchBar; diff --git a/public/assets/images/delete_text.png b/public/assets/images/delete_text.png new file mode 100644 index 0000000000000000000000000000000000000000..20dace74dbdf7770fdbc354a1b91f681f949b1c5 GIT binary patch literal 649 zcmV;40(Sk0P)H)xLlCumu*fXYZkpu!?X zVSxk^-eOPYF>jPaj$=Cp{M$I08Gql*doyp0P(lz48v2RcB!Vvh=mU{&I|w2Wa7bG3 zs6=nCx0+#*2Ie*H1q0t*l0U%;F9rdB#c|ThGZNW`gX7_*>&l?2I72|+T~7x4$LF1S z^AvwihFhee3y%N=bXQki_T~(D=4L8=r~yL#W9{9m{?x$6oWp|9fO?3MShYAOHV3Zf zZq+ExH0&lZpq;%Z2YI7DzJ6h!r{Oi+CTgZ{$(8WNe`bIGJG;zvabopUNLOq?Aqd`B zhy}Cao^8Xzx0MtffkJ#O8t^~7f;bt?n54zIkH-{F&k>*T;AnVL7Jn9c>pwS7#|Wxv z+eAFhgl=~IXp+1jxh#-gNmX&i96(<{1#mn({VGB=i~)va1F|vC=41hp2@!==#W^f_ zi7$lUP|!&47WHSvIp*1%OwK~SzTOd1>5}?`xd~01l%4}eZ`)o|=zia)JXeA5h}HMY zZM%ySRBd}p)khSI#FlJpu)fj^&Bp6NO%P#^HKzv5+K1)7xojS7!WyhK`9GJT{iBNx z0zIUBM?CYic&-7ncQWvuk<%53-=GQve-cNvCt+D=kT#Mdv4LPJF2X0%G+vcC{Y0Vp joY|F1^;@lG;Rd+_BCHE6T5V1M00000NkvXXu0mjf6G0Zt literal 0 HcmV?d00001 diff --git a/public/assets/images/search_icon.svg b/public/assets/images/search_icon.svg new file mode 100644 index 000000000..56d5872b2 --- /dev/null +++ b/public/assets/images/search_icon.svg @@ -0,0 +1,4 @@ + + + + From 43417d334fa6fba026b430390c5e92f400f0aa58 Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Thu, 16 May 2024 17:07:31 +0900 Subject: [PATCH 49/56] feat: Add FolderToolBar Component --- .../FolderToolBar/FolderToolBar.module.scss | 116 ++++++++++++++++++ components/FolderToolBar/FolderToolBar.tsx | 87 +++++++++++++ .../FolderToolBar/FolderToolBarButton.tsx | 29 +++++ components/FolderToolBar/UtilButton.tsx | 25 ++++ components/FolderToolBar/constants.ts | 37 ++++++ public/assets/images/add_icon.svg | 5 + public/assets/images/add_icon_white.svg | 5 + public/assets/images/delete_icon.svg | 10 ++ public/assets/images/pen_icon.svg | 7 ++ public/assets/images/share_icon.svg | 11 ++ 10 files changed, 332 insertions(+) create mode 100644 components/FolderToolBar/FolderToolBar.module.scss create mode 100644 components/FolderToolBar/FolderToolBar.tsx create mode 100644 components/FolderToolBar/FolderToolBarButton.tsx create mode 100644 components/FolderToolBar/UtilButton.tsx create mode 100644 components/FolderToolBar/constants.ts create mode 100644 public/assets/images/add_icon.svg create mode 100644 public/assets/images/add_icon_white.svg create mode 100644 public/assets/images/delete_icon.svg create mode 100644 public/assets/images/pen_icon.svg create mode 100644 public/assets/images/share_icon.svg diff --git a/components/FolderToolBar/FolderToolBar.module.scss b/components/FolderToolBar/FolderToolBar.module.scss new file mode 100644 index 000000000..3a761f4c3 --- /dev/null +++ b/components/FolderToolBar/FolderToolBar.module.scss @@ -0,0 +1,116 @@ +.folderToolBarContainer { + display: flex; + flex-direction: column; + gap: 24px; + width: 1060px; + + .folderToolButtons { + display: flex; + width: 100%; + justify-content: space-between; + align-items: center; + + .folderNameButtons { + display: flex; + flex-wrap: wrap; + width: 80%; + gap: 8px; + } + } + + .folderNameDisplay { + font-size: 24px; + letter-spacing: -0.2px; + font-weight: 600; + } + + .folderNameBar { + display: flex; + justify-content: space-between; + align-items: center; + + .utilButtons { + display: flex; + gap: 12px; + } + } + + @media (max-width: 1124px) { + width: 706px; + } + + @media (max-width: 767px) { + width: 325px; + + .folderNameBar { + flex-direction: column; + align-items: flex-start; + gap: 12px; + } + } +} + +.folderNameButton { + background-color: #fff; + border: 1px solid #6d6afe; + padding: 8px 12px; + border-radius: 5px; + height: 36px; + + &:hover { + background-color: #e7effb; + } +} + +.focusedButton { + background-color: #6d6afe; + color: #fff; + &:hover { + background-color: #6d6afe; + } +} + +.utilButton { + position: relative; + display: flex; + gap: 4px; + color: #9fa6b2; + font-size: 14px; + font-weight: 600; +} +.utilButtonIcon { + position: relative; + width: 18px; + height: 18px; +} + +.folderAddButton { + display: flex; + font-weight: 500; + gap: 4px; + color: #6d6afe; + + .addIconWhite { + display: none; + } + + @media (max-width: 767px) { + position: fixed; + bottom: 101px; + padding: 8px 24px; + left: 50%; + transform: translateX(-50%); + border-radius: 20px; + background-color: #6d6afe; + color: #fff; + z-index: 1; + + .addIcon { + display: none; + } + + .addIconWhite { + display: block; + } + } +} diff --git a/components/FolderToolBar/FolderToolBar.tsx b/components/FolderToolBar/FolderToolBar.tsx new file mode 100644 index 000000000..1eb03295d --- /dev/null +++ b/components/FolderToolBar/FolderToolBar.tsx @@ -0,0 +1,87 @@ +import FolderToolBarButton from './FolderToolBarButton'; +import styles from './FolderToolBar.module.scss'; +import UtilButton from './UtilButton'; +import { UTIL_BUTTONS_PROPS } from './constants'; +import { FolderObj } from '@/utils/interfaces'; + +const addIcon = '/assets/images/add_icon.svg'; +const addIconWhite = '/assets/images/add_icon_white.svg'; +interface FolderToolBarProps { + folders?: FolderObj[]; + currentFolderId?: number; + folderNameOnClick: (id: number) => void; + onFolderNameChangeClick: () => void; + onFolderAddClick: () => void; + onFolderDeleteClick: () => void; + onShare: () => void; +} + +export default function FolderToolBar({ + folders, + currentFolderId, + folderNameOnClick, + onFolderAddClick, + onFolderNameChangeClick, + onFolderDeleteClick, + onShare, +}: FolderToolBarProps) { + const currentFolder = folders?.find( + (folder) => folder.id === currentFolderId + ); + const currentFolderName = currentFolder?.name; + UTIL_BUTTONS_PROPS.share.onClick = onShare; + UTIL_BUTTONS_PROPS.changeName.onClick = onFolderNameChangeClick; + UTIL_BUTTONS_PROPS.delete.onClick = onFolderDeleteClick; + + return ( +
+
+
    + {folders?.map((item) => ( +
  • + + {item.name} + +
    • + ))} +
+ + +
+
+ {currentFolderName} +
    + {Object.entries(UTIL_BUTTONS_PROPS).map(([key, btn]) => ( +
  • + {currentFolderId !== -1 && ( + + {btn.btnText} + + )} +
    • + ))} +
+
+
+ ); +} diff --git a/components/FolderToolBar/FolderToolBarButton.tsx b/components/FolderToolBar/FolderToolBarButton.tsx new file mode 100644 index 000000000..72143b78f --- /dev/null +++ b/components/FolderToolBar/FolderToolBarButton.tsx @@ -0,0 +1,29 @@ +import styles from './FolderToolBar.module.scss'; + +interface FolderToolBarButtonProps { + id: number; + children: React.ReactNode; + onClick: (id: number) => void; + isFocused: boolean; +} + +export default function FolderToolBarButton({ + id, + children, + onClick, + isFocused, +}: FolderToolBarButtonProps) { + const handleClick = () => { + onClick(id); + }; + return ( + + ); +} diff --git a/components/FolderToolBar/UtilButton.tsx b/components/FolderToolBar/UtilButton.tsx new file mode 100644 index 000000000..514fa057b --- /dev/null +++ b/components/FolderToolBar/UtilButton.tsx @@ -0,0 +1,25 @@ +import styles from './FolderToolBar.module.scss'; +import Image from 'next/image'; + +interface UtilButtonProps { + imgSrc: string; + children: React.ReactNode; + onClick: () => void; + alt: string; +} + +export default function UtilButton({ + imgSrc, + children, + onClick, + alt, +}: UtilButtonProps) { + return ( + + ); +} diff --git a/components/FolderToolBar/constants.ts b/components/FolderToolBar/constants.ts new file mode 100644 index 000000000..19ba70a6d --- /dev/null +++ b/components/FolderToolBar/constants.ts @@ -0,0 +1,37 @@ +const shareIcon = '/assets/images/share_icon.svg'; +const penIcon = '/assets/images/pen_icon.svg'; +const deleteIcon = '/assets/images/delete_icon.svg'; + +interface UtilButtonProp { + imgSrc: string; + btnText: string; + alt: string; + id: number; + onClick: () => void; +} + +const noop = () => {}; + +export const UTIL_BUTTONS_PROPS: { [key: string]: UtilButtonProp } = { + share: { + imgSrc: shareIcon, + btnText: '공유', + alt: '공유 아이콘', + id: 1, + onClick: noop, + }, + changeName: { + imgSrc: penIcon, + btnText: '이름 변경', + alt: '이름 변경 아이콘', + id: 2, + onClick: noop, + }, + delete: { + imgSrc: deleteIcon, + btnText: '삭제', + alt: '삭제 아이콘', + id: 3, + onClick: noop, + }, +}; diff --git a/public/assets/images/add_icon.svg b/public/assets/images/add_icon.svg new file mode 100644 index 000000000..f9d14e2bf --- /dev/null +++ b/public/assets/images/add_icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/images/add_icon_white.svg b/public/assets/images/add_icon_white.svg new file mode 100644 index 000000000..4d8fab6ea --- /dev/null +++ b/public/assets/images/add_icon_white.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/images/delete_icon.svg b/public/assets/images/delete_icon.svg new file mode 100644 index 000000000..432374ff7 --- /dev/null +++ b/public/assets/images/delete_icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/assets/images/pen_icon.svg b/public/assets/images/pen_icon.svg new file mode 100644 index 000000000..7ab295b6b --- /dev/null +++ b/public/assets/images/pen_icon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/assets/images/share_icon.svg b/public/assets/images/share_icon.svg new file mode 100644 index 000000000..9573f5f39 --- /dev/null +++ b/public/assets/images/share_icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + From fd4f1bbf95bcc27c6d1f64ae39d9216f28f53922 Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Thu, 16 May 2024 17:09:00 +0900 Subject: [PATCH 50/56] feat: Add LinkCard & Link CardList Component --- components/LinkCard/LinkCard.module.scss | 117 ++++++++++++++ components/LinkCard/LinkCard.tsx | 149 ++++++++++++++++++ .../LinkCardList/LinkCardList.module.scss | 53 +++++++ components/LinkCardList/LinkCardList.tsx | 88 +++++++++++ next.config.js | 12 +- pages/folder/index.tsx | 25 ++- public/assets/images/kebab.svg | 7 + public/assets/images/no-image.png | Bin 0 -> 2452 bytes public/assets/images/purplestar.svg | 10 ++ public/assets/images/star.svg | 10 ++ utils/interfaces.ts | 25 +++ utils/time-functions/formatDate.ts | 3 + utils/time-functions/getTimeDifference.ts | 32 ++++ 13 files changed, 525 insertions(+), 6 deletions(-) create mode 100644 components/LinkCard/LinkCard.module.scss create mode 100644 components/LinkCard/LinkCard.tsx create mode 100644 components/LinkCardList/LinkCardList.module.scss create mode 100644 components/LinkCardList/LinkCardList.tsx create mode 100644 public/assets/images/kebab.svg create mode 100644 public/assets/images/no-image.png create mode 100644 public/assets/images/purplestar.svg create mode 100644 public/assets/images/star.svg create mode 100644 utils/interfaces.ts create mode 100644 utils/time-functions/formatDate.ts create mode 100644 utils/time-functions/getTimeDifference.ts diff --git a/components/LinkCard/LinkCard.module.scss b/components/LinkCard/LinkCard.module.scss new file mode 100644 index 000000000..225d8920c --- /dev/null +++ b/components/LinkCard/LinkCard.module.scss @@ -0,0 +1,117 @@ +.linkCard { + width: 340px; + height: 334px; + border-radius: 15px; + box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.08); + display: flex; + flex-direction: column; +} + +.thumbnailContainer { + position: relative; + width: 340px; + height: 200px; + display: flex; + justify-content: center; + overflow: hidden; + border-top-left-radius: 15px; + border-top-right-radius: 15px; + flex-shrink: 0; +} + +.thumbnail { + width: 100%; + height: auto; + object-fit: cover; + flex-shrink: 0; + transition: transform 0.3s ease; +} + +.starButton { + z-index: 1; + position: absolute; + top: 15px; + right: 15px; + width: 34px; + height: 34px; +} + +.starButton:hover { + scale: 1.1; +} + +.linkCardInfo { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + padding: 15px 20px; + gap: 10px; +} + +.linkCardTimestampBar { + display: flex; + justify-content: space-between; + font-size: 13px; + position: relative; +} + +.kebabButtonContainer { +} + +.kebabButton { + position: relative; + width: 21px; + height: 17px; + &:hover { + background-color: #e7effb; + } +} + +.dropdownList { + position: absolute; + box-shadow: 0px 2px 8px 0px rgba(51, 50, 54, 0.1); +} + +.dropdownItem { + display: flex; + flex-shrink: 0; + width: 100px; + justify-content: center; + align-items: center; + font-size: 14px; + padding: 7px 12px; + background-color: #fff; +} + +.dropdownItem:hover { + background-color: #e7effb; + color: #6d6afe; +} + +.linkCardDescription { + display: -webkit-box; + overflow: hidden; + color: #000; + margin-top: -0.3125em; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + font-size: 1em; + line-height: 1.5em; + height: 49px; +} + +.linkCard:hover .linkCardTitle, +.linkCard:hover .linkCardDescription { + text-decoration: underline; +} + +.linkCardCreated { + font-size: 14px; + height: 19px; + color: #333; +} + +.linkCard:hover .thumbnail { + transform: scale(1.3); +} diff --git a/components/LinkCard/LinkCard.tsx b/components/LinkCard/LinkCard.tsx new file mode 100644 index 000000000..82bea0cd9 --- /dev/null +++ b/components/LinkCard/LinkCard.tsx @@ -0,0 +1,149 @@ +import { useState, useEffect, useRef } from 'react'; +import Image from 'next/image'; +import styles from './LinkCard.module.scss'; +import getTimeDifference from '@/utils/time-functions/getTimeDifference'; +import formatDate from '@/utils/time-functions/formatDate'; +import { LinkObj } from '@/utils/interfaces'; + +const noImagePlaceholder = '/assets/images/no-image.png'; +import starIcon from '@/public/assets/images/star.svg'; +import purpleStarIcon from '@/public/assets/images/purplestar.svg'; +import kebab from '@/public/assets/images/kebab.svg'; + +interface LinkCardProp { + linkCardInfo: LinkObj; + onAddToFolder: (url: string) => void; + onLinkDelete: (url: string) => void; +} + +export default function LinkCard({ + linkCardInfo, + onAddToFolder, + onLinkDelete, +}: LinkCardProp) { + const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [isFavorite, setIsFavorite] = useState(false); + const dropdownRef = useRef(null); + + const handleClickOutside = (event: MouseEvent) => { + if ( + dropdownRef.current && + !dropdownRef.current.contains(event.target as Node) + ) { + setIsDropdownOpen(false); + } + }; + + const handleLinkDelete = (e: React.MouseEvent) => { + e.preventDefault(); + onLinkDelete(linkCardInfo.url); + }; + + const handleAddToFolder = (e: React.MouseEvent) => { + e.preventDefault(); + onAddToFolder(linkCardInfo.url); + }; + + const DROPDOWN_LIST_ITEMS = [ + { text: '삭제하기', onClick: handleLinkDelete }, + { text: '폴더에추가', onClick: handleAddToFolder }, + ]; + + useEffect(() => { + document.addEventListener('click', handleClickOutside); + return () => { + document.removeEventListener('click', handleClickOutside); + }; + }, []); + + const thumbnailURL = linkCardInfo.image_source + ? linkCardInfo.image_source + : noImagePlaceholder; + const description = linkCardInfo.description; + const url = linkCardInfo.url; + const createdDate = new Date(linkCardInfo.created_at); + const timestamp = getTimeDifference(createdDate); + const altMessage = linkCardInfo.title; + + const handleKebabClick = (event: React.MouseEvent) => { + setIsDropdownOpen(!isDropdownOpen); + event.preventDefault(); + }; + + const handleStarClick = (event: React.MouseEvent) => { + event.preventDefault(); + setIsFavorite(!isFavorite); + }; + + useEffect(() => { + console.log(linkCardInfo); + }, [linkCardInfo]); + + return ( + +
+ + {altMessage} +
+
+
+ {timestamp} +
+ + {isDropdownOpen && ( +
    + {DROPDOWN_LIST_ITEMS.map((item, index) => ( +
  • + +
    • + ))} +
+ )} +
+
+

{description}

+ + {formatDate(createdDate)} + +
+ + ); +} diff --git a/components/LinkCardList/LinkCardList.module.scss b/components/LinkCardList/LinkCardList.module.scss new file mode 100644 index 000000000..f6e9e80c0 --- /dev/null +++ b/components/LinkCardList/LinkCardList.module.scss @@ -0,0 +1,53 @@ +.linkCardList { + display: grid; + gap: 20px; + grid-template-columns: auto auto auto; + justify-content: center; +} + +@media (max-width: 1124px) { + .linkCardList { + grid-template-columns: auto auto; + } +} + +@media (max-width: 767px) { + .linkCardList { + grid-template-columns: auto; + } +} + +.linkCardListContainer { + display: flex; + flex-direction: column; + align-items: center; + background-color: #fff; + width: 100%; + padding: 40px 200px 100px; + flex-grow: 1; +} + +@media (max-width: 1124px) { + .linkCardListContainer { + padding: 40px 32px 100px; + } +} + +@media (max-width: 767px) { + .linkCardListContainer { + padding: 20px 32px 60px; + } +} + +.contentWrapper { + display: flex; + flex-direction: column; + align-items: center; + gap: 40px; +} + +.noSavedLink { + width: 100%; + text-align: center; + padding: 40px; +} diff --git a/components/LinkCardList/LinkCardList.tsx b/components/LinkCardList/LinkCardList.tsx new file mode 100644 index 000000000..e5adf6aea --- /dev/null +++ b/components/LinkCardList/LinkCardList.tsx @@ -0,0 +1,88 @@ +import FolderToolBar from '@/components/FolderToolBar/FolderToolBar'; +import LinkCard from '@/components/LinkCard/LinkCard'; +import SearchBar from '@/components/SearchBar/SearchBar'; +import styles from './LinkCardList.module.scss'; +import { FolderObj, LinkObj } from '@/utils/interfaces'; +import { useState } from 'react'; + +interface LinkCardListProp { + items: LinkObj[] | undefined; + folders?: FolderObj[]; + folderNameOnClick: (id: number) => void; + currentFolderId: number; + onFolderAddClick: () => void; + onFolderNameChangeClick: () => void; + onFolderDeleteClick: () => void; + onLinkDelete: (link: string) => void; + onAddtoFolder: (link: string) => void; + onShare: () => void; +} + +const LinkCardList = ({ + items, + folders, + folderNameOnClick, + currentFolderId, + onFolderAddClick, + onFolderNameChangeClick, + onFolderDeleteClick, + onLinkDelete, + onAddtoFolder, + onShare, +}: LinkCardListProp) => { + const [searchText, setSearchText] = useState(''); + + const handleSearchInput = (text: string) => { + setSearchText(text); + }; + + function filterLinksByKeyword(keyword: string) { + if (!items) return; + if (searchText === '') return items; + return items.filter( + (item) => + item.url?.includes(keyword) || + item.description?.includes(keyword) || + item.title?.includes(keyword) + ); + } + + const curItems = filterLinksByKeyword(searchText); + + return ( +
+
+ + {folders && ( + + )} + + {curItems && curItems.length > 0 ? ( +
    + {curItems.map((item) => ( +
  • + +
    • + ))} +
+ ) : ( +

저장된 링크가 없습니다

+ )} +
+
+ ); +}; + +export default LinkCardList; diff --git a/next.config.js b/next.config.js index a843cbee0..7d57d06ad 100644 --- a/next.config.js +++ b/next.config.js @@ -1,6 +1,14 @@ /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, -} + images: { + remotePatterns: [ + { + protocol: 'https', + hostname: '**', + }, + ], + }, +}; -module.exports = nextConfig +module.exports = nextConfig; diff --git a/pages/folder/index.tsx b/pages/folder/index.tsx index f3d16e78b..2cbd939c2 100644 --- a/pages/folder/index.tsx +++ b/pages/folder/index.tsx @@ -1,12 +1,21 @@ +import LinkCardList from '@/components/LinkCardList/LinkCardList'; import { useUserInfo } from '@/contexts/UserInfoContext'; import { axiosInstance } from '@/utils/axiosInstance'; import { useRouter } from 'next/router'; import { useEffect, useState } from 'react'; +import { FolderObj, LinkObj } from '@/utils/interfaces'; + +const allFolder = { + id: -1, + name: '전체', + user_id: -1, +}; export default function Folder() { + const [currentFolderId, setCurrentFolderId] = useState(-1); const { userInfo, setUserInfo } = useUserInfo(); - const [folders, setFolders] = useState(); - const [links, setLinks] = useState(); + const [folders, setFolders] = useState([]); + const [links, setLinks] = useState(); const router = useRouter(); const loadUser = async () => { @@ -20,12 +29,14 @@ export default function Folder() { }, }); setUserInfo(response.data.data[0]); + setCurrentFolderId(-1); }; const getUserFolders = async () => { if (userInfo) { const response = await axiosInstance.get(`/users/${userInfo.id}/folders`); - setFolders(response.data.data); + allFolder.user_id = userInfo.id; + setFolders([allFolder, ...response.data.data]); } }; @@ -46,7 +57,13 @@ export default function Folder() { useEffect(() => { getUserFolders(); getUserLinks(); + console.log(folders); + console.log(links); }, [userInfo]); - return
FolderPage
; + return ( + <> + + + ); } diff --git a/public/assets/images/kebab.svg b/public/assets/images/kebab.svg new file mode 100644 index 000000000..0a86ab920 --- /dev/null +++ b/public/assets/images/kebab.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/assets/images/no-image.png b/public/assets/images/no-image.png new file mode 100644 index 0000000000000000000000000000000000000000..cef494309239b1c6e49dbeadcc1fdca0c4a8825d GIT binary patch literal 2452 zcmd^B={FmQ7Ehd_Wm=;PwRY2{N|~It)?%X4Fx1ip(IO+GwA5CWh9q=-s3m=>)gi=G z5kg`OMP&Lk_O(P1w4xHVGz}Axka(H*H@t82;dj^bJNKM>Km2aGw0NCs1 z>T(qT0K%1V_ii<%ZG!08D&3w~*MN8cK=Z)g00Q!fhm}QO{8gAUfI4XSRhjGxhg^XG z0JQ|o?GRNZ!PLzK0>=PXXWZ`^a1K3~(@c9yE;kK$=~0>k(t`#-+8$%nef&OS)O$2| zMuu9Pm+QpiQN;|=()@tK13M60VSv5=hT#hfP^bvs8eB6u_9=)aop zm*TDg5Ysg{@%Iqn^5#&S_fD&Q3)8pPsV~&_ARvQ__33^5$zgFdOH0}$TOdF^fP*N( zM(o}FDHolq`9O3=u?mrm$(^F{J(;Ib8a2-f3ra68`TsUHqzN$ly0=eP{?U?o7Etw; zW62cyzaSGd0F;&^;nEUx|EaNBk0 zX!<{-*>idBKl(p}3Aqzh$(kFz&cSlTOmJaa47N3wOUgY6gO%cTW>(}(Swg_Xx}enX ze6S$PfV~>_&>iM&S;G+2OID{%Z$?r8y3a2q|8JKcj_v4YBzD&iLOZt?=R!<7LQMUs z+c^6eb+)6SF`Ox-AmxnN$#VODl}Kn6NmL5AetlSk>0bzA&SGXK_+%MI91$|GXGtHs z-ePAemVLo<*;?X(8>K74E2s;rF^=PUXPZ1s$NC@xZLL!X_VY z?x$*KjCMkPm`fE>4*YhX(roeF8bsFyjpu{)Q^OIpU)K6Dt)x(Be|FHPRik zMR({OB`_x}3whWPoyMOki{i)XX41l*oNv#&5|v`Su5+h>amvCfo@`j4J9<6SI0YA= zvvxPds!aP&FSHI)#y(lpWQJ}`yYBDNg=8W>vexOWT%;Q0=56p*2b+`a;9szkZ(s1* zqhEb)b|yDevx8jX@fM-6-9vlg)zsMi zx=i8c@+&Wb%>N_a1zkUHJB898;Ud1r+~B%ed740T^VccmS>9Y~i+)?=&b0mg@FqR~ zva@z9pA2~>WhCEh|J3opq`2;(TEzHhW-w9wY1-T@oy?kCgR&eOvO=4#zcON-wu_EJ z!KdhVs-iy3G!AS&t*e>{^6!%AzB~74t>$ZAlcK1JS%{$-04rCkl+Jg$k!FMjB@% z&~KdXhwkuNekvfOX`N9XFKL(`u#%WZ>pcHHc2L&;TCF(&D?Zv~AI`cJJFB;0vu#YO z`Na-=D0Qu)GmVjaEnj95Y+ew-EhmUJ(#^{y_wG-!P80KdJuO&&#B$$=lA`NZR}wf( zfA+>Zk)bx7-ofXGU^qN6CVP|1*_e*Qu7~Z@2tx`y4>q^CI}X_F<@06=8=dt zsw_%n-nK;%MQhG&khbt51z9FsMIjB!vix^_;H^KU+Hf0~XjCWWVe`s)sEh1d`BTlo zI#U}MSha4&KAHvpxr+FicP>>!V2+Y~W%T4;CgLgux0WjivizOb(P=M|6fe1bm%Qgr qq)WZy-z>9^IsFr*<^Lj~UqCU#h^=*vk3!`W1#p9Ux=@{eee_?(a%SHE literal 0 HcmV?d00001 diff --git a/public/assets/images/purplestar.svg b/public/assets/images/purplestar.svg new file mode 100644 index 000000000..6bf0e137c --- /dev/null +++ b/public/assets/images/purplestar.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/public/assets/images/star.svg b/public/assets/images/star.svg new file mode 100644 index 000000000..4d700bdde --- /dev/null +++ b/public/assets/images/star.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/utils/interfaces.ts b/utils/interfaces.ts new file mode 100644 index 000000000..f156c7bfa --- /dev/null +++ b/utils/interfaces.ts @@ -0,0 +1,25 @@ +export interface FolderObj { + id: number; + name: string; + user_id: number; +} + +export interface LinkObj { + created_at: string; + description: string; + folder_id: number; + id: number; + image_source: string; + title: string; + updated_at: string; + url: string; +} + +export interface ModalContentProps { + folders?: FolderObj[]; + headerText?: string; + subHeaderText?: string; + folderNum?: number; + buttonText?: string; + initialValue?: string; +} diff --git a/utils/time-functions/formatDate.ts b/utils/time-functions/formatDate.ts new file mode 100644 index 000000000..835b9dcd9 --- /dev/null +++ b/utils/time-functions/formatDate.ts @@ -0,0 +1,3 @@ +export default function formatDate(date: Date): string { + return `${date.getFullYear()}. ${date.getMonth() + 1}. ${date.getDate()}`; +} diff --git a/utils/time-functions/getTimeDifference.ts b/utils/time-functions/getTimeDifference.ts new file mode 100644 index 000000000..f49af9962 --- /dev/null +++ b/utils/time-functions/getTimeDifference.ts @@ -0,0 +1,32 @@ +const MILLISECONDS_IN_YEAR = 31536000000; +const MILLISECONDS_IN_MONTH = 2592000000; +const MILLISECONDS_IN_DAY = 86400000; +const MILLISECONDS_IN_HOUR = 3600000; +const MILLISECONDS_IN_MINUTE = 60000; + +const INTERVALS = [ + { label: 'year', divisor: MILLISECONDS_IN_YEAR }, + { label: 'month', divisor: MILLISECONDS_IN_MONTH }, + { label: 'day', divisor: MILLISECONDS_IN_DAY }, + { label: 'hour', divisor: MILLISECONDS_IN_HOUR }, + { label: 'minute', divisor: MILLISECONDS_IN_MINUTE }, +]; + +export default function getTimeDifference( + createdDate: Date, + intervals = INTERVALS +): string { + const currentDate: Date = new Date(); + const timeDifference: number = currentDate.getTime() - createdDate.getTime(); + + for (const interval of intervals) { + const value = Math.floor(timeDifference / interval.divisor); + if (value >= 1) { + return value === 1 + ? `1 ${interval.label} ago` + : `${value} ${interval.label}s ago`; + } + } + + return 'just now'; +} From 50cef44377e4828f702d42bd4e26d7baf5817273 Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Thu, 16 May 2024 17:47:23 +0900 Subject: [PATCH 51/56] feat: Add Modal feature in folder page --- components/Modal/Modal.module.css | 29 ++++ components/Modal/Modal.tsx | 17 ++ components/ModalContents/AddToFolderModal.tsx | 35 ++++ components/ModalContents/DeleteModal.tsx | 17 ++ components/ModalContents/FolderInputModal.tsx | 31 ++++ .../ModalContents/ModalContents.module.scss | 159 ++++++++++++++++++ components/ModalContents/ShareModal.tsx | 76 +++++++++ components/ModalContents/index.ts | 6 + pages/folder/index.tsx | 119 ++++++++++++- public/assets/images/check.svg | 5 + public/assets/images/close.png | Bin 0 -> 569 bytes public/assets/images/facebook.svg | 11 ++ public/assets/images/link.svg | 4 + styles/FolderPage.module.scss | 9 + utils/interfaces.ts | 1 + utils/shareFunctions/facebooShare.ts | 3 + utils/shareFunctions/kakaoshare.ts | 39 +++++ 17 files changed, 559 insertions(+), 2 deletions(-) create mode 100644 components/Modal/Modal.module.css create mode 100644 components/Modal/Modal.tsx create mode 100644 components/ModalContents/AddToFolderModal.tsx create mode 100644 components/ModalContents/DeleteModal.tsx create mode 100644 components/ModalContents/FolderInputModal.tsx create mode 100644 components/ModalContents/ModalContents.module.scss create mode 100644 components/ModalContents/ShareModal.tsx create mode 100644 components/ModalContents/index.ts create mode 100644 public/assets/images/check.svg create mode 100644 public/assets/images/close.png create mode 100644 public/assets/images/facebook.svg create mode 100644 public/assets/images/link.svg create mode 100644 styles/FolderPage.module.scss create mode 100644 utils/shareFunctions/facebooShare.ts create mode 100644 utils/shareFunctions/kakaoshare.ts diff --git a/components/Modal/Modal.module.css b/components/Modal/Modal.module.css new file mode 100644 index 000000000..7b6a3019e --- /dev/null +++ b/components/Modal/Modal.module.css @@ -0,0 +1,29 @@ +.modalContainer { + z-index: 3; + background-color: #fff; + border-radius: 15px; + border: 1px solid #ccd5e3; + position: fixed; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); +} + +.modalWrapper { + display: flex; + padding: 32px 40px; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 24px; + position: relative; +} + +.closeButton { + position: absolute; + width: 24px; + height: 24px; + top: 16px; + right: 16px; + background-image: url(/assets/images/close.png); +} diff --git a/components/Modal/Modal.tsx b/components/Modal/Modal.tsx new file mode 100644 index 000000000..af6c4a39f --- /dev/null +++ b/components/Modal/Modal.tsx @@ -0,0 +1,17 @@ +import styles from './Modal.module.css'; + +interface ModalProps { + children: React.ReactNode; + onClose: () => void; +} + +export default function Modal({ children, onClose }: ModalProps) { + return ( +
+
+ + {children} +
+
+ ); +} diff --git a/components/ModalContents/AddToFolderModal.tsx b/components/ModalContents/AddToFolderModal.tsx new file mode 100644 index 000000000..3f3434fdd --- /dev/null +++ b/components/ModalContents/AddToFolderModal.tsx @@ -0,0 +1,35 @@ +import { ModalContentProps } from '@/utils/interfaces'; +import styles from './ModalContents.module.scss'; +import Button from '@/components/Button/Button'; + +export default function AddToFolderModal({ + folders, + headerText, + subHeaderText, + buttonText, +}: ModalContentProps) { + if (!folders) return; + const curFolders = folders.slice(1); //전체 폴더를 제외시키기 위해서 + return ( +
+
+ {headerText} + {subHeaderText} +
+
    + {curFolders.map((folder) => ( +
  • + +
    • + ))} +
+ + +
+ ); +} diff --git a/components/ModalContents/DeleteModal.tsx b/components/ModalContents/DeleteModal.tsx new file mode 100644 index 000000000..58e8812db --- /dev/null +++ b/components/ModalContents/DeleteModal.tsx @@ -0,0 +1,17 @@ +import { ModalContentProps } from '@/utils/interfaces'; +import styles from './ModalContents.module.scss'; + +export default function DeleteModal({ + headerText, + subHeaderText, +}: ModalContentProps) { + return ( +
+
+ {headerText} + {subHeaderText} +
+ +
+ ); +} diff --git a/components/ModalContents/FolderInputModal.tsx b/components/ModalContents/FolderInputModal.tsx new file mode 100644 index 000000000..451c4117c --- /dev/null +++ b/components/ModalContents/FolderInputModal.tsx @@ -0,0 +1,31 @@ +import styles from './ModalContents.module.scss'; +import Button from '@/components/Button/Button'; +import { useState } from 'react'; +import { ModalContentProps } from '@/utils/interfaces'; + +export default function FolderInputModal({ + initialValue = '', + headerText, + buttonText, +}: ModalContentProps) { + const [inputValue, setInputValue] = useState(initialValue); + const handleInputChange = (e: React.ChangeEvent) => { + setInputValue(e.target.value); + }; + + return ( +
+ {headerText} +
+ + +
+
+ ); +} diff --git a/components/ModalContents/ModalContents.module.scss b/components/ModalContents/ModalContents.module.scss new file mode 100644 index 000000000..40e1973f0 --- /dev/null +++ b/components/ModalContents/ModalContents.module.scss @@ -0,0 +1,159 @@ +.modalContentWrapper { + display: flex; + flex-direction: column; + gap: 24px; + align-items: center; +} + +.modalForm { + display: flex; + flex-direction: column; + gap: 15px; + width: 280px; +} + +.modalInput { + width: 100%; + padding: 18px 15px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 8px; + border: 1px solid #ccd5e3; + &:focus { + border: 1px solid#6d6afe; + } +} + +.modalHeader { + color: #373740; + font-family: Pretendard; + font-size: 20px; + font-style: normal; + font-weight: 700; + line-height: normal; +} + +.modalHeaderWrapper { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; +} + +.modalSubHeader { + color: #9fa6b2; + text-align: center; + font-size: 14px; + font-weight: 400; + line-height: 22px; + width: 280px; + word-wrap: break-word; +} + +.modalButton { + width: 100%; + font-size: 16px; + padding: 16px 20px; +} + +.deleteButton { + display: flex; + width: 280px; + padding: 16px 20px; + justify-content: center; + align-items: center; + gap: 10px; + border-radius: 8px; + background: #ff5b56; + color: #f5f5f5; + font-family: 'Pretendard', sans-serif; + font-size: 16px; + font-weight: 600; +} + +.shareButtonBar { + display: flex; + gap: 32px; +} + +.shareButtonWrapper { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; +} + +.shareButton { + width: 42px; + height: 42px; + border-radius: 50%; + &:hover { + box-shadow: 0 0 10px #6ae3fe; + } +} + +.folderList { + width: 280px; + max-height: 172px; + overflow-y: scroll; + display: flex; + flex-direction: column; + gap: 4px; +} + +.folderNameContainer { + width: 100%; + padding: 8px; + display: flex; + gap: 8px; + &:hover { + background-color: #f0f6ff; + cursor: pointer; + color: #6d6afe; + } + &:focus { + background: #f0f6ff url('/assets/images/check.svg') no-repeat top 8px right + 8px; + color: #6d6afe; + } +} + +.folderName { + font-family: Pretendard; + font-weight: 400; +} + +.linkCount { + color: #9fa6b2; + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 400; +} + +.toast { + background: #6d6afe; + color: #fff; + border-radius: 8px; + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); + padding: 12px 20px; + justify-content: center; + align-items: center; + font-size: 14px; + font-weight: 500; + line-height: 18px; + position: fixed; + bottom: 120px; + opacity: 0; + transition: opacity 0.5s ease-in-out; + z-index: 1010; + + @media (max-width: 767px) { + bottom: 90px; + } +} + +.toast.show { + opacity: 1; +} diff --git a/components/ModalContents/ShareModal.tsx b/components/ModalContents/ShareModal.tsx new file mode 100644 index 000000000..bb60abf4b --- /dev/null +++ b/components/ModalContents/ShareModal.tsx @@ -0,0 +1,76 @@ +import facebook from '@/public/assets/images/facebook.svg'; +import share from '@/public/assets/images/link.svg'; +import kakao from '@/public/assets/images/kakao.svg'; +import styles from './ModalContents.module.scss'; +import { facebookShare } from '@/utils/shareFunctions/facebooShare'; +import { kakaoShare } from '@/utils/shareFunctions/kakaoshare'; +import { useState } from 'react'; +import { ModalContentProps } from '@/utils/interfaces'; + +interface ShareButtonProps { + text: string; + icon: string; + onClick: () => void; + id: number; +} + +function noop() {} + +const SHARE_BUTTONS_INFO: { [key: string]: ShareButtonProps } = { + kakao: { text: '카카오톡', icon: kakao, onClick: noop, id: 0 }, + facebook: { + text: '페이스북', + icon: facebook, + onClick: noop, + id: 1, + }, + copyLink: { text: '링크 복사', icon: share, onClick: noop, id: 2 }, +}; + +export default function ShareModal({ + headerText, + subHeaderText, + folderNum, +}: ModalContentProps) { + const [showToast, setShowToast] = useState(false); + + const SHARE_URL = `https://bk-part2.netlify.app/shared/${folderNum}`; + + const handleCopyLinkClipBoard = async () => { + try { + await navigator.clipboard.writeText(SHARE_URL); + setShowToast(true); + setTimeout(() => setShowToast(false), 3000); + } catch (err) { + console.log(err); + } + }; + + SHARE_BUTTONS_INFO.kakao.onClick = () => kakaoShare(SHARE_URL); + SHARE_BUTTONS_INFO.facebook.onClick = () => facebookShare(SHARE_URL); + SHARE_BUTTONS_INFO.copyLink.onClick = handleCopyLinkClipBoard; + + return ( +
+
+ {headerText} + {subHeaderText} +
+
    + {Object.entries(SHARE_BUTTONS_INFO).map(([key, item]) => ( +
  • +
    + + {item.text} +
    +
    • + ))} +
+
+ URL이 복사되었습니다 +
+
+ ); +} diff --git a/components/ModalContents/index.ts b/components/ModalContents/index.ts new file mode 100644 index 000000000..2bbd5bd5f --- /dev/null +++ b/components/ModalContents/index.ts @@ -0,0 +1,6 @@ +// index.ts + +export { default as DeleteModal } from './DeleteModal'; +export { default as FolderInputModal } from './FolderInputModal'; +export { default as ShareModal } from './ShareModal'; +export { default as AddToFolderModal } from './AddToFolderModal'; diff --git a/pages/folder/index.tsx b/pages/folder/index.tsx index 2cbd939c2..12309f765 100644 --- a/pages/folder/index.tsx +++ b/pages/folder/index.tsx @@ -4,6 +4,14 @@ import { axiosInstance } from '@/utils/axiosInstance'; import { useRouter } from 'next/router'; import { useEffect, useState } from 'react'; import { FolderObj, LinkObj } from '@/utils/interfaces'; +import Modal from '@/components/Modal/Modal'; +import styles from '@/styles/FolderPage.module.scss'; +import { + DeleteModal, + FolderInputModal, + ShareModal, + AddToFolderModal, +} from '@/components/ModalContents'; const allFolder = { id: -1, @@ -16,6 +24,10 @@ export default function Folder() { const { userInfo, setUserInfo } = useUserInfo(); const [folders, setFolders] = useState([]); const [links, setLinks] = useState(); + const [showModal, setShowModal] = useState(false); + const [modalContent, setModalContent] = useState( + null + ); const router = useRouter(); const loadUser = async () => { @@ -42,7 +54,8 @@ export default function Folder() { const getUserLinks = async (folderId?: number) => { if (userInfo) { - const folderEndPoint = folderId ? `?folderId=${folderId}` : ''; + const folderEndPoint = + folderId && folderId !== -1 ? `?folderId=${folderId}` : ''; const response = await axiosInstance.get( `/users/${userInfo.id}/links${folderEndPoint}` ); @@ -50,6 +63,87 @@ export default function Folder() { } }; + const handleFolderAddClick = () => { + setShowModal(true); + setModalContent( + + ); + }; + + const handleFolderNameChangeClick = () => { + const currentFolder = folders.find( + (folder) => folder.id === currentFolderId + ); + if (!currentFolder) return; + setShowModal(true); + setModalContent( + + ); + }; + + const handleFolderDeleteClick = () => { + const currentFolder = folders.find( + (folder) => folder.id === currentFolderId + ); + if (!currentFolder) return; + setShowModal(true); + setModalContent( + + ); + }; + + const handleLinkDeleteClick = (link: string) => { + setShowModal(true); + + setModalContent( + + ); + }; + + const handleAddToFolder = (link: string) => { + setShowModal(true); + setModalContent( + + ); + }; + + const handleShareClick = () => { + const currentFolder = folders.find( + (folder) => folder.id === currentFolderId + ); + if (!currentFolder) return; + setShowModal(true); + setModalContent( + + ); + }; + + const handleFolderNameButtonClick = async (id: number) => { + setCurrentFolderId(id); + let result; + try { + result = await getUserLinks(id); + } catch (error) { + return; + } + }; + useEffect(() => { loadUser(); }, []); @@ -63,7 +157,28 @@ export default function Folder() { return ( <> - + {' '} + {showModal && ( + <> + setShowModal(false)}>{modalContent} +
setShowModal(false)} + >
+ + )} + ); } diff --git a/public/assets/images/check.svg b/public/assets/images/check.svg new file mode 100644 index 000000000..2ab2949b7 --- /dev/null +++ b/public/assets/images/check.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/images/close.png b/public/assets/images/close.png new file mode 100644 index 0000000000000000000000000000000000000000..f7bb6ca96ed8a0cde9a46810d48bb312246c251b GIT binary patch literal 569 zcmV-90>=G`P)snB?IOOp#atRnEm$6cX!Cl%Z)&=3WuhBKHwLD$i*^lZut^1gB`%VMCA+d@fg) zY%Rc5&x0HxBQRIk-S+pOYH2UB5E%trI1*r}PBfH|{oka^?*X#U9LD-7bP4xzLkPM- zI!xKesHRUzU$KyCqisU2r2;R%iXz{BeL-ic=8rEdirw)iyWaiSW8f^=00000NkvXX Hu0mjf-5&9V literal 0 HcmV?d00001 diff --git a/public/assets/images/facebook.svg b/public/assets/images/facebook.svg new file mode 100644 index 000000000..2db2ab854 --- /dev/null +++ b/public/assets/images/facebook.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/assets/images/link.svg b/public/assets/images/link.svg new file mode 100644 index 000000000..913adbec5 --- /dev/null +++ b/public/assets/images/link.svg @@ -0,0 +1,4 @@ + + + + diff --git a/styles/FolderPage.module.scss b/styles/FolderPage.module.scss new file mode 100644 index 000000000..eb83f3eb1 --- /dev/null +++ b/styles/FolderPage.module.scss @@ -0,0 +1,9 @@ +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.4); + z-index: 2; +} diff --git a/utils/interfaces.ts b/utils/interfaces.ts index f156c7bfa..044fd461c 100644 --- a/utils/interfaces.ts +++ b/utils/interfaces.ts @@ -2,6 +2,7 @@ export interface FolderObj { id: number; name: string; user_id: number; + link?: { count: number }; } export interface LinkObj { diff --git a/utils/shareFunctions/facebooShare.ts b/utils/shareFunctions/facebooShare.ts new file mode 100644 index 000000000..067d8ef9a --- /dev/null +++ b/utils/shareFunctions/facebooShare.ts @@ -0,0 +1,3 @@ +export function facebookShare(route: string): void { + window.open(`http://www.facebook.com/sharer.php?u=${route}`); +} diff --git a/utils/shareFunctions/kakaoshare.ts b/utils/shareFunctions/kakaoshare.ts new file mode 100644 index 000000000..d563c91af --- /dev/null +++ b/utils/shareFunctions/kakaoshare.ts @@ -0,0 +1,39 @@ +declare global { + interface Window { + Kakao: any; + } +} + +export function kakaoShare(route: string): void { + if (window.Kakao) { + const kakao = window.Kakao; + if (!kakao.isInitialized()) { + kakao.init('596ed3a4fcb13779c60a5e27d3ab4266'); // 카카오에서 제공받은 javascript key를 넣어줌 -> .env파일에서 호출시킴 + } + + kakao.Share.sendDefault({ + objectType: 'feed', // 카카오 링크 공유 여러 type들 중 feed라는 타입 -> 자세한 건 카카오에서 확인 + content: { + title: 'Linkbrary', // 인자값으로 받은 title + description: `위클리미션`, // 인자값으로 받은 title + imageUrl: + 'https://image6.uhdpaper.com/wallpaper-hd/yeji-itzy-uhdpaper.com-hd-6.1786.jpg', + link: { + mobileWebUrl: route, // 인자값으로 받은 route(uri 형태) + webUrl: route, + }, + }, + buttons: [ + { + title: '웹으로 보기', + link: { + mobileWebUrl: route, + webUrl: route, + }, + }, + ], + + installTalk: true, + }); + } +} From 4df5259f9934b436d71f681b30ee3a750840ae75 Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Thu, 16 May 2024 18:04:05 +0900 Subject: [PATCH 52/56] style: Add hover style to toggle button --- components/ShowTextToggle/ShowTextToggle.module.scss | 10 ++++++++++ components/ShowTextToggle/ShowTextToggle.tsx | 8 ++------ styles/AuthForm.module.scss | 12 +----------- 3 files changed, 13 insertions(+), 17 deletions(-) create mode 100644 components/ShowTextToggle/ShowTextToggle.module.scss diff --git a/components/ShowTextToggle/ShowTextToggle.module.scss b/components/ShowTextToggle/ShowTextToggle.module.scss new file mode 100644 index 000000000..2fb0e875c --- /dev/null +++ b/components/ShowTextToggle/ShowTextToggle.module.scss @@ -0,0 +1,10 @@ +.toggleButton { + position: relative; + width: 16px; + height: 16px; + + &:hover { + filter: brightness(0); + } + } + \ No newline at end of file diff --git a/components/ShowTextToggle/ShowTextToggle.tsx b/components/ShowTextToggle/ShowTextToggle.tsx index ec3192b69..2ebe7d982 100644 --- a/components/ShowTextToggle/ShowTextToggle.tsx +++ b/components/ShowTextToggle/ShowTextToggle.tsx @@ -1,5 +1,5 @@ import Image from 'next/image'; - +import styles from './ShowTextToggle.module.scss'; interface ShowTextToggleProps { showText: boolean; onClick: () => void; @@ -10,11 +10,7 @@ export default function ShowTextToggle({ onClick, }: ShowTextToggleProps) { return ( - {item.text} From 1d564990962de71463684913f0c9e0d825053261 Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Fri, 17 May 2024 11:45:11 +0900 Subject: [PATCH 54/56] fix: Change eslintrc and add script for Kakao Talk share --- .eslintrc.json | 2 +- components/LinkCard/LinkCard.module.scss | 3 --- pages/_document.tsx | 11 ++++++++--- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index bffb357a7..15b1ed91a 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,3 +1,3 @@ { - "extends": "next/core-web-vitals" + "extends": "next" } diff --git a/components/LinkCard/LinkCard.module.scss b/components/LinkCard/LinkCard.module.scss index 225d8920c..32d77155f 100644 --- a/components/LinkCard/LinkCard.module.scss +++ b/components/LinkCard/LinkCard.module.scss @@ -56,9 +56,6 @@ position: relative; } -.kebabButtonContainer { -} - .kebabButton { position: relative; width: 21px; diff --git a/pages/_document.tsx b/pages/_document.tsx index 54e8bf3e2..55ad65786 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -1,13 +1,18 @@ -import { Html, Head, Main, NextScript } from 'next/document' +import { Html, Head, Main, NextScript } from 'next/document'; export default function Document() { return ( - + +
- ) + ); } From 23340a580dee09e27506342300780cd0e52c79a0 Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Fri, 17 May 2024 11:50:34 +0900 Subject: [PATCH 55/56] chore: Change share url to local host for feature test --- components/ModalContents/ShareModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/ModalContents/ShareModal.tsx b/components/ModalContents/ShareModal.tsx index 00eed6a72..465bcac75 100644 --- a/components/ModalContents/ShareModal.tsx +++ b/components/ModalContents/ShareModal.tsx @@ -35,7 +35,7 @@ export default function ShareModal({ }: ModalContentProps) { const [showToast, setShowToast] = useState(false); - const SHARE_URL = `https://bk-part2.netlify.app/shared/${folderNum}`; + const SHARE_URL = `http://localhost:3000/shared/${folderNum}`; const handleCopyLinkClipBoard = async () => { try { From 4df9304348d1d707b00e7491adb6279dccd4b4f2 Mon Sep 17 00:00:00 2001 From: bk-git-hub Date: Fri, 17 May 2024 13:20:30 +0900 Subject: [PATCH 56/56] feat: Create SharedPage component --- pages/shared/[folderId].tsx | 55 +++++++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 pages/shared/[folderId].tsx diff --git a/pages/shared/[folderId].tsx b/pages/shared/[folderId].tsx new file mode 100644 index 000000000..a908c3778 --- /dev/null +++ b/pages/shared/[folderId].tsx @@ -0,0 +1,55 @@ +import { axiosInstance } from '@/utils/axiosInstance'; +import { useRouter } from 'next/router'; +import { useEffect, useState } from 'react'; + +interface FolderInfoObj { + created_at: string; + favorite: boolean; + id: number; + name: string; + user_id: number; +} + +interface UserInfoObj { + id: number; + created_at: string; + name: string; + image_source: string; + email: string; +} + +export default function SharedPage() { + const router = useRouter(); + const { folderId } = router.query; + const [folderInfo, setFolderInfo] = useState(null); + const [userInfo, setUserInfo] = useState(null); + console.log('Folder ID:', folderId); + + const loadSharedPage = async (folderId: any) => { + if (!folderId) return; + const response = await axiosInstance.get(`/folders/${folderId}`); + setFolderInfo(response.data.data[0]); + }; + + const getFolderOwnwer = async (folderInfo: FolderInfoObj | null) => { + if (!folderInfo) return; + const res = axiosInstance.get(`users/${folderInfo.user_id}`); + setUserInfo((await res).data.data[0]); + }; + + useEffect(() => { + loadSharedPage(folderId); + }, [folderId]); + + useEffect(() => { + getFolderOwnwer(folderInfo); + }, [folderInfo]); + + return ( +
+

Shared Page

+

Folder ID: {folderId}

+ {folderInfo &&

{folderInfo.user_id}

} +
+ ); +}