[Refactor/#230] Landing Page 플랫폼 변경 및 요소 추가#273
Open
Seojegyeong wants to merge 4 commits into
Open
Conversation
AI 요약하기 버튼과 워크스페이스 동그란 버튼에 primary-300 → primary-500 그라데이션 적용
- 4개 섹션으로 재구성: 플랫폼 연동 → 통합 대시보드 → 캠페인 관리 → 팀 협업 - 피처 카드 설명 제거 및 체크리스트 스타일로 변경 - 뱃지 디자인 소프트 tint 스타일로 변경 (bg-primary-100 + text-primary-500) - 목업 컬럼 비율 조정 (3/5 → 1/2) - GuideOverviewChart: 플랫폼 드롭다운 토글 추가 및 색상 동적 변경 - GuidePlatform: 플랫폼 연동 카드 UI로 교체 - GuideWorkspace: 팀원 초대 모달 디자인 기반 신규 목업 추가
📝 WalkthroughWalkthrough랜딩 가이드 콘텐츠와 플랫폼/차트 UI가 새 데이터 구조에 맞춰 갱신됐습니다. 차트는 플랫폼 선택에 따라 옵션과 시리즈를 다시 계산하고, 워크스페이스 초대 패널과 카드형 플랫폼 표시가 추가됐습니다. Changes랜딩 가이드 UI 개편
Sequence Diagram(s)sequenceDiagram
participant User
participant DropdownMenu
participant GuideOverviewChart
participant ReactApexChart
User->>DropdownMenu: select platform
DropdownMenu->>GuideOverviewChart: onSelect(selected)
GuideOverviewChart->>GuideOverviewChart: build chartOptions and series
GuideOverviewChart->>ReactApexChart: update options, series, and key
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ 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 |
📚 Storybook 배포 완료
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/landing/GuideOverviewChart.tsx (1)
117-120: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win스크린리더 설명도 선택 상태와 같이 바뀌어야 합니다.
Line 117-120의 설명은 항상 예측 클릭수와 12시 오버레이를 읽지만, 비통합 모드에서는 차트가 단일 series이고 오버레이도 렌더링되지 않습니다. 시각 상태와 보조기기 설명이 달라져서 접근성 정보가 틀어집니다.
As per path instructions, "7. 접근성: 시맨틱 HTML, ARIA 속성 사용 확인."
Also applies to: 127-144
🤖 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/GuideOverviewChart.tsx` around lines 117 - 120, The screen reader text in GuideOverviewChart is hardcoded to always describe the integrated view, so it no longer matches the selected chart state when non-integrated mode is shown. Update the sr-only description to be derived from the same selection state used for rendering the chart and overlay, and branch the accessible copy so it announces the single-series/non-overlay view when applicable. Make sure the aria/screen-reader content stays in sync with the visible state in GuideOverviewChart and the related conditional rendering logic.Source: Path instructions
🧹 Nitpick comments (1)
src/components/landing/GuideOverviewChart.tsx (1)
24-30: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win차트 팔레트에 raw color 값을 직접 박아두지 않는 편이 좋겠습니다.
ApexCharts에 넘기는 색도 토큰 source 하나로 맞춰야 하는데, 지금은
var(--...)문자열과 hex 값이 섞여 있습니다. 플랫폼별 색이 필요하면 토큰을 추가하고 여기서는 그 토큰만 참조하는 쪽이 이후 테마 변경에 안전합니다.As per coding guidelines, "Use only
@themetokens from src/styles/tokens.css for colors. Forbidden: token renaming, arbitrary colors." and "Ensure external libraries (charts, etc.) colors align with@themetokens."🤖 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/GuideOverviewChart.tsx` around lines 24 - 30, The chart palette in GuideOverviewChart mixes raw CSS variable strings and hex values instead of using a single `@theme` token source. Update the color mapping to reference only tokens defined in src/styles/tokens.css, and add any missing platform-specific tokens there if needed. Then change the palette object in GuideOverviewChart so ApexCharts consumes only those tokens, keeping the existing symbol names like 통합, NAVER, META, and GOOGLE as the lookup points.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/GuideOverviewChart.tsx`:
- Around line 38-43: The platform dropdown in GuideOverviewChart is only
changing colors while PLATFORM_SERIES always renders NORMALIZED_CLICKS, so the
selected platform does not affect the plotted data. Update the series generation
in GuideOverviewChart so it derives the dataset from the current selected
platform (or pass a selected-platform-to-series mapping down from the constant
layer) instead of using a fixed PLATFORM_SERIES, and make sure the chart
rendering path and any related helpers use the same selected value consistently.
- Around line 95-97: The legend in GuideOverviewChart is hardcoded to a single
“클릭수” item even though LANDING_OVERVIEW_CHART_SERIES renders two lines, so
update the ChartLegend items to match the actual series being shown in the
unified mode. Use the GuideOverviewChart component and its ChartLegend usage to
generate legend entries dynamically or add a second labeled item for the
additional series, and make the same adjustment in the other duplicated legend
block referenced by the comment so both legends stay in sync with the rendered
series.
- Around line 20-23: The guide chart has three issues: PLATFORM_SERIES does not
react to selected platform, color values are hardcoded CSS vars instead of
shared theme tokens, and the sr-only label is static. Update GuideOverviewChart
so the series data is derived from selected (for example via a platform-to-data
mapping or helper near PLATFORM_SERIES), replace direct var(--color-*) usage in
PLATFORM_COLORS with the project’s token-based color source, and make the
accessible description dynamic so it reflects the current selected platform.
In `@src/components/landing/GuidePlatform.tsx`:
- Around line 29-34: The CTA rendered as a div in GuidePlatform is visually a
button but is not keyboard-accessible or semantically interactive. Update the
“연동하기” element to use the appropriate semantic control in GuidePlatform, such as
a button for an action or a link for navigation, and ensure its behavior and
styling match that role. If it is only decorative/mock UI, remove the
button-like styling so it does not imply interactivity.
In `@src/components/landing/GuideWorkspace.tsx`:
- Around line 12-31: The GuideWorkspace mock UI currently uses non-semantic
div/span elements for interactive-looking controls, so either hide the whole
preview from assistive tech if it is only decorative, or convert the “링크 복사”,
email field, and “초대” elements in GuideWorkspace to proper semantic controls
with keyboard support and accessible roles. If this component is meant to be
interactive, replace the relevant wrappers with button/input elements and ensure
the copy action and invite action are reachable and announced correctly; if it
is only a landing mockup, add aria-hidden at the appropriate root instead.
In `@src/components/landing/LandingFeatures.tsx`:
- Around line 80-82: Replace the inline linear-gradient style in
LandingFeatures.tsx with Tailwind gradient utility classes to match the codebase
convention. Update the components using the existing inline background gradient
(the sections around the current style blocks in LandingFeatures.tsx) to use
className with bg-gradient-to-br plus the appropriate from- and to- color
utilities instead of style={{ background: "linear-gradient(... var(--color-*)
...)" }}. If the style object only contains that background value, remove style
entirely and keep the gradient purely in Tailwind.
In `@src/components/landing/LandingGuide.tsx`:
- Around line 111-113: The CheckIcon inside LandingGuide’s list item is
decorative and should be hidden from assistive tech. Update the CheckIcon usage
in the item rendering block to include aria-hidden="true" (and keep it
non-focusable if needed) so only the list text is announced, while preserving
the existing visual layout and semantics of the li/span structure.
---
Outside diff comments:
In `@src/components/landing/GuideOverviewChart.tsx`:
- Around line 117-120: The screen reader text in GuideOverviewChart is hardcoded
to always describe the integrated view, so it no longer matches the selected
chart state when non-integrated mode is shown. Update the sr-only description to
be derived from the same selection state used for rendering the chart and
overlay, and branch the accessible copy so it announces the
single-series/non-overlay view when applicable. Make sure the aria/screen-reader
content stays in sync with the visible state in GuideOverviewChart and the
related conditional rendering logic.
---
Nitpick comments:
In `@src/components/landing/GuideOverviewChart.tsx`:
- Around line 24-30: The chart palette in GuideOverviewChart mixes raw CSS
variable strings and hex values instead of using a single `@theme` token source.
Update the color mapping to reference only tokens defined in
src/styles/tokens.css, and add any missing platform-specific tokens there if
needed. Then change the palette object in GuideOverviewChart so ApexCharts
consumes only those tokens, keeping the existing symbol names like 통합, NAVER,
META, and GOOGLE as the lookup points.
🪄 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: CHILL
Plan: Pro
Run ID: 26219468-cbf5-4d31-873a-e185c201ffe2
📒 Files selected for processing (8)
src/components/landing/GuideOverviewChart.tsxsrc/components/landing/GuidePlatform.tsxsrc/components/landing/GuideTimeline.tsxsrc/components/landing/GuideWorkspace.tsxsrc/components/landing/LandingFeatures.tsxsrc/components/landing/LandingGuide.tsxsrc/constants/landing/guide.tssrc/constants/landing/overviewChart.ts
- GuideOverviewChart: 플랫폼별 series 맵 도입, 색상 토큰 적용, legend 및 sr-only 동적화 - GuidePlatform: 목업 연동하기 버튼 비활성 스타일로 교체 - GuideWorkspace: 목업 루트에 aria-hidden 추가 - LandingFeatures: 인라인 gradient style을 Tailwind bg-linear-to-br 유틸리티로 교체
Seojegyeong
changed the title
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.
🚨 관련 이슈
#230
✨ 변경사항
✏️ 작업 내용
😅 미완성 작업
N/A
📢 논의 사항 및 참고 사항
N/A
Summary by CodeRabbit