Checkbox/CheckboxGroup invalid 상태 텍스트 색상 수정 및 tone 정책 반영

[yolophg]

변경사항

• invalid 상태에서도 라벨 텍스트는 기본 색상 유지
• CheckboxGroup에 helperText prop 추가
• invalid 상태에서만 에러 메시지와 아이콘 노출
• tone 타입을 brand, neutral로 제한

테스팅

• 기본 상태: 옵션 텍스트는 기본 색상으로 노출
• invalid 상태: 옵션 텍스트는 기본 색상을 유지하고, 하단 helperText로 에러 메시지 노출

체크 리스트

• 코드 리뷰를 요청하기 전에 반드시 CI가 통과하는지 확인해주세요.
• 컴포넌트나 스토리 변경이 있는 경우 PR에 ui 태그를 달아주세요.
  • UI Tests를 통해 스냅샷 차이가 의도된 것인지 확인해주세요.
  • UI Review를 통해 디자이너에게 리뷰를 요청하고 승인을 받으세요.

[dalestudy]

⚠️ Week 설정이 누락되었습니다

프로젝트에서 Week를 설정해주세요!

설정 방법

1. PR 우측의 Projects 섹션에서 리트코드 스터디 옆 드롭다운(▼) 클릭
2. 현재 주차를 선택해주세요 (예: Week 14(current) 또는 Week 14)

📚 자세한 가이드 보기

---

🤖 이 댓글은 GitHub App을 통해 자동으로 작성되었습니다.

[DaleSeo]

#962 (comment) 관련해서는 AI 스터디에 이슈 제보했습니다. DaleStudy/github#24

[DaleSeo]

자매 컴포넌트인 <RadioGroup/>와 구현과 일관적인지 않은 부분들이 좀 있어서 피드백드렸습니다. 이제 우리 디자인 시스템에 컴포넌트의 수가 꽤 늘었으니, 작업 대상 컴포넌트를 넘어서 관련 컴포넌트도 함께 살피주시면 좋을 것 같습니다.

[DaleSeo]

<RadioGroup/>에서는 helperText가 있을 때 aria-describedby로 에러 메시지를 연결합니다. 이 연결이 빠지면 스크린 리더가 에러 메시지를 체크박스 그룹과 자동으로 연관짓지 못합니다. role="alert"만으로는 메시지가 "어떤 필드"의 에러인지 전달되지 않습니다.

daleui/src/components/RadioGroup/RadioGroup.tsx

Lines 79 to 93 in 4eabb97

	const helperTextId = `${useId()}-helper-text`;
	return (
	<RadioGroupContext.Provider value={{ tone, disabled, invalid, required }}>
	<ArkRadioGroup.Root
	name={name}
	defaultValue={defaultValue}
	value={value}
	onValueChange={(details) => {
	if (details.value) onChange?.(details.value);
	}}
	disabled={disabled}
	orientation={orientation}
	className={radioGroupRootStyles}
	aria-describedby={helperText ? helperTextId : undefined}

[DaleSeo]

lucide-react에서 CircleAlert을 직접 import하고, 크기를 CSS로 직접 지정하고 있습니다. 디자인 시스템 내 일괄적인 아이콘 사용 일관성을 위해 Icon 컴포넌트를 사용하는 것이 좋겠습니다.

daleui/src/components/RadioGroup/RadioGroup.tsx

Line 6 in 4eabb97

import { Icon } from "../Icon/Icon";

[DaleSeo]

<RadioGroup/>는 helperText만 있으면 invalid 여부와 무관하게 항상 노출합니다. 두 컴포넌트의 동작이 다르면 혼란스러운 사용자 경험이 될 것 같습니다.

daleui/src/components/RadioGroup/RadioGroup.tsx

Lines 125 to 134 in 4eabb97

	{helperText && (
	<div
	id={helperTextId}
	className={flex({
	alignItems: "center",
	gap: "4",
	paddingLeft: "4",
	marginTop: "4",
	})}
	>

[DaleSeo]

named import에서 default import로 변경하신 이유가 있으신가요?

[DaleSeo]

optional prop의 기본값은 이미 undefined이므로 명시할 필요가 없습니다. Storybook Controls 패널에서 보이게 하려는 의도라면 argTypes에서 control을 지정하는 게 더 명확합니다.