릴리스: v1.2.1 리디자인 포커스 화면 안정화

docs/history.md

@@ -1,5 +1,10 @@
 # 의사결정 이력
 
+## 2026-03-30 v1.2.1
+- 공통 셸을 먼저 올린 직후에는 에디터와 관리자처럼 자체 패널이 많은 화면이 가장 크게 깨지므로, 이 화면들은 우선 공통 우측 패널을 숨기고 중앙 폭을 회복시키는 편이 안정적이라고 판단했다.
+- 목록형 카드 화면은 셸 안쪽 폭이 줄어든 상태에서 이전보다 더 많은 컬럼을 유지하면 즉시 사용성이 무너지므로, 기본 컬럼 수를 줄여 먼저 읽히는 상태를 만드는 쪽을 우선하기로 했다.
+- 리디자인 초기 단계에서는 “완벽한 시안 재현”보다 먼저 실제 조작 가능한 상태를 되찾는 것이 중요하므로, 이번 단계는 안정화 릴리스로 짧게 끊어 가기로 정리했다.
+
 ## 2026-03-30 v1.2.0
 - 피그마 시안은 단순 컴포넌트 교체보다 앱 전체의 정보 구조를 바꾸는 성격이 강하므로, 우선 공통 앱 셸부터 `좌측 내비 / 중앙 워크스페이스 / 우측 컨텍스트 패널`로 올리는 단계적 리디자인이 더 안전하다고 판단했다.
 - 홈, 게임 허브, 내 티어표, 즐겨찾기처럼 카드 목록 중심 화면은 시안 톤을 먼저 맞추고, 에디터와 관리자처럼 상호작용이 무거운 화면은 같은 셸 안에서 후속 이관하는 방식이 리스크가 적다고 정리했다.

docs/map.md

@@ -43,6 +43,7 @@
 ## 공통 레이아웃
 - 앱 셸 파일: `frontend/src/App.vue`
 - 역할: 좌측 내비게이션, 중앙 워크스페이스, 우측 컨텍스트 패널로 구성된 공통 앱 셸 렌더링, 로그인 상태 반영, 사용자 메뉴, 관리자 메뉴 노출 제어, 전역 우측 상단 토스트 렌더링
+- 예외: `/admin`, `/editor/*`, `/profile`, `/login`처럼 작업 밀도가 높은 포커스 화면은 공통 우측 패널을 숨기고 중앙 작업 폭을 우선 확보한다.
 
 ## 백엔드 진입점
 - 서버 엔트리: `backend/index.js`

docs/spec.md

@@ -10,6 +10,7 @@
 - NAS HTTPS 리버스 프록시 운영 시 프런트 Nginx는 백엔드로 `X-Forwarded-Proto: https`를 전달하고, Express 세션은 프록시 환경에서 `secure` 쿠키를 허용하도록 설정한다.
 - 프런트 파비콘은 운영 정적 파일 차단 영향을 줄이기 위해 `index.html`의 인라인 데이터 URL로 제공한다.
 - 프런트 앱 셸은 `좌측 내비게이션 / 중앙 워크스페이스 / 우측 컨텍스트 패널` 3단 구조로 재정의되었고, preview 모드에서는 이 셸을 숨기고 콘텐츠만 렌더링한다.
+- 단, 에디터·관리자·프로필·로그인처럼 자체 패널이 많은 포커스 화면은 현재 안정화를 위해 공통 우측 패널을 숨기고 중앙 작업 폭을 우선 확보한다.
 
 ## 데이터 저장 구조
 - 메인 데이터베이스: MariaDB `tier_cursor` (기본값)
@@ -28,6 +29,7 @@
 - 우측 패널
   - 현재 화면 문맥에 맞는 설명, 빠른 액션, 계정 상태 같은 보조 정보를 배치한다.
   - 에디터/관리자 세부 옵션은 후속 단계에서 이 패널로 점진 이관한다.
+  - 이관 전까지는 해당 포커스 화면에서 공통 우측 패널을 접고 화면 내부 패널을 그대로 사용한다.
 
 ## DB 스키마
 - `users`

docs/todo.md

@@ -1,7 +1,7 @@
 # 할 일 및 이슈
 
 ## 즉시 확인 필요
-- 피그마 기반 리디자인은 현재 공통 셸과 카드 목록 화면까지만 1차 적용된 상태이므로, 에디터/관리자 우측 옵션 패널을 시안 구조에 맞게 실제 기능 패널로 이관하는 작업이 남아 있다.
+- 피그마 기반 리디자인은 현재 공통 셸과 카드 목록 화면, 포커스 화면 안정화까지만 반영된 상태이므로, 에디터/관리자 우측 옵션 패널을 시안 구조에 맞게 실제 기능 패널로 이관하는 작업이 남아 있다.
 - 머티리얼 아이콘 SVG는 아직 임시 문자/배지 스타일로 대체된 부분이 있으므로, 최종 아이콘 에셋을 받아 반영하는 작업이 필요하다.
 - 미사용 커스텀 이미지 일괄 삭제는 현재 "참조가 없는 항목" 기준이며, 보관 기간 정책 같은 운영 규칙은 아직 없다.
 - 업로드 이미지는 현재 원본 파일을 그대로 저장하므로, 운영 부담이 커지면 서버 저장 전 리사이즈/압축(예: 긴 변 제한, WebP 변환) 도입이 필요하다.

docs/update.md

@@ -1,5 +1,10 @@
 # 업데이트 로그
 
+## 2026-03-30 v1.2.1
+- **포커스 화면 폭 복구**: 에디터·관리자·프로필·로그인 화면은 공통 우측 패널을 잠시 숨기고 중앙 작업 폭을 넓혀, 기존 기능 UI가 3단 셸과 충돌하며 깨지던 문제를 완화
+- **목록 카드 밀도 재조정**: 홈, 게임 허브, 내 티어표, 즐겨찾기 화면의 기본 컬럼 수를 줄여 현재 셸 폭 안에서도 카드가 과도하게 눌리지 않도록 정리
+- **에디터/관리자 패널 안정화**: 내부 작업 패널 색상과 폭을 새 셸 톤에 맞춰 다시 정리해, 중첩 패널 때문에 사용성이 무너지던 부분을 우선 복구
+
 ## 2026-03-30 v1.2.0
 - **피그마 기반 공통 앱 셸 1차 적용**: 상단 헤더 중심 구조를 `좌측 내비게이션 / 중앙 워크스페이스 / 우측 컨텍스트 패널` 3단 앱 셸로 재구성하고, 데스크톱 기준의 어두운 대시보드형 톤으로 전환
 - **홈/목록 화면 카드 UI 리디자인**: 홈, 게임 허브, 내 티어표, 즐겨찾기 화면의 카드 그리드와 툴바를 시안에 맞춰 더 조밀한 대시보드 형태로 재배치

frontend/src/App.vue

@@ -14,6 +14,7 @@ const menuOpen = ref(false)
 
 const isAdmin = computed(() => !!auth.user?.isAdmin)
 const isPreviewMode = computed(() => route.query.preview === '1')
+const isFocusWorkspace = computed(() => ['admin', 'newEditor', 'editEditor', 'profile', 'login'].includes(String(route.name || '')))
 const avatarUrl = computed(() => (auth.user?.avatarSrc ? toApiUrl(auth.user.avatarSrc) : ''))
 const accountName = computed(() => {
   const nickname = (auth.user?.nickname || '').trim()
@@ -170,7 +171,7 @@ async function logout() {
 </script>
 
 <template>
-  <div class="appShell" :class="{ 'appShell--preview': isPreviewMode }">
+  <div class="appShell" :class="{ 'appShell--preview': isPreviewMode, 'appShell--focus': isFocusWorkspace && !isPreviewMode }">
     <template v-if="isPreviewMode">
       <main class="appMain appMain--preview">
         <RouterView />
@@ -242,7 +243,7 @@ async function logout() {
 
       <main class="appMain">
         <section class="workspace">
-          <header class="workspaceHead">
+          <header v-if="!isFocusWorkspace" class="workspaceHead">
             <div>
               <div class="workspaceHead__title">{{ routeMeta.title }}</div>
               <div class="workspaceHead__subtitle">{{ routeMeta.subtitle }}</div>
@@ -254,7 +255,7 @@ async function logout() {
         </section>
       </main>
 
-      <aside class="rightRail">
+      <aside v-if="!isFocusWorkspace" class="rightRail">
         <div class="rightRail__top">
           <button class="ghostIcon" type="button" aria-label="상태">⌗</button>
         </div>
@@ -296,7 +297,7 @@ async function logout() {
 .appShell {
   min-height: 100vh;
   display: grid;
-  grid-template-columns: 260px minmax(0, 1fr) 280px;
+  grid-template-columns: 176px minmax(0, 1fr) 228px;
   background:
     radial-gradient(circle at top left, rgba(255, 255, 255, 0.04), transparent 28%),
     linear-gradient(180deg, #1a1a1a 0%, #121212 100%);
@@ -310,7 +311,7 @@ async function logout() {
 .leftRail,
 .rightRail {
   min-height: 100vh;
-  padding: 14px 10px;
+  padding: 12px 10px;
   border-right: 1px solid rgba(255, 255, 255, 0.08);
   background: rgba(14, 14, 14, 0.92);
   box-sizing: border-box;
@@ -346,7 +347,7 @@ async function logout() {
 }
 
 .brandBlock__title {
-  font-size: 22px;
+  font-size: 18px;
   font-weight: 900;
   letter-spacing: -0.04em;
 }
@@ -461,8 +462,8 @@ async function logout() {
 .leftNav__item {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 10px 12px;
+  gap: 10px;
+  padding: 10px;
   border-radius: 12px;
   color: rgba(255, 255, 255, 0.76);
   text-decoration: none;
@@ -475,8 +476,8 @@ async function logout() {
 }
 
 .leftNav__glyph {
-  width: 26px;
-  height: 26px;
+  width: 24px;
+  height: 24px;
   border-radius: 8px;
   display: grid;
   place-items: center;
@@ -542,7 +543,7 @@ async function logout() {
 
 .appMain {
   min-width: 0;
-  padding: 18px 18px 28px;
+  padding: 14px 14px 22px;
   box-sizing: border-box;
 }
 
@@ -563,7 +564,7 @@ async function logout() {
 }
 
 .workspaceHead__title {
-  font-size: 34px;
+  font-size: 28px;
   font-weight: 900;
   letter-spacing: -0.04em;
 }
@@ -571,7 +572,7 @@ async function logout() {
 .workspaceHead__subtitle {
   margin-top: 6px;
   color: rgba(255, 255, 255, 0.58);
-  font-size: 14px;
+  font-size: 13px;
 }
 
 .workspaceBody {
@@ -583,6 +584,19 @@ async function logout() {
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
 }
 
+.appShell--focus {
+  grid-template-columns: 176px minmax(0, 1fr);
+}
+
+.appShell--focus .workspaceBody {
+  min-height: calc(100vh - 92px);
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
 .rightRail {
   display: grid;
   align-content: start;
@@ -714,7 +728,7 @@ async function logout() {
 
 @media (max-width: 1280px) {
   .appShell {
-    grid-template-columns: 220px minmax(0, 1fr);
+    grid-template-columns: 160px minmax(0, 1fr);
   }
 
   .rightRail {

frontend/src/views/AdminView.vue

@@ -1354,18 +1354,14 @@ async function saveFeaturedOrder() {
 
 <style scoped>
 .wrap {
-  padding: 10px 2px;
-}
-.title {
-  margin: 0 0 10px;
-  font-size: 26px;
-  letter-spacing: -0.02em;
+  display: grid;
+  gap: 16px;
 }
 .card {
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(255, 255, 255, 0.04);
-  border-radius: 16px;
-  padding: 14px;
+  border: 0;
+  background: transparent;
+  border-radius: 0;
+  padding: 0;
 }
 .desc {
   opacity: 0.82;
@@ -1392,7 +1388,7 @@ async function saveFeaturedOrder() {
 }
 .tabs,
 .modeTabs {
-  margin-top: 14px;
+  margin-top: 0;
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
@@ -1400,26 +1396,27 @@ async function saveFeaturedOrder() {
 .tab,
 .modeTab {
   padding: 10px 14px;
-  border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.14);
-  background: rgba(255, 255, 255, 0.06);
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(255, 255, 255, 0.05);
   color: rgba(255, 255, 255, 0.92);
   cursor: pointer;
   font-weight: 800;
 }
 .tab--active,
 .modeTab--active {
-  background: rgba(96, 165, 250, 0.2);
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.18);
 }
 .panel {
   margin-top: 14px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(0, 0, 0, 0.12);
-  border-radius: 16px;
-  padding: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(48, 48, 48, 0.78);
+  border-radius: 18px;
+  padding: 16px;
 }
 .panel--compact {
-  max-width: 480px;
+  max-width: 520px;
 }
 .featuredOrderPanel {
   margin-top: 14px;

frontend/src/views/FavoriteTierListsView.vue

@@ -154,7 +154,7 @@ onMounted(loadFavorites)
 }
 .list {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 18px;
 }
 .row {
@@ -244,12 +244,12 @@ onMounted(loadFavorites)
 }
 @media (max-width: 1100px) {
   .list {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 @media (max-width: 960px) {
   .list {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: 1fr;
   }
 }
 @media (max-width: 720px) {

frontend/src/views/GameHubView.vue

@@ -214,7 +214,7 @@ function submitSearch() {
 }
 .list {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 18px;
 }
 .row {
@@ -312,14 +312,14 @@ function submitSearch() {
   padding: 7px 10px;
   font-weight: 800;
 }
-@media (max-width: 1100px) {
+@media (max-width: 1280px) {
   .list {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 @media (max-width: 1100px) {
   .list {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: 1fr;
   }
 }
 @media (max-width: 720px) {

frontend/src/views/HomeView.vue

@@ -112,7 +112,7 @@ function thumbUrl(g) {
 }
 .grid {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 18px;
 }
 .error {
@@ -165,12 +165,12 @@ function thumbUrl(g) {
 }
 @media (max-width: 1200px) {
   .grid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 @media (max-width: 900px) {
   .grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: 1fr;
   }
 }
 @media (max-width: 720px) {

frontend/src/views/MyTierListsView.vue

@@ -129,7 +129,7 @@ async function removeList(t) {
 }
 .list {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 18px;
 }
 .row {
@@ -215,12 +215,12 @@ async function removeList(t) {
 }
 @media (max-width: 1100px) {
   .list {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 @media (max-width: 960px) {
   .list {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: 1fr;
   }
 }
 @media (max-width: 720px) {

frontend/src/views/TierEditorView.vue

@@ -857,8 +857,8 @@ onUnmounted(() => {
 <style scoped>
 .head {
   display: grid;
-  gap: 14px;
-  padding: 6px 2px 14px;
+  gap: 16px;
+  padding: 2px 2px 16px;
 }
 .previewOnly {
   min-height: 100vh;
@@ -938,8 +938,8 @@ onUnmounted(() => {
 }
 .heroCard {
   display: grid;
-  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 360px);
-  gap: 18px;
+  grid-template-columns: minmax(0, 1.65fr) minmax(260px, 320px);
+  gap: 16px;
   align-items: stretch;
 }
 .heroCard__main,
@@ -1123,8 +1123,8 @@ onUnmounted(() => {
 }
 .layout {
   display: grid;
-  grid-template-columns: 1fr 320px;
-  gap: 14px;
+  grid-template-columns: minmax(0, 1fr) 284px;
+  gap: 16px;
   align-items: start;
 }
 .error {
@@ -1135,10 +1135,10 @@ onUnmounted(() => {
   background: rgba(239, 68, 68, 0.12);
 }
 .board {
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(255, 255, 255, 0.04);
-  border-radius: 16px;
-  padding: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(48, 48, 48, 0.78);
+  border-radius: 18px;
+  padding: 18px;
   align-self: start;
 }
 .modalOverlay {
@@ -1419,9 +1419,9 @@ onUnmounted(() => {
   object-fit: cover;
 }
 .sidebar {
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(255, 255, 255, 0.04);
-  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(48, 48, 48, 0.78);
+  border-radius: 18px;
   padding: 12px;
 }
 .sidebar__title {