kjs그리고Claude Fable 5
c50c266f2e
- 마을 캔버스가 뷰포트 전체를 채움 (ResizeObserver 스케일링) - 상단 HUD: 회관·자원 칩 + 고양이 목록·입양 버튼 (반투명 오버레이) - 건물 클릭 → 우측 플로팅 패널: 정보(적성·슬롯·속도·진행)·회수· 배치 가능한 고양이 목록(예상 속도순, 현재 일터 표시)에서 배치/해제 - 회관 클릭 → 증축 요건 체크리스트 패널, 부엌 미건설 시 공터(🚧) 클릭 → 건설 - 고양이 전체 목록은 서랍 패널로 이동, 기존 그리드 섹션 제거 - 배지 클릭 빠른 회수는 유지, 메시지는 토스트로 표시 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
jskim.vexplor.com
Next.js(App Router, TypeScript) + PostgreSQL 개인 프로젝트.
스택
- 프론트/백엔드: Next.js 15 (React 19, API Routes로 Node.js 백엔드 겸용)
- DB: PostgreSQL 17 — THREEDEV 서버(211.115.91.140)
pg-jskim컨테이너, DB/계정jskim - 배포: Gitea Actions → Harbor(
harbor.wace.me/dev-pilots/jskim) → Docker + Traefik(HTTPS,jskim.vexplor.com)
로컬 개발
DB가 방화벽 뒤에 있어 SSH 터널이 필요하다.
# 터미널 1: DB 터널 (localhost:5436 -> pg-jskim)
./scripts/db-tunnel.sh
# 터미널 2: 개발 서버
npm run dev
- 환경변수:
.env.local(gitignore 대상,.env.example참고) - DB 연결 확인: http://localhost:3000/api/health
배포
dev-pilots 교육 파이프라인을 그대로 사용한다. main 브랜치에 push하면
Gitea Actions(.gitea/workflows/deploy.yml)가 자동으로:
- Docker 이미지 빌드 → Harbor push (
harbor.wace.me/dev-pilots/jskim) deploy/docker-compose.yml로 컨테이너 교체 (web+pgnet네트워크, Traefik 라벨, 포트 3000)- Traefik이
jskim.vexplor.comHTTPS 라우팅
운영 DATABASE_URL과 Harbor 인증(HARBOR_USER/HARBOR_SECRET)은 저장소 Secrets로 이미 등록되어 있다.
구조
src/
app/ # App Router 페이지
api/health/ # DB 연결 헬스체크
lib/db.ts # pg Pool (DATABASE_URL 사용)
scripts/db-tunnel.sh
Dockerfile # standalone 빌드, node:20-alpine
deploy/docker-compose.yml # 배포 정의 (Traefik 라벨, 앱 포트)
.gitea/workflows/deploy.yml # CI/CD (dev-pilots 표준)