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

backend/src/db.js

@@ -575,6 +575,33 @@ async function findUserByEmail(email) {
   return { ...mapUserRow(row), passwordHash: row.password_hash }
 }
 
+async function findUserByNickname(nickname, excludeUserId = '') {
+  const normalized = String(nickname || '').trim()
+  if (!normalized) return null
+  const rows = excludeUserId
+    ? await query(
+        `
+          SELECT id, email, nickname, password_hash, is_admin, avatar_src, created_at
+          FROM users
+          WHERE TRIM(LOWER(nickname)) = TRIM(LOWER(?)) AND id <> ?
+          LIMIT 1
+        `,
+        [normalized, excludeUserId]
+      )
+    : await query(
+        `
+          SELECT id, email, nickname, password_hash, is_admin, avatar_src, created_at
+          FROM users
+          WHERE TRIM(LOWER(nickname)) = TRIM(LOWER(?))
+          LIMIT 1
+        `,
+        [normalized]
+      )
+  const row = rows[0]
+  if (!row) return null
+  return { ...mapUserRow(row), passwordHash: row.password_hash }
+}
+
 async function findUserById(id) {
   const rows = await query(
     'SELECT id, email, nickname, is_admin, avatar_src, created_at FROM users WHERE id = ? LIMIT 1',
@@ -2471,6 +2498,7 @@ module.exports = {
   closePool,
   countUsers,
   findUserByEmail,
+  findUserByNickname,
   findUserById,
   createUser,
   updateUserProfile,

backend/src/lib/user-validation.js

@@ -0,0 +1,48 @@
+const RESERVED_NICKNAME_KEYWORDS = [
+  'admin',
+  'administrator',
+  'operator',
+  'owner',
+  'master',
+  'staff',
+  'system',
+  'root',
+  'support',
+  'manager',
+  'mod',
+  'moderator',
+  'official',
+  'service',
+  'team',
+  'zenn',
+  '운영자',
+  '관리자',
+  '오너',
+  '마스터',
+  '스태프',
+  '시스템',
+  '루트',
+  '서포트',
+  '매니저',
+  '모더레이터',
+  '공식',
+]
+
+function normalizeNickname(value) {
+  return String(value || '')
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, '')
+}
+
+function isReservedNickname(value) {
+  const normalized = normalizeNickname(value)
+  if (!normalized) return false
+  return RESERVED_NICKNAME_KEYWORDS.some((keyword) => normalized.includes(normalizeNickname(keyword)))
+}
+
+module.exports = {
+  RESERVED_NICKNAME_KEYWORDS,
+  normalizeNickname,
+  isReservedNickname,
+}

backend/src/routes/admin.js

@@ -7,6 +7,8 @@ const { z } = require('zod')
 const { nanoid } = require('nanoid')
 const {
   findUserById,
+  findUserByEmail,
+  findUserByNickname,
   findTopicById,
   findTopicItemById,
   listTopicItems,
@@ -52,6 +54,7 @@ const {
 } = require('../db')
 const { requireAdmin } = require('../middleware/auth')
 const { createMemoryUpload, writeOptimizedImage, getImageOptimizationQueueState } = require('../lib/image-storage')
+const { isReservedNickname } = require('../lib/user-validation')
 
 const router = express.Router()
 
@@ -962,6 +965,18 @@ router.patch('/users/:userId', requireAdmin, async (req, res) => {
     return res.status(403).json({ error: 'primary_admin_only' })
   }
 
+  if (isReservedNickname(parsed.data.nickname)) {
+    return res.status(400).json({ error: 'nickname_reserved' })
+  }
+  const duplicateEmail = await findUserByEmail(parsed.data.email)
+  if (duplicateEmail && duplicateEmail.id !== targetUser.id) {
+    return res.status(409).json({ error: 'email_taken' })
+  }
+  const duplicateNickname = await findUserByNickname(parsed.data.nickname, targetUser.id)
+  if (duplicateNickname) {
+    return res.status(409).json({ error: 'nickname_taken' })
+  }
+
   try {
     const updated = await adminUpdateUser({
       id: targetUser.id,

backend/src/routes/auth.js

@@ -6,6 +6,7 @@ const multer = require('multer')
 const {
   countUsers,
   findUserByEmail,
+  findUserByNickname,
   findUserById,
   createUser,
   updateUserProfile,
@@ -13,11 +14,13 @@ const {
 } = require('../db')
 const { requireAuth } = require('../middleware/auth')
 const { createMemoryUpload, writeOptimizedImage } = require('../lib/image-storage')
+const { isReservedNickname } = require('../lib/user-validation')
 
 const router = express.Router()
 
 const signupSchema = z.object({
   email: z.string().email(),
+  nickname: z.string().trim().min(2).max(40),
   password: z.string().min(6),
 })
 
@@ -62,13 +65,16 @@ router.post('/signup', async (req, res) => {
   const parsed = signupSchema.safeParse(req.body)
   if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
 
-  const { email, password } = parsed.data
+  const { email, nickname, password } = parsed.data
   const exists = await findUserByEmail(email)
   if (exists) return res.status(409).json({ error: 'email_taken' })
+  if (isReservedNickname(nickname)) return res.status(400).json({ error: 'nickname_reserved' })
+  const nicknameExists = await findUserByNickname(nickname)
+  if (nicknameExists) return res.status(409).json({ error: 'nickname_taken' })
 
   const passwordHash = await bcrypt.hash(password, 10)
   const isAdmin = (await countUsers()) === 0
-  const user = await createUser({ id: nanoid(), email, nickname: '', passwordHash, isAdmin })
+  const user = await createUser({ id: nanoid(), email, nickname, passwordHash, isAdmin })
 
   try {
     await establishSession(req, user)
@@ -79,7 +85,10 @@ router.post('/signup', async (req, res) => {
 })
 
 router.post('/login', async (req, res) => {
-  const parsed = signupSchema.safeParse(req.body)
+  const parsed = z.object({
+    email: z.string().email(),
+    password: z.string().min(6),
+  }).safeParse(req.body)
   if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
 
   const { email, password } = parsed.data
@@ -121,6 +130,9 @@ router.post('/profile', requireAuth, upload.single('avatar'), async (req, res) =
 
   const user = await findUserById(req.session.userId)
   if (!user) return res.status(404).json({ error: 'not_found' })
+  if (isReservedNickname(parsed.data.nickname)) return res.status(400).json({ error: 'nickname_reserved' })
+  const nicknameExists = await findUserByNickname(parsed.data.nickname, user.id)
+  if (nicknameExists) return res.status(409).json({ error: 'nickname_taken' })
 
   const optimized = req.file
     ? await writeOptimizedImage({

docs/history.md

@@ -1,5 +1,10 @@
 # 의사결정 이력
 
+## 2026-04-02 v1.4.33
+- 서비스 공개 전 단계에서는 가입 자체를 열어두는 것보다, 이메일/닉네임 중복과 운영자 사칭성 닉네임을 먼저 막아두는 편이 훨씬 중요하다고 판단했다.
+- 닉네임 제한은 회원가입 한 곳에만 두면 이후 프로필 수정이나 관리자 수정으로 쉽게 우회되므로, auth/profile/admin 수정 흐름 전부가 같은 예약어 정책을 공유하도록 정리했다.
+- 라이트 모드는 취향상 필요한 사용자가 있을 수 있으므로 완전히 제거하기보다, 기본값만 다크로 고정하고 설정 화면에서만 직접 토글하도록 두는 편이 더 균형 잡힌 선택이라고 정리했다.
+
 ## 2026-04-02 v1.4.32
 - 서비스 공개 전 마감 단계에서는 사용자 노출 텍스트만이 아니라 파일명·composable 이름·관리자 CSS 클래스·백엔드 헬퍼 함수명까지 같이 정리해 두는 편이 이후 유지보수 비용을 확실히 낮춘다고 판단했다.
 - 이 시점부터는 `game`이 데이터 호환층도 아닌 단순 내부 이름으로 남아 있는 것조차 혼란을 만들 수 있으므로, 실제 기능을 바꾸지 않는 선에서 이름층까지 끝까지 정리해 코드 검색 결과 자체를 깨끗하게 만드는 방향으로 마감했다.

docs/todo.md

@@ -1,6 +1,9 @@
 # 할 일 및 이슈
 
 ## 단기 확인
+- `v1.4.33`에서 회원가입에 닉네임 입력과 중복/예약어 검사를 붙였으므로, 실제 QA에서는 이메일 중복, 닉네임 중복, 예약 닉네임, 프로필 닉네임 변경, 관리자 회원 수정 흐름이 같은 규칙으로 막히는지 확인한다.
+- 테마는 저장값이 없을 때 무조건 다크로 시작하게 바꿨고 설정 화면 토글도 다시 열었으므로, 첫 접속/새 브라우저/다른 운영체제에서 기본 다크 시작과 수동 토글 저장이 그대로 정상인지 확인한다.
+- 관리자 템플릿 썸네일 드롭존 빈 상태 아이콘 제거와 아이템 상세 모달 썸네일 프리뷰가 들어갔으므로, 관리자 화면에서 썸네일 교체와 아이템 선택 모달 가독성을 한 번 더 QA한다.
 - `v1.4.32`에서 파일명·composable·관리자 클래스명·백엔드 헬퍼 함수명까지 `topic/template` 기준으로 끝까지 정리했으므로, 다음 실제 QA는 기능 동작 확인에 집중하고 이름층 회귀는 별도 체크만 하면 된다.
 - 현재 `backend/src`, `frontend/src`, `backend/scripts`, `backend/index.js` 기준 `game/Game` 검색은 0건이므로, 이후 남는 확인 작업은 서비스 동작과 배포 환경 쪽에만 집중한다.
 - `v1.4.31`에서 `/games` redirect와 legacy DB 마이그레이션까지 제거했으므로, 실제 QA에서는 오직 현재 주소(`/topics`, `/admin/templates`)와 새 DB 기준 흐름만 집중적으로 확인하면 된다.

docs/update.md

@@ -1,5 +1,11 @@
 # 업데이트 로그
 
+## 2026-04-02 v1.4.33
+- 회원가입 시 닉네임 입력을 함께 받도록 바꾸고, 이메일 중복과 닉네임 중복을 서버에서 명확히 차단하도록 정리했다.
+- `admin`, `운영자`, `관리자`, `official`, `zenn`처럼 운영자·공식 계정으로 오해될 수 있는 닉네임은 예약어로 막고, 프로필 수정/관리자 회원 수정에서도 같은 규칙을 공유하도록 맞췄다.
+- 로그인·회원가입 화면은 중복된 이메일/닉네임일 때 빨간색 오류 메시지를 바로 보여주도록 보강했고, 테마는 저장값이 없을 때 무조건 다크로 시작하면서 설정 화면에서만 라이트/다크 토글을 다시 노출하도록 정리했다.
+- 관리자 템플릿 썸네일 드롭존의 빈 상태 아이콘은 제거했고, 아이템 상세 모달에는 선택한 썸네일 프리뷰를 추가해 현재 선택한 이미지가 더 잘 보이게 했다.
+
 ## 2026-04-02 v1.4.32
 - 파일명과 내부 심볼 이름까지 `topic/template` 기준으로 마감했다. `GameHubView`는 `TopicHubView`, `AdminGamesSection`은 `AdminTemplatesSection`, `useAdminGameManager`와 `useAdminFeaturedGames`는 각각 `useAdminTemplateManager`, `useAdminFeaturedTemplates`로 정리했다.
 - 관리자 화면 내부 상태와 스타일 클래스도 `adminTemplatePicker`, `templateManagerGrid`, `templateSettingsCard` 기준으로 바꿔, 사용자에게는 안 보이지만 코드 검색에서 남던 `Game` 흔적을 더 걷어냈다.

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;