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

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;