diff --git a/docs/history.md b/docs/history.md index dbbc34d..b39c644 100644 --- a/docs/history.md +++ b/docs/history.md @@ -1,5 +1,10 @@ # 의사결정 이력 +## 2026-03-30 v1.2.23 +- 홈 화면의 게임 카드도 다른 목록 카드와 같은 밀도를 따라가야 하므로, 메인 라이브러리 역시 데스크톱 기본 4열을 기준으로 두는 편이 더 일관되다고 정리했다. +- 게임 허브에서 새 티어표 만들기 버튼이 본문과 우측 패널에 동시에 있으면 역할이 겹치므로, 생성 CTA는 우측 사이드 하나만 남기는 편이 맞다고 판단했다. +- 좌우 레일 액션 버튼은 스크롤되는 본문 안보다 독립된 하단 `56px` 푸터 영역에 놓는 편이 위치 인지가 더 안정적이라고 정리했다. + ## 2026-03-30 v1.2.22 - 왼쪽 레일은 홈/목록/에디터 어디서든 “사라지는 패널”보다 “축소된 내비 레일”로 읽히는 편이 구조적으로 더 일관되므로, 완전 숨김 대신 아이콘 중심 축소 상태를 유지하기로 했다. - 좌우 패널 토글은 상태마다 다른 아이콘이 바뀌기보다 방향만 고정하는 편이 덜 혼란스러우므로, 우측은 `dock_to_left`, 좌측은 `dock_to_right` 하나로 통일하기로 정리했다. diff --git a/docs/map.md b/docs/map.md index daa609f..8348eea 100644 --- a/docs/map.md +++ b/docs/map.md @@ -2,12 +2,12 @@ ## `/` - 화면 파일: `frontend/src/views/HomeView.vue` -- 역할: 상단 상태/CTA가 있는 라이브러리 대시보드, 게임 카드 클릭 이동, `직접 티어표 만들기` 진입 +- 역할: 데스크톱 기본 4열 게임 카드 라이브러리 대시보드, 게임 카드 클릭 이동, `직접 티어표 만들기` 진입 - 연동 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` diff --git a/docs/spec.md b/docs/spec.md index 7d3c2f3..282debc 100644 --- a/docs/spec.md +++ b/docs/spec.md @@ -41,6 +41,7 @@ - 에디터/관리자 세부 옵션은 후속 단계에서 이 패널로 점진 이관한다. - 공통 토글 버튼은 패널이 닫혀 있을 때 중앙 헤더, 열려 있을 때 우측 헤더에 각각 아이콘만 표시하는 방식으로 동작한다. - 오른쪽 패널 토글은 열기/닫기 모두 `dock_to_left`, 왼쪽 패널 토글은 `dock_to_right` 아이콘으로 통일한다. + - 좌우 레일의 주요 CTA는 스크롤되는 본문과 분리된 하단 `56px` 액션 영역에 배치한다. - 홈 화면 기준 우측 패널은 임시 정보 카드 여러 개보다 핵심 CTA 하나만 남겨, 시안처럼 단순한 보조 레일 역할을 우선 유지한다. - 티어표 편집 화면 - 공통 우측 패널 대신 전용 로컬 편집 패널을 사용한다. diff --git a/docs/todo.md b/docs/todo.md index 1385d9e..af5c5a7 100644 --- a/docs/todo.md +++ b/docs/todo.md @@ -15,6 +15,7 @@ - 공통 56px 셸 헤더는 반영했으므로, 다음 단계는 좌/중앙/우 헤더 안에 실제 아이콘/상태 요소를 시안 순서에 맞게 하나씩 채워 넣는 작업이다. - 좌측 레일은 최근 즐겨찾기와 전역 검색까지 붙었으므로, 다음 단계는 검색 자동완성이나 즐겨찾기 썸네일 품질 같은 디테일을 더 다듬는 작업이다. - 좌측 레일 축소형은 반영했으므로, 다음 단계는 축소 상태에서 관리자/로그인 진입점과 hover 툴팁 같은 보조 UX를 더 다듬는 작업이다. +- 좌우 하단 액션 영역은 분리했으므로, 다음 단계는 축소된 왼쪽 레일에서도 관리자/로그인 버튼을 아이콘형으로 어떻게 유지할지 검토할 수 있다. - 카드 목록은 4열 기준과 메타 줄 구성까지 통일했으므로, 다음 단계는 필터 상태 배지나 hover·selection 강조 같은 상호작용 디테일을 더 다듬는 작업이다. - 검색 결과 화면은 좌측 전역 검색 입력만 쓰도록 정리됐으므로, 다음 단계는 결과 필터/정렬 여부를 검토하는 식으로 확장하면 된다. - 공통 3단 셸 구조는 고정했지만, 관리자/에디터 우측 패널 내부에 아직 바디에 남아 있는 제어 요소를 더 옮겨야 한다. diff --git a/docs/update.md b/docs/update.md index 654fca7..f7362f4 100644 --- a/docs/update.md +++ b/docs/update.md @@ -1,5 +1,10 @@ # 업데이트 로그 +## 2026-03-30 v1.2.23 +- **홈 게임 카드 4열 정리**: 메인 게임 목록 화면도 카드형 레이아웃에서 데스크톱 기준 기본 4열로 보이도록 그리드를 조정 +- **게임 허브 중복 생성 CTA 제거**: 게임 선택 화면 본문 상단의 `새로운 티어표 만들기` 버튼을 제거하고, 우측 사이드 하단 CTA만 유지하도록 정리 +- **좌우 하단 액션 영역 분리**: 왼쪽 `관리자 메뉴/로그인`과 오른쪽 빠른 액션 버튼을 각각 독립된 하단 `56px` 영역에 배치해, 본문/스크롤 영역과 분리된 고정 액션 위치로 통일 + ## 2026-03-30 v1.2.22 - **왼쪽 사이드 축소/확대 추가**: 좌측 레일을 완전히 숨기지 않고 축소형 내비로 접었다 펼 수 있게 바꾸고, 접힌 상태에서는 아이콘 중심으로만 보이도록 레이아웃을 정리 - **좌우 패널 토글 아이콘 통일**: 오른쪽 패널 열기/닫기는 모두 `dock_to_left`, 왼쪽 패널 토글은 `dock_to_right` 아이콘만 사용하도록 통일 diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 54b99d3..d61b48c 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -305,11 +305,11 @@ watch(
아직 즐겨찾기한 티어표가 없어요.
-
+
+
관리자 메뉴 로그인
-
@@ -338,14 +338,16 @@ watch(
- -
+
+
+
+
@@ -420,6 +422,16 @@ 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; @@ -439,6 +451,7 @@ watch( min-height: 0; padding: 14px 12px; box-sizing: border-box; + overflow: auto; } .ghostIcon { @@ -773,8 +786,7 @@ watch( } .leftRail__bottom { - margin-top: auto; - padding-top: 20px; + justify-content: stretch; } .adminButton { @@ -870,6 +882,7 @@ watch( .rightRailAction { display: grid; + width: 100%; } .rightRailAction__button { diff --git a/frontend/src/views/GameHubView.vue b/frontend/src/views/GameHubView.vue index 2661616..a21c18a 100644 --- a/frontend/src/views/GameHubView.vue +++ b/frontend/src/views/GameHubView.vue @@ -81,9 +81,6 @@ function submitSearch() {

{{ gameName || gameId }}

이 게임의 공개 티어표를 탐색하고, 바로 새 보드를 만들어 같은 흐름으로 이어갈 수 있어요.

-
- -
{{ error }}
@@ -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; } diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue index 87e17c5..3c8d339 100644 --- a/frontend/src/views/HomeView.vue +++ b/frontend/src/views/HomeView.vue @@ -103,7 +103,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 { @@ -176,6 +176,11 @@ function thumbUrl(g) { 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 { grid-template-columns: repeat(2, minmax(0, 1fr));