zenn/sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.0.50 문서 스크롤로 통일하고 사이드바 스티키·무스크롤바

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

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
zenn
2026-05-08 10:04:12 +09:00
parent 4704748582
commit 3cb1290711
10 changed files with 43 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
assets/css/main.css
View File

@@ -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);
}

4
components/site/LeftSidebar.vue
View File

@@ -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)]">

4
components/site/RightSidebar.vue
View File

@@ -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)]">

6
docs/history.md
View File

@@ -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단 레이아웃 스크롤 영역 분리

8
docs/map.md
View File

@@ -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 | 태그 페이지 헤더 |

12
docs/spec.md
View File

@@ -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
- 첫 커밋 이후 변경사항을 커밋할 때마다 패치 버전 증가
- 메이저/마이너 버전은 구조 변경 또는 기능 묶음 단위로 결정

5
docs/update.md
View File

@@ -1,5 +1,10 @@
# 업데이트 이력
## v0.0.50
- 데스크톱(`lg+`)에서 긴 본문은 **문서 스크롤**(브라우저 오른쪽 스크롤바)로 처리하고, `main` 단독 스크롤은 제거.
- 좌·우 사이드바는 `sticky`+`max-h`로 뷰포트에 맞추고, 내부 스크롤은 `.site-sidebar-scroll`로 스크롤바만 숨김(휠·트랙패드 스크롤 유지).
## v0.0.49
- 데스크톱(`lg+`) 공개 레이아웃을 뷰포트 높이에 고정하고 중앙 컬럼만 세로 스크롤되도록 변경.

4
layouts/default.vue
View File

@@ -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 />

4
layouts/post.vue
View File

@@ -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 />

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "sori.studio",
"version": "0.0.49",
"version": "0.0.50",
"private": true,
"type": "module",
"scripts": {