waiting-system/출석조회_신규회원탭_화면표시_수정완료.md

출석조회 신규회원 탭 화면 표시 수정 완료

문제점

출석조회 화면의 신규회원 탭에서:

• 화면이 표시되지 않음
• 데이터가 로드되지 않음
• 날짜 필드가 초기화되지 않음

요청 사항

1. 출석현황 탭에 있는 조건을 신규회원 탭에도 적용
2. 총 원원수를 표시
3. 신규회원 리스트 나열

수정 내용

1. 백엔드 API 수정 - routers/attendance.py

총 원원수 추가

추가된 코드:

# 전체 회원 수 조회 (총원원수)
total_members_count = db.query(func.count(Member.id)).filter(
    Member.store_id == current_store.id
).scalar() or 0

API 응답 수정:

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

2-1. 날짜 필드 초기화 함수 추가 (lines 726-732)

추가된 코드:

// 날짜 필드 초기화
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:

// 초기 로드
loadStatus();

After:

// 초기 로드
initializeDates();
loadWaitingStatus();  // 기본 탭인 대기현황 로드

효과:

• 페이지 로드 시 날짜 필드 초기화
• 기본 탭(대기현황)의 데이터 자동 로드

2-3. 통계 카드에 총 원원수 추가 (lines 331-348)

Before:

<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-label">신규 가입 회원</div>
        <div class="stat-value" id="newMemberCount">0명</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">총 출석 횟수</div>
        <div class="stat-value" style="color: #3498db;" id="newMemberTotalAttendance">0회</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">평균 출석 횟수</div>
        <div class="stat-value" style="color: #9b59b6;" id="newMemberAvgAttendance">0회</div>
    </div>
</div>

After:

<div class="stats-grid">
    <!-- ✅ 총 원원수 추가 -->
    <div class="stat-card">
        <div class="stat-label">총 원원수</div>
        <div class="stat-value" id="totalMembersCount">0명</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">신규 가입 회원</div>
        <div class="stat-value" style="color: #2ecc71;" id="newMemberCount">0명</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">총 출석 횟수</div>
        <div class="stat-value" style="color: #3498db;" id="newMemberTotalAttendance">0회</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">평균 출석 횟수</div>
        <div class="stat-value" style="color: #9b59b6;" id="newMemberAvgAttendance">0회</div>
    </div>
</div>

2-4. loadNewMembers() 함수 수정 (line 671)

추가된 코드:

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. 페이지 로드 시

// 1. 날짜 필드 초기화
initializeDates();  // 모든 탭의 날짜를 오늘로 설정

// 2. 기본 탭 데이터 로드
loadWaitingStatus();  // 대기현황 탭 데이터 로드

2. 신규회원 탭 클릭 시

// switchTab('new_members') 호출
// → loadNewMembers() 자동 실행
// → API 호출: /api/attendance/new-members?period=daily&date=2025-12-04
// → 통계 및 리스트 표시

3. 조건 변경 시

기간 변경:

// 사용자가 드롭다운에서 "주간" 선택
// → onchange="loadNewMembers()" 자동 실행
// → 데이터 재조회 및 표시

날짜 변경:

// 사용자가 날짜를 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. ✅ 통계 카드로 한눈에 현황 파악

신규회원 관리가 더욱 편리해졌습니다!