UI 컴포넌트 설계

이번 강에서 배울 것

• 컴포넌트 기반 디자인이란?
• 버튼 컴포넌트 — 상태별 완전 구현
• 폼 컴포넌트 — 입력 필드, 셀렉트, 체크박스
• 카드 컴포넌트 — 정보 표시의 기본 단위
• Claude로 컴포넌트 변형(variant) 자동 생성

실습 프롬프트 1 — 버튼 시스템

다음 조건으로 버튼 컴포넌트 CSS 클래스 시스템을 만들어줘.

브랜드 색상: --color-primary: #16a34a (그린), --color-primary-dark: #15803d
폰트: Pretendard

Variant (종류):
- btn-primary: 채워진 버튼 (메인 액션)
- btn-secondary: 테두리 버튼 (보조 액션)
- btn-ghost: 배경 없는 버튼 (링크형)
- btn-danger: 빨간색 (삭제/경고)

Size:
- btn-sm, btn-md (기본), btn-lg

State:
- :hover, :active, :disabled, :focus-visible

추가 요소:
- 아이콘 왼쪽/오른쪽 배치 클래스
- loading 상태 (spinner 포함)

HTML + CSS로 전체 예시 코드 작성해줘.

실습 프롬프트 2 — 폼 컴포넌트

FRESH:ON 회원가입 폼 컴포넌트를 만들어줘.

포함 요소:
1. 텍스트 입력 필드 (label + input + 오류 메시지 영역)
   - 상태: 기본, focus, error, success, disabled
2. 이메일 입력 (유효성 표시 아이콘 포함)
3. 비밀번호 입력 (보이기/숨기기 토글)
4. 체크박스 (커스텀 스타일)
5. 제출 버튼

CSS 변수 사용, 애니메이션 transition 포함, 모바일 우선 반응형 적용

실습 프롬프트 3 — 카드 시스템

FRESH:ON 제품 카드 컴포넌트를 3가지 variant로 만들어줘.

Variant 1 — 제품 카드: 이미지, 제품명, 가격, 구매 버튼
Variant 2 — 통계 카드: 아이콘, 숫자(큰 폰트), 레이블, 증감 표시
Variant 3 — 리뷰 카드: 별점, 리뷰 텍스트, 작성자 프로필

공통:
- hover 시 shadow 강조, -translateY(2px) 효과
- border-radius: 16px
- 그림자: 기본 shadow-sm, hover 시 shadow-md
- 4강에서 정한 브랜드 색상 변수 사용

실습 프롬프트 4 — 배지/태그

상태를 표시하는 배지(badge)와 필터용 태그(tag) 컴포넌트를 만들어줘.

배지 색상 종류: success(초록), warning(주황), danger(빨강), info(파랑), neutral(회색)
배지 모양: pill (둥근), square (각진)

태그: 클릭 가능, 선택 시 색 반전, X 버튼으로 제거 가능 (JavaScript 포함)

강의 핵심 요약

• 컴포넌트 = 재사용 가능한 독립 UI 조각
• 버튼은 variant(종류) + size + state 3축으로 설계
• CSS 변수 기반 설계 → 브랜드 색상 변경 시 한 곳만 수정
• 다음 강: 이 컴포넌트들로 랜딩 페이지 완성하기