v0.0.58: 메인·우측 사이드 간격 및 가로 넘침 수정

그리드 중앙을 1fr로 두고 column-gap을 적용하며, site-main 고정 720px 제거로 패딩·gap이 있을 때 본문이 오른쪽으로 삐져나가지 않게 했다. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-11 12:08:42 +09:00
parent 8daec2806b
commit 2f7ce64391
9 changed files with 30 additions and 17 deletions
--- a/components/site/MainColumn.vue
+++ b/components/site/MainColumn.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="main-column w-full lg:w-[720px]">
+  <div class="main-column w-full max-w-full lg:max-w-[720px]">
    <slot />
  </div>
 </template>
--- a/docs/convention.md
+++ b/docs/convention.md
@@ -28,7 +28,7 @@
 - 관리자 글 에디터는 블록 단위 UI로 작성하되 저장 값은 기존 마크다운 문자열을 유지

 ```html
-<main class="site-main w-[720px]">
+<main class="site-main w-full max-w-full lg:max-w-[720px]">
 ```

 ## 주석
--- 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

 ### 사이드바 하단 푸터 여백
--- 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 | 태그 페이지 헤더 |

--- 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
 - 첫 커밋 이후 변경사항을 커밋할 때마다 패치 버전 증가
 - 메이저/마이너 버전은 구조 변경 또는 기능 묶음 단위로 결정
--- 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`로 조정해 링크·테마 버튼이 가장자리에 붙지 않게 함.
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -45,12 +45,12 @@ onBeforeUnmount(() => {
      />
    </Transition>
    <div
-      class="public-layout__grid mx-auto flex w-full max-w-[1294px] flex-1 flex-col bg-[var(--site-bg)] px-4 lg:grid lg:grid-cols-[287px_minmax(0,720px)_287px] lg:items-start lg:px-5 lg:transition-[grid-template-columns,max-width] lg:duration-300 lg:ease-out xl:px-6 2xl:px-0"
-      :class="menuOpen ? '' : 'lg:max-w-[1007px] lg:[grid-template-columns:0_minmax(0,720px)_287px]'"
+      class="public-layout__grid mx-auto flex w-full max-w-[1294px] flex-1 flex-col bg-[var(--site-bg)] px-4 lg:grid lg:grid-cols-[287px_minmax(0,1fr)_287px] lg:items-start lg:gap-x-4 lg:px-5 lg:transition-[grid-template-columns,max-width,gap] lg:duration-300 lg:ease-out xl:gap-x-5 xl:px-6 2xl:px-0"
+      :class="menuOpen ? '' : 'lg:max-w-[1007px] lg:!gap-x-0 lg:[grid-template-columns:0_minmax(0,1fr)_287px]'"
    >
      <main
-        class="site-main min-w-0 w-full overflow-x-hidden lg:col-start-2 lg:row-start-1 lg:w-[720px]"
-        :class="{ 'site-main--menu-closed': !menuOpen }"
+        class="site-main min-w-0 w-full max-w-full overflow-x-hidden lg:col-start-2 lg:row-start-1 lg:max-w-[720px] lg:justify-self-start"
+        :class="[{ 'site-main--menu-closed': !menuOpen }, !menuOpen ? 'lg:pr-4 xl:pr-5' : '']"
      >
        <slot />
      </main>
--- a/layouts/post.vue
+++ b/layouts/post.vue
@@ -45,12 +45,12 @@ onBeforeUnmount(() => {
      />
    </Transition>
    <div
-      class="post-layout__grid mx-auto flex w-full max-w-[1294px] flex-1 flex-col bg-[var(--site-bg)] px-4 lg:grid lg:grid-cols-[287px_minmax(0,720px)_287px] lg:items-start lg:px-5 lg:transition-[grid-template-columns,max-width] lg:duration-300 lg:ease-out xl:px-6 2xl:px-0"
-      :class="menuOpen ? '' : 'lg:max-w-[1007px] lg:[grid-template-columns:0_minmax(0,720px)_287px]'"
+      class="post-layout__grid mx-auto flex w-full max-w-[1294px] flex-1 flex-col bg-[var(--site-bg)] px-4 lg:grid lg:grid-cols-[287px_minmax(0,1fr)_287px] lg:items-start lg:gap-x-4 lg:px-5 lg:transition-[grid-template-columns,max-width,gap] lg:duration-300 lg:ease-out xl:gap-x-5 xl:px-6 2xl:px-0"
+      :class="menuOpen ? '' : 'lg:max-w-[1007px] lg:!gap-x-0 lg:[grid-template-columns:0_minmax(0,1fr)_287px]'"
    >
      <main
-        class="site-main min-w-0 w-full overflow-x-hidden lg:col-start-2 lg:row-start-1 lg:w-[720px]"
-        :class="{ 'site-main--menu-closed': !menuOpen }"
+        class="site-main min-w-0 w-full max-w-full overflow-x-hidden lg:col-start-2 lg:row-start-1 lg:max-w-[720px] lg:justify-self-start"
+        :class="[{ 'site-main--menu-closed': !menuOpen }, !menuOpen ? 'lg:pr-4 xl:pr-5' : '']"
      >
        <slot />
      </main>
--- 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": {