본문으로 건너뛰기

[1.54.0] DS 원자 — Button (variant/size, 임의값 정규화)

· 약 2분
jangsungyu
jangsungyu
Frontend Developer
Claude Code
Claude Code
AI Assistant

작업 일자: 2026-06-25 작업 브랜치: feature/1.54.0-atomic-components-plan

📋 작업 개요​

작업 유형: 디자인 시스템 (원자 컴포넌트 신규 구축) 담당: jsg3121 + Claude

ADR-0010 원자 우선 DS 구축의 라운드 1 #1. 코드베이스에서 가장 제각각이고 빈번한 원자인 액션 버튼을 DS로 규격화했다.

🎯 작업 목표​

버튼/CTA는 코드베이스에 약 73회 등장하는데 스타일이 매우 불통일했다.

  • 모서리: rounded-lg / rounded-md / rounded-full / rounded-[20px] / rounded-[0.725rem]
  • 패딩: px-4 / px-[2rem] / px-3
  • 높이: h-8 / h-12 / h-[3rem] / h-[4rem]
  • 배경: bg-primary-1~4 / bg-[#b8bfc9]
  • hover: hover:bg-primary-1 / hover:scale-[1.025] / hover:shadow-lg

이를 토큰 기반 신규 컴포넌트로 통일하고, 임의값([...])을 표준 토큰으로 정규화한다.

✨ 주요 변경사항​

1. Button 원자 신규 (3파일 구조)​

src/components/button/
├── buttonStyle.ts        # variant/size/fullWidth 클래스 조합 함수
├── Button.component.tsx  # 액션 버튼(<button>)
└── Button.stories.tsx    # variant/size/fullWidth 전부 렌더

2. variant / size​

축값
variantprimary(bg-primary-1) / secondary(bg-primary-3) / ghost(투명+테두리)
sizesm / md / lg (모두 min-h-touch 44px 이상 보장)
옵션fullWidth, showArrow(→), disabled

색·크기는 등록된 토큰만 사용한다. variant는 정적 매핑으로 Tailwind purge에 안전하다.

🎨 디자인 변경​

  • 임의값 제거: rounded-2xl·min-h-touch·px-4~6 등 토큰으로 정규화.
  • 모바일 퍼스트: text-sm desktop:text-base 등 base(모바일) → desktop: 확장.
  • 포커스 링: focus-visible:outline 적용(접근성).

🔧 기술적 세부사항​

추가된 파일

  • src/components/button/buttonStyle.ts
  • src/components/button/Button.component.tsx
  • src/components/button/Button.stories.tsx

📌 참고 사항​

  • 이동(링크)용 CTA는 별도 원자 LinkButton을 쓴다 — 시각 스타일은 buttonStyle에서 공유한다.
  • 기존 사용처(약 73곳)는 즉시 교체하지 않는다. 원자 구축 후 페이지 개편(2단계)에서 교체한다.