Feat(client): 캘린더 컴포넌트 구현

apps/client/src/pages/confeti/components/summary.tsx

@@ -4,6 +4,7 @@ import {
   BtnHeartDefault24,
   BtnHeartFilled24,
 } from 'node_modules/@confeti/design-system/src/icons/src';
+import { WEEKDAYS } from '@shared/constants/day';
 
 interface SummaryProps {
   title: string;
@@ -20,13 +21,13 @@ interface SummaryProps {
 const formatReserveDate = (reserveAt: string): string => {
   const date = new Date(reserveAt);
 
-  const weekdays = ['일', '월', '화', '수', '목', '금', '토'];
+  const weekData = WEEKDAYS;
 
   const hours = date.getHours();
   const period = hours >= 12 ? '오후' : '오전';
   const hour12 = hours % 12 === 0 ? 12 : hours % 12;
 
-  const formattedDate = `${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일 (${weekdays[date.getDay()]}) ${period}${hour12}시`;
+  const formattedDate = `${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일 (${weekData[date.getDay()]}) ${period}${hour12}시`;
 
   return formattedDate;
 };

apps/client/src/pages/time-table/components/calender/calender.css.ts

@@ -0,0 +1,75 @@
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+import { themeVars } from '@confeti/design-system/styles';
+
+export const container = style({
+  padding: '2rem',
+});
+
+export const yearSection = style({
+  ...themeVars.fontStyles.title5_b_15,
+  color: themeVars.color.black,
+});
+
+export const dateSection = style({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(7,1fr)',
+  padding: '2.1rem 0rem',
+  gap: '2rem',
+});
+
+export const dateItems = style({
+  ...themeVars.display.flexColumnCenter,
+  width: '3rem',
+  height: '5.5rem',
+  gap: '0.6rem',
+});
+
+export const dayNum = recipe({
+  base: {
+    ...themeVars.display.flexCenter,
+    width: '3rem',
+    height: '3rem',
+    borderRadius: '1.5rem',
+    cursor: 'pointer',
+    background: 'transparent',
+  },
+  variants: {
+    isSelected: {
+      true: {
+        background: themeVars.color.confeti_lime,
+        transition: 'background 0.3s ease',
+      },
+    },
+    hasFestivalDate: {
+      true: {
+        ...themeVars.fontStyles.title4_b_16,
+        color: themeVars.color.black,
+      },
+      false: {
+        ...themeVars.fontStyles.body1_r_16,
+        color: themeVars.color.gray500,
+        cursor: 'default',
+      },
+    },
+  },
+});
+
+export const dayKo = recipe({
+  base: {
+    ...themeVars.display.flexCenter,
+    background: 'transparent',
+  },
+  variants: {
+    hasFestivalDate: {
+      true: {
+        ...themeVars.fontStyles.title4_b_16,
+        color: themeVars.color.black,
+      },
+      false: {
+        ...themeVars.fontStyles.body1_r_16,
+        color: themeVars.color.gray500,
+      },
+    },
+  },
+});

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

@@ -0,0 +1,59 @@
+import * as styles from './calender.css';
+import { cn } from '@confeti/design-system/utils';
+import {
+  useFormattedYear,
+  useFormattedWeek,
+  useDayNumSelection,
+  createFestivalDateMap,
+  checkFestivalDateStatus,
+} from '@pages/time-table/hooks/use-data-formatted';
+
+interface CalenderProps {
+  festivalDates: { festivalDateId: number; festivalAt: string }[];
+}
+
+const Calender = ({ festivalDates }: CalenderProps) => {
+  const firstDate = festivalDates[0]?.festivalAt;
+  const { weekDays } = useFormattedWeek(firstDate);
+  const { selectedDayNumeId, handleDayNumClick } = useDayNumSelection();
+  const festivalDateMap = createFestivalDateMap(festivalDates);
+
+  const dateItems = weekDays.map((day, id) => ({
+    ...day,
+    ...checkFestivalDateStatus(festivalDateMap, id, selectedDayNumeId),
+  }));
+
+  return (
+    <section className={styles.container}>
+      <div className={styles.yearSection}>
+        <span>{useFormattedYear(firstDate)}</span>
+      </div>
+      <div className={styles.dateSection}>
+        {dateItems.map(
+          ({ date, dayKo, festivalDateId, isSelected, hasFestivalDate }) => (
+            <div className={styles.dateItems} key={festivalDateId}>
+              <p
+                className={cn(styles.dayNum({ isSelected, hasFestivalDate }))}
+                onClick={() =>
+                  festivalDateId && handleDayNumClick(festivalDateId)
+                }
+              >
+                {date}
+              </p>
+              <p
+                className={cn(styles.dayKo({ hasFestivalDate }))}
+                onClick={() =>
+                  festivalDateId && handleDayNumClick(festivalDateId)
+                }
+              >
+                {dayKo}
+              </p>
+            </div>
+          ),
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default Calender;

apps/client/src/pages/time-table/components/info/info-button.css.ts

@@ -71,6 +71,18 @@ export const ImageVariants = recipe({
       },
       lg: {},
     },
+    isClicked: {
+      true: {
+        border: '2.5px solid transparent',
+        backgroundImage: `
+        radial-gradient(circle at bottom, #ffffff 100%, rgba(255, 255, 255, 0) 100%),
+        linear-gradient(to top,rgb(234, 255, 175) 30%,rgb(174, 225, 32) 100%)
+      `,
+        backgroundOrigin: 'border-box',
+        backgroundClip: 'content-box, border-box',
+        transition: 'background-image 0.4s ease, border-color 0.4s ease',
+      },
+    },
   },
 });
 

apps/client/src/pages/time-table/components/info/info-button.tsx

@@ -36,12 +36,15 @@ interface InfoItemsProps {
   alt: string;
   text: string;
   size?: SizeType;
+  isClicked?: boolean;
+  onClick(): void;
 }
 
 interface ItemImagesProps {
   size?: SizeType;
   src: string;
   alt: string;
+  isClicked?: boolean;
 }
 
 interface ItemTextProps {
@@ -70,17 +73,24 @@ const FixedButton = ({ size = 'md' }: FixedButtonProps) => (
   </>
 );
 
-const InfoItems = ({ size = 'md', src, alt, text }: InfoItemsProps) => (
+const InfoItems = ({
+  size = 'md',
+  src,
+  alt,
+  text,
+  onClick,
+  isClicked,
+}: InfoItemsProps) => (
   <>
-    <div className={cn(ItemsVariants({ size }))}>
-      <InfoButton.ImageField src={src} alt={alt} />
+    <div className={cn(ItemsVariants({ size }))} onClick={onClick}>
+      <InfoButton.ImageField src={src} alt={alt} isClicked={isClicked} />
       <InfoButton.TextField text={text} color="black" />
     </div>
   </>
 );
 
-const ItemImage = ({ size = 'md', src, alt }: ItemImagesProps) => (
-  <img className={cn(ImageVariants({ size }))} src={src} alt={alt} />
+const ItemImage = ({ size = 'md', src, alt, isClicked }: ItemImagesProps) => (
+  <img className={cn(ImageVariants({ size, isClicked }))} src={src} alt={alt} />
 );
 
 const ItemText = ({ size = 'md', text, color }: ItemTextProps) => (

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

@@ -0,0 +1,50 @@
+import { useState, useMemo } from 'react';
+
+interface Festival {
+  festivalId: number;
+  title: string;
+  logoUrl: string;
+  festivalDates: Array<{
+    festivalDateId: number;
+    festivalAt: string;
+  }>;
+}
+
+const useButtonSelection = (festivals: Festival[]) => {
+  // 초기 선택된 축제 ID 설정
+  const [clickedFestivalId, setClickedFestivalId] = useState<number | null>(
+    festivals.length > 0 ? festivals[0].festivalId : null,
+  );
+
+  // festival ID와 dates를 매핑하는 Map 생성
+  const festivalDatesMap = useMemo(
+    () =>
+      new Map(
+        festivals.map((festival) => [
+          festival.festivalId,
+          festival.festivalDates,
+        ]),
+      ),
+    [festivals],
+  );
+
+  // 축제 선택/해제 핸들러
+  const handleFestivalClick = (festivalId: number) => {
+    setClickedFestivalId((prevId) =>
+      prevId === festivalId ? null : festivalId,
+    );
+  };
+
+  // 선택된 축제의 날짜들 가져오기
+  const selectedFestivalDates = clickedFestivalId
+    ? (festivalDatesMap.get(clickedFestivalId) ?? [])
+    : [];
+
+  return {
+    clickedFestivalId,
+    selectedFestivalDates,
+    handleFestivalClick,
+  };
+};
+
+export default useButtonSelection;

apps/client/src/pages/time-table/hooks/use-data-formatted.ts

@@ -0,0 +1,87 @@
+import { useState, useMemo } from 'react';
+import { WEEKDAYS } from '@shared/constants/day';
+
+const YEAR_MESSAGE = {
+  ERR_MESSAGE: '',
+};
+
+const weekData = WEEKDAYS;
+
+export const useFormattedYear = (date: string | null) => {
+  if (!date) {
+    return ``;
+  }
+
+  const [year, month] = date.split('.') || [];
+  if (!year || !month) {
+    return `${YEAR_MESSAGE.ERR_MESSAGE}`;
+  }
+
+  return `${year}년 ${parseInt(month, 10)}월`;
+};
+
+/**
+ * 특정 날짜 기준으로 일주일 동안의 날짜(num) 값을 계산하고 반환함
+ */
+export const useFormattedWeek = (date: string | null) => {
+  return useMemo(() => {
+    if (!date) return { weekDays: [] };
+
+    const [year, month, day] = date
+      .split('.')
+      .map((part) => parseInt(part, 10));
+    if (isNaN(year) || isNaN(month) || isNaN(day)) return { weekDays: [] };
+
+    const baseDate = new Date(year, month - 1, day);
+    const weekDays = Array.from({ length: 7 }, (_, i) => {
+      const currentDate = new Date(baseDate);
+      currentDate.setDate(baseDate.getDate() + i);
+      return {
+        date: currentDate.getDate(),
+        dayKo: weekData[currentDate.getDay()],
+      };
+    });
+
+    return { weekDays };
+  }, [date]);
+};
+
+export const useDayNumSelection = () => {
+  const [selectedDayNumeId, setSelectedDateId] = useState<number | null>(null);
+
+  const handleDayNumClick = (festivalDateId: number) => {
+    setSelectedDateId((prev) =>
+      prev === festivalDateId ? null : festivalDateId,
+    );
+  };
+
+  return {
+    selectedDayNumeId,
+    handleDayNumClick,
+  };
+};
+
+// festivalDateMap 생성 함수
+export const createFestivalDateMap = (
+  festivalDates: { festivalDateId: number }[],
+) => {
+  return new Map(
+    festivalDates.map((festival, index) => [
+      index + 1,
+      festival.festivalDateId,
+    ]),
+  );
+};
+// isSelected 처리 함수
+export const checkFestivalDateStatus = (
+  festivalDateMap: Map<number, number>,
+  id: number,
+  selectedDateId: number | null,
+) => {
+  const festivalDateId = festivalDateMap.get(id + 1);
+  const isSelected: boolean | undefined =
+    festivalDateId && selectedDateId === festivalDateId ? true : undefined;
+  const hasFestivalDate = festivalDateId !== undefined;
+
+  return { festivalDateId, isSelected, hasFestivalDate };
+};