릴리스: v0.1.26 아이콘 크기 단계 조절 추가

docs/history.md

@@ -95,3 +95,6 @@
 
 ## 2026-03-26 v0.1.25
 - 저장 결과물 기준 너비가 여전히 길다고 판단해, export 보드 폭을 추가로 `960px`까지 줄여 최종 PNG 밀도를 더 낮추기로 결정했다.
+
+## 2026-03-26 v0.1.26
+- 아이콘 크기는 사용자 취향 차이가 큰 요소이므로, 고정값 하나보다 기본 `80px`에 단계형 크기 선택을 제공하는 편이 더 낫다고 판단했다.

docs/spec.md

@@ -109,6 +109,7 @@
 - 신규 티어표의 공개 여부 기본값은 `ON`이며, 기존 티어표는 편집 화면과 `내 티어표` 목록에서 직접 삭제할 수 있다.
 - 제목이 비어 있는 상태로 저장하면 내부 제목은 `이름 없음 + 날짜` 형식으로 자동 생성한다.
 - 제목 입력이 비어 있는 동안에는 무분별한 도배 방지를 위한 관리자 임의 삭제 가능성 안내 문구를 표시한다.
+- 티어표 편집기의 아이콘 기본 크기는 `80px`이며, 사용자가 `48 / 60 / 80 / 100 / 120` 단계로 즉시 조절할 수 있다.
 - 공개 티어표 목록과 `내 티어표` 목록은 제목 옆에 작성자 아바타와 표시명을 함께 보여준다.
 - 작성자 아바타 이미지가 없을 경우 목록 썸네일 fallback은 닉네임이 아니라 계정명 기준 첫 글자를 사용한다.
 - 티어표 목록 메타 정보는 최종 업데이트 시각만 간략하게 표시한다.

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`로 더 줄여 최종 저장 이미지가 지나치게 길어지지 않도록 조정
 

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(() => {
     </div>
   </div>
 
-  <section class="layout">
+  <section class="layout" :style="{ '--thumb-size': `${iconSize}px` }">
     <div ref="boardEl" class="board">
       <div v-if="canEdit && !isExporting" class="boardTools">
-        <button class="btn btn--ghost" @click="addGroup">티어 추가</button>
+        <div class="boardTools__left">
+          <button class="btn btn--ghost" @click="addGroup">티어 추가</button>
+        </div>
+        <div class="boardTools__right">
+          <span class="boardTools__label">아이콘 크기</span>
+          <div class="sizePicker">
+            <button
+              v-for="size in iconSizeOptions"
+              :key="size"
+              class="sizePicker__button"
+              :class="{ 'sizePicker__button--active': iconSize === size }"
+              @click="setIconSize(size)"
+            >
+              {{ size }}
+            </button>
+          </div>
+        </div>
       </div>
       <div ref="exportBoardEl" class="exportBoard" :class="{ 'exportBoard--active': isExporting }">
         <div v-if="isExporting" class="exportBoard__title">{{ effectiveTitle }}</div>
@@ -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;