From 14607fbbbbcbb595a4d82a1d98bbd81af31f32e1 Mon Sep 17 00:00:00 2001 From: zenn Date: Mon, 30 Mar 2026 14:50:06 +0900 Subject: [PATCH] =?UTF-8?q?=EB=A6=B4=EB=A6=AC=EC=8A=A4:=20v1.2.2=20?= =?UTF-8?q?=EC=82=AC=EC=9D=B4=EB=93=9C=20=ED=8C=A8=EB=84=90=20=ED=8F=AD?= =?UTF-8?q?=EA=B3=BC=20=ED=86=A0=EA=B8=80=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/history.md | 5 +++ docs/map.md | 2 +- docs/spec.md | 4 +- docs/todo.md | 1 + docs/update.md | 5 +++ frontend/src/App.vue | 89 ++++++++++++++++++++++++++++++++------------ 6 files changed, 80 insertions(+), 26 deletions(-) diff --git a/docs/history.md b/docs/history.md index 5f28789..87f1726 100644 --- a/docs/history.md +++ b/docs/history.md @@ -1,5 +1,10 @@ # 의사결정 이력 +## 2026-03-30 v1.2.2 +- 우측 패널은 본문 내부 보조 박스가 아니라 별도 컬럼으로 보이는 것이 핵심이므로, 폭을 `320px`로 고정하고 접힘/펼침도 레이아웃 레벨에서 처리하는 편이 맞다고 판단했다. +- 좌측 패널도 시안 기준 인지 폭이 중요하므로 `248px`로 고정하고, 중앙 콘텐츠는 나머지 공간을 유동적으로 쓰게 하는 구조로 정리했다. +- 우측 패널 토글은 라우트별 개별 구현보다 공통 셸의 상단 컨트롤로 두는 편이 모든 화면에서 일관된 사용성을 제공한다고 판단했다. + ## 2026-03-30 v1.2.1 - 공통 셸을 먼저 올린 직후에는 에디터와 관리자처럼 자체 패널이 많은 화면이 가장 크게 깨지므로, 이 화면들은 우선 공통 우측 패널을 숨기고 중앙 폭을 회복시키는 편이 안정적이라고 판단했다. - 목록형 카드 화면은 셸 안쪽 폭이 줄어든 상태에서 이전보다 더 많은 컬럼을 유지하면 즉시 사용성이 무너지므로, 기본 컬럼 수를 줄여 먼저 읽히는 상태를 만드는 쪽을 우선하기로 했다. diff --git a/docs/map.md b/docs/map.md index 48fe370..935d5ad 100644 --- a/docs/map.md +++ b/docs/map.md @@ -43,7 +43,7 @@ ## 공통 레이아웃 - 앱 셸 파일: `frontend/src/App.vue` - 역할: 좌측 내비게이션, 중앙 워크스페이스, 우측 컨텍스트 패널로 구성된 공통 앱 셸 렌더링, 로그인 상태 반영, 사용자 메뉴, 관리자 메뉴 노출 제어, 전역 우측 상단 토스트 렌더링 -- 예외: `/admin`, `/editor/*`, `/profile`, `/login`처럼 작업 밀도가 높은 포커스 화면은 공통 우측 패널을 숨기고 중앙 작업 폭을 우선 확보한다. +- 세부: 좌측 패널은 `248px`, 우측 패널은 `320px` 기준 폭을 사용하며, 상단 토글 버튼으로 우측 패널을 접고 펼칠 수 있다. ## 백엔드 진입점 - 서버 엔트리: `backend/index.js` diff --git a/docs/spec.md b/docs/spec.md index 7821a5a..464b914 100644 --- a/docs/spec.md +++ b/docs/spec.md @@ -10,7 +10,7 @@ - NAS HTTPS 리버스 프록시 운영 시 프런트 Nginx는 백엔드로 `X-Forwarded-Proto: https`를 전달하고, Express 세션은 프록시 환경에서 `secure` 쿠키를 허용하도록 설정한다. - 프런트 파비콘은 운영 정적 파일 차단 영향을 줄이기 위해 `index.html`의 인라인 데이터 URL로 제공한다. - 프런트 앱 셸은 `좌측 내비게이션 / 중앙 워크스페이스 / 우측 컨텍스트 패널` 3단 구조로 재정의되었고, preview 모드에서는 이 셸을 숨기고 콘텐츠만 렌더링한다. -- 단, 에디터·관리자·프로필·로그인처럼 자체 패널이 많은 포커스 화면은 현재 안정화를 위해 공통 우측 패널을 숨기고 중앙 작업 폭을 우선 확보한다. +- 좌측 패널은 `248px`, 우측 패널은 `320px` 기준 폭을 사용하며, 우측 패널은 상단 토글 버튼으로 접고 펼칠 수 있다. ## 데이터 저장 구조 - 메인 데이터베이스: MariaDB `tier_cursor` (기본값) @@ -29,7 +29,7 @@ - 우측 패널 - 현재 화면 문맥에 맞는 설명, 빠른 액션, 계정 상태 같은 보조 정보를 배치한다. - 에디터/관리자 세부 옵션은 후속 단계에서 이 패널로 점진 이관한다. - - 이관 전까지는 해당 포커스 화면에서 공통 우측 패널을 접고 화면 내부 패널을 그대로 사용한다. + - 공통 토글 버튼으로 패널을 접으면 중앙 워크스페이스가 남는 공간을 확장 사용한다. ## DB 스키마 - `users` diff --git a/docs/todo.md b/docs/todo.md index a3e105d..580fd56 100644 --- a/docs/todo.md +++ b/docs/todo.md @@ -2,6 +2,7 @@ ## 즉시 확인 필요 - 피그마 기반 리디자인은 현재 공통 셸과 카드 목록 화면, 포커스 화면 안정화까지만 반영된 상태이므로, 에디터/관리자 우측 옵션 패널을 시안 구조에 맞게 실제 기능 패널로 이관하는 작업이 남아 있다. +- 공통 우측 패널의 토글과 독립 컬럼 구조는 반영되었지만, 현재는 안내 카드 중심이므로 실제 화면별 기능 컨트롤을 이 패널로 옮기는 작업이 남아 있다. - 머티리얼 아이콘 SVG는 아직 임시 문자/배지 스타일로 대체된 부분이 있으므로, 최종 아이콘 에셋을 받아 반영하는 작업이 필요하다. - 미사용 커스텀 이미지 일괄 삭제는 현재 "참조가 없는 항목" 기준이며, 보관 기간 정책 같은 운영 규칙은 아직 없다. - 업로드 이미지는 현재 원본 파일을 그대로 저장하므로, 운영 부담이 커지면 서버 저장 전 리사이즈/압축(예: 긴 변 제한, WebP 변환) 도입이 필요하다. diff --git a/docs/update.md b/docs/update.md index df54500..2a1567b 100644 --- a/docs/update.md +++ b/docs/update.md @@ -1,5 +1,10 @@ # 업데이트 로그 +## 2026-03-30 v1.2.2 +- **사이드 패널 폭 고정**: 공통 앱 셸의 좌측 패널 폭을 `248px`, 우측 패널 폭을 `320px` 기준으로 재정의해 피그마 시안과 더 가깝게 맞춤 +- **우측 패널 토글 추가**: 상단 우측 토글 버튼으로 우측 패널을 접고 펼칠 수 있게 하고, 접힐 때는 중앙 작업 영역이 자연스럽게 확장되도록 전환 애니메이션을 추가 +- **우측 패널 독립성 강화**: 우측 패널은 본문과 별도 컬럼으로 유지하고, 닫힐 때도 본문 레이아웃과 분리된 독립 패널처럼 동작하도록 셸 구조를 조정 + ## 2026-03-30 v1.2.1 - **포커스 화면 폭 복구**: 에디터·관리자·프로필·로그인 화면은 공통 우측 패널을 잠시 숨기고 중앙 작업 폭을 넓혀, 기존 기능 UI가 3단 셸과 충돌하며 깨지던 문제를 완화 - **목록 카드 밀도 재조정**: 홈, 게임 허브, 내 티어표, 즐겨찾기 화면의 기본 컬럼 수를 줄여 현재 셸 폭 안에서도 카드가 과도하게 눌리지 않도록 정리 diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 39b5097..756ac1b 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -11,10 +11,10 @@ const auth = useAuthStore() const { toasts, dismissToast } = useToast() const menuOpen = ref(false) +const rightRailOpen = ref(true) const isAdmin = computed(() => !!auth.user?.isAdmin) const isPreviewMode = computed(() => route.query.preview === '1') -const isFocusWorkspace = computed(() => ['admin', 'newEditor', 'editEditor', 'profile', 'login'].includes(String(route.name || ''))) const avatarUrl = computed(() => (auth.user?.avatarSrc ? toApiUrl(auth.user.avatarSrc) : '')) const accountName = computed(() => { const nickname = (auth.user?.nickname || '').trim() @@ -129,6 +129,10 @@ const favoriteLinks = computed(() => [ onMounted(async () => { await auth.refresh() + if (typeof window !== 'undefined') { + const saved = window.localStorage.getItem('tier-maker:right-rail-open') + if (saved === '0') rightRailOpen.value = false + } document.addEventListener('click', onDocumentClick) }) @@ -158,6 +162,13 @@ function toggleMenu() { menuOpen.value = !menuOpen.value } +function toggleRightRail() { + rightRailOpen.value = !rightRailOpen.value + if (typeof window !== 'undefined') { + window.localStorage.setItem('tier-maker:right-rail-open', rightRailOpen.value ? '1' : '0') + } +} + function goProfile() { menuOpen.value = false router.push('/profile') @@ -171,7 +182,7 @@ async function logout() {