@jk-core/components 1.1.19 → 1.1.21

package/dist/src/Calendar/components/DayTile/index.d.ts

@@ -1,4 +1,4 @@
-import { CalendarRange } from '../../type';
+import { CalendarRange, CalendarView } from '../../type';
 interface Props {
     hoverDate?: Date | null;
     setHoverDate?: (date: Date | null) => void;
@@ -7,7 +7,7 @@ interface Props {
         thisMonth: string;
         date: Date;
     }[][];
-    tileContent?: () => React.ReactNode;
+    tileContent?: (date: Date | undefined, view: CalendarView) => React.ReactNode;
     handleDayClick: (day: Date) => void;
     max?: Date;
     min?: Date;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jk-core/components",
-  "version": "1.1.19",
+  "version": "1.1.21",
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "types": "./dist/index.d.ts",

package/src/Calendar/SingleCalendar.tsx

@@ -90,7 +90,7 @@ export default function SingleCalendar({
           selectedDate={[selectedDate, null]}
           weeksInMonth={weeksInMonth}
           handleDayClick={onDayClick}
-          tileContent={() => (tileContent ? tileContent(selectedDate, method) : null)}
+          tileContent={tileContent}
           max={max}
           min={min}
         />

package/src/Calendar/components/DayTile/index.tsx

@@ -1,6 +1,6 @@
 
 import { cn } from '@jk-core/utils';
-import { CalendarRange } from '@/Calendar/type';
+import { CalendarRange, CalendarView } from '@/Calendar/type';
 import isInRange from '@/Calendar/utils/isInRange';
 import isSameDay from '@/Calendar/utils/isSameDay';
 import styles from './DayTile.module.scss';
@@ -15,7 +15,7 @@ interface Props {
     thisMonth: string;
     date: Date;
   }[][];
-  tileContent?: () => React.ReactNode;
+  tileContent?: (date: Date | undefined, view: CalendarView) => React.ReactNode;
   handleDayClick: (day: Date) => void;
   max?: Date;
   min?: Date;
@@ -61,7 +61,7 @@ export default function DayTile({
                   [styles['day-tile__day--before']]: day.thisMonth !== 'this',
                   [styles['day-tile__day--hide-before']]: hideBefore && day.thisMonth === 'before',
                   [styles['day-tile__day--hide-after']]: hideAfter && day.thisMonth === 'after',
-                  [styles['day-tile__day--tile']]: !!(tileContent && tileContent()),
+                  [styles['day-tile__day--tile']]: !!(tileContent && tileContent(day.date, 'day')),
                   [styles['day-tile__day--range']]: isInRange(day.date, selectedDate) || (!!selectedDate?.[0] && (isInRange(day.date, [selectedDate[0], hoverDate]))),
                 })}
                 type="button"
@@ -96,7 +96,7 @@ export default function DayTile({
                 })}
                 >
                   {day.date.getDate()}
-                  {tileContent && tileContent()}
+                  {tileContent && tileContent(day.date, 'day')}
                 </div>
               </button>
             ))}

package/src/common/Carousel/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import styles from './Carousel.module.scss';
 
@@ -45,7 +46,12 @@ export default function Carousel({
   ];
 
   // 실제 표시되는 슬라이드 인덱스 (인디케이터용)
-  const displayIndex = currentIndex - 1;
+  // 무한 루프 시 첫/끝 슬라이드에서 인디케이터가 즉시 업데이트되도록 처리
+  const displayIndex = currentIndex === 0
+    ? totalSlides - 1 // 복제된 마지막 슬라이드(인덱스 0)에 있을 때 마지막 인디케이터 활성화
+    : currentIndex === totalSlides + 1
+      ? 0 // 복제된 첫 번째 슬라이드(인덱스 totalSlides+1)에 있을 때 첫 번째 인디케이터 활성화
+      : currentIndex - 1; // 일반적인 경우
 
   // 다음 슬라이드로 이동
   const goToNext = useCallback(() => {

package/src/common/Skeleton/Skeleton.module.scss

@@ -1,5 +1,5 @@
-$color: #eeeeee;
-$shadow: #e5e5e5;
+$color: #f2f2f2;
+$shadow: #e8e8e8;
 
 @keyframes skeleton-blink {
   0% {
@@ -32,7 +32,7 @@ $shadow: #e5e5e5;
   background-color: $color;
   border-radius: 100%;
   overflow: hidden;
-  flex-shrink: 0;
+  flex: 1 0 auto;
 }
 
 .skeleton-round {
@@ -42,7 +42,7 @@ $shadow: #e5e5e5;
   background-color: $color;
   border-radius: 10px;
   overflow: hidden;
-  flex-shrink: 0;
+  flex: 1 0 auto;
 }
 
 .skeleton-rectangle {
@@ -50,7 +50,7 @@ $shadow: #e5e5e5;
   height: 100%;
   position: relative;
   background-color: $color;
-  flex-shrink: 0;
+  flex: 1 0 auto;
   overflow: hidden;
 }