diff --git a/docs/history.md b/docs/history.md index a589feb..06b6a2f 100644 --- a/docs/history.md +++ b/docs/history.md @@ -2,6 +2,7 @@ ## 2026-04-02 v1.3.83 - 모바일에서 열 헤더가 칸과 시각적으로 분리되는 문제는 전체 레이아웃을 다시 갈아엎기보다, 각 칸 안에 열 이름 배지를 같이 보여주는 편이 가장 적은 변경으로 효과를 낸다고 정리했다. +- 배지를 쓰는 반응형 구간에서는 기존 상단 열 헤더까지 남겨두면 중복 정보가 되므로, 같은 브레이크포인트에서 헤더는 숨기고 칸 배지 하나만 남기는 편이 맞다고 정리했다. ## 2026-04-02 v1.3.82 - 프리뷰 완성본도 결국 공유/열람용 결과물이므로, 이미지 다운로드 결과와 같은 작성자/저장 시각 메타를 같이 보여주는 편이 자연스럽다고 정리했다. diff --git a/docs/todo.md b/docs/todo.md index c62e240..ae314c7 100644 --- a/docs/todo.md +++ b/docs/todo.md @@ -2,6 +2,7 @@ ## 단기 확인 - 티어표 편집/프리뷰 모바일 열 배지는 새로 붙였으므로, 실제 좁은 화면에서 칸 상단 배지와 아이템 썸네일이 겹치지 않고 열 구분이 자연스러운지 한 번 더 QA한다. +- 모바일 열 배지는 같은 구간에서 상단 열 제목을 숨기도록 다시 맞췄으므로, 720px 안팎뿐 아니라 980px 이하 전 구간에서 중복 표기 없이 자연스러운지 한 번 더 QA한다. - 프리뷰 완성본 하단 메타는 새로 붙였으므로, 작성자/저장 시각이 공개 열람 화면과 이미지 다운로드 결과 기준에서 모두 자연스럽게 읽히는지 한 번 더 QA한다. - 관리자 템플릿 요청 카드는 썸네일 클릭이 새창 열기 역할로 바뀌었으므로, 썸네일 클릭과 `확인하기` 액션이 서로 헷갈리지 않는지 한 번 더 QA한다. - 티어표 만들기 화면의 `공유하기`는 저장된 티어표에서만 노출되므로, 저장 직후/수정 중/복사본/읽기 전용 상태 각각에서 노출 조건과 클립보드 복사가 자연스러운지 한 번 더 QA한다. diff --git a/docs/update.md b/docs/update.md index 7432768..0e6356b 100644 --- a/docs/update.md +++ b/docs/update.md @@ -3,6 +3,7 @@ ## 2026-04-02 v1.3.83 - 티어표 편집/프리뷰 화면에서 열을 여러 개 쓰는 경우, 모바일처럼 좁은 화면에서는 기존 상단 열 헤더만으로 각 칸의 의미를 읽기 어려웠으므로 각 칸 상단에 작은 열 이름 배지를 추가함. - 이 배지는 모바일 구간에서만 보이고 데스크톱 레이아웃은 그대로 유지되므로, 작은 화면에서는 `메인 / 밸런스 / 서포트` 같은 열 맥락을 스크롤 중에도 잃지 않게 정리함. +- 이후 배지가 칸 기준이 아니라 화면 한쪽에 겹치던 문제를 바로잡기 위해 각 칸을 기준점으로 다시 잡았고, 배지가 보이는 구간에서는 기존 상단 열 제목을 함께 숨겨 중복 표기를 제거함. ## 2026-04-02 v1.3.82 - 프리뷰 전용 완성본 화면에도 이미지 다운로드 결과와 같은 하단 메타를 붙여, 작성자 이름과 마지막 저장 시각을 바로 확인할 수 있게 정리함. diff --git a/frontend/src/views/TierEditorView.vue b/frontend/src/views/TierEditorView.vue index b56d734..c3f66a6 100644 --- a/frontend/src/views/TierEditorView.vue +++ b/frontend/src/views/TierEditorView.vue @@ -1509,6 +1509,7 @@ onUnmounted(() => { border: 1px solid var(--theme-border-strong); } .previewOnly__drop { + position: relative; border-radius: 14px; background: var(--theme-pill-bg); border: 1px solid var(--theme-border); @@ -2497,6 +2498,44 @@ onUnmounted(() => { border-radius: 14px; } @media (max-width: 980px) { + .previewOnly__columns, + .previewOnly__row, + .boardColumnsHeader, + .row { + grid-template-columns: 1fr; + } + .previewOnly__columnsSpacer, + .boardColumnsHeader__spacer { + display: none; + } + .previewOnly__dropGrid, + .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; + } .previewOnly__row { grid-template-columns: 140px 1fr; } @@ -2540,44 +2579,6 @@ onUnmounted(() => { .previewOnly { padding: 14px; } - .previewOnly__columns, - .previewOnly__row, - .boardColumnsHeader, - .row { - grid-template-columns: 1fr; - } - .previewOnly__columnsSpacer, - .boardColumnsHeader__spacer { - display: none; - } - .previewOnly__dropGrid, - .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)); }