+
+
+ {cover ? (
+
+ ) : (
+
+
+
+ )}
+
+
+
+
+ {title}
+
+
+ {authors.join(", ")}
+
+
+ {publisher}
+ ·
+ {year}
+
+
+
+
+ );
+}
diff --git a/components/features/my-page/recommend/RecommendedHomePostCard.tsx b/components/features/my-page/recommend/RecommendedHomePostCard.tsx
new file mode 100644
index 0000000..3294510
--- /dev/null
+++ b/components/features/my-page/recommend/RecommendedHomePostCard.tsx
@@ -0,0 +1,48 @@
+import Link from "next/link";
+import Image from "next/image";
+import { FileText } from "lucide-react";
+import { SourceLogo } from "@/components/features/home/SourceLogo";
+import { formatDate } from "@/lib/utils";
+import type { MyPageRecommendHomePost } from "@/types/myPage";
+
+export function RecommendedHomePostCard({
+ post,
+}: {
+ post: MyPageRecommendHomePost;
+}) {
+ const { contentId, title, sourceName, thumbnail, date } = post;
+
+ return (
+
+
+
+ {thumbnail ? (
+
+ ) : (
+
+
+
+ )}
+
+
+
+
+
+ {sourceName}
+
+
+ {title}
+
+
+ {formatDate(date)}
+
+
+
+
+ );
+}
diff --git a/components/features/my-page/recommend/RecommendedSection.tsx b/components/features/my-page/recommend/RecommendedSection.tsx
new file mode 100644
index 0000000..02f1db3
--- /dev/null
+++ b/components/features/my-page/recommend/RecommendedSection.tsx
@@ -0,0 +1,147 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+import { Skeleton } from "@/components/ui/skeleton";
+import { RecommendedHomePostCard } from "./RecommendedHomePostCard";
+import { RecommendedVideoCard } from "./RecommendedVideoCard";
+import { RecommendedBookCard } from "./RecommendedBookCard";
+import { fetchRecommendHomePosts } from "@/lib/mock/my-page-recommend-home";
+import { fetchRecommendVideos } from "@/lib/mock/my-page-recommend-video";
+import { fetchRecommendBooks } from "@/lib/mock/my-page-recommend-book";
+import type {
+ MyPageRecommendHomePost,
+ MyPageRecommendVideo,
+ MyPageRecommendBook,
+} from "@/types/myPage";
+
+function SubSectionHeader({
+ title,
+ href,
+}: {
+ title: string;
+ href: string;
+}) {
+ return (
+
+
{title}
+
+
+ 전체 보기
+
+
+ );
+}
+
+function CardSkeleton() {
+ return (
+
+ );
+}
+
+function BookCardSkeleton() {
+ return (
+
+ );
+}
+
+export function RecommendedSection() {
+ const [homePosts, setHomePosts] = useState
([]);
+ const [videos, setVideos] = useState([]);
+ const [books, setBooks] = useState([]);
+ const [isLoading, setIsLoading] = useState(true);
+
+ useEffect(() => {
+ Promise.all([
+ fetchRecommendHomePosts(4),
+ fetchRecommendVideos(4),
+ fetchRecommendBooks(4),
+ ]).then(([posts, vids, bks]) => {
+ setHomePosts(posts);
+ setVideos(vids);
+ setBooks(bks);
+ setIsLoading(false);
+ });
+ }, []);
+
+ return (
+
+ 추천
+
+
+
+ {isLoading ? (
+
+ {Array.from({ length: 4 }).map((_, i) => (
+
+ ))}
+
+ ) : homePosts.length === 0 ? (
+
추천 글이 없습니다.
+ ) : (
+
+ {homePosts.map((post) => (
+
+ ))}
+
+ )}
+
+
+ {isLoading ? (
+
+ {Array.from({ length: 4 }).map((_, i) => (
+
+ ))}
+
+ ) : videos.length === 0 ? (
+
추천 영상이 없습니다.
+ ) : (
+
+ {videos.map((video) => (
+
+ ))}
+
+ )}
+
+
+ {isLoading ? (
+
+ {Array.from({ length: 4 }).map((_, i) => (
+
+ ))}
+
+ ) : books.length === 0 ? (
+
추천 서적이 없습니다.
+ ) : (
+
+ {books.map((book) => (
+
+ ))}
+
+ )}
+
+
+ {thumbnail ? (
+
+ ) : (
+
+
+
+ )}
+
+ {duration}
+
+
+
+
+
+ {title}
+
+
+ {channelName}
+ ·
+ 조회 {formatViews(views)}
+ ·
+ {formatDate(uploadedAt)}
+
+
+