diff --git a/docs/history.md b/docs/history.md
index f6a0ab0..d279080 100644
--- a/docs/history.md
+++ b/docs/history.md
@@ -1,5 +1,10 @@
# 의사결정 이력
+## 2026-03-30 v1.2.8
+- 에디터는 “보드 편집”과 “옵션 편집”의 역할이 다르므로, 보드 옆에는 드래그용 아이템 풀을 두고 제목/설명/썸네일/저장 같은 설정은 최우측 사이드바에만 남기는 편이 맞다고 판단했다.
+- 커스텀 아이템 이름 정리는 배치 중에 계속 보는 정보보다 저장 전 정리용 정보에 가까우므로, 아이템 풀 아래보다 우측 편집 패널 내부가 더 적합하다고 정리했다.
+- 실제 SVG 에셋이 들어오기 시작한 만큼, 공통 셸은 새 아이콘을 우선 적용하고 나머지는 점진적으로 교체하는 방식이 안전하다고 판단했다.
+
## 2026-03-30 v1.2.7
- 피그마 감도는 개별 화면보다 공통 셸의 밀도와 아이콘 체계가 먼저 맞아야 하므로, 좌측/우측 레일을 먼저 아이콘형 카드 문법으로 정리하기로 했다.
- 실제 머티리얼 SVG 자산을 받기 전까지는 간단한 선형 SVG 아이콘으로 정보 구조를 먼저 맞추고, 이후 에셋 교체만으로 다듬을 수 있게 하는 편이 안전하다고 판단했다.
diff --git a/docs/map.md b/docs/map.md
index 3da9c24..de18aa9 100644
--- a/docs/map.md
+++ b/docs/map.md
@@ -12,7 +12,7 @@
## `/editor/:gameId/new`, `/editor/:gameId/:tierListId`
- 화면 파일: `frontend/src/views/TierEditorView.vue`
-- 역할: 티어 그룹 편집, 티어 행 추가/삭제, 관리자 아이템/커스텀 아이템 다중 드래그 앤 드롭 업로드, 우측 전용 편집 패널에서 티어표 제목/설명/대표 썸네일/공개 여부/저장 제어, 즐겨찾기 토글, PNG 다운로드
+- 역할: 티어 그룹 편집, 티어 행 추가/삭제, 보드 옆 아이템 풀에서 관리자 아이템/커스텀 아이템 다중 드래그 앤 드롭 업로드, 우측 전용 편집 패널에서 티어표 제목/설명/대표 썸네일/공개 여부/저장 제어와 커스텀 아이템 이름 정리, 즐겨찾기 토글, PNG 다운로드
- 연동 API: `GET /api/games/:gameId`, `GET /api/tierlists/:id`, `POST /api/tierlists/:id/favorite`, `DELETE /api/tierlists/:id/favorite`, `POST /api/tierlists/thumbnail`, `POST /api/tierlists/custom-items`, `POST /api/tierlists`
## `/login`
@@ -42,7 +42,7 @@
## 공통 레이아웃
- 앱 셸 파일: `frontend/src/App.vue`
-- 역할: 좌측 내비게이션, 중앙 워크스페이스, 우측 컨텍스트 패널로 구성된 공통 앱 셸 렌더링, 로그인 상태 반영, 사용자 메뉴, 관리자 메뉴 노출 제어, 선형 SVG 아이콘 기반 레일 UI, 전역 우측 상단 토스트 렌더링
+- 역할: 좌측 내비게이션, 중앙 워크스페이스, 우측 컨텍스트 패널로 구성된 공통 앱 셸 렌더링, 로그인 상태 반영, 사용자 메뉴, 관리자 메뉴 노출 제어, 일부 실제 SVG 에셋과 선형 SVG 아이콘이 혼합된 레일 UI, 전역 우측 상단 토스트 렌더링
- 세부: 좌측 패널은 `248px`, 우측 패널은 `320px` 기준 폭을 사용하며, 상단 토글 버튼으로 우측 패널을 접고 펼칠 수 있다.
## 백엔드 진입점
diff --git a/docs/spec.md b/docs/spec.md
index b046f76..9a16011 100644
--- a/docs/spec.md
+++ b/docs/spec.md
@@ -36,6 +36,7 @@
- 티어표 편집 화면
- 공통 우측 패널 대신 전용 로컬 편집 패널을 사용한다.
- 제목, 설명, 대표 썸네일, 공개 여부, 저장/삭제/요청 액션을 우측 로컬 패널에 배치한다.
+ - 보드 바로 옆에는 드래그용 아이템 풀을 별도 패널로 두고, 커스텀 아이템 이름 정리 목록은 우측 편집 패널 내부에서 관리한다.
- 관리자 화면
- 공통 우측 패널 대신 전용 로컬 운영 패널을 사용한다.
- 우측 로컬 패널에는 `게임/아이템/티어표/회원 관리` 탭, 검색, 필터, 새로고침, 빠른 작업 제어를 배치하고, 중앙 영역에는 실제 관리 대상 목록과 상세만 렌더링한다.
diff --git a/docs/todo.md b/docs/todo.md
index 646dbde..68a3f41 100644
--- a/docs/todo.md
+++ b/docs/todo.md
@@ -4,6 +4,7 @@
- 피그마 기반 리디자인은 현재 공통 셸과 카드 목록 화면, 포커스 화면 안정화까지만 반영된 상태이므로, 에디터/관리자 우측 옵션 패널을 시안 구조에 맞게 실제 기능 패널로 이관하는 작업이 남아 있다.
- 홈/게임 허브/내 티어표/즐겨찾기 카드 문법은 어느 정도 통일됐지만, 아직 실제 SVG 아이콘, 미세 간격, hover/selection 상태 같은 디테일은 더 다듬을 필요가 있다.
- 현재 공통 셸에는 임시 선형 SVG 아이콘을 사용하므로, 최종 머티리얼 아이콘 에셋을 받으면 교체하고 아이콘 크기/정렬을 다시 미세 조정할 필요가 있다.
+- 공통 셸과 에디터에는 일부 실제 SVG 아이콘을 연결했지만, 아직 즐겨찾기/설정/관리자 등 나머지 내비 아이콘은 임시 선형 SVG이므로 추가 에셋 교체가 남아 있다.
- 공통 우측 패널의 토글과 독립 컬럼 구조는 반영되었지만, 현재는 안내 카드 중심이므로 실제 화면별 기능 컨트롤을 이 패널로 옮기는 작업이 남아 있다.
- 티어표 편집 화면과 관리자 화면 모두 로컬 우측 패널 구조로 옮겼지만, 아직 세부 카드 밀도와 아이콘/모션 디테일은 피그마 시안 수준으로 더 다듬을 필요가 있다.
- 머티리얼 아이콘 SVG는 아직 임시 문자/배지 스타일로 대체된 부분이 있으므로, 최종 아이콘 에셋을 받아 반영하는 작업이 필요하다.
diff --git a/docs/update.md b/docs/update.md
index 1649b68..e62f095 100644
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,10 @@
# 업데이트 로그
+## 2026-03-30 v1.2.8
+- **실제 SVG 아이콘 연결 시작**: 사용자가 추가한 `grid_view`, `lists`, `dock_to_left`, `dock_to_right` 아이콘을 공통 셸 내비와 우측 패널 토글에 연결해 문자 기반 아이콘을 일부 실제 에셋으로 교체
+- **에디터 3열 구조 복구**: 티어표 편집 화면을 `보드 / 아이템 풀 / 우측 편집 사이드바` 구조로 재배치해, 아이템 풀은 보드 옆에서 바로 드래그 가능하고 편집 옵션은 최우측 패널에만 남도록 수정
+- **커스텀 아이템 이름 정리 위치 조정**: 커스텀 아이템 이름 수정 목록은 드래그용 아이템 풀 아래가 아니라 우측 편집 사이드바 안으로 옮겨, 보드 배치 흐름과 옵션 정리 흐름을 분리
+
## 2026-03-30 v1.2.7
- **공통 셸 아이콘형 정리**: 좌측 내비와 우측 보조 패널의 임시 문자 배지를 간단한 SVG 아이콘형으로 바꾸고, 버튼/카드 라운드와 밀도를 통일
- **좌측 레일 정보 밀도 개선**: 사용자 카드, 빠른 검색, 내비 버튼, 하단 로그인/관리자 버튼을 더 두꺼운 카드 문법으로 맞춰 피그마 톤에 가까운 레일 형태로 재정리
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 5138c7f..1fb2863 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -4,6 +4,10 @@ import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from './stores/auth'
import { toApiUrl } from './lib/runtime'
import { useToast } from './composables/useToast'
+import iconDockToLeft from './assets/icons/dock_to_left.svg'
+import iconDockToRight from './assets/icons/dock_to_right.svg'
+import iconGridView from './assets/icons/grid_view.svg'
+import iconLists from './assets/icons/lists.svg'
const route = useRoute()
const router = useRouter()
@@ -27,13 +31,13 @@ const accountName = computed(() => {
const accountEmail = computed(() => (auth.user?.email || '').trim() || '로그인 후 개인 메뉴를 사용할 수 있어요.')
const leftNavItems = computed(() => {
const items = [
- { key: 'home', label: 'Games', path: '/', icon: 'M4 6.5h16M4 12h16M4 17.5h16' },
- { key: 'me', label: '내 리스트', path: '/me', icon: 'M6 5.5h12v12H6z M8.75 8.5h6.5 M8.75 11.75h6.5 M8.75 15h4.5', requiresAuth: true },
+ { key: 'home', label: 'Games', path: '/', iconSrc: iconGridView },
+ { key: 'me', label: '내 리스트', path: '/me', iconSrc: iconLists, requiresAuth: true },
{ key: 'favorites', label: '즐겨찾기', path: '/favorites', icon: 'M12 4.75l2.18 4.42 4.88.71-3.53 3.44.83 4.86L12 15.9 7.64 18.18l.83-4.86-3.53-3.44 4.88-.71z', requiresAuth: true },
{ key: 'profile', label: 'Settings', path: '/profile', icon: 'M12 4.75a2.2 2.2 0 0 1 2.08 1.5l.18.56.58.13a2.2 2.2 0 0 1 1.52 2.76l-.17.56.39.46a2.2 2.2 0 0 1 0 2.86l-.39.46.17.56a2.2 2.2 0 0 1-1.52 2.76l-.58.13-.18.56a2.2 2.2 0 0 1-4.16 0l-.18-.56-.58-.13a2.2 2.2 0 0 1-1.52-2.76l.17-.56-.39-.46a2.2 2.2 0 0 1 0-2.86l.39-.46-.17-.56a2.2 2.2 0 0 1 1.52-2.76l.58-.13.18-.56A2.2 2.2 0 0 1 12 4.75z M12 9.35a2.65 2.65 0 1 0 0 5.3 2.65 2.65 0 0 0 0-5.3z', requiresAuth: true },
]
if (isAdmin.value) {
- items.push({ key: 'admin', label: 'Admin', path: '/admin', icon: 'M5.5 6.25h13v13h-13z M9 9.25h6 M9 12h6 M9 14.75h4.5' })
+ items.push({ key: 'admin', label: 'Admin', path: '/admin', iconSrc: iconLists })
}
return items.filter((item) => !item.requiresAuth || auth.user)
})
@@ -131,7 +135,6 @@ const favoriteLinks = computed(() => [
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 === 'panel') return 'M5.5 6.5h5v5h-5z M13.5 6.5h5v5h-5z M5.5 13.5h5v5h-5z M13.5 13.5h5v5h-5z'
if (type === 'link') return 'M8 12h8 M12 8l4 4-4 4'
return 'M4 12h16'
}
@@ -240,7 +243,8 @@ async function logout() {
:class="{ 'leftNav__item--active': isRouteActive(item.path) }"
>
-
+
+
{{ item.label }}
@@ -269,7 +273,7 @@ async function logout() {
@@ -288,7 +292,7 @@ async function logout() {
>
@@ -422,6 +426,15 @@ async function logout() {
stroke-linejoin: round;
}
+.ghostIcon img,
+.leftNav__glyph img,
+.ghostIcon--workspace img {
+ width: 16px;
+ height: 16px;
+ display: block;
+ filter: brightness(0) saturate(100%) invert(94%) sepia(6%) saturate(207%) hue-rotate(186deg) brightness(96%) contrast(92%);
+}
+
.ghostIcon--iconOnly {
min-width: 32px;
width: 32px;
diff --git a/frontend/src/assets/icons/dock_to_left.svg b/frontend/src/assets/icons/dock_to_left.svg
new file mode 100644
index 0000000..5d61fc7
--- /dev/null
+++ b/frontend/src/assets/icons/dock_to_left.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/frontend/src/assets/icons/dock_to_right.svg b/frontend/src/assets/icons/dock_to_right.svg
new file mode 100644
index 0000000..9ef8b77
--- /dev/null
+++ b/frontend/src/assets/icons/dock_to_right.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/frontend/src/assets/icons/grid_view.svg b/frontend/src/assets/icons/grid_view.svg
new file mode 100644
index 0000000..ec0ad53
--- /dev/null
+++ b/frontend/src/assets/icons/grid_view.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/frontend/src/assets/icons/lists.svg b/frontend/src/assets/icons/lists.svg
new file mode 100644
index 0000000..ea96d8e
--- /dev/null
+++ b/frontend/src/assets/icons/lists.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/frontend/src/views/TierEditorView.vue b/frontend/src/views/TierEditorView.vue
index 91a1f36..47d6a6e 100644
--- a/frontend/src/views/TierEditorView.vue
+++ b/frontend/src/views/TierEditorView.vue
@@ -685,114 +685,98 @@ onUnmounted(() => {
-
-
-
-
-
-
- 아이콘 크기
-
-
-
-
-
-
-
{{ effectiveTitle }}
-
{{ description }}
-
-
-
-
-
{{ g.name }}
-
-
- ↕
-
-
-
+
+
+
+
+
-
-
여기로 드래그해서 배치
-
-
+
+ 아이콘 크기
+
+
+
{{ effectiveTitle }}
+
{{ description }}
+
+
+
+
+
{{ g.name }}
+
+
+ ↕
+
+
+
+
+
+
여기로 드래그해서 배치
+
+
+
+
+
+
+
+
+
-
-
-
-
-
아이템
-
- {{ canEdit ? '게임별 기본 이미지와 커스텀 업로드를 여기에 모읍니다.' : '공개 티어표는 보기 전용입니다.' }}
-
-
-
-
-
{{ itemsById[id]?.label || id }}
+
+
아이템
+
+ {{ canEdit ? '보드 바로 옆에서 드래그해 넣을 수 있도록 아이템 풀을 고정합니다.' : '공개 티어표는 보기 전용입니다.' }}
-
-
-
추가한 커스텀 아이템 이름 정리
-
- 템플릿 요청 전에 이름을 정리해두면 관리자가 그대로 기본 템플릿으로 반영할 수 있어요.
+