Skip to content

Commit b1f26d9

Browse files
lazy-dinosaurlazy-dinosaur
committed
Fix: 포트폴리오 페이지에서 사이드바 버튼 동작 안하던 문제 수정
1 parent 49bc43e commit b1f26d9

File tree

4 files changed

+133
-119
lines changed

4 files changed

+133
-119
lines changed

‎app/layout.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { getPosts, getPostsMetadata } from "@/lib/posts";
88
import Header from "../components/header";
99
import { PostsProvider } from "@/contexts/posts-context";
1010
import Footer from "@/components/footer";
11+
import LeftSidebarSheet from "@/components/left-sidebar-sheet";
1112

1213
const geistSans = Geist({
1314
variable: "--font-geist-sans",
@@ -54,7 +55,7 @@ export default async function RootLayout({
5455
// 메타데이터와 기본 포스트 콘텐츠를 병렬로 가져옴
5556
const [postsMetadata, posts] = await Promise.all([
5657
getPostsMetadata(),
57-
getPosts()
58+
getPosts(),
5859
]);
5960

6061
return (
@@ -72,6 +73,7 @@ export default async function RootLayout({
7273
<div className="min-h-screen flex flex-col motion-reduce">
7374
<Header />
7475
<main className="flex flex-col xl:flex-row mt-12 sm:mt-14 md:mt-16 2xl:container 2xl:mx-auto md:px-5">
76+
<LeftSidebarSheet />
7577
{children}
7678
</main>
7779
<Footer />

‎app/projects/page.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ export default async function Projects() {
1212
// 서버 컴포넌트에서 데이터를 가져와서 클라이언트 컴포넌트에 전달
1313
const [postsMetadata, posts] = await Promise.all([
1414
getPostsMetadata(),
15-
getPosts()
15+
getPosts(),
1616
]);
17-
17+
1818
return (
1919
<PostsProvider posts={posts} postsMetadata={postsMetadata}>
2020
<ProjectsPage />

‎components/left-sidebar-sheet.tsx

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
"use client";
2+
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
3+
import { DialogTitle, DialogDescription } from "@radix-ui/react-dialog";
4+
import { ScrollArea } from "@/components/ui/scroll-area";
5+
import { Button } from "@/components/ui/button";
6+
import { Menu } from "lucide-react";
7+
import { TreeView } from "./tree-view";
8+
import { useState } from "react";
9+
import Link from "next/link";
10+
import { usePathname } from "next/navigation";
11+
import { usePosts } from "@/contexts/posts-context";
12+
import { buildFolderStructure } from "@/lib/utils";
13+
14+
export default function LeftSidebarSheet() {
15+
const { posts } = usePosts();
16+
const [open, setOpen] = useState(false);
17+
const pathname = usePathname();
18+
19+
const folderStructure = buildFolderStructure(posts);
20+
21+
return (
22+
<Sheet open={open} onOpenChange={setOpen}>
23+
<DialogTitle hidden={true}></DialogTitle>
24+
<DialogDescription hidden={true}></DialogDescription>
25+
<SheetTrigger asChild className="hidden">
26+
<Button id="sidebar-trigger" variant="outline" size="icon">
27+
<Menu className="h-4 w-4" />
28+
</Button>
29+
</SheetTrigger>
30+
<SheetContent
31+
side="left"
32+
className="w-[280px] sm:w-[320px] md:w-[360px] p-0 pt-10 sm:pt-12"
33+
onCloseAutoFocus={(e) => e.preventDefault()}
34+
>
35+
<div className="relative h-full">
36+
<ScrollArea className="h-full p-3 sm:p-4">
37+
{/* 네비게이션 링크 추가 */}
38+
<div className="mb-6 px-1 sm:px-2">
39+
<h2 className="text-lg font-semibold mb-3">메뉴</h2>
40+
<div className="flex flex-col space-y-2">
41+
<Link
42+
href="/"
43+
className={`flex items-center px-3 py-2 rounded-md transition-colors ${
44+
pathname === "/"
45+
? "bg-primary/10 text-primary font-medium"
46+
: "hover:bg-accent"
47+
}`}
48+
onClick={() => setOpen(false)}
49+
>
50+
<svg
51+
xmlns="http://www.w3.org/2000/svg"
52+
className="w-5 h-5 mr-2"
53+
viewBox="0 0 24 24"
54+
fill="none"
55+
stroke="currentColor"
56+
strokeWidth="2"
57+
strokeLinecap="round"
58+
strokeLinejoin="round"
59+
>
60+
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
61+
<polyline points="9 22 9 12 15 12 15 22"></polyline>
62+
</svg>
63+
홈
64+
</Link>
65+
<Link
66+
href="/projects"
67+
className={`flex items-center px-3 py-2 rounded-md transition-colors ${
68+
pathname === "/projects"
69+
? "bg-primary/10 text-primary font-medium"
70+
: "hover:bg-accent"
71+
}`}
72+
onClick={() => setOpen(false)}
73+
>
74+
<svg
75+
xmlns="http://www.w3.org/2000/svg"
76+
className="w-5 h-5 mr-2"
77+
viewBox="0 0 24 24"
78+
fill="none"
79+
stroke="currentColor"
80+
strokeWidth="2"
81+
strokeLinecap="round"
82+
strokeLinejoin="round"
83+
>
84+
<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>
85+
<polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline>
86+
<polyline points="7.5 19.79 7.5 14.6 3 12"></polyline>
87+
<polyline points="21 12 16.5 14.6 16.5 19.79"></polyline>
88+
<polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
89+
<line x1="12" y1="22.08" x2="12" y2="12"></line>
90+
</svg>
91+
포트폴리오
92+
</Link>
93+
</div>
94+
</div>
95+
96+
<h2 className="text-lg font-semibold mb-3 sm:mb-4 px-1 sm:px-2">
97+
카테고리
98+
</h2>
99+
<TreeView key={`mobile-tree-${pathname}`} data={folderStructure} />
100+
</ScrollArea>
101+
</div>
102+
</SheetContent>
103+
</Sheet>
104+
);
105+
}

‎components/left-sidebar.tsx

Lines changed: 23 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
"use client";
2-
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
32
import { ScrollArea } from "@/components/ui/scroll-area";
4-
import { Button } from "@/components/ui/button";
5-
import { Menu } from "lucide-react";
63
import { TreeView } from "@/components/tree-view";
7-
import { useState } from "react";
8-
import { DialogTitle, DialogDescription } from "@radix-ui/react-dialog";
94
import { usePosts } from "@/contexts/posts-context";
105
import { buildFolderStructure } from "@/lib/utils";
116
import { cn } from "@/lib/utils";
@@ -19,7 +14,6 @@ interface LeftSidebarProps {
1914
}
2015

2116
export default function LeftSidebar({ className }: LeftSidebarProps) {
22-
const [open, setOpen] = useState(false);
2317
const { posts } = usePosts();
2418
const pathname = usePathname();
2519
const folderStructure = buildFolderStructure(posts);
@@ -30,93 +24,6 @@ export default function LeftSidebar({ className }: LeftSidebarProps) {
3024
return (
3125
<>
3226
{/* 모바일 버전 */}
33-
<Sheet open={open} onOpenChange={setOpen}>
34-
<DialogTitle hidden={true}></DialogTitle>
35-
<DialogDescription hidden={true}></DialogDescription>
36-
<SheetTrigger asChild className="hidden">
37-
<Button id="sidebar-trigger" variant="outline" size="icon">
38-
<Menu className="h-4 w-4" />
39-
</Button>
40-
</SheetTrigger>
41-
<SheetContent
42-
side="left"
43-
className="w-[280px] sm:w-[320px] md:w-[360px] p-0 pt-10 sm:pt-12"
44-
onCloseAutoFocus={(e) => e.preventDefault()}
45-
>
46-
<div className="relative h-full">
47-
<ScrollArea className="h-full p-3 sm:p-4">
48-
{/* 네비게이션 링크 추가 */}
49-
<div className="mb-6 px-1 sm:px-2">
50-
<h2 className="text-lg font-semibold mb-3">
51-
메뉴
52-
</h2>
53-
<div className="flex flex-col space-y-2">
54-
<Link
55-
href="/"
56-
className={`flex items-center px-3 py-2 rounded-md transition-colors ${
57-
pathname === "/"
58-
? "bg-primary/10 text-primary font-medium"
59-
: "hover:bg-accent"
60-
}`}
61-
onClick={() => setOpen(false)}
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-
onClick={() => setOpen(false)}
86-
>
87-
<svg
88-
xmlns="http://www.w3.org/2000/svg"
89-
className="w-5 h-5 mr-2"
90-
viewBox="0 0 24 24"
91-
fill="none"
92-
stroke="currentColor"
93-
strokeWidth="2"
94-
strokeLinecap="round"
95-
strokeLinejoin="round"
96-
>
97-
<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>
98-
<polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline>
99-
<polyline points="7.5 19.79 7.5 14.6 3 12"></polyline>
100-
<polyline points="21 12 16.5 14.6 16.5 19.79"></polyline>
101-
<polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
102-
<line x1="12" y1="22.08" x2="12" y2="12"></line>
103-
</svg>
104-
포트폴리오
105-
</Link>
106-
</div>
107-
</div>
108-
109-
<h2 className="text-lg font-semibold mb-3 sm:mb-4 px-1 sm:px-2">
110-
카테고리
111-
</h2>
112-
<TreeView
113-
key={`mobile-tree-${pathname}`}
114-
data={folderStructure}
115-
/>
116-
</ScrollArea>
117-
</div>
118-
</SheetContent>
119-
</Sheet>
12027

12128
{/* 데스크톱 버전 */}
12229
<motion.aside
@@ -139,45 +46,45 @@ export default function LeftSidebar({ className }: LeftSidebarProps) {
13946
transition={{ delay: 0.05, duration: 0.1 }}
14047
>
14148
<div className="flex flex-col space-y-2 px-1 py-1">
142-
<Link
49+
<Link
14350
href="/"
14451
className={`flex items-center px-3 py-2 rounded-md transition-colors ${
145-
pathname === "/"
146-
? "bg-primary/10 text-primary font-medium"
52+
pathname === "/"
53+
? "bg-primary/10 text-primary font-medium"
14754
: "hover:bg-accent"
14855
}`}
14956
>
150-
<svg
151-
xmlns="http://www.w3.org/2000/svg"
152-
className="w-5 h-5 mr-2"
153-
viewBox="0 0 24 24"
154-
fill="none"
155-
stroke="currentColor"
156-
strokeWidth="2"
157-
strokeLinecap="round"
57+
<svg
58+
xmlns="http://www.w3.org/2000/svg"
59+
className="w-5 h-5 mr-2"
60+
viewBox="0 0 24 24"
61+
fill="none"
62+
stroke="currentColor"
63+
strokeWidth="2"
64+
strokeLinecap="round"
15865
strokeLinejoin="round"
15966
>
16067
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
16168
<polyline points="9 22 9 12 15 12 15 22"></polyline>
16269
</svg>
16370
홈
16471
</Link>
165-
<Link
72+
<Link
16673
href="/projects"
16774
className={`flex items-center px-3 py-2 rounded-md transition-colors ${
168-
pathname === "/projects"
169-
? "bg-primary/10 text-primary font-medium"
75+
pathname === "/projects"
76+
? "bg-primary/10 text-primary font-medium"
17077
: "hover:bg-accent"
17178
}`}
17279
>
173-
<svg
174-
xmlns="http://www.w3.org/2000/svg"
175-
className="w-5 h-5 mr-2"
176-
viewBox="0 0 24 24"
177-
fill="none"
178-
stroke="currentColor"
179-
strokeWidth="2"
180-
strokeLinecap="round"
80+
<svg
81+
xmlns="http://www.w3.org/2000/svg"
82+
className="w-5 h-5 mr-2"
83+
viewBox="0 0 24 24"
84+
fill="none"
85+
stroke="currentColor"
86+
strokeWidth="2"
87+
strokeLinecap="round"
18188
strokeLinejoin="round"
18289
>
18390
<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>
@@ -192,7 +99,7 @@ export default function LeftSidebar({ className }: LeftSidebarProps) {
19299
</div>
193100
</motion.div>
194101
</SidebarSection>
195-
102+
196103
<SidebarSection title="카테고리">
197104
<motion.div
198105
initial={{ opacity: 0 }}

0 commit comments

Comments
 (0)