From 3cb1290711106f799296a40c33ebc0667265b1fd Mon Sep 17 00:00:00 2001
From: zenn <zenn.message@gmail.com>
Date: Fri, 8 May 2026 10:04:12 +0900
Subject: [PATCH] =?UTF-8?q?v0.0.50=20=EB=AC=B8=EC=84=9C=20=EC=8A=A4?=
 =?UTF-8?q?=ED=81=AC=EB=A1=A4=EB=A1=9C=20=ED=86=B5=EC=9D=BC=ED=95=98?=
 =?UTF-8?q?=EA=B3=A0=20=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=20=EC=8A=A4?=
 =?UTF-8?q?=ED=8B=B0=ED=82=A4=C2=B7=EB=AC=B4=EC=8A=A4=ED=81=AC=EB=A1=A4?=
 =?UTF-8?q?=EB=B0=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

중앙 main 단독 스크롤을 제거하고 sticky 사이드+숨김 스크롤바로 Thred에 맞춘다.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 assets/css/main.css              | 13 +++++++++++++
 components/site/LeftSidebar.vue  |  4 ++--
 components/site/RightSidebar.vue |  4 ++--
 docs/history.md                  |  6 ++++++
 docs/map.md                      |  8 ++++----
 docs/spec.md                     | 12 ++++++------
 docs/update.md                   |  5 +++++
 layouts/default.vue              |  4 ++--
 layouts/post.vue                 |  4 ++--
 package.json                     |  2 +-
 10 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index 2f847c2..cf0717e 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -121,6 +121,19 @@
     color: var(--site-text);
   }
 
+  /**
+   * 사이드바 내부 스크롤 영역 — 스크롤바만 숨기고 스크롤 동작은 유지한다.
+   */
+  .site-sidebar-scroll {
+    overflow-y: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  .site-sidebar-scroll::-webkit-scrollbar {
+    display: none;
+  }
+
   .site-sidebar-section {
     border-bottom: 1px solid var(--site-line);
   }
diff --git a/components/site/LeftSidebar.vue b/components/site/LeftSidebar.vue
index 3d12a1c..f8f57f8 100644
--- a/components/site/LeftSidebar.vue
+++ b/components/site/LeftSidebar.vue
@@ -22,10 +22,10 @@ const { data: navigation } = await useFetch('/api/navigation', {
 
 <template>
   <aside
-    class="left-sidebar site-sidebar hidden min-h-0 max-h-full overflow-hidden border-r border-[var(--site-line)] transition-[width,opacity,border-color] duration-300 ease-out lg:flex lg:h-full lg:flex-col"
+    class="left-sidebar site-sidebar hidden overflow-hidden border-r border-[var(--site-line)] transition-[width,opacity,border-color] duration-300 ease-out lg:sticky lg:top-[57px] lg:z-10 lg:max-h-[calc(100vh-57px)] lg:self-start lg:flex lg:flex-col"
     :class="menuOpen ? 'w-[287px] opacity-100' : 'w-0 opacity-0 border-transparent'"
   >
-    <div class="left-sidebar__scroll min-h-0 flex-1 overflow-y-auto">
+    <div class="left-sidebar__scroll site-sidebar-scroll min-h-0 flex-1">
       <div class="left-sidebar__block site-sidebar-section py-3 pl-4 pr-3 sm:pl-5 xl:pl-0">
         <nav class="left-sidebar__nav" data-nav="menu">
           <ul class="flex flex-col gap-[3px] text-[15px] text-[var(--site-text)]">
diff --git a/components/site/RightSidebar.vue b/components/site/RightSidebar.vue
index dda175d..7c9ac6b 100644
--- a/components/site/RightSidebar.vue
+++ b/components/site/RightSidebar.vue
@@ -19,8 +19,8 @@ const { data: siteSettings } = await useFetch('/api/site-settings', {
 </script>
 
 <template>
-  <aside class="right-sidebar site-sidebar hidden min-h-0 max-h-full w-[287px] overflow-hidden border-l border-[var(--site-line)] lg:flex lg:h-full lg:flex-col">
-    <div class="right-sidebar__scroll min-h-0 flex-1 overflow-y-auto">
+  <aside class="right-sidebar site-sidebar hidden w-[287px] overflow-hidden border-l border-[var(--site-line)] lg:sticky lg:top-[57px] lg:z-10 lg:max-h-[calc(100vh-57px)] lg:self-start lg:flex lg:flex-col">
+    <div class="right-sidebar__scroll site-sidebar-scroll min-h-0 flex-1">
       <div class="right-sidebar__block site-sidebar-section py-5 pl-5 pr-0">
         <div class="right-sidebar__profile flex items-center gap-3">
           <div class="right-sidebar__logo grid h-12 w-12 place-items-center rounded-2xl bg-[var(--site-invert)] text-2xl font-bold text-[var(--site-invert-text)]">
diff --git a/docs/history.md b/docs/history.md
index c4bfda7..60188d6 100644
--- a/docs/history.md
+++ b/docs/history.md
@@ -1,5 +1,11 @@
 # 의사결정 이력
 
+## 2026-05-08 v0.0.50
+
+### 문서 스크롤과 스티키 사이드바
+
+Thred에 가깝게 본문 길이에 따른 세로 스크롤은 `main`의 `overflow-y`가 아니라 **뷰포트(문서) 스크롤**로 통일한다. 스크롤바가 중앙 열에만 생기는 체감을 피하고 브라우저 기본 스크롤 위치와 맞추기 위함이다. 좌·우 사이드는 `position:sticky`와 `max-height: calc(100vh - 헤더)`로 고정감을 유지하고, 사이드 내용이 넘칠 때는 스크롤바를 숨긴 채 내부만 스크롤한다.
+
 ## 2026-05-08 v0.0.49
 
 ### 데스크톱 3단 레이아웃 스크롤 영역 분리
diff --git a/docs/map.md b/docs/map.md
index 15f09f3..a439695 100644
--- a/docs/map.md
+++ b/docs/map.md
@@ -6,8 +6,8 @@
 
 | 파일 | 화면 |
 |------|------|
-| layouts/default.vue | 메인, 목록, 태그 페이지 — 데스크톱에서 그리드 높이 고정·중앙 컬럼 스크롤 |
-| layouts/post.vue | 개별 게시물 — 위와 동일한 3단 스크롤 규칙 |
+| layouts/default.vue | 메인·목록·태그 — 문서 스크롤 + 스티키 사이드, 사이드 내부는 무스크롤바 스크롤 |
+| layouts/post.vue | 개별 게시물 — 동일 |
 | layouts/admin.vue | 관리자 전체, 글 작성/수정 화면의 전체 화면 편집 모드와 문서 스크롤 잠금 |
 | layouts/page.vue | 고정 페이지 전체 화면 |
 
@@ -16,8 +16,8 @@
 | 파일 | 화면 위치 |
 |------|-----------|
 | components/site/SiteHeader.vue | 모든 공개 페이지 상단 |
-| components/site/LeftSidebar.vue | 왼쪽 사이드바, 상단 스크롤 영역·하단 푸터(고정), 네비·태그·테마, 열림/닫힘 애니메이션 |
-| components/site/RightSidebar.vue | 오른쪽 사이드바, 상단 스크롤 영역·하단 카피라이트(고정), Follow·추천 링크 |
+| components/site/LeftSidebar.vue | 왼쪽 사이드바, `sticky`+내부 무스크롤바 스크롤, 하단 푸터 고정 |
+| components/site/RightSidebar.vue | 오른쪽 사이드바, 동일 패턴, 카피라이트 하단 고정 |
 | components/site/MainColumn.vue | 메인 화면 중앙 |
 | components/site/PostCard.vue | 목록의 게시물 카드, 대표 이미지 썸네일, 카드 hover 인터랙션 |
 | components/site/TagHeader.vue | 태그 페이지 헤더 |
diff --git a/docs/spec.md b/docs/spec.md
index 924c40d..0407f47 100644
--- a/docs/spec.md
+++ b/docs/spec.md
@@ -17,12 +17,12 @@
 
 | 요소 | 크기/속성 |
 |------|-----------|
-| Header | 높이 57px, `shrink-0` |
+| Header | 높이 57px, `sticky top-0`, `shrink-0` |
 | Shell | `min-height: 100vh`, `flex` 세로 컬럼 |
-| 그리드(데스크톱 `lg+`) | 높이 `calc(100vh - 57px)`, `grid-template-rows: minmax(0,1fr)`, `overflow: hidden` — 본문 길이와 무관하게 뷰포트 높이에 고정 |
-| Left Aside | 너비 287px, 컬럼 높이 100%, 상단 영역 `flex-1 overflow-y-auto`, 하단 푸터(네비·테마) `shrink-0`로 항상 열 하단에 고정 |
-| Main | 너비 720px, 데스크톱에서만 `overflow-y: auto`로 **중앙 컬럼만** 세로 스크롤 |
-| Right Aside | 너비 287px, Left와 동일하게 상단 스크롤 + 하단 카피라이트 고정 |
+| 그리드(데스크톱 `lg+`) | `items-start`, 본문(중앙) 높이에 맞춰 행이 늘어남 — **문서(`html`/`body`) 스크롤**로 긴 본문 처리(스크롤바는 브라우저 오른쪽) |
+| Left Aside | 너비 287px, `sticky top-[57px]`, `max-h-[calc(100vh-57px)]`, 내부 상단은 `.site-sidebar-scroll`(스크롤바 숨김), 하단 푸터 `shrink-0` |
+| Main | 너비 720px, 별도 `overflow-y` 없음 — 뷰포트와 동일한 문서 스크롤에 포함 |
+| Right Aside | Left와 동일 패턴(스티키·최대 높이·내부 무스크롤바 스크롤·하단 카피라이트) |
 
 ### 메뉴 토글
 
@@ -491,6 +491,6 @@ APP_PORT=43118
 
 ## 버전 관리
 
-- 현재 버전: v0.0.49
+- 현재 버전: v0.0.50
 - 첫 커밋 이후 변경사항을 커밋할 때마다 패치 버전 증가
 - 메이저/마이너 버전은 구조 변경 또는 기능 묶음 단위로 결정
diff --git a/docs/update.md b/docs/update.md
index f53e9e0..1fc3fc8 100644
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,10 @@
 # 업데이트 이력
 
+## v0.0.50
+
+- 데스크톱(`lg+`)에서 긴 본문은 **문서 스크롤**(브라우저 오른쪽 스크롤바)로 처리하고, `main` 단독 스크롤은 제거.
+- 좌·우 사이드바는 `sticky`+`max-h`로 뷰포트에 맞추고, 내부 스크롤은 `.site-sidebar-scroll`로 스크롤바만 숨김(휠·트랙패드 스크롤 유지).
+
 ## v0.0.49
 
 - 데스크톱(`lg+`) 공개 레이아웃을 뷰포트 높이에 고정하고 중앙 컬럼만 세로 스크롤되도록 변경.
diff --git a/layouts/default.vue b/layouts/default.vue
index 4670dac..5020193 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -6,12 +6,12 @@ const { menuOpen } = useMenuState()
   <div class="site-shell public-layout">
     <SiteHeader class="shrink-0" />
     <div
-      class="public-layout__grid mx-auto grid w-full max-w-[1294px] flex-1 grid-cols-1 bg-[var(--site-bg)] px-4 transition-[grid-template-columns,max-width] duration-300 ease-out lg:grid lg:min-h-0 lg:h-[calc(100vh-57px)] lg:max-h-[calc(100vh-57px)] lg:flex-none lg:overflow-hidden lg:px-0 lg:[grid-template-columns:287px_minmax(0,720px)_287px] lg:[grid-template-rows:minmax(0,1fr)]"
+      class="public-layout__grid mx-auto grid w-full max-w-[1294px] flex-1 grid-cols-1 bg-[var(--site-bg)] px-4 transition-[grid-template-columns,max-width] duration-300 ease-out lg:grid lg:items-start lg:px-0 lg:[grid-template-columns:287px_minmax(0,720px)_287px]"
       :class="menuOpen ? '' : 'max-w-[1007px] lg:[grid-template-columns:0_minmax(0,720px)_287px]'"
     >
       <LeftSidebar :menu-open="menuOpen" />
       <main
-        class="site-main min-h-0 w-full overflow-x-hidden lg:h-full lg:max-h-full lg:overflow-y-auto lg:overscroll-y-contain lg:w-[720px]"
+        class="site-main w-full overflow-x-hidden lg:w-[720px]"
         :class="{ 'site-main--menu-closed': !menuOpen }"
       >
         <slot />
diff --git a/layouts/post.vue b/layouts/post.vue
index 3119dd8..e070873 100644
--- a/layouts/post.vue
+++ b/layouts/post.vue
@@ -6,12 +6,12 @@ const { menuOpen } = useMenuState()
   <div class="site-shell post-layout">
     <SiteHeader class="shrink-0" />
     <div
-      class="post-layout__grid mx-auto grid w-full max-w-[1294px] flex-1 grid-cols-1 bg-[var(--site-bg)] px-4 transition-[grid-template-columns,max-width] duration-300 ease-out lg:grid lg:min-h-0 lg:h-[calc(100vh-57px)] lg:max-h-[calc(100vh-57px)] lg:flex-none lg:overflow-hidden lg:px-0 lg:[grid-template-columns:287px_minmax(0,720px)_287px] lg:[grid-template-rows:minmax(0,1fr)]"
+      class="post-layout__grid mx-auto grid w-full max-w-[1294px] flex-1 grid-cols-1 bg-[var(--site-bg)] px-4 transition-[grid-template-columns,max-width] duration-300 ease-out lg:grid lg:items-start lg:px-0 lg:[grid-template-columns:287px_minmax(0,720px)_287px]"
       :class="menuOpen ? '' : 'max-w-[1007px] lg:[grid-template-columns:0_minmax(0,720px)_287px]'"
     >
       <LeftSidebar :menu-open="menuOpen" />
       <main
-        class="site-main min-h-0 w-full overflow-x-hidden lg:h-full lg:max-h-full lg:overflow-y-auto lg:overscroll-y-contain lg:w-[720px]"
+        class="site-main w-full overflow-x-hidden lg:w-[720px]"
         :class="{ 'site-main--menu-closed': !menuOpen }"
       >
         <slot />
diff --git a/package.json b/package.json
index 4cd0592..b16fb40 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sori.studio",
-  "version": "0.0.49",
+  "version": "0.0.50",
   "private": true,
   "type": "module",
   "scripts": {