Merge pull request #25 from ApptiveDev/patch/design-modification

Patch/design modification

index.html

@@ -4,6 +4,8 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/css/all.css">
+    <link rel="stylesheet" as="style" crossorigin
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
   </head>

src/components/button/Button.tsx

@@ -1,16 +1,10 @@
-import {ButtonHTMLAttributes} from 'react';
-
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  label: string;
-  disabled?: boolean;
-}
+import ButtonProps from '@components/button/ButtonProps.ts';
 
 const Button = ({label, disabled, ...rest}: ButtonProps) => {
   let btnClass =
     `h-[52px] px-5 rounded-md
   transition duration-300 ease-in-out hover:bg-primary-transition
-  text-[18px] focus:outline-none
-  focus:ring-grey-200 font-apple `;
+  text-[18px] focus:outline-none focus:ring-grey-200 `;
   btnClass += disabled? 'bg-light_grey text-grey' : 'bg-primary text-white';
   return (
     <button

src/components/button/ButtonProps.ts

@@ -0,0 +1,7 @@
+import {ButtonHTMLAttributes} from 'react';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  label: string;
+  disabled?: boolean;
+}
+export default ButtonProps;

src/components/button/SmallButton.tsx

@@ -0,0 +1,17 @@
+import ButtonProps from '@components/button/ButtonProps.ts';
+
+const SmallButton = ({label, disabled, ...rest}: ButtonProps) => {
+  let btnClass =
+    `h-[40px] px-4 rounded-md
+  transition duration-300 ease-in-out hover:bg-primary-transition
+  text-[15px] focus:outline-none focus:ring-grey-200 `;
+  btnClass += disabled? 'bg-light_grey text-grey' : 'bg-primary text-white';
+  return (
+    <button
+      className={btnClass} {...rest}>
+      {label}
+    </button>
+  );
+};
+
+export default SmallButton;

src/components/input/Input.tsx

@@ -6,7 +6,7 @@ interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
 }
 
 const Input = ({label, errorMessage, ...rest}: InputProps) => {
-  return <div className='mb-[8px] w-full'>
+  return <div className='w-full'>
     {label && <label>{label}</label>}
 
     <input className='w-full h-10 px-3 py-2 border border-middle_grey

src/components/input/LoginCheckbox.tsx

@@ -16,19 +16,20 @@ const LoginCheckbox = ({checked, onChange, label}: CheckboxProps) => {
         <input type='checkbox'
           className='appearance-none w-[24px] h-[24px]
          border rounded-full border-gray-400
-          checked:bg-blue-600 checked:border-transparent
+          checked:bg-primary checked:border-transparent
           focus:outline-none'
           style={{
             backgroundImage: 'url("' + checkIcon + '")',
             backgroundSize: '70%',
             backgroundRepeat: 'no-repeat',
             backgroundPosition: '50% 55%',
+            marginRight: '4px',
           }}
           checked={checked}
           onChange={onChange}
         />
 
-        <p className='text-primary font-bold font-apple ml-[4px]'>
+        <p className='text-primary font-bold ml-[4px]'>
           {label && label}</p>
       </label>
     </>

src/components/navbar/Navbar.tsx

@@ -24,7 +24,7 @@ const Navbar = (props: NavbarProps) => {
             }}> </IconButton> : null}
         </div>
         <div className='flex flex-1 h-[46px] justify-center items-center'>
-          <p className='font-apple text-[18px] mt-[3px] font-bold'>
+          <p className='text-[18px] mt-[3px] font-bold'>
             {props.title}
           </p>
         </div>

src/components/text/PageCaption.tsx

@@ -0,0 +1,12 @@
+interface PageCaptionProps {
+  lines: string[];
+}
+const PageCaption = ({lines}: PageCaptionProps) => {
+  const getLines = () => {
+    return lines.map((line) => <p key={line}>{line}</p>);
+  };
+  return <div className='leading-8 font-semibold text-[24px] py-8 px-6'>
+    {getLines()}
+  </div>;
+};
+export default PageCaption;

src/css/index.css

@@ -2,6 +2,9 @@
 @tailwind components;
 @tailwind utilities;
 
+body {
+    @apply font-pretendard tracking-[-.025rem];
+}
 ::-webkit-scrollbar-track {
     background: transparent;
 }

src/pages/LoginPage.tsx

@@ -41,7 +41,11 @@ const LoginPage = (): ReactNode => {
               setUserId(inputId);
               limitInputNumber(e, 10); // ID의 최대 글자수 제한: 10글자.
               // 사용자 정보 db 스키마가 정의되면 상수로서 정의하는 것이 좋을 것 같음
-            }}></Input>
+            }}
+            style={{
+              marginBottom: '8px',
+            }}
+          ></Input>
 
           <Input placeholder='비밀번호 입력' type='password'
             onChange={(e: ChangeEvent<HTMLInputElement>) => {

src/pages/findId/FindIdPage.tsx

@@ -7,6 +7,8 @@ import {limitInputNumber} from '@/utils';
 import Input from '@components/input/Input.tsx';
 import Button from '@components/button/Button.tsx';
 import FindIdResult from '@pages/findId/FindIdResult.tsx';
+import SmallButton from '@components/button/SmallButton.tsx';
+import PageCaption from '@components/text/PageCaption.tsx';
 
 const FindIdPage = () => {
   const [/* name */, setName] = useState('');
@@ -27,13 +29,10 @@ const FindIdPage = () => {
             isSuccesed ? (
               <FindIdResult/>
             ) : (
-              <div className='flex flex-col h-[calc(100vh-72px)] mx-4'>
-                <div className='flex flex-col my-12 text-left text-[24px] font-bold'>
-                  <p >아이디를 찾기 위해</p>
-                  <p >본인 인증을 진행해 주세요.</p>
-                </div>
-                <div className='flex flex-col'>
-                  <div className='mb-8'>
+              <div className='flex flex-col h-[calc(100vh-72px)]'>
+                <PageCaption lines={['아이디를 찾기 위해', '본인 인증을 진행해 주세요.']}/>
+                <div className='flex flex-col px-6'>
+                  <div className='mb-8 mt-[8px]'>
                     <p className='text-[18px] mb-1 font-bold'>이름</p>
                     <Input placeholder='이름 입력'
                       onChange={(e: ChangeEvent<HTMLInputElement>) => {
@@ -46,7 +45,7 @@ const FindIdPage = () => {
                   <div className='mb-8'>
                     <p className='text-[18px] mb-1 font-bold'>이메일</p>
                     <div className='flex items-center space-x-2'>
-                      <div className='flex-grow'>
+                      <div className='flex grow items-center'>
                         <Input
                           placeholder='이메일 입력'
                           onChange={(e: ChangeEvent<HTMLInputElement>) => {
@@ -55,19 +54,12 @@ const FindIdPage = () => {
                             limitInputNumber(e, 10);
                           }}></Input>
                       </div>
-                      <div className='flex'>
-                        {isConfirmed ? (<button className='bg-gray-100 text-dark_grey
-                         h-[40px] w-[120px] rounded-md -mt-2 transition duration-300
-                         ease-in-out hover:bg-primary-transition text-[18px] focus:outline-none
-                         focus:ring focus:ring-blue-200 font-apple'>인증 완료</button>
-                        ) : (
-                          <button className='bg-primary text-white h-[40px] w-[120px]
-                           rounded-md -mt-2 transition duration-300 ease-in-out
-                           hover:bg-primary-transition text-[18px] focus:outline-none focus:ring
-                           focus:ring-blue-200 font-apple' onClick={() => setIsSended(true)}>{
-                              isSended ? ('재전송') : ('인증번호 전송')
-                            }</button>
-                        )}
+                      <div className='flex h-full items-center'>
+                        {isConfirmed ?
+                          (<SmallButton label={'인증 완료'}
+                            disabled={true}/>) :
+                          (<SmallButton label={isSended ? '재전송' : '인증번호 전송'}
+                            onClick={() => setIsSended(true)}/>)}
                       </div>
                     </div>
                   </div>
@@ -85,26 +77,18 @@ const FindIdPage = () => {
                             }}></Input>
                         </div>
                         <div className='flex'>
-                          <button className='bg-primary text-white h-[40px] w-[120px]
-                          rounded-md -mt-2 transition duration-300 ease-in-out
-                          hover:bg-primary-transition text-[18px] focus:outline-none focus:ring
-                          focus:ring-blue-200 font-apple'
-                          onClick={() => setIsConfirmed(true)}>인증번호 확인</button>
+                          <SmallButton label={'인증번호 확인'}
+                            onClick={() => setIsConfirmed(true)}
+                          />
                         </div>
                       </div>
                     </div>
                   )}
                 </div>
-                <div className='flex flex-col mt-auto mb-12' >
-                  {
-                    isConfirmed ? (
-                      <Button label="확인" onClick={() => setIsSuccessed(true)}></Button>
-                    ) : (
-                      <button className='bg-gray-100 text-dark_grey h-[52px] rounded-md
-                    transition duration-300 ease-in-out hover:bg-primary-transition
-                    text-[18px] font-apple'>확인</button>
-                    )
-                  }
+                <div className='flex flex-col mt-auto mb-12 px-6 ' >
+                  <Button label="확인" onClick={() => setIsSuccessed(true)}
+                    disabled={! isConfirmed}
+                  />
                 </div>
               </div>
             )

src/pages/findId/FindIdResult.tsx

@@ -28,15 +28,15 @@ const FindIdResult = () => {
               </div>
             </div>
 
-            <div className='flex flex-col mt-auto mb-12 space-y-6'>
+            <div className='flex flex-col mt-auto mb-12 space-y-[8px]'>
               <Button label={'로그인'} onClick={() => {
                 setExistId(!existId);
               }}></Button>
               <button className='bg-white text-primary
                 border-primary border h-[52px] rounded-md
                 transition duration-300 ease-in-out
                 hover:bg-primary-transition
-                text-[18px] font-apple'>비밀번호 찾기
+                text-[18px]'>비밀번호 찾기
               </button>
             </div>
           </div>
@@ -58,14 +58,14 @@ const FindIdResult = () => {
               </div>
             </div>
 
-            <div className='flex flex-col mt-auto mb-12 space-y-6'>
+            <div className='flex flex-col mt-auto mb-12 space-y-[8px]'>
               <Button label={'회원가입'} onClick={() => {
                 setExistId(!existId);
               }}>처음으로 돌아가기</Button>
               <button className='bg-white text-primary border-primary
                border h-[52px] rounded-md transition
                 duration-300 ease-in-out hover:bg-primary-transition
-                text-[18px] font-apple'>처음으로 돌아가기
+                text-[18px]'>처음으로 돌아가기
               </button>
             </div>
           </div>

src/pages/register/steps/Authorization.tsx

@@ -5,6 +5,7 @@ import Button from '@components/button/Button.tsx';
 import {limitInputNumber} from '@/utils';
 import {setRegisterInfo} from '@modules/registerReducer.ts';
 import {RootState} from '@/modules';
+import PageCaption from '@components/text/PageCaption.tsx';
 
 const Authorization = () => {
   const registerState = useSelector((state: RootState) => state.register);
@@ -16,25 +17,32 @@ const Authorization = () => {
   const [nameErrorMessage, setNameErrorMessage] =
     useState<string | undefined>(undefined);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [sendDisabled, setSendDisabled] =
-    useState(true);
+  const [firstSendComplete, setFirstSendComplete] =
+    useState(false);
+  const [sendDisabled, setSendDisabled] = useState(true);
   const [authnumErrorMessage/* setAuthnumErrorMessage*/] =
     useState<string | undefined>(undefined);
 
   const [emailSent, setEmailSent] =
     useState(registerState.authorized);
 
   return (<>
-    <div className='p-6'>
-      <p className='text-[24px] font-semibold'>서비스 이용을 위해</p>
-      <p className='text-[24px] font-semibold'>본인 인증을 진행해주세요.</p>
-    </div>
-    <div className='px-6'>
+    <PageCaption lines={['서비스 이용을 위해', '본인 인증을 진행해 주세요.']}/>
+    <div className='px-6 mt-[8px]'>
       <p className='text-[18px] font-semibold mb-2'>이름</p>
       <Input placeholder='이름 입력' id='register-auth-name' onChange={(e) => {
         limitInputNumber(e, 8);
+        if (! e.target.validity.valid) {
+          if (nameErrorMessage === undefined) {
+            setNameErrorMessage('올바른 이름을 입력해 주세요.');
+          }
+        } else {
+          setNameErrorMessage(undefined);
+        }
       }} defaultValue={registerState.name ?? registerState.name}
-      errorMessage={nameErrorMessage} />
+      errorMessage={nameErrorMessage}
+      pattern={'[가-힣a-zA-Z0-9]{2,10}'}
+      />
 
       <p className='text-[18px] font-semibold mt-[16px] mb-2'>이메일</p>
       <div className='flex h-[40px] gap-2'>
@@ -58,13 +66,13 @@ const Authorization = () => {
             defaultValue={registerState.email ?? registerState.email}
           />
         </div>
-        <Button label='인증번호 전송' style={{
+        <Button label={firstSendComplete ? '재전송' : '인증번호 전송'} style={{
           height: '40px',
           fontSize: '16px',
           flexShrink: 0,
         }} disabled={sendDisabled}
         onClick={() => {
-          if (!sendDisabled) {
+          if (!firstSendComplete) {
             const target: HTMLInputElement =
                 (document.getElementById(
                   'register-auth-email') as HTMLInputElement);
@@ -73,14 +81,13 @@ const Authorization = () => {
                 (document.getElementById(
                   'register-auth-name') as HTMLInputElement);
             const name = nameInput.value;
-            if (name === '') {
-              setNameErrorMessage('올바른 입력을 입력해주세요.');
+            if (! nameInput.validity.valid) {
               return;
             }
 
             dispatch(setRegisterInfo({name, email: emailValue}));
 
-            setSendDisabled(true);
+            setFirstSendComplete(true);
             setEmailSent(true);
           }
         }} />

src/pages/register/steps/InformationInput.tsx

@@ -4,6 +4,7 @@ import {limitInputNumber} from '@/utils';
 import {useDispatch, useSelector} from 'react-redux';
 import {RootState} from '@/modules';
 import {RegisterState, setRegisterInfo} from '@modules/registerReducer.ts';
+import PageCaption from '@components/text/PageCaption.tsx';
 
 interface RegisterInputErrorMessages {
   nickname?: string,
@@ -22,7 +23,7 @@ const InformationInput = () => {
       password: undefined,
       passwordConfirm: undefined,
     });
-  const [gender, setGender] = useState<string>('');
+  const [gender, setGender] = useState<string|undefined>(registerState.gender);
   const [password, setPassword] = useState<string>('');
   const [passwordConfirm, setPasswordConfirm] = useState<string>('');
 
@@ -75,10 +76,7 @@ const InformationInput = () => {
 
   return (
     <>
-      <div className='p-6'>
-        <p className='text-[24px] font-semibold'>마리코에서 사용할</p>
-        <p className='text-[24px] font-semibold'>계정 정보를 입력해주세요.</p>
-      </div>
+      <PageCaption lines={['마리코에서 사용할', '계정 정보를 입력해 주세요.']} />
       <div className='px-6'>
         <p className='text-[18px] font-semibold mb-2'>닉네임</p>
         <Input
@@ -88,6 +86,7 @@ const InformationInput = () => {
           onChange={(e) => handleInputChange(e, 'nickname',
             10, '한글, 영문, 숫자 포함 2~10자 이내로 입력해주세요.')}
           pattern={'[가-힣a-zA-Z0-9]{2,10}'}
+          defaultValue={registerState.nickname}
         />
         <p className='text-[18px] font-semibold mb-2 mt-[16px]'>아이디</p>
         <Input
@@ -97,6 +96,7 @@ const InformationInput = () => {
           onChange={(e) => handleInputChange(e, 'loginid',
             20, '영문 소문자, 숫자 포함 6~20자 이내로 입력해주세요.')}
           pattern={'[a-z0-9]{6,20}'}
+          defaultValue={registerState.nickname}
         />
         <p className='text-[18px] font-semibold mb-2 mt-[16px]'>비밀번호</p>
         <Input