#267 feat: 뉴스 상세 조회 useNews.ts 도입

urinaner · Jan 13, 2025 · 098bd14 · 098bd14
1 parent 487857d
commit 098bd14
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 65 deletions.
diff --git a/frontend/src/hooks/queries/useNews.ts b/frontend/src/hooks/queries/useNews.ts
@@ -5,9 +5,10 @@ import {
   UseMutationResult,
   useQueryClient,
 } from '@tanstack/react-query';
-import { AxiosError } from 'axios';
+import axios, { AxiosError } from 'axios';
 import { newsApi, NewsFormRequest } from '../../api/news';
 import type { NewsResponse, PaginationParams } from '../../types/api';
+import { apiEndpoints } from '../../config/apiConfig';
 
 export interface NewsItem {
   id: number;
@@ -24,6 +25,7 @@ export interface NewsListResponse {
   totalPage: number;
   data: NewsItem[]; // 이미 배열 타입임
 }
+
 export const newsKeys = {
   all: ['news'] as const,
   lists: () => [...newsKeys.all, 'list'] as const,
@@ -50,7 +52,11 @@ export const useGetNews = (
 ): UseQueryResult<NewsItem, AxiosError> => {
   return useQuery({
     queryKey: newsKeys.detail(id),
-    queryFn: () => newsApi.getNews(id),
+    queryFn: async () => {
+      const response = await axios.get<NewsItem>(apiEndpoints.news.get(id));
+      return response.data; // response.data에서 실제 뉴스 데이터 추출
+    },
+    enabled: !!id,
   });
 };
 

diff --git a/frontend/src/pages/News/News/NewsDetail.tsx b/frontend/src/pages/News/News/NewsDetail.tsx
@@ -1,9 +1,9 @@
-// NewsDetail.tsx
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { Eye, ArrowLeft } from 'lucide-react';
 import moment from 'moment';
-import { apiEndpoints } from '../../../config/apiConfig';
+import { useGetNews } from '../../../hooks/queries/useNews';
+import { LoadingSpinner } from '../../../components/LoadingSpinner';
 import {
   Container,
   BackButton,
@@ -17,59 +17,19 @@ import {
   NewsImage,
   NewsContent,
   NewsLink,
-  LoadingSpinner,
   ErrorMessage,
 } from './NewsDetailStyle';
 
-interface NewsDetailData {
-  id: number;
-  title: string;
-  content: string;
-  view: number;
-  createDate: string;
-  link: string;
-  image: string;
-}
-
 const NewsDetail = () => {
   const { newsId } = useParams();
   const navigate = useNavigate();
-  const [newsData, setNewsData] = useState<NewsDetailData | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string>('');
-
-  useEffect(() => {
-    const fetchNewsDetail = async () => {
-      try {
-        setIsLoading(true);
-        if (!newsId) return;
-
-        const response = await fetch(apiEndpoints.news.get(parseInt(newsId)));
-
-        if (!response.ok) {
-          if (response.status === 404) {
-            throw new Error('뉴스를 찾을 수 없습니다.');
-          }
-          throw new Error('뉴스를 불러오는데 실패했습니다.');
-        }
-
-        const data = await response.json();
-        setNewsData(data);
-      } catch (error) {
-        setError(
-          error instanceof Error
-            ? error.message
-            : '알 수 없는 오류가 발생했습니다.',
-        );
-      } finally {
-        setIsLoading(false);
-      }
-    };
 
-    if (newsId) {
-      fetchNewsDetail();
-    }
-  }, [newsId]);
+  const {
+    data: newsItems,
+    isLoading,
+    isError,
+    error,
+  } = useGetNews(parseInt(newsId || '0'));
 
   const handleBack = () => {
     navigate(-1);
@@ -78,21 +38,29 @@ const NewsDetail = () => {
   if (isLoading) {
     return (
       <Container>
-        <LoadingSpinner>로딩 중...</LoadingSpinner>
+        <LoadingSpinner text="뉴스를 불러오는 중입니다..." />
       </Container>
     );
   }
 
-  if (error) {
+  if (isError) {
     return (
       <Container>
-        <ErrorMessage>{error}</ErrorMessage>
+        <ErrorMessage>
+          {error instanceof Error
+            ? error.message
+            : '뉴스를 불러오는데 실패했습니다.'}
+        </ErrorMessage>
       </Container>
     );
   }
 
-  if (!newsData) {
-    return null;
+  if (!newsItems) {
+    return (
+      <Container>
+        <ErrorMessage>뉴스를 찾을 수 없습니다.</ErrorMessage>
+      </Container>
+    );
   }
 
   return (
@@ -103,28 +71,28 @@ const NewsDetail = () => {
       </BackButton>
       <NewsWrapper>
         <NewsHeader>
-          <NewsTitle>{newsData.title}</NewsTitle>
+          <NewsTitle>{newsItems.title}</NewsTitle>
           <NewsMetadata>
             <NewsDate>
-              {moment(newsData.createDate).format('YYYY.MM.DD')}
+              {moment(newsItems.createDate).format('YYYY.MM.DD')}
             </NewsDate>
             <NewsViews>
               <Eye size={16} />
-              {newsData.view}
+              {newsItems.view}
             </NewsViews>
           </NewsMetadata>
         </NewsHeader>
         <NewsDivider />
-        {newsData.image && (
+        {newsItems.image && (
           <NewsImage
-            src={`https://dibb-bucket.s3.ap-northeast-2.amazonaws.com/news/${newsData.image}`}
-            alt={newsData.title}
+            src={`https://dibb-bucket.s3.ap-northeast-2.amazonaws.com/news/${newsItems.image}`}
+            alt={newsItems.title}
           />
         )}
-        <NewsContent>{newsData.content}</NewsContent>
-        {newsData.link && (
+        <NewsContent>{newsItems.content}</NewsContent>
+        {newsItems.link && (
           <NewsLink
-            href={newsData.link}
+            href={newsItems.link}
             target="_blank"
             rel="noopener noreferrer"
           >