@jk-core/components 0.1.16 → 1.0.0

package/src/Calendar/ScrollCalendar.tsx

@@ -0,0 +1,124 @@
+import { cn } from '@jk-core/utils';
+import { useEffect, useRef, useState } from 'react';
+import { useIntersectionObserver } from '@jk-core/hooks';
+import DayTile from './components/DayTile';
+import styles from './Calendar.module.scss';
+import DateLabel from './components/DateLabel';
+import getWeeksInMonth from './utils/getWeeksInMonth';
+import { CalendarRange } from './type';
+
+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

@@ -0,0 +1,121 @@
+/* eslint-disable react/no-array-index-key */
+import { useEffect, useState } from 'react';
+import { cn } from '@jk-core/utils';
+import CloseIcon from '../assets/close.svg';
+import { CalendarView } from './type';
+import getWeeksInMonth from './utils/getWeeksInMonth';
+import DayTile from './components/DayTile';
+import MonthTile from './components/MonthTile';
+import YearTile from './components/YearTile';
+import useCalendarNav from './hooks/useCalendarNav';
+import useDateSelect from './hooks/useDateSelect';
+import styles from './Calendar.module.scss';
+import ViewSelector from './components/ViewSelector';
+import './index.scss';
+import DateLabel from './components/DateLabel';
+
+interface CalendarProps {
+  className?: string;
+  date?: Date;
+  view?: CalendarView;
+  setView?: (view:CalendarView)=>void;
+  tileContent?: (date: Date | undefined, view: CalendarView) => React.ReactNode;
+  onChange?:(date:Date)=>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

@@ -0,0 +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);
+    }
+  }
+}

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

@@ -0,0 +1,91 @@
+import { cn } from '@jk-core/utils';
+import { CalendarView } from 'Calendar/type';
+import ArrowIcon from 'assets/arrow.svg';
+import DropIcon from 'assets/drop-arrow.svg';
+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

@@ -0,0 +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;
+    }
+  }
+}

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

@@ -0,0 +1,100 @@
+/* eslint-disable react/no-array-index-key */
+import isSameDay from 'Calendar/utils/isSameDay';
+import { cn } from '@jk-core/utils';
+import { CalendarRange } from 'Calendar/type';
+import isInRange from 'Calendar/utils/isInRange';
+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) {
+  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={(min && day.date < min) || (max && day.date > max)}
+                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>
+  );
+}

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

@@ -0,0 +1,59 @@
+@use "../../../styles/mediaQuery.scss" as media;
+
+.month-tile {
+  position: relative;
+  min-height: 310px;
+  padding: 5px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(4, 1fr);
+  gap: 5px;
+
+  &__month {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 5px;
+    border-radius: 10px;
+    color: var(--calendar-G-80);
+
+    svg {
+      width: 15px;
+      height: 15px;
+      cursor: pointer;
+    }
+
+    &:hover {
+      @include media.pc {
+        background-color: var(--calendar-G-5);
+      }
+    }
+
+    &:active {
+      background-color: var(--calendar-G-10);
+    }
+
+    &:disabled {
+      color: var(--calendar-G-40) !important;
+      background-color: transparent !important;
+      cursor: default;
+      border-radius: 0 !important;
+    }
+
+    &--selected {
+      background-color: var(--calendar-P-50) !important;
+      color: var(--calendar-white) !important;
+    }
+
+    &--today {
+      color: var(--calendar-P-50);
+      font-weight: 600;
+    }
+
+    &--tile {
+      justify-content: flex-start;
+      gap: 5px;
+    }
+  }
+}