릴리스: v1.4.34 라이트모드 색상 체계 재정비

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`이 데이터 호환층도 아닌 단순 내부 이름으로 남아 있는 것조차 혼란을 만들 수 있으므로, 실제 기능을 바꾸지 않는 선에서 이름층까지 끝까지 정리해 코드 검색 결과 자체를 깨끗하게 만드는 방향으로 마감했다.
@@ -607,6 +612,10 @@
 - 게임 이미지 경로는 저장 시 상대 경로(`/uploads/...`)를 유지하는 방향으로 정리했다.
 - 현재 단계에서는 구조 변경 비용을 고려해 DB를 유지하되, 운영/확장성 요구가 커지기 전 RDB 이관 판단이 필요하다고 기록했다.
 
+## 2026-04-02 v1.4.34
+- 라이트모드는 단순 토글 존재만으로 충분하지 않고, 셸/카드/버튼/오버레이가 같은 색 문법을 공유해야 품질이 안정된다고 판단해 공통 토큰을 다시 정리했다.
+- 홈 카드 즐겨찾기 버튼처럼 다크 전용 하드코딩이 남아 있으면 전체 인상이 쉽게 무너지므로, 이후 테마 보정은 공통 변수 우선 원칙으로 계속 가져가기로 했다.
+
 ## 2026-03-19
 - 초기 저장소는 빠른 구현을 위해 `lowdb(JSON 파일)`를 채택했다.
 - 인증은 JWT 대신 서버 세션(`express-session` + `session-file-store`)을 사용했다.

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 기준 흐름만 집중적으로 확인하면 된다.
@@ -110,6 +113,7 @@
 - 관리자 게임 아이템 순서 저장은 추가됐으므로, 다음 단계에서는 새 아이템 추가 직후 `자동 맨 앞 배치`와 `관리자 수동 고정 순서`의 우선순위를 실제 운영 흐름 기준으로 한 번 더 QA한다.
 - 관리자 템플릿 요청 미리보기는 실제 완성본 iframe 방식과의 체감 차이를 마지막으로 한 번 더 QA한다.
 - 라이트모드/다크모드 2차 보정까지 반영했으므로, 남은 작업은 전체 화면을 실제 사용 흐름으로 돌려 보며 대비·명도·아이콘 가독성을 미세하게 QA하는 최종 테마 점검 단계로 가져간다.
+- 라이트모드 공통 토큰 재정비와 카드/아바타/즐겨찾기 버튼 보정까지 반영했으므로, 다음 QA에서는 로그인/홈/주제 허브/에디터/관리자 순으로 실제 플로우를 돌리며 남은 하드코딩 색과 과한 대비가 없는지 확인한다.
 - 관리자용 티어표 승인/숨김 처리, 아이템 정렬 UI를 추가한다.
 - 회원 일괄 작업(다중 선택, 일괄 비밀번호 초기화, 활동 저조 계정 정리) 같은 관리 보조 기능을 추가한다.
 - 티어 행 프리셋 저장, 색상 관리, 행 복제 같은 고급 편집 기능을 추가한다.

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` 흔적을 더 걷어냈다.
@@ -1098,6 +1104,13 @@
 - **티어표 데이터 정규화**: 게임 이미지 경로가 절대 로컬 URL로 저장되지 않도록 저장/조회 시 `/uploads/...` 상대 경로로 정규화
 - **프로젝트 점검 결과 문서화**: DB 구조, 화면-파일 매핑, 코딩 규칙, 기술 명세, 남은 위험 요소를 `docs/`에 신규 정리
 
+## 2026-04-02 v1.4.34
+- **라이트모드 팔레트 재정비**: 공통 라이트 테마 색상을 회색 위주에서 더 정돈된 청회색 계열로 다시 잡고, 셸/레일/메인/카드 표면 대비를 처음부터 재조정
+- **공통 토큰 확장**: 강조색 강도, 강조 배경, 오버레이 스크림, 아바타 테두리, 즐겨찾기 버튼 상태색을 공통 변수로 분리해 화면별 하드코딩을 줄임
+- **홈 카드 보정**: 주제 카드 즐겨찾기 버튼이 라이트모드에서 검은 플로팅 버튼처럼 뜨던 문제를 테마 변수 기반으로 수정
+- **목록 카드 통일**: 주제 허브/나의 티어표/즐겨찾기/검색 결과 카드의 아바타 테두리를 공통 토큰으로 맞춰 라이트모드에서 카드 밀도가 덜 어색하게 보이도록 정리
+- **전역 셸 보정**: 백엔드 점검 안내 버튼과 가이드 모달 오버레이도 라이트모드에 맞는 공통 색상 체계로 통일
+
 ## 2026-03-19 v0.1.2
 - **로그인 UI 개선**: 로그인 카드 중앙 배치, 중복 타이틀 제거, 입력 overflow 수정, 엔터로 로그인/회원가입 제출
 - **안내문 조건화**: “첫 회원가입 계정은 admin” 문구는 유저가 0명일 때만 표시(`/api/auth/meta`)

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') {
@@ -748,8 +748,8 @@ function reloadApp() {
   min-width: 128px;
   padding: 12px 18px;
   border-radius: 999px;
-  border: 1px solid rgba(98, 170, 255, 0.32);
-  background: rgba(98, 170, 255, 0.18);
+  border: 1px solid var(--theme-accent-soft-strong);
+  background: var(--theme-accent-soft);
   color: var(--theme-text-strong);
   font-weight: 700;
   cursor: pointer;
@@ -929,7 +929,7 @@ function reloadApp() {
   border-radius: 999px;
   object-fit: cover;
   flex: 0 0 auto;
-  border: 1px solid rgba(255, 255, 255, 0.14);
+  border: 1px solid var(--theme-avatar-border);
   background: var(--theme-surface-soft-3);
 }
 
@@ -1453,7 +1453,7 @@ function reloadApp() {
   align-items: center;
   justify-content: center;
   padding: 32px 20px;
-  background: rgba(0, 0, 0, 0.62);
+  background: var(--theme-overlay-scrim);
   backdrop-filter: blur(10px);
 }
 

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/style.css

@@ -33,37 +33,59 @@
   --theme-danger-bg: rgba(239, 68, 68, 0.1);
   --theme-danger-border: rgba(239, 68, 68, 0.18);
   --theme-accent-bg: rgba(76, 133, 245, 0.92);
+  --theme-accent-strong: rgba(137, 183, 255, 0.96);
+  --theme-accent-soft: rgba(76, 133, 245, 0.18);
+  --theme-accent-soft-strong: rgba(76, 133, 245, 0.3);
   --theme-accent-text: #fff;
+  --theme-overlay-scrim: rgba(0, 0, 0, 0.62);
+  --theme-avatar-border: rgba(255, 255, 255, 0.14);
+  --theme-favorite-bg: rgba(12, 14, 18, 0.72);
+  --theme-favorite-border: rgba(255, 255, 255, 0.14);
+  --theme-favorite-icon: rgba(255, 255, 255, 0.94);
+  --theme-favorite-active-bg: rgba(54, 45, 10, 0.92);
+  --theme-favorite-active-border: rgba(255, 216, 107, 0.28);
+  --theme-favorite-active-icon: #ffd86b;
   --theme-icon-filter: brightness(0) saturate(100%) invert(94%) sepia(6%) saturate(207%) hue-rotate(186deg) brightness(96%) contrast(92%);
 }
 
 :root[data-theme='light'] {
-  --theme-body-bg: #e7ebf2;
-  --theme-shell-bg: rgba(237, 241, 247, 0.98);
-  --theme-rail-bg: rgba(243, 246, 251, 0.97);
-  --theme-main-bg: rgba(232, 236, 243, 0.98);
-  --theme-workspace-bg: rgba(247, 249, 252, 0.96);
-  --theme-card-bg: rgba(252, 253, 255, 0.98);
-  --theme-card-bg-hover: rgba(244, 247, 251, 0.98);
-  --theme-card-border: rgba(31, 41, 55, 0.11);
-  --theme-card-shadow: 0 18px 34px rgba(31, 41, 55, 0.07);
-  --theme-surface-soft: rgba(30, 41, 59, 0.055);
-  --theme-surface-soft-2: rgba(30, 41, 59, 0.075);
-  --theme-surface-soft-3: rgba(30, 41, 59, 0.105);
-  --theme-pill-bg: rgba(30, 41, 59, 0.045);
-  --theme-border: rgba(30, 41, 59, 0.11);
-  --theme-border-strong: rgba(30, 41, 59, 0.16);
-  --theme-text: rgba(20, 27, 40, 0.92);
-  --theme-text-strong: rgba(10, 15, 28, 0.98);
-  --theme-text-muted: rgba(55, 65, 81, 0.76);
-  --theme-text-soft: rgba(75, 85, 99, 0.72);
-  --theme-text-faint: rgba(100, 116, 139, 0.88);
-  --theme-thumb-fallback-bg: #f6f8fb;
-  --theme-select-arrow: rgba(55, 65, 81, 0.74);
+  --theme-body-bg: #eef2f8;
+  --theme-shell-bg: rgba(241, 245, 251, 0.98);
+  --theme-rail-bg: rgba(248, 250, 253, 0.98);
+  --theme-main-bg: rgba(234, 239, 247, 0.98);
+  --theme-workspace-bg: rgba(250, 252, 255, 0.97);
+  --theme-card-bg: rgba(255, 255, 255, 0.96);
+  --theme-card-bg-hover: rgba(246, 249, 253, 0.98);
+  --theme-card-border: rgba(71, 85, 105, 0.12);
+  --theme-card-shadow: 0 14px 30px rgba(57, 72, 92, 0.08);
+  --theme-surface-soft: rgba(75, 85, 99, 0.052);
+  --theme-surface-soft-2: rgba(75, 85, 99, 0.078);
+  --theme-surface-soft-3: rgba(75, 85, 99, 0.11);
+  --theme-pill-bg: rgba(75, 85, 99, 0.048);
+  --theme-border: rgba(71, 85, 105, 0.12);
+  --theme-border-strong: rgba(71, 85, 105, 0.18);
+  --theme-text: rgba(24, 33, 48, 0.93);
+  --theme-text-strong: rgba(11, 18, 32, 0.98);
+  --theme-text-muted: rgba(51, 65, 85, 0.78);
+  --theme-text-soft: rgba(71, 85, 105, 0.76);
+  --theme-text-faint: rgba(100, 116, 139, 0.9);
+  --theme-thumb-fallback-bg: #f3f6fb;
+  --theme-select-arrow: rgba(51, 65, 85, 0.72);
   --theme-danger-bg: rgba(239, 68, 68, 0.1);
   --theme-danger-border: rgba(239, 68, 68, 0.22);
-  --theme-accent-bg: rgba(64, 110, 226, 0.94);
+  --theme-accent-bg: rgba(56, 105, 226, 0.94);
+  --theme-accent-strong: rgba(47, 87, 194, 0.96);
+  --theme-accent-soft: rgba(56, 105, 226, 0.12);
+  --theme-accent-soft-strong: rgba(56, 105, 226, 0.22);
   --theme-accent-text: #fff;
+  --theme-overlay-scrim: rgba(17, 24, 39, 0.28);
+  --theme-avatar-border: rgba(71, 85, 105, 0.16);
+  --theme-favorite-bg: rgba(255, 255, 255, 0.9);
+  --theme-favorite-border: rgba(71, 85, 105, 0.16);
+  --theme-favorite-icon: rgba(51, 65, 85, 0.92);
+  --theme-favorite-active-bg: rgba(255, 243, 199, 0.96);
+  --theme-favorite-active-border: rgba(217, 119, 6, 0.22);
+  --theme-favorite-active-icon: #b45309;
   --theme-icon-filter: brightness(0) saturate(100%) invert(14%) sepia(14%) saturate(652%) hue-rotate(182deg) brightness(95%) contrast(91%);
 }
 

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/FavoriteTierListsView.vue

@@ -223,6 +223,7 @@ onMounted(loadFavorites)
   height: 22px;
   border-radius: 9999px;
   object-fit: cover;
+  border: 1px solid var(--theme-avatar-border);
   background: var(--theme-border);
   flex: 0 0 auto;
 }

frontend/src/views/HomeView.vue

@@ -165,9 +165,9 @@ function templateThumbUrl(template) {
   width: 34px;
   height: 34px;
   border-radius: 999px;
-  border: 1px solid rgba(255, 255, 255, 0.14);
-  background: rgba(15, 15, 15, 0.72);
-  color: rgba(255, 255, 255, 0.82);
+  border: 1px solid var(--theme-favorite-border);
+  background: var(--theme-favorite-bg);
+  color: var(--theme-favorite-icon);
   font-size: 17px;
   line-height: 1;
   cursor: pointer;
@@ -177,16 +177,16 @@ function templateThumbUrl(template) {
   justify-content: center;
 }
 .libraryCard__favorite--active {
-  background: rgba(54, 45, 10, 0.92);
-  border-color: rgba(255, 216, 107, 0.28);
+  background: var(--theme-favorite-active-bg);
+  border-color: var(--theme-favorite-active-border);
 }
 .libraryCard__favoriteIcon {
   opacity: 0.76;
-  color: rgba(255, 255, 255, 0.94);
+  color: var(--theme-favorite-icon);
 }
 .libraryCard__favorite--active .libraryCard__favoriteIcon {
   opacity: 1;
-  color: #ffd86b;
+  color: var(--theme-favorite-active-icon);
 }
 .libraryCard__thumbWrap {
   width: 100%;

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;

frontend/src/views/MyTierListsView.vue

@@ -229,7 +229,7 @@ function openList(t) {
   height: 22px;
   border-radius: 9999px;
   object-fit: cover;
-  border: 1px solid rgba(255, 255, 255, 0.12);
+  border: 1px solid var(--theme-avatar-border);
   background: var(--theme-border);
   flex: 0 0 auto;
 }

frontend/src/views/SearchResultsView.vue

@@ -215,6 +215,7 @@ watch(
   height: 22px;
   border-radius: 9999px;
   object-fit: cover;
+  border: 1px solid var(--theme-avatar-border);
   background: var(--theme-border);
   flex: 0 0 auto;
 }

frontend/src/views/TopicHubView.vue

@@ -319,7 +319,7 @@ watch(
   height: 22px;
   border-radius: 9999px;
   object-fit: cover;
-  border: 1px solid rgba(255, 255, 255, 0.12);
+  border: 1px solid var(--theme-avatar-border);
   background: var(--theme-border);
   flex: 0 0 auto;
 }