릴리스: v0.1.12 작성 권한과 회원 관리 보강

frontend/src/views/TierEditorView.vue

@@ -1,12 +1,15 @@
 <script setup>
 import { computed, nextTick, onMounted, ref } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import Sortable from 'sortablejs'
 import * as htmlToImage from 'html-to-image'
 import { api } from '../lib/api'
 import { toApiUrl } from '../lib/runtime'
+import { useAuthStore } from '../stores/auth'
 
 const route = useRoute()
+const router = useRouter()
+const auth = useAuthStore()
 const gameId = computed(() => route.params.gameId)
 const tierListId = computed(() => route.params.tierListId)
 const gameName = ref('')
@@ -27,6 +30,8 @@ const description = ref('')
 const isPublic = ref(false)
 const error = ref('')
 const isSaving = ref(false)
+const ownerId = ref('')
+const isDragActive = ref(false)
 
 const boardEl = ref(null)
 const groupListEl = ref(null)
@@ -34,6 +39,9 @@ const poolEl = ref(null)
 const groupDropEls = ref({})
 const fileEl = ref(null)
 
+const isNewTierList = computed(() => tierListId.value === 'new')
+const canEdit = computed(() => !!auth.user && (!ownerId.value || ownerId.value === auth.user.id))
+
 function setGroupDropEl(groupId, el) {
   if (!el) return
   groupDropEls.value[groupId] = el
@@ -104,6 +112,7 @@ async function initSortables() {
 }
 
 function addCustomImage(file) {
+  if (!file || !file.type.startsWith('image/')) return
   const url = URL.createObjectURL(file)
   const id = `c-${Date.now()}-${Math.random().toString(16).slice(2)}`
   itemsById.value = {
@@ -114,16 +123,35 @@ function addCustomImage(file) {
 }
 
 function openFile() {
+  if (!canEdit.value) return
   fileEl.value?.click()
 }
 
 function onFileChange(e) {
-  const file = e.target.files && e.target.files[0]
-  if (!file) return
-  addCustomImage(file)
+  const files = Array.from(e.target.files || [])
+  if (!files.length) return
+  files.forEach(addCustomImage)
   e.target.value = ''
 }
 
+function onDragEnter() {
+  if (!canEdit.value) return
+  isDragActive.value = true
+}
+
+function onDragLeave(event) {
+  if (!event.currentTarget.contains(event.relatedTarget)) {
+    isDragActive.value = false
+  }
+}
+
+function onDropFiles(event) {
+  if (!canEdit.value) return
+  isDragActive.value = false
+  const files = Array.from(event.dataTransfer?.files || []).filter((file) => file.type.startsWith('image/'))
+  files.forEach(addCustomImage)
+}
+
 async function downloadImage() {
   if (!boardEl.value) return
   const dataUrl = await htmlToImage.toPng(boardEl.value, { pixelRatio: 2, backgroundColor: '#0b1220' })
@@ -200,6 +228,13 @@ async function save() {
 
 onMounted(() => {
   ;(async () => {
+    await auth.refresh()
+
+    if (isNewTierList.value && !auth.user) {
+      router.replace(`/login?redirect=/editor/${gameId.value}/new`)
+      return
+    }
+
     try {
       const gameRes = await api.getGame(gameId.value)
       gameName.value = gameRes.game?.name || gameId.value
@@ -221,6 +256,7 @@ onMounted(() => {
       try {
         const res = await api.getTierList(tierListId.value)
         const t = res.tierList
+        ownerId.value = t.authorId
         title.value = t.title
         description.value = t.description || ''
         isPublic.value = !!t.isPublic
@@ -237,7 +273,9 @@ onMounted(() => {
     }
 
     await nextTick()
-    await initSortables()
+    if (canEdit.value) {
+      await initSortables()
+    }
   })()
 })
 </script>
@@ -246,22 +284,28 @@ onMounted(() => {
   <section class="head">
     <div>
       <div class="kicker">{{ gameName || gameId }}</div>
-      <input v-model="title" class="titleInput" placeholder="티어표 이름을 입력하세요" />
+      <input v-model="title" class="titleInput" placeholder="티어표 이름을 입력하세요" :readonly="!canEdit" />
       <input
         v-model="description"
         class="descInput"
         placeholder="설명(선택): 이 티어표의 기준/룰"
+        :readonly="!canEdit"
       />
       <div class="hint">
-        그룹 이름/순서 변경과 아이템 드래그&드롭이 가능합니다. 저장하려면 로그인 후 <b>저장</b>을 누르세요.
+        <template v-if="canEdit">
+          그룹 이름/순서 변경과 아이템 드래그&드롭이 가능합니다. 저장하려면 <b>저장</b>을 누르세요.
+        </template>
+        <template v-else>
+          공개된 티어표를 보는 중입니다. 로그인한 작성자만 수정할 수 있어요.
+        </template>
       </div>
     </div>
     <div class="actions">
-      <label class="toggle">
-        <input v-model="isPublic" type="checkbox" />
+      <label class="toggle" :class="{ 'toggle--disabled': !canEdit }">
+        <input v-model="isPublic" type="checkbox" :disabled="!canEdit" />
         <span>공개</span>
       </label>
-      <button class="btn" :disabled="isSaving" @click="save">{{ isSaving ? '저장중...' : '저장' }}</button>
+      <button v-if="canEdit" class="btn" :disabled="isSaving" @click="save">{{ isSaving ? '저장중...' : '저장' }}</button>
       <button class="btn btn--primary" @click="downloadImage">이미지로 다운로드</button>
     </div>
   </section>
@@ -274,7 +318,7 @@ onMounted(() => {
         <div v-for="g in groups" :key="g.id" class="row">
           <div class="row__label">
             <span class="grab" title="드래그로 순서 변경" data-group-handle>↕</span>
-            <input v-model="g.name" class="groupName" />
+            <input v-model="g.name" class="groupName" :readonly="!canEdit" />
           </div>
           <div
             class="row__drop"
@@ -293,15 +337,29 @@ onMounted(() => {
 
     <div class="sidebar">
       <div class="sidebar__title">아이템</div>
-      <div class="sidebar__hint">게임별 기본 이미지 + 커스텀 업로드를 여기에 모읍니다.</div>
+      <div class="sidebar__hint">
+        {{ canEdit ? '게임별 기본 이미지와 커스텀 업로드를 여기에 모읍니다.' : '공개 티어표는 보기 전용입니다.' }}
+      </div>
       <div ref="poolEl" class="pool" data-list-type="pool">
         <div v-for="id in pool" :key="id" class="poolItem" :data-item-id="id">
           <img :src="resolveItemSrc(itemsById[id])" class="thumb" :alt="itemsById[id]?.label || id" />
           <div class="poolItem__label">{{ itemsById[id]?.label || id }}</div>
         </div>
       </div>
-      <input ref="fileEl" type="file" accept="image/*" class="hidden" @change="onFileChange" />
-      <button class="btn btn--ghost" @click="openFile">커스텀 이미지 추가</button>
+      <div
+        v-if="canEdit"
+        class="dropzone"
+        :class="{ 'dropzone--active': isDragActive }"
+        @dragenter.prevent="onDragEnter"
+        @dragover.prevent="onDragEnter"
+        @dragleave="onDragLeave"
+        @drop.prevent="onDropFiles"
+      >
+        <div class="dropzone__title">커스텀 이미지 추가</div>
+        <div class="dropzone__desc">여러 이미지를 한 번에 드래그하거나 파일 선택으로 추가할 수 있어요.</div>
+      </div>
+      <input ref="fileEl" type="file" accept="image/*" multiple class="hidden" @change="onFileChange" />
+      <button v-if="canEdit" class="btn btn--ghost" @click="openFile">파일 선택</button>
     </div>
   </section>
 </template>
@@ -369,6 +427,10 @@ onMounted(() => {
   width: 16px;
   height: 16px;
 }
+.toggle--disabled {
+  opacity: 0.55;
+  pointer-events: none;
+}
 .btn {
   padding: 10px 12px;
   border-radius: 12px;
@@ -504,6 +566,27 @@ onMounted(() => {
   font-size: 13px;
   margin-bottom: 10px;
 }
+.dropzone {
+  margin-top: 12px;
+  padding: 14px;
+  border-radius: 16px;
+  border: 1px dashed rgba(255, 255, 255, 0.18);
+  background: rgba(255, 255, 255, 0.03);
+  text-align: center;
+}
+.dropzone--active {
+  border-color: rgba(110, 231, 183, 0.6);
+  background: rgba(110, 231, 183, 0.08);
+}
+.dropzone__title {
+  font-weight: 900;
+}
+.dropzone__desc {
+  margin-top: 6px;
+  opacity: 0.74;
+  font-size: 13px;
+  line-height: 1.4;
+}
 .pool {
   display: grid;
   gap: 10px;