feat: 문의하기 기능 추가 #53
Description
개요
팝업 메인 화면 우상단에 편지 아이콘 버튼을 추가하고, 클릭 시 "문의하기" 모달을 표시합니다.
사용자는 제목과 내용을 입력하고 이메일 또는 GitHub Issue로 피드백을 제출할 수 있습니다.
아키텍처
[Extension] → POST /api/feedback/* → [Spring Boot 백엔드] → GitHub API / Email
↓
토큰/설정 안전하게 보관
백엔드 프록시 방식을 사용하여 민감 정보(GitHub Token, Gmail App Password)가 Extension에 노출되지 않도록 합니다.
구현 범위
Frontend (Extension)
| 작업 | 파일 |
|---|---|
| 문의하기 모달 컴포넌트 | src/components/ContactDialog.tsx (신규) |
| Textarea UI 컴포넌트 | src/components/ui/textarea.tsx (신규) |
| 백엔드 API 호출 로직 | src/apis/contact.ts (신규) |
| Mail 아이콘 버튼 추가 | src/components/MainLayout.tsx (수정) |
Backend (Spring Boot)
| 작업 | 파일 |
|---|---|
/api/feedback/* 엔드포인트 |
FeedbackController.java (신규) |
| GitHub API, Email 전송 로직 | FeedbackService.java (신규) |
| 요청 DTO | FeedbackRequest.java (신규) |
| SMTP, GitHub 토큰 환경 변수 | application.yml (수정) |
UI 구성
모달 구조
- DialogHeader: "문의하기" 제목 + 설명
- Input: 제목 입력 (maxLength: 100)
- Textarea: 내용 입력 (maxLength: 2000, rows: 5)
- DialogFooter: 취소 / 이메일로 보내기 / GitHub Issue 버튼
UX 고려사항
- 로딩 상태: Loader2 아이콘 + 버튼 비활성화
- 성공: toast.success() + 모달 닫기 + 폼 초기화
- 실패: toast.error() + 재시도 가능
- 글자 수 카운터: 내용 입력 필드 하단에 표시
백엔드 API 명세
이메일 전송
POST /api/feedback/email
Body: { title: string, content: string }
Response: { success: boolean }
GitHub Issue 생성
POST /api/feedback/github-issue
Body: { title: string, content: string }
Response: { success: boolean, issueUrl?: string }
보안 고려사항
- GitHub Token: 서버 환경 변수로 관리 (노출 위험 없음)
- Gmail App Password: 서버 환경 변수로 관리
- Extension에는 민감 정보 저장하지 않음