Merge branch 'develop' into feature/onboarding-final

.github/workflows/pr_test.yaml

@@ -1,9 +1,10 @@
 name: "PR Test"
 
 on:
-  pull_request:
-    types: [opened, reopened, synchronize]
-    branches: [main, develop]
+  workflow_dispatch
+  # pull_request:
+  #   types: [opened, reopened, synchronize]
+  #   branches: [main, develop]
 
 jobs:
   build:

.github/workflows/preview.yml

@@ -3,8 +3,9 @@ env:
   VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
   VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
 on:
-  pull_request:
-    types: [opened, synchronize, reopened, labeled, unlabeled]
+  workflow_dispatch
+  #pull_request:
+  #  types: [opened, synchronize, reopened, labeled, unlabeled]
 
 jobs:
   Deploy-Preview:

.storybook/preview.tsx

@@ -11,6 +11,8 @@ const preview: Preview = {
     backgrounds: {
       default: "dark",
     },
+    layout: "centered",
+
     controls: {
       matchers: {
         color: /(background|color)$/i,

src/apis/festivals/hotFestival/hotFestival.ts

@@ -15,7 +15,6 @@ export async function getHotFestival(
   params: PaginationParamter = defaultParams,
 ) {
   const endpoint = ENDPOINT.mostlike;
-
   const { data } = await instance.get<HostFestivalData>(
     generateUrlWithParams(endpoint, params),
     {

src/apis/festivals/thisweek/thisWeekFestival.ts

@@ -0,0 +1,30 @@
+"use server";
+
+import instance from "@/apis/instance";
+import FIESTA_ENDPOINTS from "@/config/apiEndpoints";
+import { generateUrlWithParams } from "@/utils/generateUrlWithParams";
+
+import { thisWeekFestivalKeys } from "./thisWeekFestivalKeys";
+import {
+  PaginationParamter,
+  ThisWeekFestivalData,
+} from "./thisWeekFestivalType";
+
+const defaultParams: PaginationParamter = { page: 0, size: 6 };
+const ENDPOINT = FIESTA_ENDPOINTS.festivals;
+
+export async function getThisWeekFestival(
+  params: PaginationParamter = defaultParams,
+) {
+  const endpoint = ENDPOINT.thisWeek;
+  const { data } = await instance.get<ThisWeekFestivalData>(
+    generateUrlWithParams(endpoint, params),
+    {
+      next: {
+        revalidate: 10,
+        tags: thisWeekFestivalKeys.all,
+      },
+    },
+  );
+  return data;
+}

src/apis/festivals/thisweek/thisWeekFestivalKeys.ts

@@ -0,0 +1,11 @@
+import { PaginationParamter } from "./thisWeekFestivalType";
+
+const defaultParams: PaginationParamter = { page: 0, size: 6 };
+
+export const thisWeekFestivalKeys = {
+  all: ["thisWeekFestival"],
+  list: (params: PaginationParamter = defaultParams) => [
+    thisWeekFestivalKeys.all,
+    params,
+  ],
+};

src/apis/festivals/thisweek/thisWeekFestivalType.ts

@@ -0,0 +1,39 @@
+export interface PaginationParamter {
+  page: number;
+  size: number;
+}
+
+export interface PaginationMetaData {
+  offset: number;
+  pageNumber: number;
+  pageSize: number;
+  totalElements: number;
+  totalPages: number;
+}
+
+export interface FestivalListModel {
+  festivalId: number;
+  name: string;
+  sido: string;
+  sigungu: string;
+  thumbnailImage: string;
+  startDate: string;
+  endDate: string;
+}
+
+export interface FestivalResponse<T> {
+  statusCode: number;
+  status: string;
+  message: string;
+  data: T;
+}
+
+export type ThisWeekFestivalResponse = FestivalResponse<ThisWeekFestivalData>;
+
+export interface ThisWeekFestivalData
+  extends ThisWeekFestivalContent,
+    PaginationMetaData {}
+
+export interface ThisWeekFestivalContent {
+  content: FestivalListModel[];
+}

src/apis/instance.ts

@@ -1,5 +1,4 @@
-import { env } from "@/env";
-
+import { env } from "../env";
 import {
   ClientError,
   createFiestaError,

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

@@ -1,16 +1,13 @@
 import Link from "next/link";
-import { FC } from "react";
 
-import { HostFestivalData } from "@/apis/festivals/hotFestival/hotFestivalType";
+import { getHotFestival } from "@/apis/festivals/hotFestival/hotFestival";
 import { TrendFestivalCard } from "@/components/core/Card";
 import { ArrowRightSmallIcon } from "@/components/icons";
 import { FIESTA_ENDPOINTS } from "@/config";
 
-interface Props {
-  hotFestivals: HostFestivalData;
-}
+const FestivalHot = async () => {
+  const hotFestivals = await getHotFestival();
 
-const FestivalHot: FC<Props> = ({ hotFestivals }) => {
   return (
     <section className="flex w-full flex-col gap-[12px]">
       <div className="flex w-full justify-between">

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

@@ -0,0 +1,43 @@
+import Link from "next/link";
+
+import { getThisWeekFestival } from "@/apis/festivals/thisweek/thisWeekFestival";
+import { FestivalTile } from "@/components/core/List";
+import { DateTag } from "@/components/core/Tag";
+import { ArrowRightSmallIcon } from "@/components/icons";
+import { FIESTA_ENDPOINTS } from "@/config";
+import { getDday } from "@/lib/dayjs";
+
+const FestivalThisWeek = async () => {
+  const thisWeekFestivals = await getThisWeekFestival();
+  return (
+    <section className="flex w-full flex-col gap-[12px]">
+      <div className="flex w-full justify-between">
+        <div className="flex gap-[4px] text-title-bold text-gray-scale-900">
+          이번주 페스티벌
+        </div>
+
+        <Link href={`${FIESTA_ENDPOINTS.festivals.thisWeek}?page=0&size=6`}>
+          <ArrowRightSmallIcon
+            width={24}
+            height={24}
+            className="text-gray-scale-900"
+          />
+        </Link>
+      </div>
+
+      <div className="flex w-full flex-col gap-[16px]">
+        {thisWeekFestivals.content.splice(0, 3).map((festival) => (
+          <FestivalTile
+            key={festival.name}
+            href={`/featival/${festival.festivalId}`}
+            festival={festival}
+          >
+            <DateTag label={getDday(festival.startDate, festival.endDate)} />
+          </FestivalTile>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default FestivalThisWeek;

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

@@ -2,6 +2,7 @@ import { createSearchParamsCache, parseAsInteger } from "nuqs/server";
 
 import { getHotFestival } from "@/apis/festivals/hotFestival/hotFestival";
 import Pagination from "@/components/Pagination/Pagination";
+import { FIESTA_ENDPOINTS } from "@/config";
 import { DefaultHeader } from "@/layout/Mobile/MobileHeader";
 
 import TrendTestView from "./view";
@@ -25,7 +26,12 @@ export default async function HotFestivalPage({
     <div className="relative mb-[60px] mt-[44px]">
       <DefaultHeader href="/" label="HOT 페스티벌" />
       <TrendTestView festivals={festivals} />
-      <Pagination currentPage={parsedParams.page} />
+      <Pagination
+        currentPath={FIESTA_ENDPOINTS.festivals.mostlike}
+        currentPage={parsedParams.page}
+        totalPage={festivals.totalPages}
+        size={parsedParams.size}
+      />
     </div>
   );
 }

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

@@ -0,0 +1,35 @@
+import { createSearchParamsCache, parseAsInteger } from "nuqs/server";
+
+import { getThisWeekFestival } from "@/apis/festivals/thisweek/thisWeekFestival";
+import Pagination from "@/components/Pagination/Pagination";
+import { FIESTA_ENDPOINTS } from "@/config";
+import { DefaultHeader } from "@/layout/Mobile/MobileHeader";
+
+import ThisWeekFestivalView from "./view";
+
+const searchParamsCache = createSearchParamsCache({
+  page: parseAsInteger.withDefault(0),
+  size: parseAsInteger.withDefault(6),
+});
+
+interface TrendPageProps {
+  searchParams: Record<string, string>;
+}
+
+export default async function TrendPage({ searchParams }: TrendPageProps) {
+  const parsedParams = searchParamsCache.parse(searchParams);
+  const festivals = await getThisWeekFestival(parsedParams);
+
+  return (
+    <div className="relative mb-[60px] mt-[44px]">
+      <DefaultHeader href="/" label="이번주 페스티벌" />
+      <ThisWeekFestivalView festivals={festivals} />
+      <Pagination
+        currentPath={FIESTA_ENDPOINTS.festivals.thisWeek}
+        currentPage={parsedParams.page}
+        totalPage={festivals.totalPages}
+        size={parsedParams.size}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,28 @@
+import { ThisWeekFestivalData } from "@/apis/festivals/thisweek/thisWeekFestivalType";
+import { FestivalTile } from "@/components/core/List";
+import { DateTag } from "@/components/core/Tag";
+import { getDday } from "@/lib/dayjs";
+
+interface Props {
+  festivals: ThisWeekFestivalData;
+}
+
+const ThisWeekFestivalView = ({ festivals }: Props) => {
+  return (
+    <div className="h-full w-full p-[16px]">
+      <div className="flex w-full flex-col gap-[10px]">
+        {festivals.content.map((festival) => (
+          <FestivalTile
+            key={festival.name}
+            href={`/featival/${festival.festivalId}`}
+            festival={festival}
+          >
+            <DateTag label={getDday(festival.startDate, festival.endDate)} />
+          </FestivalTile>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ThisWeekFestivalView;

src/app/(home)/page.tsx

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

src/components/Confetti/Firework/Firework.stories.tsx

@@ -5,9 +5,7 @@ import FireworkAnimation from "./";
 const meta: Meta<typeof FireworkAnimation> = {
   title: "Confetti/FireworkAnimation",
   component: FireworkAnimation,
-  parameters: {
-    layout: "centered",
-  },
+  parameters: {},
 
   argTypes: {},
 };

src/components/Dialog/AlertDialogWrapper/AlertDialogWrapper.stories.tsx

@@ -5,9 +5,7 @@ import AlertDialogWrapper from "./AlertDialogWrapper";
 const meta: Meta<typeof AlertDialogWrapper> = {
   title: "Dialog/AlertDialogWrapper",
   component: AlertDialogWrapper,
-  parameters: {
-    layout: "centered",
-  },
+  parameters: {},
 
   argTypes: {
     open: {

src/components/Dialog/CalendarDialog/CalendarDialog.stories.tsx

@@ -5,9 +5,7 @@ import CalendarDialog from "./CalendarDialog";
 const meta: Meta<typeof CalendarDialog> = {
   title: "Dialog/CalendarDialog",
   component: CalendarDialog,
-  parameters: {
-    layout: "centered",
-  },
+  parameters: {},
 
   argTypes: {
     open: {

src/components/Dialog/FestivalPostCompleteDialog/FestivalPostCompleteDialog.stories.tsx

@@ -5,9 +5,7 @@ import FestivalPostCompleteDialog from "./FestivalPostCompleteDialog";
 const meta: Meta<typeof FestivalPostCompleteDialog> = {
   title: "Dialog/FestivalPostCompleteDialog",
   component: FestivalPostCompleteDialog,
-  parameters: {
-    layout: "centered",
-  },
+  parameters: {},
 
   argTypes: {
     open: {

src/components/Dialog/ReviewDeleteConfirmDialog/ReviewDeleteConfirmDialog.stories.tsx

@@ -5,9 +5,7 @@ import ReviewDeleteConfirmDialog from "./ReviewDeleteConfirmDialog";
 const meta: Meta<typeof ReviewDeleteConfirmDialog> = {
   title: "Dialog/ReviewDeleteConfirmDialog",
   component: ReviewDeleteConfirmDialog,
-  parameters: {
-    layout: "centered",
-  },
+  parameters: {},
 
   argTypes: {
     open: {

src/components/Pagination/Pagination.stories.tsx

@@ -7,7 +7,7 @@ const meta: Meta<typeof Pagination> = {
   title: "Pagination/Pagination",
   component: Pagination,
   parameters: {
-    layout: "centered",
+    controls: { include: ["currentPage"] },
   },
   argTypes: {
     currentPage: {
@@ -28,7 +28,7 @@ export const Default: Story = {
   render: (args) => {
     return (
       <div className="flex h-auto w-[500px] justify-center">
-        <Pagination {...args} />
+        <Pagination {...args} totalPage={3} currentPath="/" />
       </div>
     );
   },