FEAT :: 트렌딩, 추천 게시물 불러오기

components/Board/BoardItem/index.tsx

@@ -1,26 +1,26 @@
 import React from "react";
 import * as S from "./style";
 
-function BoardItem() {
-
+function BoardItem({ data }: { data: BoardType }) {
   return (
     <S.BoardItem>
       <S.FoodWrap>
-        <S.Food src="/images/Food.svg" alt="음식사진" fill />
+        <S.Food src={data?.imageUrl} alt="음식사진" fill />
       </S.FoodWrap>
       <S.Content>
         <S.TitleWrap>
-          <S.Title>음식이름음식이름음식이름</S.Title>
-          <S.Description>달달하면서 매콤한 간단 LA갈비 달달하면서 매콤한 간단 LA갈비 달달하면서 매콤한 간단 LA갈비</S.Description>
+          <S.Title>{data?.name}</S.Title>
+          <S.Description>{data?.description}</S.Description>
         </S.TitleWrap>
         <S.InfoWrap>
-          <S.Info>작성자</S.Info>
+          <S.Info>{data?.writer}</S.Info>
           <S.Info>ᐧ</S.Info>
-          <S.Info>2023-04-04</S.Info>
+          <S.Info>{data?.createdDate}</S.Info>
         </S.InfoWrap>
       </S.Content>
     </S.BoardItem>
   );
+  return <></>;
 }
 
 export default BoardItem;

components/Board/BoardSection/index.tsx

@@ -2,30 +2,53 @@ import React from "react";
 import * as S from "./style";
 import { AiFillFire } from "react-icons/ai";
 import BoardItem from "../BoardItem";
+import {
+  getRecommendBoardQuery,
+  getTrendingBoardQuery,
+} from "@/utils/apis/board";
 
 function BoardSection({ isYellow }: { isYellow?: true }) {
-  return (
-    <S.BoardSection isYellow={isYellow}>
-      <S.Title isYellow={isYellow}>
-        {isYellow ? (
-          <>
-            최근 떠오르는 레시피
-            <AiFillFire color="#FFFFFF" />
-          </>
-        ) : (
-          <span>
-            이런 <S.Emphasis>레시피</S.Emphasis> 어떠세요?
-          </span>
-        )}
-      </S.Title>
-      <S.BoardWrap>
-        <BoardItem />
-        <BoardItem />
-        <BoardItem />
-        <BoardItem />
-      </S.BoardWrap>
-    </S.BoardSection>
-  );
+  const getTrendingFunc = getTrendingBoardQuery();
+  const getRecommendFunc = getRecommendBoardQuery();
+  if (getTrendingFunc.isSuccess && getRecommendFunc.isSuccess) {
+    return (
+      <S.BoardSection isYellow={isYellow}>
+        <S.Title isYellow={isYellow}>
+          {isYellow ? (
+            <>
+              최근 떠오르는 레시피
+              <AiFillFire color="#FFFFFF" />
+            </>
+          ) : (
+            <span>
+              이런 <S.Emphasis>레시피</S.Emphasis> 어떠세요?
+            </span>
+          )}
+        </S.Title>
+        <S.BoardWrap>
+          {getTrendingFunc.data?.list.length &&
+          getRecommendFunc.data?.list.length ? (
+            isYellow ? (
+              <>
+                {getTrendingFunc.data?.list.map((item: BoardType) => {
+                  return <BoardItem data={item} />;
+                })}
+              </>
+            ) : (
+              <>
+                {getRecommendFunc.data?.list.map((item: BoardType) => {
+                  return <BoardItem data={item} />;
+                })}
+              </>
+            )
+          ) : (
+            <></>
+          )}
+        </S.BoardWrap>
+      </S.BoardSection>
+    );
+  }
+  return;
 }
 
 export default BoardSection;

next.config.js

@@ -10,6 +10,10 @@ const nextConfig = {
         protocol: "https",
         hostname: "lh3.googleusercontent.com",
       },
+      {
+        protocol: "https",
+        hostname: "d2fq95d3v5r0qf.cloudfront.net",
+      },
     ],
   },
 };

types/Board/Board.ts

@@ -0,0 +1,10 @@
+interface BoardType {
+  boardId: number;
+  name: string;
+  description: string;
+  imageUrl: string;
+  writer: string;
+  createdDate: string;
+  editable: boolean;
+  views: number;
+}

utils/apis/board.ts

@@ -1,6 +1,6 @@
 import { getAccessToken } from "@/functions/getAccessToken";
 import { instance } from "../instance";
-import { useMutation } from "react-query";
+import { useMutation, useQuery } from "react-query";
 import { useRouter } from "next/router";
 
 export const postBoard = async (data: FormData) => {
@@ -13,3 +13,19 @@ export const postBoardMutation = (data: FormData) => {
     onSuccess: () => router.replace("/board"),
   });
 };
+
+export const getRecommendBoard = async () => {
+  return (await instance.get("board/recommend", getAccessToken())).data;
+};
+
+export const getRecommendBoardQuery = () => {
+  return useQuery("recommendBoard", getRecommendBoard);
+};
+
+export const getTrendingBoard = async () => {
+  return (await instance.get("board/trending", getAccessToken())).data;
+};
+
+export const getTrendingBoardQuery = () => {
+  return useQuery("recommendBoard", getTrendingBoard);
+};