From a6e78b29f17f0ac7fa8c71b6637b2b1d5c93a0d3 Mon Sep 17 00:00:00 2001 From: zenn Date: Mon, 30 Mar 2026 16:43:15 +0900 Subject: [PATCH] =?UTF-8?q?=EB=A6=B4=EB=A6=AC=EC=8A=A4:=20v1.2.10=20?= =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20=ED=99=94=EB=A9=B4=20=ED=88=B4=EB=B0=94?= =?UTF-8?q?=EC=99=80=20=EC=B9=B4=EB=93=9C=20=EB=B0=98=EC=9D=91=20=EC=A0=95?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/history.md | 5 ++ docs/spec.md | 1 + docs/todo.md | 1 + docs/update.md | 5 ++ frontend/src/views/FavoriteTierListsView.vue | 18 +++++-- frontend/src/views/GameHubView.vue | 31 ++++++++---- frontend/src/views/HomeView.vue | 52 ++++++++++++++++---- frontend/src/views/MyTierListsView.vue | 20 +++++--- 8 files changed, 103 insertions(+), 30 deletions(-) diff --git a/docs/history.md b/docs/history.md index 0568840..20d198f 100644 --- a/docs/history.md +++ b/docs/history.md @@ -1,5 +1,10 @@ # 의사결정 이력 +## 2026-03-30 v1.2.10 +- 목록 화면도 결국 같은 제품의 라이브러리 레이어이므로, 상단 통계 카드와 버튼의 높이·반경·배경을 공통 셸과 같은 문법으로 맞추는 편이 일관성이 높다고 정리했다. +- 홈 화면의 빠른 액션은 중복 의미 버튼보다 `즐겨찾기 / 내 리스트 / 커스텀 시작`처럼 실제 이동 동선이 분명한 버튼 구성이 더 적합하다고 판단했다. +- 카드 hover 반응은 화면마다 조금씩 다르게 두기보다, 모두 얕은 위로 이동과 배경 변화로 통일하는 편이 대시보드 감도를 유지하기 쉽다고 결정했다. + ## 2026-03-30 v1.2.9 - 관리자 화면은 기능보다 먼저 정보 계층이 읽혀야 하므로, 현재 탭에 맞는 요약 통계를 헤더에서 먼저 보여주는 편이 운영 판단에 더 유리하다고 정리했다. - 게임/아이템/티어표/회원 카드는 기능이 다른 대신 같은 제품 안에 있으므로, 배경층·반경·패딩은 하나의 대시보드 문법으로 맞춰 시안 톤을 더 강하게 유지하기로 결정했다. diff --git a/docs/spec.md b/docs/spec.md index 70b20c3..0fcf906 100644 --- a/docs/spec.md +++ b/docs/spec.md @@ -29,6 +29,7 @@ - 중앙 워크스페이스 - 현재 라우트의 핵심 콘텐츠를 렌더링하는 영역이며, 홈/목록 계열 화면은 카드형 대시보드 레이아웃을 우선 적용한다. - 홈, 게임 허브, 내 티어표, 즐겨찾기 화면은 같은 카드 문법(상단 16:9 썸네일, 제목, 작성자/보조 메타, 하단 상태 영역)을 공유하도록 정리한다. + - 목록 계열 화면의 상단 도구 영역은 통계 카드와 액션 버튼을 공통 높이/반경으로 맞춰, 같은 라이브러리 대시보드로 읽히도록 정리한다. - 우측 패널 - 현재 화면 문맥에 맞는 설명, 빠른 액션, 계정 상태 같은 보조 정보를 배치한다. - 에디터/관리자 세부 옵션은 후속 단계에서 이 패널로 점진 이관한다. diff --git a/docs/todo.md b/docs/todo.md index e0d8c3b..3421b90 100644 --- a/docs/todo.md +++ b/docs/todo.md @@ -3,6 +3,7 @@ ## 즉시 확인 필요 - 피그마 기반 리디자인은 현재 공통 셸과 카드 목록 화면, 포커스 화면 안정화까지만 반영된 상태이므로, 에디터/관리자 우측 옵션 패널을 시안 구조에 맞게 실제 기능 패널로 이관하는 작업이 남아 있다. - 홈/게임 허브/내 티어표/즐겨찾기 카드 문법은 어느 정도 통일됐지만, 아직 실제 SVG 아이콘, 미세 간격, hover/selection 상태 같은 디테일은 더 다듬을 필요가 있다. +- 목록 화면 상단 도구 막대는 공통 카드 문법으로 거의 맞췄지만, 실제 피그마처럼 필터 토글/정렬 상태를 시각적으로 더 강하게 드러내는 디테일은 남아 있다. - 현재 공통 셸에는 임시 선형 SVG 아이콘을 사용하므로, 최종 머티리얼 아이콘 에셋을 받으면 교체하고 아이콘 크기/정렬을 다시 미세 조정할 필요가 있다. - 공통 셸과 에디터에는 일부 실제 SVG 아이콘을 연결했지만, 아직 즐겨찾기/설정/관리자 등 나머지 내비 아이콘은 임시 선형 SVG이므로 추가 에셋 교체가 남아 있다. - 공통 우측 패널의 토글과 독립 컬럼 구조는 반영되었지만, 현재는 안내 카드 중심이므로 실제 화면별 기능 컨트롤을 이 패널로 옮기는 작업이 남아 있다. diff --git a/docs/update.md b/docs/update.md index 64a80ed..d7ab580 100644 --- a/docs/update.md +++ b/docs/update.md @@ -1,5 +1,10 @@ # 업데이트 로그 +## 2026-03-30 v1.2.10 +- **목록 화면 상단 툴바 밀도 통일**: 홈, 게임 허브, 내 티어표, 즐겨찾기 상단 영역의 통계 카드와 액션 버튼 높이/반경/배경을 맞춰 공통 셸과 같은 도구 막대 문법으로 정리 +- **홈 빠른 진입 흐름 보정**: 홈 화면 툴바에서 중복되던 버튼 흐름을 `즐겨찾기 / 내 리스트 / 커스텀 티어표 만들기` 중심으로 재구성해 실제 사용 동선에 맞게 정리 +- **목록 카드 인터랙션 보강**: 주요 카드 목록에 일관된 hover 이동과 배경 전환을 넣어, 대시보드 카드가 더 또렷하게 반응하도록 조정 + ## 2026-03-30 v1.2.9 - **관리자 대시보드 헤더 보강**: 관리자 화면 상단에 현재 탭 기준 요약 통계 카드를 추가해, 게임/아이템/티어표/회원 상태를 즉시 읽을 수 있게 정리 - **운영 패널 질감 정리**: 우측 `320px` 운영 패널의 탭, 입력, 통계 카드, 버튼 라운드/배경/호버 상태를 공통 셸 톤에 맞춰 더 두꺼운 대시보드 카드 문법으로 통일 diff --git a/frontend/src/views/FavoriteTierListsView.vue b/frontend/src/views/FavoriteTierListsView.vue index f3b6b9e..f99631e 100644 --- a/frontend/src/views/FavoriteTierListsView.vue +++ b/frontend/src/views/FavoriteTierListsView.vue @@ -117,6 +117,7 @@ onMounted(loadFavorites) justify-content: space-between; align-items: flex-end; flex-wrap: wrap; + padding: 6px 2px 8px; } .head__eyebrow { font-size: 11px; @@ -141,15 +142,15 @@ onMounted(loadFavorites) } .input, .select { - padding: 10px 12px; - border-radius: 10px; + padding: 11px 13px; + border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.92); } .btn { - padding: 10px 12px; - border-radius: 10px; + padding: 11px 13px; + border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.92); @@ -165,13 +166,20 @@ onMounted(loadFavorites) gap: 18px; } .boardCard { - border-radius: 18px; + border-radius: 22px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(62, 62, 62, 0.82); overflow: hidden; display: grid; gap: 10px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); + transition: + transform 0.16s ease, + background 0.16s ease; +} +.boardCard:hover { + transform: translateY(-2px); + background: rgba(70, 70, 70, 0.96); } .boardCard__body { border: 0; diff --git a/frontend/src/views/GameHubView.vue b/frontend/src/views/GameHubView.vue index dcd5d3d..ab9b725 100644 --- a/frontend/src/views/GameHubView.vue +++ b/frontend/src/views/GameHubView.vue @@ -139,7 +139,7 @@ function submitSearch() { align-items: flex-start; justify-content: space-between; flex-wrap: wrap; - padding: 4px 2px 18px; + padding: 6px 2px 18px; } .dashboardHero__left { display: grid; @@ -172,10 +172,10 @@ function submitSearch() { display: grid; gap: 2px; min-width: 112px; - padding: 10px 14px; - border-radius: 12px; + padding: 12px 14px; + border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); - background: rgba(255, 255, 255, 0.04); + background: rgba(255, 255, 255, 0.045); } .dashboardStat__label { font-size: 11px; @@ -189,12 +189,19 @@ function submitSearch() { } .primary { padding: 12px 16px; - border-radius: 12px; + 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); */ @@ -234,15 +241,15 @@ function submitSearch() { } .searchBar__input { min-width: 240px; - padding: 10px 12px; - border-radius: 10px; + padding: 11px 13px; + border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.92); } .searchBar__button { - padding: 10px 14px; - border-radius: 12px; + padding: 11px 14px; + border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.92); @@ -258,7 +265,7 @@ function submitSearch() { gap: 18px; } .boardCard { - border-radius: 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); @@ -268,9 +275,13 @@ function submitSearch() { min-height: 168px; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); + transition: + transform 0.16s ease, + background 0.16s ease; } .boardCard:hover { background: rgba(70, 70, 70, 0.96); + transform: translateY(-2px); } .boardCard__body { text-align: left; diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue index 0da02d3..039a0c2 100644 --- a/frontend/src/views/HomeView.vue +++ b/frontend/src/views/HomeView.vue @@ -33,6 +33,22 @@ function goFreeform() { router.push('/editor/freeform/new') } +function goFavorites() { + if (!auth.user) { + router.push('/login?redirect=/favorites') + return + } + router.push('/favorites') +} + +function goMyLists() { + if (!auth.user) { + router.push('/login?redirect=/me') + return + } + router.push('/me') +} + function thumbUrl(g) { if (!g.thumbnailSrc) return '' return toApiUrl(g.thumbnailSrc) @@ -52,8 +68,12 @@ function thumbUrl(g) { Visible Games {{ games.length }} - - +
+ Account + {{ auth.user ? 'Ready' : 'Guest' }} +
+ + @@ -85,10 +105,12 @@ function thumbUrl(g) { flex-wrap: wrap; margin-top: 2px; margin-bottom: 18px; + padding: 6px 2px 18px; } .dashboardHero__copy { display: grid; gap: 8px; + max-width: 720px; } .dashboardHero__eyebrow { font-size: 11px; @@ -118,10 +140,10 @@ function thumbUrl(g) { display: grid; gap: 2px; min-width: 112px; - padding: 10px 14px; - border-radius: 12px; + padding: 12px 14px; + border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); - background: rgba(255, 255, 255, 0.04); + background: rgba(255, 255, 255, 0.045); } .dashboardToolbar__label { font-size: 11px; @@ -135,13 +157,21 @@ function thumbUrl(g) { } .dashboardToolbar__ghost, .customTierBtn { - padding: 10px 14px; - border-radius: 12px; + padding: 12px 14px; + border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.84); font-weight: 700; cursor: pointer; + transition: + transform 0.16s ease, + border-color 0.16s ease, + background 0.16s ease; +} +.dashboardToolbar__ghost:hover, +.customTierBtn:hover { + transform: translateY(-1px); } .customTierBtn { background: rgba(77, 127, 233, 0.88); @@ -163,8 +193,8 @@ function thumbUrl(g) { } .libraryCard { text-align: left; - padding: 12px; - border-radius: 18px; + padding: 14px; + 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); @@ -172,9 +202,13 @@ function thumbUrl(g) { display: grid; gap: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); + transition: + transform 0.16s ease, + background 0.16s ease; } .libraryCard:hover { background: rgba(70, 70, 70, 0.96); + transform: translateY(-2px); } .libraryCard__thumbWrap { width: 100%; diff --git a/frontend/src/views/MyTierListsView.vue b/frontend/src/views/MyTierListsView.vue index 34b4c52..ce8ec88 100644 --- a/frontend/src/views/MyTierListsView.vue +++ b/frontend/src/views/MyTierListsView.vue @@ -120,6 +120,7 @@ async function removeList(t) { justify-content: space-between; flex-wrap: wrap; margin-bottom: 18px; + padding: 6px 2px 8px; } .head__eyebrow { font-size: 11px; @@ -140,10 +141,10 @@ async function removeList(t) { display: grid; gap: 2px; min-width: 112px; - padding: 10px 14px; - border-radius: 12px; + padding: 12px 14px; + border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); - background: rgba(255, 255, 255, 0.04); + background: rgba(255, 255, 255, 0.045); } .head__statLabel { font-size: 11px; @@ -162,8 +163,8 @@ async function removeList(t) { padding: 0; } .link { - padding: 8px 10px; - border-radius: 10px; + padding: 10px 12px; + border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.92); @@ -181,12 +182,19 @@ async function removeList(t) { .boardCard { display: grid; gap: 10px; - border-radius: 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); overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); + transition: + transform 0.16s ease, + background 0.16s ease; +} +.boardCard:hover { + transform: translateY(-2px); + background: rgba(70, 70, 70, 0.96); } .boardCard__body { flex: 1 1 auto;