Fix(client): 타임테이블 이미지 저장 개선

apps/client/src/pages/time-table/components/time-table-board/time-table-board.tsx

@@ -12,6 +12,7 @@ import { useEffect, useState } from 'react';
 import { usePatchTimeTableMutation } from '@pages/time-table/hooks/use-patch-time-table-mutation';
 
 interface Props {
+  clickedFestivalTitle: string | null;
   timeTableInfo: TimeTableInfo;
   isEditTimeTableMode: boolean;
   isFestivalDeleteMode: boolean;
@@ -20,14 +21,15 @@ interface Props {
 }
 
 const TimeTableBoard = ({
+  clickedFestivalTitle,
   timeTableInfo,
   isEditTimeTableMode,
   isFestivalDeleteMode,
   isComplete,
   onToggleComplete,
 }: Props) => {
   const { elementRef, downloadImage } = useImageDownload<HTMLDivElement>({
-    fileName: 'timetable',
+    fileName: `${clickedFestivalTitle}`,
   });
   const [openHour, openMin] = parseTimeString(timeTableInfo.ticketOpenAt);
   const isHalfHourOpen = openMin === HALF_HOUR_TO_MINUTES;

apps/client/src/pages/time-table/hooks/use-button-selection.ts

@@ -14,6 +14,9 @@ export const useButtonSelection = (festivals: Festival[]) => {
   const [clickedFestivalId, setClickedFestivalId] = useState<number | null>(
     festivals.length > 0 ? festivals[0].festivalId : null,
   );
+  const [clickedFestivalTitle, setClickedFestivalTitle] = useState<
+    string | null
+  >(festivals.length > 0 ? festivals[0].title : null);
 
   const festivalDatesMap = useMemo(
     () =>
@@ -40,19 +43,20 @@ export const useButtonSelection = (festivals: Festival[]) => {
       : null,
   );
 
-  const handleFestivalClick = (festivalId: number) => {
+  const handleFestivalClick = (festivalId: number, title: string) => {
     setClickedFestivalId(festivalId);
+    setClickedFestivalTitle(title);
     const newDates = festivalDatesMap.get(festivalId) || [];
     setSelectedFestivalDateId(
       newDates.length > 0 ? newDates[0].festivalDateId : null,
     );
   };
-
   return {
     clickedFestivalId,
     selectedFestivalDates,
-    handleFestivalClick,
     selectedFestivalDateId,
+    clickedFestivalTitle,
+    handleFestivalClick,
     setSelectedFestivalDateId,
   };
 };

apps/client/src/pages/time-table/page/time-table.tsx

@@ -1,3 +1,4 @@
+import { useState, useEffect } from 'react';
 import { Spacing } from '@confeti/design-system';
 import TimeTableBoard from '@pages/time-table/components/time-table-board/time-table-board';
 import EditFloatingButton from '@pages/time-table/components/edit/edit-floating-button';
@@ -11,9 +12,7 @@ import {
   useFestivalButtonData,
   useFestivalTimetableData,
 } from '../hooks/use-festival-data';
-
 import * as styles from './time-table.css';
-import { useState, useEffect } from 'react';
 
 const TimeTable = () => {
   const {
@@ -39,8 +38,9 @@ const TimeTable = () => {
   const {
     clickedFestivalId,
     selectedFestivalDates,
-    handleFestivalClick,
     selectedFestivalDateId,
+    clickedFestivalTitle,
+    handleFestivalClick,
     setSelectedFestivalDateId,
   } = useButtonSelection(festivals);
 
@@ -77,7 +77,7 @@ const TimeTable = () => {
                       src={logoUrl}
                       alt={title}
                       text={title}
-                      onClick={() => handleFestivalClick(festivalId)}
+                      onClick={() => handleFestivalClick(festivalId, title)}
                       isClicked={clickedFestivalId === festivalId}
                     />
                     {festivalId && (
@@ -99,6 +99,7 @@ const TimeTable = () => {
           <Spacing />
           {boardData && (
             <TimeTableBoard
+              clickedFestivalTitle={clickedFestivalTitle}
               timeTableInfo={boardData}
               isEditTimeTableMode={isEditTimeTableMode}
               isFestivalDeleteMode={isFestivalDeleteMode}

packages/design-system/src/components/ticketing-carousel/ticketing-carousel.css.ts

@@ -55,6 +55,8 @@ export const textSection = style({
 });
 
 export const description = style({
+  ...themeVars.display.flexColumn,
+  gap: '0.8rem',
   position: 'absolute',
   top: '1.6rem',
 });

packages/design-system/src/components/ticketing-carousel/ticketing-carousel.tsx

@@ -128,12 +128,17 @@ const CarouselContainer = ({
 }: CarouselContainerProps) => {
   const navigate = useNavigate();
 
-  const handleContainerClick = () => {
-    navigate(`/${performanceType}-detail/${currentImageId}`);
+  const handleNavigateDetail = () => {
+    if (performanceType === 'FESTIVAL') {
+      navigate(`/festival-detail/${currentImageId}`);
+    }
+    if (performanceType === 'CONCERT') {
+      navigate(`/concert-detail/${currentImageId}`);
+    }
   };
 
   return (
-    <div className={styles.container} onClick={handleContainerClick}>
+    <div className={styles.container} onClick={handleNavigateDetail}>
       {children}
     </div>
   );