[Refactor/#230] LandingPage 개선#273
Open
Seojegyeong wants to merge 2 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 | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 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
Comment on lines
+20
to
+23
| const PLATFORM_COLORS: Record< | ||
| TPlatformFilter, | ||
| { primary: string; secondary: string } | ||
| > = { |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
fd GuideOverviewChart.tsx src --exec sh -c '
echo "== $1 =="
nl -ba "$1" | sed -n "18,26p"
' sh {}Repository: WhereYouAd/WhereYouAd-Frontend
Length of output: 241
🏁 Script executed:
cat -n src/components/landing/GuideOverviewChart.tsx | sed -n '18,26p'Repository: WhereYouAd/WhereYouAd-Frontend
Length of output: 480
🏁 Script executed:
cat -n src/components/landing/GuideOverviewChart.tsx | sed -n '130,160p'Repository: WhereYouAd/WhereYouAd-Frontend
Length of output: 964
🏁 Script executed:
grep -n "PLATFORM_SERIES\|LANDING_OVERVIEW_CHART_SERIES" src/components/landing/GuideOverviewChart.tsxRepository: WhereYouAd/WhereYouAd-Frontend
Length of output: 312
🏁 Script executed:
cat -n src/components/landing/GuideOverviewChart.tsx | sed -n '35,50p'Repository: WhereYouAd/WhereYouAd-Frontend
Length of output: 558
🏁 Script executed:
grep -n "NORMALIZED_CLICKS" src/components/landing/GuideOverviewChart.tsxRepository: WhereYouAd/WhereYouAd-Frontend
Length of output: 252
플랫폼 필터링 시 차트 데이터가 변경되지 않는 기능적 결함과 접근성/스타일링 가이드라인 위반 수정 필요
1. 기능적 결함 (Major)
선택된 플랫폼 (selected) 이 PLATFORM_SERIES 데이터에 영향을 주지 않습니다.
- 현재 문제: Line 38-43 의
PLATFORM_SERIES가selected값을 참조하지 않고NORMALIZED_CLICKS와 같은 고정된 데이터만 사용합니다. 따라서 드롭다운에서 플랫폼을 바꿔도 차트에는 동일한 데이터만 표시됩니다. - 해결 방안:
selected값에 따라 다른 데이터셋을 매핑하거나,PLATFORM_SERIES가selected에 반응하도록 로직을 수정해야 합니다.
// 현재: 플랫폼과 무관하게 같은 데이터만 표시됨
const PLATFORM_SERIES = [
{ name: "클릭수", data: NORMALIZED_CLICKS.map(...) },
];
// 수정 제안 예시
const getPlatformSeries = (platform: TPlatformFilter) => {
// 해당 플랫폼에 맞는 데이터 반환 로직 구현 필요
return { name: "클릭수", data: DATA_MAP[platform] };
};2. 컬러 토큰 사용 가이드라인 위반 (Minor)
Line 25-26 에서 var(--color-*) 형태의 CSS 변수를 직접 하드코딩하고 있습니다.
- 규칙 위반:
**/*.{ts,tsx,css}가이드라인에 따라src/styles/tokens.css의@theme토큰을 사용해야 합니다. - 제안:
var(--color-primary-400)대신 토큰 레졸버 함수나@theme기반 색상을 사용하도록 일관성을 맞춰주세요.
3. 접근성 (Accessibility) (Minor)
Line 117-120 의 sr-only 텍스트가 정적입니다.
- 문제: 사용자가 플랫폼을 변경해도 스크린리더는 같은 설명만 다시 읽습니다.
- 제안: 선택된 플랫폼 정보가 포함된 동적 설명으로 업데이트하세요. (예: "현황 - NAVER 플랫폼 클릭수 그래프")
참고: Line 20-23 의 타입 선언(Record<...>) 은 구문 오류가 없으며 정상적인 TypeScript 코드입니다.
🤖 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 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.
Comment on lines
+38
to
+43
| const PLATFORM_SERIES = [ | ||
| { | ||
| name: "클릭수", | ||
| data: NORMALIZED_CLICKS.map((y, i) => ({ x: i, y })), | ||
| }, | ||
| ]; |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy lift
플랫폼 드롭다운이 실제 데이터 필터로 동작하지 않습니다.
비통합 차트는 항상 같은 NORMALIZED_CLICKS를 렌더링해서 NAVER/META/GOOGLE를 골라도 선 모양이 동일합니다. 지금은 색상만 바뀌기 때문에 필터 UI와 실제 결과가 어긋나고, 선택값별 series 매핑을 상수 계층에서 내려주거나 selected 기반으로 series를 계산해야 합니다.
Also applies to: 84-89, 142-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 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.
Comment on lines
95
to
+97
| description={ | ||
| <ChartLegend | ||
| items={[ | ||
| { label: "클릭수", colorClass: "bg-primary-400" }, | ||
| { label: "예측 클릭수", colorClass: "bg-primary-500" }, | ||
| ]} | ||
| <ChartLegend items={[{ label: "클릭수", color: primary }]} /> | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
통합 모드 legend가 실제 series 수와 맞지 않습니다.
LANDING_OVERVIEW_CHART_SERIES는 두 개의 선을 렌더링하는데, legend는 항상 "클릭수" 한 항목만 보여 줍니다. 통합 모드에서는 두 번째 라인을 식별할 수 없습니다.
수정 예시
- description={
- <ChartLegend items={[{ label: "클릭수", color: primary }]} />
- }
+ description={
+ <ChartLegend
+ items={
+ isUnified
+ ? [
+ { label: "클릭수", color: primary },
+ { label: "예측 클릭수", color: secondary },
+ ]
+ : [{ label: "클릭수", color: primary }]
+ }
+ />
+ }Also applies to: 142-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 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.
Comment on lines
+29
to
34
| <span className="shrink-0 px-2.5 py-0.5 rounded-full bg-surface-300 font-caption text-text-muted"> | ||
| 미연동 | ||
| </span> | ||
| <div className="shrink-0 px-3 py-1.5 rounded-xl bg-primary-500 font-body2 text-surface-100"> | ||
| 연동하기 | ||
| </div> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
버튼처럼 보이는 CTA를 div로 두면 접근성이 끊깁니다.
연동하기가 시각적으로는 버튼인데 실제로는 포커스도 안 되고 키보드 조작도 불가능합니다. 실제 액션이면 <button>/<a>로 바꾸고, 단순 목업이면 버튼처럼 보이지 않게 처리해 주세요.
As per path instructions, src/**: 7. 접근성: 시맨틱 HTML, ARIA 속성 사용 확인.
🤖 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/GuidePlatform.tsx` around lines 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.
Source: Path instructions
Comment on lines
+12
to
+31
| <div className="h-75 w-full bg-transparent md:h-90"> | ||
| <div className="h-full rounded-[28px] bg-surface-100 border border-surface-400/60 shadow-Soft overflow-hidden flex flex-col"> | ||
| <div className="flex items-center justify-between px-6 pt-5 pb-3 shrink-0"> | ||
| <p className="font-heading4 text-text-title">팀원 초대하기</p> | ||
| <div className="flex items-center gap-1.5 text-primary-500"> | ||
| <CopyIcon className="w-4 h-4" /> | ||
| <span className="font-body2">링크 복사</span> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="px-6 pb-3 shrink-0"> | ||
| <div className="flex items-center gap-3"> | ||
| <div className="flex-1 h-10 rounded-xl border border-surface-400/70 px-4 flex items-center"> | ||
| <span className="font-body2 text-text-muted"> | ||
| 이메일을 입력해서 팀원을 초대하세요 | ||
| </span> | ||
| </div> | ||
| <div className="shrink-0 px-4 py-2 rounded-xl bg-primary-500 font-body2 text-surface-100"> | ||
| 초대 | ||
| </div> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
목업이라면 보조기기에서 숨기고, 실제 동작이라면 시맨틱 컨트롤로 바꿔야 합니다.
지금은 링크 복사, 이메일 입력 영역, 초대가 모두 일반 div/span으로 노출돼서 버튼/입력처럼 보이지만 키보드 포커스와 역할은 없습니다. 랜딩용 목업이면 루트에 aria-hidden을 주는 편이 낫고, 실제 상호작용을 의도했다면 button/input으로 바꿔 주세요.
As per path instructions, "7. 접근성: 시맨틱 HTML, ARIA 속성 사용 확인."
🤖 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/GuideWorkspace.tsx` around lines 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.
Source: Path instructions
Comment on lines
80
to
+82
| style={{ | ||
| background: | ||
| "linear-gradient(135deg, var(--color-primary-400), var(--color-primary-500))", | ||
| "linear-gradient(135deg, var(--color-primary-300), var(--color-primary-500))", |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify forbidden inline color usage and inspect the repo's existing Tailwind gradient convention.
rg -n --glob 'src/**/*.{ts,tsx}' 'linear-gradient\(|var\(--color-' src
printf '\n--- existing gradient utility patterns ---\n'
rg -n --glob 'src/**/*.{ts,tsx}' 'bg-linear|from-primary-|to-primary-|via-primary-' srcRepository: WhereYouAd/WhereYouAd-Frontend
Length of output: 5097
인라인 var(--*) 그라데이션을 Tailwind 유틸리티 클래스로 교체하세요.
LandingFeatures.tsx의 Line 82 및 Line 192 에서 인라인 style 속성으로 linear-gradient(... var(--color-*) ...)를 사용하고 있어 가이드라인을 위반합니다. 코드베이스 전체 (Button.tsx, TimelinePerformancePanel.tsx 등) 에서 bg-gradient-to-r, from-, to- 형태의 Tailwind 유틸리티 클래스를 일관되게 사용하고 있으므로, 이를 적용하여 통일성을 확보해야 합니다.
// 변경 전
style={{
background: "linear-gradient(135deg, var(--color-primary-300), var(--color-primary-500))"
}}
// 변경 후
className="bg-gradient-to-br from-primary-300 to-primary-500"135deg 방향에 해당하는 bg-gradient-to-br을 사용하거나, 필요에 따라 bg-gradient-to-r 등을 적절히 선택하여 기존 스타일을 유지하세요. style 객체 내에 다른 속성이 없다면 style 자체를 제거하고 className만 사용하세요.
🤖 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/LandingFeatures.tsx` around lines 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.
Source: Coding guidelines
Comment on lines
+111
to
+113
| <li key={item.step} className="flex items-center gap-2.5"> | ||
| <CheckIcon className="w-4 h-4 shrink-0 text-primary-400" /> | ||
| <span className="break-keep font-label text-text-title"> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
체크 아이콘은 장식용이니 보조기기에서 제외해 주세요.
리스트 텍스트가 이미 의미를 전달하고 있어서 SVG가 그대로 노출되면 항목마다 불필요한 graphic announcement가 붙을 수 있습니다. aria-hidden="true"를 주는 편이 안전합니다.
수정 예시
- <CheckIcon className="w-4 h-4 shrink-0 text-primary-400" />
+ <CheckIcon
+ aria-hidden="true"
+ className="w-4 h-4 shrink-0 text-primary-400"
+ />As per path instructions, "7. 접근성: 시맨틱 HTML, ARIA 속성 사용 확인."
📝 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
| <li key={item.step} className="flex items-center gap-2.5"> | |
| <CheckIcon className="w-4 h-4 shrink-0 text-primary-400" /> | |
| <span className="break-keep font-label text-text-title"> | |
| <li key={item.step} className="flex items-center gap-2.5"> | |
| <CheckIcon | |
| aria-hidden="true" | |
| className="w-4 h-4 shrink-0 text-primary-400" | |
| /> | |
| <span className="break-keep font-label text-text-title"> |
🤖 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/LandingGuide.tsx` around lines 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.
Source: Path instructions
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
1 participant
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
New Features
Improved UI