Merge pull request #13 from cookies-yam/feat/registerPages

feat: 재사용 될 IdPasswordForm 컴포넌트 분리
cookies-yam · Jun 28, 2023 · f35ab4e · f35ab4e
2 parents 8c9753f + 9a6bf5c
commit f35ab4e
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 68 deletions.
diff --git a/src/components/common/IdPasswordForm.jsx 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 (
+    <div className="h-[77px] mb-[40px]">
+      <label className="w-full text-[14px]" htmlFor={label}>
+        {label}
+      </label>
+      <div className="relative mt-[10px]">
+        <Input
+          readOnly={type === 'email' ? readOnly : false}
+          key={key}
+          name={label}
+          autoComplete={type === 'password' ? 'new-password' : 'off'}
+          type={type}
+          value={value}
+          color={color}
+          onChange={onChange}
+          errors={errors}
+        />
+        {type === 'password' && (
+          <svg
+            className="absolute top-1/2 right-[12px] translate-y-[-50%] pointer-events-none"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            {/* 아이콘 SVG 코드 */}
+          </svg>
+        )}
+      </div>
+      {errors.isError && (
+        <span className="text-[13px] text-gray" style={{ color: color }}>
+          {errors.message}
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default IdPasswordForm;
diff --git a/src/components/common/Input.jsx b/src/components/common/Input.jsx
@@ -5,10 +5,15 @@ const StyledInput = styled.input`
   width: ${(props) => props.width || '360px'};
   margin-bottom: ${(props) => props.mb || 0};
   border-color: ${(props) => props.color};
-  disabled: ${(props) => props.disabled};
+  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, disabled }) {
+function Input({ type, onChange, placeholder, name, width, mb, color, autoComplete, readOnly }) {
   return (
     <StyledInput
       className={`h-[48px] border-[1px] border-solid border-gray rounded-[10px] text-[14px] indent-[20px] placeholder-[#d9d9d9]`}
@@ -20,7 +25,7 @@ function Input({ type, onChange, placeholder, name, width, mb, color, autoComple
       autoComplete={autoComplete}
       onChange={onChange}
       color={color}
-      disabled={disabled}
+      readOnly={readOnly}
     />
   );
 }

diff --git 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 = () => {
     <>
       <TextAndBackBar title={'회원가입'} />
       <form className="mt-[25px] flex flex-wrap justify-center">
-        {inputFields.map((field) => (
-          <InputWrapper key={field.id}>
-            <StyledLabel htmlFor={field.label}>{field.label}</StyledLabel>
-            <div className="relative mt-[10px]">
-              <Input
-                id={field.id}
-                name={field.id}
-                autoComplete={field.type === 'password' ? 'new-password' : 'off'}
+        <div className="flex flex-wrap w-[360px]">
+          {/* 아이디, 비밀번호, 비밀번호 재확인 */}
+          {inputFields.slice(0, 3).map((field) => (
+            <React.Fragment key={field.id}>
+              <IdPasswordForm
+                key={field.id}
+                label={field.label}
                 type={field.type}
-                value={
-                  field.id === 'email'
-                    ? email
-                    : field.id === 'password'
-                    ? password
-                    : field.id === 'passwordCheck'
-                    ? passwordCheck
-                    : nickname
-                }
+                value={field.id}
                 color={errors[field.id].isError ? '#ff0000' : '#d9d9d9'}
                 onChange={(event) => validateField(field.id, event.target.value)}
+                errors={errors[field.id]}
+              />
+            </React.Fragment>
+          ))}
+
+          {/* 닉네임 */}
+          <div className="h-[77px] mb-[40px]">
+            <label className="w-full text-[14px]" htmlFor="nickname">
+              닉네임
+            </label>
+            <div className="relative mt-[10px]">
+              <Input
+                name="nickname"
+                autoComplete="off"
+                type="text"
+                value={inputFields.id === 'nickname'}
+                color={errors.nickname.isError ? '#ff0000' : '#d9d9d9'}
+                onChange={(event) => validateField('nickname', event.target.value)}
               />
-              {field.type === 'password' && (
-                <svg
-                  className="absolute top-1/2 right-[12px] translate-y-[-50%] pointer-events-none"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M6 22C5.45 22 4.979 21.804 4.587 21.412C4.195 21.02 3.99934 20.5493 4 20V10C4 9.45 4.196 8.979 4.588 8.587C4.98 8.195 5.45067 7.99933 6 8H7V6C7 4.61667 7.48767 3.43733 8.463 2.462C9.43834 1.48667 10.6173 0.999334 12 1C13.3833 1 14.5627 1.48767 15.538 2.463C16.5133 3.43833 17.0007 4.61733 17 6V8H18C18.55 8 19.021 8.196 19.413 8.588C19.805 8.98 20.0007 9.45067 20 10V20C20 20.55 19.804 21.021 19.412 21.413C19.02 21.805 18.5493 22.0007 18 22H6ZM6 20H18V10H6V20ZM12 17C12.55 17 13.021 16.804 13.413 16.412C13.805 16.02 14.0007 15.5493 14 15C14 14.45 13.804 13.979 13.412 13.587C13.02 13.195 12.5493 12.9993 12 13C11.45 13 10.979 13.196 10.587 13.588C10.195 13.98 9.99934 14.4507 10 15C10 15.55 10.196 16.021 10.588 16.413C10.98 16.805 11.4507 17.0007 12 17ZM9 8H15V6C15 5.16667 14.7083 4.45833 14.125 3.875C13.5417 3.29167 12.8333 3 12 3C11.1667 3 10.4583 3.29167 9.875 3.875C9.29167 4.45833 9 5.16667 9 6V8Z"
-                    fill="#D9D9D9"
-                  />
-                </svg>
-              )}
             </div>
-            {errors[field.id] && (
-              <span
-                className="text-[13px] mt-[12px] text-gray"
-                style={{ color: errors[field.id].isError && '#ff0000' }}
-              >
-                {errors[field.id].message}
+            {errors.nickname && (
+              <span className="text-[13px] text-gray" style={{ color: errors.nickname.isError && '#ff0000' }}>
+                {errors.nickname.message}
               </span>
             )}
-          </InputWrapper>
-        ))}
+          </div>
+        </div>
       </form>
       <LongButton contents={'가입하기'} onClick={handleSubmit} />
     </>

diff --git 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'}
         />
         <Input
           type={'password'}
           placeholder={'비밀번호 입력'}
           autoComplete={'autoComplete'}
           onChange={onChangeHandler}
-          color={!loginSuccess ? '#ff0000' : '#d9d9d9'}
+          color={isButtonClicked && !loginSuccess ? '#ff0000' : '#d9d9d9'}
         />
-        {!loginSuccess && (
-          <span className="text-[13px] relative left-[-25px] mt-[15px] text-[#ff0000]">{errorMessgae}</span>
+        {!loginSuccess && isButtonClicked && (
+          <span className="text-[13px] relative left-[-25px] mt-[15px] text-[#ff0000]">{errorMessage}</span>
         )}
       </form>
       <LongButton type={'submit'} contents={'로그인'} bottom={'405px'} onClick={handleSignIn} />

diff --git a/src/pages/WritingPage.jsx b/src/pages/WritingPage.jsx
@@ -172,7 +172,6 @@ function WritingPage() {
           </button>
         </div>
       </div>
-
       <textarea
         placeholder={PLEASE_WRITE_TEXT}
         onChange={onChangeTextarea}