mirror of
https://github.com/ktds-dg0501/kt-event-marketing.git
synced 2025-12-06 11:26:26 +00:00
push uiux
This commit is contained in:
cherry2250
parent
3097879213
commit
2fa2eef1d6
@ -598,8 +598,211 @@ graph TD
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
#### 06-이벤트목록
|
||||||
|
|
||||||
|
**개요**
|
||||||
|
- **목적**: 전체 이벤트 목록 조회 및 관리
|
||||||
|
- **관련 유저스토리**: UFR-EVENT-070
|
||||||
|
- **비즈니스 중요도**: S/13 (권장, 중간 복잡도)
|
||||||
|
|
||||||
|
**주요 기능**
|
||||||
|
- 전체 이벤트 목록 테이블
|
||||||
|
- 상태별 필터 (전체/진행중/예정/종료)
|
||||||
|
- 기간별 필터 (최근 1개월/3개월/6개월/1년/전체)
|
||||||
|
- 이벤트명 검색
|
||||||
|
- 정렬 기능 (최신순/참여자순/투자대비수익률순)
|
||||||
|
|
||||||
|
**UI 구성요소**
|
||||||
|
|
||||||
|
*Mobile (320-767px)*
|
||||||
|
```
|
||||||
|
┌─────────────────────┐
|
||||||
|
│ ☰ 이벤트 목록 👤│ ← Header
|
||||||
|
├─────────────────────┤
|
||||||
|
│ [검색창] │
|
||||||
|
│ 🔍 이벤트명 검색... │
|
||||||
|
│ │
|
||||||
|
│ 📂 필터 │
|
||||||
|
│ [전체▼] [최근1개월▼]│
|
||||||
|
│ │
|
||||||
|
│ 정렬: [최신순 ▼] │
|
||||||
|
│ │
|
||||||
|
│ ┌─────────────────┐ │
|
||||||
|
│ │ 신규고객 이벤트 │ │
|
||||||
|
│ │ 진행중 | D-5 │ │
|
||||||
|
│ │ 참여 128명 │ │
|
||||||
|
│ │ 투자대비수익률: 450%│ │
|
||||||
|
│ │ 2025-11-01~15 │ │
|
||||||
|
│ └─────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ ┌─────────────────┐ │
|
||||||
|
│ │ 재방문 이벤트 │ │
|
||||||
|
│ │ 진행중 | D-12 │ │
|
||||||
|
│ │ 참여 56명 │ │
|
||||||
|
│ │ 투자대비수익률: 320%│ │
|
||||||
|
│ │ 2025-11-05~20 │ │
|
||||||
|
│ └─────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ ┌─────────────────┐ │
|
||||||
|
│ │ 매출증대 이벤트 │ │
|
||||||
|
│ │ 종료 │ │
|
||||||
|
│ │ 참여 234명 │ │
|
||||||
|
│ │ 투자대비수익률: 580%│ │
|
||||||
|
│ │ 2025-10-15~31 │ │
|
||||||
|
│ └─────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ [더보기...] │
|
||||||
|
│ │
|
||||||
|
├─────────────────────┤
|
||||||
|
│ 홈 이벤트 분석 프로필│ ← Nav Bottom
|
||||||
|
└─────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
*Desktop (1024px+)*
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ [로고] 이벤트 목록 [프로필] │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ [사이드바] 🔍 [검색창] 📂 필터│
|
||||||
|
│ 이벤트명 검색... [전체▼] │
|
||||||
|
│ • 대시보드 [최근1개월▼]│
|
||||||
|
│ • 이벤트 정렬: [최신순 ▼] │
|
||||||
|
│ • 분석 ────────────────────────│
|
||||||
|
│ • 프로필 │이벤트명│기간│상태│참여자│투자대비수익률│
|
||||||
|
│ ├──────┼────┼──┼────┼────┤
|
||||||
|
│ │신규고객│11/1~│진행│128명│450% │
|
||||||
|
│ │이벤트 │11/15│중 │ │ │
|
||||||
|
│ ├──────┼────┼──┼────┼────┤
|
||||||
|
│ │재방문 │11/5~│진행│56명 │320% │
|
||||||
|
│ │이벤트 │11/20│중 │ │ │
|
||||||
|
│ ├──────┼────┼──┼────┼────┤
|
||||||
|
│ │매출증대│10/15│종료│234명│580% │
|
||||||
|
│ │이벤트 │~10/31│ │ │ │
|
||||||
|
│ ├──────┼────┼──┼────┼────┤
|
||||||
|
│ │... │... │... │... │... │
|
||||||
|
│ └──────┴────┴──┴────┴────┘
|
||||||
|
│ │
|
||||||
|
│ [1] 2 3 4 5 ... 10 > │
|
||||||
|
└─────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
**인터랙션**
|
||||||
|
1. **검색**: 입력 중 실시간 검색 결과 업데이트
|
||||||
|
2. **필터 적용**: 상태/기간 선택 시 즉시 목록 갱신
|
||||||
|
3. **정렬**: 드롭다운 선택 시 정렬 기준 변경
|
||||||
|
4. **카드/행 클릭**: 이벤트 상세 화면으로 이동
|
||||||
|
5. **페이지네이션**: 페이지당 20개 표시
|
||||||
|
|
||||||
|
**반응형 처리**
|
||||||
|
- Mobile: 카드 형태 1열 표시
|
||||||
|
- Tablet: 카드 형태 2열 표시
|
||||||
|
- Desktop: 테이블 형태 표시
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
### 5.3 이벤트 생성 플로우
|
### 5.3 이벤트 생성 플로우
|
||||||
|
|
||||||
|
#### 07-이벤트목적선택
|
||||||
|
|
||||||
|
**개요**
|
||||||
|
- **목적**: 이벤트 목적 선택으로 AI 추천 최적화
|
||||||
|
- **관련 유저스토리**: UFR-EVENT-020
|
||||||
|
- **비즈니스 중요도**: M/5 (필수, 낮은 복잡도)
|
||||||
|
|
||||||
|
**주요 기능**
|
||||||
|
- 4가지 이벤트 목적 선택
|
||||||
|
- 각 목적별 설명 및 예상 효과 제공
|
||||||
|
- 목적 선택 후 AI 추천 자동 진행
|
||||||
|
|
||||||
|
**UI 구성요소**
|
||||||
|
|
||||||
|
*Mobile (320-767px)*
|
||||||
|
```
|
||||||
|
┌─────────────────────┐
|
||||||
|
│ ← 이벤트 목적 선택 │
|
||||||
|
├─────────────────────┤
|
||||||
|
│ │
|
||||||
|
│ 이벤트 목적을 선택해 │
|
||||||
|
│ 주세요 │
|
||||||
|
│ │
|
||||||
|
│ ┌─────────────────┐ │
|
||||||
|
│ │ ○ 신규 고객 유치 │ │
|
||||||
|
│ │ ────────────────│ │
|
||||||
|
│ │ 새로운 고객 확보 │ │
|
||||||
|
│ │ 예상: 참여율 높음│ │
|
||||||
|
│ └─────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ ┌─────────────────┐ │
|
||||||
|
│ │ ○ 재방문 유도 │ │
|
||||||
|
│ │ ────────────────│ │
|
||||||
|
│ │ 기존 고객 재방문 │ │
|
||||||
|
│ │ 예상: 충성도 향상│ │
|
||||||
|
│ └─────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ ┌─────────────────┐ │
|
||||||
|
│ │ ○ 매출 증대 │ │
|
||||||
|
│ │ ────────────────│ │
|
||||||
|
│ │ 단기 매출 향상 │ │
|
||||||
|
│ │ 예상: 즉각적 효과│ │
|
||||||
|
│ └─────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ ┌─────────────────┐ │
|
||||||
|
│ │ ○ 인지도 향상 │ │
|
||||||
|
│ │ ────────────────│ │
|
||||||
|
│ │ 브랜드 인지도 제고│ │
|
||||||
|
│ │ 예상: 장기적 효과│ │
|
||||||
|
│ └─────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ ┌─────────────────┐ │
|
||||||
|
│ │ 다음 단계 │ │ ← 선택 후 활성화
|
||||||
|
│ └─────────────────┘ │
|
||||||
|
└─────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
*Tablet/Desktop (768px+)*
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ ← 이벤트 목적 선택 │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ │
|
||||||
|
│ 이벤트 목적을 선택해주세요 │
|
||||||
|
│ │
|
||||||
|
│ ┌──────────┐┌──────────┐ │
|
||||||
|
│ │○신규고객 ││○재방문 │ │
|
||||||
|
│ │ 유치 ││ 유도 │ │
|
||||||
|
│ │──────────││──────────│ │
|
||||||
|
│ │새로운 고객││기존 고객 │ │
|
||||||
|
│ │확보 ││재방문 │ │
|
||||||
|
│ │참여율 높음││충성도 향상│ │
|
||||||
|
│ └──────────┘└──────────┘ │
|
||||||
|
│ │
|
||||||
|
│ ┌──────────┐┌──────────┐ │
|
||||||
|
│ │○매출 ││○인지도 │ │
|
||||||
|
│ │ 증대 ││ 향상 │ │
|
||||||
|
│ │──────────││──────────│ │
|
||||||
|
│ │단기 매출 ││브랜드 │ │
|
||||||
|
│ │향상 ││인지도 제고│ │
|
||||||
|
│ │즉각적효과││장기적효과│ │
|
||||||
|
│ └──────────┘└──────────┘ │
|
||||||
|
│ │
|
||||||
|
│ ┌──────────┐ │
|
||||||
|
│ │ 다음 단계 │ │
|
||||||
|
│ └──────────┘ │
|
||||||
|
└─────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
**인터랙션**
|
||||||
|
1. **목적 선택**: 라디오 버튼, 1개만 선택 가능
|
||||||
|
2. **카드 클릭**: 전체 카드 영역 클릭으로 선택
|
||||||
|
3. **다음 단계**: 선택 후 버튼 활성화, AI 이벤트 추천 화면 이동
|
||||||
|
4. **애니메이션**: 선택 시 카드 하이라이트 효과
|
||||||
|
|
||||||
|
**반응형 처리**
|
||||||
|
- Mobile: 카드 1열 세로 배치
|
||||||
|
- Tablet/Desktop: 카드 2×2 그리드 배치
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
#### 08-AI이벤트추천
|
#### 08-AI이벤트추천
|
||||||
|
|
||||||
**개요**
|
**개요**
|
||||||
@ -933,6 +1136,236 @@ graph TD
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
#### 10-콘텐츠편집
|
||||||
|
|
||||||
|
**개요**
|
||||||
|
- **목적**: 생성된 SNS 이미지 커스터마이징
|
||||||
|
- **관련 유저스토리**: UFR-CONT-020
|
||||||
|
- **비즈니스 중요도**: S/13 (권장, 중간 복잡도)
|
||||||
|
|
||||||
|
**주요 기능**
|
||||||
|
- 텍스트 수정 (제목, 경품, 참여안내)
|
||||||
|
- 색상 조정 (배경색, 텍스트색, 강조색)
|
||||||
|
- 로고 위치 조정
|
||||||
|
- 실시간 미리보기
|
||||||
|
|
||||||
|
**UI 구성요소**
|
||||||
|
|
||||||
|
*Mobile (320-767px)*
|
||||||
|
```
|
||||||
|
┌─────────────────────┐
|
||||||
|
│ ← 콘텐츠 편집 │
|
||||||
|
├─────────────────────┤
|
||||||
|
│ 미리보기 │
|
||||||
|
│ ┌─────────────────┐ │
|
||||||
|
│ │ │ │
|
||||||
|
│ │ [실시간 미리보기]│ │
|
||||||
|
│ │ │ │
|
||||||
|
│ │ [수정된 내용 │ │
|
||||||
|
│ │ 즉시 반영] │ │
|
||||||
|
│ │ │ │
|
||||||
|
│ └─────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ 📝 텍스트 편집 │
|
||||||
|
│ 제목: │
|
||||||
|
│ [신규고객 이벤트...] │
|
||||||
|
│ │
|
||||||
|
│ 경품: │
|
||||||
|
│ [커피 쿠폰 100매...]│
|
||||||
|
│ │
|
||||||
|
│ 참여안내: │
|
||||||
|
│ [전화번호 입력...] │
|
||||||
|
│ │
|
||||||
|
│ 🎨 색상 조정 │
|
||||||
|
│ 배경색: [■ 선택] │
|
||||||
|
│ 텍스트: [■ 선택] │
|
||||||
|
│ 강조색: [■ 선택] │
|
||||||
|
│ │
|
||||||
|
│ 🏢 로고 위치 │
|
||||||
|
│ [◀ 위치이동 ▶] │
|
||||||
|
│ [- 크기조절 +] │
|
||||||
|
│ │
|
||||||
|
│ ┌─────────────────┐ │
|
||||||
|
│ │ 저장 | 다음 단계 │ │
|
||||||
|
│ └─────────────────┘ │
|
||||||
|
└─────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
*Desktop (1024px+)*
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ ← 콘텐츠 편집 [프로필]│
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ [사이드바] ┌────────┐ ┌──────────┐│
|
||||||
|
│ │미리보기 │ │편집 패널 ││
|
||||||
|
│ • 대시보드 │ │ │ ││
|
||||||
|
│ • 이벤트 │ │ │📝 텍스트 ││
|
||||||
|
│ • 분석 │[실시간 │ │제목: ││
|
||||||
|
│ • 프로필 │ 미리보기]│ │[입력창] ││
|
||||||
|
│ │ │ │ ││
|
||||||
|
│ │ │ │경품: ││
|
||||||
|
│ │ │ │[입력창] ││
|
||||||
|
│ │ │ │ ││
|
||||||
|
│ │ │ │🎨 색상 ││
|
||||||
|
│ │ │ │배경: [■] ││
|
||||||
|
│ │ │ │텍스트:[■] ││
|
||||||
|
│ │ │ │강조: [■] ││
|
||||||
|
│ │ │ │ ││
|
||||||
|
│ │ │ │🏢 로고 ││
|
||||||
|
│ │ │ │위치/크기 ││
|
||||||
|
│ └────────┘ └──────────┘│
|
||||||
|
│ │
|
||||||
|
│ ┌────────┐ ┌──────────┐ │
|
||||||
|
│ │ 저장 │ │다음 단계 │ │
|
||||||
|
│ └────────┘ └──────────┘ │
|
||||||
|
└─────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
**인터랙션**
|
||||||
|
1. **텍스트 편집**: 입력 시 실시간 미리보기 업데이트
|
||||||
|
2. **색상 선택**: 컬러 피커 팝업, 선택 시 즉시 반영
|
||||||
|
3. **로고 위치**: 드래그 앤 드롭 또는 화살표 버튼
|
||||||
|
4. **저장**: 편집 내용 저장, 현재 화면 유지
|
||||||
|
5. **다음 단계**: 배포 채널 선택 화면으로 이동
|
||||||
|
|
||||||
|
**반응형 처리**
|
||||||
|
- Mobile: 세로 배치 (미리보기 → 편집 옵션)
|
||||||
|
- Tablet: 세로 배치 유지, 입력 영역 확대
|
||||||
|
- Desktop: 좌우 분할 (미리보기 60% + 편집 패널 40%)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### 11-배포채널선택
|
||||||
|
|
||||||
|
**개요**
|
||||||
|
- **목적**: 다중 채널 선택 및 배포 설정
|
||||||
|
- **관련 유저스토리**: UFR-EVENT-040
|
||||||
|
- **비즈니스 중요도**: M/13 (필수, 중간 복잡도)
|
||||||
|
|
||||||
|
**주요 기능**
|
||||||
|
- 4가지 배포 채널 선택 (우리동네TV, 링고비즈, 지니TV, SNS)
|
||||||
|
- 채널별 예상 노출 수 표시
|
||||||
|
- 채널별 비용 안내
|
||||||
|
- 총 예상 비용 합계
|
||||||
|
|
||||||
|
**UI 구성요소**
|
||||||
|
|
||||||
|
*Mobile (320-767px)*
|
||||||
|
```
|
||||||
|
┌─────────────────────┐
|
||||||
|
│ ← 배포 채널 선택 │
|
||||||
|
├─────────────────────┤
|
||||||
|
│ │
|
||||||
|
│ 배포 채널을 선택해 │
|
||||||
|
│ 주세요 (최소 1개) │
|
||||||
|
│ │
|
||||||
|
│ ┌─────────────────┐ │
|
||||||
|
│ │ ☑ 우리동네TV │ │
|
||||||
|
│ │ ────────────────│ │
|
||||||
|
│ │ 반경: [500m ▼] │ │
|
||||||
|
│ │ 시간: [저녁 ▼] │ │
|
||||||
|
│ │ 예상: 5만명 노출 │ │
|
||||||
|
│ │ 비용: 8만원 │ │
|
||||||
|
│ └─────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ ┌─────────────────┐ │
|
||||||
|
│ │ ☑ 링고비즈 │ │
|
||||||
|
│ │ ────────────────│ │
|
||||||
|
│ │ 매장 전화번호: │ │
|
||||||
|
│ │ 010-1234-5678 │ │
|
||||||
|
│ │ 연결음 업데이트 │ │
|
||||||
|
│ │ 비용: 무료 │ │
|
||||||
|
│ └─────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ ┌─────────────────┐ │
|
||||||
|
│ │ ☐ 지니TV 광고 │ │
|
||||||
|
│ │ ────────────────│ │
|
||||||
|
│ │ 지역: [수원 ▼] │ │
|
||||||
|
│ │ 시간: [전체 ▼] │ │
|
||||||
|
│ │ 예산: [입력...] │ │
|
||||||
|
│ │ 예상: 계산중... │ │
|
||||||
|
│ └─────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ ┌─────────────────┐ │
|
||||||
|
│ │ ☑ SNS │ │
|
||||||
|
│ │ ────────────────│ │
|
||||||
|
│ │ ☑ Instagram │ │
|
||||||
|
│ │ ☑ Naver Blog │ │
|
||||||
|
│ │ ☐ Kakao Channel │ │
|
||||||
|
│ │ 예약: [즉시 ▼] │ │
|
||||||
|
│ │ 비용: 무료 │ │
|
||||||
|
│ └─────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ ┌─────────────────┐ │
|
||||||
|
│ │ 총 예상 비용: │ │
|
||||||
|
│ │ 8만원 │ │
|
||||||
|
│ │ 총 예상 노출: │ │
|
||||||
|
│ │ 5만명+ │ │
|
||||||
|
│ └─────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ ┌─────────────────┐ │
|
||||||
|
│ │ 다음 단계 │ │
|
||||||
|
│ └─────────────────┘ │
|
||||||
|
└─────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
*Desktop (1024px+)*
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ ← 배포 채널 선택 [프로필]│
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ [사이드바] │
|
||||||
|
│ 배포 채널을 선택해주세요 │
|
||||||
|
│ • 대시보드 (최소 1개 이상) │
|
||||||
|
│ • 이벤트 ─────────────────────────│
|
||||||
|
│ • 분석 ┌───────┐┌───────┐ │
|
||||||
|
│ • 프로필 │☑우리동네││☑링고비즈│ │
|
||||||
|
│ │ TV ││ │ │
|
||||||
|
│ │───────││───────│ │
|
||||||
|
│ │반경: ││전화번호││ │
|
||||||
|
│ │[500m▼]││자동연동││ │
|
||||||
|
│ │시간: ││ │ │
|
||||||
|
│ │[저녁▼]││연결음 ││ │
|
||||||
|
│ │5만명 ││업데이트││ │
|
||||||
|
│ │8만원 ││무료 ││ │
|
||||||
|
│ └───────┘└───────┘ │
|
||||||
|
│ │
|
||||||
|
│ ┌───────┐┌───────┐ │
|
||||||
|
│ │☐지니TV││☑ SNS │ │
|
||||||
|
│ │ 광고 ││ │ │
|
||||||
|
│ │───────││───────│ │
|
||||||
|
│ │지역: ││☑Insta │ │
|
||||||
|
│ │[수원▼]││☑Naver │ │
|
||||||
|
│ │시간: ││☐Kakao │ │
|
||||||
|
│ │[전체▼]││예약:즉시│ │
|
||||||
|
│ │예산: ││무료 │ │
|
||||||
|
│ │[입력...]││ │ │
|
||||||
|
│ └───────┘└───────┘ │
|
||||||
|
│ │
|
||||||
|
│ ┌────────────────┐ │
|
||||||
|
│ │총 예상 비용: 8만원│ │
|
||||||
|
│ │총 예상 노출: 5만명+│ │
|
||||||
|
│ └────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ ┌──────────┐ │
|
||||||
|
│ │다음 단계 │ │
|
||||||
|
│ └──────────┘ │
|
||||||
|
└─────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
**인터랙션**
|
||||||
|
1. **채널 선택**: 체크박스, 다중 선택 가능
|
||||||
|
2. **옵션 설정**: 각 채널별 세부 옵션 입력
|
||||||
|
3. **실시간 계산**: 선택/옵션 변경 시 비용/노출 수 자동 업데이트
|
||||||
|
4. **다음 단계**: 최소 1개 선택 시 버튼 활성화, 최종 승인 화면 이동
|
||||||
|
|
||||||
|
**반응형 처리**
|
||||||
|
- Mobile: 카드 1열 세로 배치
|
||||||
|
- Tablet: 카드 2열 배치
|
||||||
|
- Desktop: 카드 2×2 그리드 배치
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
#### 12-최종승인
|
#### 12-최종승인
|
||||||
|
|
||||||
**개요**
|
**개요**
|
||||||
@ -1009,6 +1442,241 @@ graph TD
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
#### 13-이벤트상세
|
||||||
|
|
||||||
|
**개요**
|
||||||
|
- **목적**: 진행 중인 이벤트 상세 정보 조회
|
||||||
|
- **관련 유저스토리**: UFR-EVENT-060
|
||||||
|
- **비즈니스 중요도**: S/13 (권장, 중간 복잡도)
|
||||||
|
|
||||||
|
**주요 기능**
|
||||||
|
- 이벤트 기본 정보 표시
|
||||||
|
- 실시간 통계 (참여자, 노출수, 조회수, 공유수)
|
||||||
|
- 배포 채널 현황
|
||||||
|
- 최근 참여자 10명
|
||||||
|
- 이벤트 관리 액션 (수정, 종료)
|
||||||
|
|
||||||
|
**UI 구성요소**
|
||||||
|
|
||||||
|
*Mobile (320-767px)*
|
||||||
|
```
|
||||||
|
┌─────────────────────┐
|
||||||
|
│ ← 이벤트 상세 │
|
||||||
|
├─────────────────────┤
|
||||||
|
│ 신규고객 유치 이벤트 │
|
||||||
|
│ 진행중 | D-5 │
|
||||||
|
│ │
|
||||||
|
│ 📊 실시간 통계 │
|
||||||
|
│ ┌────────┐┌────────┐│
|
||||||
|
│ │참여자수 ││노출수 ││
|
||||||
|
│ │ 128명 ││5.2만회 ││
|
||||||
|
│ └────────┘└────────┘│
|
||||||
|
│ ┌────────┐┌────────┐│
|
||||||
|
│ │조회수 ││공유수 ││
|
||||||
|
│ │ 3.8만회││ 156회 ││
|
||||||
|
│ └────────┘└────────┘│
|
||||||
|
│ │
|
||||||
|
│ 📋 기본 정보 │
|
||||||
|
│ 이벤트 기간: │
|
||||||
|
│ 2025-11-01~11-15 │
|
||||||
|
│ │
|
||||||
|
│ 경품: │
|
||||||
|
│ 커피 쿠폰 100매 │
|
||||||
|
│ │
|
||||||
|
│ 참여 방법: │
|
||||||
|
│ 전화번호 입력 │
|
||||||
|
│ │
|
||||||
|
│ 📺 배포 채널 현황 │
|
||||||
|
│ ✅ 우리동네TV │
|
||||||
|
│ 노출: 4.8만회 │
|
||||||
|
│ ✅ 링고비즈 │
|
||||||
|
│ 연결음 업데이트됨 │
|
||||||
|
│ ✅ SNS │
|
||||||
|
│ Instagram: 220회 │
|
||||||
|
│ Naver: 180회 │
|
||||||
|
│ │
|
||||||
|
│ 👥 최근 참여자 │
|
||||||
|
│ • 김** (010-****-1234)│
|
||||||
|
│ • 이** (010-****-5678)│
|
||||||
|
│ • 박** (010-****-9012)│
|
||||||
|
│ ... │
|
||||||
|
│ [전체 참여자 보기 >] │
|
||||||
|
│ │
|
||||||
|
│ ┌─────────────────┐ │
|
||||||
|
│ │ 효과측정 대시보드│ │
|
||||||
|
│ └─────────────────┘ │
|
||||||
|
│ ┌─────────────────┐ │
|
||||||
|
│ │ 이벤트 수정 │ │
|
||||||
|
│ └─────────────────┘ │
|
||||||
|
│ ┌─────────────────┐ │
|
||||||
|
│ │ 이벤트 종료 │ │
|
||||||
|
│ └─────────────────┘ │
|
||||||
|
└─────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
*Desktop (1024px+)*
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ ← 이벤트 상세 [프로필]│
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ [사이드바] 신규고객 유치 이벤트 │
|
||||||
|
│ 진행중 | D-5 │
|
||||||
|
│ • 대시보드 ─────────────────────────│
|
||||||
|
│ • 이벤트 📊 실시간 통계 │
|
||||||
|
│ • 분석 ┌──────┐┌──────┐┌──────┐│
|
||||||
|
│ • 프로필 │참여자 ││노출수 ││조회수 ││
|
||||||
|
│ │128명 ││5.2만회││3.8만회││
|
||||||
|
│ └──────┘└──────┘└──────┘│
|
||||||
|
│ ┌──────┐ │
|
||||||
|
│ │공유수 │ │
|
||||||
|
│ │156회 │ │
|
||||||
|
│ └──────┘ │
|
||||||
|
│ │
|
||||||
|
│ ┌────────────┐┌──────────┐│
|
||||||
|
│ │📋 기본 정보 ││📺 배포현황││
|
||||||
|
│ │ ││ ││
|
||||||
|
│ │기간: ││✅우리동네TV││
|
||||||
|
│ │11/1~11/15 ││ 4.8만회 ││
|
||||||
|
│ │ ││ ││
|
||||||
|
│ │경품: ││✅링고비즈││
|
||||||
|
│ │커피쿠폰100 ││ 업데이트││
|
||||||
|
│ │ ││ ││
|
||||||
|
│ │참여: ││✅SNS ││
|
||||||
|
│ │전화번호 ││ Insta:220││
|
||||||
|
│ │ ││ Naver:180││
|
||||||
|
│ └────────────┘└──────────┘│
|
||||||
|
│ │
|
||||||
|
│ 👥 최근 참여자 [전체보기 >] │
|
||||||
|
│ 김** (010-****-1234) │
|
||||||
|
│ 이** (010-****-5678) │
|
||||||
|
│ 박** (010-****-9012) │
|
||||||
|
│ ... │
|
||||||
|
│ │
|
||||||
|
│ ┌──────┐┌──────┐┌──────┐ │
|
||||||
|
│ │효과측정││수정 ││종료 │ │
|
||||||
|
│ └──────┘└──────┘└──────┘ │
|
||||||
|
└─────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
**인터랙션**
|
||||||
|
1. **실시간 통계**: 5분 간격 자동 갱신
|
||||||
|
2. **전체 참여자 보기**: 참여자 목록 화면으로 이동
|
||||||
|
3. **효과측정 대시보드**: 실시간 대시보드 화면으로 이동
|
||||||
|
4. **이벤트 수정**: 제한적 수정 가능 (배포 후 제목/경품 수정 불가)
|
||||||
|
5. **이벤트 종료**: 확인 다이얼로그 후 즉시 종료
|
||||||
|
|
||||||
|
**반응형 처리**
|
||||||
|
- Mobile: 섹션별 세로 배치
|
||||||
|
- Tablet: 2열 배치 (기본정보 + 배포현황)
|
||||||
|
- Desktop: 그리드 배치 (통계 상단, 정보 2열, 참여자 하단)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### 14-참여자목록
|
||||||
|
|
||||||
|
**개요**
|
||||||
|
- **목적**: 이벤트 참여자 목록 조회 및 관리
|
||||||
|
- **관련 유저스토리**: UFR-PART-020
|
||||||
|
- **비즈니스 중요도**: S/8 (권장, 낮은 복잡도)
|
||||||
|
|
||||||
|
**주요 기능**
|
||||||
|
- 참여자 테이블 (응모번호, 이름, 전화번호, 참여경로, 참여일시, 당첨여부)
|
||||||
|
- 참여 경로별 필터
|
||||||
|
- 당첨 여부 필터
|
||||||
|
- 이름/전화번호 검색
|
||||||
|
|
||||||
|
**UI 구성요소**
|
||||||
|
|
||||||
|
*Mobile (320-767px)*
|
||||||
|
```
|
||||||
|
┌─────────────────────┐
|
||||||
|
│ ← 참여자 목록 │
|
||||||
|
├─────────────────────┤
|
||||||
|
│ [검색창] │
|
||||||
|
│ 🔍 이름/전화번호... │
|
||||||
|
│ │
|
||||||
|
│ 📂 필터 │
|
||||||
|
│ [전체경로▼] [전체▼] │
|
||||||
|
│ │
|
||||||
|
│ 총 128명 참여 │
|
||||||
|
│ │
|
||||||
|
│ ┌─────────────────┐ │
|
||||||
|
│ │ #0001 │ │
|
||||||
|
│ │ 김** │ │
|
||||||
|
│ │ 010-****-1234 │ │
|
||||||
|
│ │ SNS (Instagram) │ │
|
||||||
|
│ │ 2025-11-02 14:23│ │
|
||||||
|
│ │ 당첨 대기 │ │
|
||||||
|
│ └─────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ ┌─────────────────┐ │
|
||||||
|
│ │ #0002 │ │
|
||||||
|
│ │ 이** │ │
|
||||||
|
│ │ 010-****-5678 │ │
|
||||||
|
│ │ 우리동네TV │ │
|
||||||
|
│ │ 2025-11-02 15:45│ │
|
||||||
|
│ │ 당첨 대기 │ │
|
||||||
|
│ └─────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ ┌─────────────────┐ │
|
||||||
|
│ │ #0003 │ │
|
||||||
|
│ │ 박** │ │
|
||||||
|
│ │ 010-****-9012 │ │
|
||||||
|
│ │ 링고비즈 │ │
|
||||||
|
│ │ 2025-11-02 16:12│ │
|
||||||
|
│ │ 당첨 대기 │ │
|
||||||
|
│ └─────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ [더보기...] │
|
||||||
|
└─────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
*Desktop (1024px+)*
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ ← 참여자 목록 [프로필]│
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ [사이드바] 🔍 [검색창] 📂 필터 │
|
||||||
|
│ 이름/전화번호... [전체경로▼]│
|
||||||
|
│ • 대시보드 [전체▼] │
|
||||||
|
│ • 이벤트 총 128명 참여 │
|
||||||
|
│ • 분석 ──────────────────────────│
|
||||||
|
│ • 프로필 │번호│이름│전화번호│경로│일시│당첨│
|
||||||
|
│ ├────┼──┼────┼──┼──┼──┤
|
||||||
|
│ │0001│김**│010-****│SNS│11/2│대기│
|
||||||
|
│ │ │ │-1234 │ │14:23│ │
|
||||||
|
│ ├────┼──┼────┼──┼──┼──┤
|
||||||
|
│ │0002│이**│010-****│우리│11/2│대기│
|
||||||
|
│ │ │ │-5678 │동네│15:45│ │
|
||||||
|
│ ├────┼──┼────┼──┼──┼──┤
|
||||||
|
│ │0003│박**│010-****│링고│11/2│대기│
|
||||||
|
│ │ │ │-9012 │비즈│16:12│ │
|
||||||
|
│ ├────┼──┼────┼──┼──┼──┤
|
||||||
|
│ │... │...│... │... │... │...│
|
||||||
|
│ └────┴──┴────┴──┴──┴──┘
|
||||||
|
│ │
|
||||||
|
│ [1] 2 3 4 5 ... 7 > │
|
||||||
|
│ │
|
||||||
|
│ ┌──────────────┐ │
|
||||||
|
│ │엑셀 다운로드 │ │
|
||||||
|
│ └──────────────┘ │
|
||||||
|
└─────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
**인터랙션**
|
||||||
|
1. **검색**: 입력 중 실시간 검색 결과 업데이트
|
||||||
|
2. **필터 적용**: 경로/당첨여부 선택 시 즉시 목록 갱신
|
||||||
|
3. **카드/행 클릭**: 참여자 상세 정보 모달 표시
|
||||||
|
4. **엑셀 다운로드**: 현재 필터 기준 참여자 목록 다운로드
|
||||||
|
5. **페이지네이션**: 페이지당 20개 표시
|
||||||
|
|
||||||
|
**반응형 처리**
|
||||||
|
- Mobile: 카드 형태 1열 표시
|
||||||
|
- Tablet: 카드 형태 2열 표시
|
||||||
|
- Desktop: 테이블 형태 표시
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
### 5.4 참여자 관리
|
### 5.4 참여자 관리
|
||||||
|
|
||||||
#### 15-이벤트참여
|
#### 15-이벤트참여
|
||||||
@ -1117,6 +1785,294 @@ graph TD
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
#### 16-당첨자추첨
|
||||||
|
|
||||||
|
**개요**
|
||||||
|
- **목적**: 공정한 당첨자 자동 선정
|
||||||
|
- **관련 유저스토리**: UFR-PART-030
|
||||||
|
- **비즈니스 중요도**: M/13 (필수, 중간 복잡도)
|
||||||
|
|
||||||
|
**주요 기능**
|
||||||
|
- 당첨 인원 설정
|
||||||
|
- 매장 방문 고객 가산점 옵션
|
||||||
|
- 자동 추첨 실행
|
||||||
|
- 당첨자 목록 표시
|
||||||
|
- 재추첨 기능
|
||||||
|
- 추첨 이력 보관
|
||||||
|
|
||||||
|
**UI 구성요소**
|
||||||
|
|
||||||
|
**Mobile (320-767px)**
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────┐
|
||||||
|
│ ☰ 당첨자 추첨 👤 │ Header
|
||||||
|
├─────────────────────────────────┤
|
||||||
|
│ │
|
||||||
|
│ 📋 이벤트 정보 │
|
||||||
|
│ ┌─────────────────────────────┐ │
|
||||||
|
│ │ 이벤트명: 신규고객 할인 이벤트 │ │
|
||||||
|
│ │ 총 참여자: 127명 │ │
|
||||||
|
│ │ 추첨 상태: 추첨 전 │ │
|
||||||
|
│ └─────────────────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ 🎯 추첨 설정 │
|
||||||
|
│ ┌─────────────────────────────┐ │
|
||||||
|
│ │ 당첨 인원 │ │
|
||||||
|
│ │ ┌───────┐ ┌──┐ ┌───────┐ │ │
|
||||||
|
│ │ │ - │ │ 5 │ │ + │ │ │
|
||||||
|
│ │ └───────┘ └──┘ └───────┘ │ │
|
||||||
|
│ │ │ │
|
||||||
|
│ │ ☑ 매장 방문 고객 가산점 │ │
|
||||||
|
│ │ (가중치: 1.5배) │ │
|
||||||
|
│ │ │ │
|
||||||
|
│ │ ℹ️ 추첨 방식: 난수 기반 무작위 │ │
|
||||||
|
│ │ 모든 추첨 과정은 자동 기록됩니다 │ │
|
||||||
|
│ └─────────────────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ ┌─────────────────────────────┐ │
|
||||||
|
│ │ 🎲 추첨 시작 │ │ Primary Action
|
||||||
|
│ └─────────────────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ 📜 추첨 이력 (최근 3건) │
|
||||||
|
│ ┌─────────────────────────────┐ │
|
||||||
|
│ │ 2024-01-15 14:30 │ │
|
||||||
|
│ │ 당첨자 5명 | 👁️ 상세보기 │ │
|
||||||
|
│ ├─────────────────────────────┤ │
|
||||||
|
│ │ 2024-01-15 14:25 (재추첨) │ │
|
||||||
|
│ │ 당첨자 5명 | 👁️ 상세보기 │ │
|
||||||
|
│ └─────────────────────────────┘ │
|
||||||
|
│ │
|
||||||
|
├─────────────────────────────────┤
|
||||||
|
│ 홈 이벤트 분석 프로필 │ Nav Bottom
|
||||||
|
└─────────────────────────────────┘
|
||||||
|
|
||||||
|
[추첨 후 화면]
|
||||||
|
┌─────────────────────────────────┐
|
||||||
|
│ ☰ 당첨자 추첨 👤 │
|
||||||
|
├─────────────────────────────────┤
|
||||||
|
│ │
|
||||||
|
│ 🎉 추첨 완료! │
|
||||||
|
│ 총 127명 중 5명 당첨 │
|
||||||
|
│ │
|
||||||
|
│ 🏆 당첨자 목록 │
|
||||||
|
│ ┌─────────────────────────────┐ │
|
||||||
|
│ │ 1위 (응모번호: #00042) │ │
|
||||||
|
│ │ 김** (010-****-1234) │ │
|
||||||
|
│ │ 참여: 우리동네TV 🌟 │ │
|
||||||
|
│ ├─────────────────────────────┤ │
|
||||||
|
│ │ 2위 (응모번호: #00089) │ │
|
||||||
|
│ │ 이** (010-****-5678) │ │
|
||||||
|
│ │ 참여: SNS │ │
|
||||||
|
│ ├─────────────────────────────┤ │
|
||||||
|
│ │ 3위 (응모번호: #00103) │ │
|
||||||
|
│ │ 박** (010-****-9012) │ │
|
||||||
|
│ │ 참여: 링고비즈 🌟 │ │
|
||||||
|
│ ├─────────────────────────────┤ │
|
||||||
|
│ │ 4위 (응모번호: #00012) │ │
|
||||||
|
│ │ 최** (010-****-3456) │ │
|
||||||
|
│ │ 참여: SNS │ │
|
||||||
|
│ ├─────────────────────────────┤ │
|
||||||
|
│ │ 5위 (응모번호: #00067) │ │
|
||||||
|
│ │ 정** (010-****-7890) │ │
|
||||||
|
│ │ 참여: 우리동네TV │ │
|
||||||
|
│ └─────────────────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ 🌟 매장 방문 고객 가산점 적용 │
|
||||||
|
│ │
|
||||||
|
│ ┌───────────┐ ┌───────────┐ │
|
||||||
|
│ │ 📥 엑셀다운 │ │ 🔄 재추첨 │ │
|
||||||
|
│ └───────────┘ └───────────┘ │
|
||||||
|
│ │
|
||||||
|
│ ┌─────────────────────────────┐ │
|
||||||
|
│ │ 당첨자에게 알림 전송 │ │ Primary
|
||||||
|
│ └─────────────────────────────┘ │
|
||||||
|
│ │
|
||||||
|
├─────────────────────────────────┤
|
||||||
|
│ 홈 이벤트 분석 프로필 │
|
||||||
|
└─────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
**Tablet (768-1023px)**
|
||||||
|
```
|
||||||
|
┌────────────────────────────────────────────┐
|
||||||
|
│ ☰ 당첨자 추첨 👤 │
|
||||||
|
├────────────────────────────────────────────┤
|
||||||
|
│ │
|
||||||
|
│ ┌──────────────────┐ ┌──────────────────┐ │
|
||||||
|
│ │ 📋 이벤트 정보 │ │ 🎯 추첨 설정 │ │
|
||||||
|
│ │ │ │ │ │
|
||||||
|
│ │ 이벤트명: │ │ 당첨 인원 │ │
|
||||||
|
│ │ 신규고객 할인 │ │ ┌─┐ ┌─┐ ┌─┐ │ │
|
||||||
|
│ │ │ │ │-│ │5│ │+│ │ │
|
||||||
|
│ │ 총 참여자: │ │ └─┘ └─┘ └─┘ │ │
|
||||||
|
│ │ 127명 │ │ │ │
|
||||||
|
│ │ │ │ ☑ 매장 방문 │ │
|
||||||
|
│ │ 추첨 상태: │ │ 가산점 1.5배 │ │
|
||||||
|
│ │ 추첨 전 │ │ │ │
|
||||||
|
│ │ │ │ ℹ️ 난수 기반 무작위 │ │
|
||||||
|
│ │ │ │ 추첨 과정 자동 기록 │ │
|
||||||
|
│ └──────────────────┘ │ │ │
|
||||||
|
│ │ ┌──────────────┐ │ │
|
||||||
|
│ │ │ 🎲 추첨 시작 │ │ │
|
||||||
|
│ │ └──────────────┘ │ │
|
||||||
|
│ └──────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ 📜 추첨 이력 │
|
||||||
|
│ ┌──────────────────────────────────────┐ │
|
||||||
|
│ │ 날짜 당첨자 상태 상세 │ │
|
||||||
|
│ ├──────────────────────────────────────┤ │
|
||||||
|
│ │ 2024-01-15 5명 완료 👁️ │ │
|
||||||
|
│ │ 2024-01-15 5명 재추첨 👁️ │ │
|
||||||
|
│ └──────────────────────────────────────┘ │
|
||||||
|
│ │
|
||||||
|
├────────────────────────────────────────────┤
|
||||||
|
│ 홈 이벤트 분석 프로필 │
|
||||||
|
└────────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
**Desktop (1024px+)**
|
||||||
|
```
|
||||||
|
┌──────────────────────────────────────────────────────────┐
|
||||||
|
│ ☰ 당첨자 추첨 👤 │
|
||||||
|
├──────────────────────────────────────────────────────────┤
|
||||||
|
│ │
|
||||||
|
│ ┌───────────────────────┐ ┌───────────────────────────┐ │
|
||||||
|
│ │ 📋 이벤트 정보 │ │ 🎯 추첨 설정 │ │
|
||||||
|
│ │ │ │ │ │
|
||||||
|
│ │ 이벤트명: │ │ 당첨 인원 │ │
|
||||||
|
│ │ 신규고객 할인 이벤트 │ │ ┌───┐ ┌────┐ ┌───┐ │ │
|
||||||
|
│ │ │ │ │ - │ │ 5 │ │ + │ │ │
|
||||||
|
│ │ 이벤트 기간: │ │ └───┘ └────┘ └───┘ │ │
|
||||||
|
│ │ 2024-01-01 ~ 01-14 │ │ │ │
|
||||||
|
│ │ │ │ ☑ 매장 방문 고객 가산점 │ │
|
||||||
|
│ │ 총 참여자: 127명 │ │ (가중치: 1.5배) │ │
|
||||||
|
│ │ - 우리동네TV: 45명 │ │ │ │
|
||||||
|
│ │ - 링고비즈: 32명 │ │ ℹ️ 추첨 방식 │ │
|
||||||
|
│ │ - 지니TV: 28명 │ │ • 난수 기반 무작위 │ │
|
||||||
|
│ │ - SNS: 22명 │ │ • 추첨 과정 자동 기록 │ │
|
||||||
|
│ │ │ │ • 공정성 보장 │ │
|
||||||
|
│ │ 추첨 상태: 추첨 전 │ │ │ │
|
||||||
|
│ │ │ │ ┌─────────────────────┐ │ │
|
||||||
|
│ └───────────────────────┘ │ │ 🎲 추첨 시작 │ │ │
|
||||||
|
│ │ └─────────────────────┘ │ │
|
||||||
|
│ └───────────────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ 📜 추첨 이력 │
|
||||||
|
│ ┌────────────────────────────────────────────────────┐ │
|
||||||
|
│ │ 추첨 일시 당첨자 재추첨 추첨방식 상세 │ │
|
||||||
|
│ ├────────────────────────────────────────────────────┤ │
|
||||||
|
│ │ 2024-01-15 14:30 5명 - 무작위 👁️ │ │
|
||||||
|
│ │ 2024-01-15 14:25 5명 Y 무작위 👁️ │ │
|
||||||
|
│ │ 2024-01-15 14:20 5명 - 무작위 👁️ │ │
|
||||||
|
│ └────────────────────────────────────────────────────┘ │
|
||||||
|
│ │
|
||||||
|
└──────────────────────────────────────────────────────────┘
|
||||||
|
|
||||||
|
[추첨 후 화면 - Desktop]
|
||||||
|
┌──────────────────────────────────────────────────────────┐
|
||||||
|
│ ☰ 당첨자 추첨 결과 👤 │
|
||||||
|
├──────────────────────────────────────────────────────────┤
|
||||||
|
│ │
|
||||||
|
│ 🎉 추첨 완료! 총 127명 중 5명 당첨 │
|
||||||
|
│ │
|
||||||
|
│ 🏆 당첨자 목록 ┌──────────────────────┐ │
|
||||||
|
│ ┌────────────────────────────┐ │ 📊 통계 │ │
|
||||||
|
│ │ 순위 응모번호 이름 전화번호 참여경로│ │ │ │
|
||||||
|
│ ├────────────────────────────┤ │ 채널별 당첨 분포: │ │
|
||||||
|
│ │ 1위 #00042 김** 010-****-1234 우리동네TV 🌟│ │ 우리동네TV: 2명 │ │
|
||||||
|
│ │ 2위 #00089 이** 010-****-5678 SNS │ │ 링고비즈: 1명 │ │
|
||||||
|
│ │ 3위 #00103 박** 010-****-9012 링고비즈 🌟│ │ SNS: 2명 │ │
|
||||||
|
│ │ 4위 #00012 최** 010-****-3456 SNS │ │ │ │
|
||||||
|
│ │ 5위 #00067 정** 010-****-7890 우리동네TV │ │ 가산점 적용: 2명 │ │
|
||||||
|
│ └────────────────────────────┘ │ │ │
|
||||||
|
│ │ 추첨 일시: │ │
|
||||||
|
│ 🌟 매장 방문 고객 가산점 적용 │ 2024-01-15 14:30 │ │
|
||||||
|
│ └──────────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ ┌────────────┐ ┌────────────┐ ┌────────────────────┐ │
|
||||||
|
│ │ 📥 엑셀다운 │ │ 🔄 재추첨 │ │ 당첨자에게 알림 전송 │ │
|
||||||
|
│ └────────────┘ └────────────┘ └────────────────────┘ │
|
||||||
|
│ │
|
||||||
|
└──────────────────────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
**인터랙션**
|
||||||
|
|
||||||
|
**추첨 전 설정**
|
||||||
|
- 당첨 인원: +/- 버튼으로 조정 (1~100명)
|
||||||
|
- 가산점 옵션: 체크박스 토글
|
||||||
|
- 추첨 시작: 확인 다이얼로그 표시 → "총 127명 중 5명을 추첨하시겠습니까?"
|
||||||
|
|
||||||
|
**추첨 실행**
|
||||||
|
- 로딩 애니메이션: 3초간 슬롯머신 효과
|
||||||
|
- 진행 상황: "추첨 중... (난수 생성 중)" → "당첨자 선정 중..." → "완료!"
|
||||||
|
- 추첨 완료: 당첨자 목록 페이드인 애니메이션
|
||||||
|
|
||||||
|
**당첨자 목록**
|
||||||
|
- 순위별 하이라이트: 1위(금색), 2위(은색), 3위(동색)
|
||||||
|
- 가산점 적용 표시: 🌟 아이콘으로 매장 방문 고객 구분
|
||||||
|
- 개인정보 마스킹: 이름(김**), 전화번호(010-****-1234)
|
||||||
|
|
||||||
|
**재추첨**
|
||||||
|
- 재추첨 버튼: 경고 다이얼로그 표시
|
||||||
|
- "재추첨 시 현재 당첨자 정보가 변경됩니다. 계속하시겠습니까?"
|
||||||
|
- "이전 추첨 이력은 보관됩니다"
|
||||||
|
- 확인 시: 새로운 추첨 실행, 이전 결과는 이력에 "(재추첨)" 표시
|
||||||
|
|
||||||
|
**알림 전송**
|
||||||
|
- 알림 전송 버튼: 확인 다이얼로그 표시
|
||||||
|
- "5명의 당첨자에게 SMS 알림을 전송하시겠습니까?"
|
||||||
|
- "예상 비용: 500원 (100원/건)"
|
||||||
|
- 전송 완료: 토스트 메시지 "알림이 전송되었습니다"
|
||||||
|
|
||||||
|
**엑셀 다운로드**
|
||||||
|
- 파일명: `당첨자목록_[이벤트명]_[추첨일시].xlsx`
|
||||||
|
- 포함 정보: 순위, 응모번호, 이름, 전화번호, 참여경로, 가산점여부, 추첨일시
|
||||||
|
|
||||||
|
**추첨 이력 상세보기**
|
||||||
|
- 클릭 시: 모달로 해당 추첨의 당첨자 목록 표시
|
||||||
|
- 재추첨 여부, 추첨 설정 정보 포함
|
||||||
|
|
||||||
|
**반응형 처리**
|
||||||
|
|
||||||
|
**Mobile (320-767px)**
|
||||||
|
- 1열 레이아웃: 이벤트 정보 → 추첨 설정 → 추첨 버튼 → 이력
|
||||||
|
- 당첨자 목록: 카드형 (1명씩)
|
||||||
|
- 추첨 설정: 전체 너비 사용
|
||||||
|
- 버튼: 스택형 배치 (세로 정렬)
|
||||||
|
|
||||||
|
**Tablet (768-1023px)**
|
||||||
|
- 2열 레이아웃: 이벤트 정보 | 추첨 설정
|
||||||
|
- 당첨자 목록: 테이블 형식 (간소화)
|
||||||
|
- 추첨 이력: 테이블 형식
|
||||||
|
- 버튼: 수평 배치
|
||||||
|
|
||||||
|
**Desktop (1024px+)**
|
||||||
|
- 최적화된 테이블 레이아웃
|
||||||
|
- 당첨자 목록: 전체 정보 표시
|
||||||
|
- 우측에 통계 패널 추가
|
||||||
|
- 추첨 이력: 전체 정보 표시
|
||||||
|
- 버튼: 수평 배치, 우측 정렬
|
||||||
|
|
||||||
|
**터치/마우스 최적화**
|
||||||
|
- Mobile: 터치 영역 최소 44px
|
||||||
|
- Desktop: 호버 효과, 툴팁 표시
|
||||||
|
- 재추첨/알림 버튼: 경고색 (주의 필요)
|
||||||
|
|
||||||
|
**성능 최적화**
|
||||||
|
- 추첨 실행: 서버 사이드 처리 (공정성 보장)
|
||||||
|
- 로딩 상태: 스켈레톤 UI 표시
|
||||||
|
- 당첨자 목록: 페이징 (50명 이상 시)
|
||||||
|
- 추첨 이력: 최근 10건만 표시, "더보기" 옵션
|
||||||
|
|
||||||
|
**접근성**
|
||||||
|
- 추첨 시작 버튼: aria-label="추첨 시작, 127명 중 5명 선정"
|
||||||
|
- 재추첨 버튼: aria-label="재추첨, 주의 필요"
|
||||||
|
- 당첨자 정보: 스크린리더용 전체 정보 제공
|
||||||
|
- 키보드 네비게이션: Tab, Enter로 모든 기능 접근 가능
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
### 5.5 성과 분석
|
### 5.5 성과 분석
|
||||||
|
|
||||||
#### 17-실시간대시보드
|
#### 17-실시간대시보드
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user