feat: 디자인 시스템 에셋 및 폰트 추가#6
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
More reviews will be available in 35 minutes and 5 seconds. Learn how PR review limits work. Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file). ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits. 🚦 How do rate limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (6)
📝 WalkthroughWalkthroughDesign-system asset typing, manifest exports, font declarations, theme tokens, and component styles were updated. Storybook now renders the new assets and revised tokens. Mobile, web, and root package scripts were changed to use a new device-oriented dev flow, and the README command docs were rewritten. ChangesDesign system, Storybook, and device dev flow
Sequence Diagram(s)sequenceDiagram
participant Developer
participant RootPackage as root package.json
participant DevScript as scripts/dev-device.sh
participant WebApp as `@comma/web`
participant MobileShell as `@comma/mobile-shell`
Developer->>RootPackage: pnpm dev:device
RootPackage->>DevScript: run ./scripts/dev-device.sh
DevScript->>DevScript: source .env and set EXPO_PUBLIC_WEB_URL
DevScript->>WebApp: pnpm --filter `@comma/web` dev
DevScript->>MobileShell: pnpm --filter `@comma/mobile-shell` dev
DevScript-->>Developer: wait for both processes to exit
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~30 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 3❌ Failed checks (2 warnings, 1 inconclusive)
✅ Passed checks (2 passed)
✨ Finishing Touches🧪 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 |
choihooo
force-pushed
the
feature/3-design-system-assets
branch
from
9bee84c to
65dba06
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/storybook/src/DesignTokens.stories.tsx (1)
124-167: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winRender the radius tokens or rename this section.
This section advertises
Radius, andradiiis imported, but the story never iterates those tokens. That leaves one token group missing from the catalog this PR is adding.Proposed fix
<div style={gridStyle}> {Object.entries(grid).map(([name, value]) => ( <div key={name} style={{ padding: 16, borderRadius: radii.md, background: vars.color.backgroundFill, border: `1px solid ${vars.color.lineTertiary}` }} > <strong style={typography.labelNormalB}>{name}</strong> <div style={{ ...typography.captionR, color: vars.color.textSecondary }}> {value} </div> </div> ))} + {Object.entries(radii).map(([name, value]) => ( + <div + key={name} + style={{ + padding: 16, + borderRadius: radii.md, + background: vars.color.backgroundFill, + border: `1px solid ${vars.color.lineTertiary}` + }} + > + <strong style={typography.labelNormalB}>{name}</strong> + <div style={{ ...typography.captionR, color: vars.color.textSecondary }}> + {value} + </div> + </div> + ))} {Object.entries(spacing).map(([name, value]) => (🤖 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/storybook/src/DesignTokens.stories.tsx` around lines 124 - 167, The “Grid / Spacing / Radius / Shadow” story is missing the Radius token group even though `radii` is imported and the section title advertises it. Update the `DesignTokens.stories.tsx` story by adding a `radii` iteration alongside the existing `grid`, `spacing`, and `shadows` mappings, using `radii` values to render each token; if you don’t want to display them here, rename the section title to remove Radius.
🤖 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/design-system/src/components.css.ts`:
- Around line 21-25: The `eyebrow`/system text styles are only copying a few
typography fields, so they miss the full `typography.systemSection` token set
and keep inheriting the body font. Update the affected style blocks in
`components.css.ts` to apply the complete typography token object for
`typography.systemSection` (and the other affected variants at the referenced
sections) instead of cherry-picking individual fields, so `fontFamily`,
`letterSpacing`, and the Outfit face are all preserved.
In `@scripts/dev-device.sh`:
- Around line 35-43: The dev-device launcher currently waits for both background
jobs, which keeps the script alive even if one child exits early. Update the
control flow in the dev-device script around the WEB_PID and MOBILE_PID handling
so it exits as soon as either `@comma/web` or `@comma/mobile-shell` stops, then
ensure the other process is terminated and the existing cleanup trap still runs.
---
Outside diff comments:
In `@apps/storybook/src/DesignTokens.stories.tsx`:
- Around line 124-167: The “Grid / Spacing / Radius / Shadow” story is missing
the Radius token group even though `radii` is imported and the section title
advertises it. Update the `DesignTokens.stories.tsx` story by adding a `radii`
iteration alongside the existing `grid`, `spacing`, and `shadows` mappings,
using `radii` values to render each token; if you don’t want to display them
here, rename the section title to remove Radius.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: 337c36d6-612c-45f8-80bb-3e91c884f4f6
⛔ Files ignored due to path filters (13)
packages/design-system/assets/fonts/kepler-std/KeplerStd-BoldScnDisp.woffis excluded by!**/*.woffpackages/design-system/assets/fonts/kepler-std/KeplerStd-BoldScnItDisp.woffis excluded by!**/*.woffpackages/design-system/assets/fonts/outfit/Outfit-latin-variable.woff2is excluded by!**/*.woff2packages/design-system/assets/fonts/pretendard/Pretendard-ExtraLight.woff2is excluded by!**/*.woff2packages/design-system/assets/fonts/pretendard/Pretendard-Light.woff2is excluded by!**/*.woff2packages/design-system/assets/fonts/pretendard/Pretendard-Medium.woff2is excluded by!**/*.woff2packages/design-system/assets/fonts/pretendard/Pretendard-Regular.woff2is excluded by!**/*.woff2packages/design-system/assets/fonts/pretendard/Pretendard-SemiBold.woff2is excluded by!**/*.woff2packages/design-system/assets/logos/symbol-default.pngis excluded by!**/*.pngpackages/design-system/assets/logos/symbol-glass.pngis excluded by!**/*.pngpackages/design-system/assets/logos/type-default.pngis excluded by!**/*.pngpackages/design-system/assets/logos/type-glass.pngis excluded by!**/*.pngpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (14)
README.mdapps/mobile-shell/index.tsapps/mobile-shell/package.jsonapps/storybook/src/Assets.stories.tsxapps/storybook/src/Button.stories.tsxapps/storybook/src/DesignTokens.stories.tsxapps/web/package.jsonpackage.jsonpackages/design-system/src/assets.tspackages/design-system/src/components.css.tspackages/design-system/src/font-assets.d.tspackages/design-system/src/index.tspackages/design-system/src/theme.css.tsscripts/dev-device.sh
| color: vars.color.textTertiary, | ||
| fontSize: vars.typography.systemSection.fontSize, | ||
| fontWeight: vars.typography.systemSection.fontWeight, | ||
| lineHeight: vars.typography.systemSection.lineHeight, | ||
| textTransform: 'uppercase' |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Apply the full typography tokens here.
These styles cherry-pick only fontSize/fontWeight/lineHeight, so they drop token fields like fontFamily and letterSpacing. Most visibly, eyebrow still inherits vars.font.body, so the new Outfit face from typography.systemSection never applies.
Proposed fix
export const eyebrow = style({
margin: `0 0 ${vars.space[3]}`,
color: vars.color.textTertiary,
- fontSize: vars.typography.systemSection.fontSize,
- fontWeight: vars.typography.systemSection.fontWeight,
- lineHeight: vars.typography.systemSection.lineHeight,
+ ...vars.typography.systemSection,
textTransform: 'uppercase'
});
export const title = style({
margin: 0,
- fontSize: vars.typography.engNum.fontSize,
- lineHeight: vars.typography.engNum.lineHeight,
- fontFamily: vars.typography.engNum.fontFamily,
- fontWeight: vars.typography.engNum.fontWeight
+ ...vars.typography.engNum
});
export const description = style({
margin: `${vars.space[6]} 0 ${vars.space[7]}`,
color: vars.color.textSecondary,
- fontSize: vars.typography.bodyNormalR.fontSize,
- fontWeight: vars.typography.bodyNormalR.fontWeight,
- lineHeight: vars.typography.bodyNormalR.lineHeight
+ ...vars.typography.bodyNormalR
});
export const actionButton = recipe({
base: {
minHeight: 44,
border: 0,
borderRadius: vars.radius.control,
padding: '0 18px',
font: 'inherit',
- fontSize: vars.typography.bodyNormalB.fontSize,
- fontWeight: vars.typography.bodyNormalB.fontWeight,
- lineHeight: vars.typography.bodyNormalB.lineHeight,
+ ...vars.typography.bodyNormalB,Also applies to: 30-41, 51-53
🤖 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/design-system/src/components.css.ts` around lines 21 - 25, The
`eyebrow`/system text styles are only copying a few typography fields, so they
miss the full `typography.systemSection` token set and keep inheriting the body
font. Update the affected style blocks in `components.css.ts` to apply the
complete typography token object for `typography.systemSection` (and the other
affected variants at the referenced sections) instead of cherry-picking
individual fields, so `fontFamily`, `letterSpacing`, and the Outfit face are all
preserved.
| trap cleanup INT TERM EXIT | ||
|
|
||
| pnpm --filter @comma/web dev:device & | ||
| WEB_PID=$! | ||
|
|
||
| pnpm --filter @comma/mobile-shell dev:device & | ||
| MOBILE_PID=$! | ||
|
|
||
| wait "$WEB_PID" "$MOBILE_PID" |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
sed -n '25,60p' scripts/dev-device.sh
printf '\n--- related script contract ---\n'
sed -n '1,20p' package.json
sed -n '1,20p' apps/web/package.json
sed -n '1,20p' apps/mobile-shell/package.jsonRepository: Central-MakeUs/comma-Front
Length of output: 2366
🏁 Script executed:
python3 - <<'PY'
import subprocess, time, textwrap, os, tempfile, sys
script = r'''
#!/bin/sh
sleep 1 &
p1=$!
sleep 5 &
p2=$!
start=$(date +%s)
wait "$p1" "$p2"
rc=$?
end=$(date +%s)
echo "rc=$rc elapsed=$((end-start))"
'''
p = subprocess.run(["/bin/sh", "-c", script], capture_output=True, text=True)
print(p.stdout.strip())
print(p.stderr.strip(), file=sys.stderr)
PYRepository: Central-MakeUs/comma-Front
Length of output: 180
Exit when the first child exits
wait "$WEB_PID" "$MOBILE_PID" blocks until both processes stop. If @comma/web exits early, @comma/mobile-shell keeps running and the EXIT trap never fires, leaving dev:device stuck in a half-broken state.
🤖 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 `@scripts/dev-device.sh` around lines 35 - 43, The dev-device launcher
currently waits for both background jobs, which keeps the script alive even if
one child exits early. Update the control flow in the dev-device script around
the WEB_PID and MOBILE_PID handling so it exits as soon as either `@comma/web` or
`@comma/mobile-shell` stops, then ensure the other process is terminated and the
existing cleanup trap still runs.
2 participants
Summary
Figma 기반 디자인 시스템 토큰, 로고 에셋, 폰트 로딩, Storybook 카탈로그를 추가합니다. 실기기 확인 흐름도 Expo Go 기준으로 정리했습니다.
Closes #3
Changes
designAssetsmanifest 추가@font-face등록pnpm dev:device로 웹 서버와 Expo Go 서버를 함께 실행하도록 정리Verification
pnpm lintpnpm typecheckpnpm build --filter=@comma/webpnpm build:storybookpnpm --filter @comma/mobile-shell exec expo install --checkNotes
.gitignore에는 기존 로컬 변경이 남아 있어 이 PR 커밋 범위에서는 제외했습니다.Summary by CodeRabbit
New Features
Bug Fixes
Documentation