From d724a64451c47be197576718a9e5fc8d5be293f5 Mon Sep 17 00:00:00 2001 From: zenn Date: Mon, 30 Mar 2026 16:33:02 +0900 Subject: [PATCH] =?UTF-8?q?=EB=A6=B4=EB=A6=AC=EC=8A=A4:=20v1.2.8=20?= =?UTF-8?q?=EC=97=90=EB=94=94=ED=84=B0=203=EC=97=B4=20=EA=B5=AC=EC=A1=B0?= =?UTF-8?q?=EC=99=80=20SVG=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=97=B0?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/history.md | 5 + docs/map.md | 4 +- docs/spec.md | 1 + docs/todo.md | 1 + docs/update.md | 5 + frontend/src/App.vue | 27 ++- frontend/src/assets/icons/dock_to_left.svg | 1 + frontend/src/assets/icons/dock_to_right.svg | 1 + frontend/src/assets/icons/grid_view.svg | 1 + frontend/src/assets/icons/lists.svg | 1 + frontend/src/views/TierEditorView.vue | 221 +++++++++++--------- 11 files changed, 159 insertions(+), 109 deletions(-) create mode 100644 frontend/src/assets/icons/dock_to_left.svg create mode 100644 frontend/src/assets/icons/dock_to_right.svg create mode 100644 frontend/src/assets/icons/grid_view.svg create mode 100644 frontend/src/assets/icons/lists.svg 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 }}
-
-
-
- - +
+
+
+
+
-
-
여기로 드래그해서 배치
-
- +
+ 아이콘 크기 +
+
+
{{ effectiveTitle }}
+
{{ description }}
+
+
+
+ + +
+
+
여기로 드래그해서 배치
+
+ + +
+
+
+
+
+ {{ effectiveAuthorName }} + {{ formatExportDate(fallbackTimestamp) }} +
+
-
- {{ effectiveAuthorName }} - {{ formatExportDate(fallbackTimestamp) }} -
-
-
-
-
아이템
-
- {{ canEdit ? '게임별 기본 이미지와 커스텀 업로드를 여기에 모읍니다.' : '공개 티어표는 보기 전용입니다.' }} -
-
-
- -
{{ itemsById[id]?.label || id }}
+
+
아이템
+
+ {{ canEdit ? '보드 바로 옆에서 드래그해 넣을 수 있도록 아이템 풀을 고정합니다.' : '공개 티어표는 보기 전용입니다.' }}
-
-
-
추가한 커스텀 아이템 이름 정리
-
- 템플릿 요청 전에 이름을 정리해두면 관리자가 그대로 기본 템플릿으로 반영할 수 있어요. +
+
+ +
{{ itemsById[id]?.label || id }}
+
-
- +
+
커스텀 이미지 추가
+
여러 이미지를 한 번에 드래그하거나 파일 선택으로 추가할 수 있어요.
+ +
-
-
커스텀 이미지 추가
-
여러 이미지를 한 번에 드래그하거나 파일 선택으로 추가할 수 있어요.
-
- -
@@ -831,6 +815,27 @@ onUnmounted(() => {
+
+
커스텀 이름 정리
+
+
+ 아래에서 이름만 정리해두면 관리자 요청 시 그대로 전달됩니다. +
+
+ +
+
+
+