feat: Button 컴포넌트 추가

[RookieAND]

🎯 PR 제목

Button 컴포넌트 구현 및 예시 페이지 추가

📑 작업 상세 내역

• Figma 디자인 기반 Button 컴포넌트 구현
  • color variants: primary (gray-800), secondary (gray-200), tertiary (primary-500)
  • Radix UI Slot 패턴 지원 (asChild prop)
  • React 19 네이티브 ref 지원
  • disabled 상태에서 hover 효과 제거 (disabled:hover 스타일 추가)
  • 네이티브 button type attribute와 충돌 방지를 위해 color prop 사용
• Button 컴포넌트 예시 페이지 추가 (/button)
  • 모든 color variants 데모
  • disabled 상태 예시
  • Figma 디자인의 2버튼 레이아웃 구현
  • 전체 너비 버튼 예시

🙏 리뷰 요청 사항

• color variant 네이밍이 적절한지 검토 부탁드립니다 (primary/secondary/tertiary)
• disabled 상태의 opacity 값 (현재 0.5) 조정이 필요한지 확인 부탁드립니다
• asChild prop을 사용한 Slot 패턴의 실제 사용 케이스 검토 부탁드립니다

📃 참고 자료

• Figma - Primary Button (Single)
• Figma - Secondary + Tertiary Layout
• Figma - Secondary + Primary Layout

🖼️ 작업 결과물

• 데모 페이지: /button
• 컴포넌트 경로: src/components/Button/Button.tsx

[gemini-code-assist]

Summary of Changes

Hello @RookieAND, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 애플리케이션에 새로운 Button 컴포넌트를 도입하여 UI의 일관성과 재사용성을 높이는 것을 목표로 합니다. Figma 디자인 가이드라인을 충실히 따르며, 다양한 상태와 사용 사례를 포괄하는 유연한 컴포넌트를 제공합니다. 또한, 컴포넌트의 올바른 사용법을 시각적으로 확인할 수 있는 전용 데모 페이지도 함께 추가되었습니다.

Highlights

• 새로운 Button 컴포넌트 추가: Figma 디자인 시스템을 기반으로 한 Button 컴포넌트가 추가되었습니다. primary, secondary, tertiary 세 가지 색상 variant를 지원합니다.
• Radix UI Slot 패턴 및 React 19 ref 지원: asChild prop을 통해 Radix UI의 Slot 패턴을 지원하여 유연한 컴포넌트 구성을 가능하게 하며, React 19의 네이티브 ref 전달을 지원합니다.
• 비활성화 상태 스타일 개선: 버튼이 비활성화(disabled) 상태일 때 hover 효과가 제거되고, opacity: 0.5가 적용되어 시각적으로 명확하게 구분됩니다.
• 예시 페이지 추가: 새로운 /button 페이지가 추가되어 모든 색상 variant, 비활성화 상태, Figma 디자인의 2버튼 레이아웃, 전체 너비 버튼 등 다양한 Button 컴포넌트 사용 예시를 확인할 수 있습니다.
• prop 이름 충돌 방지: 네이티브 HTML button 태그의 type 속성과의 충돌을 피하기 위해 버튼의 색상 구분을 위한 prop으로 color를 사용합니다.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

안녕하세요. Button 컴포넌트 추가 PR 리뷰를 맡게 되었습니다. 전반적으로 컴포넌트 구조와 cva를 활용한 변형 처리가 깔끔하게 잘 작성되었습니다. 데모 페이지도 다양한 케이스를 포함하고 있어 컴포넌트의 사용법을 이해하기 쉽습니다.

몇 가지 개선점을 제안드립니다.

1. ref 전달: 현재 ref를 props로 직접 받고 있는데, 이는 React 19 이전 버전과 호환성 문제가 발생할 수 있습니다. React.forwardRef를 사용하도록 수정하여 하위 호환성을 보장하고 더 안정적인 컴포넌트로 만드는 것을 제안했습니다.
2. 데모 페이지 개선: asChild prop의 실제 사용 예시가 데모 페이지에 없어 추가하는 것을 제안했습니다. next/link와 함께 사용하는 예시를 추가하면 이 prop의 유용성을 더 잘 보여줄 수 있을 것입니다.

작성자님께서 질문주신 내용에 대한 제 의견은 다음과 같습니다.

• color variant 네이밍: primary, secondary, tertiary는 역할에 따라 버튼을 구분하는 매우 일반적이고 좋은 네이밍 컨벤션이라고 생각합니다. Figma 디자인의 의도와도 잘 맞는 것 같습니다.
• disabled 상태 opacity: 0.5는 비활성화 상태를 표현하는 데 일반적으로 사용되는 값입니다. 현재로서는 적절해 보이며, 만약 디자인 팀의 가이드가 있다면 그에 맞추거나, 추후에 시각적 피드백에 따라 미세 조정할 수 있겠습니다.
• asChild prop 사용 케이스: 위에서 제안드린 것처럼, next/link 컴포넌트를 Button으로 스타일링하는 것이 가장 흔하고 유용한 사용 사례입니다. 데모 페이지에 이 예시를 추가하면 좋을 것 같습니다.

수고 많으셨습니다!

[gemini-code-assist]

안녕하세요! Button 컴포넌트 구현 잘 보았습니다. ref 전달을 위해 forwardRef를 사용하는 것을 제안합니다.

PR 설명에서 React 19의 네이티브 ref 지원을 언급하셨지만, forwardRef를 사용하면 React 18 및 이전 버전과의 호환성을 보장할 수 있으며 React 19에서도 계속 지원될 예정입니다. 이렇게 하면 컴포넌트의 호환성과 안정성을 높일 수 있습니다.

이와 함께 ref 타입을 올바르게 추론하기 위해 ComponentProps 대신 ComponentPropsWithRef를 사용하고, 컴포넌트 디버깅 시 편의를 위해 displayName을 설정하는 것을 추천합니다.

import { forwardRef, type ComponentPropsWithRef } from 'react';
import { twJoin } from 'tailwind-merge';

const buttonVariants = cva(
	[
		'ygi:inline-flex ygi:items-center ygi:justify-center',
		'ygi:text-center ygi:whitespace-nowrap',
		'ygi:rounded-md ygi:px-xl ygi:py-sm',
		'ygi:cursor-pointer ygi:transition-colors',
		'ygi:disabled:cursor-not-allowed ygi:disabled:opacity-50',
		'ygi:heading-18-bd',
	],
	{
		variants: {
			color: {
				primary: [
					'ygi:bg-palette-gray-800 ygi:text-palette-common-white',
					'ygi:hover:bg-palette-gray-900',
					'ygi:disabled:hover:bg-palette-gray-800',
				],
				secondary: [
					'ygi:bg-palette-gray-200 ygi:text-palette-gray-800',
					'ygi:hover:bg-palette-gray-300',
					'ygi:disabled:hover:bg-palette-gray-200',
				],
				tertiary: [
					'ygi:bg-palette-primary-500 ygi:text-palette-common-white',
					'ygi:hover:bg-palette-primary-700',
					'ygi:disabled:hover:bg-palette-primary-500',
				],
			},
		},
		defaultVariants: {
			color: 'primary',
		},
	},
);

export type ButtonProps = ComponentPropsWithRef<'button'> &
	VariantProps<typeof buttonVariants> & {
		asChild?: boolean;
	};

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
	(
		{
			color = 'primary',
			disabled = false,
			children,
			asChild = false,
			className,
			...props
		},
		ref,
	) => {
		const Component = asChild ? Slot : 'button';

		return (
			<Component
				ref={ref}
				disabled={disabled}
				aria-disabled={disabled}
				className={twJoin(
					buttonVariants({
						color,
					}),
					className,
				)}
				{...props}
			>
				{children}
			</Component>
		);
	},
);

Button.displayName = 'Button';

[gemini-code-assist]

데모 페이지에 asChild prop 사용 예제를 추가하면 컴포넌트의 활용법을 더 명확하게 보여줄 수 있을 것 같습니다. next/link를 Button으로 감싸는 예시를 추가하는 것을 고려해보세요. 페이지 상단에 import Link from 'next/link';를 추가하고, 아래와 같은 예제 코드를 추가할 수 있습니다:

{/* asChild example with Next.js Link */}
<div className="ygi:flex ygi:flex-col ygi:gap-sm">
  <h2 className="ygi:heading-20-sb ygi:text-gray-900">
    asChild Prop with Next.js Link
  </h2>
  <Button color="primary" asChild>
    <Link href="/button">Link as a button</Link>
  </Button>
  <p className="ygi:body-14-rg ygi:text-gray-500">
    `asChild` prop을 사용하여 `next/link`와 같은 다른 컴포넌트를 버튼으로 래핑할 수 있습니다.
  </p>
</div>

[youngminss]

경험 상 ? 단순 링크 역할이지만 스타일은 버튼과 같은 스타일로 처리해야하는 케이스가 자주 있었어