릴리스: v0.1.27 UGREEN NAS 운영 배포 파일 추가

.dockerignore

@@ -0,0 +1,11 @@
+.git
+.gitignore
+.DS_Store
+node_modules
+frontend/node_modules
+frontend/dist
+backend/node_modules
+backend/.sessions
+backend/uploads
+docker-compose.yml
+docs

.env.production.example

@@ -0,0 +1,5 @@
+MARIADB_ROOT_PASSWORD=change-this-root-password
+MARIADB_DATABASE=tier_cursor
+MARIADB_USER=tier_cursor
+MARIADB_PASSWORD=change-this-db-password
+SESSION_SECRET=change-this-session-secret

README.md

@@ -39,6 +39,18 @@ VITE_API_ORIGIN=http://localhost:5179 npm run dev
 
 자세한 내용은 [docs/local-mariadb.md](/Users/bicute/Desktop/zenn.dev/tier-cursor/docs/local-mariadb.md)를 참고하세요.
 
+## UGREEN NAS 운영 배포
+
+운영용은 `MariaDB + backend + frontend` 3컨테이너 구조를 권장합니다.
+
+```bash
+cp .env.production.example .env.production
+docker compose --env-file .env.production -f docker-compose.prod.yml up -d --build
+```
+
+- 프로덕션 컴포즈: [docker-compose.prod.yml](/Users/bicute/Desktop/zenn.dev/tier-cursor/docker-compose.prod.yml)
+- 배포 가이드: [docs/ugreen-nas-deploy.md](/Users/bicute/Desktop/zenn.dev/tier-cursor/docs/ugreen-nas-deploy.md)
+
 ## 사용 흐름(현재 구현)
 
 - **게임 선택**: `/`에서 게임 클릭

backend/Dockerfile

@@ -0,0 +1,15 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+COPY backend/package*.json ./
+RUN npm ci --omit=dev
+
+COPY backend/ ./
+
+ENV NODE_ENV=production
+ENV PORT=5179
+
+EXPOSE 5179
+
+CMD ["node", "index.js"]

docker-compose.prod.yml

@@ -0,0 +1,79 @@
+services:
+  mariadb:
+    image: mariadb:11.4
+    container_name: tmaker-mariadb
+    restart: unless-stopped
+    environment:
+      MARIADB_ROOT_PASSWORD: ${MARIADB_ROOT_PASSWORD}
+      MARIADB_DATABASE: ${MARIADB_DATABASE}
+      MARIADB_USER: ${MARIADB_USER}
+      MARIADB_PASSWORD: ${MARIADB_PASSWORD}
+    command:
+      - --character-set-server=utf8mb4
+      - --collation-server=utf8mb4_unicode_ci
+    volumes:
+      - tmaker_mariadb_data:/var/lib/mysql
+    healthcheck:
+      test: ["CMD-SHELL", "mariadb-admin ping -h 127.0.0.1 -u$$MARIADB_USER -p$$MARIADB_PASSWORD --silent"]
+      interval: 10s
+      timeout: 5s
+      retries: 10
+
+  backend:
+    build:
+      context: .
+      dockerfile: backend/Dockerfile
+    container_name: tmaker-backend
+    restart: unless-stopped
+    depends_on:
+      mariadb:
+        condition: service_healthy
+    environment:
+      PORT: 5179
+      DB_HOST: mariadb
+      DB_PORT: 3306
+      DB_USER: ${MARIADB_USER}
+      DB_PASSWORD: ${MARIADB_PASSWORD}
+      DB_NAME: ${MARIADB_DATABASE}
+      SESSION_SECRET: ${SESSION_SECRET}
+      SESSION_COOKIE_SECURE: "true"
+      SESSION_COOKIE_SAME_SITE: "lax"
+      CORS_ORIGINS: https://tmaker.sori.studio
+      TRUST_PROXY: 1
+    volumes:
+      - tmaker_uploads:/app/uploads
+      - tmaker_sessions:/app/.sessions
+
+  frontend:
+    build:
+      context: .
+      dockerfile: frontend/Dockerfile
+      args:
+        VITE_API_ORIGIN: https://tmaker.sori.studio
+    container_name: tmaker-frontend
+    restart: unless-stopped
+    depends_on:
+      - backend
+    ports:
+      - "8080:80"
+
+  phpmyadmin:
+    image: phpmyadmin:5.2-apache
+    container_name: tmaker-phpmyadmin
+    restart: unless-stopped
+    profiles: ["admin"]
+    depends_on:
+      mariadb:
+        condition: service_healthy
+    environment:
+      PMA_HOST: mariadb
+      PMA_PORT: 3306
+      PMA_USER: ${MARIADB_USER}
+      PMA_PASSWORD: ${MARIADB_PASSWORD}
+    ports:
+      - "8081:80"
+
+volumes:
+  tmaker_mariadb_data:
+  tmaker_uploads:
+  tmaker_sessions:

docs/history.md

@@ -92,3 +92,13 @@
 - 상단 고정 게임이 50개까지 늘어날 수 있으므로, 위/아래 버튼만으로는 불편하다고 판단해 드래그 정렬을 함께 제공하기로 결정했다.
 - export 결과가 지나치게 넓으면 아이콘이 한 줄에 과도하게 몰리므로, 공유용 이미지 폭을 줄이고 pixel ratio도 낮춰 균형을 맞추기로 결정했다.
 - 현재 업로드는 파일 크기 제한만 있고 서버 저장 전 최적화는 없으므로, 운영 문서에 현황을 명확히 남기고 향후 리사이즈/압축 도입 여부를 검토하기로 했다.
+
+## 2026-03-26 v0.1.25
+- 저장 결과물 기준 너비가 여전히 길다고 판단해, export 보드 폭을 추가로 `960px`까지 줄여 최종 PNG 밀도를 더 낮추기로 결정했다.
+
+## 2026-03-26 v0.1.26
+- 아이콘 크기는 사용자 취향 차이가 큰 요소이므로, 고정값 하나보다 기본 `80px`에 단계형 크기 선택을 제공하는 편이 더 낫다고 판단했다.
+
+## 2026-03-26 v0.1.27
+- NAS 운영은 리버스 프록시 설정을 단순하게 유지하는 편이 좋으므로, 프런트 컨테이너 하나만 외부 공개하고 `/api`, `/uploads`는 내부 프록시로 넘기는 구조를 채택했다.
+- 운영은 로컬 개발 컴포즈와 분리된 전용 `docker-compose.prod.yml`을 두고, 환경변수는 `.env.production`으로 분리해 관리하기로 결정했다.

docs/spec.md

@@ -6,6 +6,7 @@
 - 데이터 저장소: MariaDB(MySQL 호환)
 - 세션 저장소: `session-file-store` 기반 파일 세션
 - 업로드 저장소: 로컬 파일 시스템(`backend/uploads/`)
+- 운영 배포: `frontend(Nginx 정적 서빙 + /api,/uploads 프록시) + backend + mariadb` Docker Compose 구조
 
 ## 데이터 저장 구조
 - 메인 데이터베이스: MariaDB `tier_cursor` (기본값)
@@ -109,10 +110,11 @@
 - 신규 티어표의 공개 여부 기본값은 `ON`이며, 기존 티어표는 편집 화면과 `내 티어표` 목록에서 직접 삭제할 수 있다.
 - 제목이 비어 있는 상태로 저장하면 내부 제목은 `이름 없음 + 날짜` 형식으로 자동 생성한다.
 - 제목 입력이 비어 있는 동안에는 무분별한 도배 방지를 위한 관리자 임의 삭제 가능성 안내 문구를 표시한다.
+- 티어표 편집기의 아이콘 기본 크기는 `80px`이며, 사용자가 `48 / 60 / 80 / 100 / 120` 단계로 즉시 조절할 수 있다.
 - 공개 티어표 목록과 `내 티어표` 목록은 제목 옆에 작성자 아바타와 표시명을 함께 보여준다.
 - 작성자 아바타 이미지가 없을 경우 목록 썸네일 fallback은 닉네임이 아니라 계정명 기준 첫 글자를 사용한다.
 - 티어표 목록 메타 정보는 최종 업데이트 시각만 간략하게 표시한다.
-- 저장 성공 시에는 에디터 안에서 반투명 오버레이 기반 확인 모달을 띄우고, PNG export 이미지는 약 `1360px` 폭과 `pixelRatio 1.5`, 외곽 여백, 작성자/날짜 하단 메타를 포함해 생성한다.
+- 저장 성공 시에는 에디터 안에서 반투명 오버레이 기반 확인 모달을 띄우고, PNG export 이미지는 약 `960px` 보드 폭과 `pixelRatio 1.5`, 외곽 여백, 작성자/날짜 하단 메타를 포함해 생성한다.
 - 홈 게임 목록은 관리자 상단 고정 순서가 있으면 그 순서를 먼저 적용하고, 그 외 게임은 최근 생성순으로 뒤에 이어진다.
 - `커스텀 티어표 만들기`는 카드가 아니라 홈 우측 상단 버튼으로 진입한다.
 
@@ -137,6 +139,11 @@
   - `SESSION_COOKIE_SECURE`: `true`면 HTTPS 전용 쿠키
   - `SESSION_COOKIE_SAME_SITE`: 기본 `lax`
 
+## 운영 배포 메모
+- 프로덕션 컴포즈 파일은 [docker-compose.prod.yml](/Users/bicute/Desktop/zenn.dev/tier-cursor/docker-compose.prod.yml)이다.
+- 외부 도메인 `tmaker.sori.studio`는 `frontend` 컨테이너의 `8080` 포트로 리버스 프록시하고, `/api`, `/uploads`, `/health`는 프런트 Nginx가 내부 `backend:5179`로 전달한다.
+- 운영 볼륨은 MariaDB 데이터, 업로드 파일, 세션 파일을 각각 분리해 유지한다.
+
 ## NAS 배포 메모
 - 현재 구조는 MariaDB/MySQL 계열이므로 NAS에 MariaDB를 올리면 phpMyAdmin 또는 Adminer로 직접 데이터 확인이 가능하다.
 - 추천 구성:

docs/ugreen-nas-deploy.md

@@ -0,0 +1,78 @@
+# UGREEN NAS 배포 가이드
+
+## 개요
+- 운영 기본 컨테이너는 `mariadb`, `backend`, `frontend` 3개다.
+- `phpmyadmin`은 필요할 때만 `admin` 프로필로 추가 실행한다.
+- 외부 공개는 `frontend` 컨테이너 하나만 하고, `/api`, `/uploads`, `/health`는 내부적으로 `backend`로 프록시한다.
+- 도메인은 `https://tmaker.sori.studio` 기준으로 설정한다.
+
+## 파일
+- 프로덕션 컴포즈: [docker-compose.prod.yml](/Users/bicute/Desktop/zenn.dev/tier-cursor/docker-compose.prod.yml)
+- 백엔드 이미지: [backend/Dockerfile](/Users/bicute/Desktop/zenn.dev/tier-cursor/backend/Dockerfile)
+- 프런트 이미지: [frontend/Dockerfile](/Users/bicute/Desktop/zenn.dev/tier-cursor/frontend/Dockerfile)
+- 프런트 Nginx 프록시: [frontend/nginx.conf](/Users/bicute/Desktop/zenn.dev/tier-cursor/frontend/nginx.conf)
+- 환경변수 예시: [.env.production.example](/Users/bicute/Desktop/zenn.dev/tier-cursor/.env.production.example)
+
+## 1. 프로젝트 업로드
+- NAS 작업 폴더에 현재 프로젝트를 그대로 업로드한다.
+- 기존 로컬 MariaDB 내용은 무시하고 새 운영 DB로 시작해도 된다.
+
+## 2. 환경변수 파일 준비
+- 루트에서 `.env.production.example`를 복사해 `.env.production`으로 만든다.
+- 최소 변경값:
+  - `MARIADB_ROOT_PASSWORD`
+  - `MARIADB_PASSWORD`
+  - `SESSION_SECRET`
+
+예시:
+
+```env
+MARIADB_ROOT_PASSWORD=very-strong-root-password
+MARIADB_DATABASE=tier_cursor
+MARIADB_USER=tier_cursor
+MARIADB_PASSWORD=very-strong-app-password
+SESSION_SECRET=very-strong-random-session-secret
+```
+
+## 3. 컨테이너 실행
+
+```bash
+docker compose --env-file .env.production -f docker-compose.prod.yml up -d --build
+```
+
+- phpMyAdmin까지 같이 띄우려면:
+
+```bash
+docker compose --env-file .env.production -f docker-compose.prod.yml --profile admin up -d --build
+```
+
+## 4. NAS 리버스 프록시
+- 외부 도메인: `tmaker.sori.studio`
+- 내부 대상 프로토콜: `http`
+- 내부 대상 호스트: NAS IP 또는 `localhost`
+- 내부 대상 포트: `8080`
+
+즉 NAS 리버스 프록시는 `frontend` 컨테이너의 `8080`만 바라보면 된다.
+
+## 5. HTTPS / 쿠키
+- 현재 프로덕션 컴포즈는 `SESSION_COOKIE_SECURE=true`를 사용한다.
+- 따라서 `tmaker.sori.studio`에는 HTTPS 인증서가 연결되어 있어야 한다.
+- NAS 리버스 프록시가 HTTPS 종료를 하고 내부는 `http://frontend:80` 또는 `localhost:8080`으로 전달하면 된다.
+
+## 6. 데이터 위치
+- MariaDB 데이터: Docker volume `tmaker_mariadb_data`
+- 업로드 파일: Docker volume `tmaker_uploads`
+- 세션 파일: Docker volume `tmaker_sessions`
+
+## 7. 점검 포인트
+- 메인 접속: `https://tmaker.sori.studio`
+- 헬스체크: `https://tmaker.sori.studio/health`
+- 관리자 로그인 후:
+  - 게임 생성
+  - 썸네일 업로드
+  - 티어표 저장
+  - 이미지 다운로드
+
+## 8. 참고
+- 현재 업로드 이미지는 서버 저장 전에 리사이즈/압축하지 않는다.
+- 운영 중 원본 이미지가 많이 쌓이면 이후 `sharp` 기반 최적화 단계를 추가하는 것이 좋다.

docs/update.md

@@ -1,5 +1,17 @@
 # 업데이트 로그
 
+## 2026-03-26 v0.1.27
+- **UGREEN NAS 배포 파일 추가**: `backend`, `frontend`용 Dockerfile과 프런트 Nginx 프록시 설정, 프로덕션 전용 `docker-compose.prod.yml` 추가
+- **운영 환경 예시 추가**: `.env.production.example`로 MariaDB/세션 시크릿 환경변수 템플릿 제공
+- **배포 문서화**: `tmaker.sori.studio` 기준 NAS 리버스 프록시, 컨테이너 실행, 볼륨 구성 가이드를 문서에 정리
+
+## 2026-03-26 v0.1.26
+- **아이콘 크기 조절 추가**: 티어표 편집기에서 `48 / 60 / 80 / 100 / 120` 단계로 아이콘 크기를 직접 바꿀 수 있도록 추가
+- **기본 아이콘 크기 상향**: 기본 `.thumb` 크기를 `80px` 기준으로 조정하고, 보드와 우측 아이템 목록에 함께 반영되도록 정리
+
+## 2026-03-26 v0.1.25
+- **export 폭 추가 축소**: 티어표 PNG export 보드 폭을 `960px`로 더 줄여 최종 저장 이미지가 지나치게 길어지지 않도록 조정
+
 ## 2026-03-26 v0.1.24
 - **관리자 게임 순서 드래그 정렬 추가**: 상단 고정 게임 목록을 위/아래 버튼뿐 아니라 드래그로도 순서를 바꿀 수 있도록 보강
 - **export 크기 재조정**: 티어표 PNG export를 약 `1360px` 폭과 `pixelRatio 1.5` 기준으로 낮춰 아이콘이 과도하게 한 줄에 몰리지 않도록 수정

frontend/Dockerfile

@@ -0,0 +1,22 @@
+FROM node:20-alpine AS build
+
+WORKDIR /app
+
+COPY frontend/package*.json ./
+RUN npm ci
+
+COPY frontend/ ./
+
+ARG VITE_API_ORIGIN=https://tmaker.sori.studio
+ENV VITE_API_ORIGIN=${VITE_API_ORIGIN}
+
+RUN npm run build
+
+FROM nginx:1.27-alpine
+
+COPY frontend/nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /app/dist /usr/share/nginx/html
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

frontend/nginx.conf

@@ -0,0 +1,38 @@
+server {
+  listen 80;
+  server_name _;
+
+  root /usr/share/nginx/html;
+  index index.html;
+
+  location / {
+    try_files $uri $uri/ /index.html;
+  }
+
+  location /api/ {
+    proxy_pass http://backend:5179/api/;
+    proxy_http_version 1.1;
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header X-Forwarded-Proto $scheme;
+  }
+
+  location /uploads/ {
+    proxy_pass http://backend:5179/uploads/;
+    proxy_http_version 1.1;
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header X-Forwarded-Proto $scheme;
+  }
+
+  location /health {
+    proxy_pass http://backend:5179/health;
+    proxy_http_version 1.1;
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header X-Forwarded-Proto $scheme;
+  }
+}

frontend/src/views/TierEditorView.vue

@@ -37,6 +37,7 @@ const authorName = ref('')
 const authorAccountName = ref('')
 const updatedAt = ref(0)
 const isDragActive = ref(false)
+const iconSize = ref(80)
 
 const boardEl = ref(null)
 const exportBoardEl = ref(null)
@@ -50,6 +51,7 @@ const dropSortables = ref([])
 
 const isNewTierList = computed(() => tierListId.value === 'new')
 const canEdit = computed(() => !!auth.user && (!ownerId.value || ownerId.value === auth.user.id))
+const iconSizeOptions = [48, 60, 80, 100, 120]
 const hasCustomTitle = computed(() => !!(title.value || '').trim())
 const fallbackTimestamp = computed(() => (updatedAt.value ? updatedAt.value : Date.now()))
 const effectiveAuthorName = computed(() => {
@@ -92,6 +94,10 @@ function formatExportDate(ts) {
   })
 }
 
+function setIconSize(nextSize) {
+  iconSize.value = nextSize
+}
+
 function setGroupDropEl(groupId, el) {
   if (!el) {
     delete groupDropEls.value[groupId]
@@ -476,10 +482,26 @@ onUnmounted(() => {
     </div>
   </div>
 
-  <section class="layout">
+  <section class="layout" :style="{ '--thumb-size': `${iconSize}px` }">
     <div ref="boardEl" class="board">
       <div v-if="canEdit && !isExporting" class="boardTools">
-        <button class="btn btn--ghost" @click="addGroup">티어 추가</button>
+        <div class="boardTools__left">
+          <button class="btn btn--ghost" @click="addGroup">티어 추가</button>
+        </div>
+        <div class="boardTools__right">
+          <span class="boardTools__label">아이콘 크기</span>
+          <div class="sizePicker">
+            <button
+              v-for="size in iconSizeOptions"
+              :key="size"
+              class="sizePicker__button"
+              :class="{ 'sizePicker__button--active': iconSize === size }"
+              @click="setIconSize(size)"
+            >
+              {{ size }}
+            </button>
+          </div>
+        </div>
       </div>
       <div ref="exportBoardEl" class="exportBoard" :class="{ 'exportBoard--active': isExporting }">
         <div v-if="isExporting" class="exportBoard__title">{{ effectiveTitle }}</div>
@@ -723,13 +745,51 @@ onUnmounted(() => {
 }
 .boardTools {
   display: flex;
+  gap: 12px;
+  align-items: center;
   justify-content: flex-end;
   margin-bottom: 14px;
+  flex-wrap: wrap;
+}
+.boardTools__left,
+.boardTools__right {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.boardTools__left {
+  margin-right: auto;
+}
+.boardTools__label {
+  font-size: 13px;
+  opacity: 0.76;
+  font-weight: 800;
+}
+.sizePicker {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.sizePicker__button {
+  margin: 0;
+  min-width: 48px;
+  padding: 8px 10px;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(255, 255, 255, 0.05);
+  color: rgba(255, 255, 255, 0.92);
+  cursor: pointer;
+  font-weight: 800;
+}
+.sizePicker__button--active {
+  background: rgba(96, 165, 250, 0.24);
+  border-color: rgba(96, 165, 250, 0.38);
 }
 .exportBoard--active {
   display: grid;
   gap: 12px;
-  width: 1360px;
+  width: 960px;
   max-width: none;
   box-sizing: border-box;
   padding: 44px 52px;
@@ -831,7 +891,7 @@ onUnmounted(() => {
   border-radius: 14px;
   background: rgba(0, 0, 0, 0.18);
   border: 1px solid rgba(255, 255, 255, 0.10);
-  min-height: 74px;
+  min-height: calc(var(--thumb-size, 80px) + 24px);
   padding: 10px;
   display: flex;
   flex-wrap: wrap;
@@ -854,8 +914,8 @@ onUnmounted(() => {
   flex: 0 0 auto;
 }
 .thumb {
-  width: 48px;
-  height: 48px;
+  width: var(--thumb-size, 80px);
+  height: var(--thumb-size, 80px);
   border-radius: 10px;
   border: 1px solid rgba(255, 255, 255, 0.14);
   background: rgba(255, 255, 255, 0.06);
@@ -903,7 +963,7 @@ onUnmounted(() => {
 }
 .poolItem {
   display: grid;
-  grid-template-columns: 52px 1fr;
+  grid-template-columns: var(--thumb-size, 80px) 1fr;
   gap: 10px;
   align-items: center;
   padding: 10px;