릴리스: v1.3.12 회원 정렬 방향과 입력 길이 피드백

frontend/src/views/AdminView.vue

@@ -64,6 +64,7 @@ const modalTargetCustomItem = ref(null)
 const users = ref([])
 const userQuery = ref('')
 const userSort = ref('recent')
+const userSortDirection = ref('desc')
 const imageStats = ref(null)
 const imageQueue = ref({ concurrency: 1, activeCount: 0, pendingCount: 0 })
 const imageRecentJobs = ref([])
@@ -515,7 +516,7 @@ async function refreshTemplateRequests() {
 async function refreshUsers() {
   if (!auth.user?.isAdmin) return
   try {
-    const data = await api.listAdminUsers({ q: userQuery.value, sort: userSort.value })
+    const data = await api.listAdminUsers({ q: userQuery.value, sort: userSort.value, direction: userSortDirection.value })
     users.value = (data.users || []).map((user) => ({
       ...user,
       isAvatarBusy: false,
@@ -1589,6 +1590,10 @@ async function saveFeaturedOrder() {
                 <option value="created">가입순</option>
                 <option value="tierlists">작성 티어표 많은 순</option>
               </select>
+              <select v-model="userSortDirection" class="select toolbar__select" @change="submitUserFilters">
+                <option value="desc">내림차순</option>
+                <option value="asc">오름차순</option>
+              </select>
               <button class="btn btn--ghost toolbar__button" type="button" @click="submitUserFilters">조회</button>
             </div>
 
@@ -1658,8 +1663,22 @@ async function saveFeaturedOrder() {
                 <div class="modalCard__title">새 게임 만들기</div>
                 <div class="modalCard__desc">게임 이름과 고유 ID를 입력한 뒤 생성하면 바로 아래 상세 관리 화면으로 이어집니다.</div>
                 <div class="modalCard__form">
-                  <input v-model="newGameName" class="input" placeholder="게임 이름" />
-                  <input v-model="newGameId" class="input" placeholder="game id (영문/숫자)" @keydown.enter.prevent="createGame" />
+                  <label class="field">
+                    <span class="field__label">게임 이름</span>
+                    <input v-model="newGameName" class="field__input" maxlength="60" placeholder="게임 이름" />
+                    <span class="field__hint">{{ newGameName.length }}/60자</span>
+                  </label>
+                  <label class="field">
+                    <span class="field__label">게임 ID</span>
+                    <input
+                      v-model="newGameId"
+                      class="field__input"
+                      maxlength="120"
+                      placeholder="game id (영문/숫자)"
+                      @keydown.enter.prevent="createGame"
+                    />
+                    <span class="field__hint">영문, 숫자, 하이픈 조합 권장 · {{ newGameId.length }}/120자</span>
+                  </label>
                 </div>
                 <div class="modalCard__actions">
                   <button class="btn btn--ghost" @click="closeGameCreateModal">취소</button>
@@ -1675,14 +1694,14 @@ async function saveFeaturedOrder() {
                 <div class="userEditForm">
                   <label class="field">
                     <span class="field__label">이메일</span>
-                    <input v-model="modalUserDraftEmail" class="field__input" placeholder="계정 이메일" />
-                    <span class="field__hint">로그인 계정으로 사용하는 이메일입니다.</span>
+                    <input v-model="modalUserDraftEmail" class="field__input" maxlength="255" placeholder="계정 이메일" />
+                    <span class="field__hint">로그인 계정으로 사용하는 이메일입니다. {{ modalUserDraftEmail.length }}/255자</span>
                   </label>
 
                   <label class="field">
                     <span class="field__label">닉네임</span>
-                    <input v-model="modalUserDraftNickname" class="field__input" placeholder="표시용 닉네임" />
-                    <span class="field__hint">티어표 작성자명과 프로필에 표시됩니다.</span>
+                    <input v-model="modalUserDraftNickname" class="field__input" maxlength="40" placeholder="표시용 닉네임" />
+                    <span class="field__hint">티어표 작성자명과 프로필에 표시됩니다. {{ modalUserDraftNickname.length }}/40자</span>
                   </label>
 
                   <button
@@ -1706,7 +1725,18 @@ async function saveFeaturedOrder() {
                 <div class="modalCard__title">비밀번호 초기화</div>
                 <div class="modalCard__desc">{{ modalTargetUser ? `${userDisplayName(modalTargetUser)} 계정에 설정할 새 비밀번호를 입력해주세요.` : '' }}</div>
                 <div class="modalCard__form">
-                  <input v-model="modalPasswordDraft" class="input" type="password" placeholder="초기화할 비밀번호 입력" @keydown.enter.prevent="confirmUserPasswordReset" />
+                  <label class="field">
+                    <span class="field__label">새 비밀번호</span>
+                    <input
+                      v-model="modalPasswordDraft"
+                      class="field__input"
+                      type="password"
+                      maxlength="120"
+                      placeholder="초기화할 비밀번호 입력"
+                      @keydown.enter.prevent="confirmUserPasswordReset"
+                    />
+                    <span class="field__hint">6~120자 권장 · {{ modalPasswordDraft.length }}/120자</span>
+                  </label>
                 </div>
                 <div class="modalCard__actions">
                   <button class="btn btn--ghost" @click="closeUserPasswordModal">취소</button>
@@ -2528,11 +2558,11 @@ async function saveFeaturedOrder() {
   border: 0;
 }
 .btn {
+  height: 100%;
   font-size: 12px;
   line-height: 1.2;
   white-space: nowrap;
   word-break: keep-all;
-  margin-top: 12px;
   padding: 11px 13px;
   border-radius: 14px;
   border: 1px solid rgba(255, 255, 255, 0.14);
@@ -3110,6 +3140,7 @@ async function saveFeaturedOrder() {
 .userCard__actions--compact {
   grid-template-columns: auto auto minmax(0, 1fr);
   align-items: center;
+  margin-top: 12px;
 }
 .roleBadge {
   width: fit-content;