Repository: DnJ0408/saram-byeol
Pull request #139: Style/#136 signin signup responsive design
Author: login: kjjyyy01
Labels: name: 🐸종연
name: 🎨 Style
description: CSS Styling
Created: 2025-04-23T07:27:08Z | Merged: 2025-04-24T05:31:12Z

## #️⃣ 연관된 이슈

- #136 

<br>

## 📝 작업 내용

> 로그인/회원가입 페이지 반응형 적용

<br>

## 🖼 스크린샷
![스크린샷 2025-04-23 162257](https://github.com/user-attachments/assets/34a1f204-403b-4027-9faf-1b646ed7a7b2)
![스크린샷 2025-04-23 162222](https://github.com/user-attachments/assets/ea9cbc74-39a8-44b2-a1bd-dcd370b8c1a6)

<br>


<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **Style**
    - 로그인 및 회원가입 페이지의 레이아웃과 스타일이 개선되어 다양한 화면 크기에서 더 깔끔하고 반응형으로 표시됩니다.
    - 입력 폼, 버튼, 안내 문구, 소셜 로그인 등 주요 UI 요소들의 간격과 정렬이 모바일 및 데스크톱 환경에 맞게 최적화되었습니다.
    - 이미지 섹션이 작은 화면에서는 숨겨지고, 중간 이상 화면에서만 표시됩니다.
    - 소셜 로그인 버튼이 작은 화면에서는 세로로, 큰 화면에서는 가로로 정렬됩니다.
    - 폼 내 입력 필드와 에러 메시지의 시각적 그룹화가 개선되어 사용자 편의성이 향상되었습니다.
    - 버튼과 텍스트 크기가 화면 크기에 따라 반응형으로 조정되어 가독성이 높아졌습니다.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->


Diff:
diff --git a/src/app/(pages)/signIn/page.tsx b/src/app/(pages)/signIn/page.tsx
index e8b7e2b9..403d86d0 100644
--- a/src/app/(pages)/signIn/page.tsx
+++ b/src/app/(pages)/signIn/page.tsx
@@ -20,32 +20,40 @@ const SignIn = () => {
   }, [isSignin, router]);
 
   return (
-    <div className='flex h-[100vh] w-[100vw] items-center justify-center overflow-hidden overflow-y-auto'>
-      <section className='flex w-full flex-col items-center justify-center'>
-        <h1 className='mb-10 text-center text-[28px] font-bold text-primary-500'>사람, 별 로그인</h1>
-        <section className='mb-[22px]'>
-          <SigninForm />
-        </section>
+    <div className='h-screen w-screen'>
+      <div className='flex h-full w-full items-center justify-center overflow-hidden pb-8 pt-4 md:pb-0 md:pt-0'>
+        <section className='flex w-full flex-col items-center justify-center'>
+          <h1 className='mb-10 text-center text-[28px] font-bold text-primary-500'>사람, 별 로그인</h1>
+          <section className='mb-8 md:mb-6'>
+            <SigninForm />
+          </section>
 
-        <section className='flex flex-col items-center justify-center'>
-          <div className='mb-[42px] flex'>
-            <p className='mr-2'>아이디가 없으신가요?</p>
-            <Link href={SIGNUP} className='text-primary-500'>
-              회원가입
-            </Link>
-          </div>
-          <div className='mb-[42px] flex items-center gap-1'>
-            <div className='w-[150px] outline outline-1 outline-stone-300' />
-            <p className='text-nowrap font-bold leading-normal text-zinc-800'>SNS계정으로 간편로그인</p>
-            <div className='h-0 w-[150px] outline outline-1 outline-stone-300' />
-          </div>
-          <SigninSocial />
+          <section className='flex flex-col items-center justify-center'>
+            <div className='mb-[45px] flex md:mb-[42px]'>
+              <p className='mr-2 text-sm md:text-base'>아이디가 없으신가요?</p>
+              <Link href={SIGNUP} className='text-sm text-primary-500 md:text-base'>
+                회원가입
+              </Link>
+            </div>
+            <div className='mb-[39.5px] flex items-center gap-1 md:mb-[42px]'>
+              <div className='w-[77.5px] outline outline-1 outline-stone-300 md:w-[150px]' />
+              <p className='text-nowrap text-base font-bold text-zinc-800'>SNS계정으로 간편로그인</p>
+              <div className='w-[77.5px] outline outline-1 outline-stone-300 md:w-[150px]' />
+            </div>
+            <SigninSocial />
+          </section>
         </section>
-      </section>
 
-      <section className='relative h-full w-full'>
-        <Image src={'/saram-byeol_img.avif'} alt='metaphor image' fill className='object-contain' />
-      </section>
+        <section className='hidden md:flex md:h-full md:w-full md:items-center md:justify-center lg:flex'>
+          <Image
+            src={'/saram-byeol_img.avif'}
+            alt='metaphor image'
+            width={950}
+            height={1080}
+            className='mx-auto object-contain'
+          />
+        </section>
+      </div>
     </div>
   );
 };
diff --git a/src/app/(pages)/signUp/page.tsx b/src/app/(pages)/signUp/page.tsx
index 16fc4df3..288a2bf6 100644
--- a/src/app/(pages)/signUp/page.tsx
+++ b/src/app/(pages)/signUp/page.tsx
@@ -6,26 +6,34 @@ import SigninSocial from '@/components/signin/SigninSocial';
 
 const SignUp = () => {
   return (
-    <div className='flex h-[100vh] w-[100vw] items-center justify-center overflow-y-auto'>
-      <section className='flex w-full flex-col items-center justify-center'>
-        <h1 className='mb-10 text-center text-[28px] font-bold text-primary-500'>사람, 별 회원가입</h1>
-        <section className='mb-[42px]'>
-          <SignupForm />
-        </section>
+    <div className='h-screen w-screen'>
+      <div className='flex h-full w-full items-center justify-center overflow-hidden pb-8 pt-4 md:pb-0 md:pt-0'>
+        <section className='flex w-full flex-col items-center justify-center'>
+          <h1 className='mb-6 text-center text-[28px] font-bold text-primary-500 md:mb-10'>사람, 별 회원가입</h1>
+          <section className='mb-6 md:mb-[42px]'>
+            <SignupForm />
+          </section>
 
-        <section className='flex flex-col items-center justify-center'>
-          <div className='mb-[42px] flex items-center gap-1'>
-            <div className='w-[150px] outline outline-1 outline-stone-300' />
-            <p className='text-nowrap font-bold leading-normal text-zinc-800'>SNS계정으로 간편로그인</p>
-            <div className='h-0 w-[150px] outline outline-1 outline-stone-300' />
-          </div>
-          <SigninSocial />
+          <section className='flex flex-col items-center justify-center'>
+            <div className='mb-6 flex items-center gap-1 md:mb-[42px]'>
+              <div className='w-[77.5px] outline outline-1 outline-stone-300 md:w-[150px]' />
+              <p className='text-nowrap text-base font-bold text-zinc-800'>SNS계정으로 간편로그인</p>
+              <div className='w-[77.5px] outline outline-1 outline-stone-300 md:w-[150px]' />
+            </div>
+            <SigninSocial />
+          </section>
         </section>
-      </section>
 
-      <section className='relative h-full w-full'>
-        <Image src={'/saram-byeol_img.avif'} alt='metaphor image' fill className='object-contain' />
-      </section>
+        <section className='hidden md:flex md:h-full md:w-full md:items-center md:justify-center lg:flex'>
+          <Image
+            src={'/saram-byeol_img.avif'}
+            alt='metaphor image'
+            width={950}
+            height={1080}
+            className='mx-auto object-contain'
+          />
+        </section>
+      </div>
     </div>
   );
 };
diff --git a/src/components/signin/SigninForm.tsx b/src/components/signin/SigninForm.tsx
index a38a242d..9661eb36 100644
--- a/src/components/signin/SigninForm.tsx
+++ b/src/components/signin/SigninForm.tsx
@@ -28,66 +28,73 @@ const SigninForm = () => {
   };
 
   return (
-    <form onSubmit={handleSubmit(SignInHandler)} className='flex flex-col gap-8'>
-      <div className='flex flex-col'>
-        <div className='flex flex-col justify-start'>
-          <label
-            className={`self-stretch text-sm font-bold leading-[150%] ${formState.errors.email ? `text-status-error` : `text-grey-900`}`}
-            htmlFor='email'
-          >
-            아이디(이메일)
-          </label>
-          <input
-            className={`w-full flex-1 items-center gap-2 self-stretch rounded-lg border p-4 ${formState.errors.email ? `border-status-error focus:outline-none` : `border-grey-200`}`}
-            type='email'
-            id='email'
-            placeholder={PLACEHOLDER_EMAIL}
-            {...register('email')}
-          />
+    <form onSubmit={handleSubmit(SignInHandler)} className='md: flex flex-col items-center justify-center md:gap-8'>
+      <div className='mx-auto w-full max-w-[375px] px-5 md:max-w-full md:px-0'>
+        <div className='mb-8 flex flex-col'>
+          <div className='flex flex-col justify-start gap-1'>
+            <label
+              className={`self-stretch text-sm font-bold leading-[150%] ${formState.errors.email ? `text-status-error` : `text-grey-900`}`}
+              htmlFor='email'
+            >
+              아이디(이메일)
+            </label>
+            <input
+              className={`w-full flex-1 items-center gap-2 self-stretch rounded-lg border p-4 ${formState.errors.email ? `border-status-error focus:outline-none` : `border-grey-200`}`}
+              type='email'
+              id='email'
+              placeholder={PLACEHOLDER_EMAIL}
+              {...register('email')}
+            />
+          </div>
+          {formState.errors.email && (
+            <span className='self-stretch text-sm leading-[150%] text-status-error'>
+              {formState.errors.email.message}
+            </span>
+          )}
         </div>
-        {formState.errors.email && (
-          <span className='self-stretch text-sm leading-[150%] text-status-error'>
-            {formState.errors.email.message}
-          </span>
-        )}
-      </div>
-      <div className='flex flex-col'>
-        <div className='flex flex-col justify-start'>
-          <label
-            className={`self-stretch text-sm font-bold leading-[150%] ${formState.errors.password ? `text-status-error` : `text-grey-900`}`}
-            htmlFor='password'
-          >
-            비밀번호
-          </label>
-          <input
-            className={`w-full flex-1 items-center gap-2 self-stretch rounded-lg border p-4 ${formState.errors.password ? `border-status-error focus:outline-none` : `border-grey-200`}`}
-            type='password'
-            id='password'
-            placeholder={PLACEHOLDER_PASSWORD}
-            {...register('password')}
-          />
+        <div className='flex flex-col'>
+          <div className='flex flex-col justify-start gap-1'>
+            <label
+              className={`self-stretch text-sm font-bold leading-[150%] ${formState.errors.password ? `text-status-error` : `text-grey-900`}`}
+              htmlFor='password'
+            >
+              비밀번호
+            </label>
+            <input
+              className={`w-full flex-1 items-center gap-2 self-stretch rounded-lg border p-4 ${formState.errors.password ? `border-status-error focus:outline-none` : `border-grey-200`}`}
+              type='password'
+              id='password'
+              placeholder={PLACEHOLDER_PASSWORD}
+              {...register('password')}
+            />
+          </div>
+          {formState.errors.password && (
+            <span className='self-stretch text-sm leading-[150%] text-status-error'>
+              {formState.errors.password.message}
+            </span>
+          )}
         </div>
-        {formState.errors.password && (
-          <span className='self-stretch text-sm leading-[150%] text-status-error'>
-            {formState.errors.password.message}
-          </span>
-        )}
       </div>
-      <div className='flex justify-between'>
-        <label htmlFor='saveId' className='flex items-center justify-center'>
+      <div className='mb-[22px] mt-9 flex w-full items-center justify-between px-5 md:mb-0 md:mt-0 md:flex md:justify-between md:px-0'>
+        <label htmlFor='saveId' className='flex items-center justify-center text-sm md:text-base'>
           <input type='checkbox' id='saveId' onClick={alreadyServiceHandler} className='mr-2 h-5 w-5' />
           로그인 정보 저장
         </label>
-        <button type='button' onClick={alreadyServiceHandler}>
+        <button type='button' onClick={alreadyServiceHandler} className='hidden md:block'>
           비밀번호를 잊어버리셨습니까?
         </button>
+        <button type='button' onClick={alreadyServiceHandler} className='block text-sm md:hidden'>
+          비밀번호찾기
+        </button>
+      </div>
+      <div className='w-full px-[10px] md:px-0'>
+        <button
+          type='submit'
+          className='duration-600 mx-auto w-full rounded-lg bg-primary-500 px-6 py-4 font-bold leading-[135%] text-white transition hover:bg-primary-600 active:bg-primary-700 md:w-[456px]'
+        >
+          로그인
+        </button>
       </div>
-      <button
-        type='submit'
-        className='duration-600 bg-h w-[456px] justify-start rounded-lg bg-primary-500 px-6 py-4 font-bold leading-[135%] text-white transition hover:bg-primary-600 active:bg-primary-700'
-      >
-        로그인
-      </button>
     </form>
   );
 };
diff --git a/src/components/signin/SigninSocial.tsx b/src/components/signin/SigninSocial.tsx
index bb32e2be..5f8e99fd 100644
--- a/src/components/signin/SigninSocial.tsx
+++ b/src/components/signin/SigninSocial.tsx
@@ -21,11 +21,11 @@ const SigninSocial = () => {
   };
 
   return (
-    <div className='flex items-center justify-center gap-[78px]'>
-      <button type='button' onClick={googleSignin} className='h-[45px] w-[300px]'>
+    <div className='flex flex-col gap-4 md:flex md:flex-row md:items-center md:justify-center md:gap-[78px]'>
+      <button type='button' onClick={googleSignin} className='h-full w-full md:w-[300px]'>
         <Image src='/google_login_img.png' alt='google login img' width={300} height={45} />
       </button>
-      <button type='button' onClick={kakaoSignin} className='h-[45px] w-[300px]'>
+      <button type='button' onClick={kakaoSignin} className='h-full w-full md:w-[300px]'>
         <Image src='/kakao_login_img.png' alt='kakao login img' width={300} height={45} />
       </button>
     </div>
diff --git a/src/components/signup/SignupForm.tsx b/src/components/signup/SignupForm.tsx
index 54820451..05776ce5 100644
--- a/src/components/signup/SignupForm.tsx
+++ b/src/components/signup/SignupForm.tsx
@@ -81,135 +81,139 @@ const SignupForm = () => {
   };
 
   return (
-    <form onSubmit={handleSubmit(SignUpHandler)} className='flex flex-col gap-8'>
-      <div className='flex flex-col'>
-        <div className='flex flex-col justify-start'>
-          <label
-            className={`self-stretch text-sm font-bold leading-[150%] ${formState.errors.nickname ? `text-status-error` : `text-grey-900`}`}
-          >
-            이름(닉네임)
-          </label>
-          <div className='flex flex-row gap-6'>
-            <input
-              className={`w-full flex-1 items-center gap-2 self-stretch rounded-lg border p-4 ${formState.errors.nickname ? `border-status-error focus:outline-none` : `border-grey-200`}`}
-              type='text'
-              id='nickname'
-              maxLength={8}
-              placeholder={PLACEHOLDER_NICKNAME}
-              {...register('nickname')}
-            />
-            <button
-              type='button'
-              className='duration-300" rounded-lg border border-grey-500 bg-grey-0 px-6 py-4 transition hover:bg-primary-600 hover:text-grey-0'
-              onClick={NicknameDuplicateTestHandler}
+    <form onSubmit={handleSubmit(SignUpHandler)} className='flex flex-col'>
+      <div className='mx-auto w-full max-w-[375px] px-5 md:max-w-full md:px-0'>
+        <div className='mb-6 flex flex-col gap-1 md:mb-8'>
+          <div className='flex flex-col justify-start gap-1'>
+            <label
+              className={`md:text- self-stretch text-sm font-bold leading-[150%] ${formState.errors.nickname ? `text-status-error` : `text-grey-900`}`}
             >
-              중복 검사
-            </button>
+              이름(닉네임)
+            </label>
+            <div className='flex flex-row gap-6'>
+              <input
+                className={`w-full flex-1 items-center gap-2 self-stretch rounded-lg border p-4 ${formState.errors.nickname ? `border-status-error focus:outline-none` : `border-grey-200`}`}
+                type='text'
+                id='nickname'
+                maxLength={8}
+                placeholder={PLACEHOLDER_NICKNAME}
+                {...register('nickname')}
+              />
+              <button
+                type='button'
+                className='duration-300" rounded-lg border border-grey-500 bg-grey-0 px-6 py-4 transition hover:bg-primary-600 hover:text-grey-0'
+                onClick={NicknameDuplicateTestHandler}
+              >
+                중복 검사
+              </button>
+            </div>
           </div>
+          {formState.errors.nickname ? (
+            <span className='self-stretch text-sm leading-[150%] text-status-error'>
+              {formState.errors.nickname.message}
+            </span>
+          ) : (
+            <span className='self-stretch text-xs font-normal not-italic leading-[150%] text-grey-100 md:text-base'>
+              2자 이상 8자 이하로 입력해주세요.
+            </span>
+          )}
         </div>
-        {formState.errors.nickname ? (
-          <span className='self-stretch text-sm leading-[150%] text-status-error'>
-            {formState.errors.nickname.message}
-          </span>
-        ) : (
-          <span className='self-stretch font-normal not-italic leading-[150%] text-grey-100'>
-            2자 이상 8자 이하로 입력해주세요.
-          </span>
-        )}
-      </div>
 
-      <div className='flex flex-col'>
-        <div className='flex flex-col justify-start'>
-          <label
-            className={`self-stretch text-sm font-bold leading-[150%] ${formState.errors.email ? `text-status-error` : `text-grey-900`}`}
-          >
-            아이디(이메일)
-          </label>
-          <div className='flex flex-row gap-6'>
-            <input
-              className={`w-full flex-1 items-center gap-2 self-stretch rounded-lg border p-4 ${formState.errors.email ? `border-status-error focus:outline-none` : `border-grey-200`}`}
-              type='email'
-              id='email'
-              placeholder={PLACEHOLDER_EMAIL}
-              {...register('email')}
-            />
-            <button
-              type='button'
-              className='duration-300" rounded-lg border border-grey-500 bg-grey-0 px-6 py-4 transition hover:bg-primary-600 hover:text-grey-0'
-              onClick={EmailDuplicateTestHandler}
+        <div className='mb-6 flex flex-col gap-1 md:mb-8'>
+          <div className='flex flex-col justify-start gap-1'>
+            <label
+              className={`self-stretch text-sm font-bold leading-[150%] ${formState.errors.email ? `text-status-error` : `text-grey-900`}`}
             >
-              중복 검사
-            </button>
+              아이디(이메일)
+            </label>
+            <div className='flex flex-row gap-6'>
+              <input
+                className={`w-full flex-1 items-center gap-2 self-stretch rounded-lg border p-4 ${formState.errors.email ? `border-status-error focus:outline-none` : `border-grey-200`}`}
+                type='email'
+                id='email'
+                placeholder={PLACEHOLDER_EMAIL}
+                {...register('email')}
+              />
+              <button
+                type='button'
+                className='duration-300" rounded-lg border border-grey-500 bg-grey-0 px-6 py-4 transition hover:bg-primary-600 hover:text-grey-0'
+                onClick={EmailDuplicateTestHandler}
+              >
+                중복 검사
+              </button>
+            </div>
           </div>
+          {formState.errors.email ? (
+            <span className='self-stretch text-sm leading-[150%] text-status-error'>
+              {formState.errors.email.message}
+            </span>
+          ) : (
+            <span className='self-stretch text-xs font-normal not-italic leading-[150%] text-grey-100 md:text-base'>
+              이메일 형식에 맞게 입력해주세요.
+            </span>
+          )}
         </div>
-        {formState.errors.email ? (
-          <span className='self-stretch text-sm leading-[150%] text-status-error'>
-            {formState.errors.email.message}
-          </span>
-        ) : (
-          <span className='self-stretch font-normal not-italic leading-[150%] text-grey-100'>
-            이메일 형식에 맞게 입력해주세요.
-          </span>
-        )}
-      </div>
 
-      <div className='flex flex-col'>
-        <div className='flex flex-col justify-start'>
-          <label
-            className={`self-stretch text-sm font-bold leading-[150%] ${formState.errors.password ? `text-status-error` : `text-grey-900`}`}
-          >
-            비밀번호
-          </label>
-          <input
-            className={`w-full flex-1 items-center gap-2 self-stretch rounded-lg border p-4 ${formState.errors.password ? `border-status-error focus:outline-none` : `border-grey-200`}`}
-            type='password'
-            id='password'
-            placeholder={PLACEHOLDER_PASSWORD}
-            {...register('password')}
-          />
+        <div className='mb-6 flex flex-col gap-1 md:mb-8'>
+          <div className='flex flex-col justify-start gap-1'>
+            <label
+              className={`self-stretch text-sm font-bold leading-[150%] ${formState.errors.password ? `text-status-error` : `text-grey-900`}`}
+            >
+              비밀번호
+            </label>
+            <input
+              className={`w-full flex-1 items-center gap-2 self-stretch rounded-lg border p-4 ${formState.errors.password ? `border-status-error focus:outline-none` : `border-grey-200`}`}
+              type='password'
+              id='password'
+              placeholder={PLACEHOLDER_PASSWORD}
+              {...register('password')}
+            />
+          </div>
+          {formState.errors.password ? (
+            <span className='self-stretch text-sm leading-[150%] text-status-error'>
+              {formState.errors.password.message}
+            </span>
+          ) : (
+            <span className='self-stretch text-xs font-normal not-italic leading-[150%] text-grey-100 md:text-base'>
+              특수문자(!@#$%^&*)를 1개 이상 포함하여 입력해주세요.
+            </span>
+          )}
         </div>
-        {formState.errors.password ? (
-          <span className='self-stretch text-sm leading-[150%] text-status-error'>
-            {formState.errors.password.message}
-          </span>
-        ) : (
-          <span className='self-stretch font-normal not-italic leading-[150%] text-grey-100'>
-            특수문자(!@#$%^&*)를 1개 이상 포함하여 입력해주세요.
-          </span>
-        )}
-      </div>
 
-      <div className='flex flex-col'>
-        <div className='flex flex-col justify-start'>
-          <label
-            className={`self-stretch text-sm font-bold leading-[150%] ${formState.errors.passwordCheck ? `text-status-error` : `text-grey-900`}`}
-          >
-            비밀번호 확인
-          </label>
-          <input
-            className={`w-full flex-1 items-center gap-2 self-stretch rounded-lg border p-4 ${formState.errors.passwordCheck ? `border-status-error focus:outline-none` : `border-grey-200`}`}
-            type='password'
-            id='passwordCheck'
-            placeholder={PLACEHOLDER_PASSWORD_CHECK}
-            {...register('passwordCheck')}
-          />
+        <div className='mb-6 flex flex-col gap-1 md:mb-8'>
+          <div className='flex flex-col justify-start gap-1'>
+            <label
+              className={`self-stretch text-sm font-bold leading-[150%] ${formState.errors.passwordCheck ? `text-status-error` : `text-grey-900`}`}
+            >
+              비밀번호 확인
+            </label>
+            <input
+              className={`w-full flex-1 items-center gap-2 self-stretch rounded-lg border p-4 ${formState.errors.passwordCheck ? `border-status-error focus:outline-none` : `border-grey-200`}`}
+              type='password'
+              id='passwordCheck'
+              placeholder={PLACEHOLDER_PASSWORD_CHECK}
+              {...register('passwordCheck')}
+            />
+          </div>
+          {formState.errors.passwordCheck ? (
+            <span className='self-stretch text-sm leading-[150%] text-status-error'>
+              {formState.errors.passwordCheck.message}
+            </span>
+          ) : (
+            <span className='self-stretch text-xs font-normal not-italic leading-[150%] text-grey-100 md:text-base'>
+              비밀번호를 한번 더 입력해주세요.
+            </span>
+          )}
         </div>
-        {formState.errors.passwordCheck ? (
-          <span className='self-stretch text-sm leading-[150%] text-status-error'>
-            {formState.errors.passwordCheck.message}
-          </span>
-        ) : (
-          <span className='self-stretch font-normal not-italic leading-[150%] text-grey-100'>
-            비밀번호를 한번 더 입력해주세요.
-          </span>
-        )}
       </div>
-      <button
-        type='submit'
-        className='duration-600 bg-h w-[456px] justify-start rounded-lg bg-primary-500 px-6 py-4 font-bold leading-[135%] text-white transition hover:bg-primary-600 active:bg-primary-700'
-      >
-        회원가입
-      </button>
+      <div className='w-full px-[10px] md:px-0'>
+        <button
+          type='submit'
+          className='duration-600 mx-auto w-full rounded-lg bg-primary-500 px-6 py-4 font-bold leading-[135%] text-white transition hover:bg-primary-600 active:bg-primary-700 md:w-[456px]'
+        >
+          회원가입
+        </button>
+      </div>
     </form>
   );
 };


Reviews:
user: login: coderabbitai[bot]
body: **Actionable comments posted: 1**

<details>
<summary>🧹 Nitpick comments (1)</summary><blockquote>

<details>
<summary>src/components/signin/SigninForm.tsx (1)</summary><blockquote>

`31-98`: **전체적인 반응형 디자인 구현이 잘 되었습니다.**

SigninForm 컴포넌트의 전체적인 반응형 디자인 구현이 매우 잘 되었습니다. 화면 크기에 따라 적절한 너비, 패딩, 마진 및 텍스트 크기 조정이 이루어졌습니다. 특히 모바일과 데스크톱 환경 모두에서 일관된 사용자 경험을 제공하기 위한 노력이 돋보입니다.

다만, 긴 Tailwind 클래스명은 코드 가독성을 다소 떨어뜨릴 수 있습니다. 자주 사용되는 스타일 조합은 별도의 컴포넌트나 Tailwind의 @apply 지시어를 사용하여 추출하는 것을 고려해 볼 수 있습니다.

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 7db97156ab4140350c274274dd0b6b4d23d0eaa1 and 8d7e35833764dac14d5ff508ef2dd46896713a4b.

</details>

<details>
<summary>📒 Files selected for processing (5)</summary>

* `src/app/(pages)/signIn/page.tsx` (1 hunks)
* `src/app/(pages)/signUp/page.tsx` (1 hunks)
* `src/components/signin/SigninForm.tsx` (1 hunks)
* `src/components/signin/SigninSocial.tsx` (1 hunks)
* `src/components/signup/SignupForm.tsx` (1 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧬 Code Graph Analysis (3)</summary>

<details>
<summary>src/components/signin/SigninForm.tsx (1)</summary><blockquote>

<details>
<summary>src/constants/placeholders.ts (2)</summary>

* `PLACEHOLDER_EMAIL` (1-1)
* `PLACEHOLDER_PASSWORD` (3-3)

</details>

</blockquote></details>
<details>
<summary>src/app/(pages)/signIn/page.tsx (1)</summary><blockquote>

<details>
<summary>src/constants/paths.ts (1)</summary>

* `SIGNUP` (3-3)

</details>

</blockquote></details>
<details>
<summary>src/components/signup/SignupForm.tsx (1)</summary><blockquote>

<details>
<summary>src/constants/placeholders.ts (4)</summary>

* `PLACEHOLDER_NICKNAME` (2-2)
* `PLACEHOLDER_EMAIL` (1-1)
* `PLACEHOLDER_PASSWORD` (3-3)
* `PLACEHOLDER_PASSWORD_CHECK` (4-4)

</details>

</blockquote></details>

</details>

</details>

<details>
<summary>🔇 Additional comments (19)</summary><blockquote>

<details>
<summary>src/components/signin/SigninSocial.tsx (1)</summary>

`24-25`: **버튼 레이아웃이 반응형으로 개선되었습니다.**

소셜 로그인 버튼의 레이아웃을 모바일에서는 세로로 스택되도록, 중간 크기 이상의 화면에서는 가로로 정렬되도록 변경해 사용성을 높였습니다. 버튼 너비도 화면 크기에 따라 적절하게 조정되었습니다.



Also applies to: 28-28

</details>
<details>
<summary>src/app/(pages)/signUp/page.tsx (3)</summary>

`9-13`: **회원가입 페이지의 반응형 레이아웃 구조가 개선되었습니다.**

전체 뷰포트 크기를 활용하는 컨테이너로 변경하고, 화면 크기에 따라 패딩과 여백이 적절히 조정되도록 하였습니다. 제목과 폼 컨테이너의 마진도 화면 크기에 맞게 조정되었습니다.

---

`17-24`: **SNS 로그인 섹션의 스타일이 개선되었습니다.**

소셜 로그인 섹션의 구분선 너비가 화면 크기에 따라 조정되도록 하여 가독성과 균형을 개선했습니다. 폭이 좁은 화면에서는 더 좁은 구분선을, 중간 크기 이상의 화면에서는 더 넓은 구분선을 사용합니다.

---

`27-29`: **이미지 섹션의 조건부 표시가 구현되었습니다.**

모바일 화면에서는 이미지를 숨기고, 중간 크기 이상의 화면에서만 표시하도록 하여 모바일 환경에서의 가독성과 사용성을 높였습니다. 또한 large 화면에서는 `block` 표시를 통해 더 명확하게 보이도록 했습니다.

</details>
<details>
<summary>src/app/(pages)/signIn/page.tsx (5)</summary>

`23-25`: **로그인 페이지의 반응형 레이아웃 구조가 개선되었습니다.**

전체 뷰포트 크기를 활용하는 컨테이너로 변경하고, 화면 크기에 따라 패딩과 여백이 적절히 조정되도록 하여 모든 화면 크기에서 최적의 사용자 경험을 제공합니다.

---

`26-29`: **제목과 폼 섹션의 간격이 개선되었습니다.**

제목과 폼 섹션 사이의 마진이 화면 크기에 맞게 조정되어 시각적 균형을 유지합니다.

---

`31-37`: **회원가입 링크 섹션의 반응형 텍스트 스타일링이 적용되었습니다.**

"아이디가 없으신가요?"와 "회원가입" 텍스트 크기가 화면 크기에 따라 조정되어 가독성이 향상되었습니다.

---

`38-44`: **SNS 로그인 섹션의 스타일이 개선되었습니다.**

SignUp 페이지와 일관된 디자인으로, 소셜 로그인 섹션의 구분선 너비가 화면 크기에 따라 조정되었습니다. 모바일에서는 더 좁은 구분선을, 데스크탑에서는 더 넓은 구분선을 사용하여 각 화면 크기에 맞는 시각적 균형을 제공합니다.

---

`47-49`: **이미지 섹션의 조건부 표시가 구현되었습니다.**

SignUp 페이지와 동일하게, 모바일 화면에서는 이미지를 숨기고 중간 크기 이상의 화면에서만 표시하도록 구현하여 모바일 사용자 경험을 최적화했습니다.

</details>
<details>
<summary>src/components/signup/SignupForm.tsx (6)</summary>

`84-85`: **폼 컨테이너의 반응형 레이아웃이 적용되었습니다.**

폼 전체 구조가 flex-col로 정렬되고, 너비가 화면 크기에 따라 조정되도록 변경되었습니다. 모바일에서는 375px 너비와 좌우 패딩이 적용되고, 중간 크기 이상의 화면에서는 전체 너비를 활용합니다.

---

`86-120`: **닉네임 입력 섹션의 반응형 구조가 개선되었습니다.**

각 입력 필드 그룹에 일관된 마진과 간격이 적용되었으며, 라벨-입력필드-에러메시지 구조가 명확하게 정리되었습니다. 에러 메시지도 화면 크기에 따라 적절하게 표시되도록 개선되었습니다.

---

`122-155`: **이메일 입력 섹션의 반응형 구조가 개선되었습니다.**

닉네임 섹션과 동일한 구조로 일관성 있게 개선되었으며, 에러 메시지와 안내 텍스트의 조건부 표시가 깔끔하게 구현되었습니다.

---

`157-181`: **비밀번호 입력 섹션의 반응형 구조가 개선되었습니다.**

일관된 형식으로 구조화되어 전체적인 폼의 가독성과 사용성이 향상되었습니다. 특히 안내 텍스트의 글꼴 크기가 화면 크기에 따라 조정되도록 개선되었습니다.

---

`183-207`: **비밀번호 확인 섹션의 반응형 구조가 개선되었습니다.**

다른 입력 필드와 동일한 패턴으로 구조화되어 일관성 있는 사용자 경험을 제공합니다.

---

`209-216`: **회원가입 버튼의 반응형 스타일링이 적용되었습니다.**

버튼 너비가 화면 크기에 따라 자동으로 조정되도록 개선되었습니다. 모바일에서는 전체 너비를 사용하고, 중간 크기 이상의 화면에서는 456px의 고정 너비를 사용하여 가독성과 클릭 영역을 최적화했습니다.

</details>
<details>
<summary>src/components/signin/SigninForm.tsx (4)</summary>

`31-31`: **폼 컨테이너에 반응형 스타일 적용이 잘 되었습니다.**

폼 요소에 Flexbox를 사용하여 내용을 중앙 정렬하고, 중간 화면 크기에서 적절한 간격(gap-8)을 적용한 것이 좋습니다.

---

`55-76`: **비밀번호 필드 구조가 일관성 있게 개선되었습니다.**

이메일 필드와 동일한 패턴으로 비밀번호 필드도 개선되어 일관된 사용자 경험을 제공합니다. 오류 메시지 표시 방식도 적절합니다.

---

`78-89`: **로그인 정보 저장 및 비밀번호 찾기 영역의 반응형 처리가 잘 되었습니다.**

화면 크기에 따라 다른 텍스트와 레이아웃을 적용한 것이 좋습니다. 특히:
- 데스크톱: "비밀번호를 잊어버리셨습니까?" (긴 텍스트)
- 모바일: "비밀번호찾기" (짧은 텍스트)

이렇게 화면 크기에 맞게 UI를 최적화한 것이 좋습니다.

---

`90-97`: **로그인 버튼의 반응형 스타일이 잘 적용되었습니다.**

로그인 버튼에 다음과 같은 개선사항이 적용되었습니다:
- 모바일에서 적절한 너비와 패딩
- 중간 크기 이상의 화면에서 고정 너비 (456px)
- 호버 및 액티브 상태에 대한 색상 변경으로 상호작용성 향상

버튼의 반응형 처리와 상호작용 상태에 대한 시각적 피드백이 사용자 경험을 향상시킵니다.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-23T07:29:50Z
user: login: kjjyyy01
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-23T08:02:55Z
user: login: coderabbitai[bot]
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-23T08:03:27Z
user: login: mangomaneya
body: 반응형! 굳!!
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-04-23T11:41:34Z
user: login: kjjyyy01
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-23T11:53:00Z
user: login: JinchaeKim
body: 깔끔하고 너무 좋습니다!
다만 전반적으로 px로 고정할 수 밖에 없는 이유가 있을까요..?!
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-04-24T01:06:09Z

Review comments:
diff_hunk: @@ -28,66 +28,73 @@ const SigninForm = () => {
   };
 
   return (
-    <form onSubmit={handleSubmit(SignInHandler)} className='flex flex-col gap-8'>
-      <div className='flex flex-col'>
-        <div className='flex flex-col justify-start'>
-          <label
-            className={`self-stretch text-sm font-bold leading-[150%] ${formState.errors.email ? `text-status-error` : `text-grey-900`}`}
-            htmlFor='email'
-          >
-            아이디(이메일)
-          </label>
-          <input
-            className={`w-full flex-1 items-center gap-2 self-stretch rounded-lg border p-4 ${formState.errors.email ? `border-status-error focus:outline-none` : `border-grey-200`}`}
-            type='email'
-            id='email'
-            placeholder={PLACEHOLDER_EMAIL}
-            {...register('email')}
-          />
+    <form onSubmit={handleSubmit(SignInHandler)} className='md: flex flex-col items-center justify-center md:gap-8'>
+      <div className='w-[375px] px-5 md:w-full md:px-0'>
+        <div className='mb-8 flex flex-col'>
+          <div className='flex flex-col justify-start gap-1'>
+            <label
+              className={`self-stretch text-sm font-bold leading-[150%] ${formState.errors.email ? `text-status-error` : `text-grey-900`}`}
+              htmlFor='email'
+            >
+              아이디(이메일)
+            </label>
+            <input
+              className={`w-full flex-1 items-center gap-2 self-stretch rounded-lg border p-4 ${formState.errors.email ? `border-status-error focus:outline-none` : `border-grey-200`}`}
+              type='email'
+              id='email'
+              placeholder={PLACEHOLDER_EMAIL}
+              {...register('email')}
+            />
+          </div>
+          {formState.errors.email && (
+            <span className='self-stretch text-sm leading-[150%] text-status-error'>
+              {formState.errors.email.message}
+            </span>
+          )}
         </div>
path: src/components/signin/SigninForm.tsx
user: login: coderabbitai[bot]
body: _💡 Verification agent_

<details>
<summary>❓ Verification inconclusive</summary>

**이메일 입력 필드 구조가 잘 개선되었습니다.**

이메일 입력 필드 섹션을 컨테이너로 감싸고 반응형 너비를 적용한 것이 좋습니다. 오류 상태에 따른 스타일 변경도 사용자에게 명확한 피드백을 제공합니다.

다만, 매우 작은 모바일 화면(375px 미만)에서는 가로 스크롤이 발생할 수 있습니다.


---

🏁 Script executed:

```shell
#!/bin/bash
# 프로젝트에서 반응형 디자인 관련 설정 확인
rg -A 2 "tailwind.config" --glob "*.{js,ts,tsx,jsx}"
```

Length of output: 52

---



</details>

**고정된 너비 대신 최대 너비(max-width)를 사용하세요**

현재 `w-[375px]`로 고정된 너비를 사용하면 뷰포트가 375px 미만일 때 가로 스크롤이 발생할 수 있습니다.  
아래처럼 고정 너비를 `max-w-[375px] w-full`로 변경하면 작은 화면에서도 컨테이너가 스크린에 맞춰 축소됩니다.

- 파일: src/components/signin/SigninForm.tsx  
  라인 32–54

제안 변경사항:
```diff
- <div className='w-[375px] px-5 md:w-full md:px-0'>
+ <div className='max-w-[375px] w-full px-5 md:px-0'>
```



<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
      <div className='max-w-[375px] w-full px-5 md:px-0'>
        <div className='mb-8 flex flex-col'>
          <div className='flex flex-col justify-start gap-1'>
            <label
              className={`self-stretch text-sm font-bold leading-[150%] ${formState.errors.email ? `text-status-error` : `text-grey-900`}`}
              htmlFor='email'
            >
              아이디(이메일)
            </label>
            <input
              className={`w-full flex-1 items-center gap-2 self-stretch rounded-lg border p-4 ${formState.errors.email ? `border-status-error focus:outline-none` : `border-grey-200`}`}
              type='email'
              id='email'
              placeholder={PLACEHOLDER_EMAIL}
              {...register('email')}
            />
          </div>
          {formState.errors.email && (
            <span className='self-stretch text-sm leading-[150%] text-status-error'>
              {formState.errors.email.message}
            </span>
          )}
        </div>
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated reply by CodeRabbit -->

✅ Addressed in commit 2606124

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-23T07:29:49Z
author_association: NONE
diff_hunk: @@ -28,66 +28,73 @@ const SigninForm = () => {
   };
 
   return (
-    <form onSubmit={handleSubmit(SignInHandler)} className='flex flex-col gap-8'>
-      <div className='flex flex-col'>
-        <div className='flex flex-col justify-start'>
-          <label
-            className={`self-stretch text-sm font-bold leading-[150%] ${formState.errors.email ? `text-status-error` : `text-grey-900`}`}
-            htmlFor='email'
-          >
-            아이디(이메일)
-          </label>
-          <input
-            className={`w-full flex-1 items-center gap-2 self-stretch rounded-lg border p-4 ${formState.errors.email ? `border-status-error focus:outline-none` : `border-grey-200`}`}
-            type='email'
-            id='email'
-            placeholder={PLACEHOLDER_EMAIL}
-            {...register('email')}
-          />
+    <form onSubmit={handleSubmit(SignInHandler)} className='md: flex flex-col items-center justify-center md:gap-8'>
+      <div className='w-[375px] px-5 md:w-full md:px-0'>
+        <div className='mb-8 flex flex-col'>
+          <div className='flex flex-col justify-start gap-1'>
+            <label
+              className={`self-stretch text-sm font-bold leading-[150%] ${formState.errors.email ? `text-status-error` : `text-grey-900`}`}
+              htmlFor='email'
+            >
+              아이디(이메일)
+            </label>
+            <input
+              className={`w-full flex-1 items-center gap-2 self-stretch rounded-lg border p-4 ${formState.errors.email ? `border-status-error focus:outline-none` : `border-grey-200`}`}
+              type='email'
+              id='email'
+              placeholder={PLACEHOLDER_EMAIL}
+              {...register('email')}
+            />
+          </div>
+          {formState.errors.email && (
+            <span className='self-stretch text-sm leading-[150%] text-status-error'>
+              {formState.errors.email.message}
+            </span>
+          )}
         </div>
path: src/components/signin/SigninForm.tsx
user: login: kjjyyy01
body: 이렇게하니까 input창이 작아져

created_at: 2025-04-23T08:02:55Z
author_association: COLLABORATOR
diff_hunk: @@ -28,66 +28,73 @@ const SigninForm = () => {
   };
 
   return (
-    <form onSubmit={handleSubmit(SignInHandler)} className='flex flex-col gap-8'>
-      <div className='flex flex-col'>
-        <div className='flex flex-col justify-start'>
-          <label
-            className={`self-stretch text-sm font-bold leading-[150%] ${formState.errors.email ? `text-status-error` : `text-grey-900`}`}
-            htmlFor='email'
-          >
-            아이디(이메일)
-          </label>
-          <input
-            className={`w-full flex-1 items-center gap-2 self-stretch rounded-lg border p-4 ${formState.errors.email ? `border-status-error focus:outline-none` : `border-grey-200`}`}
-            type='email'
-            id='email'
-            placeholder={PLACEHOLDER_EMAIL}
-            {...register('email')}
-          />
+    <form onSubmit={handleSubmit(SignInHandler)} className='md: flex flex-col items-center justify-center md:gap-8'>
+      <div className='w-[375px] px-5 md:w-full md:px-0'>
+        <div className='mb-8 flex flex-col'>
+          <div className='flex flex-col justify-start gap-1'>
+            <label
+              className={`self-stretch text-sm font-bold leading-[150%] ${formState.errors.email ? `text-status-error` : `text-grey-900`}`}
+              htmlFor='email'
+            >
+              아이디(이메일)
+            </label>
+            <input
+              className={`w-full flex-1 items-center gap-2 self-stretch rounded-lg border p-4 ${formState.errors.email ? `border-status-error focus:outline-none` : `border-grey-200`}`}
+              type='email'
+              id='email'
+              placeholder={PLACEHOLDER_EMAIL}
+              {...register('email')}
+            />
+          </div>
+          {formState.errors.email && (
+            <span className='self-stretch text-sm leading-[150%] text-status-error'>
+              {formState.errors.email.message}
+            </span>
+          )}
         </div>
path: src/components/signin/SigninForm.tsx
user: login: coderabbitai[bot]
body: @kjjyyy01 네, 이해합니다. input 필드 크기가 일관되게 유지되는 것이 중요하시군요. 대신 다음과 같은 방법은 어떨까요:

```css
<div className='w-[min(100%,375px)] px-5 md:w-full md:px-0'>
```

이 방법은 화면 너비가 375px보다 작을 때만 화면에 맞추고, 그렇지 않으면 375px의 고정 너비를 유지합니다. 이렇게 하면 가로 스크롤을 방지하면서도 input 필드의 크기가 너무 작아지는 것을 최소화할 수 있습니다.

또는 원래대로 `w-[375px]`를 유지하고 부모 컨테이너에 `overflow-x-auto`를 추가하는 방법도 있습니다.

---

<details>
<summary>✏️ Learnings added</summary>

```
Learnt from: kjjyyy01
PR: DnJ0408/saram-byeol#139
File: src/components/signin/SigninForm.tsx:32-54
Timestamp: 2025-04-23T08:03:26.672Z
Learning: For the signin/signup responsive design in DnJ0408/saram-byeol project, maintaining consistent input field sizes at 375px width is important, even if it means allowing horizontal scrolling on smaller screens. Using max-width approaches that reduce input field size on very small screens is not preferred.
```

> Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure [review instructions](https://docs.coderabbit.ai/guides/review-instructions). You can manage existing learnings in the [app](https://app.coderabbit.ai/learnings).

</details>




<!-- <agentComponentType>chat-answer</agentComponentType> -->

<!-- <rawResChunk><answer>@kjjyyy01 네, 이해합니다. input 필드 크기가 일관되게 유지되는 것이 중요하시군요. 대신 다음과 같은 방법은 어떨까요:

```css
<div className='w-[min(100%,375px)] px-5 md:w-full md:px-0'>
```

이 방법은 화면 너비가 375px보다 작을 때만 화면에 맞추고, 그렇지 않으면 375px의 고정 너비를 유지합니다. 이렇게 하면 가로 스크롤을 방지하면서도 input 필드의 크기가 너무 작아지는 것을 최소화할 수 있습니다.

또는 원래대로 `w-[375px]`를 유지하고 부모 컨테이너에 `overflow-x-auto`를 추가하는 방법도 있습니다.

---

<details>
<summary>✏️ Learnings added</summary>

```
Learnt from: kjjyyy01
PR: DnJ0408/saram-byeol#139
File: src/components/signin/SigninForm.tsx:32-54
Timestamp: 2025-04-23T08:03:26.672Z
Learning: For the signin/signup responsive design in DnJ0408/saram-byeol project, maintaining consistent input field sizes at 375px width is important, even if it means allowing horizontal scrolling on smaller screens. Using max-width approaches that reduce input field size on very small screens is not preferred.
```

> Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure [review instructions](https://docs.coderabbit.ai/guides/review-instructions). You can manage existing learnings in the [app](https://app.coderabbit.ai/learnings).

</details>

</answer></rawResChunk> -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-23T08:03:27Z
author_association: NONE
diff_hunk: @@ -20,32 +20,34 @@ const SignIn = () => {
   }, [isSignin, router]);
 
   return (
-    <div className='flex h-[100vh] w-[100vw] items-center justify-center overflow-hidden overflow-y-auto'>
-      <section className='flex w-full flex-col items-center justify-center'>
-        <h1 className='mb-10 text-center text-[28px] font-bold text-primary-500'>사람, 별 로그인</h1>
-        <section className='mb-[22px]'>
-          <SigninForm />
-        </section>
+    <div className='h-[100vh] w-[100vw]'>
path: src/app/(pages)/signIn/page.tsx
user: login: mangomaneya
body: p3. 100vh는 h-screen이나 w-screen으로 대응될것 같아요!
created_at: 2025-04-23T11:39:29Z
author_association: COLLABORATOR
diff_hunk: @@ -20,32 +20,34 @@ const SignIn = () => {
   }, [isSignin, router]);
 
   return (
-    <div className='flex h-[100vh] w-[100vw] items-center justify-center overflow-hidden overflow-y-auto'>
-      <section className='flex w-full flex-col items-center justify-center'>
-        <h1 className='mb-10 text-center text-[28px] font-bold text-primary-500'>사람, 별 로그인</h1>
-        <section className='mb-[22px]'>
-          <SigninForm />
-        </section>
+    <div className='h-[100vh] w-[100vw]'>
path: src/app/(pages)/signIn/page.tsx
user: login: kjjyyy01
body: 아하 넵 !
created_at: 2025-04-23T11:53:00Z
author_association: COLLABORATOR

PR comments:
user: login: vercel[bot]
created_at: 2025-04-23T07:27:12Z
body: [vc]: #Ixov7StmaLOco+gVyXR2INvt7YcMJEOwWNgUSxxphIc=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJzYXJhbS1ieWVvbCIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJzYXJhbS1ieWVvbC1naXQtc3R5bGUtMTM2LXNpZ25pbi01MDc5MDEtamlucy1wcm9qZWN0cy1kM2ViN2M1Ni52ZXJjZWwuYXBwIn0sImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9qaW5zLXByb2plY3RzLWQzZWI3YzU2L3NhcmFtLWJ5ZW9sLzNhdmtzNFJpQnVpRHJlZTZtVUU2TjY3VzlxTjUiLCJwcmV2aWV3VXJsIjoic2FyYW0tYnllb2wtZ2l0LXN0eWxlLTEzNi1zaWduaW4tNTA3OTAxLWppbnMtcHJvamVjdHMtZDNlYjdjNTYudmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCIsInJvb3REaXJlY3RvcnkiOm51bGx9XX0=
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **saram-byeol** | ✅ Ready ([Inspect](https://vercel.com/jins-projects-d3eb7c56/saram-byeol/3avks4RiBuiDree6mUE6N67W9qN5)) | [Visit Preview](https://saram-byeol-git-style-136-signin-507901-jins-projects-d3eb7c56.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/saram-byeol-git-style-136-signin-507901-jins-projects-d3eb7c56.vercel.app?via=pr-comment-feedback-link) | Apr 24, 2025 5:29am |


author_association: NONE
user: login: coderabbitai[bot]
created_at: 2025-04-23T07:27:14Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- walkthrough_start -->

"""
## Walkthrough

이 변경 사항은 로그인(SignIn) 및 회원가입(SignUp) 페이지와 관련 폼 컴포넌트의 레이아웃과 스타일을 전반적으로 리팩토링하여 반응형 디자인을 개선합니다. 각 페이지의 컨테이너 구조가 단순화되고, 내부 요소들의 정렬 및 여백이 화면 크기에 따라 조정됩니다. 소셜 로그인 버튼, 입력 폼, 오류 메시지, 이미지 영역 등이 반응형으로 재배치되며, JSX 구조와 CSS 클래스명이 일관성 있게 변경되었습니다. 기능적 로직이나 이벤트 핸들러에는 영향이 없습니다.

## Changes

| 파일(들) | 변경 요약 |
|---|---|
| `src/app/(pages)/signIn/page.tsx`, `src/app/(pages)/signUp/page.tsx` | 페이지 컨테이너 구조 리팩토링, 반응형 레이아웃 및 스타일 개선, 이미지 영역의 조건부 표시, 텍스트 및 구분선 스타일 조정 |
| `src/components/signin/SigninForm.tsx`, `src/components/signup/SignupForm.tsx` | 폼 컴포넌트의 레이아웃 재구성, 입력 필드와 오류 메시지의 구조 및 여백 개선, 버튼 위치 및 스타일 반응형 조정, JSX 구조 및 클래스명 통일 |
| `src/components/signin/SigninSocial.tsx` | 소셜 로그인 버튼을 반응형 스택 구조로 변경, 버튼 너비 및 정렬 방식 조정 |

## Sequence Diagram(s)

```mermaid
sequenceDiagram
    participant User
    participant SignInPage
    participant SigninForm
    participant SigninSocial

    User->>SignInPage: 페이지 접속
    SignInPage->>SigninForm: 로그인 폼 렌더링
    SignInPage->>SigninSocial: 소셜 로그인 버튼 렌더링
    User->>SigninForm: 이메일/비밀번호 입력 및 제출
    SigninForm-->>User: 오류 메시지 또는 로그인 처리
    User->>SigninSocial: 소셜 로그인 버튼 클릭
    SigninSocial-->>User: 소셜 인증 프로세스 진행
```

## Possibly related PRs

- DnJ0408/saram-byeol#127: SignIn 페이지의 레이아웃과 반응형 스타일을 직접적으로 수정한 PR로, 동일한 파일과 UI 구조에 대한 변경이 포함되어 있습니다.

## Suggested reviewers

- shoney02
- JinchaeKim
- mangomaneya

## Poem

> 🐇  
> 로그인 창이 새 옷을 입었네  
> 폼도 버튼도 폭신하게 변신했지  
> 작은 화면에도, 큰 화면에도  
> 토끼처럼 폴짝, 반응형으로 뛰어올라  
> 회원가입도, 소셜 로그인도  
> 모두가 환하게 맞아줄 거야!  
> 🌱✨
"""

<!-- walkthrough_end -->


---

<details>
<summary>📜 Recent review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 365a41f2c38945ca00f97cfe1eeb2ee93d063530 and 14b532f1e5f2065ac76912ffb37c3f9e2d53d972.

</details>

<details>
<summary>📒 Files selected for processing (2)</summary>

* `src/app/(pages)/signIn/page.tsx` (1 hunks)
* `src/app/(pages)/signUp/page.tsx` (1 hunks)

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (2)</summary>

* src/app/(pages)/signIn/page.tsx
* src/app/(pages)/signUp/page.tsx

</details>

</details>
<!-- internal state start -->


<!-- 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 -->

<!-- internal state end -->
<!-- finishing_touch_checkbox_start -->

<details>
<summary>✨ Finishing Touches</summary>

- [ ] <!-- {"checkboxId": "7962f53c-55bc-4827-bfbf-6a18da830691"} --> 📝 Generate Docstrings

</details>

<!-- finishing_touch_checkbox_end -->
<!-- tips_start -->

---



<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=DnJ0408/saram-byeol&utm_content=139):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Generate unit testing code for this file.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai generate unit testing code for this file.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and generate unit testing code.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai generate sequence diagram` to generate a sequence diagram of the changes in this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: NONE
user: login: kjjyyy01
created_at: 2025-04-24T04:07:30Z
body: > 깔끔하고 너무 좋습니다! 다만 전반적으로 px로 고정할 수 밖에 없는 이유가 있을까요..?!

figma에 있는 그대로 반영했는데 일단은 맞는지 모르겠지만 모양은 똑같이 나오게 수정했습니다. 모바일버전을 못해서 아쉽습니다 ㅠㅠㅠ
author_association: COLLABORATOR