@jk-core/components 1.1.16 → 1.1.17

package/src/Calendar/RangeCalendar.tsx

@@ -1,125 +1,125 @@
-
-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 useCalendarNav from './hooks/useCalendarNav';
-import { CalendarRange } from './type';
-import getWeeksInMonth from './utils/getWeeksInMonth';
-
-interface CalendarProps {
-  className?: string;
-  date: CalendarRange;
-  onChange:(date:CalendarRange)=>void;
-  min: Date;
-  max: Date;
-  onClose?: () => void;
-}
-
-export default function RangeCalendar({
-  className = '', date: selectedDate = [null, null], onChange, onClose,
-  min, max,
-}: CalendarProps) {
-  const method = 'day';
-  const [viewDate, setViewDate] = useState<Date>(selectedDate?.[0] || new Date());
-  const [hoverDate, setHoverDate] = useState<Date | null>(null);
-  const weeksInMonth = getWeeksInMonth(viewDate);
-
-  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 { disabled, onArrowClick } = useCalendarNav({
-    method, selectMode: 'day', viewDate, setDate: setViewDate, min, max,
-  });
-
-  useEffect(() => {
-    if (viewDate > max) {
-      setViewDate(max);
-    }
-    if (viewDate < min) {
-      setViewDate(min);
-    }
-  }, [viewDate, max, min]);
-
-  return (
-    <div className={cn({
-      [styles.calendar]: true,
-      [styles['calendar--range']]: true,
-      [className]: !!className,
-    })}
-    >
-      <div className={styles.calendar__close}>
-        {onClose && (
-          <CloseIcon onClick={onClose} />
-        )}
-      </div>
-      {/* 일/월/년 선택 버튼 */}
-      <div className={styles['calendar__range-tile']}>
-        <div className={styles.calendar__wrapper}>
-          <DateLabel
-            viewDate={viewDate}
-            method="day"
-            onArrowClick={onArrowClick}
-            disabled={disabled}
-            hideArrow="next"
-            range
-          />
-          <DayTile
-            hoverDate={hoverDate}
-            setHoverDate={(day) => setHoverDate(day)}
-            selectedDate={selectedDate}
-            weeksInMonth={weeksInMonth}
-            handleDayClick={onDayClick}
-            hideAfter
-            max={max}
-            min={min}
-            range
-          />
-        </div>
-        <div className={styles.calendar__wrapper}>
-          <DateLabel
-            viewDate={new Date(
-              viewDate.getFullYear(),
-              viewDate.getMonth() + 1,
-              1,
-            )}
-            method="day"
-            onArrowClick={onArrowClick}
-            disabled={disabled}
-            hideArrow="prev"
-            range
-          />
-          <DayTile
-            hoverDate={hoverDate}
-            setHoverDate={(day) => setHoverDate(day)}
-            selectedDate={selectedDate}
-            weeksInMonth={getWeeksInMonth(new Date(
-              viewDate.getFullYear(),
-              viewDate.getMonth() + 1,
-              1,
-            ))}
-            handleDayClick={(day) => onDayClick(day, true)}
-            hideBefore
-            hideAfter
-            max={max}
-            min={min}
-            range
-          />
-        </div>
-      </div>
-    </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 useCalendarNav from './hooks/useCalendarNav';
+import { CalendarRange } from './type';
+import getWeeksInMonth from './utils/getWeeksInMonth';
+
+interface CalendarProps {
+  className?: string;
+  date: CalendarRange;
+  onChange:(date:CalendarRange)=>void;
+  min: Date;
+  max: Date;
+  onClose?: () => void;
+}
+
+export default function RangeCalendar({
+  className = '', date: selectedDate = [null, null], onChange, onClose,
+  min, max,
+}: CalendarProps) {
+  const method = 'day';
+  const [viewDate, setViewDate] = useState<Date>(selectedDate?.[0] || new Date());
+  const [hoverDate, setHoverDate] = useState<Date | null>(null);
+  const weeksInMonth = getWeeksInMonth(viewDate);
+
+  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 { disabled, onArrowClick } = useCalendarNav({
+    method, selectMode: 'day', viewDate, setDate: setViewDate, min, max,
+  });
+
+  useEffect(() => {
+    if (viewDate > max) {
+      setViewDate(max);
+    }
+    if (viewDate < min) {
+      setViewDate(min);
+    }
+  }, [viewDate, max, min]);
+
+  return (
+    <div className={cn({
+      [styles.calendar]: true,
+      [styles['calendar--range']]: true,
+      [className]: !!className,
+    })}
+    >
+      <div className={styles.calendar__close}>
+        {onClose && (
+          <CloseIcon onClick={onClose} />
+        )}
+      </div>
+      {/* 일/월/년 선택 버튼 */}
+      <div className={styles['calendar__range-tile']}>
+        <div className={styles.calendar__wrapper}>
+          <DateLabel
+            viewDate={viewDate}
+            method="day"
+            onArrowClick={onArrowClick}
+            disabled={disabled}
+            hideArrow="next"
+            range
+          />
+          <DayTile
+            hoverDate={hoverDate}
+            setHoverDate={(day) => setHoverDate(day)}
+            selectedDate={selectedDate}
+            weeksInMonth={weeksInMonth}
+            handleDayClick={onDayClick}
+            hideAfter
+            max={max}
+            min={min}
+            range
+          />
+        </div>
+        <div className={styles.calendar__wrapper}>
+          <DateLabel
+            viewDate={new Date(
+              viewDate.getFullYear(),
+              viewDate.getMonth() + 1,
+              1,
+            )}
+            method="day"
+            onArrowClick={onArrowClick}
+            disabled={disabled}
+            hideArrow="prev"
+            range
+          />
+          <DayTile
+            hoverDate={hoverDate}
+            setHoverDate={(day) => setHoverDate(day)}
+            selectedDate={selectedDate}
+            weeksInMonth={getWeeksInMonth(new Date(
+              viewDate.getFullYear(),
+              viewDate.getMonth() + 1,
+              1,
+            ))}
+            handleDayClick={(day) => onDayClick(day, true)}
+            hideBefore
+            hideAfter
+            max={max}
+            min={min}
+            range
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/Calendar/ScrollCalendar.module.scss

@@ -1,214 +1,214 @@
-@use "../styles/mediaQuery.scss" as media;
-
-button {
-  border: none;
-  background-color: transparent;
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent; // 모바일 터치 하이라이트 색상 제거
-}
-
-.calendar {
-  width: 100%;
-  min-width: 300px;
-  border: 1px solid var(--calendar-G-30);
-  border-radius: 10px;
-  overflow: hidden;
-  color: var(--calendar-G-80);
-  background-color: var(--calendar-white);
-
-  &--range {
-    box-sizing: border-box;
-  }
-
-  &--scroll {
-    height: 100%;
-    border: none;
-    border-radius: 0;
-  }
-
-  &__scroll {
-    height: 100%;
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column-reverse;
-    box-sizing: border-box;
-    gap: 10px;
-    overflow-y: scroll;
-
-    &::-webkit-scrollbar {
-      width: 0;
-    }
-
-    &--wrapper {
-      flex: 1 0;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-    }
-
-    &--button {
-      width: 95%;
-      margin: 5px auto;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 10px;
-      background-color: var(--calendar-white);
-      border: 2px solid var(--calendar-G-50);
-      padding: 15px 0;
-      transition: 0.2s;
-      font-size: 1.2em;
-
-      &:active {
-        scale: 0.98;
-        background-color: var(--calendar-G-5);
-      }
-    }
-  }
-
-  &__close {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    padding: 7px 10px 7px 0;
-    box-sizing: border-box;
-
-    svg {
-      width: 18px;
-      height: 18px;
-      cursor: pointer;
-    }
-  }
-
-  &__range-tile {
-    position: relative;
-    width: 100%;
-    display: flex;
-    gap: 10px;
-  }
-
-  &__wrapper {
-    flex: 1 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-}
-
-.view {
-  position: relative;
-  margin: 0 auto;
-  width: 90%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: #f3f4f8;
-  border-radius: 10px;
-
-  &__block {
-    position: absolute;
-    background-color: #fff;
-    left: 0;
-    height: 100%;
-    border: 2px solid var(--calendar-G-30);
-    width: 33.3%;
-    border-radius: 10px;
-    transition: 0.3s;
-
-    &--second {
-      left: 33%;
-    }
-
-    &--last {
-      left: 66.6%;
-    }
-  }
-
-  &__selector {
-    position: relative;
-    height: 40px;
-    flex: 1 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--calendar-G-60);
-    font-size: 1em;
-    font-weight: 400;
-
-    &--selected {
-      color: var(--calendar-G-80);
-      font-size: 1em;
-      font-weight: 600;
-    }
-  }
-}
-
-.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;
-
-  &__button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    padding: 10px;
-    border-radius: 100%;
-
-    &:hover {
-      @include media.pc {
-        background-color: var(--calendar-G-10);
-      }
-    }
-
-    &:active {
-      background-color: var(--calendar-G-30);
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-      fill: var(--calendar-G-40);
-      background-color: transparent;
-    }
-  }
-
-  &__label {
-    flex: 1 0;
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    font-size: 1.1em;
-    font-weight: 400;
-
-    &--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;
+
+button {
+  border: none;
+  background-color: transparent;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent; // 모바일 터치 하이라이트 색상 제거
+}
+
+.calendar {
+  width: 100%;
+  min-width: 300px;
+  border: 1px solid var(--calendar-G-30);
+  border-radius: 10px;
+  overflow: hidden;
+  color: var(--calendar-G-80);
+  background-color: var(--calendar-white);
+
+  &--range {
+    box-sizing: border-box;
+  }
+
+  &--scroll {
+    height: 100%;
+    border: none;
+    border-radius: 0;
+  }
+
+  &__scroll {
+    height: 100%;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column-reverse;
+    box-sizing: border-box;
+    gap: 10px;
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+      width: 0;
+    }
+
+    &--wrapper {
+      flex: 1 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    &--button {
+      width: 95%;
+      margin: 5px auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 10px;
+      background-color: var(--calendar-white);
+      border: 2px solid var(--calendar-G-50);
+      padding: 15px 0;
+      transition: 0.2s;
+      font-size: 1.2em;
+
+      &:active {
+        scale: 0.98;
+        background-color: var(--calendar-G-5);
+      }
+    }
+  }
+
+  &__close {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 7px 10px 7px 0;
+    box-sizing: border-box;
+
+    svg {
+      width: 18px;
+      height: 18px;
+      cursor: pointer;
+    }
+  }
+
+  &__range-tile {
+    position: relative;
+    width: 100%;
+    display: flex;
+    gap: 10px;
+  }
+
+  &__wrapper {
+    flex: 1 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.view {
+  position: relative;
+  margin: 0 auto;
+  width: 90%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #f3f4f8;
+  border-radius: 10px;
+
+  &__block {
+    position: absolute;
+    background-color: #fff;
+    left: 0;
+    height: 100%;
+    border: 2px solid var(--calendar-G-30);
+    width: 33.3%;
+    border-radius: 10px;
+    transition: 0.3s;
+
+    &--second {
+      left: 33%;
+    }
+
+    &--last {
+      left: 66.6%;
+    }
+  }
+
+  &__selector {
+    position: relative;
+    height: 40px;
+    flex: 1 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--calendar-G-60);
+    font-size: 1em;
+    font-weight: 400;
+
+    &--selected {
+      color: var(--calendar-G-80);
+      font-size: 1em;
+      font-weight: 600;
+    }
+  }
+}
+
+.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;
+
+  &__button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    padding: 10px;
+    border-radius: 100%;
+
+    &:hover {
+      @include media.pc {
+        background-color: var(--calendar-G-10);
+      }
+    }
+
+    &:active {
+      background-color: var(--calendar-G-30);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      fill: var(--calendar-G-40);
+      background-color: transparent;
+    }
+  }
+
+  &__label {
+    flex: 1 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    font-size: 1.1em;
+    font-weight: 400;
+
+    &--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);
+    }
+  }
+}