Issue Sticker

Visual bug tracking tool for web development

### Issue Sticker - 시각적 버그 추적 도구 **웹 개발 QA 과정을 혁신하는 시각적 버그 관리 도구** Issue Sticker는 웹 개발 과정에서 QA 담당자가 발견한 버그를 Figma의 코멘트 기능처럼 시각적으로 관리할 수 있는 Chrome 확장 프로그램입니다. 페이지의 특정 위치에 스티커를 남기고, 개발자가 직관적으로 확인하고 해결할 수 있도록 도와줍니다. ### 🎯 주요 기능 #### 1. 시각적 이슈 스티커 - **Shift 키 + 클릭**으로 간편하게 이슈 생성 - 페이지의 정확한 위치에 스티커 표시 - 등급별 색상 구분 (S/A/B/C/D) - 상태별 아이콘 표시 (미해결/진행중/완료) #### 2. 자동 정보 수집 - **스크린샷 자동 캡처**: 이슈 생성 시점의 화면 자동 저장 - **네트워크 로그 수집**: 최근 50개의 네트워크 요청 자동 첨부 - **상세 로그 모드**: Request/Response Body까지 수집 (선택적) #### 3. 이슈 관리 - **사이드 패널**: 모든 이슈를 한눈에 확인 - **필터링**: 등급, 상태, URL별 필터링 - **스티커 표시 제어**: 필요시 스티커 숨김/표시 - **상태 관리**: 이슈 상태 업데이트 및 댓글 기능 #### 4. Jira 연동 (선택사항) - Jira 이슈 자동 생성 - 담당자, 수정 버전 등 필드 설정 - Jira 이슈와 동기화 ### 💡 사용 방법 1. **익스텐션 설치 후 사이드 패널 열기** 2. **이슈 생성 방법**: - 방법 1: 사이드 패널에서 "이슈 생성 모드" 버튼 클릭 - 방법 2: **Shift 키를 누르고 있는 동안** 페이지 클릭 3. **이슈 정보 입력**: 제목, 설명, 등급(S/A/B/C/D) 설정 4. **자동 수집**: 스크린샷과 네트워크 로그가 자동으로 첨부됩니다 5. **이슈 관리**: 사이드 패널에서 필터링 및 상태 업데이트 ### 🎨 등급 시스템 - **S (최상)**: 빨간색 - 즉시 수정 필요 - **A (상)**: 주황색 - 높은 우선순위 - **B (중)**: 파란색 - 일반 우선순위 (기본값) - **C (하)**: 보라색 - 낮은 우선순위 - **D (최하)**: 회색 - 향후 개선 ### 📊 네트워크 로그 기능 #### 기본 모드 - 항상 활성화 - URL, 메서드, 상태 코드, 타임스탬프 수집 #### 상세 모드 - 사이드 패널에서 토글 활성화 - Request/Response Headers 및 Body 수집 - JSON Viewer로 편리하게 확인 ### 🔒 데이터 저장 - **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**: 사이드 패널 표시 모든 권한은 익스텐션 기능을 위해 필수적이며, 사용자의 데이터는 안전하게 관리됩니다.