이 문서는 SynQ 프론트엔드의 화면과 사용자 인터랙션이 완성되고, 실제 백엔드·HTTP API·WebSocket·STT·AI 서비스 연결만 남은 시점을 기준으로 작성한 기능명세서입니다. 외부 연동이 필요한 기능은 동일한 contract를 사용하는 Mock API·Mock 시나리오로 전체 흐름을 검증했습니다.
문서 변경 이력
| 날짜 | 내용 |
|---|---|
| 2026-08-13 | 배포 환경 전환 반영(Vercel → AWS S3 + CloudFront), 라우팅 rewrite 방식·환경변수 관리 위치 갱신 |
| 이전 | 프론트엔드 완성 시점 기준 초안 작성 |
SynQ는 같은 회의에 참여해도 직무와 관심사에 따라 서로 다르게 이해하는 문제를 줄이기 위한 회의 보조 AI 서비스입니다. 프로젝트 자료와 이전 회의 맥락을 바탕으로 회의 내용을 실시간 전사하고, 참여자별 역할과 관점에 맞는 힌트·요약·질문 응답을 제공합니다.
핵심 목표는 다음과 같습니다.
| 구분 | 기술 | 사용 목적 |
|---|---|---|
| Framework | React 19 | 컴포넌트 기반 UI 구성 |
| Language | TypeScript | 화면·도메인·API contract 타입 안전성 |
| Build Tool | Vite | 개발 서버와 프로덕션 빌드 |
| Routing | React Router DOM | URL 기반 페이지 이동, 동적 회의 ID 처리 |
| Styling | Tailwind CSS, CSS Design Tokens | 반응형 레이아웃과 공통 디자인 시스템 |
| API Client | Axios | 실제 HTTP API 연결 단계에서 사용 예정 |
| Server State | TanStack Query | 실제 API 연결 단계의 캐시·로딩·재시도 관리 예정 |
| Test | Vitest, Testing Library | 단위·컴포넌트·라우팅 흐름 검증 |
| Quality | ESLint, Prettier, TypeScript, CodeRabbit | 정적 분석·포맷·타입 검사·PR 리뷰 |
| Deployment | AWS S3 + CloudFront, GitHub Actions | 정적 호스팅·CDN 배포 자동화 |
| Architecture | Feature-Sliced Design | app/pages/widgets/features/entities/shared 책임 분리 |