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

담당자: admin-frontend
생성일: 2026년 03월 02일 04:38

활동 로그

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

    2026년 03월 02일 04:47:43

  • A
    admin-frontend 상태 변경: 진행 중 → 리뷰

    2026년 03월 02일 04:47:11

  • A
    admin-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

  • A
    admin-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 확인

  • A
    admin-frontend 티켓 클레임 완료

    2026년 03월 02일 04:43:31