Skip to content

Commit 65b7d7e

Browse files
lazy-dinosaurlazy-dinosaur
committed
fix: pass onNodeClick prop to TreeView
1 parent 7cf205a commit 65b7d7e

File tree

1 file changed

+104
-105
lines changed

1 file changed

+104
-105
lines changed

‎components/left-sidebar.tsx

Lines changed: 104 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -10,115 +10,114 @@ import { usePathname } from "next/navigation";
1010
import Link from "next/link";
1111

1212
interface LeftSidebarProps {
13-
className?: string;
13+
className?: string;
1414
}
1515

1616
export default function LeftSidebar({ className }: LeftSidebarProps) {
17-
const { posts } = usePosts();
18-
const pathname = usePathname();
19-
const folderStructure = buildFolderStructure(posts);
17+
const { posts } = usePosts();
18+
const pathname = usePathname();
19+
const folderStructure = buildFolderStructure(posts);
2020

21-
// URL이 변경될 때마다 컴포넌트를 강제로 리렌더링하기 위한 key 생성
22-
const sidebarKey = `left-sidebar-${pathname}`;
21+
// URL이 변경될 때마다 컴포넌트를 강제로 리렌더링하기 위한 key 생성
22+
const sidebarKey = `left-sidebar-${pathname}`;
2323

24-
return (
25-
<>
26-
{/* 모바일 버전 */}
24+
return (
25+
<>
26+
{/* 모바일 버전 */}
2727

28-
{/* 데스크톱 버전 */}
29-
<motion.aside
30-
key={sidebarKey}
31-
className={cn(
32-
"hidden xl:block h-[calc(100vh-4rem)] sticky top-16 mt-52", // 높이와 sticky 설정 수정
33-
className,
34-
)}
35-
initial={{ opacity: 0, x: -20 }}
36-
animate={{ opacity: 1, x: 0 }}
37-
transition={{
38-
duration: 0.15,
39-
ease: "easeOut",
40-
delay: 0.05,
41-
}}
42-
>
43-
{/* ScrollArea에 명확한 높이 지정 */}
44-
<ScrollArea className="h-full pb-8">
45-
{" "}
46-
{/* 하단에 약간의 패딩 추가 */}
47-
{/* 네비게이션 메뉴 (데스크톱) */}
48-
<SidebarSection title="메뉴">
49-
<motion.div
50-
initial={{ opacity: 0 }}
51-
animate={{ opacity: 1 }}
52-
transition={{ delay: 0.05, duration: 0.1 }}
53-
>
54-
<div className="flex flex-col space-y-2 px-1 py-1">
55-
<Link
56-
href="/"
57-
className={`flex items-center px-3 py-2 rounded-md transition-colors ${
58-
pathname === "/"
59-
? "bg-primary/10 text-primary font-medium"
60-
: "hover:bg-accent"
61-
}`}
62-
>
63-
<svg
64-
xmlns="http://www.w3.org/2000/svg"
65-
className="w-5 h-5 mr-2"
66-
viewBox="0 0 24 24"
67-
fill="none"
68-
stroke="currentColor"
69-
strokeWidth="2"
70-
strokeLinecap="round"
71-
strokeLinejoin="round"
72-
>
73-
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
74-
<polyline points="9 22 9 12 15 12 15 22"></polyline>
75-
</svg>
76-
홈
77-
</Link>
78-
<Link
79-
href="/projects"
80-
className={`flex items-center px-3 py-2 rounded-md transition-colors ${
81-
pathname === "/projects"
82-
? "bg-primary/10 text-primary font-medium"
83-
: "hover:bg-accent"
84-
}`}
85-
>
86-
<svg
87-
xmlns="http://www.w3.org/2000/svg"
88-
className="w-5 h-5 mr-2"
89-
viewBox="0 0 24 24"
90-
fill="none"
91-
stroke="currentColor"
92-
strokeWidth="2"
93-
strokeLinecap="round"
94-
strokeLinejoin="round"
95-
>
96-
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
97-
<polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline>
98-
<polyline points="7.5 19.79 7.5 14.6 3 12"></polyline>
99-
<polyline points="21 12 16.5 14.6 16.5 19.79"></polyline>
100-
<polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
101-
<line x1="12" y1="22.08" x2="12" y2="12"></line>
102-
</svg>
103-
포트폴리오
104-
</Link>
105-
</div>
106-
</motion.div>
107-
</SidebarSection>
108-
<SidebarSection title="카테고리">
109-
<motion.div
110-
initial={{ opacity: 0 }}
111-
animate={{ opacity: 1 }}
112-
transition={{ delay: 0.1, duration: 0.1 }}
113-
>
114-
<TreeView
115-
key={`desktop-tree-${pathname}`}
116-
data={folderStructure}
117-
/>
118-
</motion.div>
119-
</SidebarSection>
120-
</ScrollArea>
121-
</motion.aside>
122-
</>
123-
);
28+
{/* 데스크톱 버전 */}
29+
<motion.aside
30+
key={sidebarKey}
31+
className={cn(
32+
"hidden xl:block h-[calc(100vh-4rem)] sticky top-16 mt-52", // 높이와 sticky 설정 수정
33+
className,
34+
)}
35+
initial={{ opacity: 0, x: -20 }}
36+
animate={{ opacity: 1, x: 0 }}
37+
transition={{
38+
duration: 0.15,
39+
ease: "easeOut",
40+
delay: 0.05,
41+
}}
42+
>
43+
{/* ScrollArea에 명확한 높이 지정 */}
44+
<ScrollArea className="h-full pb-8">
45+
{" "}
46+
{/* 하단에 약간의 패딩 추가 */}
47+
{/* 네비게이션 메뉴 (데스크톱) */}
48+
<SidebarSection title="메뉴">
49+
<motion.div
50+
initial={{ opacity: 0 }}
51+
animate={{ opacity: 1 }}
52+
transition={{ delay: 0.05, duration: 0.1 }}
53+
>
54+
<div className="flex flex-col space-y-2 px-1 py-1">
55+
<Link
56+
href="/"
57+
className={`flex items-center px-3 py-2 rounded-md transition-colors ${pathname === "/"
58+
? "bg-primary/10 text-primary font-medium"
59+
: "hover:bg-accent"
60+
}`}
61+
>
62+
<svg
63+
xmlns="http://www.w3.org/2000/svg"
64+
className="w-5 h-5 mr-2"
65+
viewBox="0 0 24 24"
66+
fill="none"
67+
stroke="currentColor"
68+
strokeWidth="2"
69+
strokeLinecap="round"
70+
strokeLinejoin="round"
71+
>
72+
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
73+
<polyline points="9 22 9 12 15 12 15 22"></polyline>
74+
</svg>
75+
홈
76+
</Link>
77+
<Link
78+
href="/projects"
79+
className={`flex items-center px-3 py-2 rounded-md transition-colors ${pathname === "/projects"
80+
? "bg-primary/10 text-primary font-medium"
81+
: "hover:bg-accent"
82+
}`}
83+
>
84+
<svg
85+
xmlns="http://www.w3.org/2000/svg"
86+
className="w-5 h-5 mr-2"
87+
viewBox="0 0 24 24"
88+
fill="none"
89+
stroke="currentColor"
90+
strokeWidth="2"
91+
strokeLinecap="round"
92+
strokeLinejoin="round"
93+
>
94+
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
95+
<polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline>
96+
<polyline points="7.5 19.79 7.5 14.6 3 12"></polyline>
97+
<polyline points="21 12 16.5 14.6 16.5 19.79"></polyline>
98+
<polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
99+
<line x1="12" y1="22.08" x2="12" y2="12"></line>
100+
</svg>
101+
포트폴리오
102+
</Link>
103+
</div>
104+
</motion.div>
105+
</SidebarSection>
106+
<SidebarSection title="카테고리">
107+
<motion.div
108+
initial={{ opacity: 0 }}
109+
animate={{ opacity: 1 }}
110+
transition={{ delay: 0.1, duration: 0.1 }}
111+
>
112+
<TreeView
113+
key={`desktop-tree-${pathname}`}
114+
data={folderStructure}
115+
onNodeClick={() => { }}
116+
/>
117+
</motion.div>
118+
</SidebarSection>
119+
</ScrollArea>
120+
</motion.aside>
121+
</>
122+
);
124123
}

0 commit comments

Comments
 (0)