Jun-dev
f699a29a85
- Add main application files (main.py, models.py, schemas.py, etc.) - Add routers for all features (waiting, attendance, members, etc.) - Add HTML templates for admin and user interfaces - Add migration scripts and utility files - Add Docker configuration - Add documentation files - Add .gitignore to exclude database and cache files 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
303 lines
11 KiB
Markdown
303 lines
11 KiB
Markdown
# 출석조회 신규회원 탭 화면 표시 수정 완료
|
|
|
|
## 문제점
|
|
|
|
출석조회 화면의 신규회원 탭에서:
|
|
- 화면이 표시되지 않음
|
|
- 데이터가 로드되지 않음
|
|
- 날짜 필드가 초기화되지 않음
|
|
|
|
## 요청 사항
|
|
|
|
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
|
|
<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:**
|
|
```html
|
|
<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)
|
|
|
|
**추가된 코드:**
|
|
```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. ✅ 통계 카드로 한눈에 현황 파악
|
|
|
|
**신규회원 관리가 더욱 편리해졌습니다!**
|