Skip to content

Feat(landing): landing page 디테일 수정#105

Merged
jjangminii merged 4 commits intodevelopfrom
feat/#102/landing-page
Sep 14, 2025
Merged

Feat(landing): landing page 디테일 수정#105
jjangminii merged 4 commits intodevelopfrom
feat/#102/landing-page

Conversation

@jjangminii
Copy link
Collaborator

@jjangminii jjangminii commented Sep 14, 2025

📌 Related Issues

관련된 Issue를 태그해주세요. (e.g. - close #25)

📄 Tasks

  • landing page 디테일 수정

⭐ PR Point (To Reviewer)

📷 Screenshot

image

Summary by CodeRabbit

  • 신규 기능

    • 랜딩 페이지를 섹션 기반 레이아웃으로 개편: 히어로, 북마크 기능 소개, 리마인드, 보상 루프, 최종 CTA 섹션 추가
    • 스냅 스크롤 경험과 앵커 스크롤(“스트롤하기” 버튼) 제공
    • 다수의 Lottie 애니메이션으로 시각 효과 강화
    • CTA 버튼으로 서비스 바로가기 지원
  • 유지보수/환경

    • 애니메이션 및 UI를 위한 의존성 추가 및 정리
    • 디자인 시스템 및 타입스크립트 설정 패키지 도입

@vercel
Copy link

vercel bot commented Sep 14, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
pinback-client-client Ready Ready Preview Comment Sep 14, 2025 6:41am

@coderabbitai
Copy link

coderabbitai bot commented Sep 14, 2025

Caution

Review failed

Failed to post review comments.

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a0036da and 6fe4607.

⛔ Files ignored due to path filters (4)
  • apps/landing/src/assets/landing_bell.svg is excluded by !**/*.svg
  • apps/landing/src/assets/landing_icon.svg is excluded by !**/*.svg
  • apps/landing/src/assets/react.svg is excluded by !**/*.svg
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (10)
  • apps/landing/package.json (1 hunks)
  • apps/landing/src/App.tsx (1 hunks)
  • apps/landing/src/assets/2_bookmark.json (1 hunks)
  • apps/landing/src/assets/3_bell.json (1 hunks)
  • apps/landing/src/assets/4_up.json (1 hunks)
  • apps/landing/src/components/FeatureBookmarkSection.tsx (1 hunks)
  • apps/landing/src/components/FeatureReminderSection.tsx (1 hunks)
  • apps/landing/src/components/FeatureRewardSection.tsx (1 hunks)
  • apps/landing/src/components/FinalCTASection.tsx (1 hunks)
  • apps/landing/src/components/HeroSection.tsx (1 hunks)

Walkthrough

앱의 랜딩 페이지를 섹션 기반 레이아웃으로 대체하고, Lottie 애니메이션 자산 3종과 4개의 섹션 컴포넌트를 추가했습니다. App.tsx는 각 섹션을 스냅 스크롤 컨테이너로 구성합니다. 패키지에 lottie-react와 디자인 시스템/TS 설정을 추가했습니다.

Changes

Cohort / File(s) Summary of Changes
Dependencies
apps/landing/package.json
lottie-react 추가, @pinback/design-system, @pinback/typescript-config devDependency 추가, devDependencies 정렬 변경
App Composition
apps/landing/src/App.tsx
데모 UI 제거 후 섹션형 레이아웃으로 교체; Hero/Feature/CTA 섹션을 스냅 스크롤로 렌더
Components: Sections
apps/landing/src/components/HeroSection.tsx, .../FeatureBookmarkSection.tsx, .../FeatureReminderSection.tsx, .../FeatureRewardSection.tsx, .../FinalCTASection.tsx
5개 섹션 컴포넌트 신규 추가; Lottie 애니메이션 렌더, 버튼 상호작용(스크롤/네비게이션) 포함
Assets: Lottie JSON
apps/landing/src/assets/2_bookmark.json, .../3_bell.json, .../4_up.json
북마크/벨/업 애니메이션 Lottie 데이터 파일 추가(베이스64 이미지 포함, 코드 변경 없음)

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor U as 사용자
  participant A as App
  participant HS as HeroSection
  participant FS as Feature* Sections
  participant L as Lottie Renderer

  U->>A: 페이지 접속
  A->>HS: Hero 섹션 렌더
  HS->>L: landingmain.json 애니메이션 로드/재생
  A->>FS: Feature 섹션들 렌더(Bookmark/Reminder/Reward)
  FS->>L: 각 섹션 Lottie JSON 로드/재생
  A-->>U: 스냅 스크롤 가능한 레이아웃 표시
Loading
sequenceDiagram
  autonumber
  actor U as 사용자
  participant HS as HeroSection
  participant DOM as Document
  participant CTA as FinalCTASection
  participant Win as window

  U->>HS: "스크롤하기" 클릭
  HS->>DOM: getElementById("bookmark-section")
  DOM-->>HS: 타깃 엘리먼트
  HS->>DOM: scrollIntoView({ behavior: "smooth" })

  U->>CTA: CTA 버튼 클릭
  CTA->>Win: location.href = "https://pinback.today"
  Win-->>U: 새 페이지로 이동
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Suggested labels

🛠️ Feature, frontend

Suggested reviewers

  • jllee000
  • constantly-dev

Poem

토끼는 톡톡, 스크롤을 톡—
북마크 춤추고 종소리 땡땡!
도토리 꿈은 위로 업⬆️
버튼 한 번에 길 열리고,
핀백으로 폴짝—오늘로 점프! 🐰✨

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings, 1 inconclusive)
Check name Status Explanation Resolution
Linked Issues Check ⚠️ Warning 이 PR은 랜딩페이지 관련 목표[#102]과 전반적으로 부합합니다; App 리팩토링과 Hero/Feature/FinalCTA 섹션 추가 및 Lottie 애셋 통합이 확인됩니다. 그러나 연동된 Issue #25(디자인 시스템의 Progress 컴포넌트 구현)의 핵심 요구사항(Progress 컴포넌트 구현, variant 분기, 스토리북·인터랙션 테스트, @radix-ui/react-progress 런타임 의존성 추가 등)은 본 변경 내에서 확인되지 않습니다. 따라서 모든 링크된 이슈의 요구를 충족하지 못합니다. 해결 방안으로는 #25의 구현이 이 PR에 포함되어야 한다면 Progress 컴포넌트(variant·접근성 포함), 관련 스토리북·테스트 및 필요한 런타임 의존성을 추가하거나, 그렇지 않으면 PR의 linked issue에서 #25를 제거하고 #102만 연결하도록 분리해 주세요.
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
Title Check ❓ Inconclusive 제목 "Feat(landing): landing page 디테일 수정"은 변경 대상이 랜딩 페이지임을 나타내지만 "디테일 수정"이라는 표현이 모호하여 이번 PR의 주요 변경사항(섹션 추가, Lottie 자산 도입, App 구조 변경 등)을 명확히 요약하지 못합니다. 제목은 관련성은 있으나 지나치게 일반적이어서 히스토리를 훑는 동료가 한눈에 변경 핵심을 파악하기 어렵습니다. 더 구체적인 변경 포인트를 포함하도록 개선하는 것이 바람직합니다. 제목을 "Feat(landing): 랜딩 페이지 섹션 및 Lottie 애니메이션 추가" 또는 "Feat(landing): Hero·Feature·CTA 섹션 및 Lottie 자산 추가"처럼 주요 변경사항(섹션 추가, Lottie 도입 등)을 명시하도록 수정해 주세요.
✅ Passed checks (2 passed)
Check name Status Explanation
Out of Scope Changes Check ✅ Passed 변경 내용은 apps/landing 내부(새 섹션 컴포넌트, Lottie 자산, App.tsx 구성 변경)로 한정되며 랜딩페이지 목표와 일치합니다. package.json에는 lottie-react와 워크스페이스 참조(@pinback/design-system, @pinback/typescript-config)가 추가되었으나 다른 패키지나 전역 코드베이스에 영향을 주는 무관한 변경은 발견되지 않습니다. 따라서 현 시점에서 범위를 벗어난 변경은 없습니다.
Description Check ✅ Passed PR 설명은 제공된 템플릿 구조를 따르고 있으며 관련 이슈(close #102), 작업 요약(landing page 디테일 수정) 및 스크린샷이 포함되어 있어 기본적인 정보는 충실합니다. 다만 'PR Point' 섹션이 비어 있어 리뷰어에게 전달할 추가 컨텍스트(검토 포인트, 주의사항 등)를 기재하면 더 도움이 됩니다.
✨ Finishing touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feat/#102/landing-page

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions
Copy link

✅ Storybook chromatic 배포 확인:
🐿️ storybook

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feat] 랜딩페이지

1 participant