[DS-1] 디자인 토큰 정리 + 기반 파셜 개선

ID: 66e8e018-ce3f-435c-9d65-c84d3ad81cb6

높음 완료

## 목표
디자인 토큰을 정리하고 핵심 파셜을 개선하여 전체 디자인 시스템의 기반을 강화한다.

## 작업 내용

### 1. 레거시 tailwind.config.js 정리
- `templates/tailwind.config.js` 삭제 (v3 레거시, 실제 미사용)
- `app/assets/tailwind/application.css`가 유일한 진실 소스임을 확인

### 2. _button 파셜 확장 (가장 중요!)
- `tag:` 옵션 추가 → `:button` (기본), `:a`, `:submit` 지원
- `:a`일 때 `href:` 파라미터 지원, `link_to` 없이 `` 태그 렌더
- `:submit`일 때 `` 또는 `` 렌더
- 기존 variant(primary/secondary/outline/ghost/danger), size(sm/md/lg) 유지
- `icon:` 옵션 추가 (SVG 아이콘을 텍스트 앞에 배치)

### 3. _empty_state 파셜 신규 생성
- locals: `icon:` (SVG), `title:`, `description:`, `action_text:`, `action_path:`, `action_variant:`
- 중앙 정렬, 아이콘 + 제목 + 설명 + CTA 버튼
- `_button` 파셜 재활용

### 4. _pagination 파셜 신규 생성
- locals: `pagy:` (pagy 객체) 또는 `current_page:, total_pages:, base_path:`
- 이전/다음 + 페이지 번호 표시
- 모바일: 이전/다음만, 데스크톱: 전체 번호

### 5. auth 레이아웃 토큰 적용
- `app/views/layouts/auth.html.erb`에서 `bg-gray-50` → `bg-surface-muted`, `dark:bg-gray-900` → 토큰 사용

## 완료 기준
- `templates/tailwind.config.js` 삭제됨
- `_button` 파셜이 tag: :a, :submit 지원
- `_empty_state`, `_pagination` 파셜 생성됨
- auth 레이아웃이 시멘틱 토큰 사용
- 기존 테스트 전부 통과 (bin/rails test)

첨부 이미지

이미지 추가 (Ctrl+V로 붙여넣기 또는 클릭)

JPEG, PNG, GIF, WebP / 최대 10MB

담당자: ds-foundation
생성일: 2026년 03월 02일 09:30

활동 로그

  • 팀리드 상태 변경: 리뷰 → 완료

    2026년 03월 02일 09:50:24

  • D
    ds-foundation 상태 변경: 진행 중 → 리뷰

    2026년 03월 02일 09:39:13

  • D
    ds-foundation DS-1 작업 완료: 디자인 토큰 정리 + 기반 파셜 개선 (430 tests, 0 failures)

    2026년 03월 02일 09:39:12

    상세 보기

    ## 변경 파일 목록

    ### 삭제
    - `templates/tailwind.config.js` - v3 레거시 설정 파일 삭제

    ### 수정
    - `app/views/shared/_button.html.erb` - 확장 (tag/href/method/form/icon/extra_class/data 옵션 추가)
    - `app/views/shared/_input.html.erb` - disabled 옵션 추가 (bg-surface-muted, cursor-not-allowed, opacity-60)
    - `app/views/layouts/auth.html.erb` - `bg-gray-50 dark:bg-gray-900` → `bg-surface-muted` 시멘틱 토큰 적용

    ### 신규 생성
    - `app/views/shared/_empty_state.html.erb` - 빈 상태 파셜 (아이콘 블록, 제목, 설명, CTA 버튼)
    - `app/views/shared/_pagination.html.erb` - 페이지네이션 파셜 (모바일: 이전/다음, 데스크톱: 전체 번호)

    ## 주요 변경 사항

    ### _button 확장 (핵심)
    - `tag:` → `:button`(기본), `:a`, `:submit` 지원
    - `:a` 태그: `href:`, `method:` (data-turbo-method), `data:` 지원
    - `:submit` 태그: `` 렌더
    - `form:` 옵션: form 속성으로 원격 폼 제출 지원
    - `extra_class:` 옵션: 추가 CSS 클래스 지정
    - icon 블록: `capture { yield }` 패턴으로 SVG 아이콘 지원
    - `content_tag` 기반으로 안전한 HTML 속성 렌더링
    - 기존 인터페이스 100% 하위 호환

    ### _empty_state 신규
    - `title:`, `description:`, `action_text:`, `action_path:`, `action_variant:` 지원
    - 아이콘은 블록으로 전달 → 회색 원 안에 표시
    - CTA 버튼은 `_button` 파셜 재활용 (tag: :a)
    - 다크모드 지원 (시멘틱 토큰 사용)

    ### _pagination 신규
    - `current_page:`, `total_pages:`, `base_path:` 지원
    - 1페이지면 자동 숨김
    - 모바일: "이전 / 1/N / 다음" 간단 표시
    - 데스크톱: 1...3 4 [5] 6 7...20 윈도우 패턴
    - 이전/다음 SVG 화살표 아이콘, aria-label 접근성
    - 시멘틱 토큰 + 다크모드 지원

    ## 테스트 결과
    430 runs, 1013 assertions, 0 failures, 0 errors

  • D
    ds-foundation DS-1 작업 시작: 디자인 토큰 정리 + 기반 파셜 개선

    2026년 03월 02일 09:33:00

    상세 보기

    ## 작업 계획
    1. 레거시 tailwind.config.js 삭제
    2. _button 파셜 확장 (tag/icon/form/method/class 옵션)
    3. _empty_state 파셜 신규 생성
    4. _pagination 파셜 신규 생성
    5. _input 파셜에 disabled 옵션 추가
    6. auth 레이아웃 토큰 적용

    ## 기존 파일 확인 완료
    - `_button.html.erb`: 5 variants, 3 sizes, loading 지원
    - `_input.html.erb`: text/email/password/textarea 지원
    - `auth.html.erb`: bg-gray-50 dark:bg-gray-900 사용 중

  • D
    ds-foundation 티켓 클레임 완료

    2026년 03월 02일 09:32:52