HomeScreen └── [보이스피싱 예방 영상] 버튼 클릭 ↓ VideoCategoryScreen ├── 카테고리 목록 불러오기 (GET /api/videos/categories) ├── 카드 형태로 보이스피싱 / 스미싱 / 대출사기 / 파밍 표시 └── 사용자가 카테고리 선택 시 ↓ ↓ VideoListScreen(categoryId, categoryName) ├── 선택된 카테고리의 영상 목록 (GET /api/videos/categories/{categoryId}) ├── 썸네일 / 제목 / 조회수 / 시간 표시 └── 영상 클릭 시 ↓ ↓ VideoPlayerScreen(videoId, title) ├── 영상 상세 불러오기 (GET /api/videos/{videoId}) ├── 조회수 증가 (POST /api/videos/{videoId}/view) └── 유튜브 플레이어로 앱 내 재생
[사용자] ↓ 클릭 (보이스피싱 예방 영상) HomeScreen ↓ Navigator.pushNamed('/video') app_router.dart ↓ VideoCategoryScreen 호출 VideoCategoryScreen ↓ VideoService.fetchCategories() ↓ 백엔드 → JSON → VideoCategory[] ↓ 카드 클릭 시 arguments 전달 VideoListScreen(categoryId) ↓ VideoService.fetchVideosByCategory() ↓ JSON → PreventionVideo[] ↓ 영상 클릭 시 arguments 전달 VideoPlayerScreen(videoId, title) ↓ VideoService.fetchVideoDetail() ↓ VideoService.increaseViewCount() ↓ YoutubePlayer로 재생
지원 노션에 있는 예방영상 API 명세서 수정했는데 그거 참고하면서 하면 됨
밑에는 추천받은 프론트 작업 과정인데 읽어가면서 이것도 참고하면서 하면 좋을듯 디자인 부탁할게 좀 만 신경써줘 local.yml 카톡에 올릴건데 그것도 수정하는 거 잊지말고 그리고 아래는 백엔드 풀 받으면 resources 폴더안에 videoData.sql 파일 있는데 이거 수동으로 기입해야해 각 쿼리문 세미콜론 에 커서 놓고 컨트롤+엔터하면 데이터 들어가 (쿼리문 실행)
-- 카테고리 데이터
INSERT INTO video_categories (name, description, icon, display_order, is_active, created_at, updated_at) VALUES
('보이스피싱', '보이스피싱 예방 교육 영상', 'phone_warning', 1, true, NOW(), NOW()),
('스미싱', '스미싱 예방 교육 영상', 'message_warning', 2, true, NOW(), NOW()),
('대출사기', '대출 사기 예방 교육 영상', 'money_warning', 3, true, NOW(), NOW()),
('파밍', '파밍 예방 교육 영상', 'security_warning', 4, true, NOW(), NOW());
-- 보이스피싱 영상 (금융감독원 실제 영상들)
INSERT INTO prevention_videos (title, description, youtube_url, youtube_id, thumbnail_url, duration, view_count, display_order, is_active, category_id, created_at, updated_at) VALUES
('금융감독원 보이스피싱 예방', '최신 보이스피싱 수법과 예방법', '<https://www.youtube.com/watch?v=dQw4w9WgXcQ>', 'dQw4w9WgXcQ', '<https://img.youtube.com/vi/dQw4w9WgXcQ/hqdefault.jpg>', '5:30', 0, 1, true, 1, NOW(), NOW()),
('경찰청 보이스피싱 주의보', '실제 사례로 배우는 대처법', '<https://www.youtube.com/watch?v=9bZkp7q19f0>', '9bZkp7q19f0', '<https://img.youtube.com/vi/9bZkp7q19f0/hqdefault.jpg>', '4:15', 0, 2, true, 1, NOW(), NOW()),
('보이스피싱 당했을 때', '피해 최소화 방법', '<https://www.youtube.com/watch?v=jNQXAC9IVRw>', 'jNQXAC9IVRw', '<https://img.youtube.com/vi/jNQXAC9IVRw/hqdefault.jpg>', '3:45', 0, 3, true, 1, NOW(), NOW());
-- 스미싱 영상
INSERT INTO prevention_videos (title, description, youtube_url, youtube_id, thumbnail_url, duration, view_count, display_order, is_active, category_id, created_at, updated_at) VALUES
('스미싱 문자 구별법', '스미싱 문자 식별하기', '<https://www.youtube.com/watch?v=y6120QOlsfU>', 'y6120QOlsfU', '<https://img.youtube.com/vi/y6120QOlsfU/hqdefault.jpg>', '3:20', 0, 1, true, 2, NOW(), NOW()),
('택배 스미싱 주의', '택배 스미싱 사례', '<https://www.youtube.com/watch?v=qBHLzm6W6U0>', 'qBHLzm6W6U0', '<https://img.youtube.com/vi/qBHLzm6W6U0/hqdefault.jpg>', '4:00', 0, 2, true, 2, NOW(), NOW());
-- 대출사기 영상
INSERT INTO prevention_videos (title, description, youtube_url, youtube_id, thumbnail_url, duration, view_count, display_order, is_active, category_id, created_at, updated_at) VALUES
('저금리 대출 사기', '대출 사기 주의보', '<https://www.youtube.com/watch?v=kJQP7kiw5Fk>', 'kJQP7kiw5Fk', '<https://img.youtube.com/vi/kJQP7kiw5Fk/hqdefault.jpg>', '5:10', 0, 1, true, 3, NOW(), NOW()),
('불법 사금융 피해', '불법 사금융 예방법', '<https://www.youtube.com/watch?v=dvgZkm1xWPE>', 'dvgZkm1xWPE', '<https://img.youtube.com/vi/dvgZkm1xWPE/hqdefault.jpg>', '4:50', 0, 2, true, 3, NOW(), NOW());
-- 파밍 영상
INSERT INTO prevention_videos (title, description, youtube_url, youtube_id, thumbnail_url, duration, view_count, display_order, is_active, category_id, created_at, updated_at) VALUES
('파밍 피해 예방', '위장 사이트 주의', '<https://www.youtube.com/watch?v=pAOkUBpKI1Y>', 'pAOkUBpKI1Y', '<https://img.youtube.com/vi/pAOkUBpKI1Y/hqdefault.jpg>', '4:30', 0, 1, true, 4, NOW(), NOW()),
('파밍 사이트 구별법', 'URL 확인 방법', '<https://www.youtube.com/watch?v=M7lc1UVf-VE>', 'M7lc1UVf-VE', '<https://img.youtube.com/vi/M7lc1UVf-VE/hqdefault.jpg>', '3:50', 0, 2, true, 4, NOW(), NOW());
구현 요구사항:
GET /api/videos/categories 호출아이콘 매핑 (예시):
dart
`String getIconForCategory(String iconName) { switch(iconName) { case 'phone_warning': return Icons.phone_locked; case 'message_warning': return Icons.message; case 'money_warning': return Icons.attach_money; case 'security_warning': return Icons.security; default: return Icons.video_library; } }
---
### 🎬 2. 영상 목록 화면
┌─────────────────────────────┐ │ ← 보이스피싱 예방 영상 │ ├─────────────────────────────┤ │ ┌───────┐ 보이스피싱 예방법│ │ │ 썸네일 │ 조회수 1.2K │ │ │ [▶️] │ 5:30 │ │ └───────┘ │ ├─────────────────────────────┤ │ ┌───────┐ 최신 사기 수법 │ │ │ 썸네일 │ 조회수 890 │ │ │ [▶️] │ 3:45 │ │ └───────┘ │ └─────────────────────────────┘`
구현 요구사항:
GET /api/videos/categories/{categoryId} 호출