백로그
0할 일
0진행 중
0리뷰
0완료 (30일)
4[DS-1] 디자인 토큰 정리 + 기반 파셜 개선
## 목표 디자인 토큰을 정리하고 핵심 파셜을 개선하여 전체 디자인 시스템의 기반을 강화한다. ## 작업 내용 ### 1. 레거시 tailwind.config.js 정리 - `templates/tailwind.config.js` 삭제 (v3 레거시, 실제 미사용) - `app/assets/tailwind/application.css`가 유일한 진실 소스임을 확인 ### 2. _button 파셜 확장 (가장 중요!) - `tag:` 옵션 추가 → `:button` (기본), `:a`, `:submit` 지원 - `:a`일 때 `href:` 파라미터 지원, `link_to` 없이 `<a>` 태그 렌더 - `:submit`일 때 `<input type="submit">` 또는 `<button type="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)
[DS-2] 로그인/인증 페이지 + QT 메인 뷰 재설계
## 목표 로그인/인증 페이지와 QT 메인 뷰를 디자인 시스템에 맞게 통일한다. ## 의존성 - [DS-1] 완료 후 진행 (특히 _button 확장 필요) ## 작업 내용 ### 1. 로그인 페이지 재설계 (`sessions/new.html.erb`) - `bg-white` → `bg-surface-default`, `dark:bg-gray-800` → 토큰 사용 - `rounded-2xl` → `rounded-lg` (앱 전체 통일) - 인라인 flash 메시지 → `render "shared/alert"` 사용 - 인라인 버튼 → `render "shared/button"` 파셜 사용 (tag: :a) - Google/Kakao 로그인 버튼: 각 브랜드 색상 유지하되 크기/여백 통일 - 전체적으로 세련되고 깔끔한 로그인 UX ### 2. QT 메인 (`qt/today.html.erb`) 개선 - 이미 `_card`, `_progress` 파셜 잘 사용 중 - 이전/다음 링크 → `_button` 파셜 (tag: :a, variant: :outline) 적용 - 묵상 영역 입력 UX 개선: textarea 높이, 저장 버튼 위치 ### 3. QT 관련 뷰 개선 - `qt/no_session.html.erb`: 인라인 버튼 → `_button` 파셜 + `_empty_state` 활용 - `qt/day.html.erb`: 동일 패턴 적용 - `qt/sessions/` 관련 뷰: 카드, 버튼 파셜 통일 ### 4. 다크모드 하드코딩 수정 - 작업하는 모든 뷰에서 `dark:bg-gray-XXX` → 시멘틱 토큰 사용 - `bg-white` → `bg-surface-default` - `text-gray-900` → `text-text-primary` - `text-gray-500` → `text-text-secondary` ## 완료 기준 - 로그인 페이지가 디자인 토큰 사용, rounded-lg 통일 - QT 뷰에서 인라인 버튼 스타일 0개 - 모든 뷰에서 하드코딩 다크모드 색상 제거 - 기존 테스트 전부 통과
[DS-3] 기도/설교/프로필/통독/통계 뷰 재설계
## 목표 나머지 CRUD 뷰들을 디자인 시스템에 맞게 통일한다. ## 의존성 - [DS-1] 완료 후 진행 ## 작업 내용 ### 1. 기도 뷰 (`prayers/`) - `prayers/index.html.erb`: 인라인 버튼 → `_button` 파셜 (tag: :a) - `prayers/_form.html.erb`: submit/취소 버튼 → `_button` 파셜 (tag: :submit) - `prayers/_prayer_card.html.erb`: hover 기반 액션 버튼 → 모바일에서도 보이게 변경 - `opacity-0 group-hover:opacity-100` → 항상 보이되 크기 작게, 또는 스와이프 패턴 - 빈 상태 → `_empty_state` 파셜 적용 - `prayers/stats.html.erb`: 통계 카드 정리 ### 2. 설교 뷰 (`sermons/`) - `sermons/index.html.erb`: 인라인 버튼, 검색 폼 → 파셜 적용 - `sermons/show.html.erb`: 수정/삭제 버튼 → `_button` 파셜 - `sermons/_form.html.erb`: submit/취소 → `_button` 파셜 - 페이지네이션 → `_pagination` 파셜 적용 - 빈 상태 → `_empty_state` 파셜 적용 ### 3. 프로필/설정 (`profiles/`, `settings/`) - disabled 이메일 필드: `_input` 파셜에 `disabled:` 옵션 추가하여 적용 - 버튼 파셜 통일 ### 4. 통독/통계/기록 (`tongtok/`, `stats/`, `records/`) - 인라인 스타일 → 파셜 활용으로 통일 - 다크모드 하드코딩 수정 ### 5. 모바일 최적화 - 기도 카드 액션 버튼: 모바일에서 항상 접근 가능하게 - 설교 검색 폼: 모바일에서 레이아웃 개선 (세로 배치) - 하단 네비에 "설교" 탭 추가 고려 (5개 탭) ## 완료 기준 - 모든 뷰에서 인라인 버튼 스타일 0개 - `_empty_state`, `_pagination` 파셜 활용 - 모바일에서 hover 의존 UI 제거 - 다크모드 하드코딩 색상 제거 - 기존 테스트 전부 통과
[DS-4] 네비게이션 개선 + 관리자 뷰 통일
## 목표 사이드바/하단 네비를 개선하고 관리자 뷰를 디자인 시스템에 맞게 통일한다. ## 의존성 - [DS-1] 완료 후 진행 ## 작업 내용 ### 1. 사이드바 개선 (`shared/_sidebar.html.erb`) - 현재 메뉴: QT/묵상/통독/기도/설교/통계/설정 (7개) - 아이콘+텍스트 정렬 확인 및 일관성 개선 - active 상태 스타일 강화 (현재 경로 기반) - 프로필 영역 정리 ### 2. 하단 네비 개선 (`shared/_bottom_nav.html.erb`) - 현재 4탭: QT/묵상/통독/기도 - 설교 탭 추가하여 5탭으로 확장 (QT/묵상/기도/설교/더보기) - 또는 "더보기" 탭으로 나머지 기능 접근 - safe-area-bottom 유지 - 아이콘/레이블 크기 통일 ### 3. 관리자 뷰 (`admin/`) 통일 - `admin_sidebar_controller.js` → Stimulus targets 패턴으로 개선 (getElementById 제거) - 관리자 사이드바 너비 `w-56` → `w-60` (앱과 통일) - 관리자 레이아웃 최대 너비 유지 (`max-w-7xl`은 적절) - 관리자 뷰에서 인라인 스타일 → 파셜 활용 ### 4. 모바일 헤더 (`shared/_header.html.erb`) - 헤더 디자인 개선 - 현재 페이지 제목 표시 추가 고려 ## 완료 기준 - 사이드바 active 상태 명확 - 하단 네비 5탭 or 더보기 구조 - admin_sidebar_controller가 Stimulus targets 사용 - 관리자 사이드바 w-60 통일 - 기존 테스트 전부 통과