From dabc63c4e8ffc5c5edd89bd9df78804b63ff8d99 Mon Sep 17 00:00:00 2001 From: doradora523 Date: Wed, 28 Jun 2023 19:51:15 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=9E=AC=EC=82=AC=EC=9A=A9=20=EB=90=A0?= =?UTF-8?q?=20IdPasswordForm=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 30 ++++----- src/components/common/IdPasswordForm.jsx | 45 +++++++++++++ src/components/common/Input.jsx | 9 ++- src/pages/RegisterPage.jsx | 86 +++++++++--------------- src/pages/SignInPage.jsx | 20 +++--- src/pages/WritingPage.jsx | 3 - 6 files changed, 109 insertions(+), 84 deletions(-) create mode 100644 src/components/common/IdPasswordForm.jsx diff --git a/src/App.js b/src/App.js index 434fea0..658fde2 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,4 @@ -import { BrowserRouter, Routes, Route } from 'react-router-dom'; +import { Routes, Route } from 'react-router-dom'; import './styles/App.css'; import 'tailwindcss/tailwind.css'; @@ -19,21 +19,19 @@ function App() { return (
- - - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - - + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> +
); diff --git a/src/components/common/IdPasswordForm.jsx b/src/components/common/IdPasswordForm.jsx new file mode 100644 index 0000000..8e37508 --- /dev/null +++ b/src/components/common/IdPasswordForm.jsx @@ -0,0 +1,45 @@ +import React from 'react'; +import Input from './Input'; + +const IdPasswordForm = ({ key, label, type, value, onChange, color, errors, readOnly }) => { + // readOnly 사용시 readOnly={true} 내려주기 + return ( +
+ +
+ + {type === 'password' && ( + + {/* 아이콘 SVG 코드 */} + + )} +
+ {errors.isError && ( + + {errors.message} + + )} +
+ ); +}; + +export default IdPasswordForm; diff --git a/src/components/common/Input.jsx b/src/components/common/Input.jsx index 7e1e783..d4e626f 100644 --- a/src/components/common/Input.jsx +++ b/src/components/common/Input.jsx @@ -5,9 +5,15 @@ const StyledInput = styled.input` width: ${(props) => props.width || '360px'}; margin-bottom: ${(props) => props.mb || 0}; border-color: ${(props) => props.color}; + background: ${(props) => (props.readOnly ? '#ccc' : '#fff')}; + color: ${(props) => (props.readOnly ? '#6B6B6B' : '#6B6B6B')}; + + &:focus { + outline: ${(props) => (props.readOnly ? 'none' : '')}; + } `; -function Input({ type, onChange, placeholder, name, width, mb, color, autoComplete }) { +function Input({ type, onChange, placeholder, name, width, mb, color, autoComplete, readOnly }) { return ( ); } diff --git a/src/pages/RegisterPage.jsx b/src/pages/RegisterPage.jsx index 217ccd2..185071f 100644 --- a/src/pages/RegisterPage.jsx +++ b/src/pages/RegisterPage.jsx @@ -2,21 +2,8 @@ import React, { useState, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import Input from '../components/common/Input'; import TextAndBackBar from '../components/common/navBar/TextAndBackBar'; -import styled from 'styled-components'; import LongButton from '../components/common/LongButton'; - -const InputWrapper = styled.div` - display: flex; - flex-wrap: wrap; - width: 360px; - height: 77px; - margin-bottom: 40px; -`; - -const StyledLabel = styled.label` - width: 100%; - font-size: 14px; -`; +import IdPasswordForm from '../components/common/IdPasswordForm'; const RegisterPage = () => { const inputFields = [ @@ -144,53 +131,44 @@ const RegisterPage = () => { <>
- {inputFields.map((field) => ( - - {field.label} -
- + {/* 아이디, 비밀번호, 비밀번호 재확인 */} + {inputFields.slice(0, 3).map((field) => ( + + validateField(field.id, event.target.value)} + errors={errors[field.id]} + /> + + ))} + + {/* 닉네임 */} +
+ +
+ validateField('nickname', event.target.value)} /> - {field.type === 'password' && ( - - - - )}
- {errors[field.id] && ( - - {errors[field.id].message} + {errors.nickname && ( + + {errors.nickname.message} )} - - ))} +
+
diff --git a/src/pages/SignInPage.jsx b/src/pages/SignInPage.jsx index 18c020f..ae76760 100644 --- a/src/pages/SignInPage.jsx +++ b/src/pages/SignInPage.jsx @@ -8,7 +8,8 @@ const SignInPage = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [loginSuccess, setLoginSuccess] = useState(false); - const [errorMessgae, setErrorMessage] = useState('일치하는 회원정보가 없거나, 비밀번호가 일치하지 않습니다.'); + const [errorMessage, setErrorMessage] = useState(''); + const [isButtonClicked, setIsButtonClicked] = useState(false); const navigate = useNavigate(); @@ -24,18 +25,17 @@ const SignInPage = () => { }; const handleSignIn = () => { + setIsButtonClicked(true); try { // API 호출 및 응답 받기 if (loginSuccess) { navigate('/'); } else { console.log('로그인 실패'); + setErrorMessage('일치하는 회원정보가 없거나, 비밀번호가 일치하지 않습니다.'); + setLoginSuccess(false); } - } catch (error) { - console.error('로그인 에러:', error); - setErrorMessage(error.message); - setLoginSuccess(false); - } + } catch (error) {} }; const handleMoveRegisterPage = () => { @@ -51,17 +51,17 @@ const SignInPage = () => { placeholder={'아이디(이메일) 입력'} mb={'15px'} onChange={onChangeHandler} - color={!loginSuccess ? '#ff0000' : '#d9d9d9'} + color={isButtonClicked && !loginSuccess ? '#ff0000' : '#d9d9d9'} /> - {!loginSuccess && ( - {errorMessgae} + {!loginSuccess && isButtonClicked && ( + {errorMessage} )} diff --git a/src/pages/WritingPage.jsx b/src/pages/WritingPage.jsx index 04d4879..d1ee6e5 100644 --- a/src/pages/WritingPage.jsx +++ b/src/pages/WritingPage.jsx @@ -9,7 +9,6 @@ import { CATEGORY, TOTAL_AMOUNT, MAXIMUM_PEOPLE, - DESIRED_PLACE, PLEASE_WRITE_TEXT, DONE, } from '../static/constants'; @@ -83,8 +82,6 @@ function WritingPage() { - -