feat: Button 공통 base 및 CTA/Body module variant 구현

[hamxxn]

Summary

Button 프리미티브(Button), 화면 하단 CTA용 CTAButton(Single/Double 컴파운드), 선택 상태를 표시하는 Radio(primary/outline), 아이콘 전용 버튼 IconButton을 구현하고 각각 shared/ui/button, shared/ui/radio의 public API로 노출했다.

사용 방법

import { Button, CTAButton, IconButton } from "@/shared/ui/button";
import { Radio } from "@/shared/ui/radio";
import { CloseIcon } from "@/shared/ui/icons";

// 기본 버튼
<Button onClick={handleClick}>확인</Button>
<Button disabled>비활성</Button>
<Button isLoading>로딩 중</Button>

// 화면 하단 고정 CTA (fixed=true가 기본값, safe-area 패딩 자동 적용)
<CTAButton background="white">
  <CTAButton.Single>다음</CTAButton.Single>
</CTAButton>

<CTAButton fixed={false}>
  <CTAButton.Double
    leftButton={<Button>취소</Button>}
    rightButton={<Button>확인</Button>}
  />
</CTAButton>

// 선택 인디케이터
<Radio variant="primary" isSelected={selected} onClick={() => setSelected(true)} />

<Radio variant="outline" isSelected={selected} onClick={() => setSelected(true)} />

// 아이콘 버튼 (배경/variant 없음, className/iconClassName으로 버튼·아이콘 크기 독립 제어)
<IconButton icon={CloseIcon} aria-label="닫기" className="p-2" />

Related Issues

• close feat: Button 공통 base 및 CTA/Body module variant 구현 #7

PR Point (To Reviewer)

• 색상/타이포 디자인 토큰이 아직 확정되지 않아 시각 스타일은 Tailwind 유틸리티로 최소 구현했습니다. ButtonColor는 primary/tertiary, ButtonSize는 large/medium까지 추가됐고, 추후 필요에 따라 계속 확장될 예정입니다.
• Social Button은 별도 컴포넌트 없이 Button + className 커스텀으로 충분함을 구조로 남겼습니다 (social 폴더 없음).
• Button과 Radio를 같은 폴더에 두지 않고 shared/ui/button / shared/ui/radio로 분리했습니다. 버튼은 액션 트리거, 라디오는 그룹 내 선택 상태 토글이라 상호작용 모델이 다르고, 실제로도 테마 토큰(BUTTON_* vs RADIO_*)을 전혀 공유하지 않아서 프리미티브 단위로 폴더를 나누는 기존 컨벤션을 그대로 따랐습니다.
• 이슈 #7의 ButtonBodyModule(선택 인디케이터) 요구는 Radio로 대체 구현했고, 이슈 본문도 함께 갱신했습니다.
• IconButton은 shared/ui/button/icon-button/에 뒀지만 Button을 합성하지 않습니다. CTAButton은 Button의 color/size variant 스타일이 그대로 필요해서 합성하지만, IconButton은 배경·variant가 아예 없어서(shared/ui/icons의 아이콘을 감싸기만 함) Button을 합성하면 오히려 원치 않는 배경/패딩이 딸려옵니다. Radio가 button/ 밖에서 Button을 합성하지 않고 독립 프리미티브로 존재하는 것과 같은 이유로, IconButton도 button/ 폴더 안에서 Button과 독립적인 프리미티브로 뒀습니다. shared/ui/icons/에 두는 방안도 검토했으나, 그 폴더는 pnpm generate:icons가 매번 통째로 지우고 재생성하는 codegen 산출물 전용이라(ADR 0001) 손으로 짠 컴포넌트를 둘 수 없습니다.
• IconButton은 aria-label을 필수 prop으로 타입에서 강제하고, 내부 아이콘에는 aria-hidden="true"를 자동으로 붙여 접근성 이름이 중복 노출되지 않도록 했습니다.

리뷰 반영 내역

• text-gray-8 → text-gray-80 오타 수정
• BUTTON_BASE에 flex 추가 (items-center/justify-center가 실제로 동작하지 않던 문제 수정, 아이콘 추가 시 센터링 깨짐 방지)
• DoubleCTAButton에 기본 gap-[1.6rem] 추가 (두 버튼이 붙어 렌더링되던 문제 수정)
• 로딩 중(isLoading)에는 버튼이 기능적으로만 비활성화되고, 시각적인 disabled 스타일(BUTTON_DISABLED)은 적용하지 않도록 변경
• base/types/theme.ts + base/constants/variant.ts → base/theme.ts 하나로 통합 (폴더명과 실제 내용이 반대로 매칭되던 문제 정리)
• tertiary 버튼 press(active) 상태 텍스트 색상(active:text-primary-700) 추가
• IconButton 컴포넌트 추가 (shared/ui/button/icon-button/IconButton.tsx)

Screenshot

Button

Radio

ETC

• Top button의 경우 상단 nav에서만 사용되기에 공통 컴포넌트로 구현하지 않았습니다.

[thwjddlqslek]

수고하셨습니다~~

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
aligner	Ready	Preview	Aug 7, 2026 10:34pm