Admin 프론트엔드 - 레이아웃 + 사이드바 + 대시보드 뷰
ID: fd7910db-62a3-4628-8c86-4619830697ef
## 목표
Admin 전용 레이아웃, 사이드바, 대시보드 뷰 구현
## 구현 항목
### 1. Admin 레이아웃 (신규)
- 파일: `app/views/layouts/admin.html.erb`
- 기존 application.html.erb 구조 참고하되, 관리자 전용으로 구성:
- 상단 헤더: "LogBible Admin" 타이틀
- 좌측 사이드바: admin 전용 네비게이션
- 메인 컨텐츠 영역
- 하단 네비 불필요 (데스크톱 중심)
- Tailwind CSS v4 의미 기반 색상 사용:
- bg-surface-default, text-text-primary
- brand-primary (#2563EB), surface-muted (#F9FAFB)
- `<%= yield %>` 로 컨텐츠 삽입
- flash 메시지: `<%= render "shared/flash" %>`
- JS/CSS: `<%= stylesheet_link_tag :app %>`, `<%= javascript_importmap_tags %>`
### 2. Admin 사이드바 (신규)
- 파일: `app/views/admin/shared/_sidebar.html.erb`
- 네비게이션 메뉴:
- 대시보드 (admin_root_path) - 집 아이콘
- 구분선
- "사이트로 돌아가기" (root_path) - 화살표 아이콘
- SVG 아이콘 직접 인라인 사용 (외부 라이브러리 금지)
- 현재 페이지 하이라이트: `current_page?` helper 활용
### 3. 대시보드 뷰 (신규)
- 파일: `app/views/admin/dashboard/index.html.erb`
- 페이지 제목: "관리자 대시보드"
- 통계 카드 그리드 (2x3 또는 3x2):
- 전체 사용자 수 (@total_users)
- 묵상 기록 수 (@total_meditations)
- QT 세션 수 (@total_sessions)
- 기도 제목 수 (@total_prayers)
- 설교 노트 수 (@total_sermons)
- 성경 읽기 수 (@total_readings)
- 각 카드: 기존 shared/_card.html.erb 파셜 활용
- 카드 내부: 아이콘 + 숫자 + 라벨
- 숫자는 크게 (text-display 또는 text-2xl font-bold)
- 라벨은 작게 (text-small text-text-secondary)
- 최근 활동 섹션:
- 최근 가입 사용자 목록 (@recent_users) - 이름, 이메일, 가입일
- 최근 묵상 기록 (@recent_meditations) - 사용자명, 날짜
- 기존 shared/_table.html.erb 파셜 활용
## 기존 shared 파셜 참고
- `_card.html.erb`: `title:`, `padding:` (기본 "default") 파라미터
- `_table.html.erb`: `headers:` (배열), `rows:` (2차원 배열) 파라미터
- `_badge.html.erb`: `text:`, `variant:` (default/success/warning/error/info) 파라미터
- `_separator.html.erb`: `margin:` (기본 "default") 파라미터
## 주의사항
- ERB 멀티라인 주석 안에 ERB 태그 금지 (SystemStackError)
- shared 파셜의 strict locals 정확히 준수
- Tailwind CSS v4 의미 기반 클래스 사용 (하드코딩 색상 금지)
- 반응형: 기본 모바일, md: 이상에서 사이드바 표시
- 기존 테스트 전체 통과 확인: `bin/rails test`
첨부 이미지
이미지 추가 (Ctrl+V로 붙여넣기 또는 클릭)
JPEG, PNG, GIF, WebP / 최대 10MB
활동 로그
-
팀팀리드 상태 변경: 리뷰 → 완료
2026년 03월 02일 04:47:43
-
Aadmin-frontend 상태 변경: 진행 중 → 리뷰
2026년 03월 02일 04:47:11
-
Aadmin-frontend Admin 프론트엔드 구현 완료 - 레이아웃 + 사이드바 + 대시보드 뷰
2026년 03월 02일 04:47:11
상세 보기
## 변경 사항
### 1. Admin 레이아웃 개선 (`app/views/layouts/admin.html.erb`)
- 상단 헤더바: bg-brand-primary 배경, "LogBible Admin" 흰색 텍스트
- 모바일 햄버거 메뉴 버튼 (md: 이하)
- 좌측 사이드바: `render "admin/shared/sidebar"`
- 메인 컨텐츠: md:ml-56 + pt-14, max-w-7xl
- flash 메시지: `render "shared/flash"`### 2. Admin 사이드바 생성 (`app/views/admin/shared/_sidebar.html.erb`)
- 대시보드 (admin_root_path) - 집 아이콘 SVG, current_page? 하이라이트
- 구분선 (shared/separator)
- "사이트로 돌아가기" (root_path) - 화살표 아이콘 SVG
- 반응형: md: 이상에서 항상 표시, 모바일 오버레이 슬라이드
- sidebar-bg/sidebar-text/sidebar-hover 토큰 사용### 3. 대시보드 뷰 개선 (`app/views/admin/dashboard/index.html.erb`)
- 통계 카드 6종 (grid-cols-2 md:grid-cols-3): shared/_card.html.erb 활용
- 전체 사용자, 묵상 기록, QT 세션, 기도제목, 설교노트, 통독 기록
- 각 카드: 컬러 아이콘 배경 + 숫자(2xl bold) + 라벨(text-secondary)
- 최근 활동 섹션: shared/_table.html.erb 활용
- 최근 가입 사용자 (닉네임, 이메일, 가입일)
- 최근 묵상 기록 (사용자, 날짜, 상태)### 4. Stimulus 컨트롤러 (`app/javascript/controllers/admin_sidebar_controller.js`)
- 모바일 사이드바 토글/닫기 기능## 테스트 결과
331 tests, 759 assertions, 0 failures, 0 errors -
Aadmin-frontend 작업 시작 - 기존 파일 분석 완료, 구현 시작
2026년 03월 02일 04:43:40
상세 보기
## 분석 완료
- `app/views/layouts/application.html.erb` - 메인 레이아웃 구조 파악
- `app/views/shared/_sidebar.html.erb` - 사이드바 패턴 확인
- `app/views/shared/_card.html.erb` - strict locals: (variant: :default, padding: :md)
- `app/views/shared/_table.html.erb` - strict locals: (headers:, rows:, empty_message:)
- `app/views/layouts/admin.html.erb` - 백엔드 생성 최소 레이아웃
- `app/controllers/admin/dashboard_controller.rb` - 인스턴스 변수 6종 + 최근 활동 2종
- Tailwind CSS 토큰: sidebar-bg, sidebar-text, sidebar-hover 확인 -
Aadmin-frontend 티켓 클레임 완료
2026년 03월 02일 04:43:31