보드로 돌아가기

디자인 시스템: UI 파셜 + 레이아웃 + Stimulus 컨트롤러

ID: 5ddc5663-11d8-4e48-b7e6-b18e423c8e03

높음 완료

## 목표
Tailwind CSS v4 기반 디자인 시스템을 구축합니다. shadcn/ui 스타일을 ERB 파셜로 변환합니다.

## 현재 상태
- 이미 존재하는 파셜: _button.html.erb, _card.html.erb, _flash.html.erb, _input.html.erb
- 기존 파셜을 확인하고, 부족한 부분을 보완합니다

## 작업 범위
### 1. 기존 파셜 검토 및 보완
- app/views/shared/ 디렉토리의 기존 4개 파셜 확인
- 필요시 개선 (다크모드, 접근성, 변형 옵션)

### 2. 추가 UI 파셜 생성 (12개)
- _modal.html.erb: 모달 다이얼로그 (backdrop + 애니메이션)
- _select.html.erb: 커스텀 셀렉트 드롭다운
- _tabs.html.erb: 탭 네비게이션
- _avatar.html.erb: 프로필 아바타 (이미지 + 이니셜 폴백)
- _badge.html.erb: 상태 배지 (success, warning, error, info)
- _progress.html.erb: 진행률 바
- _switch.html.erb: 토글 스위치
- _tooltip.html.erb: 툴팁
- _alert.html.erb: 알림 배너
- _dropdown.html.erb: 드롭다운 메뉴
- _separator.html.erb: 구분선
- _table.html.erb: 테이블

### 3. 앱 레이아웃
- app/views/layouts/application.html.erb 수정:
- 모바일: 하단 네비게이션 (4탭: QT, 묵상, 통독, 기도)
- 데스크톱: 사이드바 네비게이션
- 헤더: 앱 이름 + 프로필 메뉴
- 다크모드 토글
- app/views/shared/_header.html.erb
- app/views/shared/_sidebar.html.erb
- app/views/shared/_bottom_nav.html.erb

### 4. Stimulus 컨트롤러
- app/javascript/controllers/modal_controller.js (열기/닫기/ESC)
- app/javascript/controllers/dropdown_controller.js (토글/외부클릭닫기)
- app/javascript/controllers/tabs_controller.js (탭 전환)
- app/javascript/controllers/tooltip_controller.js (표시/숨김)
- app/javascript/controllers/dark_mode_controller.js (다크모드 전환)
- app/javascript/controllers/sidebar_controller.js (사이드바 토글)

### 5. 다크모드
- Tailwind dark: 클래스 사용
- prefers-color-scheme 미디어쿼리 지원
- localStorage에 사용자 설정 저장

## 스타일 가이드
- 색상: 주 색상 indigo-600, 보조 amber-500
- 모바일 우선 (min-width breakpoint)
- 간격: p-4, gap-4 기본
- 모서리: rounded-lg 기본
- 그림자: shadow-sm ~ shadow-md
- 폰트: font-sans (기본 시스템 폰트)

## 파셜 컨벤션
- 모든 파셜은 local variable로 옵션을 받습니다
- 예: render "shared/button", text: "저장", variant: :primary, size: :md
- 기본값은 파셜 내부에서 설정

## 참고
- docs/migration/index.md §6 UI 구조
- 레거시 src/components/ui/ (27개 shadcn 컴포넌트)
- 레거시 src/components/layout/ (AppLayout, Header, Sidebar, BottomNav)

첨부 이미지

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

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

담당자: ui-dev
생성일: 2026년 03월 02일 00:45
부모 티켓 [P0-COORD] 핵심 기반 구축 (User + QT 모델 + 인증 + 디자인 시스템) (646cd001)

활동 로그

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

    2026년 03월 02일 01:05:18

  • U
    ui-dev 상태 변경: 진행 중 → 리뷰

    2026년 03월 02일 00:54:16

  • U
    ui-dev 디자인 시스템 구현 완료 - 파셜 19개 + Stimulus 6개 + 레이아웃

    2026년 03월 02일 00:54:16

    상세 보기

    ## 완료된 작업

    ### 1. Tailwind CSS v4 디자인 토큰 (`app/assets/tailwind/application.css`)
    - Brand: `brand-primary` (#4f46e5), `brand-secondary` (#f59e0b)
    - Status: `status-success`, `status-warning`, `status-error`, `status-info`
    - Text: `text-primary`, `text-secondary`, `text-muted`, `text-inverse`
    - Surface: `surface-default`, `surface-muted`, `surface-subtle`
    - Sidebar: `sidebar-bg`, `sidebar-text`, `sidebar-hover`, `sidebar-active`
    - 다크모드 `.dark` 클래스 오버라이드 포함
    - 타이포그래피 유틸리티: `text-display`, `text-heading`, `text-subheading`, `text-body`, `text-small`, `text-caption`

    ### 2. 신규 UI 파셜 (12개)
    - `_modal.html.erb` - 모달 다이얼로그 (sm/md/lg, backdrop, ESC 닫기)
    - `_select.html.erb` - 셀렉트 드롭다운 (form builder 연동)
    - `_tabs.html.erb` - 탭 네비게이션 (Stimulus 연동)
    - `_avatar.html.erb` - 프로필 아바타 (이미지 + 이니셜 폴백)
    - `_badge.html.erb` - 상태 배지 (success/warning/error/info)
    - `_progress.html.erb` - 진행률 바 (0-100)
    - `_switch.html.erb` - 토글 스위치 (form builder 연동)
    - `_tooltip.html.erb` - 툴팁 (top/bottom/left/right)
    - `_alert.html.erb` - 알림 배너 (4 variants, 닫기 버튼)
    - `_dropdown.html.erb` - 드롭다운 메뉴 (divider, danger 지원)
    - `_separator.html.erb` - 구분선 (horizontal/vertical, label 옵션)
    - `_table.html.erb` - 반응형 테이블 (빈 상태 메시지)

    ### 3. 기존 파셜 다크모드 업데이트 (4개)
    - `_button.html.erb` - secondary, outline, ghost variant 다크모드
    - `_card.html.erb` - 배경, 테두리 다크모드
    - `_input.html.erb` - 배경, 테두리 다크모드
    - `_flash.html.erb` - 텍스트 색상 다크모드

    ### 4. 레이아웃 파셜 (3개)
    - `_header.html.erb` - 모바일 헤더 (햄버거 메뉴 + LogBible + 아바타)
    - `_sidebar.html.erb` - 사이드바 (QT, 묵상, 통독, 기도, 설교, 통계, 설정 + 다크모드 토글)
    - `_bottom_nav.html.erb` - 모바일 하단 네비게이션 (QT, 묵상, 통독, 기도)

    ### 5. `application.html.erb` 업데이트
    - 반응형 레이아웃: 사이드바(데스크톱) + 헤더+하단바(모바일)
    - `md:ml-60` 사이드바 여백
    - safe-area-bottom 지원

    ### 6. Stimulus 컨트롤러 (6개)
    - `modal_controller.js` - open/close, ESC 키, backdrop 클릭
    - `dropdown_controller.js` - toggle, 외부 클릭 닫기
    - `tabs_controller.js` - 탭 선택, 패널 토글
    - `tooltip_controller.js` - show/hide
    - `dark_mode_controller.js` - 다크모드 토글 + localStorage 저장
    - `sidebar_controller.js` - 모바일 슬라이드 인/아웃

    ### 7. 기타
    - hello_controller.js 기본 샘플 삭제
    - importmap은 `pin_all_from`으로 자동 등록 확인

    ## 참고
    - Docker 빌드 오류는 Gemfile 변경 관련 (다른 에이전트 작업 중) → UI 파일 자체에는 영향 없음

  • U
    ui-dev 디자인 시스템 작업 시작

    2026년 03월 02일 00:48:13

    상세 보기

    ## 작업 계획
    1. 기존 파셜 4개 확인 (_button, _card, _flash, _input)
    2. 추가 UI 파셜 12개 생성
    3. 앱 레이아웃 구성 (header, sidebar, bottom_nav)
    4. Stimulus 컨트롤러 6개 생성
    5. 다크모드 적용

  • U
    ui-dev 티켓 클레임 완료

    2026년 03월 02일 00:48:04