Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

design: 모바일 반응형 추가작업 #26

Merged
merged 3 commits into from
Sep 20, 2024
Merged

design: 모바일 반응형 추가작업 #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d34495d
design: 마이페이지 모바일 반응형
jiohjung98 Sep 20, 2024
1ff2640
fix: 비밀번호 인증 data 값 변경
jiohjung98 Sep 20, 2024
4504f3c
design: 회원가입, 로그인, 찾기 페이지 전체적인 디자인 재조정
jiohjung98 Sep 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/app/mypage/edit/changepassword/page.tsx
View file
Open in desktop
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="max-w-[640px] w-full mx-auto">
<div className="px-5 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 Down
2 changes: 1 addition & 1 deletion src/app/mypage/edit/changephone/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ const ChangePhonePage = () => {

return (
<div>
<div className="max-w-[640px] w-full mx-auto">
<div className="px-5 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>
Expand Down
2 changes: 1 addition & 1 deletion src/app/mypage/edit/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ const Editpage = () => {
}, [open]);

return (
<div className="max-w-[640px] w-full mx-auto">
<div className="px-5 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.svg" alt="" className="cursor-pointer" />
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/app/mypage/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const Mypage = () => {
}

return (
<div className="max-w-[640px] w-full mx-auto mt-10">
<div className="px-5 mt-5 w-full mx-auto sm:max-w-[640px] sm:mt-10 sm:px-0">
<header>
<MypageHeader />
</header>
Expand Down
2 changes: 1 addition & 1 deletion src/app/payment/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export default function PaymentLayout({
}>) {
return (
<Suspense>
<div className="max-w-[640px] w-full mx-auto">{children}</div>
<div className="px-5 mt-5 w-full mx-auto sm:max-w-[640px] sm:mt-10 sm:px-0">{children}</div>
</Suspense>
);
}
2 changes: 1 addition & 1 deletion src/components/common/Gnb.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ const Gnb = () => {
className="cursor-pointer">
<img src="/images/gnb/alert.svg" alt="alert" className="w-6 h-6" />
</div>
<div className="hidden items-center min-w-[123px] min-h-[35px] sm:flex">
<div className="hidden items-center min-h-[35px] sm:flex">
{isLoggedIn ? (
<Link href={'/mypage'}>
<img src="/images/gnb/mypage.svg" alt="mypage" className="w-6 h-6" />
Expand Down
4 changes: 2 additions & 2 deletions src/components/find/FindEmail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ const FindEmail = () => {
}, [isError]);

return (
<div className='find-inner-container flex flex-col items-center min-h-[calc(100vh-220px)] w-[340px]'>
<div className='min-h-[calc(100vh-220px)] flex flex-col items-center justify-between w-[340px] sm:min-h-0 sm:justify-center'>
{!showUserEmail && (
<><section className="w-full mx-auto mt-[30px]">
<div className="text-heading3">
Expand Down Expand Up @@ -266,7 +266,7 @@ const FindEmail = () => {
가입하신<br />
<span className="text-purple-600">이메일 정보</span>입니다
</h2>
<div className="w-full py-8 px-4 text-center rounded-lg my-10 text-black">{userEmail ? userEmail : 'No email available'}</div>
<div className="w-full py-8 px-4 bg-gray-100 text-center rounded-lg my-10 text-black">{userEmail ? userEmail : 'No email available'}</div>
</section>
</motion.div>
<motion.div
Expand Down
2 changes: 1 addition & 1 deletion src/components/find/FindPassword.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ const FindPassword = () => {


return (
<div className='find-inner-container flex flex-col items-center min-h-[calc(100vh-220px)] w-[340px]'>
<div className='min-h-[calc(100vh-220px)] flex flex-col items-center justify-between w-[340px] sm:min-h-0 sm:justify-center'>
{!showPasswordReset && (
<><section className="w-full mx-auto mt-[30px]">
<div className="text-heading3">
Expand Down
6 changes: 3 additions & 3 deletions src/components/find/FindTabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,10 @@ const FindTabs = () => {
const router = useRouter();

return (
<div className='flex flex-col items-center justify-center'>
<div className='min-h-[calc(100vh-100px)] flex flex-col items-center justify-between mb-[100px] sm:min-h-[100vh] sm:justify-center sm:mb-0'>
<>
<div className="custom-container flex flex-col items-center overflow-y-auto w-full mb-[90px]">
<div className='max-w-[340px] w-full mx-auto mt-[30px] sm:mt-[100px]'>
<div className="flex flex-col items-center overflow-y-auto w-full">
<div className='max-w-[340px] w-full mx-auto mt-[30px] sm:mt-0'>
<div className="self-start">
<Image
src={'/sign/LeftArrowIcon.svg'}
Expand Down
2 changes: 1 addition & 1 deletion src/components/mypage/CertifyPassword.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const CertifyPassword = ({ setStep }: CertifyPasswordType) => {
setIsSubmitting(true);
const result = await checkPassword(passwordValue);

if (result === 'success') {
if (result === '인증에 성공했습니다.') {
setStep(1);
} else {
alert('비밀번호가 올바르지 않습니다. 다시 시도해주세요.');
Expand Down
2 changes: 1 addition & 1 deletion src/components/sign/SignLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const SignLayout = () => {
}, 1000);

return (
<div className="min-h-[calc(100vh-75px)] flex flex-col items-center justify-center">
<div className="min-h-[calc(100vh-75px)] flex flex-col items-center justify-center sm:min-h-[100vh]">
<section className="flex mt-8 mb-6">
<Link href={'/'} className='cursor-pointer'>
<img src="/images/logo.svg" alt="logo" className="w-[202px] h-[28px]" />
Expand Down
6 changes: 3 additions & 3 deletions src/components/signup/Step1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,10 +56,10 @@ const Step1: React.FC<StepProps> = ({ onNext, onUpdate }) => {
};

const isNextEnabled = checks.privacy && checks.service && checks.age;

// min-h-[calc(100vh-75px)] flex flex-col items-center justify-center sm:min-h-[100vh]
return (
<div className="custom-container flex flex-col items-center min-h-[calc(100vh-100px)] overflow-y-auto mb-[90px]">
<div className="max-w-[340px] w-full mx-auto mt-[30px] sm:mt-[100px]">
<div className="min-h-[calc(100vh-100px)] flex flex-col items-center justify-between mb-[100px] sm:min-h-[100vh] sm:justify-center sm:mb-0">
<div className="max-w-[340px] w-full mx-auto mt-[30px] sm:mt-0">
<Image
src={'/sign/LeftArrowIcon.svg'}
alt='뒤로가기'
Expand Down
4 changes: 2 additions & 2 deletions src/components/signup/Step3.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,8 @@ const Step3: React.FC<StepProps> = ({ onNext, onUpdate }) => {
const isFormValid = email && passwordValid && passwordMatch;

return (
<div className="custom-container flex flex-col items-center min-h-[calc(100vh-100px)] overflow-y-auto mb-[90px]">
<div className="max-w-[340px] w-full mx-auto mt-[30px] sm:mt-[100px]">
<div className="min-h-[calc(100vh-100px)] flex flex-col items-center justify-between mb-[100px] sm:min-h-[100vh] sm:justify-center sm:mb-0">
<div className="max-w-[340px] w-full mx-auto mt-[30px] sm:mt-0">
<Image
src={'/sign/LeftArrowIcon.svg'}
alt='뒤로가기'
Expand Down
4 changes: 2 additions & 2 deletions src/components/signup/Step4.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,8 +102,8 @@ const Step4: React.FC<StepProps> = ({ onNext, onUpdate }) => {
};

return (
<div className="custom-container flex flex-col items-center min-h-[calc(100vh-100px)] overflow-y-auto mb-[90px]">
<div className="max-w-[340px] w-full mx-auto mt-[30px] sm:mt-[100px]">
<div className="min-h-[calc(100vh-100px)] flex flex-col items-center justify-between mb-[100px] sm:min-h-[100vh] sm:justify-center sm:mb-0">
<div className="max-w-[340px] w-full mx-auto mt-[30px] sm:mt-0">
<Image
src={'/sign/LeftArrowIcon.svg'}
alt='뒤로가기'
Expand Down
4 changes: 2 additions & 2 deletions src/components/signup/modal/PhoneVerification.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,8 +133,8 @@ const PhoneVerification: React.FC<PhoneVerificationProps> = ({ onNext, onPhoneNu
}, [isError]);

return (
<div className="custom-container flex flex-col items-center min-h-[calc(100vh-100px)] overflow-y-auto mb-[90px]">
<section className="max-w-[340px] w-full mx-auto mt-[30px] sm:mt-[100px]">
<div className="min-h-[calc(100vh-100px)] flex flex-col items-center justify-between mb-[100px] sm:min-h-[100vh] sm:justify-center sm:mb-0">
<section className="max-w-[340px] w-full mx-auto mt-[30px] sm:mt-0">
<Image
src={'/sign/LeftArrowIcon.svg'}
alt='뒤로가기'
Expand Down
Loading