[infra] Vue 3 프론트 기반 — Vite·Tailwind 스캐폴딩 + Gradle 빌드 통합 + History SPA fallback + 공통 레이아웃/API 클라이언트/auth 스토어

[heygw44]

목적

모든 Vue UI 이슈가 공유할 토대를 만든다. frontend/에 Vite + Vue 3 + Tailwind 프로젝트를 세우고, Gradle이 빌드 산출물을 src/main/resources/static/으로 출력해 같은 오리진(8080)에서 서빙하도록 통합한다. History 라우팅을 위한 Spring SPA fallback과 공통 인프라(레이아웃·API 클라이언트·auth 스토어)를 구축한다.

작업 내용

• frontend/ 생성 (Vite + Vue 3 + JS), vite.config.js: dev proxy(5173→8080 /api), outDir=../src/main/resources/static, assetsDir=assets, @ alias
• Tailwind v4(@tailwindcss/vite) + @theme 디자인 토큰(바이닐 블랙/크림/골드/러스트), Pretendard·디스플레이 폰트
• build.gradle.kts node-gradle 통합: npmInstall → frontendBuild → processResources.dependsOn, -PskipFrontend 가드
• 백엔드 SpaForwardConfig(WebMvcConfigurer, 점 없는 1~3 depth 경로 forward:/index.html)
• SecurityConfig SPA 라우트 GET permitAll 배열 추가 (실데이터는 여전히 /api/v1/** 토큰 검증)
• 기존 static 바닐라 파일(index.html, css/, js/) 제거 + .gitignore에 frontend/node_modules, static/ 추가
• api/client.js(axios): baseURL /api/v1, Bearer 자동, 401 refresh 1회 공유 재시도, Idempotency-Key 헬퍼, ProblemDetail → ApiError
• stores/auth.js(Pinia, 토큰 localStorage·JWT 디코드), stores/ui.js(토스트), 공통 레이아웃(TheHeader/TheFooter/SearchBar)·base 컴포넌트

완료 조건 (DoD)

• ./gradlew bootRun(통합 빌드) 시 http://localhost:8080/ SPA 로드, /cart 등 직접 진입·새로고침 시 fallback 정상(401/404 없음)
• npm run dev(5173) 프록시로 GET /api/v1/albums 성공, HMR 동작
• 기존 API 인증/권한 테스트 통과(SPA permitAll이 API 정책 불변), ./gradlew check 그린

선행 / 관련

• 다른 모든 Vue 프론트 이슈의 선행(blocker)
• M14 [infra] 데모 프론트 기반 — 정적 서빙 + SecurityConfig 공개 경로 + SPA 셸/라우터/API 클라이언트 #102 대체

비고

History 라우팅이라 SPA forward 필요(해시 대비 차이). 빌드 산출물은 커밋 제외, 소스 진실은 frontend/. CI가 프론트를 빌드하지 않으면 배포 산출물 누락 주의(메모 CI GOTCHA).