From 5af6bbc59c27af65dacd7a436947b607febf71c0 Mon Sep 17 00:00:00 2001
From: jiohjung98 <ckaquz98@naver.com>
Date: Sun, 22 Sep 2024 03:30:10 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EB=A7=88=EC=9D=B4=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EB=B0=98=EC=9D=91?=
 =?UTF-8?q?=ED=98=95=20=EC=9E=91=EC=97=85=20=EB=B0=8F=20=EC=9D=B8=EC=A6=9D?=
 =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=EB=93=A4=20flex-shrink-0=20=EC=86=8D?=
 =?UTF-8?q?=EC=84=B1=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/mypage/edit/changepassword/page.tsx   |  4 ++--
 src/app/mypage/edit/changephone/page.tsx      | 22 +++++++++++--------
 src/components/mypage/CertifyPassword.tsx     |  8 ++++---
 src/components/mypage/NewPassword.tsx         | 10 ++++++---
 src/components/signup/Step4.tsx               |  2 +-
 .../signup/modal/PhoneVerification.tsx        | 10 ++++-----
 6 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/src/app/mypage/edit/changepassword/page.tsx b/src/app/mypage/edit/changepassword/page.tsx
index ca41492..a4b16e2 100644
--- a/src/app/mypage/edit/changepassword/page.tsx
+++ b/src/app/mypage/edit/changepassword/page.tsx
@@ -10,7 +10,7 @@ const ChangePasswordPage = () => {
   const [step, setStep] = useState(0);
   return (
     <div>
-      <div className="px-5 mt-5 w-full mx-auto sm:max-w-[640px] sm:mt-10 sm:px-0">
+      <div className="w-[90%] mt-5 w-full mx-auto sm:max-w-[640px] sm:mt-10 sm:px-0">
         {step === 2 ? null : (
           <div onClick={() => router.back()} className="py-[14px]">
             <img
@@ -21,7 +21,7 @@ const ChangePasswordPage = () => {
           </div>
         )}
       </div>
-      <section className="max-w-[340px] w-full mx-auto mt-[76px]">
+      <section className="w-[90%] max-w-[340px] w-full mx-auto mt-0 sm:mt-[76px]">
         {step === 0 ? <CertifyPassword setStep={setStep} /> : null}
         {step === 1 ? <NewPassword setStep={setStep} /> : null}
         {step === 2 ? <PasswordChangeSuccess /> : null}
diff --git a/src/app/mypage/edit/changephone/page.tsx b/src/app/mypage/edit/changephone/page.tsx
index ac1d90c..6ad6666 100644
--- a/src/app/mypage/edit/changephone/page.tsx
+++ b/src/app/mypage/edit/changephone/page.tsx
@@ -132,12 +132,14 @@ const ChangePhonePage = () => {
 
   return (
     <div>
-      <div className="px-5 mt-5 w-full mx-auto sm:max-w-[640px] sm:mt-10 sm:px-0">
+      <div className="w-[90%] mt-5 w-full mx-auto sm:max-w-[640px] sm:mt-10 sm:px-0">
         <div onClick={() => router.back()} className="py-[14px]">
           <img src="/images/mypage/left_password.svg" alt="" className="cursor-pointer" />
         </div>
       </div>
-      <section className="max-w-[340px] w-full mx-auto mt-[76px]">
+      <section className="w-[90%] max-w-[340px] w-full mx-auto mt-0 sm:mt-[76px]">
+      <div className='flex flex-col min-h-[calc(100dvh-220px)] justify-between sm:justify-center sm:min-h-0'>
+        <div>
         <div className="text-heading3">
           <span className="text-normal">휴대폰 번호</span>를 인증해주세요
         </div>
@@ -157,7 +159,7 @@ const ChangePhonePage = () => {
               isRequest ? (
                 <div
                   onClick={handleResending}
-                  className={`ml-[6px] px-4 py-[14px] bg-black rounded-[12px] text-white text-title2
+                  className={`ml-[6px] px-4 py-[14px] bg-black rounded-[12px] text-white text-title2 flex-shrink-0
                   ${isComplete ? 'cursor-default' : 'cursor-pointer'}
                   `}>
                   재전송
@@ -165,12 +167,12 @@ const ChangePhonePage = () => {
               ) : (
                 <div
                   onClick={handleRequest}
-                  className="ml-[6px] cursor-pointer px-4 py-[14px] bg-black rounded-[12px] text-white text-title2">
+                  className="ml-[6px] cursor-pointer px-4 py-[14px] bg-black rounded-[12px] text-white text-title2 flex-shrink-0">
                   인증 요청
                 </div>
               )
             ) : (
-              <div className="ml-[6px] px-4 py-[14px] bg-gray100 rounded-[12px] text-gray400 text-title2">
+              <div className="ml-[6px] px-4 py-[14px] bg-gray100 rounded-[12px] text-gray400 text-title2 flex-shrink-0">
                 인증 요청
               </div>
             )}
@@ -196,13 +198,13 @@ const ChangePhonePage = () => {
             {isRequest && validNumberOk ? (
               <div
                 onClick={handleCertify}
-                className={` ml-[8px] px-4 py-[14px] bg-black rounded-[12px] text-white text-title2
+                className={` ml-[8px] px-4 py-[14px] bg-black rounded-[12px] text-white text-title2 flex-shrink-0 
                 ${isComplete ? 'cursor-default' : 'cursor-pointer'}
                 `}>
                 인증 완료
               </div>
             ) : (
-              <div className="ml-[8px] px-4 py-[14px] bg-gray100 rounded-[12px] text-gray400 text-title2">
+              <div className="ml-[8px] px-4 py-[14px] bg-gray100 rounded-[12px] text-gray400 text-title2 flex-shrink-0">
                 인증 완료
               </div>
             )}
@@ -227,17 +229,19 @@ const ChangePhonePage = () => {
             </div>
           )}
         </div>
+        </div>
         {isComplete ? (
           <div
             onClick={handleComplete}
-            className="cursor-pointer flex items-center justify-center px-5 py-[14px] w-full rounded-[12px] bg-gradient2 text-heading4 text-white">
+            className="cursor-pointer flex items-center justify-center px-5 py-[14px] w-full rounded-[12px] bg-gradient2 text-heading4 text-white mt-0 sm:mt-[40px]">
             변경 완료
           </div>
         ) : (
-          <div className="flex items-center justify-center px-5 py-[14px] w-full rounded-[12px] bg-gray100 text-heading4 text-gray400">
+          <div className="flex items-center justify-center px-5 py-[14px] w-full rounded-[12px] bg-gray100 text-heading4 text-gray400 mt-0 sm:mt-[40px]">
             변경 완료
           </div>
         )}
+        </div>
       </section>
     </div>
   );
diff --git a/src/components/mypage/CertifyPassword.tsx b/src/components/mypage/CertifyPassword.tsx
index ef5c1bb..66e148e 100644
--- a/src/components/mypage/CertifyPassword.tsx
+++ b/src/components/mypage/CertifyPassword.tsx
@@ -47,7 +47,8 @@ const CertifyPassword = ({ setStep }: CertifyPasswordType) => {
   };
 
   return (
-    <div>
+    <div className='flex flex-col min-h-[calc(100dvh-220px)] justify-between sm:justify-center sm:min-h-0'>
+      <div>
       <div className="text-heading3">
         <div>현재 사용하고 계신</div>
         <div>
@@ -64,10 +65,11 @@ const CertifyPassword = ({ setStep }: CertifyPasswordType) => {
           className="px-4 py-[14px] bg-bg text-body2 rounded-[12px] w-full outline-none"
         />
       </div>
+      </div>
       {isValid ? (
         <button
           onClick={handleCheckPassword} 
-          className={`cursor-pointer bg-gradient2 flex justify-center items-center text-white rounded-[12px] text-title2 px-5 py-[14px] w-full ${
+          className={`cursor-pointer bg-gradient2 flex justify-center items-center text-white rounded-[12px] text-title2 px-5 py-[14px] w-full mt-0 sm:mt-[50px] ${
             isSubmitting ? 'opacity-50 cursor-not-allowed' : ''
           }`}
           disabled={isSubmitting}
@@ -75,7 +77,7 @@ const CertifyPassword = ({ setStep }: CertifyPasswordType) => {
           다음으로
         </button>
       ) : (
-        <button className="flex justify-center items-center bg-gray100 text-gray400 rounded-[12px] text-title2 px-5 py-[14px] w-full">
+        <button className="flex justify-center items-center bg-gray100 text-gray400 rounded-[12px] text-title2 px-5 py-[14px] w-full mt-0 sm:mt-[50px] ">
           다음으로
         </button>
       )}
diff --git a/src/components/mypage/NewPassword.tsx b/src/components/mypage/NewPassword.tsx
index 67ef2f2..67ebfe4 100644
--- a/src/components/mypage/NewPassword.tsx
+++ b/src/components/mypage/NewPassword.tsx
@@ -56,7 +56,8 @@ const NewPassword = ({ setStep }: NewPasswordType) => {
   };
 
   return (
-    <div>
+    <div className='flex flex-col min-h-[calc(100dvh-220px)] justify-between sm:justify-center sm:min-h-0'>
+      <div>
       <div className="text-heading3">
         <div>비밀번호를</div>
         <div>
@@ -95,15 +96,18 @@ const NewPassword = ({ setStep }: NewPasswordType) => {
           ${isSame && 'outline-success'}
           `}
         />
+        <div className='h-[14.5px]'>
         {isSame ? (
           <div className="text-caption3 text-success ml-2">비밀번호가 일치합니다.</div>
         ) : null}
+        </div>
+      </div>
       </div>
       {/* Todo : 완료 버튼 누르면, 비밀번호 변경 요청 Api 실행, 성공 시 onSuccess setStep(2) 후 로그아웃, 실패할시 그냥 메인페이지로 이동 */}
       {isSame ? (
         <div
           onClick={handleChangePassword}
-          className={`cursor-pointer bg-gradient2 flex justify-center items-center text-white rounded-[12px] text-title2 px-5 py-[14px] w-full ${
+          className={`cursor-pointer bg-gradient2 flex justify-center items-center text-white rounded-[12px] text-title2 px-5 py-[14px] w-full mt-0 sm:mt-[40px] ${
             isSubmitting ? 'opacity-50 cursor-not-allowed' : ''
           }`}
           // API 호출 중일 때 클릭 비활성화
@@ -111,7 +115,7 @@ const NewPassword = ({ setStep }: NewPasswordType) => {
           변경 완료
         </div>
       ) : (
-        <div className="flex justify-center items-center bg-gray100 text-gray400 rounded-[12px] text-title2 px-5 py-[14px] w-full">
+        <div className="flex justify-center items-center bg-gray100 text-gray400 rounded-[12px] text-title2 px-5 py-[14px] w-full mt-0 sm:mt-[40px]">
           변경 완료
         </div>
       )}
diff --git a/src/components/signup/Step4.tsx b/src/components/signup/Step4.tsx
index 401a928..991114a 100644
--- a/src/components/signup/Step4.tsx
+++ b/src/components/signup/Step4.tsx
@@ -135,7 +135,7 @@ const Step4: React.FC<StepProps> = ({ onNext, onUpdate }) => {
             />
             <div
               onClick={checkNickname}
-              className={`ml-[6px] flex-shrink-0 px-4 py-[14px] bg-black rounded-[12px] text-white text-title2 cursor-pointer`}
+              className={`ml-[6px] flex-shrink-0 px-4 py-[14px] bg-black rounded-[12px] text-white text-title2 cursor-pointer flex-shrink-0`}
             >
               중복확인
             </div>
diff --git a/src/components/signup/modal/PhoneVerification.tsx b/src/components/signup/modal/PhoneVerification.tsx
index 5370321..be0e787 100644
--- a/src/components/signup/modal/PhoneVerification.tsx
+++ b/src/components/signup/modal/PhoneVerification.tsx
@@ -172,7 +172,7 @@ const PhoneVerification: React.FC<PhoneVerificationProps> = ({ onNext, onPhoneNu
               isRequest ? (
                 <div
                   onClick={handleResending}
-                  className={`ml-[6px] flex-shrink-0 px-4 py-[14px] bg-black rounded-[12px] text-white text-title2
+                  className={`ml-[6px] flex-shrink-0 px-4 py-[14px] bg-black rounded-[12px] text-white text-title2 flex-shrink-0 
                   ${isComplete ? 'cursor-default' : 'cursor-pointer'}
                   `}
                 >
@@ -181,13 +181,13 @@ const PhoneVerification: React.FC<PhoneVerificationProps> = ({ onNext, onPhoneNu
               ) : (
                 <div
                   onClick={handleRequest}
-                  className="ml-[6px] flex-shrink-0 cursor-pointer px-4 py-[14px] bg-black rounded-[12px] text-white text-title2"
+                  className="ml-[6px] flex-shrink-0 cursor-pointer px-4 py-[14px] bg-black rounded-[12px] text-white text-title2 flex-shrink-0"
                 >
                   인증 요청
                 </div>
               )
             ) : (
-              <div className="ml-[6px] flex-shrink-0 px-4 py-[14px] bg-gray100 rounded-[12px] text-gray400 text-title2">
+              <div className="ml-[6px] flex-shrink-0 px-4 py-[14px] bg-gray100 rounded-[12px] text-gray400 text-title2 flex-shrink-0">
                 인증 요청
               </div>
             )}
@@ -214,14 +214,14 @@ const PhoneVerification: React.FC<PhoneVerificationProps> = ({ onNext, onPhoneNu
             {isRequest && validNumberOk ? (
               <div
                 onClick={handleCertify}
-                className={`ml-[8px] flex-shrink-0 px-4 py-[14px] bg-black rounded-[12px] text-white text-title2
+                className={`ml-[8px] flex-shrink-0 px-4 py-[14px] bg-black rounded-[12px] text-white text-title2 flex-shrink-0 
                 ${isComplete ? 'cursor-default' : 'cursor-pointer'}
                 `}
               >
                 인증 완료
               </div>
             ) : (
-              <div className="ml-[8px] flex-shrink-0 px-4 py-[14px] bg-gray100 rounded-[12px] text-gray400 text-title2">
+              <div className="ml-[8px] flex-shrink-0 px-4 py-[14px] bg-gray100 rounded-[12px] text-gray400 text-title2 flex-shrink-0">
                 인증 완료
               </div>
             )}