Skip to content

Commit aa8f931

Browse files
constantly-devconstantly-dev
authored
feat(client, landing): footer 구현 (#220)
1 parent 0d81284 commit aa8f931

File tree

7 files changed

+196
-21
lines changed

7 files changed

+196
-21
lines changed

‎apps/client/src/pages/onBoarding/OnBoarding.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,21 @@ import Header from './components/header/Header';
33
import MainCard from './components/funnel/MainCard';
44
import { useEffect } from 'react';
55
import { trackPageView } from '@pinback/design-system/ui';
6+
import Footer from './components/footer/Footer';
67
const OnBoarding = () => {
78
useEffect(() => {
89
trackPageView('온보딩 페이지 방문');
910
}, []);
1011
return (
1112
<div
12-
className={`relative flex h-screen w-screen items-center justify-center bg-cover bg-center bg-no-repeat`}
13+
className={`relative flex h-screen w-screen flex-col bg-cover bg-center bg-no-repeat`}
1314
style={{ backgroundImage: `url(${onBoardingBg})` }}
1415
>
1516
<Header />
16-
<MainCard />
17+
<main className="flex w-full flex-1 flex-col items-center justify-center">
18+
<MainCard />
19+
</main>
20+
<Footer />
1721
</div>
1822
);
1923
};

‎apps/client/src/pages/onBoarding/components/footer/Footer.tsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { Icon } from '@pinback/design-system/icons';
2+
3+
const Footer = () => {
4+
const currentYear = new Date().getFullYear();
5+
6+
return (
7+
<footer className="absolute bottom-0 mt-auto w-full px-[8rem] py-[3.2rem]">
8+
<div className="mt-[2.4rem] flex gap-[0.8rem]">
9+
<a
10+
href="https://right-turquoise-268.notion.site/pinback-2c527450eb1c80eca220c1de3293e43a?source=copy_link"
11+
target="_blank"
12+
rel="noopener noreferrer"
13+
className="caption1-sb text-font-gray-2 cursor-pointer hover:underline"
14+
>
15+
이용약관
16+
</a>
17+
<p className="caption1-sb text-font-gray-2">|</p>
18+
<a
19+
href=" https://right-turquoise-268.notion.site/pinback-2c527450eb1c804390effb2ee32072b2?source=copy_link"
20+
target="_blank"
21+
rel="noopener noreferrer"
22+
className="caption1-sb text-font-gray-2 cursor-pointer hover:underline"
23+
>
24+
개인정보처리방침
25+
</a>
26+
</div>
27+
28+
<div className="flex items-center justify-between">
29+
<address className="flex gap-[0.8rem] not-italic">
30+
<p className="caption2-sb text-font-ltgray-4">운영팀 문의</p>
31+
<p className="caption2-m text-font-ltgray-4">
32+
이한비 · [email protected]
33+
</p>
34+
</address>
35+
<p className="caption2-m text-font-ltgray-4">
36+
©{currentYear} pinback All rights reserved.
37+
</p>
38+
39+
<div className="flex items-end gap-[1.2rem]">
40+
<p className="caption2-m text-gray400">TEAM. 도묵이</p>
41+
<a
42+
href="https://instagram.com/pinback.today/"
43+
target="_blank"
44+
rel="noopener noreferrer"
45+
aria-label="Pinback 인스타그램"
46+
className="transition-opacity hover:opacity-80"
47+
>
48+
<Icon name="instagram" width={28} height={28} />
49+
</a>
50+
<a
51+
href="https://pinback.palms.blog/"
52+
target="_blank"
53+
rel="noopener noreferrer"
54+
aria-label="Pinback 블로그"
55+
className="transition-opacity hover:opacity-80"
56+
>
57+
<Icon name="palms" width={28} height={28} />
58+
</a>
59+
</div>
60+
</div>
61+
</footer>
62+
);
63+
};
64+
65+
export default Footer;

‎apps/landing/src/components/FinalCTASection.tsx‎

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Lottie from 'lottie-react';
22
import Chippiface from '../assets/5_chippiface.json';
33
import { sendGAEvent, Button } from '@pinback/design-system/ui';
4+
import Footer from './Footer';
45
const FinalCTASection = () => {
56
const handleInstallClick = () => {
67
sendGAEvent('landing', 'landing', '2-landing-bottomBtn');
@@ -9,27 +10,30 @@ const FinalCTASection = () => {
910
};
1011

1112
return (
12-
<section className="bg-white-bg flex h-dvh w-full flex-col items-center justify-center gap-[6.4rem] overflow-hidden px-[17.2rem] text-center">
13-
<Lottie
14-
animationData={Chippiface}
15-
loop
16-
autoplay
17-
className="h-[32rem] w-[32rem]"
18-
/>
13+
<div className="relative flex h-dvh flex-col">
14+
<section className="bg-white-bg mt-[10.3rem] flex w-full flex-col items-center justify-center gap-[2rem] overflow-hidden px-[17.2rem] text-center">
15+
<Lottie
16+
animationData={Chippiface}
17+
loop
18+
autoplay
19+
className="h-[32rem] w-[32rem]"
20+
/>
1921

20-
<div className="flex w-full flex-col items-center text-center">
21-
<p className="head1 mb-[3.1rem] text-black">
22-
다람쥐 치삐와 함께
23-
<br />
24-
도토리를 모아볼까요?
25-
</p>
26-
<div>
27-
<Button variant="primary" onClick={handleInstallClick}>
28-
지금 시작하기
29-
</Button>
22+
<div className="flex w-full flex-col items-center text-center">
23+
<p className="head1 mb-[3.2rem] text-black">
24+
다람쥐 치삐와 함께
25+
<br />
26+
도토리를 모아볼까요?
27+
</p>
28+
<div>
29+
<Button variant="primary" onClick={handleInstallClick} size="large">
30+
지금 시작하기
31+
</Button>
32+
</div>
3033
</div>
31-
</div>
32-
</section>
34+
</section>
35+
<Footer />
36+
</div>
3337
);
3438
};
3539

‎apps/landing/src/components/Footer.tsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { Icon } from '@pinback/design-system/icons';
2+
3+
const Footer = () => {
4+
const currentYear = new Date().getFullYear();
5+
6+
return (
7+
<footer className="border-gray100 absolute bottom-0 w-full border-t-2 px-[8rem] py-[3.2rem]">
8+
<Icon
9+
name="logo"
10+
aria-label="Pinback 로고"
11+
className="h-[2.8rem] w-[10.1rem]"
12+
/>
13+
14+
<div className="relative mt-[1.2rem] flex items-center justify-between">
15+
<div className="flex gap-[2.4rem]">
16+
<div className="flex gap-[0.8rem]">
17+
<a
18+
href="https://right-turquoise-268.notion.site/pinback-2c527450eb1c80eca220c1de3293e43a?source=copy_link"
19+
target="_blank"
20+
rel="noopener noreferrer"
21+
className="caption1-sb text-font-gray-2 cursor-pointer hover:underline"
22+
>
23+
이용약관
24+
</a>
25+
<p className="caption1-sb text-font-gray-2">|</p>
26+
<a
27+
href=" https://right-turquoise-268.notion.site/pinback-2c527450eb1c804390effb2ee32072b2?source=copy_link"
28+
target="_blank"
29+
rel="noopener noreferrer"
30+
className="caption1-sb text-font-gray-2 cursor-pointer hover:underline"
31+
>
32+
개인정보처리방침
33+
</a>
34+
</div>
35+
<address className="flex gap-[0.8rem] not-italic">
36+
<p className="caption2-sb text-font-ltgray-4">운영팀 문의</p>
37+
<p className="caption2-m text-font-ltgray-4">
38+
이한비 · [email protected]
39+
</p>
40+
</address>
41+
</div>
42+
43+
<p className="caption2-m text-font-ltgray-4 absolute left-1/2 -translate-x-1/2 transform">
44+
©{currentYear} pinback All rights reserved.
45+
</p>
46+
47+
<div className="flex items-end gap-[1.2rem]">
48+
<p className="caption2-m text-gray400">TEAM. 도묵이</p>
49+
<a
50+
href="https://instagram.com/pinback.today/"
51+
target="_blank"
52+
rel="noopener noreferrer"
53+
aria-label="Pinback 인스타그램"
54+
className="transition-opacity hover:opacity-80"
55+
>
56+
<Icon name="instagram" width={28} height={28} />
57+
</a>
58+
<a
59+
href="https://pinback.palms.blog/"
60+
target="_blank"
61+
rel="noopener noreferrer"
62+
aria-label="Pinback 블로그"
63+
className="transition-opacity hover:opacity-80"
64+
>
65+
<Icon name="palms" width={28} height={28} />
66+
</a>
67+
</div>
68+
</div>
69+
</footer>
70+
);
71+
};
72+
73+
export default Footer;

‎packages/design-system/src/icons/iconNames.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,11 @@ export const iconNames = [
1616
'ic_extension',
1717
'ic_info',
1818
'ic_plus',
19+
'instagram',
1920
'logo',
2021
'main_header_logo',
2122
'main_logo',
23+
'palms',
2224
'saved',
2325
'tooltip_1',
2426
'tooltip_2',

‎packages/design-system/src/icons/source/instagram.svg‎

Lines changed: 18 additions & 0 deletions
Loading

‎packages/design-system/src/icons/source/palms.svg‎

Lines changed: 9 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)