Skip to content

Commit 879cbbe

Browse files
sikkzzsikkzz
committed
fix: test
1 parent 0db66b6 commit 879cbbe

File tree

3 files changed

+74
-47
lines changed

3 files changed

+74
-47
lines changed

‎apps/tuk-landing/src/app/(home)/src/components/MainSection.tsx‎

Lines changed: 51 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -3,62 +3,66 @@
33
import Image from 'next/image';
44
import Link from 'next/link';
55

6+
import { ResponsiveHeightResize } from '@/app/(home)/src/components/ResponsiveHeightResize';
7+
68
const MainSection = () => {
79
return (
8-
<section id="thumbnail" className="h-dvh w-full">
9-
<div className="absolute inset-0 z-0">
10-
<Image
11-
src="/main-bg.jpg"
12-
alt="Main Background"
13-
fill={false}
14-
priority
15-
quality={100}
16-
width={1440}
17-
height={900}
18-
className="size-full object-cover object-center opacity-90"
19-
/>
20-
</div>
10+
<>
11+
<ResponsiveHeightResize />
2112

22-
<div className="relative z-10 m-auto h-full max-w-screen-xl overflow-hidden px-[70px] max-[1280px]:max-w-[55rem] max-[1280px]:px-6 max-[880px]:flex max-[880px]:flex-col max-[880px]:items-center max-[880px]:justify-end max-[880px]:pb-[1.625rem]">
23-
<div className="center-vertical absolute max-[880px]:relative max-[880px]:top-auto max-[880px]:mb-6 max-[880px]:translate-y-0 max-[880px]:text-center">
24-
<div className="mb-6 text-[22px] font-medium text-white-default max-[880px]:mb-3 max-[880px]:text-lg">
25-
단톡방은 살아있지만, 모임은 사라진 사이에게
26-
</div>
27-
<h1 className="text-[60px] font-bold leading-[1.3] text-white-default max-[1280px]:text-[52px] max-[880px]:text-[40px]">
28-
우리의 만남을 위해
29-
<br /> TUK
30-
</h1>
13+
<section id="thumbnail" className="h-[calc(var(--vh,1vh)*100)] w-full">
14+
<div className="absolute inset-0 z-0">
15+
<Image
16+
src="/main-bg.jpg"
17+
alt="Main Background"
18+
fill
19+
priority
20+
quality={100}
21+
className="object-cover object-center opacity-90"
22+
/>
3123
</div>
3224

33-
<div className="absolute bottom-[130px] max-[880px]:relative max-[880px]:bottom-auto">
34-
<div className="flex gap-3 max-[880px]:hidden">
35-
<Link
36-
href="/"
37-
className="flex h-[3.625rem] w-[10.75rem] cursor-pointer items-center justify-center gap-2 rounded-xl border-[1.5px] border-white-default/20 bg-black-default/30 text-sm font-bold text-white-default"
38-
>
39-
<Image src="/app-store.png" alt="App Store" width={24} height={24} />
40-
App Store
41-
</Link>
42-
<Link
43-
href="/"
44-
className="flex h-[3.625rem] w-[10.75rem] cursor-pointer items-center justify-center gap-2 rounded-xl border-[1.5px] border-white-default/20 bg-black-default/30 text-sm font-bold text-white-default"
45-
>
46-
<Image src="/play-store.png" alt="Google Play" width={24} height={24} />
47-
Google Play
48-
</Link>
25+
<div className="relative z-10 m-auto h-full max-w-screen-xl overflow-hidden px-[70px] max-[1280px]:max-w-[55rem] max-[1280px]:px-6 max-[880px]:flex max-[880px]:flex-col max-[880px]:items-center max-[880px]:justify-end max-[880px]:pb-[1.625rem]">
26+
<div className="center-vertical absolute max-[880px]:relative max-[880px]:top-auto max-[880px]:mb-6 max-[880px]:translate-y-0 max-[880px]:text-center">
27+
<div className="mb-6 text-[22px] font-medium text-white-default max-[880px]:mb-3 max-[880px]:text-lg">
28+
단톡방은 살아있지만, 모임은 사라진 사이에게
29+
</div>
30+
<h1 className="text-[60px] font-bold leading-[1.3] text-white-default max-[1280px]:text-[52px] max-[880px]:text-[40px]">
31+
우리의 만남을 위해
32+
<br /> TUK
33+
</h1>
4934
</div>
5035

51-
<div className="mb-[85px] min-[881px]:hidden">
52-
<Link
53-
href="/"
54-
className="flex h-[52px] w-[153px] cursor-pointer items-center justify-center rounded-[36px] bg-white-default text-center font-bold text-[rgba(58,58,58,0.9)]"
55-
>
56-
앱 다운로드
57-
</Link>
36+
<div className="absolute bottom-[130px] max-[880px]:relative max-[880px]:bottom-auto">
37+
<div className="flex gap-3 max-[880px]:hidden">
38+
<Link
39+
href="/"
40+
className="flex h-[3.625rem] w-[10.75rem] cursor-pointer items-center justify-center gap-2 rounded-xl border-[1.5px] border-white-default/20 bg-black-default/30 text-sm font-bold text-white-default"
41+
>
42+
<Image src="/app-store.png" alt="App Store" width={24} height={24} />
43+
App Store
44+
</Link>
45+
<Link
46+
href="/"
47+
className="flex h-[3.625rem] w-[10.75rem] cursor-pointer items-center justify-center gap-2 rounded-xl border-[1.5px] border-white-default/20 bg-black-default/30 text-sm font-bold text-white-default"
48+
>
49+
<Image src="/play-store.png" alt="Google Play" width={24} height={24} />
50+
Google Play
51+
</Link>
52+
</div>
53+
54+
<div className="mb-[85px] min-[881px]:hidden">
55+
<Link
56+
href="/"
57+
className="flex h-[52px] w-[153px] cursor-pointer items-center justify-center rounded-[36px] bg-white-default text-center font-bold text-[rgba(58,58,58,0.9)]"
58+
>
59+
앱 다운로드
60+
</Link>
61+
</div>
5862
</div>
5963
</div>
60-
</div>
61-
</section>
64+
</section>
65+
</>
6266
);
6367
};
6468

‎apps/tuk-landing/src/app/(home)/src/components/ResponsiveHeightResize.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
'use client';
2+
3+
import { useEffect } from 'react';
4+
5+
export const ResponsiveHeightResize = () => {
6+
useEffect(() => {
7+
const setViewportHeight = () => {
8+
const vh = window.innerHeight * 0.01;
9+
document.documentElement.style.setProperty('--vh', `${vh}px`);
10+
};
11+
12+
setViewportHeight();
13+
window.addEventListener('resize', setViewportHeight);
14+
15+
return () => window.removeEventListener('resize', setViewportHeight);
16+
}, []);
17+
18+
return null;
19+
};

‎apps/tuk-landing/src/styles/globals.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,3 +118,7 @@
118118
transform: translateY(-50%);
119119
}
120120
}
121+
122+
:root {
123+
--vh: 1vh;
124+
}

0 commit comments

Comments
 (0)