Merge pull request #320 from ssu-student-union/refactor/#316_onboard_…

…input style: GeneralRegister input, button padding, 상단 문구 크기 조절
ssu-student-union · Nov 6, 2024 · 1081883 · 1081883
2 parents 541d939 + 0a37b69
commit 1081883
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
@@ -28,7 +28,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     return (
       <input
         type={type}
-        className={cn(InputVariants({ variant: isInvalid ? 'error' : 'default' }), className)}
+        className={cn(className, InputVariants({ variant: isInvalid ? 'error' : 'default' }))}
         ref={ref}
         disabled={isDisabled}
         {...props}

diff --git a/src/pages/general/containers/GeneralRegisterSection.tsx b/src/pages/general/containers/GeneralRegisterSection.tsx
@@ -158,14 +158,16 @@ export function GeneralRegisterSection({ subSection1, buttonSection }: LoginForm
   return (
     <div className="flex min-h-screen items-center justify-center">
       <div className="flex w-full max-w-md flex-col items-center justify-center p-4">
-        <div className="pb-4 text-2xl font-bold not-italic leading-[normal] text-[rgb(0,0,0)]">{subSection1}</div>
+        <div className="pb-8 text-[1.4rem] font-bold not-italic leading-[normal] text-[rgb(0,0,0)] xs:text-[1.25rem]">
+          {subSection1}
+        </div>
         <form noValidate onSubmit={handleSubmit(onSubmit)}>
           {isScouncilPath ? (
             <>
               <Input
                 type="text"
                 placeholder="아이디"
-                className="w-[420px] xs:w-[250px] sm:w-[250px]"
+                className="w-[420px] xs:min-h-[36px] xs:w-[250px] xs:rounded-xs xs:px-[1rem] xs:py-0 sm:w-[250px] sm:px-[1rem] sm:py-[0.1rem]"
                 {...register('accountId', {
                   required: '아이디는 필수 입력입니다.',
                 })}
@@ -180,7 +182,7 @@ export function GeneralRegisterSection({ subSection1, buttonSection }: LoginForm
               <Input
                 type="password"
                 placeholder="비밀번호"
-                className="mt-4 xs:w-[250px] sm:w-[250px]"
+                className="mt-4 xs:min-h-[36px] xs:w-[250px] xs:rounded-xs xs:px-[1rem] xs:py-0 sm:w-[250px] sm:px-[1rem] sm:py-[0.1rem]"
                 {...register('password', {
                   required: '비밀번호는 필수 입력입니다.',
                 })}
@@ -199,7 +201,7 @@ export function GeneralRegisterSection({ subSection1, buttonSection }: LoginForm
               <Input
                 type="text"
                 placeholder="이름"
-                className="w-[420px] xs:w-[250px] sm:w-[250px]"
+                className="w-[420px] xs:min-h-[36px] xs:w-[250px] xs:rounded-xs xs:px-[1rem] xs:py-0 sm:w-[250px] sm:px-[1rem] sm:py-[0.1rem]"
                 {...register('name', {
                   required: '이름은 필수 입력입니다.',
                 })}
@@ -215,7 +217,7 @@ export function GeneralRegisterSection({ subSection1, buttonSection }: LoginForm
               <Input
                 type="text"
                 placeholder="학번"
-                className="mt-4 xs:w-[250px] sm:w-[250px]"
+                className="mt-4 xs:min-h-[36px] xs:w-[250px] xs:rounded-xs xs:px-[1rem] xs:py-0 sm:w-[250px] sm:px-[1rem] sm:py-[0.1rem]"
                 {...register('studentId', {
                   required: '학번은 필수 입력입니다.',
                 })}
@@ -296,7 +298,7 @@ export function GeneralRegisterSection({ subSection1, buttonSection }: LoginForm
             disabled={isSubmitting || isButtonDisabled}
             variant="default"
             size="default"
-            className={`mt-4 w-[420px] xs:w-[250px] sm:w-[250px] ${isSubmitting || isButtonDisabled ? 'bg-gray-400' : ''}`}
+            className={`mt-4 w-[420px] xs:min-h-[36px] xs:w-[250px] xs:rounded-xs xs:px-[1rem] xs:py-0 sm:w-[250px] sm:px-[1rem] sm:py-[0.1rem] ${isSubmitting || isButtonDisabled ? 'bg-gray-400' : ''}`}
           >
             {buttonSection}
           </Button>