feat: 랜딩 페이지 구현 (#1) - #3
Merged
Merged
Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthrough랜딩 페이지가 FSD 구조로 추가되고, 공용 유틸·모션 설정·경로 별칭이 shared 레이어로 정리되었습니다. 헤더, 히어로, 템플릿, 기능 소개, 온보딩 단계, CTA, 푸터가 조립되며 ESLint, Prettier, 스크립트, 문서도 함께 갱신되었습니다. Changes랜딩 페이지 기능 구현
Estimated code review effort: 3 (Moderate) | ~30 minutes Sequence Diagram(s)sequenceDiagram
participant Browser
participant Home as src/app/page.tsx
participant LandingPage as src/views/landing/ui/LandingPage.tsx
participant Widgets as LandingHeader/HeroSection/TemplatesSection/FeaturesSection/StepsSection/CtaSection/LandingFooter
Browser->>Home: GET /
Home->>LandingPage: render LandingPage
LandingPage->>Widgets: sections 조립
Widgets-->>Browser: 랜딩 페이지 UI
Related issues: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
Actionable comments posted: 7
🤖 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 `@eslint.config.mjs`:
- Around line 30-42: `no-restricted-imports` in eslint.config.mjs only checks
import specifier strings, so relative paths can bypass the FSD layer
restriction. Update the import-boundary enforcement to use a path-aware rule
such as `eslint-plugin-import`’s `no-restricted-paths` or
`eslint-plugin-boundaries`, and configure it around the existing
`forbidden`/`layer` logic so it validates real file locations rather than
alias-only imports.
- Around line 7-43: The FSD import restriction patterns in fsdLayerRules are too
shallow and only match one path segment, so imports like deeper public API paths
can bypass the rule. Update the forbidden patterns in the layer mapping used by
no-restricted-imports to use recursive matching for each upper layer (for
example in the fsdLayerRules configuration for views, widgets, features,
entities, and shared) so nested imports are covered as well.
In `@README.md`:
- Around line 82-87: The README script table is missing the newly added
validation commands, so update the table to match the actual scripts defined in
package.json. In the README section with npm run dev/build/start/lint, add
entries for typecheck, format, and check, and keep the descriptions aligned with
the existing script names so the documented entry points stay in sync.
In `@src/widgets/landing/landing-cta/ui/LandingFooter.tsx`:
- Line 5: The footer copyright year is hardcoded in LandingFooter, so update the
JSX in LandingFooter.tsx to derive the year dynamically instead of embedding a
fixed 2026. Use the existing footer text element and replace the static year
with a value from new Date().getFullYear() so the displayed copyright stays
current without manual edits.
In `@src/widgets/landing/landing-hero/ui/HeroSection.tsx`:
- Line 33: The gradient text in HeroSection is using the removed Tailwind v4
utility bg-gradient-to-r, so update the class on the affected span in
HeroSection to use bg-linear-to-r instead while keeping the existing gradient
stops and text-clip styling unchanged.
- Line 51: In HeroSection, the hover scaling utility uses a non-standard
Tailwind class, so the hover effect won’t apply; update the button’s className
in the landing hero component to use the valid arbitrary scale syntax instead of
hover:scale-103. Check the class string on the primary CTA in HeroSection and
replace the invalid scale utility with the Tailwind-supported form.
In `@src/widgets/landing/landing-teams/config/teams.ts`:
- Around line 9-13: The card color values in the teams landing config are
hardcoded hex literals, which creates sync burden across similar config files
like landing-features/config/features.ts. Update the teams config mapping to
reference shared design tokens or CSS variables instead of direct hex values,
and apply the same pattern consistently to the gradient, borderColor, tagBg, and
tagText fields so color changes stay centralized.
🪄 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: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 33c99c46-729b-407f-8423-e859bfd75c57
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json,!package-lock.json
📒 Files selected for processing (39)
.coderabbit.yaml.github/ISSUE_TEMPLATE/issue_template.md.gitignore.prettierignore.prettierrcREADME.mdcomponents.jsondocs/conventions/code-convention.mddocs/conventions/prettier-convention.mdeslint.config.mjsnext.config.tspackage.jsonpostcss.config.mjssrc/app/globals.csssrc/app/layout.tsxsrc/app/page.tsxsrc/lib/utils.tssrc/shared/lib/client.tssrc/shared/lib/middleware.tssrc/shared/lib/motion/index.tssrc/shared/lib/motion/variants.tssrc/shared/lib/server.tssrc/shared/lib/utils.tssrc/shared/ui/button.tsxsrc/views/landing/index.tssrc/views/landing/ui/LandingPage.tsxsrc/widgets/landing/landing-cta/index.tssrc/widgets/landing/landing-cta/ui/CtaSection.tsxsrc/widgets/landing/landing-cta/ui/LandingFooter.tsxsrc/widgets/landing/landing-features/config/features.tssrc/widgets/landing/landing-features/index.tssrc/widgets/landing/landing-features/ui/FeaturesSection.tsxsrc/widgets/landing/landing-header/index.tssrc/widgets/landing/landing-header/ui/LandingHeader.tsxsrc/widgets/landing/landing-hero/index.tssrc/widgets/landing/landing-hero/ui/HeroSection.tsxsrc/widgets/landing/landing-teams/config/teams.tssrc/widgets/landing/landing-teams/index.tssrc/widgets/landing/landing-teams/ui/TeamsSection.tsx
💤 Files with no reviewable changes (1)
- src/lib/utils.ts
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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/widgets/landing/landing-header/ui/LandingHeader.tsx`:
- Line 36: `LandingHeader` contains a repeated gradient class pattern that is
also used in `HeroSection` and `CtaSection`, so extract the shared gradient
styling into a reusable utility/helper instead of duplicating the Tailwind class
string. Introduce a common class builder or `@utility` for the gradient
container, and update the `LandingHeader` element to use that shared symbol so
the direction/color variations stay centralized and easier to maintain.
🪄 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: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: e98f9d44-0316-4694-bd20-6247f8242bb9
📒 Files selected for processing (5)
README.mdsrc/widgets/landing/landing-cta/ui/CtaSection.tsxsrc/widgets/landing/landing-cta/ui/LandingFooter.tsxsrc/widgets/landing/landing-header/ui/LandingHeader.tsxsrc/widgets/landing/landing-hero/ui/HeroSection.tsx
seongjinss555
approved these changes
Jul 3, 2026
seongjinss555
left a comment
Contributor
There was a problem hiding this comment.
나중에 디자인 토큰 정해지게 되면 색상이나 글꼴 같은 건 디자인 토큰으로만 수정 하시면 될 거 같습니다~ 고생하셨습니다
Contributor
Author
|
@seongjinss555 일단은 globals.css에 변수 적용은 해놨어요~ 추후에 컬러 제대로 정해지면 그 부분 수정하면 될 것 같습니다^^ globals.css theme 블록에 적용되어 있고 현재 토큰은
이렇게 사용중입니다~~ Lines 9 to 20 in 91144f3 해당 코드 위치입니다^^ |
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)
src/widgets/landing/landing-features/ui/FeaturesSection.tsx (1)
38-95: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value가로 스크롤 영역에 접근성 힌트 보강 고려.
overflow-x-auto컨테이너에 포커스 가능한 인터랙티브 요소가 없어 현재는 심각한 문제는 아니지만, 스크린리더/키보드 사용자를 위해role="region"과aria-label, 또는tabIndex={0}을 추가하면 스크롤 가능 영역임을 명확히 알릴 수 있습니다.🤖 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/widgets/landing/landing-features/ui/FeaturesSection.tsx` around lines 38 - 95, In FeaturesSection’s horizontal scroll container (the motion.div wrapping featureCards), add accessible scroll-region semantics so assistive tech can recognize it as scrollable. Update that container to expose a clear label such as a region with an aria-label, and consider making it keyboard focusable with tabIndex={0} so users can discover and operate the overflow-x-auto area. Keep the change localized to the motion.div in FeaturesSection and preserve the existing layout and animation props.
🤖 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/widgets/landing/landing-hero/ui/HeroSection.tsx`:
- Around line 16-22: The Image in HeroSection uses fill without an explicit
sizes prop, so update that background Image to include sizes="100vw". Keep the
change localized to the Image component in HeroSection and preserve the existing
fill, priority, and styling props while adding the responsive sizing hint.
In `@src/widgets/landing/landing-templates/ui/TemplatesSection.tsx`:
- Around line 42-70: The template selection button in TemplatesSection only
exposes selection through visual styles, so add an aria-pressed state to the
button using the existing isSelected value. Update the button element that calls
setSelectedId(item.id) so screen readers can announce which template is
selected, while keeping the current styling logic unchanged.
---
Outside diff comments:
In `@src/widgets/landing/landing-features/ui/FeaturesSection.tsx`:
- Around line 38-95: In FeaturesSection’s horizontal scroll container (the
motion.div wrapping featureCards), add accessible scroll-region semantics so
assistive tech can recognize it as scrollable. Update that container to expose a
clear label such as a region with an aria-label, and consider making it keyboard
focusable with tabIndex={0} so users can discover and operate the
overflow-x-auto area. Keep the change localized to the motion.div in
FeaturesSection and preserve the existing layout and animation props.
🪄 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: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: c90fae77-be99-4714-8dda-c3f499b76f0a
⛔ Files ignored due to path filters (4)
public/landing/avatar-1.pngis excluded by!**/*.png,!public/**public/landing/avatar-2.pngis excluded by!**/*.png,!public/**public/landing/avatar-3.pngis excluded by!**/*.png,!public/**public/landing/hero-bg.pngis excluded by!**/*.png,!public/**
📒 Files selected for processing (12)
src/views/landing/ui/LandingPage.tsxsrc/widgets/landing/landing-cta/ui/CtaSection.tsxsrc/widgets/landing/landing-cta/ui/LandingFooter.tsxsrc/widgets/landing/landing-features/config/features.tssrc/widgets/landing/landing-features/ui/FeaturesSection.tsxsrc/widgets/landing/landing-header/ui/LandingHeader.tsxsrc/widgets/landing/landing-hero/ui/HeroSection.tsxsrc/widgets/landing/landing-steps/index.tssrc/widgets/landing/landing-steps/ui/StepsSection.tsxsrc/widgets/landing/landing-templates/config/templates.tssrc/widgets/landing/landing-templates/index.tssrc/widgets/landing/landing-templates/ui/TemplatesSection.tsx
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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/widgets/landing/landing-features/ui/FeaturesSection.tsx`:
- Around line 36-44: The auto-rotation in FeaturesSection’s useEffect currently
keeps advancing the carousel with no way to pause, so add a hover/focus pause
mechanism around the interval logic. Update the FeaturesSection component to
stop the timer when the card area is hovered or focused, and restart it when
interaction ends, using the existing AUTO_ROTATE_MS interval and the
setActiveIndex/clearInterval flow so users can read content without being forced
to advance.
- Around line 28-30: `FeaturesSection`의 `getDisplayVariant`가 인덱스만 보고
`light`/`accent`를 고정 반환해서 `feature.variant`와 `CARD_STYLES.soft`가 무시되고 있습니다.
`featureCards`의 실제 `variant` 값을 우선 사용하도록 `getDisplayVariant`와 카드 렌더링 로직을 수정하고,
`soft`일 때도 아이콘 배경/텍스트 색상 분기가 적용되도록 `FeatureCard` 스타일 매핑과 `CARD_STYLES` 사용처를 함께
업데이트하세요.
🪄 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: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 9506fc2a-4df4-497b-af11-f409e012cbe3
⛔ Files ignored due to path filters (1)
public/landing/hero-bg.pngis excluded by!**/*.png,!public/**
📒 Files selected for processing (7)
src/widgets/landing/landing-cta/ui/CtaSection.tsxsrc/widgets/landing/landing-cta/ui/LandingFooter.tsxsrc/widgets/landing/landing-features/ui/FeaturesSection.tsxsrc/widgets/landing/landing-header/ui/LandingHeader.tsxsrc/widgets/landing/landing-hero/ui/HeroSection.tsxsrc/widgets/landing/landing-steps/ui/StepsSection.tsxsrc/widgets/landing/landing-templates/ui/TemplatesSection.tsx
- 백그라운드 탭 복귀 시 카드가 사라지던 문제 수정 (Page Visibility로 순환 정지 + 리셋 조건 방어) - 캐러셀 트랙 양쪽 엣지 mask 페이드 추가 - hover/focus 시 자동 순환 일시정지 - 템플릿 선택 버튼 aria-pressed 추가 - 사용되지 않던 soft variant dead code 정리
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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/widgets/landing/landing-features/ui/FeaturesSection.tsx`:
- Around line 39-65: Add an explicit pause/stop control for the rotating feature
in FeaturesSection so touch/mobile users can stop auto-rotation without relying
on hover or focus events. Update the existing auto-rotate flow around isPaused,
onMouseEnter/Leave, and onFocusCapture/BlurCapture so the new control toggles
the same pause state and remains accessible for keyboard and touch interactions.
Keep the visibility-based stop behavior intact, but make sure the user can
manually pause/resume the carousel from the UI.
🪄 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: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: b904bb0b-fdba-42f0-b7ff-8780e46b392b
📒 Files selected for processing (3)
src/widgets/landing/landing-features/config/features.tssrc/widgets/landing/landing-features/ui/FeaturesSection.tsxsrc/widgets/landing/landing-templates/ui/TemplatesSection.tsx
- 헤더 z-index를 z-50으로 올려 스크롤 시 히어로 콘텐츠 위로 고정 - 기능 캐러셀 트랙을 우측 뷰포트 끝까지 full-bleed 확장 (Figma 정합) - 100vw 계산으로 생기던 가로 스크롤바를 overflow-x-clip으로 제거
- 터치/모바일 사용자를 위한 명시적 일시정지·재생 토글 버튼 추가 - hover/focus와 충돌하지 않도록 isManuallyPaused 상태로 분리 - interval을 isPaused/isManuallyPaused/isPageVisible로 게이팅 - APG 미디어 패턴에 맞춰 동적 aria-label 사용
This was referenced Jul 6, 2026
12 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
작업 내용
views/widgets/shared레이어 (Next.js Pages Router 충돌로 FSD의 pages 레이어는views로 명명)@theme,brand-*9종 — Figma 전 화면 공통 컬러 검증 후 추출)check스크립트 추가작업 결과
/진입 시 Figma 랜딩 디자인과 일치하는 화면 렌더링 (데스크톱/모바일)max-w-4xl,p-6.25등)이 Figma 원본 px과 동일함을 computed 값으로 확인변경 사항
Added
src/views/landing— 랜딩 페이지 조립 컴포넌트 (Public APIindex.ts)src/widgets/landing/*— landing-header / landing-hero / landing-teams / landing-features / landing-cta 위젯 5종src/shared/lib/motion— 공용 애니메이션 상수 (fadeUp, staggerContainer, hoverLift 등)src/app/globals.css—brand-*디자인 토큰, gradient-x keyframespackage.json— motion 의존성,typecheck/format/format:check/check스크립트eslint.config.mjs— no-console, no-explicit-any, FSD 레이어 경계 규칙Changed
src/components/ui,src/lib→src/shared/ui,src/shared/lib이동 (FSD)components.jsonalias를@/shared/*기준으로 변경 (shadcn CLI 생성 경로).prettierrc팀 컨벤션 설정 적용 및 전체 포맷src/app/page.tsx— views/landing 렌더 전용으로 변경Fixed
테스트
로컬 실행 확인
주요 시나리오 확인
영향 범위 확인
npm run check(lint + typecheck + format:check) 통과npm run build통과 (라우트/정적 생성 확인)데스크톱(1280)/모바일(375) 렌더링을 Figma 프레임과 대조 확인
FSD 경계 ESLint 규칙 위반 파일로 스모크 테스트 통과 확인
리뷰 체크리스트
feature/*->develop, 배포 시develop또는release/*->main)Type/#issue-number/description형식을 따릅니다.console.log, 주석, 임시 코드를 제거했습니다.리뷰 요청사항
views(FSD pages 레이어 개명 — Next.jssrc/pagesPages Router 충돌 회피) /widgets/landing/*폴더 구조와 import 방향이 컨벤션에 맞는지 봐주세요.brand-*) 네이밍과 shadcn 변수를 건드리지 않은 additive 방식이 괜찮은지 확인 부탁드립니다.eslint.config.mjs)이 앞으로의 작업에 방해되지 않을지 의견 주세요.관련 이슈
Closes #1
Summary by CodeRabbit