From 519115181f0d419aeb5e393cc9b98b851672a2e5 Mon Sep 17 00:00:00 2001
From: uiuuoq <h45778321@gmail.com>
Date: Thu, 23 Apr 2026 21:48:16 +0900
Subject: [PATCH] =?UTF-8?q?DP-405:=20=EB=A7=88=EC=9D=B4=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EB=9D=BC=EC=9A=B0=ED=8A=B8=20=EC=83=9D=EC=84=B1=20?=
 =?UTF-8?q?=EB=B0=8F=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=8A=A4?=
 =?UTF-8?q?=EC=BC=88=EB=A0=88=ED=86=A4=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/(main)/my-page/page.tsx            |  5 ++
 components/features/my-page/MyPage.tsx | 85 ++++++++++++++++++++++++++
 components/layout/TopNavVariant.tsx    |  2 +
 3 files changed, 92 insertions(+)
 create mode 100644 app/(main)/my-page/page.tsx
 create mode 100644 components/features/my-page/MyPage.tsx

diff --git a/app/(main)/my-page/page.tsx b/app/(main)/my-page/page.tsx
new file mode 100644
index 0000000..093738e
--- /dev/null
+++ b/app/(main)/my-page/page.tsx
@@ -0,0 +1,5 @@
+import MyPage from "@/components/features/my-page/MyPage";
+
+export default function Page() {
+  return <MyPage />;
+}
diff --git a/components/features/my-page/MyPage.tsx b/components/features/my-page/MyPage.tsx
new file mode 100644
index 0000000..b69e580
--- /dev/null
+++ b/components/features/my-page/MyPage.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import Link from "next/link";
+import { ChevronRight } from "lucide-react";
+import { Skeleton } from "@/components/ui/skeleton";
+
+function SectionHeader({ title, href }: { title: string; href?: string }) {
+  return (
+    <div className="mb-4 flex items-center justify-between">
+      <h2 className="text-base font-semibold text-foreground">{title}</h2>
+      {href && (
+        <Link
+          href={href}
+          className="flex items-center gap-0.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
+        >
+          전체 보기
+          <ChevronRight className="h-4 w-4" />
+        </Link>
+      )}
+    </div>
+  );
+}
+
+function SkeletonCards({ count = 4 }: { count?: number }) {
+  return (
+    <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
+      {Array.from({ length: count }).map((_, i) => (
+        <Skeleton key={i} className="h-28 rounded-xl" />
+      ))}
+    </div>
+  );
+}
+
+export default function MyPage() {
+  return (
+    <div className="mx-auto max-w-5xl space-y-10 px-4 py-8 lg:px-8">
+      <div>
+        <h1 className="text-xl font-bold tracking-[-0.01em] text-foreground md:text-2xl">
+          마이페이지
+        </h1>
+        <p className="mt-1 text-sm font-medium text-muted-foreground">
+          내 학습 현황과 추천 콘텐츠를 한눈에 확인해 보세요.
+        </p>
+      </div>
+
+      {/* 1. 로드맵 */}
+      <section>
+        <SectionHeader title="로드맵" />
+        <Skeleton className="h-44 rounded-xl" />
+      </section>
+
+      {/* 2. 스크랩한 글들 */}
+      <section>
+        <SectionHeader title="스크랩한 글들" />
+        <SkeletonCards />
+      </section>
+
+      {/* 3. 틀린 퀴즈들 */}
+      <section>
+        <SectionHeader title="틀린 퀴즈들" />
+        <SkeletonCards />
+      </section>
+
+      {/* 4. 추천 */}
+      <section className="space-y-8">
+        <SectionHeader title="추천" />
+
+        <div>
+          <SectionHeader title="홈 글" />
+          <SkeletonCards />
+        </div>
+
+        <div>
+          <SectionHeader title="유튜브" />
+          <SkeletonCards />
+        </div>
+
+        <div>
+          <SectionHeader title="서적" />
+          <SkeletonCards />
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/components/layout/TopNavVariant.tsx b/components/layout/TopNavVariant.tsx
index 1765191..ce7ee1c 100644
--- a/components/layout/TopNavVariant.tsx
+++ b/components/layout/TopNavVariant.tsx
@@ -13,6 +13,7 @@ import {
   Flame,
   BookOpen,
   Briefcase,
+  LayoutDashboard,
   type LucideIcon,
 } from "lucide-react";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
@@ -57,6 +58,7 @@ const ALL_NAV_ITEMS: { href: string; label: string; icon: LucideIcon }[] = [
   { href: "/trends", label: "트렌드", icon: Flame },
   { href: "/history", label: "히스토리", icon: BookOpen },
   { href: "/report", label: "리포트", icon: TrendingUp },
+  { href: "/my-page", label: "마이페이지", icon: LayoutDashboard },
 ];
 
 const NAV_ITEMS = ALL_NAV_ITEMS.filter(