Skip to content

Feat(client, landing): footer 구현 #220

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

Merged
constantly-dev merged 4 commits into from
Dec 22, 2025
Merged

Feat(client, landing): footer 구현 #220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d192117
feat: icon 추가
constantly-dev Dec 19, 2025
40a357e
feat: onBoarding & landing footer 구현
constantly-dev Dec 19, 2025
f831ee0
feat: onboarding footer 추가
constantly-dev Dec 19, 2025
ef4753a
feat: landing page footer 적용
constantly-dev Dec 19, 2025
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
8 changes: 6 additions & 2 deletions apps/client/src/pages/onBoarding/OnBoarding.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,21 @@ import Header from './components/header/Header';
import MainCard from './components/funnel/MainCard';
import { useEffect } from 'react';
import { trackPageView } from '@pinback/design-system/ui';
import Footer from './components/footer/Footer';
const OnBoarding = () => {
useEffect(() => {
trackPageView('온보딩 페이지 방문');
}, []);
return (
<div
className={`relative flex h-screen w-screen items-center justify-center bg-cover bg-center bg-no-repeat`}
className={`relative flex h-screen w-screen flex-col bg-cover bg-center bg-no-repeat`}
style={{ backgroundImage: `url(${onBoardingBg})` }}
>
<Header />
<MainCard />
<main className="flex w-full flex-1 flex-col items-center justify-center">
<MainCard />
</main>
<Footer />
</div>
);
};
Expand Down
65 changes: 65 additions & 0 deletions apps/client/src/pages/onBoarding/components/footer/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import { Icon } from '@pinback/design-system/icons';

const Footer = () => {
const currentYear = new Date().getFullYear();
Comment on lines +3 to +4
Copy link
Collaborator

@jllee000 jllee000 Dec 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

요거 간단한 함수긴 하지만,,
온보딩 푸터랑 랜딩 푸터 모두 공통적으로 쓰는 연도 불러오는 거 나중에 따로 빼도 좋을 것 같아요!

근데 이렇게 정말 "개애애 간결한 로직들"은 굳이 리팩토링 안하는 게 코드 흐름 읽기 더 편한 것 같기도 하나 싶네용.. 리팩토링의 기준 어렵도다

Copy link
Member Author

@constantly-dev constantly-dev Dec 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 부분은 말씀해주신 것처럼 고민이 되긴하네요. 물론 2개의 footer에서 같이 사용되고 있으니까 유틸로 분리해서 재사용을 없애는 관점도 타당해보이지만, 일단 두개의 footer 사용처가 각각 다른 apps라 분리하게 되면 packages로 빼야한다는점. 또한 packages로 빼야될만큼 해당 로직이 컴포넌트의 역할과 완전히 다른지를 또 생각해보면 애매하다는 생각이 드네요.

재림님은 어떻게 생각하시나요?? @jllee000

Copy link
Collaborator

@jllee000 jllee000 Dec 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

근데, 응집도(?)를 생각해보면,, 또 이런 간단한 로직까지 너무 짜잘하게 분리하는게 오히려 좀 불필요하나 싶기도 하네용!


return (
<footer className="absolute bottom-0 mt-auto w-full px-[8rem] py-[3.2rem]">
<div className="mt-[2.4rem] flex gap-[0.8rem]">
<a
href="https://right-turquoise-268.notion.site/pinback-2c527450eb1c80eca220c1de3293e43a?source=copy_link"
target="_blank"
rel="noopener noreferrer"
className="caption1-sb text-font-gray-2 cursor-pointer hover:underline"
>
이용약관
</a>
<p className="caption1-sb text-font-gray-2">|</p>
<a
href=" https://right-turquoise-268.notion.site/pinback-2c527450eb1c804390effb2ee32072b2?source=copy_link"
Copy link

@coderabbitai coderabbitai bot Dec 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

개인정보처리방침 URL에 불필요한 공백이 있습니다.

URL 앞에 공백이 포함되어 있어 링크가 올바르게 작동하지 않을 수 있습니다.

🔎 수정 제안 
-          href=" https://right-turquoise-268.notion.site/pinback-2c527450eb1c804390effb2ee32072b2?source=copy_link"
+          href="https://right-turquoise-268.notion.site/pinback-2c527450eb1c804390effb2ee32072b2?source=copy_link"
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
href=" https://right-turquoise-268.notion.site/pinback-2c527450eb1c804390effb2ee32072b2?source=copy_link"
href="https://right-turquoise-268.notion.site/pinback-2c527450eb1c804390effb2ee32072b2?source=copy_link"
🤖 Prompt for AI Agents 
In apps/client/src/pages/onBoarding/components/footer/Footer.tsx around line 19,
the href value contains a leading space before the URL which can break the link;
remove the leading whitespace so the href begins with "https://..." (or apply
.trim() to the string source if the URL is built/coming from a variable) and
verify the link opens correctly.

target="_blank"
rel="noopener noreferrer"
className="caption1-sb text-font-gray-2 cursor-pointer hover:underline"
>
개인정보처리방침
</a>
</div>

<div className="flex items-center justify-between">
<address className="flex gap-[0.8rem] not-italic">
<p className="caption2-sb text-font-ltgray-4">운영팀 문의</p>
<p className="caption2-m text-font-ltgray-4">
이한비 · pinback0615@gmail.com
</p>
</address>
<p className="caption2-m text-font-ltgray-4">
©{currentYear} pinback All rights reserved.
</p>

<div className="flex items-end gap-[1.2rem]">
<p className="caption2-m text-gray400">TEAM. 도묵이</p>
<a
href="https://instagram.com/pinback.today/"
target="_blank"
rel="noopener noreferrer"
aria-label="Pinback 인스타그램"
className="transition-opacity hover:opacity-80"
>
<Icon name="instagram" width={28} height={28} />
</a>
<a
href="https://pinback.palms.blog/"
target="_blank"
rel="noopener noreferrer"
Comment on lines +52 to +53
Copy link
Collaborator

@jllee000 jllee000 Dec 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이거 보안문제(?) 떄문에 추가해주신걸까요?
어떠한 의도에서 쓰는 건지 단순 질문!

Copy link
Member Author

@constantly-dev constantly-dev Dec 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

네 맞아요! 저도 정확한 공격 방식에 대해서는 깊게 모르지만, 보안 취약점을 막기 위해서 사용한다고 하네요!

https://taylog.tistory.com/231

aria-label="Pinback 블로그"
className="transition-opacity hover:opacity-80"
>
<Icon name="palms" width={28} height={28} />
</a>
</div>
</div>
</footer>
);
};

export default Footer;
42 changes: 23 additions & 19 deletions apps/landing/src/components/FinalCTASection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import Lottie from 'lottie-react';
import Chippiface from '../assets/5_chippiface.json';
import { sendGAEvent, Button } from '@pinback/design-system/ui';
import Footer from './Footer';
const FinalCTASection = () => {
const handleInstallClick = () => {
sendGAEvent('landing', 'landing', '2-landing-bottomBtn');
Expand All @@ -9,27 +10,30 @@ const FinalCTASection = () => {
};

return (
<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">
<Lottie
animationData={Chippiface}
loop
autoplay
className="h-[32rem] w-[32rem]"
/>
<div className="relative flex h-dvh flex-col">
<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">
<Lottie
animationData={Chippiface}
loop
autoplay
className="h-[32rem] w-[32rem]"
/>

<div className="flex w-full flex-col items-center text-center">
<p className="head1 mb-[3.1rem] text-black">
다람쥐 치삐와 함께
<br />
도토리를 모아볼까요?
</p>
<div>
<Button variant="primary" onClick={handleInstallClick}>
지금 시작하기
</Button>
<div className="flex w-full flex-col items-center text-center">
<p className="head1 mb-[3.2rem] text-black">
다람쥐 치삐와 함께
<br />
도토리를 모아볼까요?
</p>
<div>
<Button variant="primary" onClick={handleInstallClick} size="large">
지금 시작하기
</Button>
</div>
</div>
</div>
</section>
</section>
<Footer />
</div>
);
};

Expand Down
73 changes: 73 additions & 0 deletions apps/landing/src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import { Icon } from '@pinback/design-system/icons';

const Footer = () => {
const currentYear = new Date().getFullYear();

return (
<footer className="border-gray100 absolute bottom-0 w-full border-t-2 px-[8rem] py-[3.2rem]">
<Icon
name="logo"
aria-label="Pinback 로고"
className="h-[2.8rem] w-[10.1rem]"
/>

<div className="relative mt-[1.2rem] flex items-center justify-between">
<div className="flex gap-[2.4rem]">
<div className="flex gap-[0.8rem]">
<a
href="https://right-turquoise-268.notion.site/pinback-2c527450eb1c80eca220c1de3293e43a?source=copy_link"
target="_blank"
rel="noopener noreferrer"
className="caption1-sb text-font-gray-2 cursor-pointer hover:underline"
>
이용약관
</a>
<p className="caption1-sb text-font-gray-2">|</p>
<a
href=" https://right-turquoise-268.notion.site/pinback-2c527450eb1c804390effb2ee32072b2?source=copy_link"
Copy link

@coderabbitai coderabbitai bot Dec 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

개인정보처리방침 URL에 불필요한 공백이 있습니다.

URL 앞에 공백이 포함되어 있어 링크가 올바르게 작동하지 않을 수 있습니다. 온보딩 Footer에도 동일한 문제가 있습니다.

🔎 수정 제안 
-              href=" https://right-turquoise-268.notion.site/pinback-2c527450eb1c804390effb2ee32072b2?source=copy_link"
+              href="https://right-turquoise-268.notion.site/pinback-2c527450eb1c804390effb2ee32072b2?source=copy_link"
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
href=" https://right-turquoise-268.notion.site/pinback-2c527450eb1c804390effb2ee32072b2?source=copy_link"
href="https://right-turquoise-268.notion.site/pinback-2c527450eb1c804390effb2ee32072b2?source=copy_link"
🤖 Prompt for AI Agents 
In apps/landing/src/components/Footer.tsx around line 27, the href value
contains a leading space before the URL which can break the link; remove the
leading whitespace so the href begins with "https://..." and verify other Footer
instances (e.g., the onboarding Footer) for the same leading-space issue and fix
them similarly so all href attributes contain no extra whitespace.

target="_blank"
rel="noopener noreferrer"
className="caption1-sb text-font-gray-2 cursor-pointer hover:underline"
>
개인정보처리방침
</a>
</div>
<address className="flex gap-[0.8rem] not-italic">
<p className="caption2-sb text-font-ltgray-4">운영팀 문의</p>
<p className="caption2-m text-font-ltgray-4">
이한비 · pinback0615@gmail.com
</p>
</address>
</div>

<p className="caption2-m text-font-ltgray-4 absolute left-1/2 -translate-x-1/2 transform">
©{currentYear} pinback All rights reserved.
</p>

<div className="flex items-end gap-[1.2rem]">
<p className="caption2-m text-gray400">TEAM. 도묵이</p>
<a
href="https://instagram.com/pinback.today/"
target="_blank"
rel="noopener noreferrer"
aria-label="Pinback 인스타그램"
className="transition-opacity hover:opacity-80"
>
<Icon name="instagram" width={28} height={28} />
</a>
<a
href="https://pinback.palms.blog/"
target="_blank"
rel="noopener noreferrer"
aria-label="Pinback 블로그"
className="transition-opacity hover:opacity-80"
>
<Icon name="palms" width={28} height={28} />
</a>
</div>
</div>
</footer>
);
};

export default Footer;
2 changes: 2 additions & 0 deletions packages/design-system/src/icons/iconNames.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,11 @@ export const iconNames = [
'ic_extension',
'ic_info',
'ic_plus',
'instagram',
'logo',
'main_header_logo',
'main_logo',
'palms',
'saved',
'tooltip_1',
'tooltip_2',
Expand Down
18 changes: 18 additions & 0 deletions packages/design-system/src/icons/source/instagram.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions packages/design-system/src/icons/source/palms.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading