generated from ttipo/project-base
ttipo
907287021f
메일 16단계(개인 설정)의 화면이다(보드 Contacts16 · Signature16 · Settings16). - 주소록: 브라우저가 vCard · CSV · 엑셀(.xlsx)을 읽어 미리 보기(파일은 서버로 가지 않는다 — 새 의존성 없이 DecompressionStream · DOMParser), 네이버 · Google · Outlook 머리를 알아보고 칸 없는 정보는 메모 끝에, 묶음(100명 · 값 8,000 · 700KB)으로 넣고 ✕까지 남는 결과 알림의 [되돌리기], 내보내기 창. - 서명: 왼쪽 목록 · 오른쪽 편집 · 메일에 넣을 서명 둘, 쓰기 화면 [서명 ▾]로 서명 자리만 바꾸기 (앱과 같은 경계 — 앞 빈 줄을 지켜 임시 저장 · 이어 쓰기에서도 찾는다). - 부재중: 내용 편집기(서식이 있을 때만 서식 본문) · 회사 밖에서 온 메일 응답 셋 · 미리 보기 전환. - 2단계 인증: [휴대폰 바꾸기] 두 걸음 창(비밀은 창 안에만). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
frontend — ARA SYSTEM 웹메일 (Vue 3)
웹메일 화면이다. 개발에서는 호스트의 vite 로, 운영에서는 nginx 가 화면을 내주고 같은 주소의 /api 를 백엔드로 넘긴다.
- 구조 · 개발 규칙(골격 · 스토어 · 컴포저블 · 화면별 파일):
.claude/skills/vue3/SKILL.md - 화면 디자인 · 화면 문구 규칙:
docs/design/webmail/README.md - API 약속:
docs/mail/api-contract.md
개발 서버
cd frontend && npm install && npm run dev # http://localhost:5173 — /api 는 vite 프록시가 백엔드 컨테이너로
백엔드 · DB · 메일 엔진은 루트의 개발 스택으로 먼저 띄운다(루트 README "빠른 시작"). 포트는 루트 .env.{mode} 의 FRONTEND_PORT · BACKEND_PORT 를 따른다.
API 응답이 JSON 이 아니라 HTML 이면 vite 프록시가 백엔드에 닿지 못한 것이다(백엔드 컨테이너 · 포트를 본다).
검사
npm run lint # 경고 0
npm run type-check
npm run test:unit # 시간대가 걸린 화면을 고쳤으면 Git Bash 에서 TZ=UTC npm run test:unit -- --run 도
운영 빌드
운영은 이미지(nginx)로 만든다 — docker compose --env-file .env.production up -d --build(docker 스킬 "운영 환경" · "같은 주소 배포"). VITE_API_BASE_URL 은 /api 로 고정이다.
편집기
VS Code + Vue (Official). 형 검사는 vue-tsc 다.