이미지 저장 시 이름 오버레이 말줄임 처리

티어표 PNG 내보내기 시 캐릭터 이름 슬라이드 효과를 비활성화하고, 왼쪽 정렬과 말줄임표가 안정적으로 적용되도록 보강했다.

Made-with: Cursor

docs/history.md

@@ -1,5 +1,9 @@
 # 의사결정 이력
 
+## 2026-04-27 v1.1.32
+- 이름 오버레이 마퀴는 “편집/열람 화면 가독성”에는 유효하지만, 내보내기 PNG는 정지된 결과물이므로 같은 애니메이션을 유지하면 프레임 시점에 따라 정렬이 깨진 상태가 캡처될 수 있다고 판단했다.
+- 따라서 export 캡처 시점에는 UI 표시 규칙을 별도로 분리해, 마퀴를 끄고 왼쪽 정렬 + 말줄임표를 강제하는 쪽이 결과물 일관성 측면에서 더 안전하다고 정리했다.
+
 ## 2026-04-27 v1.1.31
 - 캐릭터 이름 표시를 켠 상태에서 긴 라벨이 잘리는 문제는 글자 수 제한으로 자르기보다, 카드 안에서 overflow 시에만 자동 슬라이드시키는 편이 정보 전달과 가독성 모두에 유리하다고 판단했다.
 - 짧은 라벨까지 항상 움직이면 오히려 시선 피로가 생기므로, 실제 렌더링 너비를 기준으로 overflow 여부를 계산해 마퀴 애니메이션을 조건부로 켜는 방식으로 정리했다.

docs/map.md

@@ -17,7 +17,7 @@
 
 ## `/editor/:topicId/new`, `/editor/:topicId/:tierListId`
 - 화면 파일: `frontend/src/views/TierEditorView.vue`
-- 역할: 주제 slug 기반 에디터 진입, 티어 그룹 편집, 티어 행 추가/삭제, 보드 옆 아이템 풀에서 관리자 아이템/커스텀 아이템 다중 드래그 앤 드롭 업로드, 아이템 클릭 선택 후 셀/풀 재배치, 아이템 우클릭 메뉴 기반 복제본 생성, 헤더는 공통 `pageHead` 문법을 따르며 편집 가능 상태에서는 `NEW/EDIT + 템플릿 이름 + 작업 가이드`, 보기 전용 상태에서는 `템플릿 이름 + 티어표 제목 + 설명` 구조를 사용하고 아이브로우 클릭 시 해당 주제 허브로 이동하며 별도 `Preview` 아이브로우는 두지 않음, 공통 오른쪽 레일 안에 직접 배치되는 우측 편집 섹션에서 티어표 제목/설명/대표 썸네일/공개 여부/저장 제어와 커스텀 아이템 이름 정리, 읽기 전용 상태의 즐겨찾기 단독 CTA, PNG 다운로드, 저장된 티어표 기준 템플릿 등록/업데이트 요청, 댓글 카드 표시, 데이터가 준비되기 전에는 편집 모드/프리뷰 모드 모두 전용 스켈레톤 레이아웃을 먼저 보여주고, 저장용 랜덤 제목이나 내부 ID는 화면 표시용 제목으로 직접 노출하지 않으며, 스켈레톤이 내려간 뒤 실제 보드/풀 DOM에서만 드래그 초기화를 실행하고, `캐릭터 이름 표시` 시 이름이 칸을 넘는 항목만 하단 오버레이에서 천천히 무한 슬라이드되며, `?preview=1` 진입 시 공통 앱 셸은 유지한 채 중앙 본문에서 완성본 프리뷰와 하단 댓글 카드를 렌더링하며, 우측 뷰어 카드(`공유 티어표 보기`)는 스폰서 카드 바로 아래에서 유지하고 즐겨찾기 CTA도 함께 노출
+- 역할: 주제 slug 기반 에디터 진입, 티어 그룹 편집, 티어 행 추가/삭제, 보드 옆 아이템 풀에서 관리자 아이템/커스텀 아이템 다중 드래그 앤 드롭 업로드, 아이템 클릭 선택 후 셀/풀 재배치, 아이템 우클릭 메뉴 기반 복제본 생성, 헤더는 공통 `pageHead` 문법을 따르며 편집 가능 상태에서는 `NEW/EDIT + 템플릿 이름 + 작업 가이드`, 보기 전용 상태에서는 `템플릿 이름 + 티어표 제목 + 설명` 구조를 사용하고 아이브로우 클릭 시 해당 주제 허브로 이동하며 별도 `Preview` 아이브로우는 두지 않음, 공통 오른쪽 레일 안에 직접 배치되는 우측 편집 섹션에서 티어표 제목/설명/대표 썸네일/공개 여부/저장 제어와 커스텀 아이템 이름 정리, 읽기 전용 상태의 즐겨찾기 단독 CTA, PNG 다운로드, 저장된 티어표 기준 템플릿 등록/업데이트 요청, 댓글 카드 표시, 데이터가 준비되기 전에는 편집 모드/프리뷰 모드 모두 전용 스켈레톤 레이아웃을 먼저 보여주고, 저장용 랜덤 제목이나 내부 ID는 화면 표시용 제목으로 직접 노출하지 않으며, 스켈레톤이 내려간 뒤 실제 보드/풀 DOM에서만 드래그 초기화를 실행하고, `캐릭터 이름 표시` 시 이름이 칸을 넘는 항목만 하단 오버레이에서 천천히 무한 슬라이드되며 이미지 다운로드 캡처 시에는 슬라이드를 끄고 왼쪽 정렬+말줄임표로 고정하고, `?preview=1` 진입 시 공통 앱 셸은 유지한 채 중앙 본문에서 완성본 프리뷰와 하단 댓글 카드를 렌더링하며, 우측 뷰어 카드(`공유 티어표 보기`)는 스폰서 카드 바로 아래에서 유지하고 즐겨찾기 CTA도 함께 노출
 - 연동 API: `GET /api/topics/:topicId`, `GET /api/tierlists/:id`, `GET /api/tierlists/:id/comments`, `POST /api/tierlists/:id/comments`, `DELETE /api/tierlists/:id/comments/:commentId`, `POST /api/tierlists/:id/favorite`, `DELETE /api/tierlists/:id/favorite`, `POST /api/tierlists/thumbnail`, `POST /api/tierlists/custom-items`, `POST /api/tierlists`, `POST /api/tierlists/template-request`
 
 ## `/comments`

docs/spec.md

@@ -105,6 +105,7 @@
   - 보기 전용 상태에서 상단 아이브로우(템플릿 이름)는 해당 주제 허브로 이동하는 액션으로 사용하며, 편집 중 미저장 변경이 있으면 이동 전에 확인 모달을 띄운다.
   - 보드 바로 옆에는 드래그용 아이템 풀을 별도 패널로 두고, 커스텀 아이템 이름 정리 목록은 우측 편집 패널 내부에서 관리한다.
   - `캐릭터 이름 표시`를 켠 상태에서 카드 하단 이름 오버레이가 칸 너비를 넘으면, 넘치는 항목만 자동으로 천천히 무한 슬라이드한다. 너비 안에 들어오는 이름은 기존 고정 표시를 유지한다.
+  - 단, PNG 이미지 다운로드 캡처 시점(`exportBoard` 활성)에는 마퀴 애니메이션을 비활성화하고 왼쪽 정렬 + 말줄임표(`ellipsis`)만 적용해 정지 이미지 결과를 일관되게 유지한다.
 - 관리자 화면
   - 공통 우측 패널 대신 전용 로컬 운영 패널을 사용한다.
   - 공통 `workspaceBody` 카드 컨테이너를 벗기고, 중앙 관리 목록은 메인 컬럼에, 우측 운영 패널은 공통 셸의 세 번째 컬럼 aside에 배치한다.

docs/todo.md

@@ -1,6 +1,7 @@
 # 할 일 및 이슈
 
 ## 단기 확인
+- `v1.1.32` 이후 이미지 다운로드 시 카드 이름 오버레이가 더 이상 슬라이드되지 않고, 긴 이름이 왼쪽 정렬 + 말줄임표(`...`)로 안정적으로 저장되는지 확인한다.
 - `v1.1.31` 이후 로컬 실행(`NODE_ENV=development`)에서 `.env.local` 값이 실제로 우선 적용되고, 운영 실행(`NODE_ENV=production`)에서는 `.env.production`만 적용되는지 확인한다.
 - `v1.1.31` 이후 회원가입에서 같은 이메일을 대소문자만 바꾼 경우(`A@x.com` vs `a@x.com`)와 앞뒤 공백 케이스가 모두 중복으로 차단되는지 확인한다.
 - `v1.1.31` 이후 같은 닉네임(대소문자/공백 변형 포함)으로 재가입 시 `nickname_taken` 또는 `email_or_nickname_taken`으로 안정적으로 막히는지 확인한다.

docs/update.md

@@ -1,5 +1,10 @@
 # 업데이트 로그
 
+## 2026-04-27 v1.1.32
+- 티어표 편집 화면(`TierEditorView`)의 캐릭터 이름 오버레이 마퀴 처리에 export 예외를 추가했다. 이제 화면에서는 기존처럼 넘치는 이름만 슬라이드되지만, 이미지 다운로드 캡처 중(`.exportBoard--active`)에는 마퀴 클래스를 강제로 해제한다.
+- export 전용 CSS 가드를 함께 넣어, 저장 시점에 마퀴 클래스가 남아 있더라도 애니메이션/복제 텍스트를 끄고 왼쪽 정렬 + `text-overflow: ellipsis` 형태로 고정되게 보강했다.
+- 결과적으로 PNG 저장본에서는 긴 이름이 슬라이드되지 않고 정렬이 흔들리지 않으며, 카드 폭을 넘는 텍스트는 말줄임표로 안정적으로 표시된다.
+
 ## 2026-04-27 v1.1.31
 - 티어표 편집/뷰어 화면(`TierEditorView`)에서 `캐릭터 이름 표시`를 켰을 때 카드 하단 이름 오버레이가 박스를 넘으면 자동으로 천천히 무한 슬라이드되도록 보강했다.
 - 이름 길이가 짧아 박스를 넘지 않는 경우에는 기존처럼 고정 표시(ellipsis)만 유지하고, 넘치는 경우에만 마퀴 애니메이션이 켜지도록 overflow 기준을 실제 DOM 너비로 계산하도록 정리했다.

frontend/src/views/TierEditorView.vue

@@ -209,10 +209,11 @@ function updateNameMarquee(el) {
   const textEl = el.querySelector('.itemNameOverlay__text')
   if (!textEl) return
 
+  const isExportCapture = !!el.closest('.exportBoard--active')
   const content = (textEl.textContent || '').trim()
   textEl.setAttribute('data-text', content)
 
-  if (!content) {
+  if (!content || isExportCapture) {
     el.classList.remove('itemNameOverlay--marquee')
     el.style.removeProperty('--marquee-distance')
     el.style.removeProperty('--marquee-duration')
@@ -3051,6 +3052,16 @@ onUnmounted(() => {
   display: inline-block;
   padding-left: 20px;
 }
+.exportBoard--active .itemNameOverlay--marquee .itemNameOverlay__text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-right: 0;
+  animation: none;
+  transform: translateX(0);
+}
+.exportBoard--active .itemNameOverlay--marquee .itemNameOverlay__text::after {
+  content: none;
+}
 @keyframes itemNameMarquee {
   0% {
     transform: translateX(0);