From 6c0e520069fd7fbc0247fbc3f30b930cdd28eb7a Mon Sep 17 00:00:00 2001 From: sj0724 Date: Mon, 13 May 2024 16:42:17 +0900 Subject: [PATCH 01/23] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Button/Button.styled.ts | 2 +- components/Input/Input.styled.ts | 2 +- components/Input/Input.tsx | 6 ++-- components/SignForm/SignForm.styled.ts | 23 -------------- components/SignForm/SignForm.tsx | 20 ------------ hooks/useValidate.ts | 3 +- pages/signin.tsx | 34 +++++++++++++++------ pages/signup.tsx | 42 ++++++++++++++++++-------- styles/signin.styled.ts | 13 ++++---- 9 files changed, 66 insertions(+), 79 deletions(-) delete mode 100644 components/SignForm/SignForm.styled.ts delete mode 100644 components/SignForm/SignForm.tsx diff --git a/components/Button/Button.styled.ts b/components/Button/Button.styled.ts index 0bf173229..f63a1270d 100644 --- a/components/Button/Button.styled.ts +++ b/components/Button/Button.styled.ts @@ -8,7 +8,7 @@ const buttonSize = { lg: '40', }; -export const Cta = styled.span` +export const Cta = styled.button` cursor: pointer; text-decoration: none; display: flex; diff --git a/components/Input/Input.styled.ts b/components/Input/Input.styled.ts index 5cdb80a6e..a455a9843 100644 --- a/components/Input/Input.styled.ts +++ b/components/Input/Input.styled.ts @@ -15,7 +15,7 @@ const InputModal = styled.input` align-items: center; border-radius: 0.8rem; border: 1px solid - var(${({ error }) => (error ? '--ErrorMessage' : '--Linkbrary-gray20')}); + var(${({ $error }) => ($error ? '--ErrorMessage' : '--Linkbrary-gray20')}); background: var(--Section-white); font-size: 1.6rem; line-height: 2.4rem; diff --git a/components/Input/Input.tsx b/components/Input/Input.tsx index 50bfe8489..1807585d7 100644 --- a/components/Input/Input.tsx +++ b/components/Input/Input.tsx @@ -4,11 +4,11 @@ import InputModal from './Input.styled'; export interface InputProps extends HtmlHTMLAttributes { type: string; onChange: (e: ChangeEvent) => void; - error: string; + $error: string; size: 'sm' | 'md' | 'lg'; } -function Input({ id, placeholder, type, onChange, error, size }: InputProps) { +function Input({ id, placeholder, type, onChange, $error, size }: InputProps) { return ( <> diff --git a/components/SignForm/SignForm.styled.ts b/components/SignForm/SignForm.styled.ts deleted file mode 100644 index f1bfc61a9..000000000 --- a/components/SignForm/SignForm.styled.ts +++ /dev/null @@ -1,23 +0,0 @@ -import styled from 'styled-components'; - -export const SignForm = styled.form` - display: flex; - flex-direction: column; - justify-content: flex-start; -`; - -export const LoginButton = styled.button` - width: 40rem; - margin-top: 1rem; - padding: 1.6rem 2rem; - border: none; - border-radius: 0.8rem; - background: var(--Gradient-purpleblue-to-skyblue); - color: var(--Gray-cta); - font-family: Pretendard; - font-size: 1.8rem; - font-style: normal; - font-weight: 600; - line-height: normal; - cursor: pointer; -`; diff --git a/components/SignForm/SignForm.tsx b/components/SignForm/SignForm.tsx deleted file mode 100644 index 34bc0a32f..000000000 --- a/components/SignForm/SignForm.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { FormEvent, ReactNode } from 'react'; -import * as S from './SignForm.styled'; -import { Button } from '../Button/Button'; - -function SignForm({ children }: { children: ReactNode }) { - const submitForm = (e: FormEvent) => { - e.preventDefault(); - }; - - return ( - - {children} - - - ); -} - -export default SignForm; diff --git a/hooks/useValidate.ts b/hooks/useValidate.ts index b67f8e3a4..848ec2350 100644 --- a/hooks/useValidate.ts +++ b/hooks/useValidate.ts @@ -2,7 +2,7 @@ import { useState } from 'react'; import { emailCheck } from '@/util/util'; function useValidate() { - const [ok, setOk] = useState(true); + const [ok, setOk] = useState(false); const [textError, setTextError] = useState(''); const [emailError, setEmailError] = useState(''); const [passwordError, setPasswordError] = useState(''); @@ -13,7 +13,6 @@ function useValidate() { setOk(false); setTextError('내용을 다시 입력해주세요'); } else { - setOk(false); setTextError(''); } }; diff --git a/pages/signin.tsx b/pages/signin.tsx index 41526d41c..6257acbb4 100644 --- a/pages/signin.tsx +++ b/pages/signin.tsx @@ -1,30 +1,43 @@ import * as S from '@/styles/signin.styled'; -import SignForm from '@/components/SignForm/SignForm'; -import { ChangeEvent, useState } from 'react'; +import { ChangeEvent, FormEvent, useState } from 'react'; import useValidate from '@/hooks/useValidate'; import Input from '@/components/Input/Input'; import Link from 'next/link'; import Image from 'next/image'; +import { Button } from '@/components/Button/Button'; function SignIn() { const [textHidden, setTextHidden] = useState(true); const [emailValue, setEmailValue] = useState(''); const [passwordValue, setPasswordValue] = useState(''); - const { emailError, passwordError, validateEmail, validatePassword } = + const { ok, emailError, passwordError, validateEmail, validatePassword } = useValidate(); + const submitForm = (e: FormEvent) => { + e.preventDefault(); + if (emailValue && passwordValue) { + if (ok) { + console.log('ok'); + } else { + console.log('no'); + } + } else { + alert('값을 입력하지 않았습니다! 다시 확인해주세요!'); + } + }; + const hiddenText = () => { setTextHidden(!textHidden); }; const changeEmailInput = (e: ChangeEvent) => { setEmailValue(e.target.value); - validateEmail(emailValue); + validateEmail(e.target.value); }; const changePasswordInput = (e: ChangeEvent) => { setPasswordValue(e.target.value); - validatePassword(passwordValue); + validatePassword(e.target.value); }; return ( @@ -42,7 +55,7 @@ function SignIn() { - + @@ -64,7 +77,7 @@ function SignIn() { id="password" placeholder="비밀번호" onChange={changePasswordInput} - error={passwordError} + $error={passwordError} size="md" /> @@ -74,7 +87,10 @@ function SignIn() { {passwordError} )} - + + 소셜 로그인 diff --git a/pages/signup.tsx b/pages/signup.tsx index de2009087..02600c0e6 100644 --- a/pages/signup.tsx +++ b/pages/signup.tsx @@ -1,10 +1,10 @@ import * as S from '@/styles/signin.styled'; -import SignForm from '@/components/SignForm/SignForm'; -import { ChangeEvent, useState } from 'react'; +import { ChangeEvent, FormEvent, useState } from 'react'; import useValidate from '@/hooks/useValidate'; import Input from '@/components/Input/Input'; import Link from 'next/link'; import Image from 'next/image'; +import { Button } from '@/components/Button/Button'; function SignUp() { const [textHidden, setTextHidden] = useState(true); @@ -12,6 +12,7 @@ function SignUp() { const [passwordValue, setPasswordValue] = useState(''); const [confirmValue, setConfirmValue] = useState(''); const { + ok, emailError, passwordError, passwordConfirmError, @@ -20,23 +21,36 @@ function SignUp() { validatePasswordConfirm, } = useValidate(); + const submitForm = (e: FormEvent) => { + e.preventDefault(); + if (emailValue && passwordValue && confirmValue) { + if (ok) { + console.log('ok'); + } else { + console.log('no'); + } + } else { + alert('값을 입력하지 않았습니다! 다시 확인해주세요!'); + } + }; + const hiddenText = () => { setTextHidden(!textHidden); }; const changeEmailInput = (e: ChangeEvent) => { setEmailValue(e.target.value); - validateEmail(emailValue); + validateEmail(e.target.value); }; const changePasswordInput = (e: ChangeEvent) => { setPasswordValue(e.target.value); - validatePassword(passwordValue); + validatePassword(e.target.value); }; const changeConfirmInput = (e: ChangeEvent) => { setConfirmValue(e.target.value); - validatePasswordConfirm(confirmValue, passwordValue); + validatePasswordConfirm(e.target.value, passwordValue); }; return ( @@ -49,12 +63,12 @@ function SignUp() { 이미 회원이신가요? - +

로그인하기

 - + @@ -76,7 +90,7 @@ function SignUp() { id="password" placeholder="비밀번호" onChange={changePasswordInput} - error={passwordError} + $error={passwordError} size="md" /> @@ -86,15 +100,14 @@ function SignUp() { {passwordError} )} - @@ -104,7 +117,10 @@ function SignUp() { {passwordConfirmError} )} - + + 다른 방식으로 가입하기 diff --git a/styles/signin.styled.ts b/styles/signin.styled.ts index 50e48a1c7..8b382c180 100644 --- a/styles/signin.styled.ts +++ b/styles/signin.styled.ts @@ -36,13 +36,6 @@ export const FormLogo = styled.div` margin: 0 auto; `; -export const SignForm = styled.form` - display: flex; - flex-direction: column; - justify-content: flex-start; - gap: 2.4rem; -`; - export const Question = styled.div` display: flex; align-items: center; @@ -156,3 +149,9 @@ export const TextArea = styled.div` display: flex; align-items: center; `; + +export const SignForm = styled.form` + display: flex; + flex-direction: column; + justify-content: flex-start; +`; From 350499f9a6623e523348dfabe446f35b921f1fa6 Mon Sep 17 00:00:00 2001 From: sj0724 Date: Mon, 13 May 2024 16:59:26 +0900 Subject: [PATCH 02/23] =?UTF-8?q?feat:=20=EC=9C=A0=EC=A0=80=20id=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20context=EB=A1=9C=20=EA=B3=B5=EC=9C=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- contexts/UserContext.tsx | 3 +++ hooks/useGetFolder.ts | 4 ++-- hooks/useGetFolderList.ts | 2 +- pages/_app.tsx | 13 +++++++++---- pages/api/api.ts | 4 ++-- pages/folder.tsx | 5 +++-- 6 files changed, 20 insertions(+), 11 deletions(-) create mode 100644 contexts/UserContext.tsx diff --git a/contexts/UserContext.tsx b/contexts/UserContext.tsx new file mode 100644 index 000000000..0aafff5cc --- /dev/null +++ b/contexts/UserContext.tsx @@ -0,0 +1,3 @@ +import { createContext } from 'react'; + +export const UserContext = createContext(''); diff --git a/hooks/useGetFolder.ts b/hooks/useGetFolder.ts index 1cb42ba3f..61e3a93a7 100644 --- a/hooks/useGetFolder.ts +++ b/hooks/useGetFolder.ts @@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'; import { getFolderList } from '../pages/api/api'; export type Link = { - id: number; + id: string; created_at: Date; updated_at?: Date; url: string; @@ -14,7 +14,7 @@ export type Link = { interface Links extends Array {} -function useGetFolder(id: number, searchKeyword: string, folderId: number) { +function useGetFolder(id: string, searchKeyword: string, folderId: number) { const [linkList, setLinkList] = useState([]); const [loading, setLoading] = useState(false); diff --git a/hooks/useGetFolderList.ts b/hooks/useGetFolderList.ts index cb3da7840..8bad3cd95 100644 --- a/hooks/useGetFolderList.ts +++ b/hooks/useGetFolderList.ts @@ -16,7 +16,7 @@ export interface Folder { export interface Folders extends Array {} -function useGetFolderList(userId: number) { +function useGetFolderList(userId: string) { const [link, setLink] = useState([]); useEffect(() => { diff --git a/pages/_app.tsx b/pages/_app.tsx index 076d57d6f..38dcc3e59 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,20 +1,25 @@ import Footer from '@/components/Footer/Footer'; import Nav from '@/components/Nav/Nav'; import { ModalProvider } from '@/contexts/ModalContext'; +import { UserContext } from '@/contexts/UserContext'; import '@/styles/globals.css'; import type { AppProps } from 'next/app'; import Head from 'next/head'; export default function App({ Component, pageProps }: AppProps) { + const id = '1'; + return ( <> Linkbrary -