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

docs/update.md

@@ -1,5 +1,10 @@
 # 업데이트 로그
 
+## 2026-04-01 v1.3.17
+- 티어 에디터 열 헤더 입력창과 행 라벨은 좌우 패딩을 대칭으로 다시 잡아, 드래그 핸들과 삭제 아이콘이 있어도 제목이 한쪽으로 쏠려 보이지 않도록 보정함.
+- 열 삭제도 이제 행 삭제와 같은 확인 모달을 거쳐 진행되도록 바꿔, 실수로 즉시 제거되던 문제를 막음.
+- 내보내기 보드는 여전히 960px 고정 폭이라 열 수가 늘수록 각 칸 폭이 줄어드는 구조라는 점을 기준으로 정리했고, 현재 보정은 헤더 정렬 문제를 우선 해결하는 쪽에 맞춤.
+
 ## 2026-04-01 v1.3.16
 - 티어 에디터의 행 삭제와 열 삭제는 다시 작은 X 아이콘 액션으로 정리해, 행/열 이름 주변의 반복 텍스트 때문에 보드가 답답해 보이던 문제를 줄임.
 - 열 헤더 편집 영역은 입력창 오른쪽에 아이콘 삭제만 남기고, 행 라벨도 상단 우측의 작은 제거 버튼으로 맞춰 더 압축된 편집 밀도를 유지하도록 조정함.

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;
 }