refactor: ref가 prop으로 자동전달 componentPropsWithRef 사용

[seongihun]

🎯 작업 내용

• 구현한 기능 설명
• ButtonLabel은 **버튼 + 버튼 안에 글자(라벨)**가 한 덩어리로 들어있습니다.
• 버튼에 아이콘도 넣을 수 있고, 클릭 이벤트나 disabled 같은 버튼 기능도 그대로 사용 가능

✅ 체크리스트

• 코드 리뷰 요청
• 테스트 완료
• 문서 업데이트

📸 스크린샷 (선택사항)

💬 추가 설명

ButtonLabel과 Button 분리

ButtonLabel은 버튼 + 라벨 한 덩어리

Button은 순수한 버튼 기능만 담당

ComponentPropsWithRef 사용

버튼 props와 ref 타입을 안전하게 체크

React 19.2.3 기준에서 forwardRef 없이도 안전하게 ref 전달 가능

children + label 동시에 지원

label로 텍스트를 넣거나, children으로 추가 내용도 넣을 수 있음

{/* 버튼 라벨 사용 예시 */}

[seongihun]

/gemini-code-assist 코드 리뷰

[gemini-code-assist]

Code Review

전반적으로 훌륭한 리팩터링입니다. Button과 ButtonLabel 컴포넌트의 역할을 명확히 분리하여 코드의 구조를 개선하고 재사용성을 높였습니다. ComponentPropsWithRef를 사용하여 타입 안정성을 강화하고, React 19의 기능을 활용해 forwardRef 없이 ref를 전달하는 방식은 매우 현대적이고 깔끔한 접근 방식입니다. 한 가지 유지보수성 향상을 위한 제안을 리뷰 댓글로 남겼으니 확인해 주시면 좋겠습니다.

[gemini-code-assist]

variant와 size의 기본값이 Button 컴포넌트(25-26행)와 중복으로 정의되어 있습니다. 이렇게 되면 나중에 기본값을 변경할 때 두 곳을 모두 수정해야 하므로 실수를 유발할 수 있습니다. (DRY 원칙 위배)

이 문제를 해결하기 위해 파일 상단에 기본값을 상수로 정의하고, Button과 ButtonLabel 컴포넌트에서 이 상수를 사용하도록 리팩터링하는 것을 제안합니다.

// components/button/Button.tsx

// ... imports

const defaultButtonProps = {
  variant: "primary",
  size: "md",
} as const;

// ... type definitions

export const Button = ({
  variant = defaultButtonProps.variant,
  size = defaultButtonProps.size,
  // ... other props
}) => {
  // ...
};

export const ButtonLabel = ({
  label,
  children,
  variant = defaultButtonProps.variant,
  size = defaultButtonProps.size,
  // ... other props
}) => {
  // ...
};

이렇게 하면 기본값을 한 곳에서 관리할 수 있어 코드 유지보수성이 향상됩니다.