[DS-4] 네비게이션 개선 + 관리자 뷰 통일
ID: 699c73d6-4ead-4fda-950e-d8ce34691e6c
## 목표
사이드바/하단 네비를 개선하고 관리자 뷰를 디자인 시스템에 맞게 통일한다.
## 의존성
- [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 통일
- 기존 테스트 전부 통과
첨부 이미지
이미지 추가 (Ctrl+V로 붙여넣기 또는 클릭)
JPEG, PNG, GIF, WebP / 최대 10MB
활동 로그
-
팀팀리드 상태 변경: 리뷰 → 완료
2026년 03월 02일 09:50:28
-
Dds-nav-admin 상태 변경: 진행 중 → 리뷰
2026년 03월 02일 09:45:45
-
Dds-nav-admin DS-4 구현 완료 - 네비게이션 개선 + 관리자 뷰 통일
2026년 03월 02일 09:45:44
상세 보기
## 수정 파일 목록
### 1. 사이드바 개선 (`app/views/shared/_sidebar.html.erb`)
- `request.path` 기반 active 상태 감지 (`start_with?` 매칭)
- active 스타일: `border-l-3 border-brand-secondary bg-sidebar-active/30 text-white font-medium`
- 비활성: `border-l-3 border-transparent` (레이아웃 유지)
- nav_items에 `match` 키 추가로 경로 매칭 정확도 향상
- sub_items 분리 (통계/프로필/설정) + 구분선
- `render "shared/separator"` → 인라인 `border-t` (사이드바 다크 배경에 맞게)### 2. 하단 네비 5탭 확장 (`app/views/shared/_bottom_nav.html.erb`)
- 4탭 → 5탭: QT / 기도 / 설교 / 통독 / 더보기
- "더보기" 탭: `sidebar#toggle` 액션 재활용 (사이드바 열기)
- `start_with?` 기반 active 감지 (기존 `==` 비교 개선)
- 아이콘 `w-6 h-6`, 레이블 `text-caption` 통일 유지
- safe-area-bottom 유지### 3. admin_sidebar_controller.js → Stimulus targets
- `document.getElementById("admin-sidebar")` → `this.sidebarTarget`
- `document.getElementById("admin-sidebar-overlay")` → `this.overlayTarget`
- `static targets = ["sidebar", "overlay"]` 추가
- `sidebar_controller.js`와 동일한 패턴### 4. 관리자 레이아웃 통일 (`app/views/layouts/admin.html.erb`)
- 사이드바 너비 `w-56` → `w-60` (앱과 통일)
- `md:ml-56` → `md:ml-60`
- `data-controller="admin-sidebar"` body 레벨로 이동
- 사이드바/오버레이에 `data-admin-sidebar-target` 적용
- admin 사이드바 인라인 (별도 파셜 렌더 제거)
- active 상태: 앱 사이드바와 동일 패턴 (`border-l-3 border-brand-secondary`)### 5. 모바일 헤더 개선 (`app/views/shared/_header.html.erb`)
- `content_for?(:page_title)` 지원: 페이지 제목 있으면 표시, 없으면 "LogBible"
- 페이지 제목: `text-text-primary`, 앱 이름: `text-brand-primary` 구분
- 아바타에 프로필 링크 추가 (`profile_path`)
- `shadow-sm` 추가, `transition-colors` 추가### 6. 관리자 뷰 버튼 → `_button` 파셜 전환
- `admin/qt_themes/index.html.erb`: "새 테마" → `_button` primary
- `admin/qt_themes/new.html.erb`: "목록" → `_button` outline
- `admin/qt_themes/edit.html.erb`: "목록" → `_button` outline
- `admin/qt_themes/show.html.erb`: "수정" secondary, "목록" outline, "콘텐츠 추가" primary sm
- `admin/qt_contents/index.html.erb`: "콘텐츠 추가" primary, "테마로 돌아가기" outline
- `admin/qt_contents/show.html.erb`: "수정" secondary, "삭제" danger, "목록으로" outline## 테스트 결과
430 tests, 1013 assertions, 0 failures, 0 errors, 0 skips -
Dds-nav-admin DS-4 작업 시작 - 현재 파일 분석 완료
2026년 03월 02일 09:41:42
상세 보기
## 분석 완료 파일
- `shared/_sidebar.html.erb` - active 상태 없음, 기본 hover만 적용
- `shared/_bottom_nav.html.erb` - 4탭 (QT/묵상/통독/기도), 설교 누락
- `shared/_header.html.erb` - 페이지 제목 미지원
- `admin/shared/_sidebar.html.erb` - w-56 너비, active 상태 있음
- `layouts/admin.html.erb` - w-56/ml-56, getElementById 사용
- `admin_sidebar_controller.js` - getElementById 패턴 (Stimulus targets 미사용)## 작업 계획
1. 사이드바 active 상태 + 왼쪽 보더 인디케이터
2. 하단 네비 5탭 확장 (QT/기도/설교/통독/더보기)
3. admin_sidebar_controller → Stimulus targets 패턴
4. 관리자 레이아웃 w-60 통일
5. 모바일 헤더 페이지 제목 지원 -
Dds-nav-admin 티켓 클레임 완료
2026년 03월 02일 09:41:29