From 2f7ce64391adc3be3deff9408c5ceb8e73e247dd Mon Sep 17 00:00:00 2001 From: zenn Date: Mon, 11 May 2026 12:08:42 +0900 Subject: [PATCH] =?UTF-8?q?v0.0.58:=20=EB=A9=94=EC=9D=B8=C2=B7=EC=9A=B0?= =?UTF-8?q?=EC=B8=A1=20=EC=82=AC=EC=9D=B4=EB=93=9C=20=EA=B0=84=EA=B2=A9=20?= =?UTF-8?q?=EB=B0=8F=20=EA=B0=80=EB=A1=9C=20=EB=84=98=EC=B9=A8=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 그리드 중앙을 1fr로 두고 column-gap을 적용하며, site-main 고정 720px 제거로 패딩·gap이 있을 때 본문이 오른쪽으로 삐져나가지 않게 했다. Co-authored-by: Cursor --- components/site/MainColumn.vue | 2 +- docs/convention.md | 2 +- docs/history.md | 6 ++++++ docs/map.md | 6 +++--- docs/spec.md | 6 +++--- docs/update.md | 7 +++++++ layouts/default.vue | 8 ++++---- layouts/post.vue | 8 ++++---- package.json | 2 +- 9 files changed, 30 insertions(+), 17 deletions(-) diff --git a/components/site/MainColumn.vue b/components/site/MainColumn.vue index f79316b..ffebd2d 100644 --- a/components/site/MainColumn.vue +++ b/components/site/MainColumn.vue @@ -1,5 +1,5 @@ diff --git a/docs/convention.md b/docs/convention.md index 20e702a..2c197d4 100644 --- a/docs/convention.md +++ b/docs/convention.md @@ -28,7 +28,7 @@ - 관리자 글 에디터는 블록 단위 UI로 작성하되 저장 값은 기존 마크다운 문자열을 유지 ```html -
+
``` ## 주석 diff --git a/docs/history.md b/docs/history.md index d34dd4f..28e7ec7 100644 --- a/docs/history.md +++ b/docs/history.md @@ -1,5 +1,11 @@ # 의사결정 이력 +## 2026-05-11 v0.0.58 + +### 중앙 본문과 우측 사이드 가로 넘침 + +그리드에 `lg:px-5` 등 패딩이 있는데 열 정의가 `287px + 720px + 287px`로 합이 `max-width`와 맞춰져 있으면, 패딩을 제외한 실제 가용 폭보다 열 합이 커지고 `main`에 `width: 720px`가 걸려 있으면 중앙 열이 줄어들지 못해 오른쪽으로 삐져 나간다. 중앙 트랙을 `minmax(0,1fr)`로 두고 본문은 `max-width: 720px`로만 제한했으며, 열 사이 `column-gap`으로 우측 사이드와의 간격을 명시했다. 좌측 메뉴를 접었을 때는 `gap`이 왼쪽에 빈 여백을 만들지 않도록 끄고, 대신 본문에만 우측 패딩을 준다. + ## 2026-05-11 v0.0.57 ### 사이드바 하단 푸터 여백 diff --git a/docs/map.md b/docs/map.md index 6ef61b5..8b68ad4 100644 --- a/docs/map.md +++ b/docs/map.md @@ -6,8 +6,8 @@ | 파일 | 화면 | |------|------| -| layouts/default.vue | 메인·목록·태그 — 문서 스크롤 + 스티키 사이드(`lg+`), 모바일은 본문→우측 사이드·좌측 슬라이드 메뉴, `lg`~`xl` 그리드 좌우 패딩 | -| layouts/post.vue | 개별 게시물 — `default`와 동일한 반응형 셸·그리드 패딩 | +| layouts/default.vue | 메인·목록·태그 — 3열 `gap`+중앙 `1fr`, `site-main` `max-w-[720px]`, 모바일 슬라이드 메뉴 | +| layouts/post.vue | 개별 게시물 — `default`와 동일 | | layouts/admin.vue | 관리자 전체, 글 작성/수정 화면의 전체 화면 편집 모드와 문서 스크롤 잠금 | | layouts/page.vue | 고정 페이지 전체 화면 | @@ -24,7 +24,7 @@ | components/site/SiteHeader.vue | 모든 공개 페이지 상단, 우측 사용자 아바타 드롭다운(Anonymous/Sign up/Sign in), `lg`~`xl` 헤더 여백·반응형 검색창 폭 | | components/site/LeftSidebar.vue | 왼쪽 사이드바, `lg+`는 `sticky`+고정 높이+내부 무스크롤바 스크롤, `lg` 미만은 고정 슬라이드 패널, 하단 푸터 `px-4`/`sm:px-5` | | components/site/RightSidebar.vue | 오른쪽 사이드바, `lg+`는 고정 열 높이·스티키, 모바일은 본문 아래 전체 너비, 하단 푸터 `pr-3` | -| components/site/MainColumn.vue | 메인 화면 중앙 | +| components/site/MainColumn.vue | 메인 화면 중앙, `lg:max-w-[720px]`로 본문 상한 | | components/site/PostCard.vue | 목록의 게시물 카드, 대표 이미지 썸네일, 카드 hover 인터랙션 | | components/site/TagHeader.vue | 태그 페이지 헤더 | diff --git a/docs/spec.md b/docs/spec.md index d7f7db6..402cbbe 100644 --- a/docs/spec.md +++ b/docs/spec.md @@ -19,11 +19,11 @@ |------|-----------| | Header | 높이 57px, `sticky top-0`, `shrink-0`. `lg`~`xl` 구간은 내부 `px-5`~`px-6`로 좌우 여백을 두고, 검색창은 뷰포트에 맞춰 `max-w`로 단계 축소한다(`2xl`에서 고정 470px). | | Shell | `min-height: 100vh`, `flex` 세로 컬럼 | -| 그리드(데스크톱 `lg+`) | `items-start`, 본문(중앙) 높이에 맞춰 행이 늘어남 — **문서(`html`/`body`) 스크롤**로 긴 본문 처리(스크롤바는 브라우저 오른쪽) | +| 그리드(데스크톱 `lg+`) | `items-start`, `column-gap`(`lg:gap-x-4`, `xl:gap-x-5`)으로 열 사이 간격. 중앙 열은 `minmax(0,1fr)`로 패딩이 있어도 가로 합이 넘치지 않게 함 — **문서(`html`/`body`) 스크롤**로 긴 본문 처리(스크롤바는 브라우저 오른쪽) | | 그리드(모바일 `lg` 미만) | 단일 세로 흐름: **본문 → 오른쪽 사이드** 순. 왼쪽 사이드는 레이아웃 흐름에서 분리된 고정 슬라이드 패널로 표시 | | Left Aside | 너비 287px, `sticky top-[57px]`, `h-[calc(100vh-57px)]`와 `max-h` 동일(뷰포트 기준 고정 높이), 내부 상단은 `.site-sidebar-scroll`(스크롤바 숨김), 하단 푸터 `shrink-0`·상단 보더로 스크롤 영역과 구분, 푸터 좌우는 `px-4`~`sm:px-5`로 본문 블록과 유사한 여백 | | Left Aside(모바일) | `fixed` 좌측 패널, 열림 시 `translate-x-0`, 닫힘 시 화면 밖으로 이동. 열린 동안 백드롭과 `html.site-mobile-nav-open`으로 문서 스크롤 잠금 | -| Main | 너비 720px, 별도 `overflow-y` 없음 — 뷰포트와 동일한 문서 스크롤에 포함 | +| Main | 중앙 열 안에서 `max-width: 720px`·`justify-self: start`, 별도 `overflow-y` 없음. 좌측 메뉴 닫힘 시 `gap` 제거에 맞춰 `padding-right`로 우측만 여백 유지 — 뷰포트와 동일한 문서 스크롤에 포함 | | Right Aside | Left와 동일 패턴(스티키·고정 높이·내부 무스크롤바 스크롤·하단 카피라이트) | | Right Aside(모바일) | 본문 아래에 전체 너비로 배치, 상단 보더로 본문과 구분, 좌우 안전 여백(`px-4`) 적용 | @@ -517,6 +517,6 @@ APP_PORT=43118 ## 버전 관리 -- 현재 버전: v0.0.57 +- 현재 버전: v0.0.58 - 첫 커밋 이후 변경사항을 커밋할 때마다 패치 버전 증가 - 메이저/마이너 버전은 구조 변경 또는 기능 묶음 단위로 결정 diff --git a/docs/update.md b/docs/update.md index dd0a261..2eb75a6 100644 --- a/docs/update.md +++ b/docs/update.md @@ -1,5 +1,12 @@ # 업데이트 이력 +## v0.0.58 + +- 공개 3열 그리드 중앙을 `minmax(0,1fr)`로 바꾸고 `lg:gap-x-4`·`xl:gap-x-5`를 두어 본문과 오른쪽 사이드 사이 시각적 간격 확보. +- `site-main`의 고정 `lg:w-[720px]`를 제거하고 `lg:max-w-[720px]`·`justify-self-start`로 그리드 패딩·`gap`이 있어도 가로 넘침이 나지 않게 함. +- 좌측 메뉴 닫힘 시 `gap` 제거(`lg:!gap-x-0`)와 본문 `lg:pr-4`로 우측만 호흡 유지. +- `MainColumn`을 `lg:max-w-[720px]` 중심으로 정리. + ## v0.0.57 - 왼쪽 사이드바 하단 푸터(`left-sidebar__footer`) 수평 패딩을 `px-1`에서 `px-4`·`sm:px-5`로 조정해 링크·테마 버튼이 가장자리에 붙지 않게 함. diff --git a/layouts/default.vue b/layouts/default.vue index b109c48..015ca75 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -45,12 +45,12 @@ onBeforeUnmount(() => { />
diff --git a/layouts/post.vue b/layouts/post.vue index 6a55953..2c202ed 100644 --- a/layouts/post.vue +++ b/layouts/post.vue @@ -45,12 +45,12 @@ onBeforeUnmount(() => { />
diff --git a/package.json b/package.json index fa47afa..dd1d70a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sori.studio", - "version": "0.0.57", + "version": "0.0.58", "private": true, "type": "module", "scripts": {