릴리스: v0.1.46 에디터 아이템 제거와 회원 정보 보강

frontend/src/views/AdminView.vue

@@ -706,6 +706,18 @@ function fmt(ts) {
   })
 }
 
+function userAvatarUrl(user) {
+  return user?.avatarSrc ? toApiUrl(user.avatarSrc) : ''
+}
+
+function userDisplayName(user) {
+  return user?.nickname || user?.email?.split('@')[0] || '알 수 없음'
+}
+
+function userAvatarFallback(user) {
+  return (user?.email?.trim()?.[0] || '?').toUpperCase()
+}
+
 function addFeaturedGame(gameId) {
   resetMessages()
   if (!gameId || featuredGameIds.value.includes(gameId)) return
@@ -1120,15 +1132,32 @@ async function saveFeaturedOrder() {
             <div v-else class="userList">
               <article v-for="user in users" :key="user.id" class="userCard">
                 <div class="userCard__head">
-                  <div>
-                    <div class="userCard__title">{{ user.nickname || '닉네임 없음' }}</div>
-                    <div class="userCard__meta">{{ fmt(user.createdAt) }}</div>
+                  <div class="userCard__identity">
+                    <div class="userAvatar">
+                      <img v-if="userAvatarUrl(user)" class="userAvatar__image" :src="userAvatarUrl(user)" :alt="userDisplayName(user)" />
+                      <span v-else class="userAvatar__fallback">{{ userAvatarFallback(user) }}</span>
+                    </div>
+                    <div>
+                      <div class="userCard__title">{{ userDisplayName(user) }}</div>
+                      <div class="userCard__meta">가입일 {{ fmt(user.createdAt) }}</div>
+                    </div>
                   </div>
                   <span class="roleBadge" :class="{ 'roleBadge--admin': user.draftIsAdmin }">
                     {{ user.draftIsAdmin ? '관리자' : '일반 회원' }}
                   </span>
                 </div>
 
+                <div class="userStats">
+                  <div class="userStat">
+                    <span class="userStat__label">작성 티어표</span>
+                    <strong class="userStat__value">{{ user.tierListCount }}개</strong>
+                  </div>
+                  <div class="userStat">
+                    <span class="userStat__label">최근 활동</span>
+                    <strong class="userStat__value">{{ fmt(user.recentActivityAt || user.createdAt) }}</strong>
+                  </div>
+                </div>
+
                 <input v-model="user.draftEmail" class="input" placeholder="이메일" />
                 <input v-model="user.draftNickname" class="input" placeholder="닉네임" />
                 <label class="checkRow">
@@ -1679,6 +1708,12 @@ async function saveFeaturedOrder() {
   justify-content: space-between;
   align-items: flex-start;
 }
+.userCard__identity {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  min-width: 0;
+}
 .userCard__title {
   font-weight: 900;
 }
@@ -1687,6 +1722,48 @@ async function saveFeaturedOrder() {
   opacity: 0.72;
   font-size: 13px;
 }
+.userAvatar {
+  width: 48px;
+  height: 48px;
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  border-radius: 999px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(96, 165, 250, 0.18);
+}
+.userAvatar__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.userAvatar__fallback {
+  font-size: 18px;
+  font-weight: 900;
+}
+.userStats {
+  margin-top: 12px;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+.userStat {
+  display: grid;
+  gap: 4px;
+  padding: 10px 12px;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.03);
+}
+.userStat__label {
+  font-size: 12px;
+  opacity: 0.66;
+}
+.userStat__value {
+  font-size: 14px;
+  font-weight: 900;
+}
 .userCard__actions {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -1882,7 +1959,8 @@ async function saveFeaturedOrder() {
   .section--topGrid,
   .toolbar,
   .itemComposer,
-  .tierAdminCard {
+  .tierAdminCard,
+  .userStats {
     grid-template-columns: 1fr;
   }
   .toolbar--secondary {
@@ -1891,6 +1969,9 @@ async function saveFeaturedOrder() {
   .itemPreviewCard {
     max-width: none;
   }
+  .userCard__identity {
+    width: 100%;
+  }
 }
 @media (max-width: 640px) {
   .thumbGrid,

frontend/src/views/TierEditorView.vue

@@ -115,6 +115,15 @@ function setIconSize(nextSize) {
   iconSize.value = nextSize
 }
 
+function removeItemFromGroup(groupId, itemId) {
+  if (!canEdit.value || !groupId || !itemId) return
+  const targetGroup = groups.value.find((group) => group.id === groupId)
+  if (!targetGroup) return
+  if (!targetGroup.itemIds.includes(itemId)) return
+  targetGroup.itemIds = targetGroup.itemIds.filter((id) => id !== itemId)
+  pool.value = [itemId, ...pool.value.filter((id) => id !== itemId)]
+}
+
 function setGroupDropEl(groupId, el) {
   if (!el) {
     delete groupDropEls.value[groupId]
@@ -624,6 +633,16 @@ onUnmounted(() => {
             <div v-if="!isExporting" class="row__empty" v-show="g.itemIds.length === 0">여기로 드래그해서 배치</div>
             <div v-for="id in g.itemIds" :key="id" class="cell" :data-item-id="id">
               <img :src="resolveItemSrc(itemsById[id])" class="thumb" :alt="itemsById[id]?.label || id" />
+              <button
+                v-if="canEdit && !isExporting"
+                class="cellRemoveBtn"
+                type="button"
+                title="아이템 빼내기"
+                @pointerdown.stop
+                @click.stop="removeItemFromGroup(g.id, id)"
+              >
+                ×
+              </button>
             </div>
           </div>
         </div>
@@ -1078,6 +1097,29 @@ onUnmounted(() => {
 .cell {
   display: inline-flex;
   flex: 0 0 auto;
+  position: relative;
+}
+.cellRemoveBtn {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 24px;
+  height: 24px;
+  display: grid;
+  place-items: center;
+  border-radius: 999px;
+  border: 1px solid rgba(239, 68, 68, 0.32);
+  background: rgba(11, 18, 32, 0.92);
+  color: rgba(255, 255, 255, 0.92);
+  font-size: 16px;
+  line-height: 1;
+  font-weight: 900;
+  cursor: pointer;
+  z-index: 2;
+  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
+}
+.cellRemoveBtn:hover {
+  background: rgba(239, 68, 68, 0.9);
 }
 .thumb {
   width: var(--thumb-size, 80px);