ttipo b34afa4c7e feat: 전적 화면에 프로필 카드와 배경 커스터마이즈 추가
전적 화면을 자기 계정처럼 꾸밀 수 있게 했다. 프로필 층에 배경 사진이 깔리고,
「프로필 카드 보기」로 열면 원본 비율 배너 + 프로필 한 장이 된다.

프로필 카드
- 닫힌 상태는 지금 높이 그대로다(132px). 배경을 넣지 않은 사람은 옅은 색면 그대로.
- 열면 1440 폭에 16:9 원본이라 810px. 사진 위쪽 462px 가 드러나고, 아래 348px
  받침 위에 기본 · 티어 · 간단 스탯(승률 · 킬뎃 · 헤드샷 · 경기당 딜량 · 주무기)이
  한 장으로 모인다. 값은 전부 왼쪽 레일 「최근 동향」과 같은 값이라 따로 세지 않는다.
- 받침은 «세로» 방향이다. 가로 스크림은 왼쪽이 밝은 사진에만 들어, 오른쪽이 밝은
  사진에서 티어와 갱신 캡션이 무너진다. 얇은 띠에서는 글자를 지키려면 사진을
  덮어야 하고, 그래서 카드를 여는 쪽이 답이다.

신고와 소유 인증
- 배경은 누구나 볼 수 있다. 그래서 남의 카드에는 신고가 붙는다. 사진 오른쪽 위
  한 자리를 주인과 남이 나눠 쓴다 — 내 화면이면 「배경 고르기」, 남의 화면이면 「신고」.
- 신고는 카드 «안»에서만 닿는다. 배경이 문제인지 판단하려면 배경을 봐야 한다.
- 둘째 줄 끝에 소유 인증 알약을 뒀다 — 「내 계정」 또는 「밤하늘 님이 연동한 계정」.
  첫 줄(닉네임 · 계급)은 게임 안의 정체라 건드리지 않았다.

오른쪽 컨트롤 정리
- 「12분 전에 불러왔어요」를 갱신 버튼 아래에서 왼쪽 인라인으로 옮겼다. 아래에
  매달리면 그 덩어리만 66px 이 되어 옆 42px 버튼과 줄이 맞지 않는다.
- 한 상태에 보조 버튼은 하나. 보조는 주 동작과 같은 42px, 면만 없는 급으로 통일했다.
- 첫 조회에는 「프로필 카드 보기」를 두지 않는다 — 아직 열 카드가 없다.

문구 · 데이터
- 「동향 스탯」을 「최근 동향」으로 바꿨다.
- 클랜별 전적에서 소속 기간을 뺐다. 언제부터 언제까지 어느 클랜이었는지는 넥슨에서
  알 수 없다. 한 줄이 이름 · 판수 · 승률 셋뿐이라 행 높이를 38px 로 맞췄다.

기본 요소에 올려야 할 값
- 어두운 면 위의 승/패 — 승 #7BA4FF · 패 #F0857C (흰 바탕용과 색상각은 같다)
- 어두운 면 위의 크기 막대 — 바탕 rgba(255,255,255,0.20) · 먹 #FFFFFF
- 보조 버튼 42px 두 벌 (흰 바탕용 · 어두운 면용)

빌드
make-bg-directions.mjs 가 프로필 층을 만들어 Main · Maps 에 적고, 카드 상태
아트보드 셋(내 전적 · 남의 전적 · 신고)을 낸다. 셋은 프로필 층 아래 본문을
Main.dc.html 에서 그대로 잘라 쓴다 — 사본을 두면 기본 시안과 어긋난다.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TG44xZZ39K8vEz418bX4K2
2026-09-11 15:54:04 +09:00
2026-09-04 00:33:52 +09:00
2026-09-04 00:33:52 +09:00
2026-09-04 00:33:52 +09:00
2026-09-04 00:33:52 +09:00
2026-09-04 00:33:52 +09:00
...
2026-09-11 01:52:11 +09:00
2026-09-04 00:33:52 +09:00
2026-09-04 00:33:52 +09:00
2026-09-04 00:33:52 +09:00
2026-09-04 00:33:52 +09:00

풀스택 모노레포 기본 템플릿

NestJS(백엔드) · Vue 3(웹) · Flutter(모바일)를 하나의 저장소에서 운영하는 풀스택 템플릿입니다. 세 클라이언트는 동일한 표준 응답 포맷공통 에러 코드 맵을 공유하며, Docker Compose로 한 번에 구동됩니다.

구성

디렉터리 스택 역할 포트(기본)
backend/ NestJS + TypeORM REST API 서버 3000
frontend/ Vue 3 + Vite 웹 프론트엔드 5173
flutter/ Flutter + Riverpod 모바일 앱 -
db PostgreSQL 데이터베이스 5432
redis Redis 캐시 / 세션 6379

사전 요구사항

  • Docker / Docker Compose — backend·frontend·db·redis 구동
  • Flutter SDK ^3.11 — 모바일 앱 실행용 (compose 대상 아님)

빠른 시작 (Docker)

# 1) 환경변수 파일 생성 (예제 복사)
#    실제 설정값은 루트 .env.development 한 곳에서 관리한다 (SSOT).
#    backend/frontend 는 docker-compose 가 값을 주입하므로 예제만 복사하면 된다.
cp .env.development.example .env.development                       # ← 여기에만 값 입력
cp backend/.env.development.example backend/.env.development       # (존재 필요: JWT 등 고유 시크릿)
# frontend 는 compose 가 빌드 시 값을 주입하므로 자체 env 복사 불필요

# 2) 개발 환경 기동 (코드만 수정 시)
docker compose -f docker-compose.yml -f docker-compose.dev.yml --env-file .env.development up -d

# 3) 의존성 변경 시에만 --build
docker compose -f docker-compose.yml -f docker-compose.dev.yml --env-file .env.development up -d --build

기동 후:

전체 실행/배포 명령어는 .claude/skills/docker/SKILL.md 참조.

모바일 앱 실행 (Flutter)

Flutter 는 Docker Compose 대상이 아니므로 로컬에서 직접 실행합니다.

cd flutter && cp .env.example .env && flutter pub get && flutter run

flutter/.envAPI_URL 을 백엔드 주소로 설정합니다. (Android 에뮬레이터는 http://10.0.2.2:3000/api)

환경변수

.env* 는 커밋하지 않습니다. 각 디렉터리의 *.example 파일을 복사해 사용하세요.

루트 .env.{env} 가 단일 진실 공급원(SSOT) 입니다. backend·frontend 는 docker-compose 가 루트 값을 주입하므로 자체 env 에 값을 중복 작성하지 않습니다. (자세한 위임 구조는 CLAUDE.md 의 "환경변수 구조" 참조)

파일 용도 값 작성 위치
.env.{env}.example 루트 — 모든 설정의 SSOT (compose 주입) 여기에 작성
backend/.env.{env}.example 백엔드 — 고유 시크릿(JWT 등)만 최소 (존재 필수)
frontend/.env.{env}.example 프론트 — 빌드 시 루트 BACKEND_API_URL 주입 작성 불필요
flutter/.env.example 모바일 — API_URL (compose 비대상) 독립 관리

{env} = development | production

표준 응답 포맷

// 성공
{ "success": true, "data": { /* ... */ } }
// 실패
{ "success": false, "error": { "code": "VAL_001", "message": "..." } }

에러 코드 맵과 코딩 규칙 전문은 CLAUDE.md.claude/rules/·.claude/skills/ 의 규칙 문서를 참고하세요.

개발 규칙

영역 문서
공통/보안 CLAUDE.md · .claude/rules/
NestJS .claude/skills/nestjs/SKILL.md
Vue 3 .claude/skills/vue3/SKILL.md
Flutter .claude/skills/flutter/SKILL.md
Docker .claude/skills/docker/SKILL.md

디렉터리 구조

.
├── backend/    # NestJS API (Controller / Service / DTO / 공통 필터·인터셉터)
├── frontend/   # Vue 3 (pages / components / composables / stores / router)
├── flutter/    # Flutter (core / features / widgets)
├── docker-compose.yml         # 베이스 정의
├── docker-compose.dev.yml     # 개발 오버라이드 (핫리로드, 포트 노출)
├── CLAUDE.md   # 프로젝트 개요 + 공통 규칙 @import
└── .claude/
    ├── settings.json   # Claude Code 권한·환경 설정
    ├── rules/          # 공통 규칙 (코딩·응답 포맷·에러 코드·커밋·보안·환경변수)
    └── skills/         # 도메인별 개발 규칙 (nestjs·vue3·flutter·docker)
S
Description
No description provided
Readme 22 MiB
Languages
HTML 65.9%
TypeScript 9.2%
C++ 8.6%
CMake 6.7%
JavaScript 4.2%
Other 5.4%