Feat(client, landing): footer 구현#220
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Walkthrough온보딩 및 랜딩 페이지에 새로운 Footer 컴포넌트를 추가하고, 페이지 레이아웃을 수직 스택 구조로 재구성했습니다. 디자인 시스템에 'instagram'과 'palms' 아이콘을 추가하여 Footer에서 소셜 링크 렌더링을 지원합니다. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
✅ Storybook chromatic 배포 확인: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/design-system/src/icons/iconNames.ts (1)
1-1: 자동 생성 파일을 수동으로 수정하고 있습니다.파일 최상단의 주석에 "이 파일은 자동 생성 파일입니다. (직접 수정 금지)"라고 명시되어 있지만, 'instagram'과 'palms' 아이콘 이름이 수동으로 추가되고 있습니다.
다음 중 하나의 방법으로 해결해주세요:
- 아이콘 생성 프로세스를 통해 자동으로 추가되도록 수정
- 수동 편집이 필요한 경우 파일 상단 주석 제거 또는 수정
[scratchpad_end] -->
Also applies to: 19-19, 23-23
🧹 Nitpick comments (2)
apps/client/src/pages/onBoarding/components/footer/Footer.tsx (1)
7-7: Footer의 절대 위치 지정 방식을 검토해주세요.
absolute bottom-0포지셔닝을 사용하면 콘텐츠가 길어질 경우 Footer와 겹칠 수 있습니다. 현재 OnBoarding 페이지가h-screen을 사용하고 있어 큰 문제는 없지만, 향후 콘텐츠가 늘어날 경우를 대비해 레이아웃 구조를 검토하는 것을 권장합니다.대안:
- Sticky footer 패턴 사용 (부모 flex container + flex-1 main)
- 또는 최소 높이 보장 로직 추가
apps/landing/src/components/Footer.tsx (1)
1-73: Landing Footer와 OnBoarding Footer 간 코드 중복을 고려해보세요.두 Footer 컴포넌트가 상당 부분 유사한 코드를 공유하고 있습니다 (약관 링크, 연락처, 저작권 표시, 소셜 링크 등). 다음과 같은 방법으로 중복을 줄일 수 있습니다:
- 공통 Footer 컴포넌트를 만들고 variant props로 차이점 처리
- 또는 Footer 하위 컴포넌트들을 재사용 가능하게 분리
현재는 동작하지만, 향후 Footer 업데이트 시 두 곳을 모두 수정해야 하는 유지보수 부담이 있습니다.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
packages/design-system/src/icons/source/instagram.svgis excluded by!**/*.svgpackages/design-system/src/icons/source/palms.svgis excluded by!**/*.svg
📒 Files selected for processing (5)
apps/client/src/pages/onBoarding/OnBoarding.tsx(1 hunks)apps/client/src/pages/onBoarding/components/footer/Footer.tsx(1 hunks)apps/landing/src/components/FinalCTASection.tsx(2 hunks)apps/landing/src/components/Footer.tsx(1 hunks)packages/design-system/src/icons/iconNames.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: constantly-dev
Repo: Pinback-Team/pinback-client PR: 2
File: pnpm-workspace.yaml:3-3
Timestamp: 2025-08-18T13:48:59.065Z
Learning: constantly-dev는 docs 디렉터리를 컨벤션 문서 추가용으로 사용할 예정이라고 명시했습니다.
Learnt from: constantly-dev
Repo: Pinback-Team/pinback-client PR: 5
File: apps/extension/src/index.css:1-1
Timestamp: 2025-08-19T17:18:57.678Z
Learning: constantly-dev는 디자인 시스템 설정 PR 머지 후 `import 'pinback/tailwind-config/shared-styles.css';`를 `app.css`나 `index.css`에서 사용하여 공유 스타일을 관리할 계획입니다.
🧬 Code graph analysis (1)
apps/client/src/pages/onBoarding/OnBoarding.tsx (2)
packages/design-system/src/components/gtag/utils/gtag.ts (1)
trackPageView(50-64)packages/design-system/src/components/index.ts (1)
trackPageView(20-20)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: storybook
🔇 Additional comments (2)
apps/client/src/pages/onBoarding/OnBoarding.tsx (1)
6-6: 레이아웃 구조 개선이 잘 구현되었습니다.Footer 컴포넌트 통합과 함께 레이아웃을 수직 플렉스 구조(
flex-col)로 변경하고, 메인 콘텐츠를 시맨틱한<main>요소로 감싼 것은 좋은 접근입니다. 구조가 명확하고 접근성도 향상되었습니다.Also applies to: 13-13, 17-20
apps/landing/src/components/FinalCTASection.tsx (1)
4-4: LGTM! Footer 통합과 레이아웃 개선이 잘 되었습니다.
h-dvh를 사용한 컨테이너 구조와 Footer 배치가 적절합니다. 동적 뷰포트 높이 단위 사용은 모바일 환경에서도 좋은 사용자 경험을 제공합니다.Also applies to: 13-13, 35-36
| </a> | ||
| <p className="caption1-sb text-font-gray-2">|</p> | ||
| <a | ||
| href=" https://right-turquoise-268.notion.site/pinback-2c527450eb1c804390effb2ee32072b2?source=copy_link" |
There was a problem hiding this comment.
개인정보처리방침 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.
| 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.
| </a> | ||
| <p className="caption1-sb text-font-gray-2">|</p> | ||
| <a | ||
| href=" https://right-turquoise-268.notion.site/pinback-2c527450eb1c804390effb2ee32072b2?source=copy_link" |
There was a problem hiding this comment.
개인정보처리방침 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.
| 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" |
There was a problem hiding this comment.
이거 보안문제(?) 떄문에 추가해주신걸까요?
어떠한 의도에서 쓰는 건지 단순 질문!
There was a problem hiding this comment.
네 맞아요! 저도 정확한 공격 방식에 대해서는 깊게 모르지만, 보안 취약점을 막기 위해서 사용한다고 하네요!
| const Footer = () => { | ||
| const currentYear = new Date().getFullYear(); |
There was a problem hiding this comment.
요거 간단한 함수긴 하지만,,
온보딩 푸터랑 랜딩 푸터 모두 공통적으로 쓰는 연도 불러오는 거 나중에 따로 빼도 좋을 것 같아요!
근데 이렇게 정말 "개애애 간결한 로직들"은 굳이 리팩토링 안하는 게 코드 흐름 읽기 더 편한 것 같기도 하나 싶네용.. 리팩토링의 기준 어렵도다
There was a problem hiding this comment.
이 부분은 말씀해주신 것처럼 고민이 되긴하네요. 물론 2개의 footer에서 같이 사용되고 있으니까 유틸로 분리해서 재사용을 없애는 관점도 타당해보이지만, 일단 두개의 footer 사용처가 각각 다른 apps라 분리하게 되면 packages로 빼야한다는점. 또한 packages로 빼야될만큼 해당 로직이 컴포넌트의 역할과 완전히 다른지를 또 생각해보면 애매하다는 생각이 드네요.
재림님은 어떻게 생각하시나요?? @jllee000
There was a problem hiding this comment.
근데, 응집도(?)를 생각해보면,, 또 이런 간단한 로직까지 너무 짜잘하게 분리하는게 오히려 좀 불필요하나 싶기도 하네용!
constantly-dev
changed the title
2 participants
📌 Related Issues
📄 Tasks
📷 Screenshot
Summary by CodeRabbit
릴리스 노트
✏️ Tip: You can customize this high-level summary in your review settings.