diff --git a/.github/workflows/pr_test.yaml b/.github/workflows/pr_test.yaml index 73647c6..e84a422 100644 --- a/.github/workflows/pr_test.yaml +++ b/.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: diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml index 1323c61..06d9fe4 100644 --- a/.github/workflows/preview.yml +++ b/.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: diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 8241764..252a895 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -11,6 +11,8 @@ const preview: Preview = { backgrounds: { default: "dark", }, + layout: "centered", + controls: { matchers: { color: /(background|color)$/i, diff --git a/src/apis/festivals/hotFestival/hotFestival.ts b/src/apis/festivals/hotFestival/hotFestival.ts index 9934ead..60b0ada 100644 --- a/src/apis/festivals/hotFestival/hotFestival.ts +++ b/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( generateUrlWithParams(endpoint, params), { diff --git a/src/apis/festivals/thisweek/thisWeekFestival.ts b/src/apis/festivals/thisweek/thisWeekFestival.ts new file mode 100644 index 0000000..a474539 --- /dev/null +++ b/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( + generateUrlWithParams(endpoint, params), + { + next: { + revalidate: 10, + tags: thisWeekFestivalKeys.all, + }, + }, + ); + return data; +} diff --git a/src/apis/festivals/thisweek/thisWeekFestivalKeys.ts b/src/apis/festivals/thisweek/thisWeekFestivalKeys.ts new file mode 100644 index 0000000..3f0c536 --- /dev/null +++ b/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, + ], +}; diff --git a/src/apis/festivals/thisweek/thisWeekFestivalType.ts b/src/apis/festivals/thisweek/thisWeekFestivalType.ts new file mode 100644 index 0000000..345f1fd --- /dev/null +++ b/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 { + statusCode: number; + status: string; + message: string; + data: T; +} + +export type ThisWeekFestivalResponse = FestivalResponse; + +export interface ThisWeekFestivalData + extends ThisWeekFestivalContent, + PaginationMetaData {} + +export interface ThisWeekFestivalContent { + content: FestivalListModel[]; +} diff --git a/src/apis/instance.ts b/src/apis/instance.ts index 2fe5c13..c31fe08 100644 --- a/src/apis/instance.ts +++ b/src/apis/instance.ts @@ -1,5 +1,4 @@ -import { env } from "@/env"; - +import { env } from "../env"; import { ClientError, createFiestaError, diff --git a/src/app/(home)/_components/FestivalHot.tsx b/src/app/(home)/_components/FestivalHot.tsx index de9a0f3..ce3d3ac 100644 --- a/src/app/(home)/_components/FestivalHot.tsx +++ b/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 = ({ hotFestivals }) => { return (
diff --git a/src/app/(home)/_components/FestivalThisWeek.tsx b/src/app/(home)/_components/FestivalThisWeek.tsx new file mode 100644 index 0000000..96fa349 --- /dev/null +++ b/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 ( +
+
+
+ 이번주 페스티벌 +
+ + + + +
+ +
+ {thisWeekFestivals.content.splice(0, 3).map((festival) => ( + + + + ))} +
+
+ ); +}; + +export default FestivalThisWeek; diff --git a/src/app/(home)/festivals/mostlike/page.tsx b/src/app/(home)/festivals/mostlike/page.tsx index f104ed3..5efb756 100644 --- a/src/app/(home)/festivals/mostlike/page.tsx +++ b/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({
- +
); } diff --git a/src/app/(home)/festivals/thisweek/page.tsx b/src/app/(home)/festivals/thisweek/page.tsx new file mode 100644 index 0000000..65ad972 --- /dev/null +++ b/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; +} + +export default async function TrendPage({ searchParams }: TrendPageProps) { + const parsedParams = searchParamsCache.parse(searchParams); + const festivals = await getThisWeekFestival(parsedParams); + + return ( +
+ + + +
+ ); +} diff --git a/src/app/(home)/festivals/thisweek/view.tsx b/src/app/(home)/festivals/thisweek/view.tsx new file mode 100644 index 0000000..ac4e0ea --- /dev/null +++ b/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 ( +
+
+ {festivals.content.map((festival) => ( + + + + ))} +
+
+ ); +}; + +export default ThisWeekFestivalView; diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx index e152f66..0a018cb 100644 --- a/src/app/(home)/page.tsx +++ b/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 (
- +
+ + +
); diff --git a/src/app/(home)/view.tsx b/src/app/(home)/view.tsx deleted file mode 100644 index 8d88255..0000000 --- a/src/app/(home)/view.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { HostFestivalData } from "@/apis/festivals/hotFestival/hotFestivalType"; - -import FestivalHot from "./_components/FestivalHot"; - -interface Props { - hotFestivals: HostFestivalData; -} - -const HomeView = ({ hotFestivals }: Props) => { - return ( -
- -
- ); -}; - -export default HomeView; diff --git a/src/components/Confetti/Firework/Firework.stories.tsx b/src/components/Confetti/Firework/Firework.stories.tsx index 81fa0e8..a3f2acb 100644 --- a/src/components/Confetti/Firework/Firework.stories.tsx +++ b/src/components/Confetti/Firework/Firework.stories.tsx @@ -5,9 +5,7 @@ import FireworkAnimation from "./"; const meta: Meta = { title: "Confetti/FireworkAnimation", component: FireworkAnimation, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: {}, }; diff --git a/src/components/Dialog/AlertDialogWrapper/AlertDialogWrapper.stories.tsx b/src/components/Dialog/AlertDialogWrapper/AlertDialogWrapper.stories.tsx index 7d6dec7..305d72e 100644 --- a/src/components/Dialog/AlertDialogWrapper/AlertDialogWrapper.stories.tsx +++ b/src/components/Dialog/AlertDialogWrapper/AlertDialogWrapper.stories.tsx @@ -5,9 +5,7 @@ import AlertDialogWrapper from "./AlertDialogWrapper"; const meta: Meta = { title: "Dialog/AlertDialogWrapper", component: AlertDialogWrapper, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: { open: { diff --git a/src/components/Dialog/CalendarDialog/CalendarDialog.stories.tsx b/src/components/Dialog/CalendarDialog/CalendarDialog.stories.tsx index 63277bb..e867044 100644 --- a/src/components/Dialog/CalendarDialog/CalendarDialog.stories.tsx +++ b/src/components/Dialog/CalendarDialog/CalendarDialog.stories.tsx @@ -5,9 +5,7 @@ import CalendarDialog from "./CalendarDialog"; const meta: Meta = { title: "Dialog/CalendarDialog", component: CalendarDialog, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: { open: { diff --git a/src/components/Dialog/FestivalPostCompleteDialog/FestivalPostCompleteDialog.stories.tsx b/src/components/Dialog/FestivalPostCompleteDialog/FestivalPostCompleteDialog.stories.tsx index 5dca220..4b9a9fa 100644 --- a/src/components/Dialog/FestivalPostCompleteDialog/FestivalPostCompleteDialog.stories.tsx +++ b/src/components/Dialog/FestivalPostCompleteDialog/FestivalPostCompleteDialog.stories.tsx @@ -5,9 +5,7 @@ import FestivalPostCompleteDialog from "./FestivalPostCompleteDialog"; const meta: Meta = { title: "Dialog/FestivalPostCompleteDialog", component: FestivalPostCompleteDialog, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: { open: { diff --git a/src/components/Dialog/ReviewDeleteConfirmDialog/ReviewDeleteConfirmDialog.stories.tsx b/src/components/Dialog/ReviewDeleteConfirmDialog/ReviewDeleteConfirmDialog.stories.tsx index 243658c..721ba11 100644 --- a/src/components/Dialog/ReviewDeleteConfirmDialog/ReviewDeleteConfirmDialog.stories.tsx +++ b/src/components/Dialog/ReviewDeleteConfirmDialog/ReviewDeleteConfirmDialog.stories.tsx @@ -5,9 +5,7 @@ import ReviewDeleteConfirmDialog from "./ReviewDeleteConfirmDialog"; const meta: Meta = { title: "Dialog/ReviewDeleteConfirmDialog", component: ReviewDeleteConfirmDialog, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: { open: { diff --git a/src/components/Pagination/Pagination.stories.tsx b/src/components/Pagination/Pagination.stories.tsx index 63bfa57..95e4006 100644 --- a/src/components/Pagination/Pagination.stories.tsx +++ b/src/components/Pagination/Pagination.stories.tsx @@ -7,7 +7,7 @@ const meta: Meta = { title: "Pagination/Pagination", component: Pagination, parameters: { - layout: "centered", + controls: { include: ["currentPage"] }, }, argTypes: { currentPage: { @@ -28,7 +28,7 @@ export const Default: Story = { render: (args) => { return (
- +
); }, diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx index 62a745a..1532185 100644 --- a/src/components/Pagination/Pagination.tsx +++ b/src/components/Pagination/Pagination.tsx @@ -1,33 +1,47 @@ import Link from "next/link"; import { ArrowLeftSmallIcon, ArrowRightSmallIcon } from "@/components/icons"; -import { FIESTA_ENDPOINTS } from "@/config"; import { serialize } from "@/lib/searchParams"; import { cn } from "@/utils"; +const MAX_PAGE_COUNT = 3; +const DEFAULT_SIZE = 6; + type PaginationControlsProps = { currentPage: number; + totalPage: number; + currentPath: string; + size?: number; }; -function Pagination({ currentPage }: PaginationControlsProps) { +function Pagination({ + currentPage, + currentPath, + totalPage, + size = DEFAULT_SIZE, +}: PaginationControlsProps) { const getPageNumbers = (): number[] => { - if (currentPage <= 1) { - return [1, 2, 3]; + if (totalPage < MAX_PAGE_COUNT) { + return Array.from({ length: totalPage }, (_, index) => index + 1); + } + + if (currentPage < MAX_PAGE_COUNT) { + return Array.from({ length: MAX_PAGE_COUNT }, (_, index) => index + 1); } return [currentPage - 1, currentPage, currentPage + 1]; }; - const pageURL = (page: number) => { - return serialize(FIESTA_ENDPOINTS.festivals.mostlike, { + const pageURL = (page: number, size?: number) => { + return serialize(currentPath, { page, - size: 6, + size, }); }; return (
( = { title: "Core/Button/BasicButton", component: BasicButton, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: { label: { diff --git a/src/components/core/Button/BookingButton/BookingButton.stories.tsx b/src/components/core/Button/BookingButton/BookingButton.stories.tsx index 0bbd59f..9a76276 100644 --- a/src/components/core/Button/BookingButton/BookingButton.stories.tsx +++ b/src/components/core/Button/BookingButton/BookingButton.stories.tsx @@ -6,9 +6,7 @@ import BookingButton from "./BookingButton"; const meta: Meta = { title: "Core/Button/BookingButton", component: BookingButton, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: { label: { diff --git a/src/components/core/Button/FloatingButton/FloatingButton.stories.tsx b/src/components/core/Button/FloatingButton/FloatingButton.stories.tsx index 0d72ef0..fe358a8 100644 --- a/src/components/core/Button/FloatingButton/FloatingButton.stories.tsx +++ b/src/components/core/Button/FloatingButton/FloatingButton.stories.tsx @@ -5,9 +5,7 @@ import FloatingButton from "./FloatingButton"; const meta: Meta = { title: "Core/Button/FloatingButton", component: FloatingButton, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: {}, }; diff --git a/src/components/core/Button/IconButton/IconButton.stories.tsx b/src/components/core/Button/IconButton/IconButton.stories.tsx index b997458..d281f39 100644 --- a/src/components/core/Button/IconButton/IconButton.stories.tsx +++ b/src/components/core/Button/IconButton/IconButton.stories.tsx @@ -7,9 +7,7 @@ import IconButton from "./IconButton"; const meta: Meta = { title: "Core/Button/IconButton", component: IconButton, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: { active: { diff --git a/src/components/core/Button/KakaoButton/KakaoButton.stories.tsx b/src/components/core/Button/KakaoButton/KakaoButton.stories.tsx index d708276..5cc7722 100644 --- a/src/components/core/Button/KakaoButton/KakaoButton.stories.tsx +++ b/src/components/core/Button/KakaoButton/KakaoButton.stories.tsx @@ -5,9 +5,7 @@ import KakaoButton from "./KakaoButton"; const meta: Meta = { title: "Core/Button/KakaoButton", component: KakaoButton, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: { label: { diff --git a/src/components/core/Button/RactangleTabButton/RectangleTabButton.stories.tsx b/src/components/core/Button/RactangleTabButton/RectangleTabButton.stories.tsx index 43c6559..daeae53 100644 --- a/src/components/core/Button/RactangleTabButton/RectangleTabButton.stories.tsx +++ b/src/components/core/Button/RactangleTabButton/RectangleTabButton.stories.tsx @@ -5,9 +5,7 @@ import RectangleTabButton from "./RectangleTabButton"; const meta: Meta = { title: "Core/Button/RectangleTabButton", component: RectangleTabButton, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: { active: { diff --git a/src/components/core/Button/RegisterButton/RegisterButton.stories.tsx b/src/components/core/Button/RegisterButton/RegisterButton.stories.tsx index 8d04417..1c00fa0 100644 --- a/src/components/core/Button/RegisterButton/RegisterButton.stories.tsx +++ b/src/components/core/Button/RegisterButton/RegisterButton.stories.tsx @@ -5,9 +5,7 @@ import RegisterButton from "./RegisterButton"; const meta: Meta = { title: "Core/Button/RegisterButton", component: RegisterButton, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: { label: { diff --git a/src/components/core/Button/ResetButton/ResetButton.stories.tsx b/src/components/core/Button/ResetButton/ResetButton.stories.tsx index f071740..ec959b8 100644 --- a/src/components/core/Button/ResetButton/ResetButton.stories.tsx +++ b/src/components/core/Button/ResetButton/ResetButton.stories.tsx @@ -6,9 +6,7 @@ import ResetButton from "./ResetButton"; const meta: Meta = { title: "Core/Button/ResetButton", component: ResetButton, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: { label: { diff --git a/src/components/core/Button/RoundButton/RoundButton.stories.tsx b/src/components/core/Button/RoundButton/RoundButton.stories.tsx index 3ee6e54..73c3449 100644 --- a/src/components/core/Button/RoundButton/RoundButton.stories.tsx +++ b/src/components/core/Button/RoundButton/RoundButton.stories.tsx @@ -5,9 +5,7 @@ import RoundButton from "./RoundButton"; const meta: Meta = { title: "Core/Button/RoundButton", component: RoundButton, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: { label: { diff --git a/src/components/core/Button/SquareTabButton/SquareTabButton.stories.tsx b/src/components/core/Button/SquareTabButton/SquareTabButton.stories.tsx index 3c896e9..baae737 100644 --- a/src/components/core/Button/SquareTabButton/SquareTabButton.stories.tsx +++ b/src/components/core/Button/SquareTabButton/SquareTabButton.stories.tsx @@ -5,9 +5,7 @@ import SquareTabButton from "./SquareTabButton"; const meta: Meta = { title: "Core/Button/SquareTabButton", component: SquareTabButton, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: { active: { diff --git a/src/components/core/Card/EmptyFestivalCard/EmptyFestivalCard.stories.tsx b/src/components/core/Card/EmptyFestivalCard/EmptyFestivalCard.stories.tsx index 4b216c0..45e7820 100644 --- a/src/components/core/Card/EmptyFestivalCard/EmptyFestivalCard.stories.tsx +++ b/src/components/core/Card/EmptyFestivalCard/EmptyFestivalCard.stories.tsx @@ -6,9 +6,7 @@ import EmptyFestivalCard from "./EmptyFestivalCard"; const meta: Meta = { title: "Card/EmptyFestivalCard", component: EmptyFestivalCard, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: {}, }; diff --git a/src/components/core/Card/TrendFestivalCard/TrendFestivalCard.stories.tsx b/src/components/core/Card/TrendFestivalCard/TrendFestivalCard.stories.tsx index 1c69dd6..e710f92 100644 --- a/src/components/core/Card/TrendFestivalCard/TrendFestivalCard.stories.tsx +++ b/src/components/core/Card/TrendFestivalCard/TrendFestivalCard.stories.tsx @@ -6,7 +6,6 @@ const meta: Meta = { title: "Card/TrendFestivalCard", component: TrendFestivalCard, parameters: { - layout: "centered", controls: { include: ["festival"] }, }, argTypes: { diff --git a/src/components/core/Card/TrendFestivalCard/TrendFestivalCard.tsx b/src/components/core/Card/TrendFestivalCard/TrendFestivalCard.tsx index 03b4371..f153083 100644 --- a/src/components/core/Card/TrendFestivalCard/TrendFestivalCard.tsx +++ b/src/components/core/Card/TrendFestivalCard/TrendFestivalCard.tsx @@ -16,8 +16,9 @@ const TrendFestivalCard: FC = ({ }) => { return (
diff --git a/src/components/core/Chip/BasicChip/BasicChip.stories.tsx b/src/components/core/Chip/BasicChip/BasicChip.stories.tsx index 587be9f..1fdda98 100644 --- a/src/components/core/Chip/BasicChip/BasicChip.stories.tsx +++ b/src/components/core/Chip/BasicChip/BasicChip.stories.tsx @@ -5,9 +5,7 @@ import BasicChip from "./BasicChip"; const meta: Meta = { title: "Core/Chip/BasicChip", component: BasicChip, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: { active: { diff --git a/src/components/core/Chip/ReviewChip/ReviewChip.stories.tsx b/src/components/core/Chip/ReviewChip/ReviewChip.stories.tsx index 039806f..046891d 100644 --- a/src/components/core/Chip/ReviewChip/ReviewChip.stories.tsx +++ b/src/components/core/Chip/ReviewChip/ReviewChip.stories.tsx @@ -5,10 +5,7 @@ import ReviewChip from "./ReviewChip"; const meta: Meta = { title: "Core/Chip/ReviewChip", component: ReviewChip, - parameters: { - layout: "centered", - }, - + parameters: {}, argTypes: { active: { control: { diff --git a/src/components/core/Chip/SearchHistoryChip/SearchHistoryChip.stories.tsx b/src/components/core/Chip/SearchHistoryChip/SearchHistoryChip.stories.tsx index 05f21d9..d52778d 100644 --- a/src/components/core/Chip/SearchHistoryChip/SearchHistoryChip.stories.tsx +++ b/src/components/core/Chip/SearchHistoryChip/SearchHistoryChip.stories.tsx @@ -5,9 +5,7 @@ import SearchHistoryChip from "./SearchHistoryChip"; const meta: Meta = { title: "Core/Chip/SearchHistoryChip", component: SearchHistoryChip, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: { label: { diff --git a/src/components/core/Divider/Divider.stories.tsx b/src/components/core/Divider/Divider.stories.tsx index c60738a..e6edf46 100644 --- a/src/components/core/Divider/Divider.stories.tsx +++ b/src/components/core/Divider/Divider.stories.tsx @@ -5,9 +5,7 @@ import Divider from "./Divider"; const meta: Meta = { title: "Core/Divider/Divider", component: Divider, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: {}, }; diff --git a/src/components/core/Input/AddressInput/AddressInput.stories.tsx b/src/components/core/Input/AddressInput/AddressInput.stories.tsx index 4515703..b425882 100644 --- a/src/components/core/Input/AddressInput/AddressInput.stories.tsx +++ b/src/components/core/Input/AddressInput/AddressInput.stories.tsx @@ -5,9 +5,7 @@ import AddressInput from "./AddressInput"; const meta: Meta = { title: "Core/Input/AddressInput", component: AddressInput, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: { label: { diff --git a/src/components/core/Input/DescriptionInput/DescriptionInput.stories.tsx b/src/components/core/Input/DescriptionInput/DescriptionInput.stories.tsx index 4ecd65d..9f4fd66 100644 --- a/src/components/core/Input/DescriptionInput/DescriptionInput.stories.tsx +++ b/src/components/core/Input/DescriptionInput/DescriptionInput.stories.tsx @@ -5,9 +5,7 @@ import DescriptionInput from "./DescriptionInput"; const meta: Meta = { title: "Core/Input/DescriptionInput", component: DescriptionInput, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: { maxlength: { diff --git a/src/components/core/Input/DurationInput/DurationInput.stories.tsx b/src/components/core/Input/DurationInput/DurationInput.stories.tsx index 346a3da..2cba473 100644 --- a/src/components/core/Input/DurationInput/DurationInput.stories.tsx +++ b/src/components/core/Input/DurationInput/DurationInput.stories.tsx @@ -6,9 +6,7 @@ import DurationInput from "./DurationInput"; const meta: Meta = { title: "Core/Input/DurationInput", component: DurationInput, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: { label: { diff --git a/src/components/core/Input/SearchInput/SearchInput.stories.tsx b/src/components/core/Input/SearchInput/SearchInput.stories.tsx index 44ce14f..be7db40 100644 --- a/src/components/core/Input/SearchInput/SearchInput.stories.tsx +++ b/src/components/core/Input/SearchInput/SearchInput.stories.tsx @@ -5,9 +5,7 @@ import SearchInput from "./SearchInput"; const meta: Meta = { title: "Core/Input/SearchInput", component: SearchInput, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: {}, }; diff --git a/src/components/core/Input/TextInput/TextInput.stories.tsx b/src/components/core/Input/TextInput/TextInput.stories.tsx index f2d0a33..aa72c8c 100644 --- a/src/components/core/Input/TextInput/TextInput.stories.tsx +++ b/src/components/core/Input/TextInput/TextInput.stories.tsx @@ -5,9 +5,7 @@ import TextInput from "./TextInput"; const meta: Meta = { title: "Core/Input/TextInput", component: TextInput, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: { maxlength: { diff --git a/src/components/core/List/BasicTitle/BasicTile.stories.tsx b/src/components/core/List/BasicTitle/BasicTile.stories.tsx index 4617ba5..efc6e63 100644 --- a/src/components/core/List/BasicTitle/BasicTile.stories.tsx +++ b/src/components/core/List/BasicTitle/BasicTile.stories.tsx @@ -5,9 +5,7 @@ import BasicTile from "./BasicTile"; const meta: Meta = { title: "List/BasicTile", component: BasicTile, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: { active: { diff --git a/src/components/core/List/FestivalTile/FestivalTile.stories.tsx b/src/components/core/List/FestivalTile/FestivalTile.stories.tsx index ae84c79..f4e2d11 100644 --- a/src/components/core/List/FestivalTile/FestivalTile.stories.tsx +++ b/src/components/core/List/FestivalTile/FestivalTile.stories.tsx @@ -1,8 +1,5 @@ import type { Meta, StoryObj } from "@storybook/react"; -import { ScrabIcon } from "@/components/icons"; - -import IconButton from "../../Button/IconButton/IconButton"; import DateTag from "../../Tag/DateTag/DateTag"; import FestivalTile from "./FestivalTile"; @@ -10,7 +7,7 @@ const meta: Meta = { title: "List/FestivalTile", component: FestivalTile, parameters: { - layout: "centered", + controls: { include: ["festival"] }, }, argTypes: { @@ -37,53 +34,13 @@ export const HomeFestivalTile: Story = { ), args: { festival: { - src: "/images/festival.png", - title: "서울 치맥 페스티벌", - location: "서울 광진구", - duration: "8월 1일 ~ 8월 4일", - dday: "D-2", - }, - }, -}; - -export const UnScrabedFestivalTile: Story = { - render: (args) => ( -
- - - - - -
- ), - args: { - festival: { - src: "/images/festival.png", - title: "서울 치맥 페스티벌", - location: "서울 광진구", - duration: "8월 1일 ~ 8월 4일", - dday: "D-2", - }, - }, -}; - -export const ScrabedFestivalTile: Story = { - render: (args) => ( -
- - - - - -
- ), - args: { - festival: { - src: "/images/festival.png", - title: "서울 치맥 페스티벌", - location: "서울 광진구", - duration: "8월 1일 ~ 8월 4일", - dday: "D-2", + festivalId: 1, + name: "한강 페스티벌", + sido: "서울", + sigungu: "광진구", + thumbnailImage: "/images/festivalTrend.png", + startDate: "2024-10-04", + endDate: "2024-10-10", }, }, }; diff --git a/src/components/core/List/FestivalTile/FestivalTile.tsx b/src/components/core/List/FestivalTile/FestivalTile.tsx index 0a4cd9a..ed6d28c 100644 --- a/src/components/core/List/FestivalTile/FestivalTile.tsx +++ b/src/components/core/List/FestivalTile/FestivalTile.tsx @@ -1,52 +1,54 @@ import Image from "next/image"; -import { ButtonHTMLAttributes, FC } from "react"; +import Link, { LinkProps } from "next/link"; +import { FC } from "react"; +import { formatToKoreanDate } from "@/lib/dayjs"; +import { FestivalListModel } from "@/model/festivalTypes"; import { cn } from "@/utils/cn"; -interface Festival { - src: string; - title: string; - location: string; - duration: string; - dday: string; +export interface FestivalTileProps extends LinkProps { + festival: FestivalListModel; + children: React.ReactNode; } -export interface Props extends ButtonHTMLAttributes { - festival: Festival; - icon: React.ReactNode; -} - -const FestivalTile: FC = ({ festival, icon, ...props }) => { +const FestivalTile: FC = ({ + festival, + children, + ...props +}) => { return ( - + ); }; diff --git a/src/components/core/List/ReviewTile/ReviewTile.stories.tsx b/src/components/core/List/ReviewTile/ReviewTile.stories.tsx index c9c0954..c900385 100644 --- a/src/components/core/List/ReviewTile/ReviewTile.stories.tsx +++ b/src/components/core/List/ReviewTile/ReviewTile.stories.tsx @@ -6,9 +6,7 @@ import ReviewTile from "./ReviewTile"; const meta: Meta = { title: "List/ReviewTile", component: ReviewTile, - parameters: { - layout: "centered", - }, + parameters: {}, }; export default meta; diff --git a/src/components/core/Progress/ProgressBar/ProgressBar.stories.tsx b/src/components/core/Progress/ProgressBar/ProgressBar.stories.tsx index 5fd1bf9..adfdc49 100644 --- a/src/components/core/Progress/ProgressBar/ProgressBar.stories.tsx +++ b/src/components/core/Progress/ProgressBar/ProgressBar.stories.tsx @@ -5,9 +5,7 @@ import ProgressBar from "./ProgressBar"; const meta: Meta = { title: "Core/Progress/ProgressBar", component: ProgressBar, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: { totalSteps: { diff --git a/src/components/core/Progress/ProgressCircle/ProgressCircle.stories.tsx b/src/components/core/Progress/ProgressCircle/ProgressCircle.stories.tsx index c7b44b0..68e84ba 100644 --- a/src/components/core/Progress/ProgressCircle/ProgressCircle.stories.tsx +++ b/src/components/core/Progress/ProgressCircle/ProgressCircle.stories.tsx @@ -5,9 +5,7 @@ import ProgressCircle from "./ProgressCircle"; const meta: Meta = { title: "Core/Progress/ProgressCircle", component: ProgressCircle, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: {}, }; diff --git a/src/components/core/Progress/ProgressUnit/ProgressUnit.stories.tsx b/src/components/core/Progress/ProgressUnit/ProgressUnit.stories.tsx index 92a333c..216d61d 100644 --- a/src/components/core/Progress/ProgressUnit/ProgressUnit.stories.tsx +++ b/src/components/core/Progress/ProgressUnit/ProgressUnit.stories.tsx @@ -5,9 +5,7 @@ import ProgressUnit from "./ProgressUnit"; const meta: Meta = { title: "Core/Progress/ProgressUnit", component: ProgressUnit, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: { active: { diff --git a/src/components/core/Tag/DateTag/DateTag.stories.tsx b/src/components/core/Tag/DateTag/DateTag.stories.tsx index 1995b43..af027c1 100644 --- a/src/components/core/Tag/DateTag/DateTag.stories.tsx +++ b/src/components/core/Tag/DateTag/DateTag.stories.tsx @@ -5,9 +5,7 @@ import DateTag from "./DateTag"; const meta: Meta = { title: "Core/Tag/DateTag", component: DateTag, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: { label: { diff --git a/src/components/core/Tag/DateTag/DateTag.tsx b/src/components/core/Tag/DateTag/DateTag.tsx index 2afe6da..9b8c484 100644 --- a/src/components/core/Tag/DateTag/DateTag.tsx +++ b/src/components/core/Tag/DateTag/DateTag.tsx @@ -20,7 +20,7 @@ const DateTag: FC = ({ label, className, ...props }) => { className={cn( className, "w-auto h-[26px] duration-300 rounded-[6px] py-[6px] px-[12px]", - "flex items-center justify-center", + "flex items-center justify-center whitespace-nowrap", "bg-primary-01 text-caption1-medium text-gray-scale-0", )} {...props} diff --git a/src/components/core/Tag/RecommendFestivalTag/RecommedFestivalTag.stories.tsx b/src/components/core/Tag/RecommendFestivalTag/RecommedFestivalTag.stories.tsx index 18a3e15..1688d79 100644 --- a/src/components/core/Tag/RecommendFestivalTag/RecommedFestivalTag.stories.tsx +++ b/src/components/core/Tag/RecommendFestivalTag/RecommedFestivalTag.stories.tsx @@ -5,9 +5,7 @@ import RecommedFestivalTag from "./RecommedFestivalTag"; const meta: Meta = { title: "Core/Tag/RecommedFestivalTag", component: RecommedFestivalTag, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: { label: { diff --git a/src/components/core/Tag/ReviewTag/ReviewTag.stories.tsx b/src/components/core/Tag/ReviewTag/ReviewTag.stories.tsx index 728393e..9f132c5 100644 --- a/src/components/core/Tag/ReviewTag/ReviewTag.stories.tsx +++ b/src/components/core/Tag/ReviewTag/ReviewTag.stories.tsx @@ -5,9 +5,7 @@ import ReviewTag from "./ReviewTag"; const meta: Meta = { title: "Core/Tag/ReviewTag", component: ReviewTag, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: { label: { diff --git a/src/components/imageUploader/ImageUploader.stories.tsx b/src/components/imageUploader/ImageUploader.stories.tsx index 4cc0de6..01256e5 100644 --- a/src/components/imageUploader/ImageUploader.stories.tsx +++ b/src/components/imageUploader/ImageUploader.stories.tsx @@ -5,9 +5,7 @@ import ImageUploader from "./ImageUploader"; const meta: Meta = { title: "ImageUploader", component: ImageUploader, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: { label: { diff --git a/src/components/rating/Rating.stories.tsx b/src/components/rating/Rating.stories.tsx index 910f0cb..3eae6f6 100644 --- a/src/components/rating/Rating.stories.tsx +++ b/src/components/rating/Rating.stories.tsx @@ -5,9 +5,7 @@ import Ratings from "./Ratings"; const meta: Meta = { title: "Ratings", component: Ratings, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: { rating: { diff --git a/src/layout/Mobile/MobileHeader/DefaultHeader/DefaultHeader.stories.tsx b/src/layout/Mobile/MobileHeader/DefaultHeader/DefaultHeader.stories.tsx index 467a7fb..ba19df5 100644 --- a/src/layout/Mobile/MobileHeader/DefaultHeader/DefaultHeader.stories.tsx +++ b/src/layout/Mobile/MobileHeader/DefaultHeader/DefaultHeader.stories.tsx @@ -6,9 +6,7 @@ import DefaultHeader from "./DefaultHeader"; const meta: Meta = { title: "Header/DefaultHeader", component: DefaultHeader, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: { label: { diff --git a/src/layout/Mobile/MobileHeader/FestivalHeader/FestivalHeader.stories.tsx b/src/layout/Mobile/MobileHeader/FestivalHeader/FestivalHeader.stories.tsx index 39967fa..1008c7d 100644 --- a/src/layout/Mobile/MobileHeader/FestivalHeader/FestivalHeader.stories.tsx +++ b/src/layout/Mobile/MobileHeader/FestivalHeader/FestivalHeader.stories.tsx @@ -6,9 +6,7 @@ import FestivalHeader from "./FestivalHeader"; const meta: Meta = { title: "Header/FestivalHeader", component: FestivalHeader, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: {}, }; diff --git a/src/layout/Mobile/MobileHeader/HomeHeader/HomeHeader.stories.tsx b/src/layout/Mobile/MobileHeader/HomeHeader/HomeHeader.stories.tsx index a7bab84..b7ef046 100644 --- a/src/layout/Mobile/MobileHeader/HomeHeader/HomeHeader.stories.tsx +++ b/src/layout/Mobile/MobileHeader/HomeHeader/HomeHeader.stories.tsx @@ -6,9 +6,7 @@ import HomeHeader from "./HomeHeader"; const meta: Meta = { title: "Header/HomeHeader", component: HomeHeader, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: {}, }; diff --git a/src/layout/Mobile/MobileHeader/SearchHeader/SearchHeader.stories.tsx b/src/layout/Mobile/MobileHeader/SearchHeader/SearchHeader.stories.tsx index 0a0821b..2e88c6c 100644 --- a/src/layout/Mobile/MobileHeader/SearchHeader/SearchHeader.stories.tsx +++ b/src/layout/Mobile/MobileHeader/SearchHeader/SearchHeader.stories.tsx @@ -6,9 +6,7 @@ import SearchHeader from "./SearchHeader"; const meta: Meta = { title: "Header/SearchHeader", component: SearchHeader, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: {}, }; diff --git a/src/layout/Mobile/NavigationBar/NavigationBar.stories.tsx b/src/layout/Mobile/NavigationBar/NavigationBar.stories.tsx index c5a46f8..f72ad59 100644 --- a/src/layout/Mobile/NavigationBar/NavigationBar.stories.tsx +++ b/src/layout/Mobile/NavigationBar/NavigationBar.stories.tsx @@ -7,9 +7,7 @@ import NavigationBar from "."; const meta: Meta = { title: "NavigationBar", component: NavigationBar, - parameters: { - layout: "centered", - }, + parameters: {}, argTypes: {}, }; diff --git a/src/mocks/data/festivalMocks/hotFestivalHandler.ts b/src/mocks/data/festivalMocks/hotFestivalHandler.ts index 78910fa..4da6a85 100644 --- a/src/mocks/data/festivalMocks/hotFestivalHandler.ts +++ b/src/mocks/data/festivalMocks/hotFestivalHandler.ts @@ -1,12 +1,12 @@ import { faker } from "@faker-js/faker"; -import { http, HttpResponse } from "msw"; +import { delay, http, HttpResponse } from "msw"; export const FestivalHandler = [ http.get( "https://odiga.shop/api/v1/festivals/mostlike", async ({ request }) => { - await new Promise((resolve) => setTimeout(resolve, 300)); + await delay(500); const url = new URL(request.url); const page = url.searchParams.get("page"); @@ -93,7 +93,7 @@ const GenerateHotFestivalRespone = (page: number = 0, size: number = 6) => { pageNumber: page, pageSize: size, totalElements: festivals.length, - totalPages: Math.ceil(festivals.length / size), + totalPages: 8, }, }; }; diff --git a/src/mocks/data/festivalMocks/thisWeekFestivalHandler.ts b/src/mocks/data/festivalMocks/thisWeekFestivalHandler.ts new file mode 100644 index 0000000..cd606da --- /dev/null +++ b/src/mocks/data/festivalMocks/thisWeekFestivalHandler.ts @@ -0,0 +1,99 @@ +import { faker } from "@faker-js/faker"; +import { delay, http, HttpResponse } from "msw"; + +export const thisWeekFestivalHandler = [ + http.get( + "https://odiga.shop/api/v1/festivals/thisweek", + + async ({ request }) => { + await delay(500); + + const url = new URL(request.url); + const page = url.searchParams.get("page"); + const size = url.searchParams.get("size"); + + return HttpResponse.json( + GenerateHotFestivalRespone(Number(page), Number(size)), + ); + }, + ), +]; + +const GenerateHotFestivalRespone = (page: number = 0, size: number = 6) => { + const formatDate = (date: Date) => { + const year = date.getFullYear(); + const month = String(date.getMonth() + 1).padStart(2, "0"); + const day = String(date.getDate()).padStart(2, "0"); + return `${year}-${month}-${day}`; + }; + const festivals = [ + { + festivalId: 1 * page + 1, + name: faker.company.name(), + sido: "서울", + sigungu: "광진구", + thumbnailImage: "https://placehold.co/400.png", + startDate: formatDate(faker.date.future()), + endDate: formatDate(faker.date.future()), + }, + { + festivalId: 2 * page + 1, + name: faker.company.name(), + sido: "서울", + sigungu: "광서구", + thumbnailImage: "https://placehold.co/400.png", + startDate: formatDate(faker.date.future()), + endDate: formatDate(faker.date.future()), + }, + { + festivalId: 3 * page + 1, + name: faker.company.name(), + sido: "부산", + sigungu: "해운대구", + thumbnailImage: "https://placehold.co/400.png", + startDate: formatDate(faker.date.future()), + endDate: formatDate(faker.date.future()), + }, + { + festivalId: 4 * page + 1, + name: faker.company.name(), + sido: "전북", + sigungu: "전주시", + thumbnailImage: "https://placehold.co/400.png", + startDate: formatDate(faker.date.future()), + endDate: formatDate(faker.date.future()), + }, + { + festivalId: 5 * page + 1, + name: faker.company.name(), + sido: "강원", + sigungu: "속초시", + thumbnailImage: "https://placehold.co/400.png", + startDate: formatDate(faker.date.future()), + endDate: formatDate(faker.date.future()), + }, + { + festivalId: 6 * page + 1, + name: faker.company.name(), + sido: "제주", + sigungu: "제주시", + thumbnailImage: "https://placehold.co/400.png", + startDate: formatDate(faker.date.future()), + endDate: formatDate(faker.date.future()), + }, + ]; + + return { + statusCode: 200, + status: "OK", + message: "스크랩 다건 조회 성공", + data: { + content: festivals, + offset: 1, + pageNumber: page, + pageSize: size, + totalElements: festivals.length, + totalPages: 8, + }, + }; +}; diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts index 39f934b..4d94772 100644 --- a/src/mocks/handlers.ts +++ b/src/mocks/handlers.ts @@ -1,3 +1,4 @@ import { FestivalHandler } from "./data/festivalMocks/hotFestivalHandler"; +import { thisWeekFestivalHandler } from "./data/festivalMocks/thisWeekFestivalHandler"; -export const handlers = [...FestivalHandler]; +export const handlers = [...FestivalHandler, ...thisWeekFestivalHandler]; diff --git a/src/model/festivalTypes.ts b/src/model/festivalTypes.ts new file mode 100644 index 0000000..b44f6a4 --- /dev/null +++ b/src/model/festivalTypes.ts @@ -0,0 +1,29 @@ +export type PaginationParamter = { + page: number; + size: number; +}; + +export interface PaginationMetaData { + offset: number; + pageNumber: number; + pageSize: number; + totalElements: number; + totalPages: number; +} + +export type FestivalListModel = { + festivalId: number; + name: string; + sido: string; + sigungu: string; + thumbnailImage: string; + startDate: string; + endDate: string; +}; + +export type FestivalResponse = { + statusCode: number; + status: string; + message: string; + data: T; +};