@jk-core/components 1.1.15 → 1.1.17

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

@@ -1,91 +1,91 @@
-import { cn } from '@jk-core/utils';
-import ArrowIcon from '@/assets/arrow.svg';
-import DropIcon from '@/assets/drop-arrow.svg';
-import { CalendarView } from '@/Calendar/type';
-import styles from './DateLabel.module.scss';
-
-interface DateLabelProps {
-  viewDate: Date;
-  onArrowClick: (direction: 'prev' | 'next') => void;
-  disabled: (direction: 'prev' | 'next') => boolean;
-  method: CalendarView;
-  selectMode?: CalendarView;
-  setSelectMode?: (mode: CalendarView) => void;
-  hideArrow?: 'prev' | 'next' | 'all' | null;
-  range?: boolean;
-}
-
-export default function DateLabel({
-  viewDate, onArrowClick, disabled, method, selectMode = 'day', setSelectMode = () => { }, hideArrow = null, range = false,
-}: DateLabelProps) {
-  return (
-    <div className={cn({
-      [styles.nav]: true,
-      [styles['nav--range']]: range,
-      [styles['nav--left']]: hideArrow === 'all',
-    })}
-    >
-      {hideArrow !== 'all' && (
-        <button
-          className={styles.nav__button}
-          type="button"
-          onClick={() => onArrowClick('prev')}
-          disabled={disabled('prev') || hideArrow === 'prev'}
-        >
-          {hideArrow !== 'prev' && <ArrowIcon />}
-        </button>
-      )}
-      {range ? (
-        <div className={cn({
-          [styles.nav__label]: true,
-          [styles['nav__label--left']]: hideArrow === 'all',
-        })}
-        >
-          {`${viewDate.getFullYear()}년 ${viewDate.getMonth() + 1}월`}
-        </div>
-      ) : (
-        <div className={cn({
-          [styles.nav__label]: true,
-          [styles['nav__label--left']]: hideArrow === 'all',
-        })}
-        >
-          {method === 'year' && '연도 선택'}
-          {method !== 'year' && (
-            <button
-              className={cn({
-                [styles['nav__label--date']]: true,
-                [styles['nav__label--date-selected']]: selectMode === 'year',
-              })}
-              type="button"
-              onClick={() => setSelectMode('year')}
-            >
-              {`${viewDate.getFullYear()}년`}<DropIcon />
-            </button>
-          )}
-          {method === 'day' && (
-            <button
-              className={cn({
-                [styles['nav__label--date']]: true,
-                [styles['nav__label--date-selected']]: selectMode === 'month',
-              })}
-              type="button"
-              onClick={() => setSelectMode('month')}
-            >
-              {`${viewDate.getMonth() + 1}월`}<DropIcon />
-            </button>
-          )}
-        </div>
-      )}
-      {hideArrow !== 'all' && (
-        <button
-          className={styles.nav__button}
-          type="button"
-          onClick={() => onArrowClick('next')}
-          disabled={disabled('next') || hideArrow === 'next'}
-        >
-          {hideArrow !== 'next' && <ArrowIcon style={{ transform: 'rotate(180deg)' }} />}
-        </button>
-      )}
-    </div>
-  );
-}
+import { cn } from '@jk-core/utils';
+import ArrowIcon from '@/assets/arrow.svg';
+import DropIcon from '@/assets/drop-arrow.svg';
+import { CalendarView } from '@/Calendar/type';
+import styles from './DateLabel.module.scss';
+
+interface DateLabelProps {
+  viewDate: Date;
+  onArrowClick: (direction: 'prev' | 'next') => void;
+  disabled: (direction: 'prev' | 'next') => boolean;
+  method: CalendarView;
+  selectMode?: CalendarView;
+  setSelectMode?: (mode: CalendarView) => void;
+  hideArrow?: 'prev' | 'next' | 'all' | null;
+  range?: boolean;
+}
+
+export default function DateLabel({
+  viewDate, onArrowClick, disabled, method, selectMode = 'day', setSelectMode = () => { }, hideArrow = null, range = false,
+}: DateLabelProps) {
+  return (
+    <div className={cn({
+      [styles.nav]: true,
+      [styles['nav--range']]: range,
+      [styles['nav--left']]: hideArrow === 'all',
+    })}
+    >
+      {hideArrow !== 'all' && (
+        <button
+          className={styles.nav__button}
+          type="button"
+          onClick={() => onArrowClick('prev')}
+          disabled={disabled('prev') || hideArrow === 'prev'}
+        >
+          {hideArrow !== 'prev' && <ArrowIcon />}
+        </button>
+      )}
+      {range ? (
+        <div className={cn({
+          [styles.nav__label]: true,
+          [styles['nav__label--left']]: hideArrow === 'all',
+        })}
+        >
+          {`${viewDate.getFullYear()}년 ${viewDate.getMonth() + 1}월`}
+        </div>
+      ) : (
+        <div className={cn({
+          [styles.nav__label]: true,
+          [styles['nav__label--left']]: hideArrow === 'all',
+        })}
+        >
+          {method === 'year' && '연도 선택'}
+          {method !== 'year' && (
+            <button
+              className={cn({
+                [styles['nav__label--date']]: true,
+                [styles['nav__label--date-selected']]: selectMode === 'year',
+              })}
+              type="button"
+              onClick={() => setSelectMode('year')}
+            >
+              {`${viewDate.getFullYear()}년`}<DropIcon />
+            </button>
+          )}
+          {method === 'day' && (
+            <button
+              className={cn({
+                [styles['nav__label--date']]: true,
+                [styles['nav__label--date-selected']]: selectMode === 'month',
+              })}
+              type="button"
+              onClick={() => setSelectMode('month')}
+            >
+              {`${viewDate.getMonth() + 1}월`}<DropIcon />
+            </button>
+          )}
+        </div>
+      )}
+      {hideArrow !== 'all' && (
+        <button
+          className={styles.nav__button}
+          type="button"
+          onClick={() => onArrowClick('next')}
+          disabled={disabled('next') || hideArrow === 'next'}
+        >
+          {hideArrow !== 'next' && <ArrowIcon style={{ transform: 'rotate(180deg)' }} />}
+        </button>
+      )}
+    </div>
+  );
+}

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

@@ -1,117 +1,117 @@
-@use "../../../styles/mediaQuery.scss" as media;
-
-.day-tile {
-  width: 100%;
-  min-height: 310px;
-  padding: 5px;
-  box-sizing: border-box;
-
-  &--content {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    border-radius: 40px;
-    border: none;
-    font-weight: 400;
-    font-size: 1em;
-  }
-
-  &--selected {
-    width: 100%;
-    height: 100%;
-    background-color: var(--calendar-P-50) !important;
-    color: var(--calendar-white) !important;
-    font-weight: 500;
-    padding: 0;
-  }
-
-  &__range {
-    flex: 1 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 10%;
-    font-size: 1.1em;
-    font-weight: 400;
-  }
-
-  &__tile {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    gap: 5px;
-  }
-
-  &__weeks {
-    display: flex;
-    justify-content: space-between;
-    font-weight: 400;
-    font-size: 1em;
-
-    &--date {
-      flex: 1 0;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-width: 40px;
-      padding: 5px 0;
-    }
-  }
-
-  &__week {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  &__day {
-    width: 100%;
-    min-width: 40px;
-    min-height: 40px;
-    padding: 0;
-    border: none;
-    color: var(--calendar-G-80);
-
-    &:disabled {
-      color: var(--calendar-G-40) !important;
-      background-color: transparent !important;
-      cursor: default;
-    }
-
-    &--today {
-      color: var(--calendar-P-50);
-      font-weight: 500;
-    }
-
-    &--selected-first {
-      border-radius: 40px 0 0 40px !important;
-      background-color: var(--calendar-P-5);
-    }
-
-    &--selected-last {
-      border-radius: 0 40px 40px 0 !important;
-      background-color: var(--calendar-P-5);
-    }
-
-    &--before {
-      color: var(--calendar-G-40) !important;
-      background-color: transparent !important;
-    }
-
-    &--tile {
-      border-radius: 10px;
-      gap: 5px;
-    }
-
-    &--range {
-      background-color: var(--calendar-P-5);
-      border-radius: 0;
-    }
-
-    &--hide-before,
-    &--hide-after {
-      opacity: 0;
-      pointer-events: none;
-    }
-  }
-}
+@use "../../../styles/mediaQuery.scss" as media;
+
+.day-tile {
+  width: 100%;
+  min-height: 310px;
+  padding: 5px;
+  box-sizing: border-box;
+
+  &--content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    border-radius: 40px;
+    border: none;
+    font-weight: 400;
+    font-size: 1em;
+  }
+
+  &--selected {
+    width: 100%;
+    height: 100%;
+    background-color: var(--calendar-P-50) !important;
+    color: var(--calendar-white) !important;
+    font-weight: 500;
+    padding: 0;
+  }
+
+  &__range {
+    flex: 1 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10%;
+    font-size: 1.1em;
+    font-weight: 400;
+  }
+
+  &__tile {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 5px;
+  }
+
+  &__weeks {
+    display: flex;
+    justify-content: space-between;
+    font-weight: 400;
+    font-size: 1em;
+
+    &--date {
+      flex: 1 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-width: 40px;
+      padding: 5px 0;
+    }
+  }
+
+  &__week {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &__day {
+    width: 100%;
+    min-width: 40px;
+    min-height: 40px;
+    padding: 0;
+    border: none;
+    color: var(--calendar-G-80);
+
+    &:disabled {
+      color: var(--calendar-G-40) !important;
+      background-color: transparent !important;
+      cursor: default;
+    }
+
+    &--today {
+      color: var(--calendar-P-50);
+      font-weight: 500;
+    }
+
+    &--selected-first {
+      border-radius: 40px 0 0 40px !important;
+      background-color: var(--calendar-P-5);
+    }
+
+    &--selected-last {
+      border-radius: 0 40px 40px 0 !important;
+      background-color: var(--calendar-P-5);
+    }
+
+    &--before {
+      color: var(--calendar-G-40) !important;
+      background-color: transparent !important;
+    }
+
+    &--tile {
+      border-radius: 10px;
+      gap: 5px;
+    }
+
+    &--range {
+      background-color: var(--calendar-P-5);
+      border-radius: 0;
+    }
+
+    &--hide-before,
+    &--hide-after {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+}

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

@@ -1,108 +1,108 @@
-
-import { cn } from '@jk-core/utils';
-import { CalendarRange } from '@/Calendar/type';
-import isInRange from '@/Calendar/utils/isInRange';
-import isSameDay from '@/Calendar/utils/isSameDay';
-import styles from './DayTile.module.scss';
-
-const WEEKS = ['일', '월', '화', '수', '목', '금', '토'];
-
-interface Props {
-  hoverDate?:Date | null,
-  setHoverDate?:(date:Date | null)=>void,
-  selectedDate?: CalendarRange;
-  weeksInMonth: {
-    thisMonth: string;
-    date: Date;
-  }[][];
-  tileContent?: () => React.ReactNode;
-  handleDayClick: (day: Date) => void;
-  max?: Date;
-  min?: Date;
-  hideBefore?: boolean;
-  hideAfter?: boolean;
-  range?: boolean;
-  scroll?: boolean;
-  style?: React.CSSProperties;
-}
-export default function DayTile({
-  selectedDate, weeksInMonth, tileContent, handleDayClick, range = false,
-  max, min, hideBefore = false, hideAfter = false, style, scroll,
-  hoverDate, setHoverDate = () => { },
-}: Props) {
-  const handleDisabled = (date: Date): boolean => {
-    const compareDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
-    const compareMin = min ? new Date(min.getFullYear(), min.getMonth(), min.getDate()) : null;
-    const compareMax = max ? new Date(max.getFullYear(), max.getMonth(), max.getDate()) : null;
-
-    return !!((compareMin && compareDate < compareMin) || (compareMax && compareDate > compareMax));
-  };
-
-  return (
-    <div className={styles['day-tile']} style={style}>
-      <div className={styles['day-tile__weeks']}>
-        {WEEKS.map((week) => (<div className={styles['day-tile__weeks--date']} key={week}>{week}</div>))}
-      </div>
-
-      <div className={styles['day-tile__tile']}>
-        {weeksInMonth.map((week, index) => (
-          <div key={index} className={styles['day-tile__week']}>
-            {week.map((day, idx) => (
-              <button
-                className={cn({
-                  [styles['day-tile__day']]: true,
-                  [styles['day-tile__day--today']]: isSameDay(day.date, new Date()),
-                  [styles['day-tile__day--selected-first']]: !!selectedDate && isSameDay(day.date, selectedDate[0] || null) && range
-                    && ((!!selectedDate[1]
-                    || ((!scroll && hoverDate != null && !!selectedDate[0])
-                      && hoverDate > selectedDate[0]))),
-                  [styles['day-tile__day--selected-last']]: (!!selectedDate && isSameDay(day.date, selectedDate[1] || null) && range)
-                    || (!scroll && !selectedDate?.[1] && isSameDay(day.date, hoverDate || null)),
-                  [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--range']]: isInRange(day.date, selectedDate) || (!!selectedDate?.[0] && (isInRange(day.date, [selectedDate[0], hoverDate]))),
-                })}
-                type="button"
-                disabled={handleDisabled(day.date)}
-                key={idx}
-                onMouseOver={() => {
-                  if (!selectedDate?.[1] && !((min && day.date < min) || (max && day.date > max))) {
-                    setHoverDate(new Date(
-                      day.date.getFullYear(),
-                      day.date.getMonth(),
-                      day.date.getDate(),
-                    ));
-                  }
-                }}
-                onFocus={() => {
-                  if (!selectedDate?.[1] && !((min && day.date < min) || (max && day.date > max))) {
-                    setHoverDate(new Date(
-                      day.date.getFullYear(),
-                      day.date.getMonth(),
-                      day.date.getDate(),
-                    ));
-                  }
-                }}
-                onMouseLeave={() => {
-                  if (hoverDate) setHoverDate(null);
-                }}
-                onClick={() => handleDayClick(day.date)}
-              >
-                <div className={cn({
-                  [styles['day-tile--content']]: true,
-                  [styles['day-tile--selected']]: !!selectedDate && (isSameDay(day.date, selectedDate[0] || null) || isSameDay(day.date, selectedDate[1] || null) || isSameDay(day.date, hoverDate || null)),
-                })}
-                >
-                  {day.date.getDate()}
-                  {tileContent && tileContent()}
-                </div>
-              </button>
-            ))}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
+
+import { cn } from '@jk-core/utils';
+import { CalendarRange } from '@/Calendar/type';
+import isInRange from '@/Calendar/utils/isInRange';
+import isSameDay from '@/Calendar/utils/isSameDay';
+import styles from './DayTile.module.scss';
+
+const WEEKS = ['일', '월', '화', '수', '목', '금', '토'];
+
+interface Props {
+  hoverDate?:Date | null,
+  setHoverDate?:(date:Date | null)=>void,
+  selectedDate?: CalendarRange;
+  weeksInMonth: {
+    thisMonth: string;
+    date: Date;
+  }[][];
+  tileContent?: () => React.ReactNode;
+  handleDayClick: (day: Date) => void;
+  max?: Date;
+  min?: Date;
+  hideBefore?: boolean;
+  hideAfter?: boolean;
+  range?: boolean;
+  scroll?: boolean;
+  style?: React.CSSProperties;
+}
+export default function DayTile({
+  selectedDate, weeksInMonth, tileContent, handleDayClick, range = false,
+  max, min, hideBefore = false, hideAfter = false, style, scroll,
+  hoverDate, setHoverDate = () => { },
+}: Props) {
+  const handleDisabled = (date: Date): boolean => {
+    const compareDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    const compareMin = min ? new Date(min.getFullYear(), min.getMonth(), min.getDate()) : null;
+    const compareMax = max ? new Date(max.getFullYear(), max.getMonth(), max.getDate()) : null;
+
+    return !!((compareMin && compareDate < compareMin) || (compareMax && compareDate > compareMax));
+  };
+
+  return (
+    <div className={styles['day-tile']} style={style}>
+      <div className={styles['day-tile__weeks']}>
+        {WEEKS.map((week) => (<div className={styles['day-tile__weeks--date']} key={week}>{week}</div>))}
+      </div>
+
+      <div className={styles['day-tile__tile']}>
+        {weeksInMonth.map((week, index) => (
+          <div key={index} className={styles['day-tile__week']}>
+            {week.map((day, idx) => (
+              <button
+                className={cn({
+                  [styles['day-tile__day']]: true,
+                  [styles['day-tile__day--today']]: isSameDay(day.date, new Date()),
+                  [styles['day-tile__day--selected-first']]: !!selectedDate && isSameDay(day.date, selectedDate[0] || null) && range
+                    && ((!!selectedDate[1]
+                    || ((!scroll && hoverDate != null && !!selectedDate[0])
+                      && hoverDate > selectedDate[0]))),
+                  [styles['day-tile__day--selected-last']]: (!!selectedDate && isSameDay(day.date, selectedDate[1] || null) && range)
+                    || (!scroll && !selectedDate?.[1] && isSameDay(day.date, hoverDate || null)),
+                  [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--range']]: isInRange(day.date, selectedDate) || (!!selectedDate?.[0] && (isInRange(day.date, [selectedDate[0], hoverDate]))),
+                })}
+                type="button"
+                disabled={handleDisabled(day.date)}
+                key={idx}
+                onMouseOver={() => {
+                  if (!selectedDate?.[1] && !((min && day.date < min) || (max && day.date > max))) {
+                    setHoverDate(new Date(
+                      day.date.getFullYear(),
+                      day.date.getMonth(),
+                      day.date.getDate(),
+                    ));
+                  }
+                }}
+                onFocus={() => {
+                  if (!selectedDate?.[1] && !((min && day.date < min) || (max && day.date > max))) {
+                    setHoverDate(new Date(
+                      day.date.getFullYear(),
+                      day.date.getMonth(),
+                      day.date.getDate(),
+                    ));
+                  }
+                }}
+                onMouseLeave={() => {
+                  if (hoverDate) setHoverDate(null);
+                }}
+                onClick={() => handleDayClick(day.date)}
+              >
+                <div className={cn({
+                  [styles['day-tile--content']]: true,
+                  [styles['day-tile--selected']]: !!selectedDate && (isSameDay(day.date, selectedDate[0] || null) || isSameDay(day.date, selectedDate[1] || null) || isSameDay(day.date, hoverDate || null)),
+                })}
+                >
+                  {day.date.getDate()}
+                  {tileContent && tileContent()}
+                </div>
+              </button>
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}