릴리스: v1.3.83 모바일 열 배지 추가

frontend/src/views/TierEditorView.vue

@@ -974,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>
@@ -1202,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" />
@@ -1517,6 +1519,10 @@ onUnmounted(() => {
   gap: 8px;
   align-content: flex-start;
 }
+.previewOnly__columnBadge,
+.row__columnBadge {
+  display: none;
+}
 .previewOnly__cell {
   display: inline-flex;
   position: relative;
@@ -2548,6 +2554,30 @@ onUnmounted(() => {
   .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;
+  }
   .pool {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }