# 출석조회 신규회원 탭 화면 표시 수정 완료 ## 문제점 출석조회 화면의 신규회원 탭에서: - 화면이 표시되지 않음 - 데이터가 로드되지 않음 - 날짜 필드가 초기화되지 않음 ## 요청 사항 1. 출석현황 탭에 있는 조건을 신규회원 탭에도 적용 2. 총 원원수를 표시 3. 신규회원 리스트 나열 ## 수정 내용 ### 1. 백엔드 API 수정 - [routers/attendance.py](routers/attendance.py:316-366) #### 총 원원수 추가 **추가된 코드:** ```python # 전체 회원 수 조회 (총원원수) total_members_count = db.query(func.count(Member.id)).filter( Member.store_id == current_store.id ).scalar() or 0 ``` **API 응답 수정:** ```python return { "count": len(new_members), "total_members_count": total_members_count, # ✅ 총원원수 추가 "total_attendance": total_attendance, "avg_attendance": avg_attendance, "members": result } ``` ### 2. 프론트엔드 수정 - [templates/attendance.html](templates/attendance.html) #### 2-1. 날짜 필드 초기화 함수 추가 (lines 726-732) **추가된 코드:** ```javascript // 날짜 필드 초기화 function initializeDates() { const today = new Date().toISOString().split('T')[0]; document.getElementById('waitingDate').value = today; document.getElementById('statusDate').value = today; document.getElementById('newMemberDate').value = today; } ``` **효과:** - 모든 탭의 날짜 필드가 오늘 날짜로 자동 설정 - 사용자가 날짜를 선택하지 않아도 데이터 조회 가능 #### 2-2. 초기 로드 수정 (lines 734-736) **Before:** ```javascript // 초기 로드 loadStatus(); ``` **After:** ```javascript // 초기 로드 initializeDates(); loadWaitingStatus(); // 기본 탭인 대기현황 로드 ``` **효과:** - 페이지 로드 시 날짜 필드 초기화 - 기본 탭(대기현황)의 데이터 자동 로드 #### 2-3. 통계 카드에 총 원원수 추가 (lines 331-348) **Before:** ```html
신규 가입 회원
0명
총 출석 횟수
0회
평균 출석 횟수
0회
``` **After:** ```html
총 원원수
0명
신규 가입 회원
0명
총 출석 횟수
0회
평균 출석 횟수
0회
``` #### 2-4. loadNewMembers() 함수 수정 (line 671) **추가된 코드:** ```javascript document.getElementById('totalMembersCount').textContent = `${data.total_members_count}명`; ``` ## 수정 전후 비교 ### Before (수정 전) **문제점:** 1. ❌ 신규회원 탭 진입 시 화면이 비어있음 2. ❌ 날짜 필드가 비어있어 조회 실패 3. ❌ 통계 카드가 모두 "0"으로 표시 **화면:** ``` ┌──────────────────────────────────────┐ │ [일간] [날짜: (비어있음)] [조회] │ └──────────────────────────────────────┘ ┌────────────────┐ ┌────────────────┐ ┌────────────────┐ │ 신규 가입 회원 │ │ 총 출석 횟수 │ │ 평균 출석 횟수 │ │ 0명 │ │ 0회 │ │ 0회 │ └────────────────┘ └────────────────┘ └────────────────┘ (빈 테이블) ``` ### After (수정 후) **개선점:** 1. ✅ 페이지 로드 시 날짜 필드 자동 설정 (오늘) 2. ✅ 탭 전환 시 자동으로 데이터 로드 3. ✅ 총 원원수 추가 표시 4. ✅ 신규회원 리스트 출석순으로 표시 **화면:** ``` ┌──────────────────────────────────────┐ │ [일간] [날짜: 2025-12-04] [조회] │ └──────────────────────────────────────┘ ┌────────────────┐ ┌────────────────┐ ┌────────────────┐ ┌────────────────┐ │ 총 원원수 │ │ 신규 가입 회원 │ │ 총 출석 횟수 │ │ 평균 출석 횟수 │ │ 150명 │ │ 15명 │ │ 45회 │ │ 3.0회 │ └────────────────┘ └────────────────┘ └────────────────┘ └────────────────┘ ┌────┬────────┬──────────────┬──────────┬────────────┬──────────────┬──────────────┐ │순위│ 이름 │ 전화번호 │출석 횟수 │ 가입일 │ 최초 출석일 │ 최근 출석일 │ ├────┼────────┼──────────────┼──────────┼────────────┼──────────────┼──────────────┤ │ 🥇 │ 홍길동 │ 010-1234-5678│ 10회 │ 2025-11-01 │ 2025-11-02 │ 2025-12-03 │ │ 🥈 │ 김철수 │ 010-2345-6789│ 8회 │ 2025-11-05 │ 2025-11-06 │ 2025-12-01 │ │ 🥉 │ 이영희 │ 010-3456-7890│ 7회 │ 2025-11-10 │ 2025-11-11 │ 2025-11-30 │ └────┴────────┴──────────────┴──────────┴────────────┴──────────────┴──────────────┘ ``` ## 동작 흐름 ### 1. 페이지 로드 시 ```javascript // 1. 날짜 필드 초기화 initializeDates(); // 모든 탭의 날짜를 오늘로 설정 // 2. 기본 탭 데이터 로드 loadWaitingStatus(); // 대기현황 탭 데이터 로드 ``` ### 2. 신규회원 탭 클릭 시 ```javascript // switchTab('new_members') 호출 // → loadNewMembers() 자동 실행 // → API 호출: /api/attendance/new-members?period=daily&date=2025-12-04 // → 통계 및 리스트 표시 ``` ### 3. 조건 변경 시 **기간 변경:** ```javascript // 사용자가 드롭다운에서 "주간" 선택 // → onchange="loadNewMembers()" 자동 실행 // → 데이터 재조회 및 표시 ``` **날짜 변경:** ```javascript // 사용자가 날짜를 2025-12-01로 변경 // → 조회 버튼 클릭 // → loadNewMembers() 실행 // → 해당 날짜 기준으로 데이터 조회 ``` ## 필터 조건 (출석현황과 동일) | 조건 | 설명 | 예시 | |------|------|------| | **일간** | 선택한 날짜 하루 | 2025-12-04 가입한 회원 | | **주간** | 선택한 날짜가 속한 주 (월~일) | 2025-12-02(월) ~ 2025-12-08(일) | | **월간** | 선택한 날짜가 속한 월 | 2025-12-01 ~ 2025-12-31 | | **연간** | 선택한 날짜가 속한 년도 | 2025-01-01 ~ 2025-12-31 | ## 통계 카드 설명 | 카드 | 설명 | 예시 | |------|------|------| | **총 원원수** | 매장의 전체 회원 수 | 150명 | | **신규 가입 회원** | 선택한 기간에 가입한 회원 수 | 15명 | | **총 출석 횟수** | 신규 가입 회원들의 총 출석 횟수 | 45회 | | **평균 출석 횟수** | 신규 가입 회원 1인당 평균 출석 | 3.0회 | ## 리스트 정렬 기준 **출석순 정렬 (내림차순):** - 출석 횟수가 많은 회원이 상위에 표시 - 동일한 출석 횟수인 경우 가입일 순서 유지 - 1-3위는 금/은/동 배지로 시각적 강조 ## 테스트 시나리오 ### 시나리오 1: 페이지 첫 진입 1. 출석조회 메뉴 클릭 2. **예상 결과:** - 대기현황 탭이 선택되어 있음 - 모든 날짜 필드가 오늘 날짜로 설정됨 - 대기현황 데이터가 표시됨 ### 시나리오 2: 신규회원 탭 클릭 1. 신규회원 탭 클릭 2. **예상 결과:** - 날짜가 오늘로 설정되어 있음 - 총 원원수 표시됨 - 오늘 가입한 신규회원 리스트 표시됨 (없으면 빈 테이블) ### 시나리오 3: 기간 변경 1. 신규회원 탭에서 "주간" 선택 2. **예상 결과:** - 이번 주에 가입한 신규회원 표시 - 통계 카드 업데이트 - 리스트 재조회 ### 시나리오 4: 특정 날짜 조회 1. 날짜를 2025-11-01로 변경 2. 조회 버튼 클릭 3. **예상 결과:** - 2025-11-01에 가입한 신규회원 표시 - 해당 회원들의 출석 통계 표시 ## 영향 범위 ### 수정된 파일 1. ✅ `routers/attendance.py` - 총 원원수 추가 2. ✅ `templates/attendance.html` - 날짜 초기화, 통계 카드 추가 ### 영향받는 기능 - ✅ 출석조회 > 신규회원 탭 - 초기 데이터 로드 - 총 원원수 표시 - 통계 카드 업데이트 ### 영향받지 않는 기능 - ✅ 대기 현황 탭 - ✅ 출석현황 탭 - ✅ 개인별 출석 탭 - ✅ 출석순위 탭 ## 결론 **신규회원 탭이 정상적으로 표시됩니다:** 1. ✅ 페이지 로드 시 날짜 자동 설정 2. ✅ 탭 전환 시 자동 데이터 로드 3. ✅ 총 원원수 표시 4. ✅ 출석현황과 동일한 필터 조건 적용 5. ✅ 신규회원 리스트 출석순으로 정렬 6. ✅ 통계 카드로 한눈에 현황 파악 **신규회원 관리가 더욱 편리해졌습니다!**