feat: add design-system TextInput component

[choihooo]

Summary

Figma input 계열 컴포넌트를 디자인 시스템 공통 컴포넌트로 추가합니다. input bar, title이 있는 input, title이 없는 input_no title 노드를 기준으로 크기, radius, fill, border, inset shadow, caret, helper/counter 상태를 맞췄습니다.

Closes #12

Changes

• TextInput 컴포넌트를 추가하고 bar, field, fieldNoTitle variant를 지원하도록 구현했습니다.
• Figma 상태값에 맞춰 default, focus, type, filled, filledPlus 스타일을 구성했습니다.
• input bar의 335px 고정 폭, 48px 높이, 100px radius, 반투명 fill, border, inset shadow를 반영했습니다.
• type 상태에서 caret, helper text, 글자 수 counter가 표시되도록 추가했습니다.
• field 계열 input의 기본 20자 제한을 실제 maxLength에 적용하고, helper/counter를 aria-describedby로 input에 연결했습니다.
• filledPlus plus affordance는 onPlusClick이 있을 때만 button으로 렌더링하고, 없으면 decorative icon으로 렌더링하도록 정리했습니다.
• Storybook Playground를 Figma 컴포넌트 세트별로 분리해 불가능한 variant/state 조합을 선택하지 않도록 했습니다.
• @comma/design-system root export에 TextInput과 관련 타입을 추가했습니다.

Verification

• pnpm lint
• pnpm typecheck
• pnpm build --filter=@comma/web
• pnpm build:storybook

Notes

• pnpm lint는 통과하지만, 기존 apps/web/public/images/onboardingBackground*.svg 2개가 Biome max size warning을 냅니다.
• pnpm build:storybook는 통과하지만, Storybook 번들에서 기존 large chunk warning이 표시됩니다.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
comma-front-web	Ready	Preview, Comment	Jun 27, 2026 7:49am

[coderabbitai]

Warning

Review limit reached

@choihooo, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 14 minutes and 47 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 @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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 configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 3323eff7-f720-47ec-aea8-c5883b78c819

📥 Commits

Reviewing files that changed from the base of the PR and between 5d80e7a and 0169d62.

📒 Files selected for processing (4)

• apps/storybook/src/TextInput.stories.tsx
• packages/design-system/src/TextInput.css.ts
• packages/design-system/src/TextInput.tsx
• packages/design-system/src/index.ts

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/12-text-input

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}