HOT 페스티벌 리스트 페이지 구현

.github/workflows/chromatic.yml

@@ -8,10 +8,11 @@ on:
     branches:
       - develop
     paths:
-      - '**/*.stories.tsx'
+      - "**/*.stories.tsx"
 
 jobs:
   chromatic:
+    if: ${{ !contains(github.event.pull_request.labels.*.name, 'skip-build') }}
     name: Run Chromatic Deployment
     # Operating System
     runs-on: ubuntu-latest

.github/workflows/pr_test.yaml

@@ -7,6 +7,7 @@ on:
 
 jobs:
   build:
+    if: ${{ !contains(github.event.pull_request.labels.*.name, 'skip-build') }}
     uses: ./.github/workflows/_build.yaml
     with:
       NODE_VERSION: 20.x

.github/workflows/preview.yml

@@ -0,0 +1,22 @@
+name: Vercel Preview Deployment
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+on:
+  pull_request:
+    types: [opened, synchronize, reopened, labeled, unlabeled]
+
+jobs:
+  Deploy-Preview:
+    if: ${{ !contains(github.event.pull_request.labels.*.name, 'skip-build') }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Build Project Artifacts
+        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}

next.config.mjs

@@ -9,6 +9,18 @@ const jiti = createJiti(fileURLToPath(import.meta.url));
 jiti("./src/env");
 
 const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        hostname: "placehold.co",
+      },
+    ],
+  },
+  logging: {
+    fetches: {
+      fullUrl: true,
+    },
+  },
   experimental: { instrumentationHook: true },
   webpack(config) {
     // SVG 가져오기를 처리하는 기존 규칙을 가져옵니다.

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "next dev",
     "dev:mock": "NODE_ENV=test next dev",
+    "build:mock": "NODE_ENV=test next build",
     "build": "next build",
     "start": "next start",
     "prepare": "husky",
@@ -26,6 +27,7 @@
     "clsx": "^2.1.1",
     "dayjs": "^1.11.12",
     "next": "14.2.4",
+    "nuqs": "^1.17.8",
     "react": "^18",
     "react-daum-postcode": "^3.1.3",
     "react-dom": "^18",

src/apis/festivals/hotFestival/hotFestival.ts

@@ -0,0 +1,28 @@
+"use server";
+
+import instance from "@/apis/instance";
+import FIESTA_ENDPOINTS from "@/config/apiEndpoints";
+import { generateUrlWithParams } from "@/utils/generateUrlWithParams";
+
+import { hotFestivalKeys } from "./hotFestivalkeys";
+import { HostFestivalData, PaginationParamter } from "./hotFestivalType";
+
+const defaultParams: PaginationParamter = { page: 0, size: 6 };
+const ENDPOINT = FIESTA_ENDPOINTS.festivals;
+
+export async function getHotFestival(
+  params: PaginationParamter = defaultParams,
+) {
+  const endpoint = ENDPOINT.mostlike;
+
+  const { data } = await instance.get<HostFestivalData>(
+    generateUrlWithParams(endpoint, params),
+    {
+      next: {
+        revalidate: 85600,
+        tags: hotFestivalKeys.all,
+      },
+    },
+  );
+  return data;
+}

src/apis/festivals/hotFestival/hotFestivalType.ts

@@ -0,0 +1,35 @@
+export type PaginationParamter = {
+  page: number;
+  size: number;
+};
+
+export type FestivalListModel = {
+  festivalId: number;
+  name: string;
+  sido: string;
+  sigungu: string;
+  thumbnailImage: string;
+  startDate: string;
+  endDate: string;
+};
+
+export type HotFestivalResponse = {
+  statusCode: number;
+  status: string;
+  message: string;
+  data: HostFestivalData;
+};
+
+export interface HostFestivalData extends HotFestivalList, PageMetaData {}
+
+export interface HotFestivalList {
+  content: FestivalListModel[];
+}
+
+export interface PageMetaData {
+  offset: number;
+  pageNumber: number;
+  pageSize: number;
+  totalElements: number;
+  totalPages: number;
+}

src/apis/festivals/hotFestival/hotFestivalkeys.ts

@@ -0,0 +1,10 @@
+import { PaginationParamter } from "./hotFestivalType";
+const defaultParams: PaginationParamter = { page: 0, size: 6 };
+
+export const hotFestivalKeys = {
+  all: ["hotFestival"],
+  list: (params: PaginationParamter = defaultParams) => [
+    hotFestivalKeys.all,
+    params,
+  ],
+};

src/app/(home)/_components/FestivalHot.tsx

@@ -0,0 +1,44 @@
+import Link from "next/link";
+import { FC } from "react";
+
+import { HostFestivalData } from "@/apis/festivals/hotFestival/hotFestivalType";
+import { TrendFestivalCard } from "@/components/core/Card";
+import { ArrowRightSmallIcon } from "@/components/icons";
+import { FIESTA_ENDPOINTS } from "@/config";
+
+interface Props {
+  hotFestivals: HostFestivalData;
+}
+
+const FestivalHot: FC<Props> = ({ hotFestivals }) => {
+  return (
+    <section className="flex w-full flex-col gap-[12px]">
+      <div className="flex w-full justify-between">
+        <div className="flex gap-[4px]">
+          <span className="text-title-bold text-primary-01">HOT</span>
+          <span className="text-title-bold text-gray-scale-900">페스티벌</span>
+        </div>
+
+        <Link href={`${FIESTA_ENDPOINTS.festivals.mostlike}?page=0&size=6`}>
+          <ArrowRightSmallIcon
+            width={24}
+            height={24}
+            className="text-gray-scale-900"
+          />
+        </Link>
+      </div>
+
+      <div className="flex w-full gap-[16px]">
+        {hotFestivals.content.splice(0, 2).map((v) => (
+          <TrendFestivalCard
+            key={v.festivalId}
+            href={`/featival/${v.festivalId}`}
+            festival={v}
+          />
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default FestivalHot;

src/app/(home)/festivals/mostlike/page.tsx

@@ -0,0 +1,31 @@
+import { createSearchParamsCache, parseAsInteger } from "nuqs/server";
+
+import { getHotFestival } from "@/apis/festivals/hotFestival/hotFestival";
+import Pagination from "@/components/Pagination/Pagination";
+import { DefaultHeader } from "@/layout/Mobile/MobileHeader";
+
+import TrendTestView from "./view";
+
+const searchParamsCache = createSearchParamsCache({
+  page: parseAsInteger.withDefault(0),
+  size: parseAsInteger.withDefault(6),
+});
+
+interface HotFestivalPageProps {
+  searchParams: Record<string, string>;
+}
+
+export default async function HotFestivalPage({
+  searchParams,
+}: HotFestivalPageProps) {
+  const parsedParams = searchParamsCache.parse(searchParams);
+  const festivals = await getHotFestival(parsedParams);
+
+  return (
+    <div className="relative mb-[60px] mt-[44px]">
+      <DefaultHeader href="/" label="HOT 페스티벌" />
+      <TrendTestView festivals={festivals} />
+      <Pagination currentPage={parsedParams.page} />
+    </div>
+  );
+}

src/app/(home)/festivals/mostlike/view.tsx

@@ -0,0 +1,24 @@
+import { HostFestivalData } from "@/apis/festivals/hotFestival/hotFestivalType";
+import { TrendFestivalCard } from "@/components/core/Card";
+
+interface Props {
+  festivals: HostFestivalData;
+}
+
+const HotFestivalView = ({ festivals }: Props) => {
+  return (
+    <div className="h-full w-full p-[16px]">
+      <div className="grid w-full grid-cols-2 gap-[16px]">
+        {festivals.content.map((festival) => (
+          <TrendFestivalCard
+            key={festival.festivalId}
+            href={`/featival/${festival.festivalId}`}
+            festival={festival}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default HotFestivalView;

src/app/page.tsx → src/app/(home)/page.tsx

@@ -1,13 +1,15 @@
+import { getHotFestival } from "@/apis/festivals/hotFestival/hotFestival";
 import { HomeHeader } from "@/layout/Mobile/MobileHeader";
 import NavigationBar from "@/layout/Mobile/NavigationBar";
 
 import HomeView from "./view";
 
-export default function Home() {
+export default async function Home() {
+  const hotFestivals = await getHotFestival();
   return (
     <div className="mb-[60px] mt-[44px]">
       <HomeHeader />
-      <HomeView />
+      <HomeView hotFestivals={hotFestivals} />
       <NavigationBar />
     </div>
   );

src/app/(home)/view.tsx

@@ -0,0 +1,17 @@
+import { HostFestivalData } from "@/apis/festivals/hotFestival/hotFestivalType";
+
+import FestivalHot from "./_components/FestivalHot";
+
+interface Props {
+  hotFestivals: HostFestivalData;
+}
+
+const HomeView = ({ hotFestivals }: Props) => {
+  return (
+    <main className="flex flex-wrap gap-4 px-[16px]">
+      <FestivalHot hotFestivals={hotFestivals} />
+    </main>
+  );
+};
+
+export default HomeView;