Skip to content

Commit

Permalink
Merge pull request #29 from Moaguide-develop/feat/find
Browse files Browse the repository at this point in the history
fix: 반응형 레이아웃 작업 및 비밀번호 매칭 오류
  • Loading branch information
jiohjung98 authored Sep 21, 2024
2 parents 3968775 + 5af6bbc commit f629de8
Show file tree
Hide file tree
Showing 10 changed files with 58 additions and 36 deletions.
4 changes: 2 additions & 2 deletions src/app/mypage/edit/changepassword/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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}
Expand Down
22 changes: 13 additions & 9 deletions src/app/mypage/edit/changephone/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
)}
Expand All @@ -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>
)}
Expand All @@ -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>
);
Expand Down
4 changes: 2 additions & 2 deletions src/components/find/FindEmail.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -241,12 +241,12 @@ const FindEmail = () => {
{isComplete ? (
<div
onClick={handleComplete}
className="cursor-pointer flex items-center justify-center px-5 py-3 w-full rounded-[12px] font-bold text-lg bg-gradient2 text-heading4 text-white"
className="cursor-pointer flex items-center justify-center px-5 py-3 w-full rounded-[12px] font-bold text-lg bg-gradient2 text-heading4 text-white mt-0 sm:mt-[40px]"
>
다음으로
</div>
) : (
<div className="flex items-center justify-center px-5 py-3 w-full rounded-[12px] font-bold text-lg bg-gray100 text-heading4 text-gray400">
<div className="flex items-center justify-center px-5 py-3 w-full rounded-[12px] font-bold text-lg bg-gray100 text-heading4 text-gray400 mt-0 sm:mt-[40px]">
다음으로
</div>
)}
Expand Down
8 changes: 4 additions & 4 deletions src/components/find/FindPassword.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -229,12 +229,12 @@ const FindPassword = () => {
{isComplete ? (
<div
onClick={handleComplete}
className="cursor-pointer flex items-center justify-center px-5 py-3 w-full rounded-[12px] font-bold text-lg bg-gradient2 text-heading4 text-white"
className="cursor-pointer flex items-center justify-center px-5 py-3 w-full rounded-[12px] font-bold text-lg bg-gradient2 text-heading4 text-white mt-0 sm:mt-[40px]"
>
다음으로
</div>
) : (
<div className="flex items-center justify-center px-5 py-3 w-full rounded-[12px] font-bold text-lg bg-gray100 text-heading4 text-gray400">
<div className="flex items-center justify-center px-5 py-3 w-full rounded-[12px] font-bold text-lg bg-gray100 text-heading4 text-gray400 mt-0 sm:mt-[40px]">
다음으로
</div>
)}
Expand Down Expand Up @@ -310,11 +310,11 @@ const FindPassword = () => {
className="w-full mx-auto"
>
{passwordMatch ? (
<div className="flex items-center justify-center px-5 py-3 w-full rounded-[12px] font-bold text-lg bg-gradient2 text-heading4 text-white cursor-pointer" onClick={handlePasswordReset}>
<div className="flex items-center justify-center px-5 py-3 w-full rounded-[12px] font-bold text-lg bg-gradient2 text-heading4 text-white cursor-pointer mt-0 sm:mt-[40px]" onClick={handlePasswordReset}>
비밀번호 재설정
</div>
) : (
<div className="flex items-center justify-center px-5 py-3 w-full rounded-[12px] font-bold text-lg bg-gray100 text-heading4 text-gray400">
<div className="flex items-center justify-center px-5 py-3 w-full rounded-[12px] font-bold text-lg bg-gray100 text-heading4 text-gray400 mt-0 sm:mt-[40px]">
비밀번호 재설정
</div>
)}
Expand Down
8 changes: 5 additions & 3 deletions src/components/mypage/CertifyPassword.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
)}
Expand Down
10 changes: 7 additions & 3 deletions src/components/mypage/NewPassword.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
)}
Expand Down
4 changes: 2 additions & 2 deletions src/components/signup/Step1.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -128,9 +128,9 @@ const Step1: React.FC<StepProps> = ({ onNext, onUpdate }) => {

<button
onClick={onNext}
className={`w-full max-w-[340px] py-3 rounded-[12px] font-bold text-lg transition duration-300 ${
className={`w-full max-w-[340px] py-3 rounded-[12px] font-bold text-lg transition duration-300 mt-0 sm:mt-[40px] ${
isNextEnabled
? 'bg-purple-600 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}
Expand Down
16 changes: 14 additions & 2 deletions src/components/signup/Step3.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,18 @@ const Step3: React.FC<StepProps> = ({ onNext, onUpdate }) => {

const router = useRouter();

const validateEmail = (email: string) => {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
};

const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newEmail = e.target.value;
setEmail(newEmail);
onUpdate({ email: newEmail });
};


const validatePassword = (password: string) => {
const isValid = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,20}$/.test(password);
setPasswordValid(isValid);
Expand All @@ -37,7 +49,7 @@ const Step3: React.FC<StepProps> = ({ onNext, onUpdate }) => {
setPasswordMatch(newConfirmPassword === password);
};

const isFormValid = email && passwordValid && passwordMatch;
const isFormValid = email && passwordValid === true && passwordMatch === true;

return (
<div className="min-h-[calc(100dvh-100px)] flex flex-col items-center justify-between mb-[100px] sm:min-h-[100vh] sm:justify-center sm:mb-0">
Expand Down Expand Up @@ -120,7 +132,7 @@ const Step3: React.FC<StepProps> = ({ onNext, onUpdate }) => {
<button
onClick={onNext}
disabled={!isFormValid}
className={`w-full max-w-[340px] py-3 rounded-[12px] text-lg font-bold ${isFormValid ? 'bg-gradient2 text-heading4 text-white' : 'bg-gray100 text-heading4 text-gray400'}`}
className={`w-full max-w-[340px] py-3 rounded-[12px] text-lg font-bold mt-0 sm:mt-[40px] ${isFormValid ? 'bg-gradient2 text-heading4 text-white' : 'bg-gray100 text-heading4 text-gray400'}`}
>
다음으로
</button>
Expand Down
4 changes: 2 additions & 2 deletions src/components/signup/Step4.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -208,7 +208,7 @@ const Step4: React.FC<StepProps> = ({ onNext, onUpdate }) => {
<button
onClick={handleComplete}
disabled={!isFormValid}
className={`w-full max-w-[340px] mt-6 py-3 px-4 rounded-lg text-white ${isFormValid ? 'bg-purple-600' : 'bg-gray-300 cursor-not-allowed'}`}
className={`w-full max-w-[340px] py-3 rounded-[12px] text-lg font-bold text-white mt-0 sm:mt-[40px] ${isFormValid ? 'bg-gradient2 text-heading4 text-white' : 'bg-gray100 text-heading4 text-gray400 cursor-not-allowed'}`}
>
완료
</button>
Expand Down
14 changes: 7 additions & 7 deletions src/components/signup/modal/PhoneVerification.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'}
`}
>
Expand All @@ -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>
)}
Expand All @@ -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>
)}
Expand Down Expand Up @@ -252,12 +252,12 @@ const PhoneVerification: React.FC<PhoneVerificationProps> = ({ onNext, onPhoneNu
{isComplete ? (
<div
onClick={handleComplete}
className="w-full max-w-[340px] cursor-pointer flex items-center justify-center px-5 py-3 w-full rounded-[12px] font-bold text-lg bg-gradient2 text-heading4 text-white"
className="w-full max-w-[340px] cursor-pointer flex items-center justify-center px-5 py-3 w-full rounded-[12px] font-bold text-lg bg-gradient2 text-heading4 text-white mt-0 sm:mt-[40px]"
>
다음으로
</div>
) : (
<div className="w-full max-w-[340px] flex items-center justify-center px-5 py-3 w-full rounded-[12px] font-bold text-lg bg-gray100 text-heading4 text-gray400">
<div className="w-full max-w-[340px] flex items-center justify-center px-5 py-3 w-full rounded-[12px] font-bold text-lg bg-gray100 text-heading4 text-gray400 mt-0 sm:mt-[40px]">
다음으로
</div>
)}
Expand Down

0 comments on commit f629de8

Please sign in to comment.