릴리스: v0.1.47 템플릿 요청과 관리자 승인 흐름 추가
This commit is contained in:
@@ -46,6 +46,7 @@ const iconSize = ref(80)
|
||||
const isFavoriteBusy = ref(false)
|
||||
const favoriteCount = ref(0)
|
||||
const isFavorited = ref(false)
|
||||
const isRequestingTemplate = ref(false)
|
||||
|
||||
const boardEl = ref(null)
|
||||
const exportBoardEl = ref(null)
|
||||
@@ -84,6 +85,18 @@ const untitledWarning = computed(
|
||||
'제목 없이 저장된 티어표는 무분별한 도배 방지를 위해 관리자에 의해 임의 삭제될 수 있어요.'
|
||||
)
|
||||
const canFavorite = computed(() => !!auth.user && !isNewTierList.value && !canEdit.value)
|
||||
const customItems = computed(() =>
|
||||
Object.values(itemsById.value)
|
||||
.filter((item) => item?.origin === 'custom')
|
||||
.sort((a, b) => (a.label || '').localeCompare(b.label || '', 'ko'))
|
||||
)
|
||||
const hasPlacedItems = computed(() => groups.value.some((group) => (group.itemIds || []).length > 0))
|
||||
const canRequestTemplateCreate = computed(
|
||||
() => canEdit.value && !isNewTierList.value && gameId.value === 'freeform' && !hasPlacedItems.value && customItems.value.length > 0
|
||||
)
|
||||
const canRequestTemplateUpdate = computed(
|
||||
() => canEdit.value && !isNewTierList.value && gameId.value !== 'freeform' && customItems.value.length > 0
|
||||
)
|
||||
|
||||
watch(error, (message) => {
|
||||
if (!message) return
|
||||
@@ -258,6 +271,18 @@ function addCustomImage(file) {
|
||||
pool.value = [id, ...pool.value]
|
||||
}
|
||||
|
||||
function updateCustomItemLabel(itemId, nextLabel) {
|
||||
const item = itemsById.value[itemId]
|
||||
if (!item || item.origin !== 'custom') return
|
||||
itemsById.value = {
|
||||
...itemsById.value,
|
||||
[itemId]: {
|
||||
...item,
|
||||
label: nextLabel.slice(0, 60),
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
function openFile() {
|
||||
if (!canEdit.value) return
|
||||
fileEl.value?.click()
|
||||
@@ -399,21 +424,26 @@ function buildPayload(existingId) {
|
||||
}
|
||||
}
|
||||
|
||||
async function persistTierList({ showModal = false } = {}) {
|
||||
await uploadPendingCustomItems()
|
||||
await uploadPendingThumbnail()
|
||||
const payload = buildPayload(tierListId.value && tierListId.value !== 'new' ? tierListId.value : null)
|
||||
const res = await api.saveTierList(payload)
|
||||
if (tierListId.value === 'new') history.replaceState({}, '', `/editor/${gameId.value}/${res.tierList.id}`)
|
||||
updatedAt.value = Number(res.tierList?.updatedAt || Date.now())
|
||||
authorName.value = res.tierList?.authorName || effectiveAuthorName.value
|
||||
authorAccountName.value = res.tierList?.authorAccountName || authorAccountName.value
|
||||
favoriteCount.value = Number(res.tierList?.favoriteCount || favoriteCount.value || 0)
|
||||
isFavorited.value = !!res.tierList?.isFavorited
|
||||
if (showModal) isSaveModalOpen.value = true
|
||||
return res
|
||||
}
|
||||
|
||||
async function save() {
|
||||
error.value = ''
|
||||
isSaving.value = true
|
||||
try {
|
||||
await uploadPendingCustomItems()
|
||||
await uploadPendingThumbnail()
|
||||
const payload = buildPayload(tierListId.value && tierListId.value !== 'new' ? tierListId.value : null)
|
||||
const res = await api.saveTierList(payload)
|
||||
if (tierListId.value === 'new') history.replaceState({}, '', `/editor/${gameId.value}/${res.tierList.id}`)
|
||||
updatedAt.value = Number(res.tierList?.updatedAt || Date.now())
|
||||
authorName.value = res.tierList?.authorName || effectiveAuthorName.value
|
||||
authorAccountName.value = res.tierList?.authorAccountName || authorAccountName.value
|
||||
favoriteCount.value = Number(res.tierList?.favoriteCount || favoriteCount.value || 0)
|
||||
isFavorited.value = !!res.tierList?.isFavorited
|
||||
isSaveModalOpen.value = true
|
||||
await persistTierList({ showModal: true })
|
||||
} catch (e) {
|
||||
error.value = '저장 실패: 로그인 상태인지 확인해주세요.'
|
||||
} finally {
|
||||
@@ -454,6 +484,32 @@ async function toggleFavorite() {
|
||||
}
|
||||
}
|
||||
|
||||
async function requestTemplate(type) {
|
||||
if (isNewTierList.value) {
|
||||
toast.error('요청 전에 먼저 티어표를 저장해주세요.')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
isRequestingTemplate.value = true
|
||||
await persistTierList({ showModal: false })
|
||||
await api.requestTierListTemplate(tierListId.value, { type })
|
||||
toast.success(type === 'create' ? '템플릿 등록 요청을 보냈어요.' : '템플릿 업데이트 요청을 보냈어요.')
|
||||
} catch (e) {
|
||||
if (e?.status === 409) {
|
||||
toast.error('이미 처리 대기 중인 같은 요청이 있어요.')
|
||||
return
|
||||
}
|
||||
if (e?.status === 400 && e?.data?.error === 'board_must_be_empty') {
|
||||
toast.error('템플릿 등록 요청은 보드를 비운 상태에서만 보낼 수 있어요.')
|
||||
return
|
||||
}
|
||||
toast.error(type === 'create' ? '템플릿 등록 요청에 실패했어요.' : '템플릿 업데이트 요청에 실패했어요.')
|
||||
} finally {
|
||||
isRequestingTemplate.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
;(async () => {
|
||||
await auth.refresh()
|
||||
@@ -569,6 +625,22 @@ onUnmounted(() => {
|
||||
<button v-if="canFavorite" class="btn btn--ghost" :disabled="isFavoriteBusy" @click="toggleFavorite">
|
||||
{{ isFavorited ? '★ 즐겨찾기' : '☆ 즐겨찾기' }} {{ favoriteCount }}
|
||||
</button>
|
||||
<button
|
||||
v-if="canRequestTemplateCreate"
|
||||
class="btn btn--ghost"
|
||||
:disabled="isRequestingTemplate"
|
||||
@click="requestTemplate('create')"
|
||||
>
|
||||
{{ isRequestingTemplate ? '요청중...' : '템플릿 등록 요청' }}
|
||||
</button>
|
||||
<button
|
||||
v-if="canRequestTemplateUpdate"
|
||||
class="btn btn--ghost"
|
||||
:disabled="isRequestingTemplate"
|
||||
@click="requestTemplate('update')"
|
||||
>
|
||||
{{ isRequestingTemplate ? '요청중...' : '템플릿 업데이트 요청' }}
|
||||
</button>
|
||||
<label class="toggle" :class="{ 'toggle--disabled': !canEdit }">
|
||||
<input v-model="isPublic" type="checkbox" :disabled="!canEdit" />
|
||||
<span>{{ isPublic ? '공개 ON' : '공개 OFF' }}</span>
|
||||
@@ -665,6 +737,24 @@ onUnmounted(() => {
|
||||
<div class="poolItem__label">{{ itemsById[id]?.label || id }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="canEdit && customItems.length" class="customItemEditor">
|
||||
<div class="customItemEditor__title">추가한 커스텀 아이템 이름 정리</div>
|
||||
<div class="customItemEditor__desc">
|
||||
템플릿 요청 전에 이름을 정리해두면 관리자가 그대로 기본 템플릿으로 반영할 수 있어요.
|
||||
</div>
|
||||
<div class="customItemEditor__list">
|
||||
<label v-for="item in customItems" :key="item.id" class="customItemEditor__row">
|
||||
<img class="customItemEditor__thumb" :src="resolveItemSrc(item)" :alt="item.label" />
|
||||
<input
|
||||
class="customItemEditor__input"
|
||||
:value="item.label"
|
||||
maxlength="60"
|
||||
placeholder="아이템 이름"
|
||||
@input="updateCustomItemLabel(item.id, $event.target.value)"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="canEdit"
|
||||
class="dropzone"
|
||||
@@ -1144,6 +1234,51 @@ onUnmounted(() => {
|
||||
font-size: 13px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.customItemEditor {
|
||||
margin-top: 12px;
|
||||
padding: 12px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
.customItemEditor__title {
|
||||
font-weight: 900;
|
||||
}
|
||||
.customItemEditor__desc {
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
opacity: 0.72;
|
||||
}
|
||||
.customItemEditor__list {
|
||||
margin-top: 12px;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
.customItemEditor__row {
|
||||
display: grid;
|
||||
grid-template-columns: 44px minmax(0, 1fr);
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
.customItemEditor__thumb {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 10px;
|
||||
object-fit: cover;
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
}
|
||||
.customItemEditor__input {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: 9px 10px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: rgba(0, 0, 0, 0.18);
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.dropzone {
|
||||
margin-top: 12px;
|
||||
padding: 14px;
|
||||
|
||||
Reference in New Issue
Block a user