Merge pull request #30 from Moaguide-develop/feat/find

design: 비밀번호변경페이지, 휴대폰번호변경페이지 레이아웃깨지는 문제 해결
Moaguide-develop · Sep 22, 2024 · a03b9ef · a03b9ef
2 parents f629de8 + d9b8496
commit a03b9ef
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 8 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="w-[90%] 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 max-w-[340px] sm:max-w-[640px] sm:mt-10 sm:px-0">
         {step === 2 ? null : (
           <div onClick={() => router.back()} className="py-[14px]">
             <img

diff --git a/src/app/mypage/edit/changephone/page.tsx b/src/app/mypage/edit/changephone/page.tsx
@@ -132,7 +132,7 @@ const ChangePhonePage = () => {
 
   return (
     <div>
-      <div className="w-[90%] 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 max-w-[340px] 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>
@@ -153,7 +153,8 @@ const ChangePhonePage = () => {
               value={phoneNumber}
               onChange={handlePhoneNumberChange}
               placeholder="휴대폰 번호 입력"
-              className="flex-1 px-4 py-[14px] bg-bg rounded-[12px] outline-none text-body2 "
+              className="flex-1 px-4 py-[14px] bg-bg rounded-[12px] outline-none text-body2"
+              style={{ minWidth: '0' }} 
             />
             {phoneNumberValid ? (
               isRequest ? (
@@ -194,6 +195,7 @@ const ChangePhonePage = () => {
               ${isRequest && isComplete && 'outline-success'}
               ${isRequest && isError && 'outline-error'}
               `}
+              style={{ minWidth: '0' }} 
             />
             {isRequest && validNumberOk ? (
               <div

diff --git a/src/app/mypage/edit/page.tsx b/src/app/mypage/edit/page.tsx
@@ -92,20 +92,20 @@ const Editpage = () => {
                 placeholder="닉네임 입력"
                 value={nameValue}
                 onChange={handleNameChange}
-                className={`flex-1 bg-bg rounded-[12px] px-4 py-[14px] mt-2 text-body2 
-              outline-none
+                className={`flex-1 bg-bg rounded-[12px] px-4 py-[14px] mt-2 text-body2 outline-none flex-grow
               ${isNameComplete === 'no' && 'outline-error'}
               ${isNameComplete === 'yes' && 'outline-success'}
               `}
+              style={{ minWidth: '0' }} 
               />
               {isNameValid ? (
                 <div
                   onClick={checkNameDuplicate}
-                  className="ml-[6px] cursor-pointer flex mt-[8px] px-4 py-[14px] bg-black rounded-[12px] text-body5 text-white ">
+                  className="ml-[6px] cursor-pointer flex mt-[8px] px-4 py-[14px] bg-black rounded-[12px] text-body5 text-white flex-shrink-0">
                   중복확인
                 </div>
               ) : (
-                <div className="ml-[6px] flex mt-[8px] px-4 py-[14px] bg-gray100 rounded-[12px] text-body5 text-gray400 ">
+                <div className="ml-[6px] flex mt-[8px] px-4 py-[14px] bg-gray100 rounded-[12px] text-body5 text-gray400 flex-shrink-0">
                   중복확인
                 </div>
               )}

diff --git a/src/components/signup/Step1.tsx b/src/components/signup/Step1.tsx
@@ -130,7 +130,7 @@ const Step1: React.FC<StepProps> = ({ onNext, onUpdate }) => {
         onClick={onNext}
         className={`w-full max-w-[340px] py-3 rounded-[12px] font-bold text-lg transition duration-300 mt-0 sm:mt-[40px] ${
           isNextEnabled
-            ? 'bg-gradient2  text-white hover:bg-purple-700'
+            ? 'bg-gradient2 text-white hover:bg-purple-700'
             : 'bg-gray100 text-heading4 text-gray400 cursor-not-allowed'
         }`}
         disabled={!isNextEnabled}