Feat(audience): 내 관람 공연 카드 클릭 시 공연 상세 페이지로 이동 구현

apps/audience/src/entities/festival/api/festival.ts

@@ -7,26 +7,22 @@ import type {
   WishListResponseData,
 } from '@shared/types/festival';
 import type {
-  AllFestivalsResponse,
+  FestivalsResponse,
   NicknameResponse,
-  UpcomingFestivalResponse,
-  UpcomingFestivalsResponse,
+  UpcomingFestivalItem,
 } from '@shared/types/home-response';
 
 export const getAllFestivals = (params: PageSizeParams = {}) =>
-  get<AllFestivalsResponse, PageSizeParams>(
-    END_POINT.GET_ALL_FESTIVALS,
-    params,
-  );
+  get<FestivalsResponse, PageSizeParams>(END_POINT.GET_ALL_FESTIVALS, params);
 
 export const getPlannedFestivals = (params: PageSizeParams = {}) =>
-  get<UpcomingFestivalsResponse, PageSizeParams>(
+  get<FestivalsResponse, PageSizeParams>(
     END_POINT.GET_PLANNED_FESTIVALS,
     params,
   );
 
 export const getUpcomingFestival = (params: PageSizeParams = {}) =>
-  get<UpcomingFestivalResponse, PageSizeParams>(
+  get<UpcomingFestivalItem, PageSizeParams>(
     END_POINT.GET_UPCOMING_FESTIVAL,
     params,
   );

apps/audience/src/shared/types/festival.ts

@@ -1,3 +1,22 @@
+export interface Festival {
+  festivalId: number;
+  title: string;
+  mainImageUrl: string;
+  period: string;
+  status: '관람 중' | '관람 예정' | '관람 완료';
+  wishList: boolean;
+  dDay?: number;
+}
+
+export interface PaginationResponse {
+  currentPage: number;
+  totalPages: number;
+  totalElements: number;
+  size: number;
+  hasNext: boolean;
+  hasPrevious: boolean;
+}
+
 export interface WishListRequest {
   wishList: boolean;
 }

apps/audience/src/shared/types/home-response.ts

@@ -1,44 +1,6 @@
-export interface AllFestivalItem {
-  festivalId: number;
-  title: string;
-  mainImageUrl: string;
-  location: string;
-  period: string;
-  wishList: boolean;
-  dDay: number;
-}
+import type { Festival, PaginationResponse } from './festival';
 
 export interface UpcomingFestivalItem {
-  festivalId: number;
-  title: string;
-  mainImageUrl: string;
-  location: string;
-  period: string;
-  status: string;
-  wishList: boolean;
-  dDay: number;
-}
-
-export interface PaginationResponse {
-  currentPage: number;
-  totalPages: number;
-  totalElements: number;
-  size: number;
-  hasNext: boolean;
-  hasPrevious: boolean;
-}
-
-export interface AllFestivalsResponse {
-  festivals: AllFestivalItem[];
-  pagination: PaginationResponse;
-}
-
-export interface UpcomingFestivalsResponse {
-  festivals: UpcomingFestivalItem[];
-  pagination: PaginationResponse;
-}
-
-export interface UpcomingFestivalResponse {
   festivalId: number;
   title: string;
   mainImageUrl: string;
@@ -48,6 +10,11 @@ export interface UpcomingFestivalResponse {
   dday: number;
 }
 
+export interface FestivalsResponse {
+  festivals: Festival[];
+  pagination: PaginationResponse;
+}
+
 export interface NicknameResponse {
   nickname: string;
 }

apps/audience/src/shared/types/my-events-response.ts

@@ -1,22 +1,6 @@
-export interface MyEventsFestival {
-  festivalId: number;
-  title: string;
-  mainImageUrl: string;
-  period: string;
-  status: string;
-  wishList: boolean;
-}
-
-export interface MyEventsPagination {
-  currentPage: number;
-  totalPages: number;
-  totalElements: number;
-  size: number;
-  hasNext: boolean;
-  hasPrevious: boolean;
-}
+import type { Festival, PaginationResponse } from './festival';
 
 export interface MyEventsResponse {
-  festivals: MyEventsFestival[];
-  pagination: MyEventsPagination;
+  festivals: Festival[];
+  pagination: PaginationResponse;
 }

apps/audience/src/shared/types/viewed-festival.ts

@@ -1,22 +1,5 @@
-export interface ViewedFestival {
-  festivalId: number;
-  title: string;
-  mainImageUrl: string;
-  period: string;
-  status: '관람 중' | '관람 예정' | '관람 완료';
-  wishList: boolean;
-}
-
-export interface Pagination {
-  currentPage: number;
-  totalPages: number;
-  totalElements: number;
-  size: number;
-  hasNext: boolean;
-  hasPrevious: boolean;
-}
-
+import type { Festival, PaginationResponse } from './festival';
 export interface ViewedFestivalsResponse {
-  festivals: ViewedFestival[];
-  pagination: Pagination;
+  festivals: Festival[];
+  pagination: PaginationResponse;
 }

apps/audience/src/widgets/home/components/festival-card/festival-card.tsx

@@ -1,43 +1,96 @@
+import type { KeyboardEvent } from 'react';
+
 import { CardFestival } from '@amp/ads-ui';
 import { FestivalStatusGroup } from '@amp/compositions';
 import { formatDday } from '@amp/shared/utils';
 
 import { useToggleWishListMutation } from '@features/usecase/toggle-wishlist/use-toggle-wishlist-mutation';
 
-import type {
-  AllFestivalItem,
-  UpcomingFestivalItem,
-} from '@shared/types/home-response';
+import type { Festival } from '@shared/types/festival';
 
 import FlagButton from '../flag-button/flag-button';
 
 interface FestivalCardProps {
-  festival: AllFestivalItem | UpcomingFestivalItem;
-  onClick: () => void;
+  festival: Festival;
+  onCardClick: (festivalId: number) => void;
+  showWishList?: boolean;
+  showStatus?: boolean;
 }
 
-const FestivalCard = ({ festival, onClick }: FestivalCardProps) => {
-  const { festivalId, title, period, mainImageUrl, wishList, dDay } = festival;
+const STATUS_BY_TEXT = {
+  '관람 중': 'current',
+  '관람 완료': 'completed',
+  '관람 예정': 'upcoming',
+} as const;
+
+const FestivalCard = ({
+  festival,
+  showWishList = true,
+  showStatus = true,
+  onCardClick,
+}: FestivalCardProps) => {
+  const {
+    festivalId,
+    title,
+    period,
+    mainImageUrl,
+    wishList = false,
+    status,
+    dDay,
+  } = festival;
+
   const { toggleWishList, isTogglePending } = useToggleWishListMutation(
     festivalId,
     wishList,
   );
 
+  const chipStatus =
+    STATUS_BY_TEXT[status as keyof typeof STATUS_BY_TEXT] ?? 'completed';
+
+  const handleCardClick = () => {
+    onCardClick(festivalId);
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLElement>) => {
+    if (event.currentTarget !== event.target) {
+      return;
+    }
+
+    if (event.key === 'Enter' || event.key === ' ') {
+      if (event.key === ' ') {
+        event.preventDefault();
+      }
+      handleCardClick();
+    }
+  };
+
   return (
-    <CardFestival onClick={onClick}>
+    <CardFestival
+      role='button'
+      tabIndex={0}
+      onClick={handleCardClick}
+      onKeyDown={handleKeyDown}
+    >
       <CardFestival.Image src={mainImageUrl} alt={title} />
       <CardFestival.Body title={title} date={period}>
         <CardFestival.Chip>
-          <FestivalStatusGroup dDay={formatDday(dDay)} isWishlist={wishList} />
+          <FestivalStatusGroup
+            dDay={typeof dDay === 'number' ? formatDday(dDay) : undefined}
+            status={chipStatus}
+            statusText={showStatus ? status : ''}
+            isWishlist={showWishList ? wishList : false}
+          />
         </CardFestival.Chip>
       </CardFestival.Body>
-      <CardFestival.Button>
-        <FlagButton
-          selected={wishList}
-          onChange={toggleWishList}
-          disabled={isTogglePending}
-        />
-      </CardFestival.Button>
+      {showWishList && (
+        <CardFestival.Button>
+          <FlagButton
+            selected={wishList}
+            onChange={toggleWishList}
+            disabled={isTogglePending}
+          />
+        </CardFestival.Button>
+      )}
     </CardFestival>
   );
 };

apps/audience/src/widgets/home/components/festival-section/festival-section.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from 'react-router';
+import { generatePath, useNavigate } from 'react-router';
 
 import { EmptyView } from '@amp/ads-ui';
 
@@ -9,10 +9,7 @@ import {
 } from '@widgets/home/constants/home-tabs';
 
 import { ROUTE_PATH } from '@shared/constants/path';
-import type {
-  AllFestivalItem,
-  UpcomingFestivalItem,
-} from '@shared/types/home-response';
+import type { Festival } from '@shared/types/festival';
 
 import FestivalCard from '../festival-card/festival-card';
 import HomeFestivalTabs from '../home-festival-tabs/home-festival-tabs';
@@ -22,8 +19,8 @@ import * as styles from './festival-section.css';
 interface FestivalSectionProps {
   selectedTab: TabValue;
   onTabChange: (value: TabValue) => void;
-  allFestivals: AllFestivalItem[];
-  upcomingFestivals: UpcomingFestivalItem[];
+  allFestivals: Festival[];
+  upcomingFestivals: Festival[];
 }
 
 const FestivalSection = ({
@@ -34,8 +31,12 @@ const FestivalSection = ({
 }: FestivalSectionProps) => {
   const navigate = useNavigate();
 
-  const handleMoveToFestival = (festivalId: number) => () => {
-    navigate(ROUTE_PATH.NOTICE_LIST.replace(':eventId', String(festivalId)));
+  const handleCardClick = (festivalId: number) => {
+    navigate(
+      generatePath(ROUTE_PATH.NOTICE_LIST, {
+        eventId: String(festivalId),
+      }),
+    );
   };
 
   const targetFestivals =
@@ -67,7 +68,8 @@ const FestivalSection = ({
               <li key={festival.festivalId}>
                 <FestivalCard
                   festival={festival}
-                  onClick={handleMoveToFestival(festival.festivalId)}
+                  showStatus={false}
+                  onCardClick={handleCardClick}
                 />
               </li>
             ))}