From 8ef011bfc80685ee4276a52880f63656e3547179 Mon Sep 17 00:00:00 2001 From: zenn Date: Fri, 3 Apr 2026 17:57:14 +0900 Subject: [PATCH] =?UTF-8?q?=EC=88=98=EC=A0=95:=20=EB=AA=A8=EB=B0=94?= =?UTF-8?q?=EC=9D=BC=20=EB=B3=B8=EB=AC=B8=20=EC=8B=9C=EC=9E=91=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=20=ED=9A=8C=EA=B7=80=20=EB=B3=B4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/history.md | 4 ++++ docs/update.md | 5 +++++ frontend/src/App.vue | 2 ++ 3 files changed, 11 insertions(+) diff --git a/docs/history.md b/docs/history.md index 85acec1..9e6bdf4 100644 --- a/docs/history.md +++ b/docs/history.md @@ -1,5 +1,9 @@ # 의사결정 이력 +## 2026-04-03 v1.4.73 +- 모바일 `appShell`은 PC처럼 좌우 3열이 아니라 위쪽 레일과 아래쪽 본문이 세로로 쌓이는 2행 구조이므로, 열 정의만 1fr로 바꾸고 행 정의를 비워두면 암묵 그리드 행이 남는 높이를 늘려 본문이 아래로 밀려 보일 수 있다고 판단했다. +- 이 문제는 각 화면 본문을 개별 조정하기보다 모바일 셸 컨테이너에서 첫 행은 `auto`, 본문 행은 `minmax(0, 1fr)`로 고정하고 전체 콘텐츠 정렬을 위쪽으로 붙이는 편이 공통 회귀를 가장 작게 되돌리는 방법이라고 정리했다. + ## 2026-04-03 v1.4.72 - 모바일 상단 레일은 왼쪽 유저 카드 영역과 오른쪽 패널 토글 버튼이 같은 시각적 간격 체계를 가져야 전체 셸이 덜 비뚤어져 보이므로, 모바일에서만 `railHeader` 좌우 패딩을 본문 카드 여백보다 조금 넓은 `20px`로 맞추는 편이 낫다고 판단했다. - 오른쪽 레일 토글 아이콘이 모바일에서 테두리 없는 아이콘만 보이면 왼쪽 네비 토글 버튼과 컴포넌트 문법이 달라 보이므로, 모바일 한정으로 같은 버튼형 배경/테두리/라운드를 적용해 조작 가능한 컨트롤처럼 통일하는 쪽으로 정리했다. diff --git a/docs/update.md b/docs/update.md index 1ecc724..9722773 100644 --- a/docs/update.md +++ b/docs/update.md @@ -1,5 +1,10 @@ # 업데이트 로그 +## 2026-04-03 v1.4.73 +- 모바일에서 왼쪽 레일 아래 메인 컨텐츠가 화면 중간부터 시작하는 것처럼 보이던 회귀를 수정했다. +- 원인은 모바일 `.appShell`이 1열 그리드로 바뀐 상태에서 세로 행 정의가 없어 `leftRail` 행과 `appMain` 행이 남는 높이를 나눠 가지며 위쪽이 불필요하게 늘어날 수 있던 점이었다. 모바일 그리드를 `auto + minmax(0, 1fr)` 행으로 고정하고 `align-content: start`를 적용해 상단 레일 바로 아래에 본문이 이어지도록 보정했다. +- 프런트 프로덕션 빌드(`npm run build`) 통과를 확인했다. + ## 2026-04-03 v1.4.72 - 모바일 공통 상단 헤더(`railHeader`) 좌우 패딩을 `20px`로 넓혀, 오른쪽 레일 토글 버튼과 화면 가장자리 간격이 왼쪽 유저 카드 쪽과 더 자연스럽게 맞도록 조정했다. - 모바일에서 오른쪽 레일 열기/닫기 아이콘도 왼쪽 네비게이션 토글과 같은 버튼형 카드 스타일로 보이도록 `42px` 크기, 테두리, 배경, 둥근 모서리를 맞췄다. diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 039a31b..4268e8c 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -2031,6 +2031,8 @@ function reloadApp() { @media (max-width: 860px) { .appShell { grid-template-columns: 1fr; + grid-template-rows: auto minmax(0, 1fr); + align-content: start; min-height: 100dvh; }