릴리스: v1.4.33 가입 검증과 테마 기본값 정리

frontend/src/App.vue

@@ -137,7 +137,7 @@ const isGuidePrevDisabled = computed(() => guideStepIndex.value <= 0)
 const isGuideNextDisabled = computed(() => guideStepIndex.value >= guideSteps.length - 1)
 const isLightTheme = computed(() => themeMode.value === 'light')
 const themeToggleLabel = computed(() => (isLightTheme.value ? '다크 모드' : '라이트 모드'))
-const showSettingsThemePanel = computed(() => false && route.name === 'profile')
+const showSettingsThemePanel = computed(() => route.name === 'profile')
 const showTopicViewToggle = computed(() => route.name === 'topicHub')
 const topicViewMode = computed(() => (route.query.view === 'list' ? 'list' : 'grid'))
 const showBackendFallback = computed(() => !isPreviewMode.value && ['maintenance', 'offline'].includes(backendState.value))
@@ -275,7 +275,7 @@ onMounted(async () => {
   if (typeof window !== 'undefined') {
     const savedTheme = window.localStorage.getItem('tier-maker:theme')
     if (savedTheme === 'light' || savedTheme === 'dark') applyTheme(savedTheme)
-    else applyTheme(window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark')
+    else applyTheme('dark')
   }
   await auth.refresh()
   if (typeof window !== 'undefined') {

frontend/src/components/admin/AdminTemplatesSection.vue

@@ -125,9 +125,6 @@ function setThumbFileElement(el) {
           <img v-if="props.displayThumbnailUrl" class="selectedThumb selectedThumb--sidebar" :src="props.displayThumbnailUrl" :alt="props.selectedTemplate.template.name" />
           <div v-else class="selectedThumb selectedThumb--empty selectedThumb--sidebar">대표 썸네일</div>
           <div class="thumbDropZone__copy">
-            <div v-if="!props.displayThumbnailUrl" class="thumbDropZone__iconWrap">
-              <SvgIcon :src="addPhotoAlternateIcon" alt="" class="thumbDropZone__icon" />
-            </div>
             <div class="thumbDropZone__title">{{ props.displayThumbnailUrl ? '썸네일 변경' : '클릭 & 드래그' }}</div>
           </div>
         </button>

frontend/src/lib/api.js

@@ -55,7 +55,7 @@ async function request(path, { method = 'GET', body, headers } = {}) {
 export const api = {
   me: () => request('/api/auth/me'),
   authMeta: () => request('/api/auth/meta'),
-  signup: ({ email, password }) => request('/api/auth/signup', { method: 'POST', body: { email, password } }),
+  signup: ({ email, nickname, password }) => request('/api/auth/signup', { method: 'POST', body: { email, nickname, password } }),
   login: ({ email, password }) => request('/api/auth/login', { method: 'POST', body: { email, password } }),
   logout: () => request('/api/auth/logout', { method: 'POST' }),
 

frontend/src/stores/auth.js

@@ -29,8 +29,8 @@ export const useAuthStore = defineStore('auth', {
       })()
       return refreshPromise
     },
-    async signup(email, password) {
-      const user = await api.signup({ email, password })
+    async signup(email, nickname, password) {
+      const user = await api.signup({ email, nickname, password })
       this.user = user
       this.hydrated = true
       return user

frontend/src/views/AdminView.vue

@@ -1987,6 +1987,9 @@ function userAvatarFallback(user) {
                   <div class="customItemModal__body">
                     <button class="customItemModal__close" type="button" @click="closeCustomItemModal">닫기</button>
                     <div class="customItemModal__content">
+                      <div class="customItemModal__preview">
+                        <img class="customItemModal__previewImage" :src="toApiUrl(modalTargetCustomItem.src)" :alt="modalTargetCustomItem.label" />
+                      </div>
                       <div class="customItemModal__titleRow">
                         <div>
                           <div class="customItemModal__title">{{ modalTargetCustomItem.label }}</div>
@@ -3517,6 +3520,19 @@ function userAvatarFallback(user) {
   scrollbar-width: thin;
   scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
 }
+.adminUiScope .customItemModal__preview {
+  display: flex;
+  justify-content: flex-start;
+}
+.adminUiScope .customItemModal__previewImage {
+  width: 88px;
+  height: 88px;
+  object-fit: cover;
+  border-radius: 18px;
+  border: 1px solid var(--theme-border);
+  background: var(--theme-surface-soft);
+  flex: 0 0 auto;
+}
 .adminUiScope .customItemModal__pickerPanel::-webkit-scrollbar,
 .adminUiScope .customItemModal__content::-webkit-scrollbar {
   width: 8px;

frontend/src/views/LoginView.vue

@@ -4,25 +4,20 @@ import { useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from '../stores/auth'
 import { api } from '../lib/api'
 import { homePath, mePath } from '../lib/paths'
-import { useToast } from '../composables/useToast'
 
 const router = useRouter()
 const route = useRoute()
 const auth = useAuthStore()
-const toast = useToast()
 
 const email = ref('')
+const nickname = ref('')
 const password = ref('')
 const passwordConfirm = ref('')
 const mode = ref('login')
 const error = ref('')
 const hasUsers = ref(true)
-
-watch(error, (message) => {
-  if (!message) return
-  toast.error(message)
-  error.value = ''
-})
+const emailError = ref('')
+const nicknameError = ref('')
 
 const title = computed(() => (mode.value === 'signup' ? '회원가입' : '로그인'))
 const description = computed(() =>
@@ -57,18 +52,59 @@ watch(
   { immediate: true }
 )
 
+watch(mode, () => {
+  error.value = ''
+  emailError.value = ''
+  nicknameError.value = ''
+})
+
+watch(email, () => {
+  emailError.value = ''
+  if (error.value === '이메일이 이미 사용 중이에요.') error.value = ''
+})
+
+watch(nickname, () => {
+  nicknameError.value = ''
+  if (error.value === '닉네임이 이미 사용 중이에요.' || error.value === '사용할 수 없는 닉네임이에요.') error.value = ''
+})
+
 async function submit() {
   error.value = ''
+  emailError.value = ''
+  nicknameError.value = ''
+  if (mode.value === 'signup' && nickname.value.trim().length < 2) {
+    nicknameError.value = '닉네임은 2자 이상 입력해주세요.'
+    error.value = '닉네임을 확인해주세요.'
+    return
+  }
   if (mode.value === 'signup' && password.value !== passwordConfirm.value) {
     error.value = '비밀번호 확인이 일치하지 않아요.'
     return
   }
   try {
-    if (mode.value === 'signup') await auth.signup(email.value, password.value)
+    if (mode.value === 'signup') await auth.signup(email.value, nickname.value, password.value)
     else await auth.login(email.value, password.value)
     router.push(typeof route.query.redirect === 'string' ? route.query.redirect : mePath())
   } catch (e) {
-    error.value = '로그인/회원가입에 실패했어요.'
+    const code = e?.data?.error
+    if (mode.value === 'signup') {
+      if (code === 'email_taken') {
+        emailError.value = '이미 사용 중인 이메일입니다.'
+        error.value = '이메일이 이미 사용 중이에요.'
+        return
+      }
+      if (code === 'nickname_taken') {
+        nicknameError.value = '이미 사용 중인 닉네임입니다.'
+        error.value = '닉네임이 이미 사용 중이에요.'
+        return
+      }
+      if (code === 'nickname_reserved') {
+        nicknameError.value = '운영자/관리자처럼 혼동될 수 있는 닉네임은 사용할 수 없어요.'
+        error.value = '사용할 수 없는 닉네임이에요.'
+        return
+      }
+    }
+    error.value = mode.value === 'signup' ? '회원가입에 실패했어요.' : '로그인에 실패했어요.'
   }
 }
 </script>
@@ -102,9 +138,17 @@ async function submit() {
         <label class="field">
           <span class="field__label">이메일</span>
           <input v-model="email" class="field__input" placeholder="you@example.com" autocomplete="email" maxlength="255" />
+          <span v-if="emailError" class="field__error">{{ emailError }}</span>
           <span class="field__hint">로그인과 알림에 사용되는 계정 이메일입니다. {{ email.length }}/255자</span>
         </label>
 
+        <label v-if="mode === 'signup'" class="field">
+          <span class="field__label">닉네임</span>
+          <input v-model="nickname" class="field__input" placeholder="사용할 닉네임" autocomplete="nickname" maxlength="40" />
+          <span v-if="nicknameError" class="field__error">{{ nicknameError }}</span>
+          <span class="field__hint">다른 사용자와 구분되는 이름으로 2~40자까지 입력할 수 있어요.</span>
+        </label>
+
         <label class="field">
           <span class="field__label">비밀번호</span>
           <input
@@ -132,6 +176,7 @@ async function submit() {
         </label>
 
         <div v-if="!hasUsers" class="roleBadge">첫 회원가입 계정은 자동으로 관리자 권한이 부여됩니다.</div>
+        <div v-if="error" class="authError">{{ error }}</div>
 
         <div class="authActions">
           <button class="secondaryAction" type="button" @click="router.push(homePath())">취소</button>
@@ -244,6 +289,12 @@ async function submit() {
   color: var(--theme-text-soft);
 }
 
+.field__error {
+  font-size: 12px;
+  color: #ff7b7b;
+  font-weight: 700;
+}
+
 .roleBadge {
   width: fit-content;
   padding: 6px 10px;
@@ -255,6 +306,16 @@ async function submit() {
   font-weight: 700;
 }
 
+.authError {
+  padding: 10px 12px;
+  border-radius: 14px;
+  border: 1px solid rgba(239, 68, 68, 0.28);
+  background: rgba(239, 68, 68, 0.1);
+  color: #ff9b9b;
+  font-size: 13px;
+  font-weight: 700;
+}
+
 .authActions {
   display: flex;
   gap: 12px;