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: 100vh -> 100dvh 변경 #27

Merged
merged 2 commits into from
Sep 20, 2024
Merged

design: 100vh -> 100dvh 변경 #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
745c56c
design: 100vh -> 100dvh 변경
jiohjung98 Sep 20, 2024
0c3d52e
design: mt-60px 제거
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
4 changes: 2 additions & 2 deletions src/app/mypage/edit/changephone/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,11 +230,11 @@ const ChangePhonePage = () => {
{isComplete ? (
<div
onClick={handleComplete}
className="cursor-pointer flex items-center justify-center px-5 py-[14px] mt-[60px] 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">
변경 완료
</div>
) : (
<div className="flex items-center justify-center px-5 py-[14px] mt-[60px] 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">
변경 완료
</div>
)}
Expand Down
6 changes: 3 additions & 3 deletions src/components/find/FindEmail.tsx
View file
Open in desktop
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 mt-[60px] 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"
>
다음으로
</div>
) : (
<div className="flex items-center justify-center px-5 py-3 mt-[60px] 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">
다음으로
</div>
)}
Expand Down Expand Up @@ -278,7 +278,7 @@ const FindEmail = () => {
className="w-full mx-auto"
>
<Link href={'/sign'}>
<button className='flex items-center justify-center px-5 py-3 mt-[60px] w-full rounded-[12px] font-bold text-lg bg-gradient2 text-heading4 text-white'>
<button className='flex items-center justify-center px-5 py-3 w-full rounded-[12px] font-bold text-lg bg-gradient2 text-heading4 text-white'>
로그인으로 돌아가기
</button>
</Link>
Expand Down
10 changes: 5 additions & 5 deletions 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='min-h-[calc(100vh-220px)] flex flex-col items-center justify-between w-[340px] sm:min-h-0 sm:justify-center'>
<div className='min-h-[calc(100dvh-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 Expand Up @@ -229,12 +229,12 @@ const FindPassword = () => {
{isComplete ? (
<div
onClick={handleComplete}
className="cursor-pointer flex items-center justify-center px-5 py-3 mt-[60px] 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"
>
다음으로
</div>
) : (
<div className="flex items-center justify-center px-5 py-3 mt-[60px] 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">
다음으로
</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 mt-[60px] 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" onClick={handlePasswordReset}>
비밀번호 재설정
</div>
) : (
<div className="flex items-center justify-center px-5 py-3 mt-[60px] 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">
비밀번호 재설정
</div>
)}
Expand Down
2 changes: 1 addition & 1 deletion src/components/find/FindTabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const FindTabs = () => {
const router = useRouter();

return (
<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='min-h-[calc(100dvh-100px)] flex flex-col items-center justify-between mb-[100px] sm:min-h-[100vh] sm:justify-center sm:mb-0'>
<>
<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'>
Expand Down
4 changes: 2 additions & 2 deletions src/components/mypage/CertifyPassword.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,15 +67,15 @@ const CertifyPassword = ({ setStep }: CertifyPasswordType) => {
{isValid ? (
<button
onClick={handleCheckPassword}
className={`cursor-pointer bg-gradient2 mt-[60px] 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 ${
isSubmitting ? 'opacity-50 cursor-not-allowed' : ''
}`}
disabled={isSubmitting}
>
다음으로
</button>
) : (
<button className="mt-[60px] 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">
다음으로
</button>
)}
Expand Down
4 changes: 2 additions & 2 deletions src/components/mypage/NewPassword.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,15 +103,15 @@ const NewPassword = ({ setStep }: NewPasswordType) => {
{isSame ? (
<div
onClick={handleChangePassword}
className={`cursor-pointer bg-gradient2 mt-[60px] 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 ${
isSubmitting ? 'opacity-50 cursor-not-allowed' : ''
}`}
// API 호출 중일 때 클릭 비활성화
>
변경 완료
</div>
) : (
<div className="mt-[60px] 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">
변경 완료
</div>
)}
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 sm:min-h-[100vh]">
<div className="min-h-[calc(100dvh-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
5 changes: 2 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,9 +56,8 @@ 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="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="min-h-[calc(100dvh-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'}
Expand Down Expand Up @@ -129,7 +128,7 @@ const Step1: React.FC<StepProps> = ({ onNext, onUpdate }) => {

<button
onClick={onNext}
className={`w-full max-w-[340px] mt-[60px] 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 ${
isNextEnabled
? 'bg-purple-600 text-white hover:bg-purple-700'
: 'bg-gray100 text-heading4 text-gray400 cursor-not-allowed'
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,7 +40,7 @@ const Step3: React.FC<StepProps> = ({ onNext, onUpdate }) => {
const isFormValid = email && passwordValid && passwordMatch;

return (
<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="min-h-[calc(100dvh-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'}
Expand Down Expand Up @@ -120,7 +120,7 @@ const Step3: React.FC<StepProps> = ({ onNext, onUpdate }) => {
<button
onClick={onNext}
disabled={!isFormValid}
className={`w-full max-w-[340px] py-3 mt-[60px] 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 ${isFormValid ? 'bg-gradient2 text-heading4 text-white' : 'bg-gray100 text-heading4 text-gray400'}`}
>
다음으로
</button>
Expand Down
2 changes: 1 addition & 1 deletion src/components/signup/Step4.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ const Step4: React.FC<StepProps> = ({ onNext, onUpdate }) => {
};

return (
<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="min-h-[calc(100dvh-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'}
Expand Down
6 changes: 3 additions & 3 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,7 +133,7 @@ const PhoneVerification: React.FC<PhoneVerificationProps> = ({ onNext, onPhoneNu
}, [isError]);

return (
<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="min-h-[calc(100dvh-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'}
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 mt-[60px] 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"
>
다음으로
</div>
) : (
<div className="w-full max-w-[340px] flex items-center justify-center px-5 py-3 mt-[60px] 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">
다음으로
</div>
)}
Expand Down
Loading