AI News 페이지 구현

package.json

@@ -14,6 +14,7 @@
     "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-progress": "^1.1.8",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
@@ -50,6 +51,7 @@
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.7.1",
     "supabase": ">1.8.1",
+    "tailwind-scrollbar-hide": "^4.0.0",
     "tailwindcss": "^4",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5",

src/app/api/news/route.ts

@@ -0,0 +1,45 @@
+import { NextRequest, NextResponse } from "next/server";
+
+import { newsPaginationHandler } from "@/entities/news/handler/news-pagination.handler";
+
+export async function GET(request: NextRequest) {
+  try {
+    // URL에서 page 파라미터 추출
+    const searchParams = request.nextUrl.searchParams;
+    const pageParam = searchParams.get("page");
+    const page = pageParam ? parseInt(pageParam, 10) : 0;
+
+    // 페이지 번호 유효성 검사
+    if (isNaN(page) || page < 0) {
+      return NextResponse.json(
+        {
+          status: "error",
+          data: null,
+          error: "Invalid page parameter",
+        },
+        { status: 400 },
+      );
+    }
+
+    // 핸들러 호출
+    const data = await newsPaginationHandler(page);
+
+    return NextResponse.json(
+      {
+        status: "success",
+        data,
+      },
+      { status: 200 },
+    );
+  } catch (error) {
+    console.error("News API error:", error);
+    return NextResponse.json(
+      {
+        status: "error",
+        data: null,
+        error: error instanceof Error ? error.message : "Internal server error",
+      },
+      { status: 500 },
+    );
+  }
+}

src/app/globals.css

@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@import "tailwind-scrollbar-hide/v4";
 @import "tw-animate-css";
 
 @custom-variant dark (&:is(.dark *));
@@ -132,7 +133,7 @@
 
 @layer base {
   * {
-    @apply border-border outline-ring/50;
+    @apply scrollbar-hide border-border outline-ring/50;
   }
   body {
     @apply bg-background text-text-dark;

src/app/news/page.tsx

@@ -1,3 +1,36 @@
+"use client";
+
+import { useGetNewsList } from "@/entities";
+import { NewsListSection, SummaryNewsSection } from "@/features";
+
 export default function NewsPage() {
-  return <div>News Page</div>;
+  const { data: newsResponse, isLoading } = useGetNewsList(0);
+
+  const newsData = newsResponse?.data;
+  const { newsDate, totalNews, investmentIndex, summary, keywords, newsAnalysis } = newsData || {
+    newsDate: "",
+    totalNews: 0,
+    investmentIndex: 0,
+    summary: { positive: 0, negative: 0, neutral: 0 },
+    keywords: [],
+    newsAnalysis: [],
+  };
+
+  return (
+    <div className='flex w-full max-w-4xl flex-col gap-8 px-5 py-10'>
+      <h1 className='text-2xl font-bold text-white'>뉴스 목록</h1>
+      <p>AI가 분석한 코인 관련 뉴스입니다.</p>
+      <div className='flex w-full flex-col gap-8 pb-20'>
+        <SummaryNewsSection
+          newsDate={newsDate}
+          totalNews={totalNews}
+          investmentIndex={investmentIndex}
+          summary={summary}
+          keywords={keywords}
+          isLoading={isLoading}
+        />
+        <NewsListSection newsAnalysis={newsAnalysis} isLoading={isLoading} />
+      </div>
+    </div>
+  );
 }

src/entities/index.ts

@@ -1,3 +1,4 @@
 export * from "./auth";
 export * from "./market";
 export * from "./user";
+export * from "./news";

src/entities/news/handler/news-pagination.handler.ts

@@ -0,0 +1,112 @@
+import { unstable_cache } from "next/cache";
+
+import {
+  AnalysisAPIResponseSchema,
+  NewsAPIResponseSchema,
+  NewsAnalysisData,
+  NewsAnalysisItem,
+  PaginatedNewsResponse,
+  analysisAPI,
+  newsAPI,
+} from "../model";
+
+const ITEMS_PER_PAGE = 5;
+const REVALIDATE_TIME = 300; // 5분 (초 단위)
+
+const getMergedNewsData = unstable_cache(
+  async () => {
+    // 두 API를 병렬로 호출
+    const [newsResponse, analysisResponse] = await Promise.all([newsAPI(), analysisAPI()]);
+
+    // Zod를 사용한 API 응답 검증
+    const validatedNewsResponse = NewsAPIResponseSchema.parse(newsResponse);
+    const validatedAnalysisResponse = AnalysisAPIResponseSchema.parse(analysisResponse);
+
+    if (!validatedNewsResponse.success || !validatedAnalysisResponse.success) {
+      throw new Error("Failed to fetch news data");
+    }
+
+    const newsData = validatedNewsResponse.data;
+    const analysisData = validatedAnalysisResponse.data;
+
+    // newsId를 기준으로 analysis 데이터를 Map으로 변환 (빠른 조회를 위해)
+    const analysisMap = new Map<number, NewsAnalysisData>(analysisData.newsAnalysis.map((item) => [item.newsId, item]));
+
+    // newsData와 analysisData.newsAnalysis를 newsId 기준으로 매칭
+    const combinedNewsAnalysis: NewsAnalysisItem[] = newsData.map((news) => {
+      const analysis: NewsAnalysisData = analysisMap.get(news.id) || {
+        newsId: news.id,
+        reason: "",
+        keywords: [],
+        sentiment: "neutral" as const,
+        confidence: 0,
+      };
+
+      return {
+        newsId: news.id,
+        title: news.title,
+        content: news.content,
+        url: news.url,
+        source: news.source,
+        reason: analysis.reason,
+        keywords: analysis.keywords,
+        sentiment: analysis.sentiment,
+        confidence: analysis.confidence,
+      };
+    });
+
+    // 전체 데이터 반환 (페이지네이션 되지 않음)
+    return {
+      meta: {
+        newsDate: analysisData.date,
+        totalNews: analysisData.totalNews,
+        investmentIndex: analysisData.investmentIndex,
+        summary: analysisData.summary,
+        keywords: analysisData.keywords,
+      },
+      items: combinedNewsAnalysis,
+    };
+  },
+  ["combined-news-data"],
+  { revalidate: REVALIDATE_TIME, tags: ["news"] },
+);
+
+export const newsPaginationHandler = async (page: number = 0): Promise<PaginatedNewsResponse> => {
+  try {
+    // 캐시된 전체 데이터를 가져옴 (API 호출 X, 메모리/파일시스템에서 로드 O)
+    const cachedData = await getMergedNewsData();
+
+    const { items, meta } = cachedData;
+
+    // 페이지네이션 계산
+    const totalItems = items.length;
+    const totalPages = Math.ceil(totalItems / ITEMS_PER_PAGE);
+    const startIndex = page * ITEMS_PER_PAGE;
+    const endIndex = startIndex + ITEMS_PER_PAGE;
+
+    // 현재 페이지의 데이터만 추출
+    const paginatedNewsAnalysis = items.slice(startIndex, endIndex);
+
+    return {
+      newsDate: meta.newsDate,
+      totalNews: meta.totalNews,
+      investmentIndex: meta.investmentIndex,
+      summary: meta.summary,
+      keywords: meta.keywords,
+      newsAnalysis: paginatedNewsAnalysis,
+      pagination: {
+        currentPage: page,
+        totalPages,
+        totalItems,
+        hasNext: page < totalPages - 1,
+        hasPrev: page > 0,
+      },
+    };
+  } catch (error) {
+    if (error instanceof Error) {
+      console.error("News pagination handler error:", error.message);
+      throw new Error(`Failed to process news data: ${error.message}`);
+    }
+    throw new Error("Failed to process news data: Unknown error");
+  }
+};

src/entities/news/index.ts

@@ -0,0 +1 @@
+export * from "./model";

src/entities/news/model/apis/index.ts

@@ -1,2 +1,3 @@
-export * from "./news.api";
 export * from "./analysis.api";
+export * from "./news-list.api";
+export * from "./news.api";

src/entities/news/model/apis/news-list.api.ts

@@ -0,0 +1,19 @@
+import { APIResponse } from "@/shared";
+
+import { PaginatedNewsResponse } from "../types";
+
+export type NewsListParams = {
+  page?: number;
+};
+
+export type NewsListResponse = APIResponse<PaginatedNewsResponse>;
+
+export const newsListAPI = async ({ page = 0 }: NewsListParams): Promise<NewsListResponse> => {
+  const response = await fetch(`/api/news?page=${page}`);
+
+  if (!response.ok) {
+    throw new Error("Failed to fetch news list");
+  }
+
+  return response.json();
+};

src/entities/news/model/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./useGetNewsList";

src/entities/news/model/hooks/useGetNewsList.ts

@@ -0,0 +1,12 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+
+import { newsListAPI } from "../apis";
+
+export const useGetNewsList = (page: number) => {
+  return useQuery({
+    queryKey: ["news-list", page],
+    queryFn: () => newsListAPI({ page }),
+  });
+};

src/entities/news/model/index.ts

@@ -1,2 +1,4 @@
 export * from "./apis";
 export * from "./types";
+export * from "./hooks";
+export * from "./schema";

src/entities/news/model/schema/index.ts

@@ -0,0 +1 @@
+export * from "./news.schema";