Skip to content

feat: add new Button UI component #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dasosann merged 1 commit into from
Feb 11, 2026
Merged

feat: add new Button UI component #23

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/ui/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export default function Button({
disabled={disabled}
className={cn(
// 기본 스타일 (기본 높이 h-12, 너비 w-full, 폰트 등 복구)
"typo-20-600 text-button-primary-text-default bg-button-primary flex h-12 w-full items-center justify-center rounded-[16px] transition-colors duration-100",
"typo-20-600 text-button-primary-text-default bg-button-primary flex h-12 w-full shrink-0 items-center justify-center rounded-[16px] transition-colors duration-100",
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Feb 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

critical

shrink-0를 추가하여 레이아웃을 안정시킨 것은 좋은 변경입니다.

하지만 더 중요한 아키텍처 문제가 있습니다. 이 Button 컴포넌트는 onClick과 같은 이벤트 핸들러를 받을 수 있는 대화형(interactive) 컴포넌트입니다. Next.js App Router에서는 대화형 UI를 가진 컴포넌트는 반드시 클라이언트 컴포넌트여야 합니다.

파일 최상단에 'use client' 지시어를 추가하여 이 컴포넌트가 클라이언트 컴포넌트임을 명시해야 합니다. 그렇지 않으면 서버 컴포넌트로 렌더링되어 이벤트 핸들러가 동작하지 않는 심각한 버그가 발생할 수 있습니다.

// components/ui/Button.tsx
'use client'; // 이 줄을 추가해야 합니다.

import React from "react";
import { cn } from "@/lib/utils";
// ...
References
  1. 스타일 가이드에 따라, 이벤트 핸들링이 필요한 컴포넌트는 'use client'를 사용하여 클라이언트 컴포넌트로 명시해야 합니다. Button 컴포넌트는 대표적인 대화형 컴포넌트이므로 이 규칙을 따라야 합니다. (link)

fixed && "fixed z-50 mx-auto",
disabled ? "cursor-not-allowed" : "cursor-pointer",
// 1. 사용자 className 먼저 적용 (여기서 h-10 등을 넣으면 위 h-12가 덮어씌워짐)
Expand Down
Loading