feat(api/landing): feat: add lading page api

api/core/index.ts

@@ -11,6 +11,10 @@ import { HTTP_METHOD } from "../shared";
 
 const authUserKey = process.env.NEXT_PUBLIC_AUTH_USER_KEY as string;
 
+export interface RequestData {
+  message: string;
+}
+
 const handleRequest = (config: AxiosRequestConfig): AxiosRequestConfig => {
   const localStorage = new LocalStorage();
   const token = localStorage.get(authUserKey) ?? "unauthorized";

api/detail/index.ts

@@ -1,8 +1,5 @@
 import httpClient from "@/api/core";
-
-export interface RequestData {
-  message: string;
-}
+import type { RequestData } from "@/api/core";
 
 export interface DetailResponseData extends RequestData {
   data: ArtInfo;

api/index.ts

@@ -2,3 +2,4 @@ export * from "./auth";
 export * from "./detail";
 export * from "./comment";
 export * from "./reserve";
+export * from "./landing";

api/landing/index.ts

@@ -0,0 +1,18 @@
+import httpClient from "@/api/core";
+import type { RequestData } from "@/api/core";
+import type { ArtInfo } from "@/api/detail";
+
+export interface LandingArtListResponseData extends RequestData {
+  data: LandingList;
+}
+
+export interface LandingList {
+  hotRanking: ArtInfo[];
+  ticketOpen: ArtInfo[];
+}
+
+export const getLandingArtList = async () => {
+  const response = await httpClient.get<LandingArtListResponseData>(`/arts`);
+
+  return response.data;
+};

components/domains/landing-page/LandingPage.tsx

@@ -1,106 +1,50 @@
 import styled, { css } from "styled-components";
 import { Ticket } from "@/components/domains/landing-page/Ticket";
 import mockImage from "@/fixture/ticket-poster.jpeg";
+import { useGetLandingArtList } from "@/queries";
 import { ListHeader } from "./ListHeader";
 
-const tickets: any[] = [
-  {
-    id: 1,
-    image: mockImage,
-    genre: "장르",
-    title: "제목",
-    startDate: "2023-11-16T08:30:00Z",
-    endDate: "2023-11-29T08:30:00Z",
-  },
-  {
-    id: 2,
-    image: mockImage,
-    genre: "장르2",
-    title: "제목3",
-    startDate: "2023-11-16T08:30:00Z",
-    endDate: "2023-11-29T08:30:00Z",
-  },
-  {
-    id: 3,
-    image: mockImage,
-    genre: "장르3",
-    title: "제목34",
-    startDate: "2023-11-16T08:30:00Z",
-    endDate: "2023-11-29T08:30:00Z",
-  },
-  {
-    id: 4,
-    image: mockImage,
-    genre: "장르3",
-    title: "제목34",
-    startDate: "2023-11-16T08:30:00Z",
-    endDate: "2023-11-29T08:30:00Z",
-  },
-];
-
-const hotRankings: any[] = [
-  {
-    id: 1,
-    image: mockImage,
-    genre: "장르",
-    title: "제목",
-    startDate: "2023-11-16T08:30:00Z",
-    endDate: "2023-11-29T08:30:00Z",
-  },
-  {
-    id: 2,
-    image: mockImage,
-    genre: "장르2",
-    title: "제목3",
-    startDate: "2023-11-16T08:30:00Z",
-    endDate: "2023-11-29T08:30:00Z",
-  },
-  {
-    id: 3,
-    image: mockImage,
-    genre: "장르3",
-    title: "제목34",
-    startDate: "2023-11-16T08:30:00Z",
-    endDate: "2023-11-29T08:30:00Z",
-  },
-];
-
+// TODO: 진짜 이미지 테스트 필요!!
 export function LandingPage() {
+  const { data } = useGetLandingArtList();
+
   return (
     <Container>
       <ListHeader
         title="HOT RANKING"
         description="서울예술대학교의 인기있는 작품들을 모아놓은 섹션 중 하나입니다."
       />
       <HotRankingWrapper>
-        {hotRankings.map((rank, index) => (
-          <Ticket
-            ranking={index + 1}
-            key={rank.id}
-            thumbnail={rank.image}
-            genre={rank.genre}
-            title={rank.title}
-            startDate={rank.startDate}
-            endDate={rank.endDate}
-          />
-        ))}
+        {data?.hotRanking &&
+          data.hotRanking.map((rank, index) => (
+            <Ticket
+              ranking={index + 1}
+              key={rank.id}
+              thumbnail={mockImage}
+              genre={rank.genre}
+              title={rank.title}
+              startDate={rank.startDate}
+              endDate={rank.endDate}
+            />
+          ))}
       </HotRankingWrapper>
 
       <ListHeader
         title="TICKET"
         description="현재 티켓 예매가 가능한 작품입니다."
       />
       <TicketsWrapper>
-        {tickets.map((rank) => (
-          <Ticket
-            key={rank.id}
-            thumbnail={rank.image}
-            genre={rank.genre}
-            title={rank.title}
-            startDate={rank.startDate}
-            endDate={rank.endDate}
-          />
-        ))}
+        {data?.ticketOpen &&
+          data.ticketOpen.map((rank) => (
+            <Ticket
+              key={rank.id}
+              thumbnail={mockImage}
+              genre={rank.genre}
+              title={rank.title}
+              startDate={rank.startDate}
+              endDate={rank.endDate}
+            />
+          ))}
       </TicketsWrapper>
       <SeeMoreButton>더보기</SeeMoreButton>
       <ListHeader

components/domains/landing-page/Ticket.tsx

@@ -1,11 +1,12 @@
 import { useMemo } from "react";
+import type { StaticImageData } from "next/image";
 import Image from "next/image";
 import dayjs from "dayjs";
 import styled from "styled-components";
 import Typography from "@/components/common/text/Typography";
 
 interface TicketProps {
-  thumbnail: string;
+  thumbnail: string | StaticImageData;
   genre: string;
   title: string;
   startDate: string;

queries/index.ts

@@ -2,3 +2,4 @@ export * from "./auth";
 export * from "./detail";
 export * from "./comment";
 export * from "./reserve";
+export * from "./landing";

queries/landing/index.ts

@@ -0,0 +1,9 @@
+import { useQuery } from "@tanstack/react-query";
+import { getLandingArtList } from "@/api";
+
+export const useGetLandingArtList = () => {
+  return useQuery({
+    queryKey: ["landing"],
+    queryFn: () => getLandingArtList(),
+  });
+};