릴리스: v1.3.84 모바일 열 배지 위치 및 헤더 정리

docs/history.md

@@ -1,5 +1,24 @@
 # 의사결정 이력
 
+## 2026-04-02 v1.3.83
+- 모바일에서 열 헤더가 칸과 시각적으로 분리되는 문제는 전체 레이아웃을 다시 갈아엎기보다, 각 칸 안에 열 이름 배지를 같이 보여주는 편이 가장 적은 변경으로 효과를 낸다고 정리했다.
+- 배지를 쓰는 반응형 구간에서는 기존 상단 열 헤더까지 남겨두면 중복 정보가 되므로, 같은 브레이크포인트에서 헤더는 숨기고 칸 배지 하나만 남기는 편이 맞다고 정리했다.
+
+## 2026-04-02 v1.3.82
+- 프리뷰 완성본도 결국 공유/열람용 결과물이므로, 이미지 다운로드 결과와 같은 작성자/저장 시각 메타를 같이 보여주는 편이 자연스럽다고 정리했다.
+- 관리자 템플릿 요청 카드는 “요청 티어표 보기”가 실제로 새창 이동용이라면 하단 버튼과 썸네일 클릭을 둘 다 유지하기보다, 썸네일 클릭 하나로 통합하는 편이 더 단순하고 직관적이라고 판단했다.
+
+## 2026-04-02 v1.3.81
+- 저장된 티어표 공유는 별도 새 페이지를 만들기보다, 이미 완성본 열람에 쓰고 있는 `preview=1` 주소를 그대로 공유 링크로 재사용하는 편이 가장 단순하고 일관적이라고 정리했다.
+- 공유 액션은 저장/삭제처럼 저장본 전제의 보조 기능이므로, 메인 저장 버튼 영역보다 하단 유틸리티 링크 영역에 두는 편이 더 자연스럽다고 판단했다.
+
+## 2026-04-02 v1.3.79
+- 카피라이트처럼 앱 전체 브랜딩 성격의 footer는 관리자 텔레포트 안에 두기보다, `App.vue`의 공통 오른쪽 레일 footer로 두는 편이 위치도 안정적이고 화면 간 일관성도 높다고 정리했다.
+
+## 2026-04-02 v1.3.78
+- 축소 상태에서는 텍스트가 사라지므로 같은 `티어표 만들기` 계열 액션이라도 커스텀 제작과 템플릿 기반 제작을 아이콘으로 구분해 주는 편이 맞다고 정리했다.
+- 관리자 우측 카피라이트처럼 “사이드바 하단”에 붙어야 하는 정보는 텔레포트 루트의 형제 노드로 두기보다, 실제 사이드바 컨테이너 내부의 마지막 행으로 두는 편이 레이아웃상 안전하다고 판단했다.
+
 ## 2026-04-02 v1.3.77
 - 왼쪽 레일을 접었을 때 하단 액션을 완전히 숨기면 `새 티어표 만들기` 진입점이 사라지므로, 펼친 상태의 하단 위치는 유지하되 축소 상태에서는 같은 위치의 아이콘 전용 버튼으로 바꿔 남겨두는 편이 맞다고 정리했다.
 

docs/todo.md

@@ -1,7 +1,15 @@
 # 할 일 및 이슈
 
 ## 단기 확인
+- 티어표 편집/프리뷰 모바일 열 배지는 새로 붙였으므로, 실제 좁은 화면에서 칸 상단 배지와 아이템 썸네일이 겹치지 않고 열 구분이 자연스러운지 한 번 더 QA한다.
+- 모바일 열 배지는 같은 구간에서 상단 열 제목을 숨기도록 다시 맞췄으므로, 720px 안팎뿐 아니라 980px 이하 전 구간에서 중복 표기 없이 자연스러운지 한 번 더 QA한다.
+- 프리뷰 완성본 하단 메타는 새로 붙였으므로, 작성자/저장 시각이 공개 열람 화면과 이미지 다운로드 결과 기준에서 모두 자연스럽게 읽히는지 한 번 더 QA한다.
+- 관리자 템플릿 요청 카드는 썸네일 클릭이 새창 열기 역할로 바뀌었으므로, 썸네일 클릭과 `확인하기` 액션이 서로 헷갈리지 않는지 한 번 더 QA한다.
+- 티어표 만들기 화면의 `공유하기`는 저장된 티어표에서만 노출되므로, 저장 직후/수정 중/복사본/읽기 전용 상태 각각에서 노출 조건과 클립보드 복사가 자연스러운지 한 번 더 QA한다.
+- 우측 카피라이트는 이제 공통 오른쪽 레일 footer이므로, 관리자 화면뿐 아니라 홈/프로필 등 오른쪽 사이드가 보이는 화면에서도 같은 최하단 위치에 유지되는지 한 번 더 QA한다.
+- 왼쪽 레일 축소 상태의 하단 액션 아이콘은 홈과 게임 허브에서 서로 다른 아이콘을 쓰도록 나눴으므로, 실제로 두 문맥이 한눈에 구분되는지 한 번 더 QA한다.
 - 왼쪽 레일 축소 상태 최하단의 `티어표 만들기` 아이콘 버튼은 새로 추가했으므로, 홈/게임 허브에서 실제로 같은 위치 감각으로 동작하는지 한 번 더 QA한다.
+- 관리자 우측 카피라이트 문구는 사이드바 내부 최하단으로 다시 옮겼으므로, 실제 관리자 화면에서 스크롤/창 크기 변화에도 계속 보이는지 한 번 더 QA한다.
 - 왼쪽 레일 축소 상태는 아이콘 줄 높이를 50px 기준으로 통일했으므로, 실제 데스크톱에서 아바타/검색/메뉴 아이콘이 시각적으로 같은 리듬으로 보이는지 한 번 더 QA한다.
 - 왼쪽 레일 검색은 이제 항상 게임 검색으로 홈으로 이동하므로, 홈이 아닌 화면에서 사이드 검색 후 게임 목록 결과로 자연스럽게 이동하는지 한 번 더 QA한다.
 - 앱 왼쪽 사이드 레일은 접힘 상태 레이아웃을 다시 손봤으므로, 데스크톱에서 접기/펼치기 반복 시 아바타 영역 높이, 아이콘 중앙 정렬, 검색 버튼 간격, 네비게이션 히트 영역이 모두 자연스러운지 한 번 더 QA한다.

docs/update.md

@@ -1,5 +1,26 @@
 # 업데이트 로그
 
+## 2026-04-02 v1.3.83
+- 티어표 편집/프리뷰 화면에서 열을 여러 개 쓰는 경우, 모바일처럼 좁은 화면에서는 기존 상단 열 헤더만으로 각 칸의 의미를 읽기 어려웠으므로 각 칸 상단에 작은 열 이름 배지를 추가함.
+- 이 배지는 모바일 구간에서만 보이고 데스크톱 레이아웃은 그대로 유지되므로, 작은 화면에서는 `메인 / 밸런스 / 서포트` 같은 열 맥락을 스크롤 중에도 잃지 않게 정리함.
+- 이후 배지가 칸 기준이 아니라 화면 한쪽에 겹치던 문제를 바로잡기 위해 각 칸을 기준점으로 다시 잡았고, 배지가 보이는 구간에서는 기존 상단 열 제목을 함께 숨겨 중복 표기를 제거함.
+
+## 2026-04-02 v1.3.82
+- 프리뷰 전용 완성본 화면에도 이미지 다운로드 결과와 같은 하단 메타를 붙여, 작성자 이름과 마지막 저장 시각을 바로 확인할 수 있게 정리함.
+- 관리자 `티어표 관리 > 템플릿 요청 관리`에서는 더 이상 썸네일 클릭으로 요청 미리보기 모달을 열지 않고, 썸네일 자체가 `요청 티어표 보기` 새창 링크 역할을 하도록 바꿨으며, 하단의 중복 `요청 티어표 보기` 버튼은 제거함.
+
+## 2026-04-02 v1.3.81
+- 티어표 만들기 화면에는 저장된 티어표에서만 보이는 `공유하기` 액션을 추가하고, 누르면 현재 티어표의 완성본 링크(`preview=1`)를 클립보드에 복사한 뒤 토스트로 안내하도록 정리함.
+- 공유 링크는 관리자가 새 창에서 보던 완성본 주소와 같은 문법을 사용하므로, 저장된 티어표를 그대로 외부에 전달하거나 다시 열람하는 흐름으로 바로 이어짐.
+
+## 2026-04-02 v1.3.79
+- 우측 카피라이트는 관리자 전용 레이아웃에서 분리해 앱 공통 `rightRail` footer로 올렸고, 이제 관리자 페이지뿐 아니라 오른쪽 사이드가 보이는 모든 화면에서 같은 최하단 위치에 표시됨.
+- 따라서 관리자 패널 길이나 페이지별 로컬 사이드바 내용과 무관하게, 카피라이트는 항상 오른쪽 레일 전체 기준 바닥에 고정되는 공통 footer 역할로 정리됨.
+
+## 2026-04-02 v1.3.78
+- 왼쪽 레일 축소 상태의 하단 액션 아이콘은 문맥에 따라 구분되도록 바꿔, 홈의 `커스텀 티어표 만들기`는 `dashboard_customize` 아이콘을 쓰고 게임 허브의 일반 `티어표 만들기`만 `add_notes` 아이콘을 유지하도록 정리함.
+- 관리자 우측 카피라이트 문구는 사이드바 바깥 형제로 밀려 보이지 않을 수 있었으므로, 다시 관리자 사이드바 `aside` 내부 최하단으로 옮겨 레이아웃 안에서 안정적으로 보이게 정리함.
+
 ## 2026-04-02 v1.3.77
 - 왼쪽 사이드 레일을 축소했을 때도 홈과 게임 허브에서 바로 새 티어표를 만들 수 있도록, 최하단 액션 영역에 `add_notes` 아이콘 기반의 축소 전용 `티어표 만들기` 버튼을 추가함.
 - 펼친 상태에서는 기존 텍스트 버튼을 그대로 유지하고, 축소 상태에서는 같은 위치에 아이콘 버튼만 남기도록 분기해 하단 액션 위치 감각은 유지하면서도 좁은 레일 폭에 맞게 정리함.

frontend/src/App.vue

@@ -10,6 +10,7 @@ import iconGridView from './assets/icons/grid_view.svg'
 import iconFavorite from './assets/icons/favorite.svg'
 import iconLists from './assets/icons/lists.svg'
 import iconAddNotes from './assets/icons/add_notes.svg'
+import iconDashboardCustomize from './assets/icons/dashboard_customize.svg'
 import iconSearch from './assets/icons/search.svg'
 import iconSettings from './assets/icons/settings.svg'
 import iconMenuBook from './assets/icons/menu_book.svg'
@@ -20,6 +21,7 @@ const route = useRoute()
 const router = useRouter()
 const auth = useAuthStore()
 const { toasts, dismissToast } = useToast()
+const RIGHT_RAIL_COPYRIGHT_URL = 'https://zenn.town/@murabito'
 
 const leftRailCollapsed = ref(false)
 const rightRailOpen = ref(true)
@@ -136,11 +138,11 @@ const gameHubViewMode = computed(() => (route.query.view === 'list' ? 'list' : '
 const leftBottomPrimaryAction = computed(() => {
   if (!authReady.value) return null
   if (route.name === 'home' && auth.user) {
-    return { label: '커스텀 티어표 만들기', to: '/editor/freeform/new' }
+    return { label: '커스텀 티어표 만들기', to: '/editor/freeform/new', iconSrc: iconDashboardCustomize }
   }
   if (route.name === 'gameHub') {
     const target = `/editor/${route.params.gameId}/new`
-    return { label: '새 티어표 만들기', to: auth.user ? target : `/login?redirect=${target}` }
+    return { label: '새 티어표 만들기', to: auth.user ? target : `/login?redirect=${target}`, iconSrc: iconAddNotes }
   }
   return null
 })
@@ -472,7 +474,7 @@ function submitGlobalSearch() {
             :title="leftBottomPrimaryAction.label"
             :aria-label="leftBottomPrimaryAction.label"
           >
-            <SvgIcon :src="iconAddNotes" :size="24" />
+            <SvgIcon :src="leftBottomPrimaryAction.iconSrc || iconAddNotes" :size="24" />
           </RouterLink>
           <button v-if="showSettingsGuideButton" class="adminButton adminButton--icon" type="button" @click="openGuideModal()">
             <SvgIcon :src="iconMenuBook" :size="18" class="adminButton__icon" />
@@ -627,6 +629,11 @@ function submitGlobalSearch() {
                 </button>
               </section>
             </template>
+            <div class="rightRail__footer">
+              <span>Copyright © 2026 </span>
+              <a :href="RIGHT_RAIL_COPYRIGHT_URL" target="_blank" rel="noreferrer">zenn</a>
+              <span>. All rights reserved.</span>
+            </div>
           </div>
         </div>
       </aside>
@@ -747,8 +754,11 @@ function submitGlobalSearch() {
 }
 
 .rightRail__content {
-  flex: 0 0 auto;
+  flex: 1 1 auto;
+  min-height: 0;
   overflow: visible;
+  display: flex;
+  flex-direction: column;
 }
 
 .ghostIcon {
@@ -1196,13 +1206,31 @@ function submitGlobalSearch() {
 }
 
 .rightRail__bottom {
-  display: flex;
-  align-items: flex-end;
-  justify-content: flex-end;
+  margin-top: auto;
+  display: grid;
   gap: 10px;
   padding-top: 12px;
 }
 
+.rightRail__footer {
+  padding: 0 4px 2px;
+  font-size: 9px;
+  line-height: 1.4;
+  text-align: center;
+  color: var(--theme-text-faint);
+  opacity: 0.72;
+}
+
+.rightRail__footer a {
+  color: #00ffff;
+  text-decoration: none;
+}
+
+.rightRail__footer a:hover {
+  color: #00ffff;
+  text-decoration: underline;
+}
+
 .settingsThemePanel {
   display: grid;
   gap: 10px;
@@ -1626,9 +1654,10 @@ function submitGlobalSearch() {
 }
 
 .localRightRailRoot {
-  min-height: auto;
-  display: grid;
-  align-content: start;
+  flex: 1 1 auto;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
   gap: 14px;
 }
 

frontend/src/assets/icons/dashboard_customize.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="ffffff"><path d="M120-840h320v320H120v-320Zm80 80v160-160Zm320-80h320v320H520v-320Zm80 80v160-160ZM120-440h320v320H120v-320Zm80 80v160-160Zm440-80h80v120h120v80H720v120h-80v-120H520v-80h120v-120Zm-40-320v160h160v-160H600Zm-400 0v160h160v-160H200Zm0 400v160h160v-160H200Z"/></svg>

frontend/src/assets/icons/share.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="ffffff"><path d="M680-80q-50 0-85-35t-35-85q0-6 3-28L282-392q-16 15-37 23.5t-45 8.5q-50 0-85-35t-35-85q0-50 35-85t85-35q24 0 45 8.5t37 23.5l281-164q-2-7-2.5-13.5T560-760q0-50 35-85t85-35q50 0 85 35t35 85q0 50-35 85t-85 35q-24 0-45-8.5T598-672L317-508q2 7 2.5 13.5t.5 14.5q0 8-.5 14.5T317-452l281 164q16-15 37-23.5t45-8.5q50 0 85 35t35 85q0 50-35 85t-85 35Zm0-80q17 0 28.5-11.5T720-200q0-17-11.5-28.5T680-240q-17 0-28.5 11.5T640-200q0 17 11.5 28.5T680-160ZM200-440q17 0 28.5-11.5T240-480q0-17-11.5-28.5T200-520q-17 0-28.5 11.5T160-480q0 17 11.5 28.5T200-440Zm508.5-291.5Q720-743 720-760t-11.5-28.5Q697-800 680-800t-28.5 11.5Q640-777 640-760t11.5 28.5Q663-720 680-720t28.5-11.5ZM680-200ZM200-480Zm480-280Z"/></svg>

frontend/src/components/admin/AdminTierlistsSection.vue

@@ -39,10 +39,17 @@ const props = defineProps({
     <div v-else class="templateRequestList">
       <article v-for="request in props.templateRequests" :key="request.id" class="tierAdminCard templateRequestCard templateRequestCard--aligned">
         <div class="templateRequestCard__side">
-          <button class="tierAdminCard__preview templateRequestCard__preview" type="button" @click="props.openTemplateRequestPreview(request)">
+          <a
+            class="tierAdminCard__preview templateRequestCard__preview"
+            :href="props.templateRequestSourceUrl(request) || undefined"
+            :target="props.templateRequestSourceUrl(request) ? '_blank' : undefined"
+            :rel="props.templateRequestSourceUrl(request) ? 'noreferrer' : undefined"
+            :aria-disabled="!props.templateRequestSourceUrl(request)"
+            @click.prevent="props.templateRequestSourceUrl(request) && window.open(props.templateRequestSourceUrl(request), '_blank', 'noopener,noreferrer')"
+          >
             <img v-if="request.thumbnailSrc" class="tierAdminCard__thumb" :src="toApiUrl(request.thumbnailSrc)" :alt="request.sourceTierListTitle" draggable="false" />
             <div v-else class="tierAdminCard__thumb tierAdminCard__thumb--empty"></div>
-          </button>
+          </a>
           <div class="templateRequestCard__thumbMeta">
             <template v-if="request.type === 'create'">
               <label class="templateRequestField">
@@ -97,17 +104,7 @@ const props = defineProps({
           </div>
 
           <div class="templateRequestCard__footer">
-            <div class="templateRequestCard__footerLeft">
-              <a
-                v-if="props.templateRequestSourceUrl(request)"
-                class="btn btn--ghost btn--small"
-                :href="props.templateRequestSourceUrl(request)"
-                target="_blank"
-                rel="noreferrer"
-              >
-                요청 티어표 보기
-              </a>
-            </div>
+            <div class="templateRequestCard__footerLeft"></div>
             <div class="templateRequestCard__actions">
               <button class="btn btn--primary" :disabled="request.isHandling" @click="props.startTemplateRequestReview(request)">
                 {{

frontend/src/views/AdminView.vue

@@ -26,7 +26,6 @@ const router = useRouter()
 const globalRightRailOpen = inject('rightRailOpen', ref(true))
 const localRightRailTarget = inject('localRightRailTarget', '#local-right-rail-root')
 const isAdmin = computed(() => !!auth.user?.isAdmin)
-const ADMIN_COPYRIGHT_URL = 'https://zenn.town/@murabito'
 
 const activeTab = ref('featured')
 const tierlistsMode = ref('requests')
@@ -2390,11 +2389,6 @@ function userAvatarFallback(user) {
         </div>
       </section>
     </aside>
-    <div v-show="globalRightRailOpen" class="adminSidebarFooter adminUiScope">
-      <span>Copyright © 2026 </span>
-      <a :href="ADMIN_COPYRIGHT_URL" target="_blank" rel="noreferrer">zenn</a>
-      <span>. All rights reserved.</span>
-    </div>
   </Teleport>
 </template>
 
@@ -2473,23 +2467,6 @@ function userAvatarFallback(user) {
   display: grid;
   gap: 12px;
 }
-.adminUiScope.adminSidebarFooter {
-  margin-top: 6px;
-  padding: 0 4px 2px;
-  font-size: 9px;
-  line-height: 1.4;
-  text-align: center;
-  color: var(--theme-text-faint);
-  opacity: 0.72;
-}
-.adminUiScope.adminSidebarFooter a {
-  color: #00ffff;
-  text-decoration: none;
-}
-.adminUiScope.adminSidebarFooter a:hover {
-  color: #00ffff;
-  text-decoration: underline;
-}
 .adminUiScope .adminSidebar__panel {
   display: grid;
   gap: 12px;

frontend/src/views/TierEditorView.vue

@@ -7,6 +7,7 @@ import SvgIcon from '../components/SvgIcon.vue'
 import addColumnRightIcon from '../assets/icons/add_column_right.svg'
 import addRowBelowIcon from '../assets/icons/add_row_below.svg'
 import addPhotoAlternateIcon from '../assets/icons/add_photo_alternate.svg'
+import shareIcon from '../assets/icons/share.svg'
 import { api } from '../lib/api'
 import { toApiUrl } from '../lib/runtime'
 import { useAuthStore } from '../stores/auth'
@@ -130,6 +131,12 @@ const canRequestTemplateUpdate = computed(
 const canSubmitTemplateCreateRequest = computed(() => !!templateRequestDraftTitle.value.trim() && !!templateRequestDraftDescription.value.trim())
 const canSubmitTemplateUpdateRequest = computed(() => !!templateRequestDraftTitle.value.trim() && !!templateRequestDraftDescription.value.trim())
 const templateRequestTargetLabel = computed(() => (gameId.value === 'freeform' ? '새로운 템플릿' : (gameName.value || gameId.value || '선택한 게임')))
+const shareTierListUrl = computed(() => {
+  const savedTierListId = persistedTierListId.value || (tierListId.value && tierListId.value !== 'new' ? tierListId.value : '')
+  if (!savedTierListId) return ''
+  if (typeof window === 'undefined') return `/editor/${gameId.value}/${savedTierListId}?preview=1`
+  return new URL(`/editor/${gameId.value}/${savedTierListId}?preview=1`, window.location.origin).toString()
+})
 
 watch(error, (message) => {
   if (!message) return
@@ -712,6 +719,32 @@ async function save() {
   }
 }
 
+async function copyShareUrl() {
+  if (!shareTierListUrl.value) {
+    toast.error('먼저 티어표를 저장한 뒤 공유할 수 있어요.')
+    return
+  }
+
+  try {
+    if (navigator?.clipboard?.writeText) {
+      await navigator.clipboard.writeText(shareTierListUrl.value)
+    } else {
+      const helper = document.createElement('textarea')
+      helper.value = shareTierListUrl.value
+      helper.setAttribute('readonly', '')
+      helper.style.position = 'absolute'
+      helper.style.left = '-9999px'
+      document.body.appendChild(helper)
+      helper.select()
+      document.execCommand('copy')
+      helper.remove()
+    }
+    toast.success('공유 링크를 클립보드에 복사했어요.')
+  } catch (e) {
+    toast.error('공유 링크를 복사하지 못했어요.')
+  }
+}
+
 function closeSaveModal() {
   isSaveModalOpen.value = false
 }
@@ -941,6 +974,7 @@ onUnmounted(() => {
           <div class="previewOnly__dropGrid" :style="{ '--column-count': columns.length }">
             <div v-for="(column, columnIndex) in columns" :key="column.id" class="previewOnly__dropColumn">
               <div class="previewOnly__drop">
+                <div v-if="columns.length > 1" class="previewOnly__columnBadge">{{ column.name || '열 ' + (columnIndex + 1) }}</div>
                 <div v-for="id in getGroupCellIds(g, columnIndex)" :key="id" class="previewOnly__cell">
                   <img :src="resolveItemSrc(itemsById[id])" class="thumb" :alt="itemsById[id]?.label || id" />
                   <div v-if="showCharacterNames" class="itemNameOverlay">{{ itemsById[id]?.label || id }}</div>
@@ -958,6 +992,10 @@ onUnmounted(() => {
           </div>
         </div>
       </div>
+      <div class="previewOnly__footer">
+        <span>{{ effectiveAuthorName }}</span>
+        <span>{{ formatExportDate(fallbackTimestamp) }}</span>
+      </div>
     </div>
   </section>
 
@@ -1165,13 +1203,14 @@ onUnmounted(() => {
                 </div>
                 <div class="row__content" :style="{ '--column-count': columns.length }">
                   <div v-for="(column, columnIndex) in columns" :key="column.id" class="row__column">
-                    <div
+                  <div
                       class="row__drop"
                       :data-list-type="'group'"
                       :data-group-id="g.id"
                       :data-column-index="columnIndex"
                       :ref="(el) => setGroupDropEl(g.id, columnIndex, el)"
                     >
+                      <div v-if="columns.length > 1" class="row__columnBadge">{{ column.name || '열 ' + (columnIndex + 1) }}</div>
                       <div v-if="!isExporting" class="row__empty" v-show="getGroupCellIds(g, columnIndex).length === 0">여기로 드래그해서 배치</div>
                       <div v-for="id in getGroupCellIds(g, columnIndex)" :key="id" class="cell" :data-item-id="id">
                         <img :src="resolveItemSrc(itemsById[id])" class="thumb" :alt="itemsById[id]?.label || id" />
@@ -1324,6 +1363,10 @@ onUnmounted(() => {
           <button v-if="canEdit" class="btn btn--save editorSidebar__button" :disabled="isSaving" @click="save">{{ isSaving ? '저장중...' : '저장' }}</button>
         </div>
         <div class="editorSidebar__utilityLinks">
+          <button v-if="hasSavedTierList" class="editorSidebar__utilityLink editorSidebar__utilityLink--share" @click="copyShareUrl">
+            <SvgIcon :src="shareIcon" :size="16" />
+            <span>공유하기</span>
+          </button>
           <button v-if="canEdit && hasSavedTierList" class="editorSidebar__utilityLink editorSidebar__utilityLink--danger" @click="openDeleteModal">삭제하기</button>
           <button v-if="canDuplicate" class="editorSidebar__utilityLink" @click="duplicateCurrentTierList">복사해서 내 티어표로 가져오기</button>
           <button
@@ -1466,6 +1509,7 @@ onUnmounted(() => {
   border: 1px solid var(--theme-border-strong);
 }
 .previewOnly__drop {
+  position: relative;
   border-radius: 14px;
   background: var(--theme-pill-bg);
   border: 1px solid var(--theme-border);
@@ -1476,6 +1520,10 @@ onUnmounted(() => {
   gap: 8px;
   align-content: flex-start;
 }
+.previewOnly__columnBadge,
+.row__columnBadge {
+  display: none;
+}
 .previewOnly__cell {
   display: inline-flex;
   position: relative;
@@ -1502,6 +1550,15 @@ onUnmounted(() => {
   opacity: 0.52;
   filter: grayscale(0.22) brightness(0.78);
 }
+.previewOnly__footer {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding-top: 8px;
+  color: var(--theme-text-soft);
+  font-size: 13px;
+}
 .toggleSwitch {
   display: inline-flex;
   align-items: center;
@@ -2282,6 +2339,9 @@ onUnmounted(() => {
   background: transparent;
   color: var(--theme-text-muted);
   font-size: 14px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
   cursor: pointer;
 }
 
@@ -2293,6 +2353,10 @@ onUnmounted(() => {
 .editorSidebar__utilityLink--danger {
   color: rgba(248, 113, 113, 0.96);
 }
+
+.editorSidebar__utilityLink--share {
+  color: var(--theme-text-soft);
+}
 .sidebar__title {
   font-weight: 900;
   margin-bottom: 8px;
@@ -2434,6 +2498,44 @@ onUnmounted(() => {
   border-radius: 14px;
 }
 @media (max-width: 980px) {
+  .previewOnly__columns,
+  .previewOnly__row,
+  .boardColumnsHeader,
+  .row {
+    grid-template-columns: 1fr;
+  }
+  .previewOnly__columnsSpacer,
+  .boardColumnsHeader__spacer {
+    display: none;
+  }
+  .previewOnly__dropGrid,
+  .boardColumnsHeader__grid {
+    grid-template-columns: 1fr;
+  }
+  .previewOnly__drop,
+  .row__drop {
+    padding-top: 40px;
+  }
+  .previewOnly__columnBadge,
+  .row__columnBadge {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    display: inline-flex;
+    align-items: center;
+    max-width: calc(100% - 20px);
+    padding: 5px 10px;
+    border-radius: 999px;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: rgba(255, 255, 255, 0.08);
+    color: var(--theme-text-soft);
+    font-size: 11px;
+    font-weight: 800;
+    line-height: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
   .previewOnly__row {
     grid-template-columns: 140px 1fr;
   }
@@ -2477,20 +2579,6 @@ onUnmounted(() => {
   .previewOnly {
     padding: 14px;
   }
-  .previewOnly__columns,
-  .previewOnly__row,
-  .boardColumnsHeader,
-  .row {
-    grid-template-columns: 1fr;
-  }
-  .previewOnly__columnsSpacer,
-  .boardColumnsHeader__spacer {
-    display: none;
-  }
-  .previewOnly__dropGrid,
-  .boardColumnsHeader__grid {
-    grid-template-columns: 1fr;
-  }
   .pool {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }