[PERF] WTH-419: 랜딩페이지 LCP 개선#132
Hidden character warning
Conversation
📝 WalkthroughWalkthrough히어로 섹션(데스크탑·모바일)의 Changes랜딩 미디어 로딩 최적화
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 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 |
PR 테스트 결과✅ Jest: 통과 🎉 모든 테스트를 통과했습니다! |
PR 검증 결과✅ TypeScript: 통과 🎉 모든 검증을 통과했습니다! |
|
구현한 기능 Preview: https://weeth-13hcgvbnn-weethsite-4975s-projects.vercel.app |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/components/landing/ServiceSectionTablet.tsx (1)
235-238: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win스켈레톤 배경색에 디자인 토큰 클래스를 사용하세요.
bg-[#E6EAED]는 하드코딩된 색상 값입니다. Desktop 컴포넌트와 동일하게 디자인 토큰 클래스로 교체해야 합니다."Never hardcode design token values; always use token classes from design tokens" 가이드라인을 기반으로 함.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/landing/ServiceSectionTablet.tsx` around lines 235 - 238, Replace the hardcoded background color class bg-[`#E6EAED`] in the Skeleton component with the appropriate design token class. Instead of using the hex color value directly, reference the same design token class that is used in the Desktop component's ServiceSectionDesktop to maintain consistency and follow the guideline of using design tokens for all color values.Source: Coding guidelines
src/components/landing/ServiceSectionMobile.tsx (1)
234-237: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win스켈레톤 배경색에 디자인 토큰 클래스를 사용하세요.
bg-[#E6EAED]는 하드코딩된 색상 값입니다. Desktop, Tablet 컴포넌트와 동일하게 디자인 토큰 클래스로 교체해야 합니다."Never hardcode design token values; always use token classes from design tokens" 가이드라인을 기반으로 함.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/landing/ServiceSectionMobile.tsx` around lines 234 - 237, Replace the hardcoded background color value bg-[`#E6EAED`] in the Skeleton component (located in the videoReady check within the aspect-[3840/1888] div) with the appropriate design token class name. Check the Desktop and Tablet component versions of this same Skeleton component to identify which design token class they use for the background color, then apply that same token class to the ServiceSectionMobile Skeleton component to maintain consistency across all component variants.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/landing/ServiceSectionDesktop.tsx`:
- Around line 212-215: The Skeleton component uses a hardcoded background color
value bg-[`#E6EAED`] which should be replaced with the design system token.
Replace the hardcoded color bg-[`#E6EAED`] with the design token
bg-[var(--neutral-400)] in the Skeleton className in ServiceSectionDesktop.tsx,
and apply the same fix to the identical Skeleton components in
ServiceSectionMobile.tsx and ServiceSectionTablet.tsx files to maintain
consistency with the design system guidelines.
---
Nitpick comments:
In `@src/components/landing/ServiceSectionMobile.tsx`:
- Around line 234-237: Replace the hardcoded background color value bg-[`#E6EAED`]
in the Skeleton component (located in the videoReady check within the
aspect-[3840/1888] div) with the appropriate design token class name. Check the
Desktop and Tablet component versions of this same Skeleton component to
identify which design token class they use for the background color, then apply
that same token class to the ServiceSectionMobile Skeleton component to maintain
consistency across all component variants.
In `@src/components/landing/ServiceSectionTablet.tsx`:
- Around line 235-238: Replace the hardcoded background color class bg-[`#E6EAED`]
in the Skeleton component with the appropriate design token class. Instead of
using the hex color value directly, reference the same design token class that
is used in the Desktop component's ServiceSectionDesktop to maintain consistency
and follow the guideline of using design tokens for all color values.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 9d27c3aa-2446-455a-8464-8c470a2dfb39
📒 Files selected for processing (5)
src/components/landing/HeroSectionDesktop.tsxsrc/components/landing/HeroSectionMobile.tsxsrc/components/landing/ServiceSectionDesktop.tsxsrc/components/landing/ServiceSectionMobile.tsxsrc/components/landing/ServiceSectionTablet.tsx
| <div className="relative aspect-[3840/1888] w-full overflow-hidden rounded-[30px]"> | ||
| {!videoReady.has(activeIndex) && ( | ||
| <Skeleton className="absolute inset-0 animate-pulse rounded-[30px] bg-[#E6EAED]" /> | ||
| )} |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: Find skeleton/loading background color tokens in the design system
# Check globals.css for skeleton or loading related color tokens
rg -n -A2 -B2 '(skeleton|loading|placeholder).*color|--.*(?:skeleton|loading|neutral-[0-9]+)' src/app/globals.css
# Also check for the current hardcoded value to see if there's a token for it
rg -n 'E6EAED|`#E6EAED`' src/app/globals.cssRepository: Team-Weeth/weeth-client
Length of output: 3098
🏁 Script executed:
# Find Tailwind configuration
fd -t f 'tailwind.config' . -x cat {} \;Repository: Team-Weeth/weeth-client
Length of output: 161
🏁 Script executed:
# Also check for any CSS class definitions for neutral-400
rg -n 'neutral-400|bg-neutral' src/app/globals.css -A2 -B2Repository: Team-Weeth/weeth-client
Length of output: 1701
🏁 Script executed:
# Search for actual usage of neutral or color tokens in className
rg -t tsx 'className.*(?:bg-|text-)(?:neutral|color)' src/ -o -m 1 | head -20Repository: Team-Weeth/weeth-client
Length of output: 189
🏁 Script executed:
# Check if tailwind.config.js exists and cat it
find . -name 'tailwind.config.*' -type f -exec cat {} \;Repository: Team-Weeth/weeth-client
Length of output: 161
🏁 Script executed:
# Also search for how color tokens are used in existing code
rg -t tsx 'bg-\[.*\].*neutral|skeleton' src/components --context=2 | head -30Repository: Team-Weeth/weeth-client
Length of output: 189
🏁 Script executed:
# Try searching for tailwind config with different pattern
find . -name 'tailwind.config*' -o -name 'next.config*' | xargs cat 2>/dev/nullRepository: Team-Weeth/weeth-client
Length of output: 1942
🏁 Script executed:
# Look at the actual component file to understand context
cat -n src/components/landing/ServiceSectionDesktop.tsx | sed -n '210,235p'Repository: Team-Weeth/weeth-client
Length of output: 1562
🏁 Script executed:
# Search for existing bg-color or bg-neutral usage in tsx files without rg -t
grep -r "bg-\[" src/components/ --include="*.tsx" | grep -E "(neutral|gray|slate)" | head -10Repository: Team-Weeth/weeth-client
Length of output: 339
🏁 Script executed:
# Search for existing skeleton or loading related patterns in the codebase
grep -r "Skeleton\|skeleton\|loading.*bg" src/components --include="*.tsx" -B2 -A2Repository: Team-Weeth/weeth-client
Length of output: 50379
🏁 Script executed:
# Check if there's a semantic token specifically for loading/skeleton state
grep -n "skeleton\|loading" src/app/globals.css -iRepository: Team-Weeth/weeth-client
Length of output: 161
🏁 Script executed:
# Look for how other components use neutral-400 or similar tokens
grep -r "var(--neutral\|bg-\[var(" src/components --include="*.tsx" | head -15Repository: Team-Weeth/weeth-client
Length of output: 488
스켈레톤 배경색에 디자인 토큰을 사용하세요.
bg-[#E6EAED]는 하드코딩된 색상 값입니다. 이 색상은 디자인 시스템에 --neutral-400으로 정의되어 있습니다.
코딩 가이드라인에 따라 bg-[var(--neutral-400)]으로 변경하세요. 이 문제는 ServiceSectionDesktop, ServiceSectionMobile, ServiceSectionTablet의 세 파일에서 동일하게 나타납니다.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/landing/ServiceSectionDesktop.tsx` around lines 212 - 215, The
Skeleton component uses a hardcoded background color value bg-[`#E6EAED`] which
should be replaced with the design system token. Replace the hardcoded color
bg-[`#E6EAED`] with the design token bg-[var(--neutral-400)] in the Skeleton
className in ServiceSectionDesktop.tsx, and apply the same fix to the identical
Skeleton components in ServiceSectionMobile.tsx and ServiceSectionTablet.tsx
files to maintain consistency with the design system guidelines.
Source: Coding guidelines
4 participants
✅ PR 유형
어떤 변경 사항이 있었나요?
📌 관련 이슈번호
✅ Key Changes
HeroSectionMobile,HeroSectionDesktop— LCP 이미지에priority및 뷰포트별sizes추가로 브라우저 사전 로드 활성화ServiceSectionDesktop,ServiceSectionTablet,ServiceSectionMobile— 비디오preload="auto"→"none"전환으로 초기 페이로드 ~12MB 제거aspect-[3840/1888]고정 + Skeletonabsolute inset-0전환으로 CLS 제거결과: Lighthouse Performance 63 → 93점 (DevTools Simulated throttling, Desktop)
📸 스크린샷 or 실행영상
전
후
🎸 기타 사항 or 추가 코멘트
Summary by CodeRabbit
릴리스 노트