[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
활동 로그
-
팀팀리드 상태 변경: 리뷰 → 완료
2026년 03월 02일 09:50:24
-
Dds-foundation 상태 변경: 진행 중 → 리뷰
2026년 03월 02일 09:39:13
-
Dds-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 -
Dds-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 사용 중 -
Dds-foundation 티켓 클레임 완료
2026년 03월 02일 09:32:52