This commit is contained in:
@@ -368,8 +368,11 @@ function SidebarContent() {
|
|||||||
{isOpen ? <X size={20} /> : <Menu size={20} />}
|
{isOpen ? <X size={20} /> : <Menu size={20} />}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<aside className={clsx('fixed top-0 left-0 z-40 h-screen bg-white border-r border-gray-100 transition-all duration-300 ease-in-out overflow-y-auto scrollbar-hide', isOpen ? 'w-72 translate-x-0' : 'w-0 -translate-x-full md:w-20 md:translate-x-0', 'flex flex-col')}>
|
{/* 🛠️ [수정] overflow-y-auto 제거, overflow-hidden 추가 */}
|
||||||
<div className={clsx('p-6 text-center transition-opacity duration-200 relative group', !isOpen && 'md:opacity-0 md:hidden')}>
|
<aside className={clsx('fixed top-0 left-0 z-40 h-screen bg-white border-r border-gray-100 transition-all duration-300 ease-in-out flex flex-col overflow-hidden', isOpen ? 'w-72 translate-x-0' : 'w-0 -translate-x-full md:w-20 md:translate-x-0')}>
|
||||||
|
|
||||||
|
{/* 🛠️ [수정] 고정 영역: 프로필 (shrink-0 추가) */}
|
||||||
|
<div className={clsx('p-6 text-center transition-opacity duration-200 relative group shrink-0', !isOpen && 'md:opacity-0 md:hidden')}>
|
||||||
{isAdmin && (
|
{isAdmin && (
|
||||||
<button onClick={handleEditClick} className="absolute top-4 right-4 p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-full transition-all opacity-0 group-hover:opacity-100 z-10" title="프로필 수정">
|
<button onClick={handleEditClick} className="absolute top-4 right-4 p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-full transition-all opacity-0 group-hover:opacity-100 z-10" title="프로필 수정">
|
||||||
<Edit3 size={16} />
|
<Edit3 size={16} />
|
||||||
@@ -402,18 +405,20 @@ function SidebarContent() {
|
|||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<nav className="flex-1 px-4 py-2 flex flex-col">
|
{/* 🛠️ [수정] min-h-0 추가하여 내부 스크롤 동작 보장 */}
|
||||||
<div className={clsx('flex flex-col items-center gap-4 mt-4', isOpen && 'hidden')}><Folder size={24} className="text-gray-400" /></div>
|
<nav className="flex-1 px-4 py-2 flex flex-col min-h-0">
|
||||||
|
<div className={clsx('flex flex-col items-center gap-4 mt-4 shrink-0', isOpen && 'hidden')}><Folder size={24} className="text-gray-400" /></div>
|
||||||
|
|
||||||
<div className={clsx('space-y-1 flex-1', !isOpen && 'md:hidden')}>
|
<div className={clsx('flex flex-col h-full', !isOpen && 'md:hidden')}>
|
||||||
|
|
||||||
{/* 🆕 전체 검색바 (Archives 위) - 수정됨: 그림자 제거 */}
|
{/* 🛠️ [수정] 상단 고정 네비게이션 영역 (shrink-0) */}
|
||||||
|
<div className="shrink-0 space-y-1">
|
||||||
|
{/* 🆕 전체 검색바 (Archives 위) */}
|
||||||
<div className="px-1 mb-6 mt-2">
|
<div className="px-1 mb-6 mt-2">
|
||||||
<PostSearch
|
<PostSearch
|
||||||
onSearch={handleSearch}
|
onSearch={handleSearch}
|
||||||
placeholder="검색..."
|
placeholder="검색..."
|
||||||
initialKeyword={keyword}
|
initialKeyword={keyword}
|
||||||
// className="shadow-sm" // 🎨 제거됨: 배경 박스처럼 보이는 문제 해결
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -436,7 +441,7 @@ function SidebarContent() {
|
|||||||
{/* 구분선 */}
|
{/* 구분선 */}
|
||||||
<div className="border-t border-gray-100 mb-4" />
|
<div className="border-t border-gray-100 mb-4" />
|
||||||
|
|
||||||
{/* 1. 카테고리 섹션 */}
|
{/* 1. 카테고리 섹션 헤더 (고정) */}
|
||||||
<div className="flex items-center justify-between px-4 mb-3 h-8">
|
<div className="flex items-center justify-between px-4 mb-3 h-8">
|
||||||
<p className="text-xs font-bold text-gray-400 uppercase tracking-wider">Categories</p>
|
<p className="text-xs font-bold text-gray-400 uppercase tracking-wider">Categories</p>
|
||||||
{isAdmin && (
|
{isAdmin && (
|
||||||
@@ -452,7 +457,10 @@ function SidebarContent() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 🛠️ [수정] 스크롤 가능한 카테고리 리스트 영역 (flex-1, overflow-y-auto) */}
|
||||||
|
<div className="flex-1 overflow-y-auto scrollbar-hide -mx-2 px-2">
|
||||||
{!categories && <div className="space-y-2 px-4">{[1, 2, 3].map((i) => <div key={i} className="h-8 bg-gray-100 rounded animate-pulse" />)}</div>}
|
{!categories && <div className="space-y-2 px-4">{[1, 2, 3].map((i) => <div key={i} className="h-8 bg-gray-100 rounded animate-pulse" />)}</div>}
|
||||||
|
|
||||||
<div
|
<div
|
||||||
@@ -484,14 +492,17 @@ function SidebarContent() {
|
|||||||
{isCategoryEditMode && categories?.length === 0 && <div className="text-center text-xs text-gray-400 py-4">+ 버튼을 눌러 카테고리를 추가하세요.</div>}
|
{isCategoryEditMode && categories?.length === 0 && <div className="text-center text-xs text-gray-400 py-4">+ 버튼을 눌러 카테고리를 추가하세요.</div>}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div className={clsx('p-6 border-t border-gray-100 bg-white', !isOpen && 'hidden')}>
|
{/* 🛠️ [수정] 고정 영역: 푸터 (shrink-0 추가) */}
|
||||||
|
<div className={clsx('p-6 border-t border-gray-100 bg-white shrink-0', !isOpen && 'hidden')}>
|
||||||
<div className="flex justify-center gap-3">
|
<div className="flex justify-center gap-3">
|
||||||
<a href={displayProfile.githubUrl || '#'} target="_blank" rel="noreferrer" className="p-2.5 text-gray-500 bg-gray-50 rounded-full hover:bg-gray-800 hover:text-white transition-all shadow-sm"><Github size={18} /></a>
|
<a href={displayProfile.githubUrl || '#'} target="_blank" rel="noreferrer" className="p-2.5 text-gray-500 bg-gray-50 rounded-full hover:bg-gray-800 hover:text-white transition-all shadow-sm"><Github size={18} /></a>
|
||||||
<a href={`mailto:${displayProfile.email}`} className="p-2.5 text-gray-500 bg-gray-50 rounded-full hover:bg-blue-500 hover:text-white transition-all shadow-sm"><Mail size={18} /></a>
|
<a href={`mailto:${displayProfile.email}`} className="p-2.5 text-gray-500 bg-gray-50 rounded-full hover:bg-blue-500 hover:text-white transition-all shadow-sm"><Mail size={18} /></a>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-center text-[10px] text-gray-300 mt-4 font-light">© 2024 {displayProfile.name}. All rights reserved.</p>
|
<p className="text-center text-[10px] text-gray-300 mt-4 font-light">© {new Date().getFullYear()} {displayProfile.name}. All rights reserved.</p>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user