추가: 티어표 아이템 우클릭 복제

docs/history.md

@@ -1,5 +1,9 @@
 # 의사결정 이력
 
+## 2026-04-03 v1.4.66
+- 특정 템플릿은 같은 아이템을 조건별로 여러 칸에 동시에 배치해야 하므로, 기존 아이템을 직접 공유해서 재사용하기보다 우클릭으로 새 복제본을 만들어 미사용 풀에 넣는 방식이 더 자연스럽다고 판단했다.
+- 현재 티어표 저장 구조는 아이템 ID 기준으로 위치를 추적하므로, 복제본이 원본과 같은 ID를 쓰면 중복 배치가 불가능해진다. 따라서 복제 시 `dup-...` 형태의 새 ID를 발급해 원본과 복제본을 별도 인스턴스로 관리하기로 했다.
+
 ## 2026-04-03 v1.4.62
 - 운영 서버를 새 DB로 다시 시작하는 절차는 “일반 업데이트 재빌드”와 “볼륨까지 삭제하는 완전 초기화”가 같은 문서 안에 섞이면 실수로 데이터를 날릴 위험이 크므로, 배포 문서에서 두 흐름을 별도 섹션으로 나누는 편이 맞다고 판단했다.
 - DB만 비우고 업로드 볼륨을 남기는 방식도 가능하지만, 현재 서비스는 DB 레코드와 업로드 파일 참조가 강하게 연결되어 있으므로 이 방법 역시 “운영 데이터를 전부 버리는 전제”라는 경고를 같이 적어두는 쪽으로 정리했다.

docs/map.md

@@ -12,7 +12,7 @@
 
 ## `/editor/:topicId/new`, `/editor/:topicId/:tierListId`
 - 화면 파일: `frontend/src/views/TierEditorView.vue`
-- 역할: 주제 slug 기반 에디터 진입, 티어 그룹 편집, 티어 행 추가/삭제, 보드 옆 아이템 풀에서 관리자 아이템/커스텀 아이템 다중 드래그 앤 드롭 업로드, 공통 오른쪽 레일 안에 직접 배치되는 우측 편집 섹션에서 티어표 제목/설명/대표 썸네일/공개 여부/저장 제어와 커스텀 아이템 이름 정리, 즐겨찾기 토글, PNG 다운로드, 저장된 티어표 기준 템플릿 등록/업데이트 요청, `?preview=1` 진입 시 공통 앱 셸은 유지한 채 중앙 본문에서 완성본 프리뷰 렌더링
+- 역할: 주제 slug 기반 에디터 진입, 티어 그룹 편집, 티어 행 추가/삭제, 보드 옆 아이템 풀에서 관리자 아이템/커스텀 아이템 다중 드래그 앤 드롭 업로드, 아이템 클릭 선택 후 셀/풀 재배치, 아이템 우클릭 메뉴 기반 복제본 생성, 공통 오른쪽 레일 안에 직접 배치되는 우측 편집 섹션에서 티어표 제목/설명/대표 썸네일/공개 여부/저장 제어와 커스텀 아이템 이름 정리, 즐겨찾기 토글, PNG 다운로드, 저장된 티어표 기준 템플릿 등록/업데이트 요청, `?preview=1` 진입 시 공통 앱 셸은 유지한 채 중앙 본문에서 완성본 프리뷰 렌더링
 - 연동 API: `GET /api/topics/:topicId`, `GET /api/tierlists/:id`, `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`
 
 ## `/login`

docs/spec.md

@@ -295,6 +295,7 @@
 - 티어 행에 넣은 아이템은 작은 제거 버튼으로 다시 우측 아이템 풀로 되돌릴 수 있다.
 - 편집 가능한 티어표에서는 아이템을 드래그로 옮길 수 있고, 아이템을 클릭해 선택한 뒤 원하는 셀이나 아이템 풀 빈 영역을 클릭하는 방식으로도 위치를 바꿀 수 있다.
 - 클릭 배치 모드에서 선택된 아이템은 파란 포커스 테두리로 표시하며, 드래그를 시작하면 선택 상태를 해제하고 드래그 직후 짧은 클릭 입력은 무시해 드래그/클릭 조작이 섞이지 않게 한다.
+- 보드 칸이나 미사용 아이템 풀의 아이템을 우클릭하면 `아이템 복제` 메뉴가 열리고, 실행 시 같은 이미지/이름/출처를 가진 새 아이템 인스턴스를 미사용 풀 맨 앞에 추가한다. 복제본은 `dup-...` 형태의 새 ID를 쓰므로 원본과 복제본을 서로 다른 칸에 동시에 배치할 수 있다.
 - 기존 저장 티어표/복사본을 수정 가능한 상태로 다시 열 때는 저장본의 그룹/풀을 먼저 복원하고, 이후 현재 템플릿에 새로 추가된 기본 아이템만 미사용 풀 끝에 병합한다.
 - 관리자 템플릿에서 삭제된 기본 아이템이라도 이미 저장된 티어표의 그룹/풀에 포함되어 있던 항목은 자동 제거하지 않고 그대로 보존한다.
 - 신규 티어표의 공개 여부 기본값은 `ON`이며, 기존 티어표는 편집 화면과 `내 티어표` 목록에서 직접 삭제할 수 있다.

docs/todo.md

@@ -1,6 +1,8 @@
 # 할 일 및 이슈
 
 ## 단기 확인
+- 아이템 우클릭 복제 기능을 추가했으므로, 템플릿 아이템 복제/커스텀 아이템 복제/이미 보드에 배치된 아이템 복제 각각에서 복제본이 미사용 풀 맨 앞에 생기고 원본과 복제본을 서로 다른 칸에 동시에 둘 수 있는지 QA한다.
+- 복제본은 `dup-...` 새 ID로 저장되므로, 저장 후 재진입/티어표 복사본 생성/뷰어 모드 열람에서도 복제본이 그대로 유지되는지와, 템플릿 업데이트 요청에 복제된 커스텀 아이템이 포함될 때 운영상 이상이 없는지 확인한다.
 - `v1.4.62`에서 NAS 배포 문서에 운영 DB 완전 초기화 절차를 추가했으므로, 실제 NAS에서 `git pull → docker compose ... down -v → up -d --build` 순서로 재배포했을 때 빈 DB가 현재 스키마로 다시 올라오고 `freeform`만 생성되는지 확인한다.
 - `docker volume rm tier-maker_tmaker_mariadb_data` 방식은 프로젝트 디렉터리명에 따라 실제 볼륨 이름이 달라질 수 있으므로, 운영 NAS에서는 먼저 `docker volume ls | grep tmaker`로 이름을 확인한 뒤 문서 명령이 그대로 맞는지 점검한다.
 - `v1.4.61`에서 템플릿 공개 주소를 `slug`로 분리했으므로, 홈 카드/주제 상세/나의 티어표/즐겨찾기/검색 결과/팔로우 피드/사용자 프로필에서 열리는 URL이 `/topics/:slug`, `/editor/:slug/...` 형태로 바뀌고, 실제 화면 내용도 같은 주제 템플릿으로 정확히 열리는지 QA한다.

docs/update.md

@@ -1,5 +1,10 @@
 # 업데이트 로그
 
+## 2026-04-03 v1.4.66
+- 티어표 편집 화면에서 보드 위 아이템이나 미사용 아이템 풀의 아이템을 우클릭하면 `아이템 복제` 메뉴가 뜨고, 선택한 아이템의 이미지/이름/출처를 유지한 새 복제본을 미사용 풀 맨 앞에 추가하도록 구현했다.
+- 기존 아이템 ID를 그대로 다시 쓰면 같은 항목을 서로 다른 칸에 동시에 둘 수 없으므로, 복제 시 `dup-...` 새 ID를 발급해 원본과 복제본을 별도 아이템 인스턴스로 저장하도록 정리했다.
+- 우클릭 메뉴는 메뉴 밖 클릭, 다른 곳 우클릭, 스크롤, 창 포커스 이탈 시 닫히도록 했고, 화면 가장자리에서는 메뉴가 뷰포트 밖으로 나가지 않게 좌표를 보정했다.
+
 ## 2026-04-03 v1.4.62
 - UGREEN NAS 운영 배포 문서에 `git pull origin main` 후 일반 재빌드하는 절차와, 운영 데이터를 전부 버리고 `docker compose ... down -v`로 MariaDB/업로드/세션 볼륨까지 초기화한 뒤 새로 `up -d --build` 하는 절차를 분리해서 추가했다.
 - DB만 비우고 싶을 때 `tmaker_mariadb_data` 볼륨만 삭제하는 방법과, 실제 볼륨 이름이 다를 수 있으니 `docker volume ls | grep tmaker`로 먼저 확인하는 안내도 함께 적었다.

frontend/src/views/TierEditorView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { Teleport, computed, inject, nextTick, onUnmounted, ref, watch } from 'vue'
+import { Teleport, computed, inject, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import Sortable from 'sortablejs'
 import * as htmlToImage from 'html-to-image'
@@ -79,6 +79,12 @@ const poolSearchQuery = ref('')
 const selectedItemId = ref('')
 const recentDragFinishedAt = ref(0)
 const savedEditorSnapshot = ref('')
+const itemContextMenu = ref({
+  open: false,
+  x: 0,
+  y: 0,
+  itemId: '',
+})
 let editorLoadToken = 0
 
 const boardEl = ref(null)
@@ -329,6 +335,31 @@ function shouldIgnoreItemClick() {
   return Date.now() - recentDragFinishedAt.value < 180
 }
 
+function closeItemContextMenu() {
+  if (!itemContextMenu.value.open) return
+  itemContextMenu.value = {
+    open: false,
+    x: 0,
+    y: 0,
+    itemId: '',
+  }
+}
+
+function openItemContextMenu(itemId, event) {
+  if (!canEdit.value || !itemId || !itemsById.value[itemId] || shouldIgnoreItemClick()) return
+  selectedItemId.value = itemId
+  const viewportWidth = typeof window === 'undefined' ? 0 : window.innerWidth
+  const viewportHeight = typeof window === 'undefined' ? 0 : window.innerHeight
+  const menuX = Number(event?.clientX || 0)
+  const menuY = Number(event?.clientY || 0)
+  itemContextMenu.value = {
+    open: true,
+    x: viewportWidth ? Math.max(12, Math.min(menuX, viewportWidth - 180)) : menuX,
+    y: viewportHeight ? Math.max(12, Math.min(menuY, viewportHeight - 72)) : menuY,
+    itemId,
+  }
+}
+
 function getItemLocation(itemId) {
   if (!itemId) return { type: null, groupId: '', columnIndex: -1, index: -1 }
 
@@ -405,6 +436,43 @@ function moveSelectedItemToPool() {
   selectedItemId.value = ''
 }
 
+function duplicateItemToPool() {
+  if (!canEdit.value || !itemContextMenu.value.itemId) return
+
+  const sourceItem = itemsById.value[itemContextMenu.value.itemId]
+  if (!sourceItem) {
+    closeItemContextMenu()
+    return
+  }
+
+  const clonedId = createClonedItemId()
+  itemsById.value = {
+    ...itemsById.value,
+    [clonedId]: {
+      ...sourceItem,
+      id: clonedId,
+    },
+  }
+  pool.value = [clonedId, ...pool.value]
+  selectedItemId.value = clonedId
+  closeItemContextMenu()
+  toast.success('복제본을 미사용 아이템 목록에 추가했어요.')
+}
+
+function handleGlobalContextMenu(event) {
+  if (!itemContextMenu.value.open) return
+  const target = event?.target
+  if (target?.closest?.('[data-item-context-menu]') || target?.closest?.('[data-item-id]')) return
+  closeItemContextMenu()
+}
+
+function handleGlobalPointerDown(event) {
+  if (!itemContextMenu.value.open) return
+  const target = event?.target
+  if (target?.closest?.('[data-item-context-menu]')) return
+  closeItemContextMenu()
+}
+
 function setGroupDropEl(groupId, columnIndex, el) {
   const key = `${groupId}::${columnIndex}`
   if (!el) {
@@ -544,6 +612,10 @@ function createCustomItemLabel(fileName = '') {
   return (normalized || 'custom').slice(0, 60)
 }
 
+function createClonedItemId() {
+  return `dup-${Date.now()}-${Math.random().toString(16).slice(2, 10)}`
+}
+
 async function addGroup() {
   groups.value = [
     ...groups.value,
@@ -1135,6 +1207,7 @@ function resetEditorStateForRoute() {
   selectedItemId.value = ''
   recentDragFinishedAt.value = 0
   savedEditorSnapshot.value = ''
+  closeItemContextMenu()
   resetTemplateRequestDrafts()
 }
 
@@ -1240,7 +1313,21 @@ watch(
   { immediate: true }
 )
 
+onMounted(() => {
+  if (typeof window === 'undefined') return
+  window.addEventListener('pointerdown', handleGlobalPointerDown)
+  window.addEventListener('contextmenu', handleGlobalContextMenu)
+  window.addEventListener('blur', closeItemContextMenu)
+  window.addEventListener('scroll', closeItemContextMenu, true)
+})
+
 onUnmounted(() => {
+  if (typeof window !== 'undefined') {
+    window.removeEventListener('pointerdown', handleGlobalPointerDown)
+    window.removeEventListener('contextmenu', handleGlobalContextMenu)
+    window.removeEventListener('blur', closeItemContextMenu)
+    window.removeEventListener('scroll', closeItemContextMenu, true)
+  }
   if (thumbnailPreviewUrl.value) URL.revokeObjectURL(thumbnailPreviewUrl.value)
   destroySortables()
 })
@@ -1556,6 +1643,7 @@ onUnmounted(() => {
                         :class="{ 'cell--selected': selectedItemId === id }"
                         :data-item-id="id"
                         @click.stop="selectItemByClick(id)"
+                        @contextmenu.prevent.stop="openItemContextMenu(id, $event)"
                       >
                         <img :src="resolveItemSrc(itemsById[id])" class="thumb" :alt="itemsById[id]?.label || id" />
                         <div v-if="showCharacterNames" class="itemNameOverlay">{{ itemsById[id]?.label || id }}</div>
@@ -1637,6 +1725,7 @@ onUnmounted(() => {
               }"
               :data-item-id="id"
               @click.stop="selectItemByClick(id)"
+              @contextmenu.prevent.stop="openItemContextMenu(id, $event)"
             >
               <img :src="resolveItemSrc(itemsById[id])" class="thumb" :alt="itemsById[id]?.label || id" />
               <div class="poolItem__label">{{ itemsById[id]?.label || id }}</div>
@@ -1646,6 +1735,19 @@ onUnmounted(() => {
         </div>
       </div>
 
+      <div
+        v-if="itemContextMenu.open && canEdit"
+        class="itemContextMenu"
+        :style="{ left: `${itemContextMenu.x}px`, top: `${itemContextMenu.y}px` }"
+        data-item-context-menu
+        @click.stop
+        @contextmenu.prevent.stop
+      >
+        <button class="itemContextMenu__action" type="button" @click="duplicateItemToPool">
+          아이템 복제
+        </button>
+      </div>
+
     </div>
 
   </section>
@@ -2940,6 +3042,35 @@ onUnmounted(() => {
 .poolItem--hidden {
   display: none;
 }
+
+.itemContextMenu {
+  position: fixed;
+  z-index: 50;
+  min-width: 150px;
+  padding: 8px;
+  border-radius: 16px;
+  border: 1px solid var(--theme-border);
+  background: var(--theme-card-bg);
+  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
+}
+
+.itemContextMenu__action {
+  width: 100%;
+  border: 0;
+  border-radius: 12px;
+  padding: 11px 12px;
+  background: transparent;
+  color: var(--theme-text);
+  font-size: 13px;
+  font-weight: 800;
+  text-align: left;
+  cursor: pointer;
+}
+
+.itemContextMenu__action:hover {
+  background: var(--theme-pill-bg);
+}
+
 .hidden {
   display: none;
 }