From 953ddc28880ba74992636147eb3ae8083b547fca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EC=84=B8=EC=A2=85?= Date: Thu, 22 Feb 2024 16:28:28 +0900 Subject: [PATCH 01/17] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1-team-front/src/pages/Auth.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 1-team-front/src/pages/Auth.js diff --git a/1-team-front/src/pages/Auth.js b/1-team-front/src/pages/Auth.js new file mode 100644 index 0000000..cba5656 --- /dev/null +++ b/1-team-front/src/pages/Auth.js @@ -0,0 +1,21 @@ +import styled from 'styled-components' +import SignUp from '../components/SignUp' + +const AuthContainer = styled.div` + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background-color: #202225; +` + +function Auth() { + return ( + + + + ) +} + +export default Auth From 67f7e84fb4e5f4146b0d7b4642bec3b43b63acd5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EC=84=B8=EC=A2=85?= Date: Thu, 22 Feb 2024 16:30:00 +0900 Subject: [PATCH 02/17] =?UTF-8?q?feat:=20=ED=9A=8C=EC=9B=90=EA=B0=80?= =?UTF-8?q?=EC=9E=85=20text=20input=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= =?UTF-8?q?=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/SignUp/UI/Input.js | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 1-team-front/src/components/SignUp/UI/Input.js diff --git a/1-team-front/src/components/SignUp/UI/Input.js b/1-team-front/src/components/SignUp/UI/Input.js new file mode 100644 index 0000000..bf147f3 --- /dev/null +++ b/1-team-front/src/components/SignUp/UI/Input.js @@ -0,0 +1,35 @@ +import styled from 'styled-components' + +const InputWrapper = styled.div` + width: 360px; + & h6 { + color: #b9bbbe; + font-weight: 900; + } + & input { + width: 95%; + height: 30px; + background-color: #18191c; + border-radius: 2px; + margin: 7px 0; + color: #fff; + padding: 5px 10px; + font-size: 0.9rem; + } + & p { + font-size: 0.8rem; + color: #fff; + } +` + +function Input({ text, type, warnning }) { + return ( + +
{text}
+ +

{warnning}

+ + ) +} + +export default Input From 3a83839b74062780fb9a6eb68d04226d2027d9a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EC=84=B8=EC=A2=85?= Date: Thu, 22 Feb 2024 16:31:29 +0900 Subject: [PATCH 03/17] =?UTF-8?q?feat:=20=ED=9A=8C=EC=9B=90=EA=B0=80?= =?UTF-8?q?=EC=9E=85=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1-team-front/src/components/SignUp/SignUp.js | 38 ++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 1-team-front/src/components/SignUp/SignUp.js diff --git a/1-team-front/src/components/SignUp/SignUp.js b/1-team-front/src/components/SignUp/SignUp.js new file mode 100644 index 0000000..7fbe3a3 --- /dev/null +++ b/1-team-front/src/components/SignUp/SignUp.js @@ -0,0 +1,38 @@ +import styled from 'styled-components' +import Input from './UI/Input' + +const SignUpForm = styled.form` + padding: 40px 30px; + background-color: #36393f; + border-radius: 4px; + display: flex; + flex-direction: column; + align-items: center; + gap: 18px; + & h2 { + color: #fff; + } +` + +const SignUpButton = styled.button` + width: 100%; + height: 40px; + border-radius: 2px; + color: #fff; + background-color: #5865f2; +` + +function SignUp() { + return ( + +

계정 만들기

+ + + + + 계속하기 + + ) +} + +export default SignUp From a89b333e6bf6c0282989232e02a9c7030e11787d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EC=84=B8=EC=A2=85?= Date: Sat, 24 Feb 2024 01:19:20 +0900 Subject: [PATCH 04/17] =?UTF-8?q?refactor:=20SignUp=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20html=20=EA=B5=AC=EC=A1=B0=20=EB=B2=88?= =?UTF-8?q?=EA=B2=BD=20=EC=9E=AC=EC=82=AC=EC=9A=A9=EC=84=B1=EB=A7=8C=20?= =?UTF-8?q?=EC=83=9D=EA=B0=81=ED=95=98=EB=A9=B0=20html=EC=9D=84=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=ED=95=98=EB=8B=A4=20=EB=B3=B4=EB=8B=88=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84=EC=97=90=20=EB=AC=B8?= =?UTF-8?q?=EC=A0=9C=EA=B0=80=20=EC=83=9D=EA=B2=A8=20=EC=88=98=EC=A0=95?= =?UTF-8?q?=ED=95=A9=EB=8B=88=EB=8B=A4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1-team-front/src/components/SignUp/SignUp.jsx | 85 +++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 1-team-front/src/components/SignUp/SignUp.jsx diff --git a/1-team-front/src/components/SignUp/SignUp.jsx b/1-team-front/src/components/SignUp/SignUp.jsx new file mode 100644 index 0000000..ffbd3e5 --- /dev/null +++ b/1-team-front/src/components/SignUp/SignUp.jsx @@ -0,0 +1,85 @@ +/* eslint-disable */ + +import styled from 'styled-components'; +import { useState } from 'react'; +import Input from './UI/Input'; + +const SignUpForm = styled.form` + padding: 40px 30px; + background-color: #36393f; + border-radius: 4px; + display: flex; + flex-direction: column; + align-items: center; + gap: 18px; + & h2 { + color: #fff; + } +`; + +const SignUpButton = styled.button` + width: 100%; + height: 40px; + border-radius: 2px; + color: #fff; + background-color: #5865f2; + font-weight: 800; +`; + +const InputBox = styled.div` + width: 360px; + & label { + font-size: 0.8rem; + font-weight: 800; + } + & input { + width: 95%; + height: 30px; + background-color: #18191c; + border-radius: 2px; + margin: 5px 0; + color: #fff; + padding: 5px 10px; + font-size: 0.9rem; + } + & p { + font-size: 0.8rem; + color: #ed4245; + } +`; +const validateEmail = (value) => !value.includes('@'); +const validatePassword = (value) => { + const check = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,20}$/; + return !check.test(value); +}; + +function SignUp() { + return ( + +

계정 만들기

+ + + +

이메일을 입력해 주세요.

+ + + + +

비밀번호는 대문자, 소문자, 숫자, 특수문자 조합을 사용해 주세요.

+ + + + +

비밀번호가 일치하지 않습니다.

+ + + + +

입력하지 않을경우 랜덤 별명이 발급 됩니다.

+ + 계속하기 + + ); +} + +export default SignUp; From 779e6b5e08e33e9897b443bbdaac323d6e5a0075 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EC=84=B8=EC=A2=85?= Date: Sat, 24 Feb 2024 01:48:11 +0900 Subject: [PATCH 05/17] =?UTF-8?q?feat:=20=ED=9A=8C=EC=9B=90=20=EA=B0=80?= =?UTF-8?q?=EC=9E=85=EC=97=90=20=ED=95=84=EC=9A=94=ED=95=9C=20Input=20?= =?UTF-8?q?=EA=B0=92=EB=93=A4=EC=97=90=20=EB=8C=80=ED=95=9C=20=EC=9C=A0?= =?UTF-8?q?=ED=9A=A8=EC=84=B1=20=EA=B2=80=EC=82=AC=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1-team-front/src/components/SignUp/SignUp.jsx | 103 +++++++++++++++--- 1 file changed, 88 insertions(+), 15 deletions(-) diff --git a/1-team-front/src/components/SignUp/SignUp.jsx b/1-team-front/src/components/SignUp/SignUp.jsx index ffbd3e5..bb47d05 100644 --- a/1-team-front/src/components/SignUp/SignUp.jsx +++ b/1-team-front/src/components/SignUp/SignUp.jsx @@ -1,8 +1,7 @@ /* eslint-disable */ -import styled from 'styled-components'; import { useState } from 'react'; -import Input from './UI/Input'; +import styled from 'styled-components'; const SignUpForm = styled.form` padding: 40px 30px; @@ -47,35 +46,109 @@ const InputBox = styled.div` color: #ed4245; } `; -const validateEmail = (value) => !value.includes('@'); -const validatePassword = (value) => { - const check = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,20}$/; - return !check.test(value); -}; function SignUp() { + const [email, setEmail] = useState({ email: '', isWarn: false }); + const [password, setPassword] = useState({ password: '', isWarn: false }); + const [passwordConfirm, setPasswordConfirm] = useState({ + passwordConfirm: '', + isWarn: false, + }); + const [nickName, setNickName] = useState({ nickName: '', isWarn: false }); + + const validateEmail = (value) => value.includes('@'); + const validatePassword = (value) => { + const check = + /^(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,20}$/; + return check.test(value); + }; + const validatePasswordConfirm = (value) => { + console.log(password); + return value === password.password; + }; + const validateNickName = (value) => { + return value.length !== 0; + }; + + const blurHandler = (id, value, setFn, validationFn) => { + if (validationFn(value)) return setFn({ [id]: value, isWarn: false }); + setFn((prev) => { + return { ...prev, isWarn: true }; + }); + }; + return (

계정 만들기

- -

이메일을 입력해 주세요.

+ + blurHandler( + event.target.id, + event.target.value, + setEmail, + validateEmail, + ) + } + /> + {email.isWarn &&

이메일을 입력해 주세요.

} - -

비밀번호는 대문자, 소문자, 숫자, 특수문자 조합을 사용해 주세요.

+ + blurHandler( + event.target.id, + event.target.value, + setPassword, + validatePassword, + ) + } + > + {password.isWarn && ( +

비밀번호는 대문자, 소문자, 숫자, 특수문자 조합을 사용해 주세요.

+ )} - -

비밀번호가 일치하지 않습니다.

+ + blurHandler( + event.target.id, + event.target.value, + setPasswordConfirm, + validatePasswordConfirm, + ) + } + > + {passwordConfirm.isWarn &&

비밀번호가 일치하지 않습니다.

} - -

입력하지 않을경우 랜덤 별명이 발급 됩니다.

+ + blurHandler( + event.target.id, + event.target.value, + setNickName, + validateNickName, + ) + } + > + {nickName.isWarn && ( +

+ 입력하지 않을경우 랜덤 별명이 발급 됩니다. +

+ )} 계속하기 From a5b51ffb05e4a39e3461b79f0cf16a8ca36828bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EC=84=B8=EC=A2=85?= Date: Sat, 24 Feb 2024 12:15:23 +0900 Subject: [PATCH 06/17] =?UTF-8?q?fix:=20eslint=20=EC=84=A4=EC=A0=95?= =?UTF-8?q?=EC=97=90=20=EB=94=B0=EB=A5=B8=20=ED=8C=8C=EC=9D=BC=20=ED=99=95?= =?UTF-8?q?=EC=9E=A5=EC=9E=90=20=EB=B3=80=EA=B2=BD=20(js=20->=20jsx)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1-team-front/src/App.jsx | 6 +-- 1-team-front/src/components/SignUp/SignUp.js | 38 ------------------- 1-team-front/src/components/SignUp/SignUp.jsx | 1 - .../src/components/SignUp/UI/Input.js | 35 ----------------- 1-team-front/src/index.css | 6 +++ 1-team-front/src/pages/{Auth.js => Auth.jsx} | 10 ++--- 6 files changed, 13 insertions(+), 83 deletions(-) delete mode 100644 1-team-front/src/components/SignUp/SignUp.js delete mode 100644 1-team-front/src/components/SignUp/UI/Input.js rename 1-team-front/src/pages/{Auth.js => Auth.jsx} (68%) diff --git a/1-team-front/src/App.jsx b/1-team-front/src/App.jsx index 17cc7f6..c55726f 100644 --- a/1-team-front/src/App.jsx +++ b/1-team-front/src/App.jsx @@ -1,9 +1,7 @@ -import { useState } from 'react' - -import './App.css' +import Auth from './pages/Auth' function App() { - return

hello

+ return } export default App diff --git a/1-team-front/src/components/SignUp/SignUp.js b/1-team-front/src/components/SignUp/SignUp.js deleted file mode 100644 index 7fbe3a3..0000000 --- a/1-team-front/src/components/SignUp/SignUp.js +++ /dev/null @@ -1,38 +0,0 @@ -import styled from 'styled-components' -import Input from './UI/Input' - -const SignUpForm = styled.form` - padding: 40px 30px; - background-color: #36393f; - border-radius: 4px; - display: flex; - flex-direction: column; - align-items: center; - gap: 18px; - & h2 { - color: #fff; - } -` - -const SignUpButton = styled.button` - width: 100%; - height: 40px; - border-radius: 2px; - color: #fff; - background-color: #5865f2; -` - -function SignUp() { - return ( - -

계정 만들기

- - - - - 계속하기 - - ) -} - -export default SignUp diff --git a/1-team-front/src/components/SignUp/SignUp.jsx b/1-team-front/src/components/SignUp/SignUp.jsx index bb47d05..6520e2e 100644 --- a/1-team-front/src/components/SignUp/SignUp.jsx +++ b/1-team-front/src/components/SignUp/SignUp.jsx @@ -63,7 +63,6 @@ function SignUp() { return check.test(value); }; const validatePasswordConfirm = (value) => { - console.log(password); return value === password.password; }; const validateNickName = (value) => { diff --git a/1-team-front/src/components/SignUp/UI/Input.js b/1-team-front/src/components/SignUp/UI/Input.js deleted file mode 100644 index bf147f3..0000000 --- a/1-team-front/src/components/SignUp/UI/Input.js +++ /dev/null @@ -1,35 +0,0 @@ -import styled from 'styled-components' - -const InputWrapper = styled.div` - width: 360px; - & h6 { - color: #b9bbbe; - font-weight: 900; - } - & input { - width: 95%; - height: 30px; - background-color: #18191c; - border-radius: 2px; - margin: 7px 0; - color: #fff; - padding: 5px 10px; - font-size: 0.9rem; - } - & p { - font-size: 0.8rem; - color: #fff; - } -` - -function Input({ text, type, warnning }) { - return ( - -
{text}
- -

{warnning}

- - ) -} - -export default Input diff --git a/1-team-front/src/index.css b/1-team-front/src/index.css index 6119ad9..1373380 100644 --- a/1-team-front/src/index.css +++ b/1-team-front/src/index.css @@ -1,3 +1,9 @@ +* { + margin: 0; + border: 0; + padding: 0; +} + :root { font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; diff --git a/1-team-front/src/pages/Auth.js b/1-team-front/src/pages/Auth.jsx similarity index 68% rename from 1-team-front/src/pages/Auth.js rename to 1-team-front/src/pages/Auth.jsx index cba5656..5afe858 100644 --- a/1-team-front/src/pages/Auth.js +++ b/1-team-front/src/pages/Auth.jsx @@ -1,5 +1,5 @@ -import styled from 'styled-components' -import SignUp from '../components/SignUp' +import styled from 'styled-components'; +import SignUp from '../components/SignUp/SignUp'; const AuthContainer = styled.div` width: 100vw; @@ -8,14 +8,14 @@ const AuthContainer = styled.div` justify-content: center; align-items: center; background-color: #202225; -` +`; function Auth() { return ( - ) + ); } -export default Auth +export default Auth; From 248984660ac53386729f1b47992e0e52e95a686a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EC=84=B8=EC=A2=85?= Date: Sat, 24 Feb 2024 12:16:50 +0900 Subject: [PATCH 07/17] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20html=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1-team-front/src/components/LogIn/LogIn.jsx | 96 +++++++++++++++++++++ 1 file changed, 96 insertions(+) create mode 100644 1-team-front/src/components/LogIn/LogIn.jsx diff --git a/1-team-front/src/components/LogIn/LogIn.jsx b/1-team-front/src/components/LogIn/LogIn.jsx new file mode 100644 index 0000000..887b76c --- /dev/null +++ b/1-team-front/src/components/LogIn/LogIn.jsx @@ -0,0 +1,96 @@ +/* eslint-disable */ +import styled from 'styled-components'; + +const LogInForm = styled.form` + padding: 40px 30px; + background-color: #36393f; + border-radius: 4px; + display: flex; + flex-direction: column; + align-items: center; + gap: 18px; + & h2 { + color: #fff; + } + & span { + font-size: 0.8rem; + color: #00aff4; + cursor: pointer; + } + & span:hover { + text-decoration-line: underline; + } +`; + +const LogInButton = styled.button` + width: 100%; + height: 40px; + border-radius: 2px; + color: #fff; + background-color: #5865f2; + font-weight: 800; +`; + +const InputBox = styled.div` + width: 360px; + & label { + font-size: 0.8rem; + font-weight: 800; + & span { + color: #ed4245; + } + } + & input { + width: 95%; + height: 30px; + background-color: #18191c; + border-radius: 2px; + margin: 5px 0; + color: #fff; + padding: 5px 10px; + font-size: 0.9rem; + } + & p { + font-size: 0.8rem; + font-weight: 600; + color: #ed4245; + } +`; + +const FooterBox = styled.div` + display: flex; + gap: 8px; + & p { + font-size: 0.8rem; + } +`; + +const LogIn = () => { + return ( + +

환영합니다 !

+ + + + + + + + 비밀번호를 잊으셨나요 ? + + 로그인 + +

계정이 필요한가요 ?

+ 가입하기 + + + ); +}; + +export default LogIn; From 032a5fa259e60154cc6c02bc46833ca4e649069d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EC=84=B8=EC=A2=85?= Date: Tue, 5 Mar 2024 21:05:11 +0900 Subject: [PATCH 08/17] =?UTF-8?q?feat:=20react-router-dom=EC=9D=84=20?= =?UTF-8?q?=EC=9D=B4=EC=9A=A9=ED=95=9C=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=99=94=EB=A9=B4=20?= =?UTF-8?q?=EC=A0=84=ED=99=98=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1-team-front/src/App.jsx | 31 ++++++++++++++++++++++++++++--- 1-team-front/src/pages/Auth.jsx | 4 ++-- 2 files changed, 30 insertions(+), 5 deletions(-) diff --git a/1-team-front/src/App.jsx b/1-team-front/src/App.jsx index c55726f..22e603e 100644 --- a/1-team-front/src/App.jsx +++ b/1-team-front/src/App.jsx @@ -1,7 +1,32 @@ -import Auth from './pages/Auth' +/* eslint-disable */ + +import { + createBrowserRouter, + createRoutesFromElements, + Route, + RouterProvider, +} from 'react-router-dom'; +import { QueryClient, QueryClientProvider } from 'react-query'; + +import Auth from './pages/Auth'; +import LogIn from './components/LogIn/LogIn'; + +const queryClient = new QueryClient(); + +const routesDifinition = createRoutesFromElements( + }> + }> + , +); + +const router = createBrowserRouter(routesDifinition); function App() { - return + return ( + + + + ); } -export default App +export default App; diff --git a/1-team-front/src/pages/Auth.jsx b/1-team-front/src/pages/Auth.jsx index 5afe858..67eeea2 100644 --- a/1-team-front/src/pages/Auth.jsx +++ b/1-team-front/src/pages/Auth.jsx @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import SignUp from '../components/SignUp/SignUp'; +import { Outlet } from 'react-router-dom'; const AuthContainer = styled.div` width: 100vw; @@ -13,7 +13,7 @@ const AuthContainer = styled.div` function Auth() { return ( - + ); } From 478db9c427662d5507bcac5d4f2d1eddc20936d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EC=84=B8=EC=A2=85?= Date: Tue, 5 Mar 2024 21:56:52 +0900 Subject: [PATCH 09/17] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1-team-front/src/components/LogIn/LogIn.jsx | 56 +++++++++++++++++++-- 1 file changed, 53 insertions(+), 3 deletions(-) diff --git a/1-team-front/src/components/LogIn/LogIn.jsx b/1-team-front/src/components/LogIn/LogIn.jsx index 887b76c..3a5db5f 100644 --- a/1-team-front/src/components/LogIn/LogIn.jsx +++ b/1-team-front/src/components/LogIn/LogIn.jsx @@ -1,5 +1,9 @@ /* eslint-disable */ +import { useState } from 'react'; import styled from 'styled-components'; +import axios from 'axios'; +import { useMutation } from 'react-query'; +import { useNavigate } from 'react-router-dom'; const LogInForm = styled.form` padding: 40px 30px; @@ -66,22 +70,68 @@ const FooterBox = styled.div` `; const LogIn = () => { + const navigate = useNavigate(); + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [isError, setIsError] = useState(false); + + const fetchLogin = async (data) => { + const url = 'http://localhost:8080/login'; + const payload = data; + return await axios.post(url, payload); + }; + + const submitLogin = useMutation(fetchLogin, { + onSuccess: (res) => { + setIsError(false); + localStorage.clear(); + localStorage.setItem('email', res.data.email); + localStorage.setItem('token', res.data.token); + navigate('/'); + }, + onError: () => { + setIsError(true); + }, + }); + + const chageInputHandler = (value, setFn) => { + setFn(value); + }; + + const loginSubmitHander = (event) => { + event.preventDefault(); + submitLogin.mutate({ email: email, password: password }); + }; + return ( - +

환영합니다 !

- + chageInputHandler(event.target.value, setEmail)} + > - + + chageInputHandler(event.target.value, setPassword) + } + > + {isError &&

이메일 또는 비밀번호가 일치하지 않습니다.

} 비밀번호를 잊으셨나요 ? 로그인 From a2b5587bb72045d5816ace844d41597275f36a4a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EC=84=B8=EC=A2=85?= Date: Wed, 6 Mar 2024 16:09:54 +0900 Subject: [PATCH 10/17] =?UTF-8?q?feat:=20=EB=B9=84=EB=B0=80=EB=B2=88?= =?UTF-8?q?=ED=98=B8=20=EC=B0=BE=EA=B8=B0=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/FindPassword/FindPassword.jsx | 69 +++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 1-team-front/src/components/FindPassword/FindPassword.jsx diff --git a/1-team-front/src/components/FindPassword/FindPassword.jsx b/1-team-front/src/components/FindPassword/FindPassword.jsx new file mode 100644 index 0000000..b8e166a --- /dev/null +++ b/1-team-front/src/components/FindPassword/FindPassword.jsx @@ -0,0 +1,69 @@ +/*eslint-disable*/ + +import styled from 'styled-components'; + +const FindPasswordForm = styled.form` + padding: 40px 30px; + background-color: #36393f; + border-radius: 4px; + display: flex; + flex-direction: column; + align-items: center; + gap: 18px; + & h2 { + color: #fff; + } + & p { + font-size: 0.9rem; + } +`; + +const InputBox = styled.div` + width: 360px; + & label { + font-size: 0.8rem; + font-weight: 800; + & span { + color: #ed4245; + } + } + & input { + width: 95%; + height: 30px; + background-color: #18191c; + border-radius: 2px; + margin: 5px 0; + color: #fff; + padding: 5px 10px; + font-size: 0.9rem; + } + & p { + font-size: 0.8rem; + font-weight: 600; + color: #ed4245; + } +`; +const SubmitButton = styled.button` + width: 100%; + height: 40px; + border-radius: 2px; + color: #fff; + background-color: #5865f2; + font-weight: 800; +`; + +const FindPassword = () => { + return ( + +

비밀번호를 잊으셨나요 ?

+

입력하신 이메일로 비밀번호 재설정 링크를 보내드립니다.

+ + + + + 확인 + + ); +}; + +export default FindPassword; From 142336a809476e50b611aca0527b2f09ce3853d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EC=84=B8=EC=A2=85?= Date: Wed, 6 Mar 2024 16:32:52 +0900 Subject: [PATCH 11/17] =?UTF-8?q?feat:=20=EB=B9=84=EB=B0=80=EB=B2=88?= =?UTF-8?q?=ED=98=B8=20=EC=B0=BE=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/FindPassword/FindPassword.jsx | 50 +++++++++++++++++-- 1 file changed, 46 insertions(+), 4 deletions(-) diff --git a/1-team-front/src/components/FindPassword/FindPassword.jsx b/1-team-front/src/components/FindPassword/FindPassword.jsx index b8e166a..0ad99b6 100644 --- a/1-team-front/src/components/FindPassword/FindPassword.jsx +++ b/1-team-front/src/components/FindPassword/FindPassword.jsx @@ -1,5 +1,8 @@ /*eslint-disable*/ +import axios from 'axios'; +import { useState } from 'react'; +import { useMutation } from 'react-query'; import styled from 'styled-components'; const FindPasswordForm = styled.form` @@ -40,7 +43,7 @@ const InputBox = styled.div` & p { font-size: 0.8rem; font-weight: 600; - color: #ed4245; + color: ${(props) => (props.isSubmit ? '#00aff4' : '#ed4245')}; } `; const SubmitButton = styled.button` @@ -53,13 +56,52 @@ const SubmitButton = styled.button` `; const FindPassword = () => { + const [email, setEmail] = useState(''); + const [isError, setIsError] = useState(false); + const [isSubmit, setIsSubmit] = useState(false); + + const fetchFindPassword = async (data) => { + const url = 'http://localhost:8080/member/password-reissue'; + const payload = data; + return await axios.post(url, payload); + }; + + const submitFindPassword = useMutation(fetchFindPassword, { + onSuccess: () => { + setIsError(false); + setIsSubmit(true); + }, + onError: () => { + setIsSubmit(false); + setIsError(true); + }, + }); + + const emailInputChangeHandler = (value, setFn) => { + setFn(value); + }; + + const findPasswordSubmitHandler = (event) => { + event.preventDefault(); + submitFindPassword.mutate({ email: email }); + }; return ( - +

비밀번호를 잊으셨나요 ?

입력하신 이메일로 비밀번호 재설정 링크를 보내드립니다.

- + - + + emailInputChangeHandler(event.target.value, setEmail) + } + > + {isError &&

이메일이 유효하지 않습니다.

} + {isSubmit && ( +

입력하신 이메일로 비밀번호 재설정 링크를 보냈습니다.

+ )} 확인 From 9eb36a0bdac3b0284addca1d789f33ac7521f42e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EC=84=B8=EC=A2=85?= Date: Thu, 7 Mar 2024 13:38:34 +0900 Subject: [PATCH 12/17] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=EC=84=9C=20?= =?UTF-8?q?=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=20=EC=B0=BE=EA=B8=B0=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20=ED=99=94?= =?UTF-8?q?=EB=A9=B4=20=EC=A0=84=ED=99=98=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1-team-front/src/App.jsx | 2 ++ 1-team-front/src/components/LogIn/LogIn.jsx | 6 +++++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/1-team-front/src/App.jsx b/1-team-front/src/App.jsx index 22e603e..c68a2e8 100644 --- a/1-team-front/src/App.jsx +++ b/1-team-front/src/App.jsx @@ -10,12 +10,14 @@ import { QueryClient, QueryClientProvider } from 'react-query'; import Auth from './pages/Auth'; import LogIn from './components/LogIn/LogIn'; +import FindPassword from './components/FindPassword/FindPassword'; const queryClient = new QueryClient(); const routesDifinition = createRoutesFromElements( }> }> + }> , ); diff --git a/1-team-front/src/components/LogIn/LogIn.jsx b/1-team-front/src/components/LogIn/LogIn.jsx index 3a5db5f..1fed4e1 100644 --- a/1-team-front/src/components/LogIn/LogIn.jsx +++ b/1-team-front/src/components/LogIn/LogIn.jsx @@ -103,6 +103,10 @@ const LogIn = () => { submitLogin.mutate({ email: email, password: password }); }; + const findPasswordClickHandler = () => { + navigate('/auth/find-password'); + }; + return (

환영합니다 !

@@ -132,7 +136,7 @@ const LogIn = () => { } > {isError &&

이메일 또는 비밀번호가 일치하지 않습니다.

} - 비밀번호를 잊으셨나요 ? + 비밀번호를 잊으셨나요 ? 로그인 From 3b1cec81b4205d52233a5d5eaaabb93c24ba6e4c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EC=84=B8=EC=A2=85?= Date: Thu, 7 Mar 2024 16:20:40 +0900 Subject: [PATCH 13/17] =?UTF-8?q?refactor:=20Auth=20=EA=B4=80=EB=A0=A8=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A4=91=EB=B3=B5=20sty?= =?UTF-8?q?led=20=EC=BD=94=EB=93=9C=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1-team-front/src/App.jsx | 4 +- .../src/components/Auth/AuthStyles.jsx | 85 ++++++++++ .../Auth/FindPassword/FindPassword.jsx | 64 ++++++++ .../src/components/Auth/LogIn/LogIn.jsx | 110 +++++++++++++ .../components/{ => Auth}/SignUp/SignUp.jsx | 0 .../components/FindPassword/FindPassword.jsx | 111 ------------- 1-team-front/src/components/LogIn/LogIn.jsx | 150 ------------------ 7 files changed, 261 insertions(+), 263 deletions(-) create mode 100644 1-team-front/src/components/Auth/AuthStyles.jsx create mode 100644 1-team-front/src/components/Auth/FindPassword/FindPassword.jsx create mode 100644 1-team-front/src/components/Auth/LogIn/LogIn.jsx rename 1-team-front/src/components/{ => Auth}/SignUp/SignUp.jsx (100%) delete mode 100644 1-team-front/src/components/FindPassword/FindPassword.jsx delete mode 100644 1-team-front/src/components/LogIn/LogIn.jsx diff --git a/1-team-front/src/App.jsx b/1-team-front/src/App.jsx index c68a2e8..73ef9de 100644 --- a/1-team-front/src/App.jsx +++ b/1-team-front/src/App.jsx @@ -9,8 +9,8 @@ import { import { QueryClient, QueryClientProvider } from 'react-query'; import Auth from './pages/Auth'; -import LogIn from './components/LogIn/LogIn'; -import FindPassword from './components/FindPassword/FindPassword'; +import LogIn from './components/Auth/LogIn/LogIn'; +import FindPassword from './components/Auth/FindPassword/FindPassword'; const queryClient = new QueryClient(); diff --git a/1-team-front/src/components/Auth/AuthStyles.jsx b/1-team-front/src/components/Auth/AuthStyles.jsx new file mode 100644 index 0000000..1d5614b --- /dev/null +++ b/1-team-front/src/components/Auth/AuthStyles.jsx @@ -0,0 +1,85 @@ +import styled, { css } from 'styled-components'; + +const buttonType = { + cancel: css` + background-color: #2f3136; + &:hover { + background-color: #40444b; + } + `, + confirm: css` + background-color: #5865f2; + &:hover { + background-color: #4752c4; + } + `, +}; + +const CardContainer = styled.div` + padding: 40px 30px; + background-color: #36393f; + border-radius: 4px; + display: flex; + flex-direction: column; + align-items: center; + gap: 18px; + & h2 { + color: #fff; + } + & p { + font-size: 0.9rem; + } +`; + +const FormWrapper = styled.form` + display: flex; + flex-direction: column; + align-items: center; + gap: 13px; + & span { + font-size: 0.8rem; + color: #00aff4; + cursor: pointer; + } + & span:hover { + text-decoration-line: underline; + } +`; + +const InputBox = styled.div` + width: 360px; + & label { + font-size: 0.8rem; + font-weight: 800; + & span { + color: #ed4245; + } + } + & input { + width: 95%; + height: 30px; + background-color: #18191c; + border-radius: 2px; + margin: 5px 0; + color: #fff; + padding: 5px 10px; + font-size: 0.9rem; + } + & p { + font-size: 0.8rem; + color: ${(props) => (props.isSubmit ? '#00aff4' : '#ed4245')}; + } +`; + +const Button = styled.button` + width: 100%; + height: 40px; + border-radius: 2px; + color: #fff; + font-weight: 800; + transition: all 0.3s linear; + border: 0; + ${(props) => buttonType[props.buttonType]} +`; + +export { CardContainer, FormWrapper, InputBox, Button }; diff --git a/1-team-front/src/components/Auth/FindPassword/FindPassword.jsx b/1-team-front/src/components/Auth/FindPassword/FindPassword.jsx new file mode 100644 index 0000000..8fbeb9e --- /dev/null +++ b/1-team-front/src/components/Auth/FindPassword/FindPassword.jsx @@ -0,0 +1,64 @@ +/*eslint-disable*/ + +import axios from 'axios'; +import { useState } from 'react'; +import { useMutation } from 'react-query'; + +import { CardContainer, FormWrapper, InputBox, Button } from '../AuthStyles'; + +const FindPassword = () => { + const [email, setEmail] = useState(''); + const [isError, setIsError] = useState(false); + const [isSubmit, setIsSubmit] = useState(false); + + const fetchFindPassword = async (data) => { + const url = 'http://localhost:8080/member/password-reissue'; + const payload = data; + return await axios.post(url, payload); + }; + + const submitFindPassword = useMutation(fetchFindPassword, { + onSuccess: () => { + setIsError(false); + setIsSubmit(true); + }, + onError: () => { + setIsSubmit(false); + setIsError(true); + }, + }); + + const emailInputChangeHandler = (value, setFn) => { + setFn(value); + }; + + const findPasswordSubmitHandler = (event) => { + event.preventDefault(); + submitFindPassword.mutate({ email: email }); + }; + return ( + +

비밀번호를 잊으셨나요 ?

+

입력하신 이메일로 비밀번호 재설정 링크를 보내드립니다.

+ + + + + emailInputChangeHandler(event.target.value, setEmail) + } + > + {isError &&

이메일이 유효하지 않습니다.

} + {isSubmit && ( +

입력하신 이메일로 비밀번호 재설정 링크를 보냈습니다.

+ )} + + + + + ); +}; + +export default FindPassword; diff --git a/1-team-front/src/components/Auth/LogIn/LogIn.jsx b/1-team-front/src/components/Auth/LogIn/LogIn.jsx new file mode 100644 index 0000000..61083a1 --- /dev/null +++ b/1-team-front/src/components/Auth/LogIn/LogIn.jsx @@ -0,0 +1,110 @@ +/* eslint-disable */ +import { useState } from 'react'; +import styled from 'styled-components'; +import axios from 'axios'; +import { useMutation } from 'react-query'; +import { useNavigate } from 'react-router-dom'; + +import { CardContainer, FormWrapper, InputBox, Button } from '../AuthStyles'; + +const FooterBox = styled.div` + display: flex; + gap: 8px; + & p { + font-size: 0.8rem; + } + & span { + font-size: 0.8rem; + color: #00aff4; + cursor: pointer; + } + & span:hover { + text-decoration-line: underline; + } +`; + +const LogIn = () => { + const navigate = useNavigate(); + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [isError, setIsError] = useState(false); + + const fetchLogin = async (data) => { + const url = 'http://localhost:8080/login'; + const payload = data; + return await axios.post(url, payload); + }; + + const submitLogin = useMutation(fetchLogin, { + onSuccess: (res) => { + setIsError(false); + localStorage.clear(); + localStorage.setItem('email', res.data.email); + localStorage.setItem('token', res.data.token); + navigate('/'); + }, + onError: () => { + setIsError(true); + }, + }); + + const chageInputHandler = (value, setFn) => { + setFn(value); + }; + + const loginSubmitHander = (event) => { + event.preventDefault(); + submitLogin.mutate({ email: email, password: password }); + }; + + const findPasswordClickHandler = () => { + navigate('/auth/find-password'); + }; + + return ( + +

환영합니다 !

+ + + + + chageInputHandler(event.target.value, setEmail) + } + > + + + + + chageInputHandler(event.target.value, setPassword) + } + > + {isError &&

이메일 또는 비밀번호가 일치하지 않습니다.

} + + 비밀번호를 잊으셨나요 ? + + + + + +

계정이 필요한가요 ?

+ 가입하기 + + + ); +}; + +export default LogIn; diff --git a/1-team-front/src/components/SignUp/SignUp.jsx b/1-team-front/src/components/Auth/SignUp/SignUp.jsx similarity index 100% rename from 1-team-front/src/components/SignUp/SignUp.jsx rename to 1-team-front/src/components/Auth/SignUp/SignUp.jsx diff --git a/1-team-front/src/components/FindPassword/FindPassword.jsx b/1-team-front/src/components/FindPassword/FindPassword.jsx deleted file mode 100644 index 0ad99b6..0000000 --- a/1-team-front/src/components/FindPassword/FindPassword.jsx +++ /dev/null @@ -1,111 +0,0 @@ -/*eslint-disable*/ - -import axios from 'axios'; -import { useState } from 'react'; -import { useMutation } from 'react-query'; -import styled from 'styled-components'; - -const FindPasswordForm = styled.form` - padding: 40px 30px; - background-color: #36393f; - border-radius: 4px; - display: flex; - flex-direction: column; - align-items: center; - gap: 18px; - & h2 { - color: #fff; - } - & p { - font-size: 0.9rem; - } -`; - -const InputBox = styled.div` - width: 360px; - & label { - font-size: 0.8rem; - font-weight: 800; - & span { - color: #ed4245; - } - } - & input { - width: 95%; - height: 30px; - background-color: #18191c; - border-radius: 2px; - margin: 5px 0; - color: #fff; - padding: 5px 10px; - font-size: 0.9rem; - } - & p { - font-size: 0.8rem; - font-weight: 600; - color: ${(props) => (props.isSubmit ? '#00aff4' : '#ed4245')}; - } -`; -const SubmitButton = styled.button` - width: 100%; - height: 40px; - border-radius: 2px; - color: #fff; - background-color: #5865f2; - font-weight: 800; -`; - -const FindPassword = () => { - const [email, setEmail] = useState(''); - const [isError, setIsError] = useState(false); - const [isSubmit, setIsSubmit] = useState(false); - - const fetchFindPassword = async (data) => { - const url = 'http://localhost:8080/member/password-reissue'; - const payload = data; - return await axios.post(url, payload); - }; - - const submitFindPassword = useMutation(fetchFindPassword, { - onSuccess: () => { - setIsError(false); - setIsSubmit(true); - }, - onError: () => { - setIsSubmit(false); - setIsError(true); - }, - }); - - const emailInputChangeHandler = (value, setFn) => { - setFn(value); - }; - - const findPasswordSubmitHandler = (event) => { - event.preventDefault(); - submitFindPassword.mutate({ email: email }); - }; - return ( - -

비밀번호를 잊으셨나요 ?

-

입력하신 이메일로 비밀번호 재설정 링크를 보내드립니다.

- - - - emailInputChangeHandler(event.target.value, setEmail) - } - > - {isError &&

이메일이 유효하지 않습니다.

} - {isSubmit && ( -

입력하신 이메일로 비밀번호 재설정 링크를 보냈습니다.

- )} - - 확인 - - ); -}; - -export default FindPassword; diff --git a/1-team-front/src/components/LogIn/LogIn.jsx b/1-team-front/src/components/LogIn/LogIn.jsx deleted file mode 100644 index 1fed4e1..0000000 --- a/1-team-front/src/components/LogIn/LogIn.jsx +++ /dev/null @@ -1,150 +0,0 @@ -/* eslint-disable */ -import { useState } from 'react'; -import styled from 'styled-components'; -import axios from 'axios'; -import { useMutation } from 'react-query'; -import { useNavigate } from 'react-router-dom'; - -const LogInForm = styled.form` - padding: 40px 30px; - background-color: #36393f; - border-radius: 4px; - display: flex; - flex-direction: column; - align-items: center; - gap: 18px; - & h2 { - color: #fff; - } - & span { - font-size: 0.8rem; - color: #00aff4; - cursor: pointer; - } - & span:hover { - text-decoration-line: underline; - } -`; - -const LogInButton = styled.button` - width: 100%; - height: 40px; - border-radius: 2px; - color: #fff; - background-color: #5865f2; - font-weight: 800; -`; - -const InputBox = styled.div` - width: 360px; - & label { - font-size: 0.8rem; - font-weight: 800; - & span { - color: #ed4245; - } - } - & input { - width: 95%; - height: 30px; - background-color: #18191c; - border-radius: 2px; - margin: 5px 0; - color: #fff; - padding: 5px 10px; - font-size: 0.9rem; - } - & p { - font-size: 0.8rem; - font-weight: 600; - color: #ed4245; - } -`; - -const FooterBox = styled.div` - display: flex; - gap: 8px; - & p { - font-size: 0.8rem; - } -`; - -const LogIn = () => { - const navigate = useNavigate(); - const [email, setEmail] = useState(''); - const [password, setPassword] = useState(''); - const [isError, setIsError] = useState(false); - - const fetchLogin = async (data) => { - const url = 'http://localhost:8080/login'; - const payload = data; - return await axios.post(url, payload); - }; - - const submitLogin = useMutation(fetchLogin, { - onSuccess: (res) => { - setIsError(false); - localStorage.clear(); - localStorage.setItem('email', res.data.email); - localStorage.setItem('token', res.data.token); - navigate('/'); - }, - onError: () => { - setIsError(true); - }, - }); - - const chageInputHandler = (value, setFn) => { - setFn(value); - }; - - const loginSubmitHander = (event) => { - event.preventDefault(); - submitLogin.mutate({ email: email, password: password }); - }; - - const findPasswordClickHandler = () => { - navigate('/auth/find-password'); - }; - - return ( - -

환영합니다 !

- - - chageInputHandler(event.target.value, setEmail)} - > - - - - - chageInputHandler(event.target.value, setPassword) - } - > - {isError &&

이메일 또는 비밀번호가 일치하지 않습니다.

} - 비밀번호를 잊으셨나요 ? - - 로그인 - -

계정이 필요한가요 ?

- 가입하기 - - - ); -}; - -export default LogIn; From e5d3f9cba99e4a2997adec6b526bc1af581bd1bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EC=84=B8=EC=A2=85?= Date: Thu, 7 Mar 2024 16:59:49 +0900 Subject: [PATCH 14/17] =?UTF-8?q?refactor:=20=EA=B3=B5=ED=86=B5=20span=20?= =?UTF-8?q?=ED=83=9C=EA=B7=B8=20=EB=B3=84=EB=8F=84=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=EB=93=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= =?UTF-8?q?=EB=A1=9C=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Auth/AuthStyles.jsx | 13 ++++++++++++- .../src/components/Auth/LogIn/LogIn.jsx | 18 ++++++++---------- 2 files changed, 20 insertions(+), 11 deletions(-) diff --git a/1-team-front/src/components/Auth/AuthStyles.jsx b/1-team-front/src/components/Auth/AuthStyles.jsx index 1d5614b..be0e3d3 100644 --- a/1-team-front/src/components/Auth/AuthStyles.jsx +++ b/1-team-front/src/components/Auth/AuthStyles.jsx @@ -82,4 +82,15 @@ const Button = styled.button` ${(props) => buttonType[props.buttonType]} `; -export { CardContainer, FormWrapper, InputBox, Button }; +const SpanButton = styled.span` + & span { + font-size: 0.8rem; + color: #00aff4; + cursor: pointer; + } + & span:hover { + text-decoration-line: underline; + } +`; + +export { CardContainer, FormWrapper, InputBox, Button, SpanButton }; diff --git a/1-team-front/src/components/Auth/LogIn/LogIn.jsx b/1-team-front/src/components/Auth/LogIn/LogIn.jsx index 61083a1..85abb2a 100644 --- a/1-team-front/src/components/Auth/LogIn/LogIn.jsx +++ b/1-team-front/src/components/Auth/LogIn/LogIn.jsx @@ -5,7 +5,13 @@ import axios from 'axios'; import { useMutation } from 'react-query'; import { useNavigate } from 'react-router-dom'; -import { CardContainer, FormWrapper, InputBox, Button } from '../AuthStyles'; +import { + CardContainer, + FormWrapper, + InputBox, + Button, + SpanButton, +} from '../AuthStyles'; const FooterBox = styled.div` display: flex; @@ -13,14 +19,6 @@ const FooterBox = styled.div` & p { font-size: 0.8rem; } - & span { - font-size: 0.8rem; - color: #00aff4; - cursor: pointer; - } - & span:hover { - text-decoration-line: underline; - } `; const LogIn = () => { @@ -101,7 +99,7 @@ const LogIn = () => {

계정이 필요한가요 ?

- 가입하기 + 가입하기 ); From 3a244fc7aef0494414249319b172a6d5fa856a40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EC=84=B8=EC=A2=85?= Date: Thu, 7 Mar 2024 17:12:39 +0900 Subject: [PATCH 15/17] =?UTF-8?q?refactor:=20=EB=B2=84=ED=8A=BC=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EC=82=AC=EC=9A=A9=EB=90=98=EB=8A=94=20span=20?= =?UTF-8?q?=ED=83=9C=EA=B7=B8=20SpanButton=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Auth/AuthStyles.jsx | 20 +++++-------------- .../Auth/FindPassword/FindPassword.jsx | 2 +- .../src/components/Auth/LogIn/LogIn.jsx | 7 ++----- 3 files changed, 8 insertions(+), 21 deletions(-) diff --git a/1-team-front/src/components/Auth/AuthStyles.jsx b/1-team-front/src/components/Auth/AuthStyles.jsx index be0e3d3..9d22394 100644 --- a/1-team-front/src/components/Auth/AuthStyles.jsx +++ b/1-team-front/src/components/Auth/AuthStyles.jsx @@ -36,14 +36,6 @@ const FormWrapper = styled.form` flex-direction: column; align-items: center; gap: 13px; - & span { - font-size: 0.8rem; - color: #00aff4; - cursor: pointer; - } - & span:hover { - text-decoration-line: underline; - } `; const InputBox = styled.div` @@ -67,7 +59,7 @@ const InputBox = styled.div` } & p { font-size: 0.8rem; - color: ${(props) => (props.isSubmit ? '#00aff4' : '#ed4245')}; + color: ${(props) => (props.isBlue ? '#00aff4' : '#ed4245')}; } `; @@ -83,12 +75,10 @@ const Button = styled.button` `; const SpanButton = styled.span` - & span { - font-size: 0.8rem; - color: #00aff4; - cursor: pointer; - } - & span:hover { + font-size: 0.8rem; + color: #00aff4; + cursor: pointer; + &:hover { text-decoration-line: underline; } `; diff --git a/1-team-front/src/components/Auth/FindPassword/FindPassword.jsx b/1-team-front/src/components/Auth/FindPassword/FindPassword.jsx index 8fbeb9e..d8e969f 100644 --- a/1-team-front/src/components/Auth/FindPassword/FindPassword.jsx +++ b/1-team-front/src/components/Auth/FindPassword/FindPassword.jsx @@ -41,7 +41,7 @@ const FindPassword = () => {

비밀번호를 잊으셨나요 ?

입력하신 이메일로 비밀번호 재설정 링크를 보내드립니다.

- + { @@ -91,9 +88,9 @@ const LogIn = () => { } > {isError &&

이메일 또는 비밀번호가 일치하지 않습니다.

} - + 비밀번호를 잊으셨나요 ? - + From 67640e386ca7cec700f2e4c3e8e5030685185ed2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EC=84=B8=EC=A2=85?= Date: Fri, 8 Mar 2024 19:36:16 +0900 Subject: [PATCH 16/17] =?UTF-8?q?refactor:=20useAuthMutation=20=EC=9D=B4?= =?UTF-8?q?=EC=9A=A9=20=EB=A1=9C=EA=B7=B8=EC=9D=B8,=20=EB=B9=84=EB=B0=80?= =?UTF-8?q?=EB=B2=88=ED=98=B8=20=EC=B0=BE=EA=B8=B0=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Auth/FindPassword/FindPassword.jsx | 37 +++++++++--------- .../src/components/Auth/LogIn/LogIn.jsx | 38 +++++++++---------- .../src/hooks/Auth/useAuthMutation.js | 15 ++++++++ 3 files changed, 49 insertions(+), 41 deletions(-) create mode 100644 1-team-front/src/hooks/Auth/useAuthMutation.js diff --git a/1-team-front/src/components/Auth/FindPassword/FindPassword.jsx b/1-team-front/src/components/Auth/FindPassword/FindPassword.jsx index d8e969f..0ce1030 100644 --- a/1-team-front/src/components/Auth/FindPassword/FindPassword.jsx +++ b/1-team-front/src/components/Auth/FindPassword/FindPassword.jsx @@ -1,32 +1,17 @@ /*eslint-disable*/ - -import axios from 'axios'; import { useState } from 'react'; -import { useMutation } from 'react-query'; import { CardContainer, FormWrapper, InputBox, Button } from '../AuthStyles'; +import useAuthMutation from '../../../hooks/Auth/useAuthMutation'; const FindPassword = () => { const [email, setEmail] = useState(''); const [isError, setIsError] = useState(false); const [isSubmit, setIsSubmit] = useState(false); - const fetchFindPassword = async (data) => { - const url = 'http://localhost:8080/member/password-reissue'; - const payload = data; - return await axios.post(url, payload); - }; - - const submitFindPassword = useMutation(fetchFindPassword, { - onSuccess: () => { - setIsError(false); - setIsSubmit(true); - }, - onError: () => { - setIsSubmit(false); - setIsError(true); - }, - }); + const fetchFindPassword = useAuthMutation( + 'http://localhost:8080/member/password-reissue', + ); const emailInputChangeHandler = (value, setFn) => { setFn(value); @@ -34,7 +19,19 @@ const FindPassword = () => { const findPasswordSubmitHandler = (event) => { event.preventDefault(); - submitFindPassword.mutate({ email: email }); + fetchFindPassword.mutate( + { email: email }, + { + onSuccess: () => { + setIsError(false); + setIsSubmit(true); + }, + onError: () => { + setIsSubmit(false); + setIsError(true); + }, + }, + ); }; return ( diff --git a/1-team-front/src/components/Auth/LogIn/LogIn.jsx b/1-team-front/src/components/Auth/LogIn/LogIn.jsx index 5c837ae..0833e1f 100644 --- a/1-team-front/src/components/Auth/LogIn/LogIn.jsx +++ b/1-team-front/src/components/Auth/LogIn/LogIn.jsx @@ -1,8 +1,6 @@ /* eslint-disable */ import { useState } from 'react'; import styled from 'styled-components'; -import axios from 'axios'; -import { useMutation } from 'react-query'; import { useNavigate } from 'react-router-dom'; import { @@ -12,6 +10,7 @@ import { Button, SpanButton, } from '../AuthStyles'; +import useAuthMutation from '../../../hooks/Auth/useAuthMutation'; const FooterBox = styled.div` display: flex; @@ -24,24 +23,7 @@ const LogIn = () => { const [password, setPassword] = useState(''); const [isError, setIsError] = useState(false); - const fetchLogin = async (data) => { - const url = 'http://localhost:8080/login'; - const payload = data; - return await axios.post(url, payload); - }; - - const submitLogin = useMutation(fetchLogin, { - onSuccess: (res) => { - setIsError(false); - localStorage.clear(); - localStorage.setItem('email', res.data.email); - localStorage.setItem('token', res.data.token); - navigate('/'); - }, - onError: () => { - setIsError(true); - }, - }); + const fetchLogin = useAuthMutation('http://localhost:8080/login'); const chageInputHandler = (value, setFn) => { setFn(value); @@ -49,7 +31,21 @@ const LogIn = () => { const loginSubmitHander = (event) => { event.preventDefault(); - submitLogin.mutate({ email: email, password: password }); + fetchLogin.mutate( + { email: email, password: password }, + { + onSuccess: (res) => { + setIsError(false); + localStorage.clear(); + localStorage.setItem('email', res.data.email); + localStorage.setItem('token', res.data.token); + navigate('/'); + }, + onError: () => { + setIsError(true); + }, + }, + ); }; const findPasswordClickHandler = () => { diff --git a/1-team-front/src/hooks/Auth/useAuthMutation.js b/1-team-front/src/hooks/Auth/useAuthMutation.js new file mode 100644 index 0000000..2812a09 --- /dev/null +++ b/1-team-front/src/hooks/Auth/useAuthMutation.js @@ -0,0 +1,15 @@ +/* eslint-disable */ + +import axios from 'axios'; +import { useMutation } from 'react-query'; + +const useAuthMutation = (url) => { + const { mutate, ...rest } = useMutation(async (payload) => { + const response = await axios.post(url, payload); + return response.data; + }); + + return { mutate, ...rest }; +}; + +export default useAuthMutation; From 695486807119094b47369974c5d8624bd8dc8a76 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EC=84=B8=EC=A2=85?= Date: Sat, 9 Mar 2024 15:37:40 +0900 Subject: [PATCH 17/17] =?UTF-8?q?refactor:=20input=20blur=20=EC=9D=B4?= =?UTF-8?q?=EB=B2=A4=ED=8A=B8=20=EC=B2=98=EB=A6=AC=20=EB=B3=84=EB=8F=84=20?= =?UTF-8?q?hook=EC=9C=BC=EB=A1=9C=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Auth/FindPassword/FindPassword.jsx | 15 +++------------ .../src/components/Auth/LogIn/LogIn.jsx | 19 +++++-------------- 1-team-front/src/hooks/Auth/useBlurHandler.js | 13 +++++++++++++ 3 files changed, 21 insertions(+), 26 deletions(-) create mode 100644 1-team-front/src/hooks/Auth/useBlurHandler.js diff --git a/1-team-front/src/components/Auth/FindPassword/FindPassword.jsx b/1-team-front/src/components/Auth/FindPassword/FindPassword.jsx index 0ce1030..00a0f28 100644 --- a/1-team-front/src/components/Auth/FindPassword/FindPassword.jsx +++ b/1-team-front/src/components/Auth/FindPassword/FindPassword.jsx @@ -3,9 +3,10 @@ import { useState } from 'react'; import { CardContainer, FormWrapper, InputBox, Button } from '../AuthStyles'; import useAuthMutation from '../../../hooks/Auth/useAuthMutation'; +import useBlurHandler from '../../../hooks/Auth/useBlurHandler'; const FindPassword = () => { - const [email, setEmail] = useState(''); + const [email, setEmail] = useBlurHandler(''); const [isError, setIsError] = useState(false); const [isSubmit, setIsSubmit] = useState(false); @@ -13,10 +14,6 @@ const FindPassword = () => { 'http://localhost:8080/member/password-reissue', ); - const emailInputChangeHandler = (value, setFn) => { - setFn(value); - }; - const findPasswordSubmitHandler = (event) => { event.preventDefault(); fetchFindPassword.mutate( @@ -40,13 +37,7 @@ const FindPassword = () => { - - emailInputChangeHandler(event.target.value, setEmail) - } - > + setEmail(event)}> {isError &&

이메일이 유효하지 않습니다.

} {isSubmit && (

입력하신 이메일로 비밀번호 재설정 링크를 보냈습니다.

diff --git a/1-team-front/src/components/Auth/LogIn/LogIn.jsx b/1-team-front/src/components/Auth/LogIn/LogIn.jsx index 0833e1f..6a521a9 100644 --- a/1-team-front/src/components/Auth/LogIn/LogIn.jsx +++ b/1-team-front/src/components/Auth/LogIn/LogIn.jsx @@ -11,6 +11,7 @@ import { SpanButton, } from '../AuthStyles'; import useAuthMutation from '../../../hooks/Auth/useAuthMutation'; +import useBlurHandler from '../../../hooks/Auth/useBlurHandler'; const FooterBox = styled.div` display: flex; @@ -19,16 +20,12 @@ const FooterBox = styled.div` const LogIn = () => { const navigate = useNavigate(); - const [email, setEmail] = useState(''); - const [password, setPassword] = useState(''); + const [email, setEmail] = useBlurHandler(''); + const [password, setPassword] = useBlurHandler(''); const [isError, setIsError] = useState(false); const fetchLogin = useAuthMutation('http://localhost:8080/login'); - const chageInputHandler = (value, setFn) => { - setFn(value); - }; - const loginSubmitHander = (event) => { event.preventDefault(); fetchLogin.mutate( @@ -64,10 +61,7 @@ const LogIn = () => { - chageInputHandler(event.target.value, setEmail) - } + onBlur={(event) => setEmail(event)} > @@ -78,10 +72,7 @@ const LogIn = () => { - chageInputHandler(event.target.value, setPassword) - } + onBlur={(event) => setPassword(event)} > {isError &&

이메일 또는 비밀번호가 일치하지 않습니다.

} diff --git a/1-team-front/src/hooks/Auth/useBlurHandler.js b/1-team-front/src/hooks/Auth/useBlurHandler.js new file mode 100644 index 0000000..84b65cc --- /dev/null +++ b/1-team-front/src/hooks/Auth/useBlurHandler.js @@ -0,0 +1,13 @@ +import { useState } from 'react'; + +const useBlurHandler = (initialValue) => { + const [inputValue, setInputValue] = useState(initialValue); + + const blurHandler = (event) => { + setInputValue(event.target.value); + }; + + return [inputValue, blurHandler]; +}; + +export default useBlurHandler;