Issue Sticker

Visual bug tracking tool for web development

### Issue Sticker - 시각적 버그 추적 도구 **웹 개발 QA 과정을 혁신하는 시각적 버그 관리 도구** Issue Sticker는 웹 개발 과정에서 QA 담당자가 발견한 버그를 Figma의 코멘트 기능처럼 시각적으로 관리할 수 있는 Chrome 확장 프로그램입니다. 페이지의 특정 위치에 스티커를 남기고, 개발자가 직관적으로 확인하고 해결할 수 있도록 도와줍니다. ### 🎯 주요 기능 #### 1. 시각적 이슈 스티커 - **Ctrl/Cmd + Alt + 1** 단축키로 이슈 생성 모드 토글 후 페이지 클릭 - 사이드 패널에서 "이슈 생성 모드" 버튼으로도 활성화 가능 - 페이지의 정확한 위치에 스티커 표시 - 등급별 색상 구분 (S/A/B/C/D) - 상태별 아이콘 표시 (미해결/진행중/완료) #### 2. 자동 정보 수집 - **스크린샷 자동 캡처**: 이슈 생성 시점의 화면 자동 저장 - **화면 녹화**: 단축키(Ctrl/Cmd + Alt + 2)로 화면 녹화 후 이슈에 첨부 (v1.2.0) - 최대 2분 녹화, 자동 압축 (최대 10MB) - WebM 형식으로 저장 - 녹화 인디케이터로 상태 확인 - **네트워크 로그 수집**: 최근 50개의 네트워크 요청 자동 첨부 - **콘솔 로그 캡처**: 이슈 생성 시점의 콘솔 로그 자동 수집 (v1.2.0) - **상세 로그 모드**: Request/Response Body까지 수집 (선택적) #### 3. 이슈 관리 - **사이드 패널**: 모든 이슈를 한눈에 확인 - **필터링**: 등급, 상태, URL별 필터링 - **콘솔 로그 필터링**: 로그 레벨, 타입별 필터링 (v1.2.0) - **스티커 표시 제어**: 필요시 스티커 숨김/표시 - **상태 관리**: 이슈 상태 업데이트 및 댓글 기능 #### 4. Jira 연동 (선택사항) - Jira 이슈 자동 생성 - 담당자, 수정 버전 등 필드 설정 - Jira 이슈와 동기화 ### 💡 사용 방법 1. **익스텐션 설치 후 사이드 패널 열기** 2. **이슈 생성 모드 활성화**: - 방법 1: 사이드 패널에서 "이슈 생성 모드" 버튼 클릭 - 방법 2: **Ctrl/Cmd + Alt + 1** 단축키로 이슈 생성 모드 토글 3. **이슈 생성 모드가 활성화되면**: - 페이지의 요소에 마우스를 올리면 하이라이트 표시 - 원하는 위치를 클릭하면 해당 위치에 이슈 생성 폼이 열림 - 이슈 생성 모드 인디케이터가 화면에 표시됨 4. **화면 녹화** (선택사항): - **Ctrl/Cmd + Alt + 2** 단축키로 녹화 시작/중지 - 녹화 중에는 화면에 녹화 인디케이터 표시 - 최대 2분 자동 녹화, 자동 압축 후 이슈에 첨부 5. **이슈 정보 입력**: 제목, 설명, 등급(S/A/B/C/D) 설정 6. **자동 수집**: 스크린샷(또는 녹화 영상), 네트워크 로그, 콘솔 로그가 자동으로 첨부됩니다 7. **이슈 관리**: 사이드 패널에서 필터링 및 상태 업데이트 ### 🎨 등급 시스템 - **S (최상)**: 빨간색 - 즉시 수정 필요 - **A (상)**: 주황색 - 높은 우선순위 - **B (중)**: 파란색 - 일반 우선순위 (기본값) - **C (하)**: 보라색 - 낮은 우선순위 - **D (최하)**: 회색 - 향후 개선 ### 📊 로그 수집 기능 #### 네트워크 로그 - **기본 모드**: 항상 활성화, URL, 메서드, 상태 코드, 타임스탬프 수집 - **상세 모드**: Request/Response Headers 및 Body 수집 (선택적) - JSON Viewer로 편리하게 확인 #### 콘솔 로그 (v1.2.0) - 이슈 생성 시점의 콘솔 로그 자동 캡처 - 로그 레벨별 필터링 (log, info, warn, error) - 로그 타입별 필터링 (console.log, console.error 등) - 이슈 상세에서 콘솔 로그 확인 가능 #### 화면 녹화 (v1.2.0) - **단축키**: Ctrl/Cmd + Alt + 2로 녹화 시작/중지 - **자동 제한**: 최대 2분 녹화 후 자동 중지 - **자동 압축**: 최대 10MB로 자동 압축 - **형식**: WebM 형식으로 저장 - **이슈 첨부**: 녹화된 영상을 이슈에 첨부하여 버그 재현 과정을 시각적으로 전달 - **녹화 인디케이터**: 녹화 중 화면에 표시되는 인디케이터로 상태 확인 ### 🔒 데이터 저장 - **Supabase**: 클라우드 기반 데이터베이스에 안전하게 저장 - **멀티테넌트 지원**: 팀별로 데이터 분리 관리 - **실시간 동기화**: 여러 사용자가 동시에 작업 가능 ### 🚀 시작하기 1. Supabase 프로젝트 생성 (무료 플랜 사용 가능) 2. 데이터베이스 스키마 설정 (가이드 제공) 3. 익스텐션에 Supabase 설정 입력 4. 바로 사용 시작! ### 📝 주요 사용 사례 - **QA 테스트**: 웹사이트 QA 과정에서 발견한 버그 추적 - **버그 재현**: 화면 녹화로 버그 발생 과정을 시각적으로 기록 - **프로토타입 리뷰**: 디자인 리뷰 시 피드백 남기기 - **버그 리포트**: 개발팀에 상세한 버그 정보 전달 (스크린샷/영상, 로그 포함) - **협업**: QA와 개발팀 간 효율적인 소통 ### ⚙️ 기술 스택 - React 18 + TypeScript - Supabase (PostgreSQL) - Chrome Extension Manifest V3 - WebP 이미지 압축 ### 🔐 권한 설명 - **storage**: 이슈 데이터 저장 - **activeTab**: 현재 탭의 스크린샷 캡처 - **webRequest**: 네트워크 로그 수집 - **debugger**: 상세 네트워크 로그 및 콘솔 로그 수집 (선택적) - **tabs**: 탭 간 이동 및 메시지 전달 - **sidePanel**: 사이드 패널 표시 - **tabCapture**: 스크린샷 캡처 및 화면 녹화 모든 권한은 익스텐션 기능을 위해 필수적이며, 사용자의 데이터는 안전하게 관리됩니다. ### 📚 문서 및 지원 - GitHub 저장소에서 상세 문서 확인 - 이슈 리포트 및 기능 제안 환영 - 정기적인 업데이트 및 개선 --- **Issue Sticker로 더 효율적인 웹 개발 QA를 시작하세요!**