diff --git a/design/uiux/uiux.md b/design/uiux/uiux.md index 2ebf7d4..4763fd7 100644 --- a/design/uiux/uiux.md +++ b/design/uiux/uiux.md @@ -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 이벤트 생성 플로우 +#### 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이벤트추천 **개요** @@ -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-최종승인 **개요** @@ -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 참여자 관리 #### 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 성과 분석 #### 17-실시간대시보드