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

75
frontend/src/App.vue
View File

@@ -526,6 +526,12 @@ function submitGlobalSearch() {
<div class="guideModal__sidebar">
<div class="guideModal__eyebrow">Guide</div>
<div class="guideModal__title">티어 메이커 기능 안내</div>
<div class="guideModal__mobilePicker">
<label class="guideModal__mobileLabel" for="guide-step-select">단계 선택</label>
<select id="guide-step-select" class="guideModal__mobileSelect" :value="guideStepIndex" @change="selectGuideStep(Number($event.target.value))">
<option v-for="(step, index) in guideSteps" :key="step.id + '-select'" :value="index">{{ index + 1 }}. {{ step.title }}</option>
</select>
</div>
<div class="guideModal__list">
<button
v-for="(step, index) in guideSteps"
@@ -1266,7 +1272,7 @@ function submitGlobalSearch() {
.guideModal__dialog {
width: min(1180px, calc(100vw - 40px));
min-height: min(760px, calc(100dvh - 64px));
height: min(760px, calc(100dvh - 64px));
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
border-radius: 28px;
@@ -1299,6 +1305,28 @@ function submitGlobalSearch() {
letter-spacing: -0.04em;
}
.guideModal__mobilePicker {
display: none;
}
.guideModal__mobileLabel {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--theme-text-faint);
}
.guideModal__mobileSelect {
width: 100%;
min-height: 56px;
padding: 0 18px;
border-radius: 18px;
border: 1px solid rgba(77, 127, 233, 0.46);
background: rgba(77, 127, 233, 0.14);
color: var(--theme-text-strong);
font-weight: 800;
}
.guideModal__list {
display: grid;
gap: 8px;
@@ -1341,8 +1369,10 @@ function submitGlobalSearch() {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
padding: 24px 28px 28px;
min-height: 0;
}
.guideModal__close {
justify-self: end;
border: 0;
@@ -1354,6 +1384,7 @@ function submitGlobalSearch() {
.guideModal__content {
min-width: 0;
min-height: 0;
display: grid;
grid-template-columns: 52px minmax(0, 1fr) 52px;
gap: 16px;
@@ -1362,6 +1393,7 @@ function submitGlobalSearch() {
.guideModal__body {
min-width: 0;
min-height: 0;
display: grid;
gap: 18px;
}
@@ -1617,7 +1649,7 @@ function submitGlobalSearch() {
@media (max-width: 1200px) {
.guideModal__dialog {
grid-template-columns: 1fr;
min-height: auto;
height: min(860px, calc(100dvh - 40px));
}
.guideModal__sidebar {
@@ -1669,20 +1701,55 @@ function submitGlobalSearch() {
.guideModal__dialog {
width: min(100%, calc(100vw - 24px));
height: min(100%, calc(100dvh - 24px));
}
.guideModal__sidebar {
gap: 14px;
padding: 20px 18px;
}
.guideModal__mobilePicker {
display: grid;
gap: 8px;
}
.guideModal__list {
display: none;
}
.guideModal__main {
padding: 20px 18px 18px;
min-height: 0;
}
.guideModal__content {
grid-template-columns: 1fr;
min-height: 0;
}
.guideModal__arrow {
display: none;
}
.guideModal__body {
align-content: start;
overflow: auto;
padding-right: 2px;
}
.guideModal__mediaPlaceholder {
border-radius: 22px;
}
.guideModal__stepTitle {
font-size: 24px;
}
.guideModal__stepSummary {
font-size: 15px;
}
.guideModal__footer {
flex-direction: column;
align-items: stretch;
@@ -1695,10 +1762,6 @@ function submitGlobalSearch() {
.guideDockButton {
display: none;
}
.guideModal__list {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 860px) {

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;