[Feat] 웹페이지 QR 변환기 기능

[Turtle-Hwan]

설명

현재 탭의 URL을 QR 코드로 변환하여 모바일로 빠르게 공유할 수 있는 기능

사용 시나리오

• 학생이 PC에서 과제 제출 페이지를 열고 QR 코드 생성
• 모바일로 QR 스캔하여 이동
• 도서관 예약 페이지, 강의실 정보 등을 빠르게 공유

작업 내용

QR 코드 생성 UI

• TabsLayout에 "QR 코드" 탭 추가 또는 별도 버튼
• QR 코드 표시 컴포넌트 (QRCodeDisplay.tsx)
• 현재 탭 URL 자동 감지 (chrome.tabs.query)

QR 코드 라이브러리 선택

• qrcode.react 또는 qrcode 라이브러리 설치
• QR 코드 크기 조절 가능 (작게/중간/크게)
• QR 코드 색상 커스터마이징 (선택적)

추가 기능

• QR 코드 다운로드 (PNG 이미지로 저장)
• URL 직접 입력 (현재 탭이 아닌 다른 URL도 변환 가능)
• QR 코드 복사 (클립보드에 이미지 복사)
• 짧은 URL 생성 (선택적, 외부 API 필요)

UX 개선

• QR 코드 생성 중 로딩 표시
• Toast 알림 (다운로드/복사 성공 시)
• 반응형 디자인 (QR 코드 크기 자동 조절)

Permissions 추가

• manifest.json에 activeTab 권한 추가 (현재 탭 URL 읽기)

기술 스택

• qrcode.react 또는 qrcode 라이브러리
• Chrome Extension chrome.tabs API
• Canvas API (이미지 다운로드)

우선순위

⭐⭐ 중상

예상 소요 시간

1-2시간