릴리스: v1.3.17 티어 에디터 열 정렬과 삭제 확인 흐름 보정

frontend/src/views/TierEditorView.vue

@@ -51,7 +51,9 @@ const templateRequestDraftDescription = ref('')
 const templateRequestSaveToMyTierList = ref(true)
 const isDeleteModalOpen = ref(false)
 const isGroupDeleteModalOpen = ref(false)
+const isColumnDeleteModalOpen = ref(false)
 const pendingRemoveGroupId = ref('')
+const pendingRemoveColumnIndex = ref(-1)
 const ownerId = ref('')
 const authorName = ref('')
 const authorAccountName = ref('')
@@ -384,6 +386,24 @@ async function removeColumn(columnIndex) {
   await syncSortables()
 }
 
+function openColumnDeleteModal(columnIndex) {
+  if (!canEdit.value || columns.value.length <= 1) return
+  pendingRemoveColumnIndex.value = columnIndex
+  isColumnDeleteModalOpen.value = true
+}
+
+function closeColumnDeleteModal() {
+  isColumnDeleteModalOpen.value = false
+  pendingRemoveColumnIndex.value = -1
+}
+
+async function confirmRemoveColumn() {
+  const columnIndex = pendingRemoveColumnIndex.value
+  closeColumnDeleteModal()
+  if (columnIndex < 0) return
+  await removeColumn(columnIndex)
+}
+
 async function performRemoveGroup(groupId) {
   if (groups.value.length <= 1) return
   const target = groups.value.find((group) => group.id === groupId)
@@ -1018,6 +1038,19 @@ onUnmounted(() => {
     </div>
   </div>
 
+  <div v-if="isColumnDeleteModalOpen" class="modalOverlay" @click.self="closeColumnDeleteModal">
+    <div class="modalCard" role="dialog" aria-modal="true" aria-labelledby="deleteColumnTitle">
+      <div id="deleteColumnTitle" class="modalCard__title">티어 열 삭제</div>
+      <div class="modalCard__desc">
+        이 열을 삭제하면 현재 들어 있는 아이템은 모두 첫 번째 열로 이동합니다. 삭제 후에도 아이템 자체는 유지돼요.
+      </div>
+      <div class="modalCard__actions">
+        <button class="btn btn--ghost" @click="closeColumnDeleteModal">취소</button>
+        <button class="btn btn--danger" @click="confirmRemoveColumn">열 삭제</button>
+      </div>
+    </div>
+  </div>
+
   <section class="layout" :style="{ '--thumb-size': `${iconSize}px` }">
     <div class="editorMain">
       <section class="head">
@@ -1077,7 +1110,7 @@ onUnmounted(() => {
                   <template v-else>
                     <div class="columnHeader">
                       <input v-model="column.name" class="columnName" maxlength="16" placeholder="열 이름" />
-                      <button class="columnRemoveText" type="button" title="열 삭제" aria-label="열 삭제" :disabled="columns.length <= 1" @click="removeColumn(columnIndex)">×</button>
+                      <button class="columnRemoveText" type="button" title="열 삭제" aria-label="열 삭제" :disabled="columns.length <= 1" @click="openColumnDeleteModal(columnIndex)">×</button>
                     </div>
                   </template>
                 </div>
@@ -1824,7 +1857,7 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 14px 28px 14px 12px;
+  padding: 14px 28px;
   font-weight: 900;
   overflow: hidden;
 }
@@ -1843,7 +1876,7 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   min-height: 38px;
-  padding: 0 28px 0 2px;
+  padding: 0 28px;
 }
 .columnName {
   width: 100%;
@@ -1854,6 +1887,7 @@ onUnmounted(() => {
   padding: 4px 0;
   text-align: center;
   font-size: 12px;
+  line-height: 1.2;
   font-weight: 800;
   outline: none;
 }