generated from ttipo/project-base
ttipo
f3586abcd7
받는 사람 · 참조 · 숨은참조가 여러 줄이 되면 편집 영역(최소 300)이 줄지 않아 쓰기 칸 전체가 화면을 넘쳤다. 바깥 스크롤과 본문 스크롤이 겹치고, 흐름 끝의 [보내기] 줄이 화면 밖으로 밀렸다(사용자 보고 — 전 직원을 숨은참조에 넣었을 때). - [보내기] 줄은 스크롤하는 칸의 아래에 붙는다(sticky). 겹침 차례는 편집기 툴바 2 < [보내기] 줄 3 < 받는 사람 추천 목록 · 메뉴를 연 툴바 4 - 칩 · 입력 칸은 96px 을 넘으면 그 칸 안에서 스크롤한다(초점 · 칩 추가 · 입력 때 맨 아래로). 넓은 화면은 편집 영역이 200 까지 먼저 줄어 보통 높이에서 바깥 스크롤이 생기지 않는다 - 넓은 화면에서 숨긴 낭독 글이 앱 틀 밖에 놓여 문서까지 스크롤하던 것을 고치고(.compose position: relative), [보내기] 줄에 가린 칸으로 옮긴 초점은 가린 만큼 올린다(useFocusAboveFooter) 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 다.