[Feat/#60] 메인 페이지 뉴스 조회 API 연결

src/apis/index.ts

@@ -2,7 +2,6 @@ import axios from 'axios';
 
 export const instance = axios.create({
   baseURL: import.meta.env.VITE_API_BASE_URL,
-  withCredentials: true,
 });
 
 export function get<T>(...args: Parameters<typeof instance.get>) {

src/apis/news/api.ts

@@ -2,9 +2,11 @@ import { get } from '@apis/index';
 import { AxiosResponse } from 'axios';
 import { getNewsResponse, newsList } from 'src/types/news';
 
-export const getNews = async (): Promise<newsList[] | null> => {
+export const getNews = async (cursor?: number): Promise<newsList[] | null> => {
   try {
-    const response: AxiosResponse<getNewsResponse> = await get('/news');
+    const response: AxiosResponse<getNewsResponse> = await get(
+      `/news${cursor ? `?cursor=${cursor}` : ''}`,
+    );
     return response.data.news;
   } catch (error) {
     console.log('error', error);

src/apis/news/queries.ts

@@ -2,12 +2,12 @@ import { newsList } from 'src/types/news';
 import { getNews } from './api';
 import { useQuery } from '@tanstack/react-query';
 
-export const useNews = () =>
+export const useNews = (cursor: number) =>
   useQuery<newsList[] | null>({
-    queryKey: ['news'], // 쿼리 키
-    queryFn: getNews, // API 함수
-    staleTime: 1000 * 60 * 5, // 5분
-    gcTime: 1000 * 60 * 10, // 10분
-    retry: 3, // 실패 시 재시도 횟수
+    queryKey: ['news', cursor],
+    queryFn: () => getNews(cursor),
+    staleTime: 1000 * 60 * 60,
+    gcTime: 1000 * 60 * 60 * 12,
+    retry: 3,
     refetchOnWindowFocus: false,
   });

src/components/main/HomeCard.style.ts

@@ -48,6 +48,7 @@ export const TitleStyle = (isThreeLines: boolean) => (theme: Theme) => css`
     color: ${theme.colors.gray500};
     ${theme.fonts.title07};
     overflow: auto;
+    word-break: keep-all;
   }
 `;
 
@@ -61,14 +62,15 @@ export const SkeletonText = (theme: Theme) => css`
     display: block;
     width: 13.1rem;
     height: fit-content;
+    min-height: 1.8rem;
 
     color: transparent;
     ${theme.fonts.title07};
     overflow: auto;
   }
 
   p::after {
-    content: '';
+    content: 'dd';
     position: absolute;
     top: 0;
     left: 0;

src/components/main/HomeCard.tsx

@@ -3,15 +3,14 @@ import * as S from './HomeCard.style';
 import { calculateLine } from '@utils/calculateLine';
 
 export interface HomeCardProps {
-  img: React.ReactNode;
-  title: string;
+  img: React.ReactNode | null;
+  title: string | null;
 }
 
 const HomeCard = ({ img, title }: HomeCardProps) => {
   const titleRef = useRef<HTMLParagraphElement>(null);
   const [isThreeLines, setIsThreeLines] = useState(false);
   const [isCalculated, setIsCalculated] = useState(false);
-  const isDataValid = img && title;
 
   useEffect(() => {
     if (titleRef.current) {
@@ -21,18 +20,23 @@ const HomeCard = ({ img, title }: HomeCardProps) => {
     }
   }, [title]);
 
+  if (!img || !title || !isCalculated) {
+    return (
+      <section css={S.CardStyle}>
+        <div css={S.ImgStyle}>
+          <div css={S.SkeletonImg} />
+        </div>
+        <div css={S.SkeletonText}>
+          <p ref={titleRef}></p>
+        </div>
+      </section>
+    );
+  }
+
   return (
     <section css={S.CardStyle}>
-      <div css={S.ImgStyle}>
-        {isCalculated && isDataValid ? img : <div css={S.SkeletonImg} />}
-      </div>
-      <div
-        css={
-          isCalculated && isDataValid
-            ? S.TitleStyle(isThreeLines)
-            : S.SkeletonText
-        }
-      >
+      <div css={S.ImgStyle}>{img}</div>
+      <div css={S.TitleStyle(isThreeLines)}>
         <p ref={titleRef}>{title}</p>
       </div>
     </section>

src/constants/main/homeCardList.tsx

@@ -11,32 +11,26 @@ export const HOMECARD_LIST = [
   {
     id: 1,
     img: <HCimg1 />,
-    title: '버거의 맛과 크기를 더블 패티로 높였다!',
   },
   {
     id: 2,
     img: <HCimg2 />,
-    title: '달콤한 블루베리 맛을 담은 보라빛 쉐이크',
   },
   {
-    id: 6,
+    id: 3,
     img: <HCimg6 />,
-    title: '맥런치 할인에 사이드 할인까지 맥런치 플러스 세트 출시!',
   },
   {
-    id: 3,
+    id: 4,
     img: <HCimg3 />,
-    title: '맥도날드 대표 간식을 1000원부터!',
   },
 
   {
     id: 5,
     img: <HCimg5 />,
-    title: '맥도날드 버거의 비밀 시즌 3 OPEN',
   },
   {
-    id: 4,
+    id: 6,
     img: <HCimg4 />,
-    title: '모두가 기다린 애플파이 컴백!',
   },
 ];

src/pages/main/Main.tsx

@@ -4,22 +4,51 @@ import * as S from './Main.style';
 import Spacing from '@components/common/spacing/Spacing';
 import { IcSeemore } from '@assets/svgs';
 import Carousel from '@components/main/Carousel';
+import { useNews } from '@apis/news/queries';
+import { useEffect, useState } from 'react';
+import { mergeNewsWithImages } from '@utils/mergeNewsWithImages';
 
-const Main = () => (
-  <>
-    <Carousel />
-    <main css={S.MainLayout}>
-      <h1 css={S.Title}>McDonald’s LIVE</h1>
-      <Spacing size="2.2" />
-      <article css={S.CardLayout}>
-        {HOMECARD_LIST.map((card) => (
-          <HomeCard key={card.id} img={card.img} title={card.title} />
-        ))}
-      </article>
-      <Spacing size="6" />
-      <IcSeemore width={70} height={70} />
-    </main>
-  </>
-);
+const Main = () => {
+  const [cursor, setCursor] = useState(0);
+  const { data, isLoading } = useNews(cursor);
+  const [articles, setArticles] = useState<
+    { id: number; content: string; img: JSX.Element | null }[]
+  >([]);
+
+  useEffect(() => {
+    if (data) {
+      const merged = mergeNewsWithImages(data, HOMECARD_LIST);
+      setArticles((prev) => [...prev, ...merged]);
+    }
+  }, [data]);
+
+  const handleSeeMore = () => {
+    const lastId = articles[articles.length - 1]?.id;
+    if (lastId) {
+      setCursor(lastId);
+    }
+  };
+
+  return (
+    <>
+      <Carousel />
+      <main css={S.MainLayout}>
+        <h1 css={S.Title}>McDonald’s LIVE</h1>
+        <Spacing size="2.2" />
+        <article css={S.CardLayout}>
+          {isLoading
+            ? Array.from({ length: 6 }).map((_, index) => (
+                <HomeCard key={`skeleton-${index}`} img={null} title={null} />
+              ))
+            : articles.map((card) => (
+                <HomeCard key={card.id} img={card.img} title={card.content} />
+              ))}
+        </article>
+        <Spacing size="6" />
+        <IcSeemore width={70} height={70} onClick={handleSeeMore} />
+      </main>
+    </>
+  );
+};
 
 export default Main;

src/utils/mergeNewsWithImages.ts

@@ -0,0 +1,14 @@
+import { HOMECARD_LIST } from '@constants/main/homeCardList';
+import { newsList } from 'src/types/news';
+
+export const mergeNewsWithImages = (
+  news: newsList[] | null | undefined,
+  images: typeof HOMECARD_LIST,
+) =>
+  news?.map((item, index) => {
+    const matchedImage = images[index % images.length];
+    return {
+      ...item,
+      img: matchedImage ? matchedImage.img : null,
+    };
+  }) || [];