zenn/tier-maker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

릴리스: v1.3.37 가이드와 관리자 아이템 모달 정리

Browse Source
This commit is contained in:
zenn
2026-04-01 16:43:21 +09:00
parent 5f6f01942e
commit 64b3e3e3df
4 changed files with 155 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
frontend/src/views/AdminView.vue
View File

@@ -1979,10 +1979,6 @@ async function saveFeaturedOrder() {
<div v-if="customItemModalOpen" class="modalOverlay" @click.self="closeCustomItemModal">
<div class="modalCard modalCard--customItem" role="dialog" aria-modal="true">
<div class="modalCard__titleRow">
<div class="modalCard__title">아이템 상세</div>
<button class="btn btn--ghost btn--small" @click="closeCustomItemModal">닫기</button>
</div>
<div v-if="modalTargetCustomItem" class="customItemModal">
<aside class="customItemModal__pickerPanel">
<div class="customItemModal__pickerHead">
@@ -2015,7 +2011,9 @@ async function saveFeaturedOrder() {
</div>
</aside>
<div class="customItemModal__body">
<div class="customItemModal__titleRow">
<button class="customItemModal__close" type="button" @click="closeCustomItemModal">닫기</button>
<div class="customItemModal__content">
<div class="customItemModal__titleRow">
<div>
<div class="customItemModal__title">{{ modalTargetCustomItem.label }}</div>
<div class="customItemModal__source">{{ modalTargetCustomItem.sourceLabel }}</div>
@@ -2035,12 +2033,13 @@ async function saveFeaturedOrder() {
</div>
<div v-else class="hint hint--tight">아직 템플릿에 연결된 게임이 없어요.</div>
</div>
<div class="customItemModal__actions">
<a class="btn btn--ghost customItemModal__action" :href="toApiUrl(modalTargetCustomItem.src)" :download="modalTargetCustomItem.label">이미지 다운로드</a>
<button class="btn btn--ghost customItemModal__action" :disabled="!customItemModalTargetGameId || modalTargetCustomItem.isPromoting" @click="promoteCustomItem(modalTargetCustomItem)">
{{ modalTargetCustomItem.isPromoting ? '추가중...' : '기본 템플릿에 추가' }}
</button>
<button v-if="modalTargetCustomItem.canDelete" class="btn btn--danger customItemModal__action" :disabled="modalTargetCustomItem.sourceType === 'user' && (modalTargetCustomItem.usageCount > 0 || visibleLinkedGames.length > 0)" @click="openCustomItemDeleteModal(modalTargetCustomItem)">삭제</button>
<div class="customItemModal__actions">
<a class="btn btn--ghost customItemModal__action" :href="toApiUrl(modalTargetCustomItem.src)" :download="modalTargetCustomItem.label">이미지 다운로드</a>
<button class="btn btn--ghost customItemModal__action" :disabled="!customItemModalTargetGameId || modalTargetCustomItem.isPromoting" @click="promoteCustomItem(modalTargetCustomItem)">
{{ modalTargetCustomItem.isPromoting ? '추가중...' : '기본 템플릿에 추가' }}
</button>
<button v-if="modalTargetCustomItem.canDelete" class="btn btn--danger customItemModal__action" :disabled="modalTargetCustomItem.sourceType === 'user' && (modalTargetCustomItem.usageCount > 0 || visibleLinkedGames.length > 0)" @click="openCustomItemDeleteModal(modalTargetCustomItem)">삭제</button>
</div>
</div>
</div>
</div>
@@ -3186,17 +3185,17 @@ async function saveFeaturedOrder() {
}
.customItemModal {
display: grid;
grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
gap: 28px;
align-items: start;
grid-template-columns: 300px minmax(0, 1fr);
min-height: min(820px, calc(100dvh - 48px));
align-items: stretch;
}
.customItemModal__pickerPanel {
display: grid;
gap: 12px;
align-content: start;
gap: 18px;
min-width: 0;
padding: 16px;
border-radius: 20px;
border: 1px solid var(--theme-border);
padding: 28px 22px;
border-right: 1px solid var(--theme-border);
background: var(--theme-pill-bg);
}
.customItemModal__pickerHead {
@@ -3251,22 +3250,48 @@ async function saveFeaturedOrder() {
color: var(--theme-text-soft);
}
.customItemModal__body {
display: grid;
gap: 14px;
min-width: 0;
min-height: 0;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
gap: 16px;
padding: 24px 28px 28px;
}
.customItemModal__content {
min-width: 0;
min-height: 0;
display: grid;
align-content: start;
gap: 18px;
overflow: auto;
padding-right: 2px;
}
.customItemModal__titleRow,
.customItemModal__linked {
display: grid;
gap: 8px;
}
.customItemModal__linked {
padding: 14px 16px;
border-radius: 18px;
border: 1px solid var(--theme-border);
background: var(--theme-surface-soft);
}
.customItemModal__close {
justify-self: end;
border: 0;
background: transparent;
color: var(--theme-text-muted);
cursor: pointer;
font-size: 13px;
}
.customItemModal__image {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 20px;
background: var(--theme-surface-soft);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px;
background: radial-gradient(circle at top, rgba(77, 127, 233, 0.18), rgba(255, 255, 255, 0.02) 52%), rgba(255, 255, 255, 0.03);
border: 1px solid var(--theme-border);
}
.customItemModal__label {
font-size: 11px;
@@ -3291,6 +3316,10 @@ async function saveFeaturedOrder() {
.customItemModal__metaList {
display: grid;
gap: 10px;
padding: 14px 16px;
border-radius: 18px;
border: 1px solid var(--theme-border);
background: var(--theme-surface-soft);
}
.customItemModal__metaRow {
display: grid;
@@ -3312,7 +3341,8 @@ async function saveFeaturedOrder() {
.customItemModal__actions {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
gap: 12px;
align-self: end;
}
.customItemModal__action {
width: 100%;
@@ -3323,7 +3353,14 @@ async function saveFeaturedOrder() {
text-align: center;
}
.modalCard--customItem {
width: min(1280px, calc(100vw - 40px));
width: min(1360px, calc(100vw - 40px));
height: min(820px, calc(100dvh - 40px));
padding: 0;
overflow: hidden;
border-radius: 28px;
border: 1px solid var(--theme-border-strong);
background: linear-gradient(180deg, rgba(34, 34, 34, 0.98), rgba(18, 18, 18, 0.98));
box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
}
.pager {
margin-top: 16px;
@@ -3941,6 +3978,23 @@ async function saveFeaturedOrder() {
}
.customItemModal {
grid-template-columns: 1fr;
min-height: auto;
}
.modalCard--customItem {
width: min(100%, calc(100vw - 24px));
height: min(100%, calc(100dvh - 24px));
}
.customItemModal__pickerPanel {
border-right: 0;
border-bottom: 1px solid var(--theme-border);
padding: 20px 18px;
}
.customItemModal__body {
min-height: 0;
padding: 20px 18px 18px;
}
.customItemModal__content {
min-height: 0;
}
.customItemModal__actions {
grid-template-columns: 1fr;