style: DS CORE v2 반영 — accent 컬러 Sky blue 전환 및 컴포넌트 수정 - #357
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Discord 스레드 연동용 메타데이터입니다. discord-pr-bot 워크플로가 자동 생성하며, 수정·삭제하면 PR 과 Discord 알림 연동이 끊깁니다. |
|
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:
📝 WalkthroughWalkthroughSky blue 디자인 토큰과 시맨틱 색상이 추가·전환되었으며, 버튼·상태 칩·토너먼트 카드·프로필 그룹·매치 화면 및 주요 화면의 스타일이 업데이트되었습니다. ChangesCORE v2 디자인 및 컴포넌트 변경
Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 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
`@apps/web/src/app/tournament/`[id]/create/_components/deposit-countdown/DepositCountdown.tsx:
- Line 16: Remove the duplicated container styling between DepositCountdown and
the ParticipantPanel wrapper: make DepositCountdown’s root layout-only or remove
the matching styling from its parent, while preserving a single rounded sky-blue
background and padding layer for the rendered pill.
In `@apps/web/src/app/tournament/`[id]/match/_components/RoundTransitionSheet.tsx:
- Around line 262-266: Update the blue bracket connector near the
RoundTransitionSheet card styling to replace the hardcoded `#9DC3F9` with the same
sky-blue-200 palette token used for the blue card state. Keep the connector’s
existing layout and behavior unchanged so both cards and bracket lines use a
consistent color.
In `@apps/web/src/components/status-chip/statusChip.style.ts`:
- Line 12: Update the COMPLETED entry in the status-chip style mapping to use a
darker semantic text token, such as sky-blue-700, while preserving the existing
sky-blue-50 background and other status 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: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 3333efe9-7e96-4e68-87c0-ab5833ab3b5a
⛔ Files ignored due to path filters (1)
apps/web/src/assets/images/user-profile-blue.svgis excluded by!**/*.svg
📒 Files selected for processing (23)
apps/web/src/app/archive/tournament/_components/TournamentHistoryList.tsxapps/web/src/app/archive/wish/_components/wish-grid/index.tsxapps/web/src/app/home/_components/tournament-list/client.tsxapps/web/src/app/notification/_components/NotificationItem.tsxapps/web/src/app/tournament/[id]/create/_components/deposit-countdown/DepositCountdown.tsxapps/web/src/app/tournament/[id]/create/_components/invite-friends/InviteFriendsDialog.tsxapps/web/src/app/tournament/[id]/create/_components/participant-panel/ParticipantPanel.tsxapps/web/src/app/tournament/[id]/create/_components/tournament-header/TournamentGuidePopover.tsxapps/web/src/app/tournament/[id]/create/_components/tournament-item-basket-status/TournamentItemBasketStatus.tsxapps/web/src/app/tournament/[id]/create/by-wish/_components/WishSelectCard.tsxapps/web/src/app/tournament/[id]/loading/_components/LoadingBar.tsxapps/web/src/app/tournament/[id]/match/_components/FinalProductCard.tsxapps/web/src/app/tournament/[id]/match/_components/ProductCard.tsxapps/web/src/app/tournament/[id]/match/_components/RoundTransition.tsxapps/web/src/app/tournament/[id]/match/_components/RoundTransitionSheet.tsxapps/web/src/app/tournament/[id]/match/_components/TournamentClient.tsxapps/web/src/app/tournament/[id]/match/_components/VsSection.tsxapps/web/src/components/button/button.style.tsapps/web/src/components/status-chip/index.tsxapps/web/src/components/status-chip/statusChip.style.tsapps/web/src/components/tournament-card/index.tsxapps/web/src/components/user-profile-group/index.tsxapps/web/src/styles/globals.css
💤 Files with no reviewable changes (2)
- apps/web/src/app/home/_components/tournament-list/client.tsx
- apps/web/src/app/archive/tournament/_components/TournamentHistoryList.tsx
|
|
||
| return ( | ||
| <div className="flex items-center justify-center gap-1.5 text-text-accent"> | ||
| <div className="flex items-center justify-center gap-1.5 rounded-lg bg-sky-blue-50 py-1 pr-3 pl-2 text-text-accent"> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
부모와 자식이 동일한 배경 컨테이너를 중첩합니다.
ParticipantPanel.tsx의 Line 73-75에서도 DepositCountdown을 rounded-lg bg-sky-blue-50과 패딩으로 감싸므로, 이 경로에서는 배경·라운딩·패딩이 이중 적용되어 중첩된 pill UI가 렌더링됩니다. 스타일 소유권을 한 레이어로 통일해 주세요. 예를 들어 DepositCountdown을 레이아웃 전용으로 유지하거나, 부모 래퍼를 제거해야 합니다.
🤖 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
`@apps/web/src/app/tournament/`[id]/create/_components/deposit-countdown/DepositCountdown.tsx
at line 16, Remove the duplicated container styling between DepositCountdown and
the ParticipantPanel wrapper: make DepositCountdown’s root layout-only or remove
the matching styling from its parent, while preserving a single rounded sky-blue
background and padding layer for the rendered pill.
iOdiO89
reviewed
Jul 20, 2026
Comment on lines
+385
to
+386
| className="text-[20px] leading-7 font-bold tracking-[-0.6px]" | ||
| style={{ color: '#1F7AF9' }} | ||
| style={{ color: 'var(--color-text-accent)' }} |
Contributor
There was a problem hiding this comment.
여기는 왜 tailwind 안쓰고 inline 스타일이야??
Contributor
Author
There was a problem hiding this comment.
원래 inline으로 되어있던거 토큰만 적용했는데 수정해둘게!
|
|
||
| const vsBadgeColor = isFinal ? 'bg-[#1F7AF9]' : 'bg-gray-800'; | ||
| // DS VS Divider 는 단일 스타일 (bg/neutral/secondary) — 결승 분기 없음 | ||
| const vsBadgeColor = 'bg-bg-neutral-secondary'; |
This was referenced Jul 20, 2026
Merged
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.
작업 요약
작업 세부 내용
토큰 (globals.css)
--color-sky-blue-50~950팔레트 신규 추가bg/accent→sky 500,text/accent→sky 600,border/accent→sky 400,icon/accent→sky 500bg/neutral/tertiary: gray-300 → gray-75컴포넌트
bg-neutral-tertiary+text-neutral-secondary/ Pressed·Disabled gray-50, 보더 삭제플레이→플레이 중, 완료 칩 sky-blue-50 + text/accent, 고정폭 제거(hug)UserProfileGroup에 size prop 추가), 날짜 제거bg/accent, 미선택black/8— 위시 그리드·by-wish 선택 카드 2곳하드코딩 blue 일괄 정리
bg-blue-500→bg-bg-accent, 라운드 전환(파이어·숫자·링)·가이드 팝오버 → 시멘틱 토큰#ECF3FE계열 → sky-blue-50 계열bg/neutral/secondary)로 통일범위 제외 / 확인 포인트
연관 이슈
closes #355
closes #337
Summary by CodeRabbit