From 37b59c7ab61c92374db260e920e27fd4374d9d77 Mon Sep 17 00:00:00 2001 From: zenn Date: Thu, 26 Mar 2026 15:19:33 +0900 Subject: [PATCH] =?UTF-8?q?=EB=A6=B4=EB=A6=AC=EC=8A=A4:=20v0.1.26=20?= =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=ED=81=AC=EA=B8=B0=20=EB=8B=A8?= =?UTF-8?q?=EA=B3=84=20=EC=A1=B0=EC=A0=88=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/history.md | 3 ++ docs/spec.md | 1 + docs/update.md | 4 ++ frontend/src/views/TierEditorView.vue | 72 ++++++++++++++++++++++++--- 4 files changed, 74 insertions(+), 6 deletions(-) diff --git a/docs/history.md b/docs/history.md index 29153be..dca3023 100644 --- a/docs/history.md +++ b/docs/history.md @@ -95,3 +95,6 @@ ## 2026-03-26 v0.1.25 - 저장 결과물 기준 너비가 여전히 길다고 판단해, export 보드 폭을 추가로 `960px`까지 줄여 최종 PNG 밀도를 더 낮추기로 결정했다. + +## 2026-03-26 v0.1.26 +- 아이콘 크기는 사용자 취향 차이가 큰 요소이므로, 고정값 하나보다 기본 `80px`에 단계형 크기 선택을 제공하는 편이 더 낫다고 판단했다. diff --git a/docs/spec.md b/docs/spec.md index fad8451..3fead77 100644 --- a/docs/spec.md +++ b/docs/spec.md @@ -109,6 +109,7 @@ - 신규 티어표의 공개 여부 기본값은 `ON`이며, 기존 티어표는 편집 화면과 `내 티어표` 목록에서 직접 삭제할 수 있다. - 제목이 비어 있는 상태로 저장하면 내부 제목은 `이름 없음 + 날짜` 형식으로 자동 생성한다. - 제목 입력이 비어 있는 동안에는 무분별한 도배 방지를 위한 관리자 임의 삭제 가능성 안내 문구를 표시한다. +- 티어표 편집기의 아이콘 기본 크기는 `80px`이며, 사용자가 `48 / 60 / 80 / 100 / 120` 단계로 즉시 조절할 수 있다. - 공개 티어표 목록과 `내 티어표` 목록은 제목 옆에 작성자 아바타와 표시명을 함께 보여준다. - 작성자 아바타 이미지가 없을 경우 목록 썸네일 fallback은 닉네임이 아니라 계정명 기준 첫 글자를 사용한다. - 티어표 목록 메타 정보는 최종 업데이트 시각만 간략하게 표시한다. diff --git a/docs/update.md b/docs/update.md index 3eecadf..ba056a8 100644 --- a/docs/update.md +++ b/docs/update.md @@ -1,5 +1,9 @@ # 업데이트 로그 +## 2026-03-26 v0.1.26 +- **아이콘 크기 조절 추가**: 티어표 편집기에서 `48 / 60 / 80 / 100 / 120` 단계로 아이콘 크기를 직접 바꿀 수 있도록 추가 +- **기본 아이콘 크기 상향**: 기본 `.thumb` 크기를 `80px` 기준으로 조정하고, 보드와 우측 아이템 목록에 함께 반영되도록 정리 + ## 2026-03-26 v0.1.25 - **export 폭 추가 축소**: 티어표 PNG export 보드 폭을 `960px`로 더 줄여 최종 저장 이미지가 지나치게 길어지지 않도록 조정 diff --git a/frontend/src/views/TierEditorView.vue b/frontend/src/views/TierEditorView.vue index 2676cdc..67bba61 100644 --- a/frontend/src/views/TierEditorView.vue +++ b/frontend/src/views/TierEditorView.vue @@ -37,6 +37,7 @@ const authorName = ref('') const authorAccountName = ref('') const updatedAt = ref(0) const isDragActive = ref(false) +const iconSize = ref(80) const boardEl = ref(null) const exportBoardEl = ref(null) @@ -50,6 +51,7 @@ const dropSortables = ref([]) const isNewTierList = computed(() => tierListId.value === 'new') const canEdit = computed(() => !!auth.user && (!ownerId.value || ownerId.value === auth.user.id)) +const iconSizeOptions = [48, 60, 80, 100, 120] const hasCustomTitle = computed(() => !!(title.value || '').trim()) const fallbackTimestamp = computed(() => (updatedAt.value ? updatedAt.value : Date.now())) const effectiveAuthorName = computed(() => { @@ -92,6 +94,10 @@ function formatExportDate(ts) { }) } +function setIconSize(nextSize) { + iconSize.value = nextSize +} + function setGroupDropEl(groupId, el) { if (!el) { delete groupDropEls.value[groupId] @@ -476,10 +482,26 @@ onUnmounted(() => { -
+
- +
+ +
+
+ 아이콘 크기 +
+ +
+
{{ effectiveTitle }}
@@ -723,8 +745,46 @@ onUnmounted(() => { } .boardTools { display: flex; + gap: 12px; + align-items: center; justify-content: flex-end; margin-bottom: 14px; + flex-wrap: wrap; +} +.boardTools__left, +.boardTools__right { + display: flex; + gap: 10px; + align-items: center; + flex-wrap: wrap; +} +.boardTools__left { + margin-right: auto; +} +.boardTools__label { + font-size: 13px; + opacity: 0.76; + font-weight: 800; +} +.sizePicker { + display: flex; + gap: 8px; + flex-wrap: wrap; +} +.sizePicker__button { + margin: 0; + min-width: 48px; + padding: 8px 10px; + border-radius: 10px; + border: 1px solid rgba(255, 255, 255, 0.14); + background: rgba(255, 255, 255, 0.05); + color: rgba(255, 255, 255, 0.92); + cursor: pointer; + font-weight: 800; +} +.sizePicker__button--active { + background: rgba(96, 165, 250, 0.24); + border-color: rgba(96, 165, 250, 0.38); } .exportBoard--active { display: grid; @@ -831,7 +891,7 @@ onUnmounted(() => { border-radius: 14px; background: rgba(0, 0, 0, 0.18); border: 1px solid rgba(255, 255, 255, 0.10); - min-height: 74px; + min-height: calc(var(--thumb-size, 80px) + 24px); padding: 10px; display: flex; flex-wrap: wrap; @@ -854,8 +914,8 @@ onUnmounted(() => { flex: 0 0 auto; } .thumb { - width: 48px; - height: 48px; + width: var(--thumb-size, 80px); + height: var(--thumb-size, 80px); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.06); @@ -903,7 +963,7 @@ onUnmounted(() => { } .poolItem { display: grid; - grid-template-columns: 52px 1fr; + grid-template-columns: var(--thumb-size, 80px) 1fr; gap: 10px; align-items: center; padding: 10px;