릴리스: v1.2.24 홈 카드와 하단 여백 조정

docs/history.md

@@ -1,5 +1,20 @@
 # 의사결정 이력
 
+## 2026-03-30 v1.2.24
+- `내 티어표` 헤더의 저장 개수 stat은 정보 가치보다 시각 잡음이 더 크다고 보고, 제목/설명 중심 헤더로 단순화하는 편이 낫다고 정리했다.
+- 게임 선택 카드는 티어표 카드와 달리 템플릿 선택 진입점이므로, 썸네일까지 반복하기보다 제목과 ID만 간결하게 보여주는 편이 더 적합하다고 판단했다.
+- 좌우 하단 액션 버튼은 푸터 블록 안에 있더라도 화면 바닥에 너무 붙으면 무거워 보이므로, 추가 하단 여백을 두어 숨을 쉬게 하는 편이 낫다고 정리했다.
+
+## 2026-03-30 v1.2.23
+- 홈 화면의 게임 카드도 다른 목록 카드와 같은 밀도를 따라가야 하므로, 메인 라이브러리 역시 데스크톱 기본 4열을 기준으로 두는 편이 더 일관되다고 정리했다.
+- 게임 허브에서 새 티어표 만들기 버튼이 본문과 우측 패널에 동시에 있으면 역할이 겹치므로, 생성 CTA는 우측 사이드 하나만 남기는 편이 맞다고 판단했다.
+- 좌우 레일 액션 버튼은 스크롤되는 본문 안보다 독립된 하단 `56px` 푸터 영역에 놓는 편이 위치 인지가 더 안정적이라고 정리했다.
+
+## 2026-03-30 v1.2.22
+- 왼쪽 레일은 홈/목록/에디터 어디서든 “사라지는 패널”보다 “축소된 내비 레일”로 읽히는 편이 구조적으로 더 일관되므로, 완전 숨김 대신 아이콘 중심 축소 상태를 유지하기로 했다.
+- 좌우 패널 토글은 상태마다 다른 아이콘이 바뀌기보다 방향만 고정하는 편이 덜 혼란스러우므로, 우측은 `dock_to_left`, 좌측은 `dock_to_right` 하나로 통일하기로 정리했다.
+- 좌측 검색도 임시 선형 SVG보다 실제 에셋을 쓰는 편이 전체 레일 완성도가 높으므로, 사용자가 추가한 `search.svg`를 우선 적용하기로 했다.
+
 ## 2026-03-30 v1.2.21
 - 티어표 목록 카드는 페이지마다 다른 메타 구성을 두기보다, `제목+좋아요 / 작성자+최종 수정일` 두 줄 문법으로 통일하는 편이 시안과 사용성 모두에 더 맞다고 정리했다.
 - `내 즐겨찾기` 화면에서 “즐겨찾기한 날짜”는 컬렉션 내부 정보일 뿐 카드 핵심 정보는 아니므로, 정렬은 유지하되 카드에는 마지막 수정일만 보여주는 편이 더 읽기 쉽다고 판단했다.

docs/map.md

@@ -2,12 +2,12 @@
 
 ## `/`
 - 화면 파일: `frontend/src/views/HomeView.vue`
-- 역할: 상단 상태/CTA가 있는 라이브러리 대시보드, 게임 카드 클릭 이동, `직접 티어표 만들기` 진입
+- 역할: 데스크톱 기본 4열 게임 카드 라이브러리 대시보드, 썸네일 없이 `게임명 + 작은 ID` 메타만 보이는 템플릿 선택 카드, 게임 카드 클릭 이동, `직접 티어표 만들기` 진입
 - 연동 API: `GET /api/games`
 
 ## `/games/:gameId`
 - 화면 파일: `frontend/src/views/GameHubView.vue`
-- 역할: 선택한 게임 정보 표시, 상단 생성 CTA, 공개 티어표 목록 표시, 제목/작성자 검색, 티어표별 `상단 썸네일 / 제목+좋아요 / 작성자+최종 수정일` 카드 표시, 새 티어표 작성 진입
+- 역할: 선택한 게임 정보 표시, 공개 티어표 목록 표시, 제목/작성자 검색, 티어표별 `상단 썸네일 / 제목+좋아요 / 작성자+최종 수정일` 카드 표시, 새 티어표 작성은 우측 하단 CTA로 진입
 - 연동 API: `GET /api/games/:gameId`, `GET /api/tierlists/public`, `POST /api/tierlists/:id/favorite`, `DELETE /api/tierlists/:id/favorite`
 
 ## `/editor/:gameId/new`, `/editor/:gameId/:tierListId`
@@ -48,7 +48,7 @@
 ## 공통 레이아웃
 - 앱 셸 파일: `frontend/src/App.vue`
 - 역할: 좌측 내비게이션, 중앙 워크스페이스, 우측 컨텍스트 패널로 구성된 공통 앱 셸 렌더링, 로그인 상태 반영, 최근 즐겨찾기 바로가기와 전역 검색 입력, 관리자 메뉴 노출 제어, 실제 SVG 에셋과 선형 SVG 아이콘이 혼합된 레일 UI, 전역 우측 상단 토스트 렌더링
-- 세부: 좌측 패널은 `248px`, 우측 패널은 `320px` 기준 폭을 사용하며, 세 컬럼 모두 상단에 높이 `56px`의 헤더 블록을 유지한다. 중앙 헤더에는 고정 브랜드 `Tier Maker by zenn`이 표시되고, 우측 패널 토글은 닫혀 있을 때 중앙 헤더, 열려 있을 때 우측 헤더에 아이콘만 표시된다.
+- 세부: 좌측 패널은 `248px` 기준 폭을 사용하되 축소 시 아이콘 중심의 좁은 레일로 전환하고, 우측 패널은 `320px` 기준 폭을 사용한다. 세 컬럼 모두 상단에 높이 `56px`의 헤더 블록을 유지한다. 중앙 헤더에는 고정 브랜드 `Tier Maker by zenn`이 표시되고, 우측 패널 토글은 닫혀 있을 때 중앙 헤더, 열려 있을 때 우측 헤더에 아이콘만 표시된다. 좌우 레일의 주요 액션은 각각 하단 `56px` 푸터 영역 아래 추가 여백을 둔 상태로 배치된다.
 
 ## 백엔드 진입점
 - 서버 엔트리: `backend/index.js`

docs/spec.md

@@ -11,6 +11,7 @@
 - 프런트 파비콘은 운영 정적 파일 차단 영향을 줄이기 위해 `index.html`의 인라인 데이터 URL로 제공한다.
 - 프런트 앱 셸은 `좌측 내비게이션 / 중앙 워크스페이스 / 우측 컨텍스트 패널` 3단 구조로 재정의되었고, preview 모드에서는 이 셸을 숨기고 콘텐츠만 렌더링한다.
 - 좌측 패널은 `248px`, 우측 패널은 `320px` 기준 폭을 사용하며, 우측 패널은 상단 토글 버튼으로 접고 펼칠 수 있다.
+- 좌측 패널은 필요 시 축소형 레일로 접을 수 있으며, 접힌 상태에서는 아이콘 중심 내비게이션과 축약된 바로가기만 유지한다.
 - 이 3단 셸 구조는 홈, 게임 허브, 에디터, 관리자 등 일반 페이지 전반의 공통 뼈대로 유지하고, 페이지별 차이는 중앙/우측에 어떤 콘텐츠를 넣는지만 달라지도록 관리한다.
 - 비로그인 상태의 로그인 유도는 좌측 하단 버튼으로만 노출하고, 좌측 상단 사용자 카드 영역에는 별도 게스트 안내 카드를 렌더링하지 않는다.
 - 공통 셸의 좌측 내비, 우측 패널, 빠른 점프 버튼은 간단한 선형 SVG 아이콘과 두꺼운 카드형 버튼 문법을 공유한다.
@@ -27,17 +28,22 @@
 ## 화면 구조
 - 좌측 패널
   - 사용자 요약, 전체 공개 티어표 검색 입력, 주요 라우트 내비게이션, 최근 즐겨찾기 티어표 바로가기, 관리자 진입 버튼을 배치한다.
+  - 상단 토글 버튼은 항상 고정되어 있고, 패널을 축소하면 텍스트를 숨기고 아이콘 중심 레일로 전환한다.
   - `Settings`는 별도 메뉴 항목으로만 진입하며, 사용자 카드 자체는 정보 표시 용도로만 사용한다.
   - 사용자 아바타는 원형 보더 스타일을 유지하고, `Favorites` 영역은 최근 즐겨찾기 티어표 최대 10개를 메인 메뉴보다 작은 밀도의 바로가기 목록으로 보여준 뒤 하단 `즐겨찾기 더 보기` 링크로 전체 즐겨찾기 화면에 연결한다.
 - 중앙 워크스페이스
   - 현재 라우트의 핵심 콘텐츠를 렌더링하는 영역이며, 홈/목록 계열 화면은 카드형 대시보드 레이아웃을 우선 적용한다.
   - 공통 `workspaceBody`는 별도 외곽 카드 테두리 없이 셸 여백만 제공하고, 실제 카드/패널 레이어는 각 화면 내부에서만 구성한다.
   - 홈, 게임 허브, 내 티어표, 즐겨찾기, 검색 결과 화면은 같은 카드 문법(상단 16:9 썸네일, `제목+좋아요` 1행, `작성자+최종 수정일` 1행)을 공유하며, 데스크톱 기준 기본 4열 카드 그리드를 사용한다.
+  - 단, 홈 게임 선택 카드는 템플릿 선택용이므로 썸네일 없이 `게임명 + 작은 ID` 메타만 표시하는 간결한 카드형으로 유지한다.
   - 목록 계열 화면의 상단 도구 영역은 통계 카드와 액션 버튼을 공통 높이/반경으로 맞춰, 같은 라이브러리 대시보드로 읽히도록 정리한다.
 - 우측 패널
   - 현재 화면 문맥에 맞는 설명, 빠른 액션, 계정 상태 같은 보조 정보를 배치한다.
   - 에디터/관리자 세부 옵션은 후속 단계에서 이 패널로 점진 이관한다.
   - 공통 토글 버튼은 패널이 닫혀 있을 때 중앙 헤더, 열려 있을 때 우측 헤더에 각각 아이콘만 표시하는 방식으로 동작한다.
+  - 오른쪽 패널 토글은 열기/닫기 모두 `dock_to_left`, 왼쪽 패널 토글은 `dock_to_right` 아이콘으로 통일한다.
+  - 좌우 레일의 주요 CTA는 스크롤되는 본문과 분리된 하단 `56px` 액션 영역에 배치한다.
+  - 하단 액션은 화면 바닥에 바로 붙지 않도록 추가 하단 여백을 둔다.
   - 홈 화면 기준 우측 패널은 임시 정보 카드 여러 개보다 핵심 CTA 하나만 남겨, 시안처럼 단순한 보조 레일 역할을 우선 유지한다.
 - 티어표 편집 화면
   - 공통 우측 패널 대신 전용 로컬 편집 패널을 사용한다.

docs/todo.md

@@ -14,6 +14,9 @@
 - 에디터 우측 패널 외곽 래퍼는 제거했으므로, 다음 단계는 공통 오른쪽 컬럼 안에서 입력/버튼/구분선 간격을 시안처럼 더 정교하게 다듬는 작업이다.
 - 공통 56px 셸 헤더는 반영했으므로, 다음 단계는 좌/중앙/우 헤더 안에 실제 아이콘/상태 요소를 시안 순서에 맞게 하나씩 채워 넣는 작업이다.
 - 좌측 레일은 최근 즐겨찾기와 전역 검색까지 붙었으므로, 다음 단계는 검색 자동완성이나 즐겨찾기 썸네일 품질 같은 디테일을 더 다듬는 작업이다.
+- 좌측 레일 축소형은 반영했으므로, 다음 단계는 축소 상태에서 관리자/로그인 진입점과 hover 툴팁 같은 보조 UX를 더 다듬는 작업이다.
+- 좌우 하단 액션 영역은 분리했으므로, 다음 단계는 축소된 왼쪽 레일에서도 관리자/로그인 버튼을 아이콘형으로 어떻게 유지할지 검토할 수 있다.
+- 홈 게임 카드 메타는 간소화했으므로, 이후 필요하면 게임 썸네일은 상세 허브나 우측 패널처럼 더 맥락이 분명한 위치에만 쓰는 방향을 검토할 수 있다.
 - 카드 목록은 4열 기준과 메타 줄 구성까지 통일했으므로, 다음 단계는 필터 상태 배지나 hover·selection 강조 같은 상호작용 디테일을 더 다듬는 작업이다.
 - 검색 결과 화면은 좌측 전역 검색 입력만 쓰도록 정리됐으므로, 다음 단계는 결과 필터/정렬 여부를 검토하는 식으로 확장하면 된다.
 - 공통 3단 셸 구조는 고정했지만, 관리자/에디터 우측 패널 내부에 아직 바디에 남아 있는 제어 요소를 더 옮겨야 한다.

docs/update.md

@@ -1,5 +1,20 @@
 # 업데이트 로그
 
+## 2026-03-30 v1.2.24
+- **내 티어표 상단 stat 제거**: `내 티어표` 화면 헤더 오른쪽의 저장 개수 stat 카드를 제거해 제목/설명만 남도록 단순화
+- **홈 게임 카드 메타 단순화**: 게임 선택 카드에서 썸네일과 점형 메타를 제거하고, 한글 게임 제목과 아래 작은 ID만 보이는 형태로 정리
+- **좌우 하단 액션 여백 보정**: 왼쪽 로그인/관리자 버튼과 오른쪽 빠른 액션 버튼은 바닥에 바로 붙지 않도록 하단에 추가 여백을 확보
+
+## 2026-03-30 v1.2.23
+- **홈 게임 카드 4열 정리**: 메인 게임 목록 화면도 카드형 레이아웃에서 데스크톱 기준 기본 4열로 보이도록 그리드를 조정
+- **게임 허브 중복 생성 CTA 제거**: 게임 선택 화면 본문 상단의 `새로운 티어표 만들기` 버튼을 제거하고, 우측 사이드 하단 CTA만 유지하도록 정리
+- **좌우 하단 액션 영역 분리**: 왼쪽 `관리자 메뉴/로그인`과 오른쪽 빠른 액션 버튼을 각각 독립된 하단 `56px` 영역에 배치해, 본문/스크롤 영역과 분리된 고정 액션 위치로 통일
+
+## 2026-03-30 v1.2.22
+- **왼쪽 사이드 축소/확대 추가**: 좌측 레일을 완전히 숨기지 않고 축소형 내비로 접었다 펼 수 있게 바꾸고, 접힌 상태에서는 아이콘 중심으로만 보이도록 레이아웃을 정리
+- **좌우 패널 토글 아이콘 통일**: 오른쪽 패널 열기/닫기는 모두 `dock_to_left`, 왼쪽 패널 토글은 `dock_to_right` 아이콘만 사용하도록 통일
+- **전역 검색 아이콘 교체**: 좌측 전역 검색 입력에 사용자가 추가한 `search.svg`를 실제 아이콘으로 연결
+
 ## 2026-03-30 v1.2.21
 - **티어표 카드 문법 통일**: 게임 허브, 검색 결과, 내 티어표, 즐겨찾기 목록의 카드 레이아웃을 `상단 썸네일 / 제목+좋아요 / 작성자+최종 수정일` 2줄 메타 구조로 통일하고, 데스크톱 기준 한 줄 4개 카드가 보이도록 재배치
 - **즐겨찾기 화면 날짜 기준 단순화**: `내 즐겨찾기` 화면은 더 이상 즐겨찾기한 시각을 표시하지 않고, 정렬 기준과 무관하게 덱의 마지막 수정일만 카드에 노출하도록 정리

frontend/src/App.vue

@@ -10,6 +10,7 @@ import iconDockToRight from './assets/icons/dock_to_right.svg'
 import iconGridView from './assets/icons/grid_view.svg'
 import iconLists from './assets/icons/lists.svg'
 import iconMore from './assets/icons/more.svg'
+import iconSearch from './assets/icons/search.svg'
 import iconSettings from './assets/icons/settings.svg'
 
 const route = useRoute()
@@ -17,6 +18,7 @@ const router = useRouter()
 const auth = useAuthStore()
 const { toasts, dismissToast } = useToast()
 
+const leftRailCollapsed = ref(false)
 const rightRailOpen = ref(true)
 const searchQuery = ref('')
 const favoriteShortcuts = ref([])
@@ -35,6 +37,10 @@ const accountName = computed(() => {
   return 'Guest'
 })
 const accountEmail = computed(() => (auth.user?.email || '').trim() || '로그인 후 개인 메뉴를 사용할 수 있어요.')
+const shellStyle = computed(() => ({
+  '--left-rail-width': leftRailCollapsed.value ? '76px' : '248px',
+  '--right-rail-width': rightRailOpen.value ? '320px' : '0px',
+}))
 const leftNavItems = computed(() => {
   const items = [
     { key: 'home', label: 'Games', path: '/', iconSrc: iconGridView },
@@ -139,16 +145,12 @@ const routeMeta = computed(() => {
     action: () => router.push('/'),
   }
 })
-function railGlyph(type) {
-  if (type === 'menu') return 'M4 6.5h16M4 12h16M4 17.5h16'
-  if (type === 'search') return 'M10.2 6.2a4 4 0 1 1 0 8 4 4 0 0 1 0-8z M13.6 13.6l3.2 3.2'
-  if (type === 'link') return 'M8 12h8 M12 8l4 4-4 4'
-  return 'M4 12h16'
-}
 
 onMounted(async () => {
   await auth.refresh()
   if (typeof window !== 'undefined') {
+    const leftSaved = window.localStorage.getItem('tier-maker:left-rail-collapsed')
+    if (leftSaved === '1') leftRailCollapsed.value = true
     const saved = window.localStorage.getItem('tier-maker:right-rail-open')
     if (saved === '0') rightRailOpen.value = false
   }
@@ -168,6 +170,13 @@ function isRouteActive(path) {
   return route.path.startsWith(path)
 }
 
+function toggleLeftRail() {
+  leftRailCollapsed.value = !leftRailCollapsed.value
+  if (typeof window !== 'undefined') {
+    window.localStorage.setItem('tier-maker:left-rail-collapsed', leftRailCollapsed.value ? '1' : '0')
+  }
+}
+
 function toggleRightRail() {
   rightRailOpen.value = !rightRailOpen.value
   if (typeof window !== 'undefined') {
@@ -218,8 +227,10 @@ watch(
     class="appShell"
     :class="{
       'appShell--preview': isPreviewMode,
+      'appShell--leftCollapsed': leftRailCollapsed,
       'appShell--rightClosed': !rightRailOpen,
     }"
+    :style="shellStyle"
   >
     <template v-if="isPreviewMode">
       <main class="appMain appMain--preview">
@@ -229,8 +240,8 @@ watch(
     <template v-else>
       <aside class="leftRail">
         <div class="leftRail__top railHeader">
-          <button class="ghostIcon ghostIcon--iconOnly" type="button" aria-label="메뉴">
-            <svg viewBox="0 0 24 24" aria-hidden="true"><path :d="railGlyph('menu')" /></svg>
+          <button class="ghostIcon ghostIcon--iconOnly" type="button" aria-label="왼쪽 패널 토글" @click="toggleLeftRail">
+            <img :src="iconDockToRight" alt="" />
           </button>
         </div>
 
@@ -248,9 +259,9 @@ watch(
 
         <form class="searchStub" @submit.prevent="submitGlobalSearch">
           <span class="searchStub__icon">
-            <svg viewBox="0 0 24 24" aria-hidden="true"><path :d="railGlyph('search')" /></svg>
+            <img :src="iconSearch" alt="" />
           </span>
-          <input v-model="searchQuery" class="searchStub__input" type="search" placeholder="전체 티어표 검색" />
+          <input v-model="searchQuery" class="searchStub__input" type="search" :placeholder="leftRailCollapsed ? '' : '전체 티어표 검색'" />
         </form>
 
         <nav class="leftNav">
@@ -265,7 +276,7 @@ watch(
               <img v-if="item.iconSrc" :src="item.iconSrc" alt="" />
               <svg v-else viewBox="0 0 24 24" aria-hidden="true"><path :d="item.icon" /></svg>
             </span>
-            <span>{{ item.label }}</span>
+            <span class="leftNav__label">{{ item.label }}</span>
           </RouterLink>
         </nav>
 
@@ -294,11 +305,11 @@ watch(
           <div v-else class="favoriteEmpty">아직 즐겨찾기한 티어표가 없어요.</div>
         </div>
 
-        <div class="leftRail__bottom">
+        </div>
+        <div class="leftRail__bottom railFooter">
           <RouterLink v-if="isAdmin" to="/admin" class="adminButton">관리자 메뉴</RouterLink>
           <RouterLink v-else-if="!auth.user" to="/login" class="adminButton">로그인</RouterLink>
         </div>
-        </div>
       </aside>
 
       <main class="appMain">
@@ -323,18 +334,20 @@ watch(
       <aside class="rightRail" :class="{ 'rightRail--closed': !rightRailOpen }" :aria-hidden="!rightRailOpen">
         <div class="rightRail__top railHeader">
           <button v-if="rightRailOpen" class="ghostIcon ghostIcon--iconOnly" type="button" aria-label="패널 닫기" @click="toggleRightRail">
-            <img :src="iconDockToRight" alt="" />
+            <img :src="iconDockToLeft" alt="" />
           </button>
         </div>
         <div class="rightRail__body">
-        <template v-if="!usesLocalRightRail">
-          <section class="rightRailAction">
-            <button class="rightRailAction__button" type="button" @click="routeMeta.action">
-              {{ routeMeta.actionLabel }}
-            </button>
-          </section>
-        </template>
-        <div id="local-right-rail-root" class="localRightRailRoot"></div>
+          <div id="local-right-rail-root" class="localRightRailRoot"></div>
+        </div>
+        <div class="rightRail__bottom railFooter">
+          <template v-if="!usesLocalRightRail">
+            <section class="rightRailAction">
+              <button class="rightRailAction__button" type="button" @click="routeMeta.action">
+                {{ routeMeta.actionLabel }}
+              </button>
+            </section>
+          </template>
         </div>
       </aside>
     </template>
@@ -355,7 +368,7 @@ watch(
 .appShell {
   min-height: 100vh;
   display: grid;
-  grid-template-columns: 248px minmax(0, 1fr) 320px;
+  grid-template-columns: var(--left-rail-width, 248px) minmax(0, 1fr) var(--right-rail-width, 320px);
   background:
     radial-gradient(circle at top left, rgba(255, 255, 255, 0.04), transparent 28%),
     linear-gradient(180deg, #1a1a1a 0%, #121212 100%);
@@ -376,6 +389,7 @@ watch(
   min-width: 0;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 .rightRail {
@@ -388,10 +402,6 @@ watch(
     border-color 220ms ease;
 }
 
-.appShell--rightClosed {
-  grid-template-columns: 248px minmax(0, 1fr) 0px;
-}
-
 .appShell--rightClosed .rightRail {
   opacity: 0;
   transform: translateX(18px);
@@ -412,11 +422,25 @@ watch(
   box-sizing: border-box;
 }
 
+.railFooter {
+  height: 56px;
+  min-height: 56px;
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  box-sizing: border-box;
+}
+
 .leftRail__top,
 .rightRail__top {
   gap: 12px;
 }
 
+.leftRail__top {
+  justify-content: flex-start;
+}
+
 .rightRail__top {
   justify-content: flex-end;
 }
@@ -427,6 +451,7 @@ watch(
   min-height: 0;
   padding: 14px 12px;
   box-sizing: border-box;
+  overflow: auto;
 }
 
 .ghostIcon {
@@ -458,7 +483,9 @@ watch(
 }
 
 .ghostIcon img,
-.leftNav__glyph img {
+.leftNav__glyph img,
+.searchStub__icon img,
+.favoriteMoreLink__icon img {
   width: 16px;
   height: 16px;
   display: block;
@@ -475,6 +502,7 @@ watch(
   position: relative;
   margin-bottom: 14px;
   min-height: 58px;
+  transition: margin 220ms ease;
 }
 
 .appUserCard__button,
@@ -491,6 +519,7 @@ watch(
   text-align: left;
   cursor: default;
   box-sizing: border-box;
+  transition: padding 220ms ease, justify-content 220ms ease;
 }
 
 .appUserCard__avatar {
@@ -514,6 +543,7 @@ watch(
   min-width: 0;
   display: grid;
   gap: 4px;
+  transition: opacity 180ms ease;
 }
 
 .appUserCard__name {
@@ -541,6 +571,7 @@ watch(
   color: rgba(255, 255, 255, 0.62);
   margin-bottom: 14px;
   box-sizing: border-box;
+  transition: padding 220ms ease, justify-content 220ms ease;
 }
 
 .searchStub__input {
@@ -551,6 +582,7 @@ watch(
   color: rgba(255, 255, 255, 0.92);
   outline: none;
   font: inherit;
+  transition: opacity 180ms ease, width 180ms ease;
 }
 
 .searchStub__input::placeholder {
@@ -581,6 +613,11 @@ watch(
   transition: background 180ms ease, color 180ms ease, transform 180ms ease;
 }
 
+.leftNav__label {
+  min-width: 0;
+  white-space: nowrap;
+}
+
 .leftNav__item--active,
 .leftNav__item.router-link-active {
   background: rgba(255, 255, 255, 0.1);
@@ -601,6 +638,7 @@ watch(
   margin-top: 22px;
   display: grid;
   gap: 8px;
+  transition: margin 220ms ease;
 }
 
 .leftRail__sectionTitle {
@@ -687,9 +725,69 @@ watch(
   opacity: 0.56;
 }
 
+.appShell--leftCollapsed .leftRail__body {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.appShell--leftCollapsed .appUserCard {
+  margin-bottom: 10px;
+}
+
+.appShell--leftCollapsed .appUserCard__button,
+.appShell--leftCollapsed .appUserCard__guest {
+  justify-content: center;
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.appShell--leftCollapsed .appUserCard__meta,
+.appShell--leftCollapsed .searchStub__input,
+.appShell--leftCollapsed .leftNav__label,
+.appShell--leftCollapsed .leftRail__sectionTitle,
+.appShell--leftCollapsed .favoriteShortcut__label,
+.appShell--leftCollapsed .favoriteMoreLink span:not(.favoriteMoreLink__icon),
+.appShell--leftCollapsed .favoriteEmpty {
+  display: none;
+}
+
+.appShell--leftCollapsed .searchStub {
+  justify-content: center;
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.appShell--leftCollapsed .leftNav {
+  gap: 10px;
+}
+
+.appShell--leftCollapsed .leftNav__item {
+  justify-content: center;
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.appShell--leftCollapsed .leftRail__section {
+  margin-top: 18px;
+}
+
+.appShell--leftCollapsed .favoriteShortcut {
+  grid-template-columns: 1fr;
+  justify-items: center;
+  padding: 2px 0;
+}
+
+.appShell--leftCollapsed .favoriteMoreLink {
+  justify-content: center;
+}
+
+.appShell--leftCollapsed .leftRail__bottom {
+  display: none;
+}
+
 .leftRail__bottom {
-  margin-top: auto;
-  padding-top: 20px;
+  justify-content: stretch;
+  margin-bottom: 56px;
 }
 
 .adminButton {
@@ -785,6 +883,11 @@ watch(
 
 .rightRailAction {
   display: grid;
+  width: 100%;
+}
+
+.rightRail__bottom {
+  margin-bottom: 56px;
 }
 
 .rightRailAction__button {

frontend/src/assets/icons/search.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="ffffff"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>

frontend/src/views/GameHubView.vue

@@ -81,9 +81,6 @@ function submitSearch() {
       <h2 class="dashboardHero__title">{{ gameName || gameId }}</h2>
       <p class="dashboardHero__desc">이 게임의 공개 티어표를 탐색하고, 바로 새 보드를 만들어 같은 흐름으로 이어갈 수 있어요.</p>
     </div>
-    <div class="dashboardHero__right">
-      <button class="primary" @click="createNew">{{ auth.user ? '새로운 티어표 만들기' : '로그인 후 새 티어표 만들기' }}</button>
-    </div>
   </section>
 
   <div v-if="error" class="error">{{ error }}</div>
@@ -141,12 +138,6 @@ function submitSearch() {
   display: grid;
   gap: 8px;
 }
-.dashboardHero__right {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  flex-wrap: wrap;
-}
 .dashboardHero__eyebrow {
   font-size: 12px;
   color: rgba(255, 255, 255, 0.42);
@@ -164,22 +155,6 @@ function submitSearch() {
   color: rgba(255, 255, 255, 0.58);
   max-width: 720px;
 }
-.primary {
-  padding: 12px 16px;
-  border-radius: 14px;
-  border: 1px solid rgba(77, 127, 233, 0.96);
-  background: rgba(77, 127, 233, 0.88);
-  color: #fff;
-  cursor: pointer;
-  font-weight: 800;
-  transition:
-    transform 0.16s ease,
-    background 0.16s ease,
-    border-color 0.16s ease;
-}
-.primary:hover {
-  transform: translateY(-1px);
-}
 .panel {
   /* border: 1px solid rgba(255, 255, 255, 0.08); */
   background: transparent;
@@ -359,12 +334,6 @@ function submitSearch() {
   }
 }
 @media (max-width: 720px) {
-  .dashboardHero__right {
-    width: 100%;
-  }
-  .primary {
-    width: 100%;
-  }
   .list {
     grid-template-columns: 1fr;
   }

frontend/src/views/HomeView.vue

@@ -2,11 +2,8 @@
 import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { api } from '../lib/api'
-import { toApiUrl } from '../lib/runtime'
-import { useAuthStore } from '../stores/auth'
 
 const router = useRouter()
-const auth = useAuthStore()
 
 const items = ref([])
 const error = ref('')
@@ -24,20 +21,6 @@ onMounted(async () => {
 function goGame(gameId) {
   router.push(`/games/${gameId}`)
 }
-
-function goFreeform() {
-  if (!auth.user) {
-    router.push('/login?redirect=/editor/freeform/new')
-    return
-  }
-  router.push('/editor/freeform/new')
-}
-
-function thumbUrl(g) {
-  if (!g.thumbnailSrc) return ''
-  return toApiUrl(g.thumbnailSrc)
-}
-
 </script>
 
 <template>
@@ -52,16 +35,9 @@ function thumbUrl(g) {
   <div v-if="error" class="error">{{ error }}</div>
   <section class="libraryGrid">
     <button v-for="g in games" :key="g.id" class="libraryCard" @click="goGame(g.id)">
-      <div class="libraryCard__thumbWrap">
-        <img v-if="thumbUrl(g)" class="libraryCard__thumb" :src="thumbUrl(g)" :alt="g.name" />
-        <div v-else class="libraryCard__thumbFallback">대표 썸네일</div>
-      </div>
       <div class="libraryCard__body">
         <div class="libraryCard__title">{{ g.name }}</div>
-        <div class="libraryCard__meta">
-          <span class="libraryCard__metaDot"></span>
-          <span>{{ g.id }}</span>
-        </div>
+        <div class="libraryCard__meta">{{ g.id }}</div>
       </div>
     </button>
   </section>
@@ -103,7 +79,7 @@ function thumbUrl(g) {
 }
 .libraryGrid {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 18px;
 }
 .error {
@@ -116,14 +92,13 @@ function thumbUrl(g) {
 }
 .libraryCard {
   text-align: left;
-  padding: 14px;
+  padding: 18px;
   border-radius: 22px;
   border: 1px solid rgba(255, 255, 255, 0.16);
   background: rgba(62, 62, 62, 0.82);
   color: rgba(255, 255, 255, 0.92);
   cursor: pointer;
-  display: grid;
-  gap: 12px;
+  display: block;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
   transition:
     transform 0.16s ease,
@@ -133,48 +108,26 @@ function thumbUrl(g) {
   background: rgba(70, 70, 70, 0.96);
   transform: translateY(-2px);
 }
-.libraryCard__thumbWrap {
-  width: 100%;
-  aspect-ratio: 16 / 9;
-  border-radius: 14px;
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  background: #555;
-  overflow: hidden;
-  display: grid;
-  place-items: center;
-}
-.libraryCard__thumb {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-.libraryCard__thumbFallback {
-  font-size: 13px;
-  font-weight: 700;
-  font-size: 14px;
-  color: rgba(255, 255, 255, 0.4);
-}
 .libraryCard__body {
   display: grid;
-  gap: 8px;
+  gap: 6px;
 }
 .libraryCard__title {
   font-weight: 800;
   letter-spacing: -0.02em;
-  font-size: 16px;
+  font-size: 18px;
 }
 .libraryCard__meta {
-  display: inline-flex;
-  gap: 8px;
-  align-items: center;
   color: rgba(255, 255, 255, 0.6);
   font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.libraryCard__metaDot {
-  width: 10px;
-  height: 10px;
-  border-radius: 3px;
-  background: rgba(255, 255, 255, 0.9);
+@media (max-width: 1400px) {
+  .libraryGrid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
 }
 @media (max-width: 1200px) {
   .libraryGrid {
@@ -190,14 +143,6 @@ function thumbUrl(g) {
   .dashboardHero {
     align-items: stretch;
   }
-  .dashboardToolbar {
-    width: 100%;
-  }
-  .dashboardToolbar__ghost,
-  .dashboardToolbar__stat,
-  .customTierBtn {
-    flex: 1 1 100%;
-  }
   .libraryGrid {
     grid-template-columns: 1fr;
   }

frontend/src/views/MyTierListsView.vue

@@ -76,10 +76,6 @@ async function removeList(t) {
         <h2 class="title">내 티어표</h2>
         <div class="desc">직접 저장한 티어표를 같은 카드 레이아웃으로 다시 열고 정리할 수 있어요.</div>
       </div>
-      <div class="head__stat">
-        <span class="head__statLabel">Saved Lists</span>
-        <strong class="head__statValue">{{ myLists.length }}</strong>
-      </div>
     </header>
     <div class="card">
       <div v-if="myLists.length === 0" class="empty">아직 저장한 티어표가 없어요.</div>
@@ -140,25 +136,6 @@ async function removeList(t) {
 .desc {
   color: rgba(255, 255, 255, 0.58);
 }
-.head__stat {
-  display: grid;
-  gap: 2px;
-  min-width: 112px;
-  padding: 12px 14px;
-  border-radius: 14px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.045);
-}
-.head__statLabel {
-  font-size: 11px;
-  color: rgba(255, 255, 255, 0.48);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-.head__statValue {
-  font-size: 18px;
-  font-weight: 900;
-}
 .card {
   border: 0;
   background: transparent;
@@ -305,9 +282,6 @@ async function removeList(t) {
   }
 }
 @media (max-width: 720px) {
-  .head__stat {
-    width: 100%;
-  }
   .list {
     grid-template-columns: 1fr;
   }