diff --git a/docs/update.md b/docs/update.md index ed8b324..3298d64 100644 --- a/docs/update.md +++ b/docs/update.md @@ -1,5 +1,10 @@ # 업데이트 로그 +## 2026-04-01 v1.3.16 +- 티어 에디터의 행 삭제와 열 삭제는 다시 작은 X 아이콘 액션으로 정리해, 행/열 이름 주변의 반복 텍스트 때문에 보드가 답답해 보이던 문제를 줄임. +- 열 헤더 편집 영역은 입력창 오른쪽에 아이콘 삭제만 남기고, 행 라벨도 상단 우측의 작은 제거 버튼으로 맞춰 더 압축된 편집 밀도를 유지하도록 조정함. +- 저장 이미지에서 열 제목이 살짝 위로 떠 보이던 문제는 내보내기 헤더의 비대칭 패딩을 제거하고 flex 중앙 정렬로 바꿔, 시각적으로 정확한 중앙에 오도록 보정함. + ## 2026-04-01 v1.3.15 - 티어 에디터의 열 이름은 각 행 안에서 반복 렌더링되지 않도록 공통 상단 헤더로 분리해, 행 제목과 같은 구조로 더 또렷하게 구분되도록 수정함. - 행 추가/열 추가 액션은 새 SVG 아이콘 버튼으로 압축해, 텍스트 때문에 보드 상단 툴바 높이가 과하게 커지던 문제를 정리함. diff --git a/frontend/src/views/TierEditorView.vue b/frontend/src/views/TierEditorView.vue index e084541..7b9dbfc 100644 --- a/frontend/src/views/TierEditorView.vue +++ b/frontend/src/views/TierEditorView.vue @@ -1077,7 +1077,7 @@ onUnmounted(() => { @@ -1097,10 +1097,11 @@ onUnmounted(() => { class="rowRemoveText" type="button" title="행 삭제" + aria-label="행 삭제" :disabled="groups.length <= 1" @click="openGroupDeleteModal(g.id)" > - 행 삭제 + × @@ -1731,11 +1732,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 +1824,7 @@ onUnmounted(() => { display: flex; align-items: center; justify-content: center; - padding: 14px 12px 30px; + padding: 14px 28px 14px 12px; font-weight: 900; overflow: hidden; } @@ -1832,11 +1839,11 @@ onUnmounted(() => { min-width: 0; } .columnHeader { + position: relative; display: flex; align-items: center; - gap: 8px; min-height: 38px; - padding: 0 2px; + padding: 0 28px 0 2px; } .columnName { width: 100%; @@ -1854,14 +1861,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 +1916,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;