[Feat] Toast 컴포넌트 제작#18
Merged
Merged
Conversation
Figma Toast 컴포넌트셋(complete/warning/info/error)을 pill 형태로 구현
Semantic/Inverse/Background, Semantic/Primary/Normal, Body 2/Normal-Bold(15px)에 대응하는 토큰이 @kusitms.com/tokens에 없어 근사값으로 구현했음을 기록
|
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:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughChangesToast 컴포넌트, Zustand 기반 상태 관리, ToastProvider 통합, 공개 export를 추가했습니다. 타입별 아이콘·접근성 role·자동 제거를 구현하고 Storybook과 단위 테스트로 렌더링 및 상태 동작을 검증합니다. Toast 시스템
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
CI 결과
|
Container gap 6px + Message frame 좌측 padding 2px = 8px인데 바깥 컴포넌트의 gap 12px(절대위치 배경 레이어와의 간격이라 무관)을 잘못 참조해 gap-3(12px)으로 구현했던 것을 gap-2(8px)로 수정
![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 `@src/components/common/Toast/Toast.test.tsx`:
- Around line 6-31: Toast 메시지의 긴 텍스트 truncate 계약을 회귀 테스트로 추가하세요. 기존 메시지 렌더링
테스트에서 메시지 요소를 식별한 뒤 `min-w-0`, `flex-1`, `truncate` 클래스가 모두 적용됐는지 검증하고, `Toast`의
일반 메시지 렌더링 동작은 그대로 유지하세요.
In `@src/components/common/Toast/Toast.tsx`:
- Line 37: Update the Icon element in the Toast component to include
aria-hidden="true", keeping the existing styling and ensuring the decorative
icon is excluded from the accessibility tree.
- Around line 21-33: Toast 컴포넌트의 props 전개에서 HTMLAttributes의 role을 제외하고, 계산된 role
속성을 {...props} 이후에 적용하세요. type이 error이면 항상 alert, 그 외에는 status가 되도록 하며
className과 나머지 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
Run ID: 22b24c60-6712-4d9b-a476-651e3e5ca2e6
⛔ Files ignored due to path filters (9)
src/assets/icons/generated/ToastCompleteIcon.tsxis excluded by!**/generated/**src/assets/icons/generated/ToastErrorIcon.tsxis excluded by!**/generated/**src/assets/icons/generated/ToastInfoIcon.tsxis excluded by!**/generated/**src/assets/icons/generated/ToastWarningIcon.tsxis excluded by!**/generated/**src/assets/icons/generated/index.tsis excluded by!**/generated/**src/assets/icons/svg-preserve/toast-complete.svgis excluded by!**/*.svg,!**/*.svgsrc/assets/icons/svg-preserve/toast-error.svgis excluded by!**/*.svg,!**/*.svgsrc/assets/icons/svg-preserve/toast-info.svgis excluded by!**/*.svg,!**/*.svgsrc/assets/icons/svg-preserve/toast-warning.svgis excluded by!**/*.svg,!**/*.svg
📒 Files selected for processing (6)
.claude/known-issues/records/toast-missing-design-tokens.mdsrc/components/common/Toast/Toast.stories.tsxsrc/components/common/Toast/Toast.test.tsxsrc/components/common/Toast/Toast.tsxsrc/components/common/Toast/index.tssrc/components/common/index.ts
CI 결과
|
role을 {...props}보다 먼저 지정해 소비자가 role prop을 넘기면
type에 따라 계산된 값(error일 때 alert)이 덮어써질 수 있었음
메시지는 role(status/alert)로 이미 announce되므로 아이콘에 aria-hidden을 추가해 스크린리더 중복 announce 방지
min-w-0/flex-1/truncate가 메시지 요소에 적용되는지 회귀 테스트로 고정
CI 결과
|
KyeongJooni
reviewed
Jul 12, 2026
KyeongJooni
left a comment
KyeongJooni
left a comment
Member
There was a problem hiding this comment.
수고하셨습니다!! 코멘트 확인 부탁드립니다! :)
Member
There was a problem hiding this comment.
각 화면이 토스트 상태 등을 따로 구현하지 않도록 ToastProvider, useToast 같은 공통 세팅까지 하는건 어떨까요?
각 화면이 토스트 노출 상태를 개별 구현하지 않도록 Zustand 기반 전역 store와 useToast 훅, 이를 렌더링하는 ToastProvider를 추가. 위치(우측 하단)/자동 dismiss(4초)/애니메이션 없음은 Figma에 스펙이 없어 임의로 정한 기본값이며, 디자인 확정 시 조정 필요
addToast의 setTimeout 콜백이 removeToast와 동일한 필터 로직을 중복 구현하고 있어 get().removeToast(id) 호출로 통합
CI 결과
|
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/hooks/common/useToast.ts`:
- Around line 18-30: Update addToast in useToastStore to cap the toast list at a
fixed maximum, retaining only the most recent 3–4 toasts after appending the new
item. Preserve the existing IDs and automatic removal behavior.
🪄 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
Run ID: 82d554ca-4641-4734-8216-5d4a05e6388e
📒 Files selected for processing (6)
src/App.tsxsrc/hooks/common/index.tssrc/hooks/common/useToast.test.tssrc/hooks/common/useToast.tssrc/providers/ToastProvider.test.tsxsrc/providers/ToastProvider.tsx
addToast가 개수 제한 없이 계속 쌓이던 것을 slice로 잘라 최근 MAX_TOASTS(4)개만 유지하도록 수정
CI 결과
|
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.
#️⃣ 연관된 이슈
🚧 Work in Progress
📌 주요 변경사항
📝 작업 내용
type(complete/warning/info/error)별 아이콘·role(status/alert) 분기, 배경 blur+틴트 2-layer 구조 구현svg-preserve원본 SVG +generated아이콘 컴포넌트, barrel index 갱신<p>가 flex item 기본min-width: auto때문에 잘리지 않던 문제를min-w-0 flex-1추가로 해결bg-static-black(#000000) →bg-label-normal(#17171a)로 Figma#1B1C1E에 더 근접하게 조정role분기, 아이콘 매핑 검증(9 케이스)Semantic/Inverse/Background,Semantic/Primary/Normal(#0066FF),Body 2/Normal-Bold(15px)에 대응하는 토큰이@kusitms.com/tokens에 없어 근사값을 쓰고 있음을 문서화pnpm exec eslint,pnpm vitest run(Toast 9 tests),pnpm icons:check,pnpm gen:index:check통과. Storybook과 실제 앱(Vite dev) 렌더링으로 Figma 스펙과 시각 대조 완료📸 스크린샷 (선택)
💬 리뷰 요구사항(선택)
bg-brand-primary(#3e5efa)와text-label-14sb(14px)는 Figma 스펙(#0066FF, 15px)과 정확히 일치하는 토큰이 패키지에 없어 근사치로 구현했습니다. 디자인팀 확인 후 토큰이 추가되면 교체가 필요합니다(.claude/known-issues/records/toast-missing-design-tokens.md참고).hug(내용에 맞춰 확장, 잘림 없음)이지만, 실제 알림 스택처럼 폭이 제한되는 사용 맥락을 가정해 truncate를 넣었습니다. 아직 토스트 알림 스택/포지셔닝 컴포넌트가 없어 실제 사용 맥락은 후속 작업에서 확인이 필요합니다.Summary by CodeRabbit