Feat(landing): landing page

[jjangminii]

📌 Related Issues

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

• close [Feat] 랜딩페이지 #102

📄 Tasks

• 랜딩페이지

⭐ PR Point (To Reviewer)

📷 Screenshot

Summary by CodeRabbit

• 신규 기능

  • 랜딩 페이지를 섹션 기반으로 재구성(히어로, 북마크, 리마인더, 리워드, 최종 CTA).
  • 세로 스냅 스크롤 및 부드러운 스크롤 도입으로 탐색 경험 개선.
  • 각 섹션에 Lottie 애니메이션 적용(자동재생/반복).
  • 히어로 영역에서 섹션 이동 스크롤 버튼 추가.
  • 최종 CTA 버튼으로 사이트 이동 가능.

• 리팩터

  • 기존 인라인 UI를 섹션 컴포넌트로 분리해 구조화.

• Chores

  • 애니메이션 및 디자인 시스템 관련 의존성 정리 및 추가.

[vercel]

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

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

[coderabbitai]

Walkthrough

랜딩 앱에 Lottie 기반 섹션 컴포넌트(히어로/북마크/리마인더/리워드/최종 CTA)를 추가하고, App을 스냅 스크롤 레이아웃으로 구성했습니다. lottie-react를 의존성에 추가했으며, 3개의 Lottie 애셋 JSON 파일을 새로 추가했습니다. 디자인 시스템 버튼을 일부 섹션에서 사용합니다.

Changes

Cohort / File(s)	Summary of changes
Dependencies apps/landing/package.json	lottie-react 추가. 워크스페이스 기반 devDependencies 추가/정렬. @pivanov/vite-plugin-svg-sprite 위치 변경(최종 포함).
App Shell & Layout apps/landing/src/App.tsx	기존 로컬 상태/임시 UI 제거. 스냅 스크롤 컨테이너로 변경하고 각 기능 섹션 컴포넌트 마운트.
Components apps/landing/src/components/HeroSection.tsx, .../FeatureBookmarkSection.tsx, .../FeatureReminderSection.tsx, .../FeatureRewardSection.tsx, .../FinalCTASection.tsx	5개 섹션 컴포넌트 추가. Lottie 애니메이션 렌더링, 텍스트/버튼 배치, 스크롤 트리거/외부 이동(CTA) 처리.
Assets (Lottie) apps/landing/src/assets/2_bookmark.json, .../3_bell.json, .../4_up.json	새 Lottie 애셋 3종 추가(북마크, 벨, 업). 베이스64 이미지/프리컴포지션/키프레임 포함.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor U as User
  participant App as App (Landing)
  participant HS as HeroSection
  participant FB as FeatureBookmarkSection
  participant FR as FeatureReminderSection
  participant RW as FeatureRewardSection
  participant FC as FinalCTASection
  participant L as Lottie

  U->>App: 페이지 접속
  App->>HS: 섹션 렌더
  HS->>L: 애니메이션 로드/재생
  App->>FB: 섹션 렌더
  FB->>L: 애니메이션 로드/재생
  App->>FR: 섹션 렌더
  FR->>L: 애니메이션 로드/재생
  App->>RW: 섹션 렌더
  RW->>L: 애니메이션 로드/재생
  App->>FC: 섹션 렌더
  FC->>L: 애니메이션 로드/재생
  note over App,L: 각 섹션은 독립적으로 loop/autoplay

Loading

sequenceDiagram
  autonumber
  actor U as User
  participant HS as HeroSection
  participant FB as FeatureBookmarkSection
  participant FC as FinalCTASection
  participant Win as window.location

  U->>HS: "스크롤하기" 클릭
  HS->>HS: bookmark-section로 스무스 스크롤
  U->>FC: CTA 버튼 클릭
  FC->>Win: href = https://pinback.today
  Win-->>U: 새 위치로 이동

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• Api(client): 북마크, 리마인드 페이지 article delete 연결 #98: 동일한 랜딩 페이지 UI와 Lottie 섹션 구성 추가와 유사한 변경.
• Setting(design-system): 디자인 시스템 설정 & shadcn/ui 추가 #7: 디자인 시스템 패키지 도입/사용과 직접 연관(Button 사용, 워크스페이스 의존성).
• Setting(project): svg sprite 설정 #15: @pivanov/vite-plugin-svg-sprite 의존성 관련 변경과 겹침.

Suggested labels

🛠️ Feature, feat

Suggested reviewers

• constantly-dev
• jllee000

Poem

(\_/) 새 장면 척!
( •ㅅ•) 로띠가 춤추고 버튼은 톡!
/︶\ 스냅-스크롤 따라 둥실둥실
북마크, 알림, 업! 기쁨이 굴실굴실
이제 한 번에 핀백으로—슝!

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Linked Issues Check	⚠️ Warning	이 PR은 #102의 주된 목표인 랜딩 페이지 구조화 및 Lottie 애니메이션 통합을 컴포넌트와 에셋 추가를 통해 충실히 구현했으므로 해당 이슈는 대체로 충족됩니다, 그러나 [#25](design-system: Progress 컴포넌트 구현)에서 요구한 Progress 컴포넌트 구현(값 클램핑, variant 지원, 접근성 속성, Storybook 스토리/테스트) 및 관련 런타임 의존성(@radix-ui/react-progress) 추가는 본 PR에 포함되어 있지 않습니다, 따라서 연결된 모든 이슈의 요구사항을 완전히 충족하지는 못합니다.	해결 방안으로는 이 PR에 [#25] 요구사항을 포함해 Progress 컴포넌트 구현과 관련 의존성·스토리북 요소를 추가하거나 #25를 별도 PR로 분리한 뒤 이 PR의 관련 이슈 목록에서 제거하거나 분리 의도를 명확히 표기해 주세요; 분리할 경우 PR 본문에 분리 사유와 예정 작업(또는 새 PR 번호)을 명시하면 리뷰어가 변경 범위와 우선순위를 정확히 판단할 수 있습니다.
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.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title Check	✅ Passed	제목 "Feat(landing): landing page"는 변경사항의 핵심인 랜딩 페이지 추가를 명확히 요약하고 있으며 리포지토리의 컨벤션(Feat(...): ...)에 부합합니다, 불필요한 이모지나 파일 목록 등 잡음이 없어서 히스토리 스캔 시 주된 변경을 빠르게 파악할 수 있습니다.
Out of Scope Changes Check	✅ Passed	변경사항은 apps/landing 내부의 컴포넌트 추가, Lottie 에셋 및 해당 앱의 package.json(런타임 lottie-react 추가 및 워크스페이스 기반 devDependencies 등록) 변경에 국한되어 있어 랜딩 페이지 구현 목적과 일치합니다, 워크스페이스 의존성 추가는 디자인 시스템의 Button 사용 및 타입스크립트 설정 연동을 위한 합리적 변경으로 보이며 다른 패키지 소스나 불필요한 전역 변경은 포함되어 있지 않습니다, 따라서 명시된 목적 외의 범위 확장은 발견되지 않습니다.
Description Check	✅ Passed	PR 설명은 제공된 템플릿 구조를 따르며 관련 이슈( close #102 )와 작업 항목 "랜딩페이지"가 포함되어 있어 기본 정보는 충족됩니다, 다만 "PR Point"가 비어 있고 스크린샷이 첨부되지 않아 리뷰어가 중점 검토 포인트 및 시각적 결과를 즉시 파악하기 어렵습니다, 전반적으로 대부분의 필수 섹션은 채워져 있어 'mostly complete'로 판단합니다.

✨ 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

• X
• Mastodon
• Reddit
• LinkedIn

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

[github-actions]

✅ Storybook chromatic 배포 확인:
🐿️ storybook

[coderabbitai]

Actionable comments posted: 8

🧹 Nitpick comments (12)

apps/landing/src/assets/3_bell.json (1)

1-1: Lottie 내 텍스트(문자 쉐이프) 사용: 접근성 대체 텍스트 필요

애니메이션에 “4시간 30분 이후에 사라져요” 텍스트가 포함돼도 스크린리더는 인식하지 못할 수 있습니다. 해당 섹션 컴포넌트에서 Lottie에 role="img"와 의미 있는 aria-label을 부여하거나, 시각 숨김(sr-only) 텍스트를 추가하세요.

apps/landing/src/assets/2_bookmark.json (1)

1-1: 에셋 최적화 및 지연 로딩 권장

여기도 base64 이미지가 다수 포함되어 있습니다. 초기 페인트 전부를 한 번에 로딩하지 않도록 섹션 진입 시점에 동적 import하여 로드하거나, Lottie 최적화(불필요 키프레임/이미지 품질 조정)를 적용해 주세요.

apps/landing/src/components/FeatureBookmarkSection.tsx (2)

19-20: 애니메이션 접근성 속성 추가

스크린리더 친화성을 위해 Lottie에 역할과 라벨을 추가하세요.

-          <Lottie animationData={Bookmark} loop={true} autoplay={true} />
+          <Lottie
+            animationData={Bookmark}
+            loop
+            autoplay
+            role="img"
+            aria-label="북마크 및 메모 애니메이션"
+          />

---

6-8: 반응형 스택 정리(모바일 세로 스택, 패딩 보강)

작은 화면에서 좌우 2열이 비좁을 수 있습니다. 세로 스택 전환과 내부 패딩을 추가하세요.

-    <section className="flex h-dvh items-center justify-center bg-white">
-      <div className="flex items-center gap-[8rem]">
+    <section className="flex h-dvh items-center justify-center bg-white px-6">
+      <div className="flex flex-col items-center gap-[4rem] md:flex-row md:gap-[8rem]">

apps/landing/src/components/FeatureRewardSection.tsx (2)

20-21: 애니메이션 접근성 속성 추가

이미지 역할/라벨을 명시해 주세요.

-          <Lottie animationData={Progress} loop autoplay />
+          <Lottie animationData={Progress} loop autoplay role="img" aria-label="리워드 상승 애니메이션" />

---

2-2: 네이밍 니트: 데이터 의미가 드러나도록 변수명 조정

Progress는 컴포넌트/디자인 토큰과 혼동 여지가 있습니다. 에셋 의미에 맞게 변경 권장.

-import Progress from '../assets/4_up.json';
+import UpAnimation from '../assets/4_up.json';
@@
-          <Lottie animationData={Progress} loop autoplay role="img" aria-label="리워드 상승 애니메이션" />
+          <Lottie animationData={UpAnimation} loop autoplay role="img" aria-label="리워드 상승 애니메이션" />

Also applies to: 20-20

apps/landing/src/components/FinalCTASection.tsx (3)

7-7: 배경 색상 토큰 일관성 확인

다른 섹션은 bg-white를 사용하지만 여기만 bg-white-bg를 사용합니다. 토큰 의도라면 유지, 아니라면 일관성 있게 통일하세요.

-    <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">
+    <section className="bg-white flex h-dvh w-full flex-col items-center justify-center gap-[6.4rem] overflow-hidden px-[17.2rem] text-center">

---

8-13: 애니메이션 접근성 속성 추가

역할/라벨 지정 권장.

-      <Lottie
+      <Lottie
         animationData={Chippiface}
         loop
         autoplay
+        role="img"
+        aria-label="치삐 캐릭터 애니메이션"
         className="h-[32rem] w-[32rem]"
       />

---

22-29: 네비게이션은 onClick보다 a 링크 사용 권장

키보드/마우스 중간 클릭/접근성/SEO 측면에서 a 태그가 바람직합니다. 새 탭 이동 시 rel 보안 속성도 추가하세요.

-          <Button
-            variant="primary"
-            onClick={() => {
-              window.location.href = 'https://pinback.today';
-            }}
-          >
-            지금 시작하기
-          </Button>
+          <a href="https://pinback.today" target="_blank" rel="noopener noreferrer" aria-label="핀백 시작하기 새 탭에서 열기">
+            <Button variant="primary">지금 시작하기</Button>
+          </a>

apps/landing/src/components/FeatureReminderSection.tsx (2)

10-11: 애니메이션 접근성 속성 추가

역할/라벨 지정 권장.

-          <Lottie animationData={lightbulb_chippi_final} loop autoplay />
+          <Lottie
+            animationData={lightbulb_chippi_final}
+            loop
+            autoplay
+            role="img"
+            aria-label="리마인드 벨 애니메이션"
+          />

---

2-2: 네이밍 니트: 변수명 간결화

에셋 의미에 맞게 짧고 일관된 이름 사용 권장.

-import lightbulb_chippi_final from '../assets/3_bell.json';
+import BellAnimation from '../assets/3_bell.json';
@@
-          <Lottie
-            animationData={lightbulb_chippi_final}
+          <Lottie
+            animationData={BellAnimation}

Also applies to: 10-10

apps/landing/src/components/HeroSection.tsx (1)

29-29: 과도한 고정 패딩의 반응형 처리

px-[17.2rem]는 작은 뷰포트에서 좌우 오버플로우를 유발할 수 있습니다. 반응형 패딩으로 단계적 확대를 권장합니다.

-    <section className="bg-white-bg flex h-dvh w-full flex-col items-center justify-center px-[17.2rem] text-center">
+    <section className="bg-white-bg flex h-dvh w-full flex-col items-center justify-center px-6 sm:px-10 md:px-16 xl:px-[17.2rem] text-center">

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7bc3afc and 88b2a1b.

⛔ 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)

🔇 Additional comments (2)

apps/landing/package.json (1)

13-15: 확인 완료 — lottie-react@2.4.1은 React 19과 호환됩니다
lottie-react@2.4.1의 peerDependencies에 "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" 및 동일한 "react-dom" 범위가 명시되어 있어 React 19과 호환됩니다.

apps/landing/src/App.tsx (1)

15-33: 섹션의 접근 가능한 이름(헤딩) 확보 확인

각

내부에 시각적으로 노출되는 헤딩(h1–h6)이 필요합니다. Hero는 h1이면 충분합니다.
자동 검사(rg) 결과 아래 컴포넌트 파일들에서 h1–h6 태그가 발견되지 않았습니다(파일이 없거나 태그 부재 가능):

• apps/landing/src/components/FeatureBookmarkSection.tsx
• apps/landing/src/components/FeatureReminderSection.tsx
• apps/landing/src/components/FeatureRewardSection.tsx
• apps/landing/src/components/FinalCTASection.tsx

각 파일에 시각적 헤딩 또는 aria-label/aria-labelledby가 있는지 확인하고, 경로가 다르거나 헤딩이 다른 파일에 있다면 실제 경로 또는 rg 출력 결과를 붙여 제출하세요.

[coderabbitai]

⚠️ Potential issue

런타임 의존성 분류 오류: @pinback/design-system 은 dependencies로 이동 필요

FinalCTASection에서 Button을 런타임에 사용하므로 devDependencies가 아닌 dependencies에 선언되어야 합니다. 현재 상태는 프로덕션 빌드/배포 시 의존성 누락 위험이 있습니다.

권장 패치:

@@
   "dependencies": {
+    "@pinback/design-system": "workspace:*",
     "lottie-react": "^2.4.1",
     "react": "^19.1.1",
     "react-dom": "^19.1.1"
   },
@@
   "devDependencies": {
-    "@pinback/design-system": "workspace:*",

Also applies to: 12-16

🤖 Prompt for AI Agents

In apps/landing/package.json around lines 12-19, @pinback/design-system is
declared under devDependencies but is used at runtime (FinalCTASection Button),
so move the @pinback/design-system entry from devDependencies into dependencies
(remove from devDependencies and add the same version string under dependencies)
to ensure it is installed in production; apply the same change for any other
runtime packages noted in lines 12-16.

[coderabbitai]

🛠️ Refactor suggestion

메인 영역 시맨틱(

→ ) + 스크롤/스냅 개선

• 최상위 스크롤 컨테이너를 <main>으로 변경하고 role/aria-label을 부여하면 내비게이션 및 접근성이 향상됩니다.
• iOS 바운스/이중 스크롤 방지를 위해 overscroll-y-contain 추가 권장.
• 모션 선호도에 따라 부드러운 스크롤을 비활성화하려면 Tailwind의 motion-safe: 변형 사용.

-    <div className="h-dvh snap-y snap-mandatory overflow-y-scroll scroll-smooth">
+    <main role="main" aria-label="Pinback 랜딩 페이지" className="h-dvh snap-y snap-mandatory overflow-y-scroll overscroll-y-contain motion-safe:scroll-smooth">
...
-    </div>
+    </main>

Also applies to: 34-34

🤖 Prompt for AI Agents

In apps/landing/src/App.tsx around lines 11 (and also at line 34), replace the
top-level <div> scroll container with a semantic <main> element, add an
appropriate role and aria-label for accessibility (e.g., role="main" and a
descriptive aria-label), add the Tailwind class overscroll-y-contain to prevent
iOS bounce/double-scroll, and change scroll-smooth to motion-safe:scroll-smooth
so smooth scrolling respects user motion preferences.

[coderabbitai]

💡 Verification agent

🧩 Analysis chain

대용량 Lottie(JSON + base64 이미지)로 초기 번들 팽창 위험

여러 개의 내장 PNG(base64)와 긴 타임라인이 포함되어 초기 JS 번들 크기가 커질 수 있습니다. 섹션 진입 시 동적 import로 애니메이션 데이터를 지연 로드하거나, 에셋을 public에 두고 fetch로 불러오는 방식을 고려하세요. 또한 LottieFiles Optimizer로 최적화(불필요한 메타/레이어 제거, 이미지 압축) 권장.

리포 내 Lottie 파일 크기 점검 스크립트:

---

🏁 Script executed:

#!/bin/bash
# Lottie JSON 원본 및 gzip 크기 확인
set -e
for f in apps/landing/src/assets/*.json; do
  raw=$(wc -c < "$f")
  gz=$(gzip -c "$f" | wc -c)
  printf "%-50s raw=%'d bytes  gzip=%'d bytes\n" "$f" "$raw" "$gz"
done

Length of output: 428

---

초기 번들 팽창 우려 — 대용량 Lottie 자산 지연 로드 필요

검증 결과, 번들에 포함될 경우 초기 로드에 큰 영향을 줄 수 있는 대용량 Lottie JSON이 확인되었습니다:

• apps/landing/src/assets/1_landingmain.json — raw=4,750,587 bytes (~4.75 MB), gzip=3,373,418 bytes (~3.37 MB)
• apps/landing/src/assets/5_chippiface.json — raw=501,769 bytes (~0.50 MB), gzip=364,958 bytes (~0.36 MB)
• apps/landing/src/assets/3_bell.json — raw=31,453 bytes, gzip=7,403 bytes
• apps/landing/src/assets/4_up.json — raw=24,238 bytes, gzip=11,990 bytes
• apps/landing/src/assets/2_bookmark.json — raw=11,254 bytes, gzip=6,748 bytes

권장 조치:

• 초기 번들에서 제거 — 섹션 진입 시 dynamic import 또는 해당 섹션 진입(IntersectionObserver 등) 시 fetch로 지연 로드.
• 또는 Lottie JSON/이미지를 public으로 옮겨 URL로 불러오기(번들 경량화 + 캐시 이점).
• LottieFiles Optimizer로 애니메이션 경량화(불필요 메타/레이어 제거, 이미지 압축 및 base64 분리).

우선 처리 대상: apps/landing/src/assets/1_landingmain.json → 즉시 지연 로드 또는 최적화 적용.

🤖 Prompt for AI Agents

In apps/landing/src/assets/4_up.json (lines 1-1): this Lottie JSON is bundled
raw and contributes to initial bundle bloat; remove it from static imports and
instead load it lazily — either move the JSON (and large peers) into the public/
directory and fetch by URL when the animation section becomes visible
(IntersectionObserver) or keep it in src but replace static import with a
dynamic import() when needed; additionally run the asset through LottieFiles
Optimizer (or split out base64 images) to reduce size and ensure the loader
handles errors/timeouts and caches results.

[coderabbitai]

💡 Verification agent

🧩 Analysis chain

애니메이션 데이터 동적 import로 초기 번들 축소

JSON 에셋을 동적으로 가져오면 초기 번들을 줄일 수 있습니다. TS 설정에 resolveJsonModule가 필요합니다.

-import Lottie from 'lottie-react';
-import Bookmark from '../assets/2_bookmark.json';
+import Lottie from 'lottie-react';
+import { useEffect, useState } from 'react';
@@
-          <Lottie animationData={Bookmark} loop={true} autoplay={true} />
+          {/*
+            NOTE: 섹션 진입 시 초기 렌더 후 로드.
+            Vite에서는 import('../assets/2_bookmark.json').then(m => m.default)
+          */}
+          <Lottie animationData={anim} loop autoplay role="img" aria-label="북마크 및 메모 애니메이션" />

파일 상단에 추가:

const [anim, setAnim] = useState<any>();
useEffect(() => {
  let mounted = true;
  import('../assets/2_bookmark.json').then(m => { if (mounted) setAnim(m.default); });
  return () => { mounted = false; };
}, []);

TS 설정 확인 스크립트:

Also applies to: 17-21

---

🏁 Script executed:

#!/bin/bash
# apps/landing tsconfig에서 resolveJsonModule 사용 여부 확인
fd -t f 'tsconfig*.json' apps/landing | xargs -I {} sh -c 'echo "== {} =="; cat {} | jq ".compilerOptions.resolveJsonModule"'

Length of output: 37

---

resolveJsonModule 활성화 필요 — 애니메이션 JSON을 동적 import로 로드

확인: apps/landing/tsconfig.json의 compilerOptions.resolveJsonModule 값이 null입니다. 동적 import를 사용하려면 해당 tsconfig(또는 상위 tsconfig)에 "resolveJsonModule": true를 추가하세요 (파일: apps/landing/tsconfig.json).

-import Lottie from 'lottie-react';
-import Bookmark from '../assets/2_bookmark.json';
+import Lottie from 'lottie-react';
+import { useEffect, useState } from 'react';
@@
-          <Lottie animationData={Bookmark} loop={true} autoplay={true} />
+          {/*
+            NOTE: 섹션 진입 시 초기 렌더 후 로드.
+            Vite에서는 import('../assets/2_bookmark.json').then(m => m.default)
+          */}
+          <Lottie animationData={anim} loop autoplay role="img" aria-label="북마크 및 메모 애니메이션" />

파일 상단에 추가:

const [anim, setAnim] = useState<any>();
useEffect(() => {
  let mounted = true;
  import('../assets/2_bookmark.json').then(m => { if (mounted) setAnim(m.default); });
  return () => { mounted = false; };
}, []);

예시 tsconfig 변경:

// apps/landing/tsconfig.json
{
  "compilerOptions": {
    "resolveJsonModule": true
  }
}

🤖 Prompt for AI Agents

In apps/landing/src/components/FeatureBookmarkSection.tsx lines 1-3, the static
import of the animation JSON requires resolveJsonModule to be enabled and blocks
using dynamic import; update apps/landing/tsconfig.json (or its nearest parent
tsconfig) to set compilerOptions.resolveJsonModule to true, remove the top-level
static import of '../assets/2_bookmark.json', and change the component to load
the JSON dynamically by using useState and useEffect: in useEffect call
import('../assets/2_bookmark.json').then(m => mounted && setAnim(m.default))
with a mounted flag to avoid state updates after unmount, then pass the loaded
anim to the Lottie component; ensure types use any (or a proper type) for anim
state.

[coderabbitai]

🛠️ Refactor suggestion

동적 <style> 주입 최소화 + 모션 접근성 반영

현재 인라인 키프레임을 mount 때마다 주입/제거합니다. 전역 CSS/Tailwind keyframes로 옮기는 게 바람직합니다. 최소 변경으로는 모션 선호도(reduced) 대응과 안전한 제거(style.remove()) 적용을 권합니다.

적용 예:

 const floatAnimationStyle = `
 @keyframes floatY {
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(-10px); }
 }
 .float-animate {
   animation: floatY 2s ease-in-out infinite;
 }
+@media (prefers-reduced-motion: reduce) {
+  .float-animate { animation: none !important; }
+}
 `;
 ...
   useEffect(() => {
     const style = document.createElement('style');
     style.innerHTML = floatAnimationStyle;
     document.head.appendChild(style);
     return () => {
-      document.head.removeChild(style);
+      style.remove();
     };
   }, []);

Also applies to: 19-26

🤖 Prompt for AI Agents

In apps/landing/src/components/HeroSection.tsx around lines 8-16 (and similarly
lines 19-26), the component injects keyframe CSS into the DOM on mount and
removes it unsafely on unmount; update this to (1) avoid dynamic injection by
moving the keyframes to global CSS/Tailwind if possible, otherwise create the
style element once and on unmount call style.remove() to safely detach it, and
(2) respect prefers-reduced-motion by wrapping the animation rules in a @media
(prefers-reduced-motion: no-preference) query (or disabling animation when
reduced-motion is preferred). Ensure the implementation minimally changes the
component: prefer global/static styles, otherwise create the style element with
the media-aware rules and remove it with style.remove() on cleanup.

[coderabbitai]

🛠️ Refactor suggestion

이미지/Lottie 접근성 및 LCP 최적화

• 두 이미지 alt가 동일("Landing Icon")이며 의미 전달이 불명확합니다. 장식용이면 alt=""와 aria-hidden으로 스크린리더에서 제외하세요.
• 히어로 위상 이미지는 LCP 영향이 크므로 loading="eager", decoding="async", fetchPriority="high" 권장.
• Lottie는 장식용이면 aria-hidden 지정.

-          <img src={landing_icon} alt="Landing Icon" />
+          <img src={landing_icon} alt="" aria-hidden="true" loading="eager" decoding="async" fetchPriority="high" />
           <Lottie
             animationData={landingmain}
             loop
             autoplay
             className="h-[413px] w-[480px]"
+            aria-hidden="true"
           />
-          <img src={landing_bell} alt="Landing Icon" />
+          <img src={landing_bell} alt="" aria-hidden="true" loading="eager" decoding="async" fetchPriority="high" />

추가로, 이미지의 고정 width/height 지정으로 레이아웃 시프트를 더 줄일 수 있습니다.

📝 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

	<img src={landing_icon} alt="Landing Icon" />
	<Lottie
	animationData={landingmain}
	loop
	autoplay
	className="h-[413px] w-[480px]"
	/>
	<img src={landing_bell} alt="Landing Icon" />
	</div>
	<img src={landing_icon} alt="" aria-hidden="true" loading="eager" decoding="async" fetchPriority="high" />
	<Lottie
	animationData={landingmain}
	loop
	autoplay
	className="h-[413px] w-[480px]"
	aria-hidden="true"
	/>
	<img src={landing_bell} alt="" aria-hidden="true" loading="eager" decoding="async" fetchPriority="high" />
	</div>

🤖 Prompt for AI Agents

In apps/landing/src/components/HeroSection.tsx around lines 33 to 41, update the
two <img> elements and the Lottie component for accessibility and LCP: give each
image a meaningful, distinct alt text (or if purely decorative set alt="" and
add aria-hidden="true"), add loading="eager", decoding="async", and
fetchPriority="high" to the hero LCP image, and provide explicit width and
height attributes to both images to avoid layout shift; if the Lottie animation
is decorative, add aria-hidden="true" (and remove any alt) or otherwise provide
an accessible title/aria-label. Ensure attributes are added consistently in JSX
without changing layout semantics.

[coderabbitai]

🛠️ Refactor suggestion

헤딩 시맨틱 정비 (

→

/

)

히어로의 주 메시지는 문서의 주제 제목으로 노출되는 것이 접근성에 유리합니다.

-          <p className="head1 text-gray900">차곡차곡 모아둔 북마크</p>
-          <p className="head1 text-gray900">
+          <h1 className="head1 text-gray900">차곡차곡 모아둔 북마크</h1>
+          <p className="head1 text-gray900">
             저장만 하지 말고 재미있게 활용 해 볼까요?
-          </p>
+          </p>

📝 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

	<div className="mb-[3.2rem] mt-[5.5rem] leading-snug">
	<p className="head1 text-gray900">차곡차곡 모아둔 북마크</p>
	<p className="head1 text-gray900">
	저장만 하지 말고 재미있게 활용 해 볼까요?
	</p>
	<div className="mb-[3.2rem] mt-[5.5rem] leading-snug">
	<h1 className="head1 text-gray900">차곡차곡 모아둔 북마크</h1>
	<p className="head1 text-gray900">
	저장만 하지 말고 재미있게 활용 해 볼까요?
	</p>

🤖 Prompt for AI Agents

In apps/landing/src/components/HeroSection.tsx around lines 43 to 47, the hero
uses two <p> tags for the main title and subtitle which is not semantically
correct; replace the primary title <p className="head1 text-gray900">차곡차곡 모아둔
북마크</p> with an <h1> preserving the same class names and content, leave the
second line as a paragraph or subtitle element (e.g., <p>) and ensure heading
order remains correct for accessibility.

[coderabbitai]

🛠️ Refactor suggestion

버튼 라벨 오탈자 및 기본 type 명시

• 라벨 오탈자: “스트롤하기” → “스크롤하기”
• form 내 포함 가능성을 대비해 type="button" 명시.
• 가능하다면 앵커 내비게이션 사용(접근성/기본 동작 유지). 디자인시스템이 asChild를 지원하면 그 방식이 최적.

최소 수정:

-          <Button
+          <Button
             variant="secondary"
+            type="button"
             onClick={() => {
               document
                 .querySelector('#bookmark-section')
                 ?.scrollIntoView({ behavior: 'smooth' });
             }}
           >
-            스트롤하기
+            스크롤하기
           </Button>

asChild 지원 시(선호):

-          <Button variant="secondary" type="button" onClick={...}>스크롤하기</Button>
+          <Button variant="secondary" asChild>
+            <a href="#bookmark-section">스크롤하기</a>
+          </Button>

📝 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

	<div className="float-animate">
	<Button
	variant="secondary"
	onClick={() => {
	document
	.querySelector('#bookmark-section')
	?.scrollIntoView({ behavior: 'smooth' });
	}}
	>
	스트롤하기
	</Button>
	</div>
	<div className="float-animate">
	<Button
	variant="secondary"
	type="button"
	onClick={() => {
	document
	.querySelector('#bookmark-section')
	?.scrollIntoView({ behavior: 'smooth' });
	}}
	>
	스크롤하기
	</Button>
	</div>

🤖 Prompt for AI Agents

In apps/landing/src/components/HeroSection.tsx around lines 50 to 61, the Button
has a label typo and missing explicit type: change the label from "스트롤하기" to
"스크롤하기" and add type="button" to prevent accidental form submission; if the
design system supports asChild prefer rendering an anchor (or use a plain <a>
with href="#bookmark-section") for native navigation/ accessibility while
keeping smooth scroll behavior.