♻️ 회원가입 화면 코드리뷰 반영

Author: crazyupinc-design

components/Input.tsx

@@ -67,8 +67,8 @@ function InputField({
 
   //스타일에 따른 클래스
   const variantClass = {
-    containerVertical: 'mb-[24px] flex flex-col gap-[10px]',
-    containerHorizontal: 'mb-[24px] w-[239px] flex items-center gap-[10px]',
+    containerVertical: 'flex flex-col gap-[10px]',
+    containerHorizontal: 'w-[239px] flex items-center gap-[10px]',
     labelVertical: 'text-14 text-gray-500',
     labelHorizontal: 'text-14 text-gray-400 w-[60px] flex-shrink-0',
     base: 'px-[20px] py-[10px] h-[45px] w-[400px] rounded-md text-[14px] text-gray-500 placeholder:text-14 focus:outline-none mo:w-[355px]',

pages/signup/index.tsx

@@ -1,8 +1,8 @@
 import { useRouter } from 'next/router';
 import { useState } from 'react';
-
 import Button from '@/components/Button';
 import InputField from '@/components/Input';
+import Link from 'next/link';
 
 function SignUp(): React.ReactElement {
   const [email, setEmail] = useState('');
@@ -68,61 +68,63 @@ function SignUp(): React.ReactElement {
   return (
     <div className="flex min-h-screen items-center justify-center">
       <form onSubmit={handleSubmit}>
-        <h1 className="mb-[64px] text-center text-24sb text-gray-500 mo:mb-[32px] ta:mb-[48px]">
-          회원가입
-        </h1>
-        <InputField
-          label="이름"
-          type="name"
-          value={name}
-          onChange={handleNameChange}
-          placeholder="이름을 입력해 주세요"
-          onValidation={(isValid) => handleValidation('name', isValid)}
-        />
-
-        <InputField
-          label="이메일"
-          type="email"
-          value={email}
-          onChange={handleEmailChange}
-          placeholder="이메일을 입력해 주세요"
-          onValidation={(isValid) => handleValidation('email', isValid)}
-        />
-
-        <InputField
-          label="비밀번호"
-          type="password"
-          value={password}
-          onChange={handlePasswordChange}
-          placeholder="비밀번호를 입력해 주세요"
-          onValidation={(isValid) => handleValidation('password', isValid)}
-        />
-
-        <InputField
-          label="비밀번호 확인"
-          type="passwordConfirm"
-          value={passwordConfirm}
-          onChange={handlePasswordConfirmChange}
-          placeholder="비밀번호를 다시 입력해 주세요"
-          compareValue={password}
-          onValidation={(isValid) =>
-            handleValidation('passwordConfirm', isValid)
-          }
-        />
-        <Button
-          type="submit"
-          disabled={!isFormValid}
-          isLoading={isSubmitting}
-          variant="primary"
-          className="mt-[30px] h-[45px] w-[400px] mo:w-[355px]"
-        >
-          가입하기
-        </Button>
-        <div className="mt-[40px] text-center">
-          <span className="text-14 text-gray-400">이미 회원이신가요?</span>{' '}
-          <a href="/login" className="text-14 text-green-300 hover:underline">
-            로그인하기
-          </a>
+        <div className="flex flex-col items-center gap-[24px]">
+          <h2 className="mb-[40px] text-center text-24sb text-gray-500 mo:mb-[8px] ta:mb-[24px]">
+            회원가입
+          </h2>
+          <InputField
+            label="이름"
+            type="name"
+            value={name}
+            onChange={handleNameChange}
+            placeholder="이름을 입력해 주세요"
+            onValidation={(isValid) => handleValidation('name', isValid)}
+          />
+          <InputField
+            label="이메일"
+            type="email"
+            value={email}
+            onChange={handleEmailChange}
+            placeholder="이메일을 입력해 주세요"
+            onValidation={(isValid) => handleValidation('email', isValid)}
+          />
+          <InputField
+            label="비밀번호"
+            type="password"
+            value={password}
+            onChange={handlePasswordChange}
+            placeholder="비밀번호를 입력해 주세요"
+            onValidation={(isValid) => handleValidation('password', isValid)}
+          />
+          <InputField
+            label="비밀번호 확인"
+            type="passwordConfirm"
+            value={passwordConfirm}
+            onChange={handlePasswordConfirmChange}
+            placeholder="비밀번호를 다시 입력해 주세요"
+            compareValue={password}
+            onValidation={(isValid) =>
+              handleValidation('passwordConfirm', isValid)
+            }
+          />
+          <Button
+            type="submit"
+            disabled={!isFormValid}
+            isLoading={isSubmitting}
+            variant="primary"
+            className="mt-[30px] h-[45px] w-[400px] mo:w-[355px]"
+          >
+            가입하기
+          </Button>
+          <div className="mt-[40px] text-center">
+            <span className="text-14 text-gray-400">이미 회원이신가요?</span>{' '}
+            <Link
+              href="/login"
+              className="text-14 text-green-300 hover:underline"
+            >
+              로그인하기
+            </Link>
+          </div>{' '}
         </div>
       </form>
     </div>