From 5f364aba13e0c504ad0d85b6803388f3e990db52 Mon Sep 17 00:00:00 2001 From: bubbletea03 Date: Sun, 12 Feb 2023 02:53:21 +0900 Subject: [PATCH 01/21] =?UTF-8?q?refactor:=20RegisterPage=EC=97=90=20handl?= =?UTF-8?q?eInput=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- bubbletea03-my-app/src/page/RegisterPage.js | 77 ++++++++++----------- bubbletea03-my-app/src/page/WritingPage.js | 38 +++++----- 2 files changed, 57 insertions(+), 58 deletions(-) diff --git a/bubbletea03-my-app/src/page/RegisterPage.js b/bubbletea03-my-app/src/page/RegisterPage.js index 81b12d6..5df5088 100644 --- a/bubbletea03-my-app/src/page/RegisterPage.js +++ b/bubbletea03-my-app/src/page/RegisterPage.js @@ -14,79 +14,74 @@ export default function RegisterPage() { nickName: '', }); - const handleSubmit = function() { + // TODO + // TODO: 회원가입과 로그인 페이지가 완전 겹침. 하나의 커스텀 컴포넌트를 만들고, input 개수 조절가능하게 가자. + // TODO + + const handleSubmit = function (e) { + e.preventDefault() axios({ method: 'post', url: 'http://103.218.158.186/api/user/signup', - headers: { - 'Content-Type': 'application/json' - }, + headers: { + 'Content-Type': 'application/json' + }, data: JSON.stringify(inputState) }) - .then((response) => { - console.log(JSON.stringify(response.data)); - }) - .catch((error) => { - console.log(error); - setWarningModalMsg(error.response.data.message); - }); + .then((response) => { + console.log(JSON.stringify(response.data)); + }) + .catch((error) => { + console.log(error); + setWarningModalMsg(error.response.data.message); + }); + } + + const handleInput = function (e) { + // Key값은 대괄호로 묶어야 실제값이 Key가 된다. (대괄호안쓰면 string으로 쳐서 SyntaxError뜸) + setInputState({ ...inputState, [e.target.name]: e.target.value }); + setWarningModalMsg(''); } + + return (<> -

안녕하세요!

+

안녕하세요!

정보를 입력하고 가입해주세요.

 -
{ - e.preventDefault(); - handleSubmit(); - }}> +

이메일(ID)

- { - setInputState({...inputState, email: e.target.value}); - setWarningModalMsg(''); - }}/> +

비밀번호(PW)

- { - setInputState({...inputState, pw: e.target.value}); - setWarningModalMsg(''); - }}/> +

이름

- { - setInputState({...inputState, name: e.target.value}); - setWarningModalMsg(''); - }}/> +

핸드폰번호

- { - setInputState({...inputState, phone: e.target.value}); - setWarningModalMsg(''); - }}/> +

닉네임

- { - setInputState({...inputState, nickName: e.target.value}); - setWarningModalMsg(''); - }}/> + - + { warningModalMsg - ? - + ? + : - + } ); @@ -127,6 +122,6 @@ const RegisterInputBtn = styled.input` font-size: x-large; margin: 0 auto; margin-top: 60px; - background-color: ${({bgcolor}) => bgcolor || "orange"}; + background-color: ${({ bgcolor }) => bgcolor || "orange"}; color: white; ` \ No newline at end of file diff --git a/bubbletea03-my-app/src/page/WritingPage.js b/bubbletea03-my-app/src/page/WritingPage.js index 16e3651..87c70e4 100644 --- a/bubbletea03-my-app/src/page/WritingPage.js +++ b/bubbletea03-my-app/src/page/WritingPage.js @@ -20,9 +20,13 @@ export default function WritingPage() { price: "", content: "", }); - + + //TODO + //TODO 여기도 handleInput 만들어서 리팩토링 ㄱㄱ + //TODO + useEffect(() => { - if ( !isMounted ) { + if (!isMounted) { setIsMounted(true); const localWritingState = JSON.parse(localStorage.getItem('writingState')); localWritingState && setWritingState(localWritingState); @@ -32,28 +36,28 @@ export default function WritingPage() { }, [writingState]) return (<> - {navigate(-1)}}> - 왼쪽 화살표 + } center={

중고거래 글쓰기

} right={ - - }/> - { + + } /> + { categoryModalState - && setCategoryModalState(false)} - select={(category) => setWritingState({...writingState, category})}/> + && setCategoryModalState(false)} + select={(category) => setWritingState({ ...writingState, category })} /> } setWritingState({...writingState, imgUrlArr})}/> + setImgUrlArr={(imgUrlArr) => setWritingState({ ...writingState, imgUrlArr })} /> - setWritingState({...writingState, title: e.target.value})}/> + setWritingState({ ...writingState, title: e.target.value })} />

{writingState.category || "카테고리"}

@@ -63,11 +67,11 @@ export default function WritingPage() { setWritingState({...writingState, price: e.target.value})}/> + onChange={(e) => setWritingState({ ...writingState, price: e.target.value })} />