@jk-core/components 1.1.16 → 1.1.17

package/src/Calendar/ScrollCalendar.tsx

@@ -1,124 +1,124 @@
-import { useEffect, useRef, useState } from 'react';
-import { useIntersectionObserver } from '@jk-core/hooks';
-import { cn } from '@jk-core/utils';
-import styles from './Calendar.module.scss';
-import DateLabel from './components/DateLabel';
-import DayTile from './components/DayTile';
-import { CalendarRange } from './type';
-import getWeeksInMonth from './utils/getWeeksInMonth';
-
-interface CalendarProps {
-  className?: string;
-  date: CalendarRange;
-  onChange:(date:CalendarRange)=>void;
-  min: Date;
-  max: Date;
-}
-
-export default function ScrollCalendar({
-  className = '', date: selectedDate = [null, null], onChange,
-  min, max,
-}: CalendarProps) {
-  const maxCount = new Date().getMonth() - min.getMonth()
-    + 12 * (new Date().getFullYear() - min.getFullYear());
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const targetRef = useRef<HTMLDivElement>(null);
-  const [viewDate, setViewDate] = useState<Date>(selectedDate?.[0] || new Date());
-  const [hoverDate, setHoverDate] = useState<Date | null>(null);
-  const [calendarCount, setCalendarCount] = useState(Array.from({
-    length: Math.abs(viewDate.getMonth() - new Date().getMonth()
-      + (12 * (viewDate.getFullYear() - new Date().getFullYear() - 1))),
-  }).map((_, idx) => idx));
-
-  const onDayClick = (day: Date, maintenance = false) => {
-    if (!maintenance) setViewDate(day);
-    if (!selectedDate[0] || (!!selectedDate[0] && !!selectedDate[1])) {
-      onChange([day, null]);
-    }
-    if (!!selectedDate[0] && !selectedDate[1]) {
-      if (day < selectedDate[0]) {
-        onChange([day, null]);
-      } else {
-        onChange([selectedDate[0], day]);
-      }
-    }
-  };
-
-  const handleDateChange = (count: number) => {
-    const newDate = new Date();
-    newDate.setMonth(newDate.getMonth() - count);
-    return newDate;
-  };
-
-  useEffect(() => {
-    if (viewDate > max) {
-      setViewDate(max);
-    }
-    if (viewDate < min) {
-      setViewDate(min);
-    }
-  }, [viewDate, max, min]);
-
-  useEffect(() => {
-    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight });
-  }, []);
-
-  useIntersectionObserver({
-    target: targetRef as React.RefObject<HTMLDivElement>,
-    parent: scrollRef as React.RefObject<HTMLDivElement>,
-    callback: () => {
-      if (maxCount < calendarCount.length) return;
-      const length = maxCount - (calendarCount.length - 1) > 12
-        ? 12 : maxCount - (calendarCount.length - 1);
-      setCalendarCount((prev) => [...prev,
-        ...Array.from({ length }).map((_, i) => prev.length + i)]);
-    },
-    options: { threshold: 0.1 },
-  });
-
-  return (
-    <div className={cn({
-      [styles.calendar]: true,
-      [styles['calendar--range']]: true,
-      [styles['calendar--scroll']]: true,
-      [className]: !!className,
-    })}
-    >
-      {/* 일/월/년 선택 버튼 */}
-      <div className={styles.calendar__scroll} ref={scrollRef}>
-        {calendarCount.map((count) => (
-          <div
-            className={styles['calendar__scroll--wrapper']}
-            key={count}
-            ref={(maxCount > (calendarCount.length - 1)
-              && count === calendarCount.length - 2) ? targetRef : null}
-          >
-            <DateLabel
-              viewDate={handleDateChange(count)}
-              method="day"
-              onArrowClick={() => { }}
-              disabled={() => false}
-              hideArrow="all"
-              range
-            />
-            <DayTile
-              style={{ height: 'auto', minHeight: 'auto' }}
-              hoverDate={hoverDate}
-              setHoverDate={(day) => setHoverDate(day)}
-              selectedDate={selectedDate}
-              weeksInMonth={getWeeksInMonth(handleDateChange(count))}
-              handleDayClick={onDayClick}
-              hideAfter
-              hideBefore
-              max={max}
-              min={min}
-              range
-              scroll
-            />
-          </div>
-        ))}
-
-      </div>
-    </div>
-  );
-}
+import { useEffect, useRef, useState } from 'react';
+import { useIntersectionObserver } from '@jk-core/hooks';
+import { cn } from '@jk-core/utils';
+import styles from './Calendar.module.scss';
+import DateLabel from './components/DateLabel';
+import DayTile from './components/DayTile';
+import { CalendarRange } from './type';
+import getWeeksInMonth from './utils/getWeeksInMonth';
+
+interface CalendarProps {
+  className?: string;
+  date: CalendarRange;
+  onChange:(date:CalendarRange)=>void;
+  min: Date;
+  max: Date;
+}
+
+export default function ScrollCalendar({
+  className = '', date: selectedDate = [null, null], onChange,
+  min, max,
+}: CalendarProps) {
+  const maxCount = new Date().getMonth() - min.getMonth()
+    + 12 * (new Date().getFullYear() - min.getFullYear());
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const targetRef = useRef<HTMLDivElement>(null);
+  const [viewDate, setViewDate] = useState<Date>(selectedDate?.[0] || new Date());
+  const [hoverDate, setHoverDate] = useState<Date | null>(null);
+  const [calendarCount, setCalendarCount] = useState(Array.from({
+    length: Math.abs(viewDate.getMonth() - new Date().getMonth()
+      + (12 * (viewDate.getFullYear() - new Date().getFullYear() - 1))),
+  }).map((_, idx) => idx));
+
+  const onDayClick = (day: Date, maintenance = false) => {
+    if (!maintenance) setViewDate(day);
+    if (!selectedDate[0] || (!!selectedDate[0] && !!selectedDate[1])) {
+      onChange([day, null]);
+    }
+    if (!!selectedDate[0] && !selectedDate[1]) {
+      if (day < selectedDate[0]) {
+        onChange([day, null]);
+      } else {
+        onChange([selectedDate[0], day]);
+      }
+    }
+  };
+
+  const handleDateChange = (count: number) => {
+    const newDate = new Date();
+    newDate.setMonth(newDate.getMonth() - count);
+    return newDate;
+  };
+
+  useEffect(() => {
+    if (viewDate > max) {
+      setViewDate(max);
+    }
+    if (viewDate < min) {
+      setViewDate(min);
+    }
+  }, [viewDate, max, min]);
+
+  useEffect(() => {
+    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight });
+  }, []);
+
+  useIntersectionObserver({
+    target: targetRef as React.RefObject<HTMLDivElement>,
+    parent: scrollRef as React.RefObject<HTMLDivElement>,
+    callback: () => {
+      if (maxCount < calendarCount.length) return;
+      const length = maxCount - (calendarCount.length - 1) > 12
+        ? 12 : maxCount - (calendarCount.length - 1);
+      setCalendarCount((prev) => [...prev,
+        ...Array.from({ length }).map((_, i) => prev.length + i)]);
+    },
+    options: { threshold: 0.1 },
+  });
+
+  return (
+    <div className={cn({
+      [styles.calendar]: true,
+      [styles['calendar--range']]: true,
+      [styles['calendar--scroll']]: true,
+      [className]: !!className,
+    })}
+    >
+      {/* 일/월/년 선택 버튼 */}
+      <div className={styles.calendar__scroll} ref={scrollRef}>
+        {calendarCount.map((count) => (
+          <div
+            className={styles['calendar__scroll--wrapper']}
+            key={count}
+            ref={(maxCount > (calendarCount.length - 1)
+              && count === calendarCount.length - 2) ? targetRef : null}
+          >
+            <DateLabel
+              viewDate={handleDateChange(count)}
+              method="day"
+              onArrowClick={() => { }}
+              disabled={() => false}
+              hideArrow="all"
+              range
+            />
+            <DayTile
+              style={{ height: 'auto', minHeight: 'auto' }}
+              hoverDate={hoverDate}
+              setHoverDate={(day) => setHoverDate(day)}
+              selectedDate={selectedDate}
+              weeksInMonth={getWeeksInMonth(handleDateChange(count))}
+              handleDayClick={onDayClick}
+              hideAfter
+              hideBefore
+              max={max}
+              min={min}
+              range
+              scroll
+            />
+          </div>
+        ))}
+
+      </div>
+    </div>
+  );
+}

package/src/Calendar/SingleCalendar.tsx

@@ -1,121 +1,121 @@
-
-import { useEffect, useState } from 'react';
-import { cn } from '@jk-core/utils';
-import CloseIcon from '@/assets/close.svg';
-import styles from './Calendar.module.scss';
-import DateLabel from './components/DateLabel';
-import DayTile from './components/DayTile';
-import MonthTile from './components/MonthTile';
-import ViewSelector from './components/ViewSelector';
-import YearTile from './components/YearTile';
-import useCalendarNav from './hooks/useCalendarNav';
-import useDateSelect from './hooks/useDateSelect';
-import { CalendarView } from './type';
-import getWeeksInMonth from './utils/getWeeksInMonth';
-import './index.scss';
-
-interface CalendarProps {
-  className?: string;
-  date?: Date;
-  view?: CalendarView;
-  setView?: (view:CalendarView)=>void;
-  tileContent?: (date: Date | undefined, view: CalendarView) => React.ReactNode;
-  onChange?:(date:Date, method?:CalendarView)=>void;
-  min?: Date;
-  max?: Date;
-  onClose?: () => void;
-  viewSelector?: boolean;
-}
-
-export default function SingleCalendar({
-  className = '', date: selectedDate, view, setView = () => { }, tileContent, onChange = () => { }, onClose, viewSelector = true,
-  min = new Date(2000, 0, 1), max = new Date(2099, 11, 31),
-}: CalendarProps) {
-  const [viewDate, setViewDate] = useState<Date>(selectedDate || new Date());
-  const [method, setMethod] = useState<CalendarView>(view || 'day');
-  const [selectMode, setSelectMode] = useState<CalendarView>(view || 'day');
-  const weeksInMonth = getWeeksInMonth(viewDate);
-  const { onDayClick, onMonthClick, onYearClick } = useDateSelect({
-    viewDate,
-    setViewDate: (data) => setViewDate(data),
-    onChange,
-    setSelectMode,
-    method,
-    setView,
-  });
-  const { disabled, onArrowClick } = useCalendarNav({
-    method, selectMode, viewDate, setDate: setViewDate, min, max,
-  });
-
-  const selectView = (value: CalendarView) => {
-    setMethod(value);
-    setSelectMode(value);
-  };
-
-  useEffect(() => {
-    if (viewDate > max) {
-      setViewDate(max);
-    }
-    if (viewDate < min) {
-      setViewDate(min);
-    }
-  }, [viewDate, max, min]);
-
-  return (
-    <div className={cn({
-      [styles.calendar]: true,
-      [className]: !!className,
-    })}
-    >
-      <div className={styles.calendar__close}>
-        {onClose && (
-          <CloseIcon onClick={onClose} />
-        )}
-      </div>
-      {/* 일/월/년 선택 버튼 */}
-      {viewSelector && (
-        <ViewSelector method={method} selectView={selectView} />
-      )}
-      <DateLabel
-        viewDate={viewDate}
-        method={method}
-        onArrowClick={onArrowClick}
-        disabled={disabled}
-        selectMode={selectMode}
-        setSelectMode={setSelectMode}
-      />
-
-      {(method === 'day' && selectMode === 'day') && (
-        <DayTile
-          selectedDate={[selectedDate, null]}
-          weeksInMonth={weeksInMonth}
-          handleDayClick={onDayClick}
-          tileContent={() => (tileContent ? tileContent(selectedDate, method) : null)}
-          max={max}
-          min={min}
-        />
-      )}
-
-      {((method === 'month' || selectMode === 'month') && selectMode !== 'year') && (
-        <MonthTile
-          selectedDate={selectedDate}
-          viewDate={viewDate}
-          handleMonthClick={onMonthClick}
-          tileContent={tileContent}
-          max={max}
-          min={min}
-        />
-      )}
-
-      {(method === 'year' || selectMode === 'year') && (
-        <YearTile
-          selectedDate={selectedDate}
-          onClick={onYearClick}
-          tileContent={tileContent}
-          max={max}
-          min={min}
-        />
-      )}
-    </div>
-  );
-}
+
+import { useEffect, useState } from 'react';
+import { cn } from '@jk-core/utils';
+import CloseIcon from '@/assets/close.svg';
+import styles from './Calendar.module.scss';
+import DateLabel from './components/DateLabel';
+import DayTile from './components/DayTile';
+import MonthTile from './components/MonthTile';
+import ViewSelector from './components/ViewSelector';
+import YearTile from './components/YearTile';
+import useCalendarNav from './hooks/useCalendarNav';
+import useDateSelect from './hooks/useDateSelect';
+import { CalendarView } from './type';
+import getWeeksInMonth from './utils/getWeeksInMonth';
+import './index.scss';
+
+interface CalendarProps {
+  className?: string;
+  date?: Date;
+  view?: CalendarView;
+  setView?: (view:CalendarView)=>void;
+  tileContent?: (date: Date | undefined, view: CalendarView) => React.ReactNode;
+  onChange?:(date:Date, method?:CalendarView)=>void;
+  min?: Date;
+  max?: Date;
+  onClose?: () => void;
+  viewSelector?: boolean;
+}
+
+export default function SingleCalendar({
+  className = '', date: selectedDate, view, setView = () => { }, tileContent, onChange = () => { }, onClose, viewSelector = true,
+  min = new Date(2000, 0, 1), max = new Date(2099, 11, 31),
+}: CalendarProps) {
+  const [viewDate, setViewDate] = useState<Date>(selectedDate || new Date());
+  const [method, setMethod] = useState<CalendarView>(view || 'day');
+  const [selectMode, setSelectMode] = useState<CalendarView>(view || 'day');
+  const weeksInMonth = getWeeksInMonth(viewDate);
+  const { onDayClick, onMonthClick, onYearClick } = useDateSelect({
+    viewDate,
+    setViewDate: (data) => setViewDate(data),
+    onChange,
+    setSelectMode,
+    method,
+    setView,
+  });
+  const { disabled, onArrowClick } = useCalendarNav({
+    method, selectMode, viewDate, setDate: setViewDate, min, max,
+  });
+
+  const selectView = (value: CalendarView) => {
+    setMethod(value);
+    setSelectMode(value);
+  };
+
+  useEffect(() => {
+    if (viewDate > max) {
+      setViewDate(max);
+    }
+    if (viewDate < min) {
+      setViewDate(min);
+    }
+  }, [viewDate, max, min]);
+
+  return (
+    <div className={cn({
+      [styles.calendar]: true,
+      [className]: !!className,
+    })}
+    >
+      <div className={styles.calendar__close}>
+        {onClose && (
+          <CloseIcon onClick={onClose} />
+        )}
+      </div>
+      {/* 일/월/년 선택 버튼 */}
+      {viewSelector && (
+        <ViewSelector method={method} selectView={selectView} />
+      )}
+      <DateLabel
+        viewDate={viewDate}
+        method={method}
+        onArrowClick={onArrowClick}
+        disabled={disabled}
+        selectMode={selectMode}
+        setSelectMode={setSelectMode}
+      />
+
+      {(method === 'day' && selectMode === 'day') && (
+        <DayTile
+          selectedDate={[selectedDate, null]}
+          weeksInMonth={weeksInMonth}
+          handleDayClick={onDayClick}
+          tileContent={() => (tileContent ? tileContent(selectedDate, method) : null)}
+          max={max}
+          min={min}
+        />
+      )}
+
+      {((method === 'month' || selectMode === 'month') && selectMode !== 'year') && (
+        <MonthTile
+          selectedDate={selectedDate}
+          viewDate={viewDate}
+          handleMonthClick={onMonthClick}
+          tileContent={tileContent}
+          max={max}
+          min={min}
+        />
+      )}
+
+      {(method === 'year' || selectMode === 'year') && (
+        <YearTile
+          selectedDate={selectedDate}
+          onClick={onYearClick}
+          tileContent={tileContent}
+          max={max}
+          min={min}
+        />
+      )}
+    </div>
+  );
+}

package/src/Calendar/components/DateLabel/DateLabel.module.scss

@@ -1,89 +1,89 @@
-@use "../../../styles/mediaQuery.scss" as media;
-
-.nav {
-  height: 60px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 5px;
-  border-bottom: 1px solid var(--calendar-G-30);
-  font-size: 1.3em;
-  font-weight: 400;
-
-  &--range {
-    border-bottom: none;
-  }
-
-  &--left {
-    padding-left: 40px;
-    justify-content: flex-start;
-  }
-
-  &__button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    padding: 10px;
-    border-radius: 100%;
-
-    svg {
-      width: 100%;
-      height: 100%;
-      fill: var(--calendar-G-60);
-    }
-
-    &:hover {
-      @include media.pc {
-        background-color: var(--calendar-G-10);
-      }
-    }
-
-    &:active {
-      background-color: var(--calendar-G-30);
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-      background-color: transparent;
-
-      svg {
-        fill: var(--calendar-G-40);
-      }
-    }
-  }
-
-  &__label {
-    flex: 1 0;
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    font-size: 1.1em;
-    font-weight: 400;
-
-    &--left {
-      text-align: left;
-      justify-content: flex-start;
-    }
-
-    &--date {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 5px;
-      padding: 5px 10px;
-      font-weight: 400;
-      font-size: 1em;
-
-      svg {
-        width: 15px;
-        height: 15px;
-      }
-    }
-
-    &--date-selected {
-      background-color: var(--calendar-S-10);
-    }
-  }
-}
+@use "../../../styles/mediaQuery.scss" as media;
+
+.nav {
+  height: 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 5px;
+  border-bottom: 1px solid var(--calendar-G-30);
+  font-size: 1.3em;
+  font-weight: 400;
+
+  &--range {
+    border-bottom: none;
+  }
+
+  &--left {
+    padding-left: 40px;
+    justify-content: flex-start;
+  }
+
+  &__button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    padding: 10px;
+    border-radius: 100%;
+
+    svg {
+      width: 100%;
+      height: 100%;
+      fill: var(--calendar-G-60);
+    }
+
+    &:hover {
+      @include media.pc {
+        background-color: var(--calendar-G-10);
+      }
+    }
+
+    &:active {
+      background-color: var(--calendar-G-30);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      background-color: transparent;
+
+      svg {
+        fill: var(--calendar-G-40);
+      }
+    }
+  }
+
+  &__label {
+    flex: 1 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    font-size: 1.1em;
+    font-weight: 400;
+
+    &--left {
+      text-align: left;
+      justify-content: flex-start;
+    }
+
+    &--date {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 5px;
+      padding: 5px 10px;
+      font-weight: 400;
+      font-size: 1em;
+
+      svg {
+        width: 15px;
+        height: 15px;
+      }
+    }
+
+    &--date-selected {
+      background-color: var(--calendar-S-10);
+    }
+  }
+}