[CHORE] 디자인 아이콘 세트 SVG 추가#68
Conversation
- 디자인 아이콘 세트 SVG 원본 파일을 추가했습니다 - 아이콘 렌더링을 확인할 수 있는 Storybook 전시 스토리를 추가했습니다
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (5)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
WalkthroughStorybook용 아이콘 스토리가 추가되었고, 빌드 스크립트는 Storybook 실행 전에 아이콘 생성이 먼저 되도록 변경되었습니다. 아이콘은 그리드로 렌더링되며 각 이름이 함께 표시됩니다. ChangesIcons 스토리 구현
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related PRs
Suggested labels: Suggested reviewers: 짧고 단정하네요. 아이콘이 이제 Storybook 무대에 제대로 올라섰습니다. 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
Timo Performance ReportBundle Size — timo-web
Lighthouse — timo-web
Image Optimization — timo-web
측정 커밋: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
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 `@packages/timo-design-system/src/icons/Icons.stories.tsx`:
- Line 1: The Storybook build for Icons.stories.tsx is failing because it
imports Icons from ./index, but that generated module is missing in CI. Update
the Chromatic/Storybook pipeline so pnpm icons:generate runs before the
Storybook build step, or change the workflow to use a committed generated index
instead of a gitignored file. Verify the fix against the Icons.stories.tsx
import and the generated packages/timo-design-system/src/icons/index entry so
the build can resolve the module consistently.
🪄 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: 50bff191-14fb-49fc-bb39-4fe4606a6a63
⛔ Files ignored due to path filters (44)
packages/timo-design-system/src/icons/source/ai-default.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/ai-white.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/calendar-blue.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/calendar-disable.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/calendar-on.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/chart-hover.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/chart-off.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/chart-on.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/chevron-down.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/chevron-left.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/chevron-right.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/chevron-up.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/clock-blue.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/clock-disable.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/clock-on.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/delete.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/dot-click.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/dot-disable.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/dot-on.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/home-hover.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/home-off.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/home-on.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/memo-disable.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/memo-on.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/plus.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/repeat-blue.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/repeat-disable.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/repeat-on.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/repeat-todo-disable.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/repeat-todo-on.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/setting-hover.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/setting-off.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/setting-on.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/sidebar-left.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/sidebar-right.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/timer-hover.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/timer-off.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/timer-on.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/today-hover.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/today-off.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/today-on.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/trash-blue.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/trash-disable.svgis excluded by!**/*.svgpackages/timo-design-system/src/icons/source/trash-on.svgis excluded by!**/*.svg
📒 Files selected for processing (1)
packages/timo-design-system/src/icons/Icons.stories.tsx
| @@ -0,0 +1,50 @@ | |||
| import * as Icons from "./index"; | |||
There was a problem hiding this comment.
🎯 Functional Correctness | 🔴 Critical | 🏗️ Heavy lift
빌드가 깨져요! ./index 못 찾는다는 파이프라인 로그가 빨간불을 켜고 있습니다. 🚨
Chromatic 빌드 로그에 [UNRESOLVED_IMPORT]: Could not resolve './index'가 명확히 찍혀 있습니다. PR 설명에 따르면 icons/index.ts는 pnpm icons:generate로 생성되고 .gitignore 처리되어 있는데, CI 파이프라인이 Storybook 빌드 전에 이 생성 스텝을 실행하지 않는 것으로 보입니다.
CI 워크플로우(Chromatic 빌드 스텝)에 pnpm icons:generate 실행을 Storybook 빌드보다 먼저 추가하거나, 생성 산출물을 커밋 대상으로 전환하는 방안을 검토해주세요. Storybook 관련 공식 문서도 참고하시면 좋을 것 같아요: Storybook builders.
🧰 Tools
🪛 GitHub Actions: Chromatic / 0_chromatic.txt
[error] 1-1: Storybook build failed with [UNRESOLVED_IMPORT]: Could not resolve './index' imported by Icons.stories.tsx.
🪛 GitHub Actions: Chromatic / chromatic
[error] 1-1: Storybook build (vite) failed with [UNRESOLVED_IMPORT]: Could not resolve './index' imported from src/icons/Icons.stories.tsx.
[error] 1-1: Command failed with exit code 1: pnpm run build:storybook --output-dir=/tmp/chromatic--2419-jh3npLtCBzto --stats-json=/tmp/chromatic--2419-jh3npLtCBzto
🤖 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 `@packages/timo-design-system/src/icons/Icons.stories.tsx` at line 1, The
Storybook build for Icons.stories.tsx is failing because it imports Icons from
./index, but that generated module is missing in CI. Update the
Chromatic/Storybook pipeline so pnpm icons:generate runs before the Storybook
build step, or change the workflow to use a committed generated index instead of
a gitignored file. Verify the fix against the Icons.stories.tsx import and the
generated packages/timo-design-system/src/icons/index entry so the build can
resolve the module consistently.
Source: Pipeline failures
- Chromatic CI가 generated 아이콘 파일 없이 storybook build를 실행해 실패하던 문제를 수정했습니다 - build:storybook 스크립트가 icons:generate를 먼저 실행하도록 변경했습니다
ehye1
left a comment
ehye1
left a comment
There was a problem hiding this comment.
아이콘이 40개가 넘었다니 👀
근데 btn_add task에 있는 plusIcon이랑 첨부한 아이콘이랑 컬러가 다른데 상관없나요??
우와 잠시만요.. |
- 회색 plus 아이콘 원본 파일을 추가했습니다
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (1)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
WalkthroughStorybook용 아이콘 스토리가 추가되었고, 빌드 스크립트는 Storybook 실행 전에 아이콘 생성이 먼저 되도록 변경되었습니다. 아이콘은 그리드로 렌더링되며 각 이름이 함께 표시됩니다. ChangesIcons 스토리 구현
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related PRs
Suggested labels: Suggested reviewers: 짧고 단정하네요. 아이콘이 이제 Storybook 무대에 제대로 올라섰습니다. 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
ehye1
left a comment
ehye1
left a comment
There was a problem hiding this comment.
굿굿 일단 피그마에 있는 거 다 들어간 것 같아요!!🫰🏻
- end-black, end-blue, play-timer, plus-blue 아이콘 원본 파일을 추가했습니다
kimminna
left a comment
kimminna
left a comment
There was a problem hiding this comment.
엄.청.난 수작업
고생했숴영!
어차피 더 추가될 것 같으니 그때그때 아이콘 없으면 추가해서 작업합시다
yumin-kim2
left a comment
yumin-kim2
left a comment
There was a problem hiding this comment.
아이콘들이 아름답게 들어가있네요...🫰🏻 덕분에 작업이 편해질 것 같아요!! 너무 수고하셨습니다 !!!!!!👍👍
4 participants
ISSUE 🔗
close #67
What is this PR? 🔍
디자인 아이콘 44종의 SVG 원본을 추가하고, SVGR로 생성되는 컴포넌트를 Storybook에서 한눈에 확인할 수 있는 전시 스토리를 추가했습니다. 그 과정에서 발견된 Chromatic CI 빌드 실패도 함께 수정했습니다.
배경
icons/source에play.svg하나만 존재했고, SVGR 빌드 파이프라인(icons:generate)만 구성되어 있었습니다 ([CHORE] SVGR 세팅 #54).아이콘 소스 파일
icons/source에 44개의 svg 파일을 kebab-case 네이밍으로 추가했습니다.Ic_dot_click,Ic_repeat_ON처럼 PascalCase·언더스코어·대소문자가 혼용돼 있어 프로젝트의 kebab-case 네이밍 컨벤션과 맞지 않았고, 불필요한ic접두사도 포함돼 있었습니다.ic접두사를 제거하고 전체를 소문자 kebab-case로 통일했습니다. 이후pnpm icons:generate(SVGR)를 실행해icons/generated/*.tsx와icons/index.ts를 재생성했습니다. 두 산출물은 이미 gitignore 대상([CHORE] SVGR 세팅 #54)이라 이번 커밋에는 포함되지 않았고, 리뷰어가 로컬에서 확인하려면 동일 명령을 실행해야 합니다.Storybook 전시
icons/Icons.stories.tsx를 추가해 생성된 아이콘 컴포넌트를 한 화면에서 확인할 수 있도록 했습니다.Color/Typography토큰 전시 스토리와 동일한 패턴(render()기반,title: "Tokens/*")을 따랐습니다.icons/index.ts의 export를 모두 순회하며grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))로 렌더링합니다. 초기에는 컨테이너에width지정이 없어 세로로만 길게 나열되는 문제가 있어width: 100%를 추가해 가로 공간도 채우도록 수정했습니다.Chromatic CI 빌드 수정
build:storybook스크립트가icons:generate를 먼저 실행하도록 수정했습니다.icons/index.ts는 gitignore 대상이라 CI의 클린 체크아웃에는 존재하지 않는데, 기존build:storybook(storybook build)은 이를 생성하는 과정 없이 바로 빌드를 시도해Icons.stories.tsx의./indeximport를 resolve하지 못하고 실패했습니다.check-types,build태스크는 이미icons:generate를 선행 의존성으로 갖고 있었지만([CHORE] SVGR 세팅 #54),build:storybook에는 빠져 있었습니다.build:storybook을"pnpm icons:generate && storybook build"로 변경했습니다. Chromatic 워크플로우는chromaui/action에서 이 스크립트를 turbo 없이 직접 실행하기 때문에, turbo.json의 태스크 의존성이 아니라 스크립트 자체에서 선행 실행하도록 했습니다.To Reviewers
icons/generated/*.tsx,icons/index.ts는 gitignore 대상이라 이 PR의 diff에는 보이지 않습니다. 리뷰 시pnpm icons:generate를 로컬에서 실행한 뒤 Storybook의Tokens/Icons스토리로 44개 아이콘이 모두 정상 렌더링되는지 확인해 주세요. 실제 컴포넌트에서 아이콘을 사용하는 작업은 이번 PR 범위에 포함되지 않았습니다.혹시 아이콘 뺴먹은게 있다면 말해주세요-!
Screenshot 📷
Test Checklist ✔
pnpm --filter @repo/timo-design-system check-types통과pnpm --filter @repo/timo-design-system lint통과pnpm icons:generate실행 → 45개 아이콘 컴포넌트 생성 확인Tokens/Icons스토리에서 렌더링 확인icons/index.ts,icons/generated삭제 후pnpm run build:storybook재실행 → CI와 동일한 클린 상태에서 빌드 성공 확인pnpm build— 미실행: CI에서 확인 예정