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

docs/update.md

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

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" :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>
@@ -1097,10 +1130,11 @@ onUnmounted(() => {
                       class="rowRemoveText"
                       type="button"
                       title="행 삭제"
+                      aria-label="행 삭제"
                       :disabled="groups.length <= 1"
                       @click="openGroupDeleteModal(g.id)"
                     >
-                      행 삭제
+                      ×
                     </button>
                   </template>
                 </div>
@@ -1731,11 +1765,17 @@ onUnmounted(() => {
 }
 .boardColumnsHeader__cell {
   min-width: 0;
+  position: relative;
 }
 .boardColumnsHeader__name {
-  padding: 4px 0 8px;
+  min-height: 38px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 12px;
   text-align: center;
   font-size: 12px;
+  line-height: 1.2;
   font-weight: 800;
   opacity: 0.74;
 }
@@ -1817,7 +1857,7 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 14px 12px 30px;
+  padding: 14px 28px;
   font-weight: 900;
   overflow: hidden;
 }
@@ -1832,11 +1872,11 @@ onUnmounted(() => {
   min-width: 0;
 }
 .columnHeader {
+  position: relative;
   display: flex;
   align-items: center;
-  gap: 8px;
   min-height: 38px;
-  padding: 0 2px;
+  padding: 0 28px;
 }
 .columnName {
   width: 100%;
@@ -1847,6 +1887,7 @@ onUnmounted(() => {
   padding: 4px 0;
   text-align: center;
   font-size: 12px;
+  line-height: 1.2;
   font-weight: 800;
   outline: none;
 }
@@ -1854,14 +1895,28 @@ onUnmounted(() => {
   color: rgba(255, 255, 255, 0.34);
 }
 .columnRemoveText {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 20px;
+  display: grid;
+  place-items: center;
   padding: 0;
   border: 0;
+  border-radius: 999px;
   background: transparent;
   color: rgba(255, 255, 255, 0.56);
-  font-size: 11px;
+  font-size: 16px;
+  line-height: 1;
   font-weight: 800;
   cursor: pointer;
 }
+.columnRemoveText:hover {
+  color: rgba(255, 255, 255, 0.92);
+  background: rgba(255, 255, 255, 0.06);
+}
 .columnRemoveText:disabled {
   opacity: 0.32;
   cursor: not-allowed;
@@ -1895,19 +1950,25 @@ onUnmounted(() => {
 }
 .rowRemoveText {
   position: absolute;
-  right: 12px;
-  bottom: 10px;
+  top: 10px;
+  right: 10px;
+  width: 20px;
+  height: 20px;
+  display: grid;
+  place-items: center;
   padding: 0;
   border: 0;
+  border-radius: 999px;
   background: transparent;
   color: rgba(255, 255, 255, 0.6);
   cursor: pointer;
-  font-size: 11px;
+  font-size: 16px;
   line-height: 1;
   font-weight: 800;
 }
 .rowRemoveText:hover {
-  color: rgba(255, 255, 255, 0.9);
+  color: rgba(255, 255, 255, 0.92);
+  background: rgba(255, 255, 255, 0.06);
 }
 .rowRemoveText:disabled {
   opacity: 0.32;