[Refactor] 디자인 시스템 색상 변경 및 Input 컴포넌트 개선

[yummjin]

🛠️ 변경 사항

실제로 어떤 작업을 했는지 구체적으로 작성해주세요.

• UI 수정 (Design)
• 기능 추가 (Feature)
• 버그 수정 (Bug)
• 리팩토링 (Refactor)
• 성능 개선 (Performance)
• 테스트 추가 (Chore)
• 기타:

세부 변경 내용

• theme.css.ts — grayscale 색상 토큰(gray10~gray90) 및 background_sub 디자인 가이드 기준으로 업데이트
• Chip.stories.ts — 리더/멤버 Chip 색상 변경 및 Storybook 문서 업데이트
• Input.tsx / Input.css.ts — Input.Description 컴파운드 컴포넌트 추가, onRemove prop으로 삭제 버튼 지원
• Input.stories.tsx — Input 스토리 추가

---

🔍 관련 이슈

• close [Refactor] 디자인 변경사항 반영 #188

---

📸 스크린샷 / GIF (선택)

UI 변경이 있다면 첨부해주세요.

Before	After

---

⚠️ 주의 사항 / 리뷰 포인트

리뷰어가 특히 봐줬으면 하는 부분이나 고민했던 지점을 작성해주세요.

• Input.Description은 children으로 넘기는 컴파운드 패턴으로 구성되어 있어 글자 수 카운트 등은 사용처에서 직접 관리

---

🔄 연관 작업

[gemini-code-assist]

Code Review

This pull request updates the design system's color palette and enhances the Input component with a remove button and description sub-component. Feedback highlights several issues: a relative import violation, missing accessibility labels and disabled state handling for the remove button, and a hardcoded warning style in the description component. Additionally, the Chip story's argTypes need updating to reflect the new skyblue variant.

[gemini-code-assist]

❌ 위반 사항

• [코드 컨벤션] 상대 경로(../icon/XIcon)를 사용하여 컴포넌트를 임포트하고 있습니다.

🔧 개선 제안

• 레포지토리 스타일 가이드(131라인)의 '절대경로 import' 규칙에 따라 프로젝트에 설정된 경로 별칭(Alias)을 사용하여 절대 경로로 수정해 주세요.

References

1. 모든 import는 절대 경로를 사용해야 합니다. ^(link)

[gemini-code-assist]

❌ 위반 사항

• [접근성] 삭제 버튼(button)에 aria-label이 누락되어 있어 스크린 리더 사용자가 버튼의 용도를 파악할 수 없습니다.
• [로직 오류] Input 컴포넌트가 disabled 상태일 때도 삭제 버튼이 활성화되어 클릭이 가능한 상태입니다.

🔧 개선 제안

• 버튼에 aria-label="삭제" 속성을 추가하고, disabled 상태를 버튼에도 적용하여 일관된 사용자 경험을 제공해야 합니다.

          <button
            type="button"
            className={removeButton}
            onClick={onRemove}
            disabled={disabled}
            aria-label="삭제"
          >
            <XIcon size={16} className={removeButtonIcon} />
          </button>

References

1. 대화형 요소는 스크린 리더 사용자를 위한 적절한 레이블을 가져야 하며, 부모 컴포넌트의 비활성화 상태를 반영해야 합니다.