edit uiux

design/uiux/style-guide.md

@@ -454,6 +454,74 @@ Small:
 └─────────────────────────┘
 ```
 
+#### Selection Card (선택형 카드)
+```
+사용: 옵션 선택 화면 (09-콘텐츠미리보기.html)
+특징: 카드 전체가 선택 가능한 인터랙티브 영역
+
+배경: #FFFFFF
+테두리: 3px solid transparent
+둥근 모서리: 12px
+그림자: 0 2px 8px rgba(0, 0, 0, 0.08)
+내부 패딩: 24px
+커서: pointer
+
+상태별:
+- Default:
+  - 테두리 transparent
+  - 그림자 0 2px 8px rgba(0, 0, 0, 0.08)
+
+- Hover:
+  - transform: translateY(-2px)
+  - 그림자 0 8px 16px rgba(0, 0, 0, 0.1)
+
+- Selected:
+  - 테두리 3px solid #E31E24
+  - 그림자 0 4px 12px rgba(227, 30, 36, 0.2)
+  - 우측 상단 체크 배지 표시
+
+구조:
+┌─────────────────────────┐
+│                    [✓]  │ ← 선택 배지 (조건부)
+│ [미리보기 이미지 1:1]    │
+│                         │
+│ H3 옵션 제목            │
+│ Body-S 설명             │
+│                         │
+│       [크게보기]         │
+└─────────────────────────┘
+
+Selected Badge (체크 배지):
+- 위치: 우측 상단 (absolute)
+- 크기: 32 x 32px
+- 배경: #E31E24
+- 아이콘: check (White, 20px)
+- 둥근 모서리: 50% (원형)
+- Display: none (기본), flex (선택 시)
+- z-index: 10
+
+Image Preview:
+- 비율: 1:1 (aspect-ratio)
+- 배경: #F5F5F5 (플레이스홀더)
+- 둥근 모서리: 12px
+- object-fit: cover
+
+Radio Button:
+- Display: none (숨김)
+- 기능: 유지 (폼 제출용)
+- 접근성: 키보드 네비게이션 지원
+
+전환 애니메이션:
+- Duration: 0.3s
+- Easing: ease
+
+주의사항:
+- 카드 내부 버튼 클릭 시 이벤트 버블링 방지 필요
+  - event.stopPropagation() 사용
+- 카드 클릭과 보조 액션 버튼 클릭 구분
+- 키보드 접근성: Enter/Space로 선택 가능
+```
+
 #### Stat Card (지표 카드)
 ```
 배경: Gradient 또는 Solid
@@ -500,6 +568,47 @@ Line Height: 1.5
 Resize: vertical (세로 방향만)
 ```
 
+#### Editable Field (인라인 편집)
+```
+사용: 08-AI이벤트추천.html (제목, 경품 편집)
+특징: contenteditable을 활용한 인라인 편집
+
+배경: 투명 (기본), #F5F5F5 (hover), #FFFFFF (focus)
+테두리: 1px dashed #D9D9D9
+둥근 모서리: 4px
+내부 패딩: 4px 8px
+폰트: 문맥에 따름 (제목: H3, 경품: Body)
+커서: text
+
+상태별:
+- Default:
+  - 테두리: 1px dashed #D9D9D9
+  - 배경: 투명
+
+- Hover:
+  - 테두리: 1px dashed #E31E24
+  - 배경: #F5F5F5
+
+- Focus:
+  - outline: none
+  - 테두리: 1px solid #E31E24
+  - 배경: #FFFFFF
+
+전환 애니메이션:
+- Duration: 200ms (Fast)
+- Easing: ease-out
+
+접근성:
+- contenteditable="true"
+- role="textbox"
+- aria-label="편집 가능한 필드명"
+
+주의사항:
+- 빈 값 방지 (최소 1자 이상)
+- Enter 키로 편집 완료 (blur)
+- maxLength 속성으로 길이 제한
+```
+
 #### Placeholder
 ```
 색상: #9E9E9E (Gray-500)
@@ -533,7 +642,98 @@ Resize: vertical (세로 방향만)
 - Disabled: 배경 #F5F5F5, 테두리 #E0E0E0
 ```
 
-### 6.5 Bottom Navigation
+### 6.5 Budget Navigation (예산 선택 탭)
+
+```
+사용: 08-AI이벤트추천.html
+특징: Sticky 네비게이션으로 예산 섹션 이동
+
+배경: #F5F5F5 (배경색)
+위치: sticky, top 56px (Header 아래)
+z-index: 10
+패딩: 16px 0
+
+구조:
+┌────────────────────────────────┐
+│ [💰 저비용] [💰💰 중비용] [💰💰💰 고비용] │
+└────────────────────────────────┘
+
+버튼:
+- 크기: Medium (44px 높이)
+- 간격: 8px
+- flex-1 (균등 분배)
+
+상태별:
+- Default:
+  - 배경: White
+  - 텍스트: #4A4A4A
+  - 테두리: 1px solid #E0E0E0
+
+- Active:
+  - 배경: #E31E24
+  - 텍스트: White
+  - 테두리: none
+  - 그림자: 0 2px 4px rgba(227, 30, 36, 0.2)
+
+- Hover (비활성화 탭):
+  - 배경: #FFF5F5
+  - 테두리: 1px solid #E31E24
+
+상호작용:
+- 클릭 시: 해당 예산 섹션으로 smooth scroll
+- Scroll 시: 현재 보이는 섹션에 맞춰 Active 상태 변경
+```
+
+### 6.6 Option Card (이벤트 옵션 카드)
+
+```
+사용: 08-AI이벤트추천.html
+특징: 온라인/오프라인 배지 + Editable Field + Radio 선택
+
+배경: #FFFFFF
+테두리: 1px solid #E0E0E0
+둥근 모서리: 12px
+그림자: 0 2px 8px rgba(0, 0, 0, 0.08)
+내부 패딩: 24px
+
+구조:
+┌─────────────────────────┐
+│ [온라인] 배지      [◯]  │
+│                         │
+│ 제목 (editable)         │
+│ 경품명 (editable)       │
+│                         │
+│ 참여 방법: ...          │
+│                         │
+│ 📊 예상 참여자: 200명  │
+│ 💰 예상 비용: 30만원   │
+│ 📈 예상 ROI: 180%      │
+└─────────────────────────┘
+
+온라인/오프라인 배지:
+- 크기: 패딩 4px 12px
+- 폰트: Body-S (12px SemiBold)
+- 둥근 모서리: 12px (pill)
+- 온라인: 배경 #E3F2FD (Blue), 텍스트 #0066FF
+- 오프라인: 배경 #FCE4EC (Pink), 텍스트 #E31E24
+
+Radio 버튼:
+- 위치: 우측 상단
+- 크기: 24 x 24px
+- Display: visible (기본 보임)
+
+Editable Field:
+- 스타일: 인라인 편집 (상세 내용은 6.3 참조)
+- Hover: 점선 테두리로 편집 가능 표시
+- Focus: 실선 테두리로 변경
+
+통계 정보:
+- 폰트: Body-S (12px Regular)
+- 색상: #4A4A4A (Secondary)
+- 아이콘: Material Icons (16px)
+```
+
+### 6.7 Bottom Navigation
 
 ```
 배경: #FFFFFF (White)
@@ -563,7 +763,7 @@ Resize: vertical (세로 방향만)
 - 아이콘-레이블: 4px (XS)
 ```
 
-### 6.6 Stepper (단계 표시)
+### 6.8 Stepper (단계 표시)
 
 #### Progress Stepper (AI 이벤트 생성)
 ```
@@ -1255,6 +1455,14 @@ Secondary:
 
 ## 15. 변경 이력
 
+### Version 1.1 (2025-10-21)
+- 프로토타입 기반 컴포넌트 업데이트
+- Editable Field 컴포넌트 추가 (인라인 편집)
+- Budget Navigation 컴포넌트 추가 (Sticky 탭 네비게이션)
+- Option Card 컴포넌트 추가 (온라인/오프라인 배지)
+- Selection Card 세부사항 보완 (이미지 비율, z-index)
+- 이벤트 버블링 방지 가이드 추가
+
 ### Version 1.0 (2025-10-17)
 - 초안 작성
 - 브랜드 아이덴티티 정의

design/uiux/uiux-design.md

@@ -0,0 +1,944 @@
+# KT AI 기반 소상공인 이벤트 자동 생성 서비스 - UI/UX 설계서
+
+## 문서 정보
+- 작성일: 2025-10-21
+- 버전: 2.0
+- 기반 문서: 유저스토리 v2.0, 프로토타입 분석
+- 설계 원칙: Mobile First, 접근성 우선, 일관성
+
+---
+
+## 1. 서비스 개요
+
+### 1.1 서비스 목적
+소상공인이 AI의 도움으로 전문 마케터 없이도 효과적인 이벤트를 기획하고 실행할 수 있도록 지원
+
+### 1.2 핵심 가치
+- **혁신성**: AI 기반 자동화로 3분 만에 이벤트 콘텐츠 생성
+- **신뢰성**: KT 브랜드 기반의 안정적인 서비스
+- **접근성**: 초보자도 쉽게 사용할 수 있는 직관적 인터페이스
+
+### 1.3 타겟 사용자
+- **Primary**: 마케팅 전문 지식이 부족한 소상공인
+- **Secondary**: 이벤트 마케팅 경험이 있는 중소기업 담당자
+
+---
+
+## 2. 화면 구성
+
+### 2.1 전체 화면 구조 (총 17개)
+
+#### 인증 영역 (01~04)
+- **01-로그인.html**: 이메일/비밀번호 로그인
+- **02-회원가입.html**: 신규 사용자 등록
+- **03-프로필.html**: 사용자 프로필 및 매장 정보 관리
+- **04-로그아웃확인.html**: 로그아웃 확인 모달
+
+#### 대시보드 영역 (05~06)
+- **05-대시보드.html**: 메인 홈 화면
+  - KPI 요약 (진행 중 이벤트, 총 참여자, 평균 ROI)
+  - 빠른 시작 (새 이벤트, 분석)
+  - 진행 중인 이벤트 목록
+  - 최근 활동 타임라인
+- **06-이벤트목록.html**: 전체 이벤트 목록 및 필터링
+
+#### 이벤트 생성 플로우 (07~12, 7단계)
+- **07-이벤트목적선택.html**: 이벤트 목적 선택
+- **08-AI이벤트추천.html**: AI 트렌드 분석 및 이벤트 추천
+- **09-콘텐츠미리보기.html**: SNS 이미지 스타일 선택
+- **10-콘텐츠편집.html**: 텍스트 및 색상 편집
+- **11-배포채널선택.html**: 배포 채널 선택
+- **12-최종승인.html**: 이벤트 최종 검토 및 승인
+
+#### 이벤트 관리 및 모니터링 (13~17)
+- **13-이벤트상세.html**: 이벤트 상세 정보 및 실시간 KPI
+- **14-참여자목록.html**: 참여자 관리 및 필터링
+- **15-이벤트참여.html**: 사용자 이벤트 참여 화면 (고객용)
+- **16-당첨자추첨.html**: 당첨자 추첨 및 관리
+- **17-성과분석.html**: 실시간 대시보드 및 성과 분석
+
+### 2.2 화면 흐름도
+
+```
+[01-로그인 / 02-회원가입]
+         ↓
+[05-대시보드] (Bottom Nav: 홈)
+    ↓
+    ├─ [06-이벤트목록] (Bottom Nav: 이벤트)
+    │      ↓
+    │  [13-이벤트상세] → [14-참여자목록] → [16-당첨자추첨]
+    │      ↓
+    │  [17-성과분석] (Bottom Nav: 분석)
+    │
+    └─ [새 이벤트 생성 플로우] (FAB)
+         ↓
+       [07-목적선택]
+         ↓
+       [08-AI추천]
+         ↓
+       [09-콘텐츠미리보기]
+         ↓
+       [10-콘텐츠편집]
+         ↓
+       [11-배포채널선택]
+         ↓
+       [12-최종승인]
+         ↓
+       [13-이벤트상세]
+
+[03-프로필] (Bottom Nav: 프로필)
+    ↓
+[04-로그아웃확인]
+```
+
+---
+
+## 3. 공통 컴포넌트
+
+### 3.1 Navigation
+
+#### Bottom Navigation (모든 메인 화면)
+```
+구조: 4개 탭
+- 홈: 05-대시보드.html
+- 이벤트: 06-이벤트목록.html
+- 분석: 17-성과분석.html
+- 프로필: 03-프로필.html
+
+디자인:
+- 높이: 60px
+- 배경: White
+- 그림자: 0 -2px 8px rgba(0, 0, 0, 0.08)
+- 아이콘: Material Icons (24px)
+- 활성화: KT Red (#E31E24)
+- 비활성화: Gray (#9E9E9E)
+```
+
+#### Header
+```
+구조: 타이틀 + 뒤로가기 + 프로필
+- 대시보드: 뒤로가기 없음
+- 이벤트 생성 플로우: 프로필 버튼 숨김
+
+디자인:
+- 높이: 56px
+- 배경: White
+- 제목: H1 (24px Bold)
+- 아이콘: Material Icons (24px)
+```
+
+#### FAB (Floating Action Button)
+```
+위치: 우측 하단 고정
+기능: 새 이벤트 생성 (07-이벤트목적선택.html)
+
+디자인:
+- 크기: 56 x 56px
+- 배경: KT Red (#E31E24)
+- 아이콘: add (White, 24px)
+- 그림자: 0 4px 12px rgba(227, 30, 36, 0.3)
+- Bottom Navigation 위 80px
+```
+
+### 3.2 Card 컴포넌트
+
+#### Default Card
+```css
+배경: #FFFFFF
+테두리: 1px solid #E0E0E0
+둥근 모서리: 12px
+그림자: 0 2px 8px rgba(0, 0, 0, 0.08)
+패딩: 24px
+```
+
+#### Event Card
+```
+구조:
+- 이벤트명 (H3)
+- 상태 배지 (진행중/예정/종료)
+- 기간 정보 (Body-S)
+- 통계 정보 (참여자, ROI 등)
+
+상태:
+- Hover: 테두리 #E31E24, 그림자 증가
+- Selected: 테두리 2px solid #E31E24
+```
+
+#### Selection Card (09-콘텐츠미리보기)
+```
+특징: 카드 전체가 선택 가능한 영역
+- Radio 버튼 숨김 (기능은 유지)
+- 선택 시 시각적 피드백:
+  - 테두리: 3px solid #E31E24
+  - 그림자: 0 4px 12px rgba(227, 30, 36, 0.2)
+  - 우측 상단 체크 배지 표시
+- Hover: transform translateY(-2px)
+```
+
+### 3.3 Form 컴포넌트
+
+#### Text Input
+```css
+높이: 48px
+패딩: 16px
+테두리: 1px solid #D9D9D9
+둥근 모서리: 8px
+폰트: Body-L (16px Regular)
+
+Focus:
+- 테두리: 2px solid #0066FF
+- 그림자: 0 0 0 4px rgba(0, 102, 255, 0.1)
+
+Error:
+- 테두리: 2px solid #D32F2F
+- 그림자: 0 0 0 4px rgba(211, 47, 47, 0.1)
+```
+
+#### Checkbox & Radio
+```
+크기: 24 x 24px (터치 영역 44px)
+
+Checkbox:
+- 둥근 모서리: 4px
+- Checked: 배경 #E31E24, 체크마크 White
+
+Radio:
+- 둥근 모서리: 50% (원형)
+- Selected: 테두리 #E31E24, 내부 점 12px
+```
+
+### 3.4 Modal 컴포넌트
+
+#### Modal Dialog
+```
+최대 너비: 400px (Mobile), 480px (Tablet+)
+패딩: 24px
+둥근 모서리: 16px
+그림자: 0 8px 24px rgba(0, 0, 0, 0.2)
+
+Backdrop: rgba(0, 0, 0, 0.6)
+
+애니메이션:
+- Show: opacity 0→1, scale 0.95→1, 250ms
+- Hide: opacity 1→0, scale 1→0.95, 200ms
+```
+
+#### Bottom Sheet
+```
+최대 높이: 80vh
+둥근 모서리: 24px 24px 0 0
+Handle: 40px x 4px, #D9D9D9 (상단 중앙)
+
+애니메이션:
+- Open: translateY(100% → 0), 300ms
+- Close: translateY(0 → 100%), 250ms
+```
+
+#### Toast
+```
+위치: 하단 중앙, Bottom Nav 위 80px
+배경: #1A1A1A (90% opacity)
+텍스트: White
+패딩: 16px 24px
+둥근 모서리: 8px
+자동 닫힘: 3초
+
+타입별 아이콘:
+- Success: ✓ (#00C853)
+- Error: ✕ (#D32F2F)
+- Info: ⓘ (#0288D1)
+```
+
+---
+
+## 4. 화면별 상세 설계
+
+### 4.1 인증 영역
+
+#### 01-로그인.html
+```
+레이아웃:
+- 로고 (상단 중앙)
+- 로그인 폼 (중앙 정렬)
+- 회원가입/비밀번호찾기 링크 (하단)
+
+컴포넌트:
+- Email Input
+- Password Input
+- "로그인 유지" Checkbox
+- Primary Button (로그인)
+- Text Button (회원가입, 비밀번호 찾기)
+
+유저스토리: UFR-USER-020
+```
+
+#### 02-회원가입.html
+```
+레이아웃: 세로 스크롤
+섹션:
+1. 기본 정보
+   - 이름, 전화번호, 이메일, 비밀번호
+2. 매장 정보
+   - 매장명, 업종, 주소, 영업시간
+3. 사업자번호 (검증 필요)
+
+컴포넌트:
+- Text Input (각 필드)
+- Select Dropdown (업종)
+- Primary Button (회원가입)
+- 검증 에러 메시지
+
+유저스토리: UFR-USER-010
+```
+
+#### 03-프로필.html
+```
+레이아웃:
+- 프로필 헤더 (상단)
+- 편집 폼 (세로 스크롤)
+- 저장/로그아웃 버튼 (하단 고정)
+
+섹션:
+1. 사용자 정보 (아이콘 + 이름/이메일)
+2. 기본 정보 편집
+3. 매장 정보 편집
+4. 비밀번호 변경
+5. 로그아웃 버튼
+
+컴포넌트:
+- Text Input (각 필드)
+- Primary Button (저장)
+- Text Button (로그아웃, Error 색상)
+
+유저스토리: UFR-USER-030
+Bottom Nav: 프로필 탭 활성화
+```
+
+#### 04-로그아웃확인.html
+```
+유형: Modal Dialog
+
+구조:
+- 제목: "로그아웃 하시겠습니까?"
+- 본문: 안내 메시지
+- 버튼: 취소 (Secondary) / 확인 (Primary)
+
+유저스토리: UFR-USER-040
+```
+
+### 4.2 대시보드 영역
+
+#### 05-대시보드.html
+```
+레이아웃: 세로 스크롤
+
+섹션:
+1. KPI 요약 (그리드)
+   - 진행 중 이벤트 수
+   - 총 참여자 수
+   - 평균 ROI
+
+2. 빠른 시작 (2개 카드)
+   - 새 이벤트 만들기
+   - 분석 보기
+
+3. 진행 중인 이벤트 (카드 리스트)
+   - 최대 5개 표시
+   - "전체보기" 링크
+
+4. 최근 활동 (타임라인)
+
+컴포넌트:
+- KPI Card (3개, 그리드)
+- Action Card (2개, 그리드)
+- Event Card (리스트)
+- Timeline Item (리스트)
+- FAB (새 이벤트)
+
+유저스토리: UFR-EVENT-010
+Bottom Nav: 홈 탭 활성화
+```
+
+#### 06-이벤트목록.html
+```
+레이아웃: 세로 스크롤
+
+섹션:
+1. 검색 바
+2. 필터 (상태, 기간)
+3. 정렬 (최신순, 참여자순, ROI순)
+4. 이벤트 카드 리스트
+5. 페이지네이션
+
+컴포넌트:
+- Search Input
+- Filter Chips
+- Dropdown (정렬)
+- Event Card (리스트)
+- Pagination
+
+유저스토리: UFR-EVENT-070
+Bottom Nav: 이벤트 탭 활성화
+```
+
+### 4.3 이벤트 생성 플로우
+
+#### 07-이벤트목적선택.html
+```
+레이아웃: 세로 스크롤
+
+섹션:
+- 제목: "이벤트 목적을 선택하세요"
+- 옵션 카드 (4개)
+  1. 신규 고객 유치
+  2. 재방문 유도
+  3. 매출 증대
+  4. 인지도 향상
+
+컴포넌트:
+- Option Card (4개, Radio 버튼 포함)
+  - 아이콘 + 제목 + 설명
+- Primary Button (다음)
+
+상호작용:
+- 카드 선택 시 강조 표시
+- 선택 후 다음 버튼 활성화
+
+유저스토리: UFR-EVENT-020
+Progress: 1/7 단계
+```
+
+#### 08-AI이벤트추천.html
+```
+레이아웃: 세로 스크롤
+
+섹션:
+1. AI 트렌드 분석 결과 (상단 카드)
+   - 업종 트렌드 (store 아이콘)
+   - 지역 트렌드 (location_on 아이콘)
+   - 시즌 트렌드 (wb_sunny 아이콘)
+
+2. 예산별 추천 이벤트 제목 및 설명
+   - "예산별 추천 이벤트"
+   - "각 예산별 2가지 방식 (온라인 1개, 오프라인 1개)을 추천합니다"
+
+3. 예산 선택 네비게이션 (Sticky)
+   - 💰 저비용 / 💰💰 중비용 / 💰💰💰 고비용
+   - 탭 형태, 클릭 시 해당 섹션으로 스크롤
+
+4. 예산별 추천 이벤트 (각 예산당 2개 카드)
+   - 저비용 (25~30만원): 온라인/오프라인 각 1개
+   - 중비용 (60~70만원): 온라인/오프라인 각 1개
+   - 고비용 (200~250만원): 온라인/오프라인 각 1개
+   - 각 카드 구성:
+     - 온라인/오프라인 배지
+     - 이벤트 제목 (인라인 편집 가능, editable-field)
+     - 경품명 (인라인 편집 가능, editable-field)
+     - 참여 방법
+     - 예상 통계 (참여자 수, 비용, ROI)
+     - Radio 버튼 (카드 내부)
+
+컴포넌트:
+- Trend Analysis Card (3개 트렌드 항목)
+- Budget Navigation (Sticky, 3개 버튼)
+- Option Card (총 6개, Radio 선택)
+  - 온라인/오프라인 배지
+  - Editable Field (제목, 경품)
+  - Radio 버튼 (visible)
+- Primary Button (다음)
+
+상호작용:
+- 예산 네비게이션 클릭: 해당 섹션으로 smooth scroll
+- Editable Field 클릭: 인라인 편집 활성화
+- 제목/경품 hover: 편집 가능 표시 (점선 테두리)
+- Radio 선택: 1개만 선택 가능
+- 선택 후 다음 버튼 활성화
+
+유저스토리: UFR-EVENT-030, UFR-AI-010
+Progress: 2/7 단계
+
+특징:
+- 예산별 2가지 방식 제공 (온라인/오프라인)
+- 총 6개 옵션 중 1개 선택
+- 인라인 편집으로 즉시 커스터마이징
+```
+
+#### 09-콘텐츠미리보기.html
+```
+레이아웃: 세로 스크롤
+
+섹션:
+- 제목: "SNS 이미지 스타일을 선택하세요"
+- 스타일 카드 (5개 그리드)
+  1. 심플 - 깔끔하고 읽기 쉬운 디자인
+  2. 모던 - 트렌디하고 세련된 디자인
+  3. 귀여움 - 친근하고 따뜻한 디자인
+  4. 고급스러움 - 프리미엄 느낌의 디자인
+  5. 트렌디 - MZ세대 감성의 디자인
+
+컴포넌트:
+- Style Selection Card (5개, 카드 선택 UI)
+  구조:
+  - Selected Badge (우측 상단, 조건부)
+    - 크기: 32x32px
+    - 배경: KT Red (#E31E24)
+    - 아이콘: check (White, 20px)
+    - 둥근 모서리: 50% (원형)
+  - Image Preview (1:1 비율)
+    - 배경: Gray-100 (플레이스홀더)
+    - 둥근 모서리: 12px
+  - Style Name (H3)
+  - Description (Body-S, Secondary)
+  - "크게보기" 버튼 (Secondary Button, Small)
+  - Radio Input (display: none)
+
+  스타일:
+  - 기본: border 3px solid transparent
+  - Hover: transform translateY(-2px), 그림자 증가
+  - Selected: border-color KT Red, 그림자 강조
+  - Cursor: pointer
+
+- Fullscreen Modal
+  - 배경: rgba(0, 0, 0, 0.95)
+  - Close 버튼 (우측 상단)
+  - Image (contain, max 100%)
+
+- Primary Button (다음)
+
+상호작용:
+- 카드 클릭: Radio 선택 토글
+- Selected 시: 테두리 강조 + 체크 배지 표시
+- "크게보기" 클릭: 전체화면 모달 (이벤트 버블링 방지)
+- 모달 닫기: 배경 클릭 or X 버튼
+- AI 생성 시간: 약 5초 (로딩 표시)
+
+유저스토리: UFR-CONT-010
+Progress: 3/7 단계
+
+구현 특징:
+- Radio 버튼 숨김 (폼 제출용으로만 사용)
+- 카드 전체가 label로 작동
+- 이벤트 버블링 방지 (stopPropagation)
+- 키보드 접근성 지원 (Tab, Enter)
+- transition: all 0.3s ease
+```
+
+#### 10-콘텐츠편집.html
+```
+레이아웃:
+- Mobile: 세로 스택 (편집폼 → 미리보기)
+- Desktop: 좌우 분할 (편집폼 | 미리보기)
+
+섹션:
+1. 텍스트 편집 (좌측)
+   - 제목 입력
+   - 경품 입력
+   - 참여 안내 입력
+
+2. 미리보기 (우측)
+   - 실시간 업데이트
+
+삭제된 기능:
+- 로고 위치 선택 (상단/하단/중앙)
+- 로고 크기 조정
+
+컴포넌트:
+- Text Input (제목)
+- Text Input (경품)
+- Textarea (참여 안내)
+- Preview Card (실시간)
+- Primary Button (다음)
+- Secondary Button (저장)
+
+상호작용:
+- 입력 시 실시간 미리보기 업데이트
+
+유저스토리: UFR-CONT-020
+Progress: 4/7 단계
+```
+
+#### 11-배포채널선택.html
+```
+레이아웃: 세로 스크롤
+
+섹션:
+1. 채널 선택 (복수 선택)
+   - 우리동네TV (Checkbox)
+   - 링고비즈 (Checkbox)
+   - SNS (Checkbox)
+   - QR코드 (Checkbox)
+
+2. 채널별 옵션 (조건부 표시)
+   - 우리동네TV: 지역 선택
+   - SNS: 플랫폼 선택 (Instagram, Naver, Facebook)
+   - QR코드: 생성 옵션
+
+컴포넌트:
+- Checkbox List (채널)
+- Conditional Options (각 채널)
+- Primary Button (다음)
+
+상호작용:
+- 채널 선택 시 해당 옵션 표시
+- 최소 1개 선택 필수
+
+유저스토리: UFR-DIST-010
+Progress: 5/7 단계
+```
+
+#### 12-최종승인.html
+```
+레이아웃: 세로 스크롤
+
+섹션:
+1. 이벤트 요약
+   - 제목, 경품, 참여 방법
+2. 이미지 미리보기
+3. 배포 채널
+4. 일정 설정
+   - 시작일: 즉시 or 예약
+   - 종료일: 선택
+
+컴포넌트:
+- Summary Card (요약 정보)
+- Image Preview
+- Channel Badges
+- Date Picker (일정)
+- Primary Button (승인 및 배포)
+- Secondary Button (수정)
+
+상호작용:
+- 수정: 이전 단계로 이동
+- 승인: 이벤트 생성 및 배포
+
+유저스토리: UFR-DIST-020
+Progress: 7/7 단계
+```
+
+### 4.4 이벤트 관리 및 모니터링
+
+#### 13-이벤트상세.html
+```
+레이아웃: 세로 스크롤
+
+섹션:
+1. 이벤트 헤더
+   - 이미지 썸네일
+   - 제목, 상태, 기간
+
+2. 실시간 KPI (4개 카드)
+   - 참여자 수
+   - 조회수
+   - ROI
+   - 전환율
+
+3. 빠른 액션
+   - 참여자 목록
+   - 당첨자 관리
+   - 성과 분석
+   - 이벤트 수정
+
+4. 참여 추이 차트
+
+컴포넌트:
+- Event Header (이미지 + 정보)
+- KPI Card (4개, 그리드)
+- Action Button (4개, 그리드)
+- Chart (참여 추이)
+
+유저스토리: UFR-EVENT-060
+Bottom Nav: 이벤트 탭 활성화
+```
+
+#### 14-참여자목록.html
+```
+레이아웃: 세로 스크롤
+
+섹션:
+1. 검색 바
+2. 필터 (채널, 상태)
+3. 참여자 카드 리스트
+4. 페이지네이션
+5. 엑셀 다운로드 (Desktop)
+
+컴포넌트:
+- Search Input
+- Filter Dropdowns
+- Participant Card (리스트)
+  - 이름, 전화번호, 참여 경로, 일시, 당첨 여부
+- Pagination
+- Download Button (Desktop)
+
+상호작용:
+- 카드 클릭: 참여자 상세 모달
+
+유저스토리: UFR-PART-020
+```
+
+#### 15-이벤트참여.html
+```
+유형: 고객용 화면 (공개 URL)
+
+레이아웃: 세로 스크롤
+
+섹션:
+1. 이벤트 이미지
+2. 이벤트 정보
+   - 제목, 경품, 참여 방법
+3. 참여 폼
+   - 이름, 전화번호 입력
+4. 개인정보 동의
+5. 참여하기 버튼
+
+컴포넌트:
+- Event Banner (이미지)
+- Info Card (정보)
+- Text Input (이름, 전화번호)
+- Checkbox (동의)
+- Primary Button (참여하기)
+
+상호작용:
+- 유효성 검증
+- 중복 참여 방지
+- 참여 완료 모달
+
+유저스토리: UFR-PART-010
+```
+
+#### 16-당첨자추첨.html
+```
+레이아웃: 세로 스크롤
+
+섹션:
+1. 추첨 설정
+   - 당첨자 수 입력
+   - 자동 추첨 버튼
+
+2. 당첨자 목록 (추첨 후)
+   - 이름, 전화번호, 당첨 경품
+
+3. 액션
+   - 문자 발송
+   - 엑셀 다운로드
+
+컴포넌트:
+- Number Input (당첨자 수)
+- Primary Button (추첨)
+- Winner Card (리스트)
+- Action Buttons (문자, 다운로드)
+
+상호작용:
+- 추첨: 애니메이션 효과
+- 결과: 즉시 표시
+
+유저스토리: UFR-PART-030
+```
+
+#### 17-성과분석.html
+```
+레이아웃: 세로 스크롤
+
+섹션:
+1. 요약 KPI (4개 카드)
+   - 참여자 수
+   - 총 비용
+   - 예상 수익
+   - ROI
+
+2. 차트 (2개, 그리드)
+   - 채널별 성과 (파이 차트)
+   - 시간대별 참여 추이 (라인 차트)
+
+3. 상세 분석 (2개, 그리드)
+   - ROI 상세 (테이블)
+   - 참여자 프로필 (바 차트)
+
+컴포넌트:
+- Summary Card (4개, 그리드)
+- Chart Card (파이, 라인)
+- Table (ROI 상세)
+- Bar Chart (참여자 프로필)
+- Refresh Indicator (실시간 업데이트)
+
+상호작용:
+- Pull to Refresh (모바일)
+- 5분마다 자동 갱신
+
+유저스토리: UFR-ANAL-010
+Bottom Nav: 분석 탭 활성화
+```
+
+---
+
+## 5. 반응형 디자인
+
+### 5.1 Breakpoints
+```
+Mobile (기본): 320px ~ 767px
+Tablet: 768px ~ 1023px
+Desktop: 1024px 이상
+```
+
+### 5.2 레이아웃 변화
+
+#### 대시보드 (05)
+```
+Mobile:  KPI 세로 스택
+Tablet:  KPI 2x2 그리드, 이벤트 2열
+Desktop: KPI 4열, 이벤트 3열 + 사이드바
+```
+
+#### 이벤트 생성 (09, 10)
+```
+Mobile:  세로 스택
+Tablet:  세로 스택 (간격 증가)
+Desktop: 좌우 분할 (편집 | 미리보기)
+```
+
+#### 성과 분석 (17)
+```
+Mobile:  차트 세로 스택
+Tablet:  차트 2x1 그리드
+Desktop: 차트 2x2 그리드
+```
+
+---
+
+## 6. 인터랙션 패턴
+
+### 6.1 Navigation
+- **Bottom Nav**: 탭 클릭 시 즉시 화면 전환
+- **Back Button**: 이전 화면으로 이동
+- **FAB**: 새 이벤트 생성 플로우 시작
+
+### 6.2 Form
+- **실시간 검증**: 입력 필드 blur 시 유효성 검사
+- **에러 메시지**: 필드 하단에 빨간색 텍스트
+- **성공 피드백**: Toast 메시지
+
+### 6.3 Loading States
+- **AI 처리**: Progress Indicator + 예상 시간
+- **데이터 로딩**: Skeleton Screen
+- **버튼 클릭**: Spinner + 비활성화
+
+### 6.4 Feedback
+- **성공**: Green Toast + 체크 아이콘
+- **에러**: Red Toast + X 아이콘
+- **정보**: Blue Toast + i 아이콘
+
+### 6.5 Gestures (Mobile)
+- **Swipe**: 이벤트 카드 좌우 스와이프 (삭제/편집)
+- **Pull to Refresh**: 대시보드, 성과 분석
+- **Long Press**: 컨텍스트 메뉴 표시
+
+---
+
+## 7. 접근성 고려사항
+
+### 7.1 WCAG 2.1 AA 준수
+- **색상 대비**: 최소 4.5:1 (텍스트), 3:1 (UI 요소)
+- **터치 영역**: 최소 44x44px
+- **키보드 네비게이션**: 모든 인터랙티브 요소 접근 가능
+- **Focus Indicator**: 명확한 포커스 표시
+
+### 7.2 스크린 리더 지원
+- **ARIA Labels**: 모든 버튼, 링크, 폼 필드
+- **ARIA Roles**: 적절한 역할 지정
+- **Live Regions**: 동적 콘텐츠 업데이트 알림
+
+### 7.3 대안 제공
+- **색상 외 표현**: 아이콘 + 텍스트 조합
+- **키보드 대안**: 드래그 앤 드롭 → 버튼 클릭
+- **음성 대안**: 이미지 alt 텍스트
+
+---
+
+## 8. 성능 최적화
+
+### 8.1 이미지
+- **포맷**: WebP (fallback: JPG)
+- **압축**: Quality 80-85%
+- **Lazy Loading**: 스크롤 시 로드
+
+### 8.2 폰트
+- **Font Display**: swap
+- **Preload**: 주요 폰트
+- **Subset**: 자주 쓰는 글자만
+
+### 8.3 애니메이션
+- **GPU 가속**: transform, opacity
+- **Will-Change**: 애니메이션 직전만 적용
+
+---
+
+## 9. 에러 처리
+
+### 9.1 네트워크 에러
+```
+표시: Toast (빨간색)
+메시지: "네트워크 연결을 확인해주세요"
+액션: 재시도 버튼
+```
+
+### 9.2 Validation 에러
+```
+표시: Input 하단 메시지
+색상: Error Red (#D32F2F)
+예시: "이메일 형식이 올바르지 않습니다"
+```
+
+### 9.3 서버 에러
+```
+표시: Modal Dialog
+메시지: "일시적인 오류가 발생했습니다. 잠시 후 다시 시도해주세요."
+액션: 확인 버튼
+```
+
+### 9.4 Empty State
+```
+표시: 중앙 정렬 메시지 + 아이콘
+예시:
+- "아직 이벤트가 없습니다"
+- "참여자가 없습니다"
+액션: 관련 CTA 버튼
+```
+
+---
+
+## 10. 디자인 시스템 참조
+
+- **스타일 가이드**: design/uiux/style-guide.md
+- **색상 시스템**: KT Red (#E31E24), AI Blue (#0066FF)
+- **타이포그래피**: Pretendard, 8단계 스케일
+- **간격 시스템**: 4px 기반, 6단계
+- **컴포넌트**: Button, Card, Input, Modal, Toast, Bottom Nav
+- **아이콘**: Material Icons Outlined/Filled
+
+---
+
+## 11. 변경 이력
+
+### Version 2.1 (2025-10-21)
+- 프로토타입 실제 구현 내용 반영
+- 08-AI이벤트추천: 예산별 2가지 방식(온라인/오프라인) 상세화
+- 08-AI이벤트추천: Budget Navigation (Sticky) 추가
+- 08-AI이벤트추천: Editable Field (인라인 편집) 기능 추가
+- 09-콘텐츠미리보기: Selection Card 세부 구현 상세 기술
+- 09-콘텐츠미리보기: Fullscreen Modal, 이벤트 버블링 방지 추가
+
+### Version 2.0 (2025-10-21)
+- 프로토타입 분석 기반 전면 개정
+- 화면 번호 체계 정립 (01~17번)
+- 네비게이션 구조 변경 (햄버거 메뉴 제거, Bottom Nav 4탭)
+- 이벤트 생성 플로우 상세화 (7단계)
+- 카드 선택 UI 패턴 추가 (09-콘텐츠미리보기)
+- 로고 위치 선택 삭제 (10-콘텐츠편집)
+- 성과 분석 Bottom Nav 추가 (17-성과분석)
+- 실시간 KPI 업데이트 추가 (13-이벤트상세)
+
+### Version 1.0 (2025-10-17)
+- 초안 작성
+
+---
+
+**문서 끝**