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

릴리스: v1.3.61 드롭존 아이콘과 업로드 UI 통일

Browse Source
This commit is contained in:
zenn
2026-04-02 13:48:14 +09:00
parent e3559f4a84
commit d3c5eeae6a
7 changed files with 106 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,6 +5,7 @@ import { api } from '../lib/api'
import { toApiUrl } from '../lib/runtime'
import lockResetIcon from '../assets/icons/lock_reset.svg'
import deleteIcon from '../assets/icons/delete.svg'
import addPhotoAlternateIcon from '../assets/icons/add_photo_alternate.svg'
import SvgIcon from '../components/SvgIcon.vue'
import AdminFeaturedSection from '../components/admin/AdminFeaturedSection.vue'
import AdminGamesSection from '../components/admin/AdminGamesSection.vue'
@@ -1935,6 +1936,9 @@ function userAvatarFallback(user) {
<img v-if="displayThumbnailUrl" class="selectedThumb selectedThumb--sidebar" :src="displayThumbnailUrl" :alt="selectedGame.game.name" />
<div v-else class="selectedThumb selectedThumb--empty selectedThumb--sidebar">대표 썸네일</div>
<div class="thumbDropZone__copy">
<div class="thumbDropZone__iconWrap">
<SvgIcon :src="addPhotoAlternateIcon" alt="" class="thumbDropZone__icon" />
</div>
<div class="thumbDropZone__title">{{ displayThumbnailUrl ? '썸네일 변경' : '클릭 & 드래그' }}</div>
</div>
</button>
@@ -2714,17 +2718,23 @@ function userAvatarFallback(user) {
.adminUiScope .thumbDropZone {
position: relative;
width: 100%;
display: block;
display: grid;
gap: 0;
padding: 0;
overflow: hidden;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: var(--theme-pill-bg);
border-radius: 22px;
border: 2px dashed color-mix(in srgb, var(--theme-border-strong) 82%, rgba(255, 255, 255, 0.12));
background:
linear-gradient(180deg, color-mix(in srgb, var(--theme-card-bg) 88%, white 4%), color-mix(in srgb, var(--theme-card-bg-hover) 82%, white 6%)),
radial-gradient(circle at top, color-mix(in srgb, var(--theme-accent) 12%, transparent), transparent 60%);
text-align: left;
transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.adminUiScope .thumbDropZone--active {
border-color: rgba(96, 165, 250, 0.56);
background:
linear-gradient(180deg, color-mix(in srgb, var(--theme-card-bg-hover) 90%, white 6%), color-mix(in srgb, var(--theme-card-bg) 84%, white 4%)),
radial-gradient(circle at top, color-mix(in srgb, var(--theme-accent) 18%, transparent), transparent 60%);
box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.18);
transform: translateY(-1px);
}
@@ -2733,13 +2743,27 @@ function userAvatarFallback(user) {
inset: auto 0 0 0;
display: grid;
place-items: center;
min-height: 52px;
padding: 12px 16px;
gap: 8px;
min-height: 80px;
padding: 16px 18px;
background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--theme-main-bg) 82%, transparent) 46%, color-mix(in srgb, var(--theme-main-bg) 94%, transparent) 100%);
}
.adminUiScope .thumbDropZone__iconWrap {
width: 46px;
height: 46px;
display: grid;
place-items: center;
border-radius: 14px;
background: color-mix(in srgb, var(--theme-text) 10%, transparent);
}
.adminUiScope .thumbDropZone__icon {
width: 24px;
height: 24px;
opacity: 0.86;
}
.adminUiScope .thumbDropZone__title {
font-weight: 900;
font-size: 13px;
font-size: 14px;
letter-spacing: 0.01em;
color: var(--theme-text);
}
@@ -2757,10 +2781,12 @@ function userAvatarFallback(user) {
}
.adminUiScope .dropZone {
min-height: 180px;
padding: 24px 18px;
border-radius: 16px;
padding: 28px 22px;
border-radius: 22px;
border: 2px dashed color-mix(in srgb, var(--theme-border-strong) 82%, rgba(255, 255, 255, 0.12));
background: var(--theme-pill-bg);
background:
linear-gradient(180deg, color-mix(in srgb, var(--theme-card-bg) 88%, white 4%), color-mix(in srgb, var(--theme-card-bg-hover) 82%, white 6%)),
radial-gradient(circle at top, color-mix(in srgb, var(--theme-accent) 12%, transparent), transparent 60%);
display: grid;
place-items: center;
align-content: center;
@@ -2773,9 +2799,25 @@ function userAvatarFallback(user) {
}
.adminUiScope .dropZone--active {
border-color: rgba(96, 165, 250, 0.56);
background: rgba(96, 165, 250, 0.08);
background:
linear-gradient(180deg, color-mix(in srgb, var(--theme-card-bg-hover) 90%, white 6%), color-mix(in srgb, var(--theme-card-bg) 84%, white 4%)),
radial-gradient(circle at top, color-mix(in srgb, var(--theme-accent) 18%, transparent), transparent 60%);
transform: translateY(-1px);
}
.adminUiScope .dropZone__iconWrap {
width: 52px;
height: 52px;
margin: 0 auto 12px;
display: grid;
place-items: center;
border-radius: 16px;
background: color-mix(in srgb, var(--theme-text) 10%, transparent);
}
.adminUiScope .dropZone__icon {
width: 28px;
height: 28px;
opacity: 0.86;
}
.adminUiScope .dropZone__title {
font-weight: 900;
font-size: 16px;
@@ -2794,6 +2836,10 @@ function userAvatarFallback(user) {
flex-wrap: wrap;
justify-content: center;
}
.adminUiScope .dropZone__button {
min-width: 124px;
min-height: 34px;
}
.adminUiScope .itemPreviewCard {
margin-top: 12px;
padding: 12px;

41
frontend/src/views/TierEditorView.vue
View File

@@ -6,6 +6,7 @@ import * as htmlToImage from 'html-to-image'
import SvgIcon from '../components/SvgIcon.vue'
import addColumnRightIcon from '../assets/icons/add_column_right.svg'
import addRowBelowIcon from '../assets/icons/add_row_below.svg'
import addPhotoAlternateIcon from '../assets/icons/add_photo_alternate.svg'
import { api } from '../lib/api'
import { toApiUrl } from '../lib/runtime'
import { useAuthStore } from '../stores/auth'
@@ -1184,13 +1185,16 @@ onUnmounted(() => {
@dragleave="onDragLeave"
@drop.prevent="onDropFiles"
>
<div class="dropzone__iconWrap">
<SvgIcon :src="addPhotoAlternateIcon" alt="" class="dropzone__icon" />
</div>
<div>
<div class="dropzone__title">커스텀 이미지 추가</div>
<div class="dropzone__desc">이곳으로 이미지를 드래그하거나 파일 선택으로 한 번에 추가할 수 있어요.</div>
</div>
<div class="dropzone__actions">
<input ref="fileEl" type="file" accept="image/*" multiple class="hidden" @change="onFileChange" />
<button class="btn btn--ghost dropzone__button" @click="openFile">파일 선택</button>
<button class="btn btn--ghost btn--small dropzone__button" @click="openFile">파일 선택</button>
</div>
</div>
</div>
@@ -2077,21 +2081,22 @@ onUnmounted(() => {
align-items: center;
justify-content: center;
gap: 18px;
min-height: 176px;
padding: 28px 24px;
border: 2px dashed color-mix(in srgb, var(--theme-accent) 48%, var(--theme-border));
min-height: 180px;
padding: 28px 22px;
border-radius: 22px;
border: 2px dashed color-mix(in srgb, var(--theme-border-strong) 82%, rgba(255, 255, 255, 0.12));
background:
linear-gradient(180deg, color-mix(in srgb, var(--theme-card-bg) 82%, transparent), color-mix(in srgb, var(--theme-card-bg-hover) 74%, transparent)),
radial-gradient(circle at top, color-mix(in srgb, var(--theme-accent) 12%, transparent), transparent 58%);
linear-gradient(180deg, color-mix(in srgb, var(--theme-card-bg) 88%, white 4%), color-mix(in srgb, var(--theme-card-bg-hover) 82%, white 6%)),
radial-gradient(circle at top, color-mix(in srgb, var(--theme-accent) 12%, transparent), transparent 60%);
text-align: center;
}
.dropzone--board.dropzone--active {
border-color: color-mix(in srgb, var(--theme-accent) 78%, white);
border-color: rgba(96, 165, 250, 0.56);
background:
linear-gradient(180deg, color-mix(in srgb, var(--theme-card-bg-hover) 88%, transparent), color-mix(in srgb, var(--theme-card-bg) 82%, transparent)),
radial-gradient(circle at top, color-mix(in srgb, var(--theme-accent) 20%, transparent), transparent 58%);
linear-gradient(180deg, color-mix(in srgb, var(--theme-card-bg-hover) 90%, white 6%), color-mix(in srgb, var(--theme-card-bg) 84%, white 4%)),
radial-gradient(circle at top, color-mix(in srgb, var(--theme-accent) 18%, transparent), transparent 60%);
transform: translateY(-1px);
}
.dropzone__actions {
@@ -2103,7 +2108,23 @@ onUnmounted(() => {
}
.dropzone__button {
min-width: 148px;
min-width: 124px;
min-height: 34px;
}
.dropzone__iconWrap {
width: 52px;
height: 52px;
display: grid;
place-items: center;
border-radius: 16px;
background: color-mix(in srgb, var(--theme-text) 10%, transparent);
}
.dropzone__icon {
width: 28px;
height: 28px;
opacity: 0.86;
}
.dropzone--board .dropzone__title {