fix: 마이페이지 모바일 반응형 작업 및 인증 버튼들 flex-shrink-0 속성 추가

Moaguide-develop · Sep 21, 2024 · 5af6bbc · 5af6bbc
1 parent 4a7ee26
commit 5af6bbc
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 23 deletions.
diff --git 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
@@ -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,20 +159,20 @@ 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'}
                   `}>
                   재전송
                 </div>
               ) : (
                 <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
@@ -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,18 +65,19 @@ 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}
         >
           다음으로
         </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
@@ -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,23 +96,26 @@ 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 호출 중일 때 클릭 비활성화
         >
           변경 완료
         </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
@@ -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
@@ -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>
             )}