fix: adjust sidebar height and scrolling behavior

Author: lazy-dinosaur

README.md

@@ -545,7 +545,14 @@ series: 나의 맞춤 블로그 만들기
 
 - [ ] contents layer 로 대체
 - [ ] 소개 패이지
-- [ ] 포트폴리오 페이지
+- [x] 포트폴리오 페이지
 - [ ] 댓글 기능
 - [ ] 옵시디언 스타일의 콜아웃 적용
 - [ ] 비디오 임베드
+- [ ] D3.js를 홀용한 그래프 뷰
+- [ ] 연결된 관련 노트 리스트 추가
+
+## 고칠것
+
+- 사이드바 스크롤
+  카테고리의 길이가 너무 늘어나면 전체 페이지 하단에 도달할때까지 스크롤이 안됨 카테고리의 최대 높이를 정하고 스크롤로 표현해야함

app/(blog)/layout.tsx

@@ -2,17 +2,18 @@ import LeftSidebar from "@/components/left-sidebar";
 import RightSidebar from "@/components/right-sidebar";
 
 export default function BlogLayout({
-  children,
+	children,
 }: {
-  children: React.ReactNode;
+	children: React.ReactNode;
 }) {
-  return (
-    <>
-      <LeftSidebar className="w-60 xl:w-64 2xl:w-72 lg:shrink-0 lg:sticky h-full lg:top-16 mb-4 lg:mb-0 mt-52" />
-      <div className="xl:max-w-5xl mx-auto rounded-lg w-full overflow-x-hidden py-6 p-3 2xl:px-6 h-full overflow-y-hidden">
-        {children}
-      </div>
-      <RightSidebar className="w-60 xl:w-64 2xl:w-72 shrink-0 hidden xl:block sticky top-16 h-full mt-52" />
-    </>
-  );
+	return (
+		<>
+			<LeftSidebar className="w-60 xl:w-64 2xl:w-72 lg:shrink-0" />
+			{/* 높이 관련 클래스 제거 */}
+			<div className="xl:max-w-5xl mx-auto rounded-lg w-full overflow-x-hidden py-6 p-3 2xl:px-6">
+				{children}
+			</div>
+			<RightSidebar className="w-60 xl:w-64 2xl:w-72 lg:shrink-0" />
+		</>
+	);
 }

components/left-sidebar.tsx

@@ -28,7 +28,10 @@ export default function LeftSidebar({ className }: LeftSidebarProps) {
 			{/* 데스크톱 버전 */}
 			<motion.aside
 				key={sidebarKey}
-				className={cn("hidden xl:block", className)}
+				className={cn(
+					"hidden xl:block h-[calc(100vh-4rem)] sticky top-16 mt-52", // 높이와 sticky 설정 수정
+					className,
+				)}
 				initial={{ opacity: 0, x: -20 }}
 				animate={{ opacity: 1, x: 0 }}
 				transition={{
@@ -37,7 +40,10 @@ export default function LeftSidebar({ className }: LeftSidebarProps) {
 					delay: 0.05,
 				}}
 			>
-				<ScrollArea className="h-full">
+				{/* ScrollArea에 명확한 높이 지정 */}
+				<ScrollArea className="h-full pb-8">
+					{" "}
+					{/* 하단에 약간의 패딩 추가 */}
 					{/* 네비게이션 메뉴 (데스크톱) */}
 					<SidebarSection title="메뉴">
 						<motion.div
@@ -99,7 +105,6 @@ export default function LeftSidebar({ className }: LeftSidebarProps) {
 							</div>
 						</motion.div>
 					</SidebarSection>
-
 					<SidebarSection title="카테고리">
 						<motion.div
 							initial={{ opacity: 0 }}