refactor(input): migrate to semantic design tokens and restructure layout to fix dead-click areas

[minjeeki]

Background

Input은 아직 디자인 팀과 정식으로 논의되지 않았고, 현재 SIPE 홈페이지에서도 사용되지 않는 컴포넌트입니다. 이런 상황을 고려했을 때 미래 사용성을 예측해서 기능을 확장하기보다, 디자인 시스템 체계(토큰)에 맞춰 통일시키는 작업을 우선하는 게 맞다고 판단했습니다. 이번 PR은 그 첫 단계로, 임의로 정의해서 쓰던 스타일 값들을 @sipe-team/tokens의 semantic vars로 교체하고, Mantine / Ant Design / Vapor UI 등 주요 라이브러리에서 공통적으로 제공하는 input 스펙을 기준으로 현재 구현의 어긋난 부분(레이아웃 구조, 유효성 상태 표현 등)을 맞추는 데 집중했습니다.

Changes

• Input 스타일을 @sipe-team/tokens의 semantic vars로 교체 (border / background / foreground / spacing / radius / typography)
• fontWeight prop 제거, regular로 고정
• validation prop 추가 (default | error | success) — 보더 스타일만 변경하며, 에러/성공 메시지 표시는 FormField 영역의 책임으로 분리
• 네이티브 readOnly 스타일 추가 (muted 배경으로 disabled와 시각적으로 구분)
• changeset: .changeset/input-semantic-tokens.md

레이아웃 구조 변경

기존에는 div wrapper가 border/padding/focus 스타일을 담당하고 내부 <input>은 투명한 구조였는데, 이 경우 wrapper와 input 사이의 여백에 클릭이 떨어지면 포커스가 잡히지 않는 dead click 영역이 생깁니다. Action 버튼이 있는 케이스에서는 버튼과 input 사이 클릭 시 input이 활성화되지 않을 위험도 있고요.

Ant Design을 제외한 Vapor UI, Mantine은 border/padding/focus 스타일을 input 자체에 두는 방식을 채택하고 있어 이를 따랐습니다.

• wrapper div → span: wrapper는 positioning context 역할만 하고 클릭/포커스 대상이 아니므로, 의미상 presentation 용도인 span이 더 적절하다고 판단했습니다.
• border, padding, focus 스타일을 wrapper → <input>으로 이동: 화면에 보이는 필드 전체 = 실제 입력 영역이 일치하도록 만들어 dead click 문제를 해소했습니다.
• Action 버튼은 기존처럼 input 위에 absolute로 배치하되, input에 trailing padding을 줘서 텍스트/캐럿이 버튼에 가리지 않도록 처리했습니다.

Validation / ReadOnly

• 유효성 상태(default / error / success)에 따른 테두리 스타일 정의
• readOnly 속성 부여 시 노출되는 스타일 정의

Storybook 참고사항

현재 컴포넌트 토큰이 다크모드 기준으로 작업되어 있는데 Storybook 자체는 라이트모드로 렌더링되고 있어, 컴포넌트가 다크모드 배경에서 보이는 것처럼 처리해 정상 동작을 확인할 수 있도록 했습니다. (라이트모드 대응은 별도 이슈로 분리 필요)

Visuals

Checklist

• Have you written the functional specifications?
• Have you written the test code?

Additional Discussion Points

• fontSize API 네이밍(px vs sm/md/lg), fontWeight 재노출 여부는 디자인 싱크 후속으로 진행
• FormField(라벨·메시지 영역)는 별도 작업으로 분리
• warning validation은 이번 범위에서 제외
• Storybook 라이트모드 대응 여부 논의 필요

[changeset-bot]

🦋 Changeset detected

Latest commit: 2ad03a2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@sipe-team/input	Minor
@sipe-team/side	Patch
docs	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

🗂️ Base branches to auto review (2)

• main
• release/v1

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 4a5ea11d-d021-4f47-830f-b48f3256a38a

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch refactor/input-token-minjee

---

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.}

[codecov]

Codecov Report

❌ Patch coverage is 98.09524% with 2 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
packages/input/src/Input.test.tsx	97.59%	2 Missing ⚠️

Files with missing lines	Coverage Δ
packages/input/src/Input.css.ts	100.00% <100.00%> (ø)
packages/input/src/Input.tsx	100.00% <100.00%> (ø)
packages/input/src/Input.test.tsx	98.76% <97.59%> (-1.24%)	⬇️

... and 6 files with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[osohyun0224]

고생많으셨습니당~!

[KYBee]

고생하셨습니다~

[G-hoon]

민지님 이거 error 상태에서 focus 하면 error border ring 사라지는데.
혹시 의도하신걸까요?

[G-hoon]

아래 내용 읽어보면 이게 patch 내용이 아니라
큰 변경인 것 같은데,

minor 로 바꾸는 건 어떨까요?

[G-hoon]

이거 Children.count(false), Children.count(0), Children.count('') 은 1을 반환 합니다.

false, 0, '' 는 전부 타입이 있는 값 입니다.

Boolean(children) 혹은 Children.toArray(children).length > 0 (빈 배열 [] 도 감지한다면)

로 수정해주시면 좋을 것 같습니다.

[minjeeki]

민지님 이거 error 상태에서 focus 하면 error border ring 사라지는데. 혹시 의도하신걸까요?

@G-hoon 넵 맞습니다! Vapor UI에 있던 동작을 참고해서 반영한 내용입니다.

사용자가 에러를 고치려고 focus했을 때 에러 테두리를 그대로 유지하기보다, “지금 수정하면 이 상태를 벗어날 수 있다”는 느낌을 주고 싶었어요. success도 같은 이유로, focus 시 일반 focus 색을 쓰도록 했습니다. 현재 판단이 고정된 게 아니라, 수정하면 언제든 바뀔 수 있다는 신호를 주고 싶었습니다.

다만 이건 제 주관적 판단이고, 일반적인 원칙(error/success 중 focus여도 validation 색 유지)에 맞추는 게 맞을 것 같아 관련해서 error와 success의 border 색으로 맞출 수 있도록 수정했습니다. 그리고 나머지 코멘트 달아주신 사항도 수정 완료했습니다!

사용했던 토큰이 dev에서 변경되어 base -> subtle로 토큰값 변경 내용이 있습니다.

[G-hoon]

흠 말씀들어보니 원래가 나은 것 같기도 하고...

https://mui.com/material-ui/react-text-field/

제가 생각한 건 이것처럼 error 일때도, border 는 유지되고, focus 되면 border 와 같은 색으로 outline 이 보이는 건 어떨까 생각하긴 했는데.

여유되면 디자인팀 피드백 받아보는 것도 괜찮을 것 같긴 한데.
(c.c 시간날 때 봐주시면 좋을 것 같아요 @haedawn )

편하신대로 하시죠~! 머지해도 될 것 같습니다.

[minjeeki]

흠 말씀들어보니 원래가 나은 것 같기도 하고...

https://mui.com/material-ui/react-text-field/

제가 생각한 건 이것처럼 error 일때도, border 는 유지되고, focus 되면 border 와 같은 색으로 outline 이 보이는 건 어떨까 생각하긴 했는데.

여유되면 디자인팀 피드백 받아보는 것도 괜찮을 것 같긴 한데.

(c.c 시간날 때 봐주시면 좋을 것 같아요 @haedawn )

편하신대로 하시죠~! 머지해도 될 것 같습니다.

일단 이 컴포넌트가 디자인팀과 논의되거나 피그마에 저장된 형태가 아니라서...! 일단은 일반적인 형태로 진행하고 나중에 디자인팀 작업 들어올때 같이 고민하는거로 남겨두면 좋을 것 같아요!!

머지하겠습니다!

지훈님 진짜 저는 지훈님을 존경해요. 항상 꼼꼼하게 봐주시고 정말 정말 감사합니다!