@jk-core/components 0.1.15 → 1.0.0

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

@@ -0,0 +1,50 @@
+import { cn } from '@jk-core/utils';
+import isSameDay from '../../utils/isSameDay';
+import { CalendarView } from '../../type';
+import styles from './MonthTile.module.scss';
+
+const MONTHS = Array.from({ length: 12 }, (_, i) => i);
+
+interface Props {
+  selectedDate?: Date;
+  viewDate: Date;
+  handleMonthClick: (month: number) => void;
+  tileContent?: (date: Date, view:CalendarView) => React.ReactNode;
+  max: Date;
+  min: Date;
+}
+
+export default function MonthTile({
+  selectedDate, viewDate, handleMonthClick, tileContent = () => false,
+  max, min,
+}: Props) {
+  const isDisabled = (month: number) => {
+    const monthDate = new Date(viewDate.getFullYear(), month, 1);
+
+    return monthDate > new Date(max.getFullYear(), max.getMonth(), 1)
+      || monthDate < new Date(min.getFullYear(), min.getMonth(), 1);
+  };
+
+  return (
+    <div className={styles['month-tile']}>
+      {MONTHS.map((month) => (
+        <button
+          className={cn({
+            [styles['month-tile__month']]: true,
+            [styles['month-tile__month--selected']]: !!selectedDate && isSameDay(selectedDate, new Date(viewDate.getFullYear(), month), 'month'),
+            [styles['month-tile__month--today']]: isSameDay(new Date(viewDate.getFullYear(), month), new Date(), 'month'),
+            [styles['month-tile__month--tile']]: !!tileContent(new Date(viewDate.getFullYear(), month - 1, 1), 'month'),
+          })}
+          type="button"
+          key={month}
+          onClick={() => handleMonthClick(month)}
+          disabled={isDisabled(month)}
+        >
+          <span>{`${month + 1}월`}</span>
+          {!!tileContent(new Date(viewDate.getFullYear(), month - 1, 1), 'month')
+            && tileContent(new Date(viewDate.getFullYear(), month - 1, 1), 'month')}
+        </button>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,48 @@
+.view {
+  position: relative;
+  margin: 0 auto;
+  width: 90%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--calendar-S-10);
+  color: var(--calendar-black);
+  border-radius: 10px;
+
+  &__block {
+    position: absolute;
+    background-color: var(--calendar-white);
+    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;
+    }
+  }
+}

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

@@ -0,0 +1,49 @@
+import { cn } from '@jk-core/utils';
+import { CalendarView } from 'Calendar/type';
+import styles from './ViewSelector.module.scss';
+
+interface ViewSelectorProps {
+  method: CalendarView;
+  selectView: (value: CalendarView) => void;
+}
+export default function ViewSelector({ method, selectView }:ViewSelectorProps) {
+  return (
+    <div className={styles.view}>
+      <div className={
+            cn({
+              [styles.view__block]: true,
+              [styles['view__block--second']]: method === 'month',
+              [styles['view__block--last']]: method === 'year',
+            })
+          }
+      />
+      <button
+        className={cn({
+          [styles.view__selector]: true,
+          [styles['view__selector--selected']]: method === 'day',
+        })}
+        type="button"
+        onClick={() => selectView('day')}
+      >일
+      </button>
+      <button
+        className={cn({
+          [styles.view__selector]: true,
+          [styles['view__selector--selected']]: method === 'month',
+        })}
+        type="button"
+        onClick={() => selectView('month')}
+      >월
+      </button>
+      <button
+        className={cn({
+          [styles.view__selector]: true,
+          [styles['view__selector--selected']]: method === 'year',
+        })}
+        type="button"
+        onClick={() => selectView('year')}
+      >년
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,86 @@
+@use "../../../styles/mediaQuery.scss" as media;
+
+.year-tile {
+  position: relative;
+  min-height: 310px;
+  padding: 5px;
+  position: relative;
+  height: 310px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: auto;
+  gap: 10px;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &__blank {
+    height: calc(50% - 40px);
+    flex-shrink: 0;
+
+    &:last-child {
+      height: 50%;
+    }
+  }
+
+  &__year {
+    min-width: 50%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 40px;
+    border-radius: 6px;
+    flex-shrink: 0;
+    overflow: hidden;
+    font-weight: 400;
+    font-size: 1.2em;
+    color: var(--calendar-G-80);
+
+    &:hover {
+      @include media.pc {
+        background-color: var(--calendar-P-5);
+      }
+    }
+
+    &:active {
+      background-color: var(--calendar-P-10);
+    }
+
+    &--border {
+      border: 1px solid var(--calendar-G-30);
+      background-color: var(--calendar-P-5);
+
+      &:hover {
+        @include media.pc {
+          background-color: var(--calendar-P-10);
+        }
+      }
+    }
+
+    &--year {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &--selected {
+      color: var(--calendar-white);
+      background-color: var(--calendar-P-50) !important;
+    }
+
+    &--tile {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 40px;
+      color: var(--calendar-G-80);
+      width: 100%;
+      background-color: var(--calendar-white);
+      border-top: var(--calendar-P-50);
+    }
+  }
+}

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

@@ -0,0 +1,65 @@
+import { useEffect, useRef } from 'react';
+import { cn } from '@jk-core/utils';
+import { CalendarView } from '../../type';
+import styles from './YearTile.module.scss';
+
+interface Props {
+  selectedDate?: Date;
+  onClick: (year: number) => void;
+  tileContent?: (date: Date, view:CalendarView) => React.ReactNode;
+  max: Date;
+  min: Date;
+}
+
+export default function YearTile({
+  selectedDate, onClick,
+  tileContent = () => false,
+  max, min,
+}: Props) {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const selectedRef = useRef<HTMLButtonElement>(null);
+  const YEARS = Array.from(
+    { length: max.getFullYear() - min.getFullYear() + 1 },
+    (_, i) => min.getFullYear() + i,
+  );
+
+  useEffect(() => {
+    const selectedElement = selectedRef.current;
+    const wrapperElement = wrapperRef.current;
+    if (!selectedElement || !wrapperElement) return;
+
+    const { clientHeight } = wrapperElement;
+    const { offsetTop, clientHeight: selectedHeight } = selectedElement;
+
+    wrapperElement.scrollTo({
+      top: offsetTop - clientHeight / 2 + selectedHeight,
+    });
+  }, []);
+
+  return (
+    <div className={styles['year-tile']} ref={wrapperRef}>
+      <div className={styles['year-tile__blank']} />
+      {YEARS.map((year) => (
+        <button
+          className={cn({
+            [styles['year-tile__year']]: true,
+            [styles['year-tile__year--selected']]: !!selectedDate && selectedDate.getFullYear() === year,
+            [styles['year-tile__year--border']]: !!tileContent(new Date(year, 1, 1), 'year'),
+          })}
+          key={year}
+          type="button"
+          ref={!!selectedDate && selectedDate.getFullYear() === year ? selectedRef : null}
+          onClick={() => onClick(year)}
+        >
+          <span className={styles['yearTile__year--year']}>{year}</span>
+          {tileContent(new Date(year, 1, 1), 'year') && (
+            <div className={styles['yearTile__year--tile']}>
+              {tileContent(new Date(year, 1, 1), 'year')}
+            </div>
+          )}
+        </button>
+      ))}
+      <div className={styles['year-tile__blank']} />
+    </div>
+  );
+}

package/src/Calendar/hooks/useCalendarNav.ts

@@ -0,0 +1,80 @@
+import { CalendarView } from '../type';
+
+interface Props {
+  method: CalendarView;
+  selectMode: CalendarView;
+  viewDate: Date;
+  setDate:(date: Date) => void;
+  min: Date;
+  max: Date;
+}
+const useCalendarNav = ({
+  method, selectMode, viewDate, setDate, min, max,
+}:Props) => {
+  const disabled = (direction: 'prev' | 'next') => {
+    if (selectMode === 'year' || method !== selectMode) return true;
+
+    if (method === 'day') {
+      if (direction === 'prev') {
+        const prevMonth = new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1);
+        return prevMonth < min;
+      }
+      const nextMonth = new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1);
+      return nextMonth > max;
+    }
+
+    if (method === 'month') {
+      if (direction === 'prev') {
+        const prevYear = new Date(viewDate.getFullYear() - 1, viewDate.getMonth(), 1);
+        return prevYear < min;
+      }
+      const nextYear = new Date(viewDate.getFullYear() + 1, viewDate.getMonth(), 1);
+      return nextYear > max;
+    }
+
+    if (method === 'year') {
+      if (direction === 'prev') {
+        const prevDecade = new Date(viewDate.getFullYear() - 10, viewDate.getMonth(), 1);
+        return prevDecade < min;
+      }
+      const nextDecade = new Date(viewDate.getFullYear() + 10, viewDate.getMonth(), 1);
+      return nextDecade > max;
+    }
+
+    return false;
+  };
+
+  const onArrowClick = (direction: 'prev' | 'next') => {
+    const offset = direction === 'prev' ? -1 : 1;
+    const minDate = new Date(2000, 0, 1);
+    const maxDate = new Date(2099, 11, 31);
+
+    if (method === 'day') {
+      const newDate = new Date(viewDate.getFullYear(), viewDate.getMonth() + offset, 1);
+
+      if (newDate >= minDate && newDate <= maxDate) {
+        setDate(newDate);
+      }
+    }
+
+    if (method === 'month') {
+      const newDate = new Date(viewDate.getFullYear() + offset, viewDate.getMonth(), 1);
+
+      if (newDate >= minDate && newDate <= maxDate) {
+        setDate(newDate);
+      }
+    }
+
+    if (method === 'year') {
+      const newDate = new Date(viewDate.getFullYear() + offset * 10, viewDate.getMonth(), 1);
+
+      if (newDate >= minDate && newDate <= maxDate) {
+        setDate(newDate);
+      }
+    }
+  };
+
+  return { disabled, onArrowClick };
+};
+
+export default useCalendarNav;

package/src/Calendar/hooks/useDateSelect.ts

@@ -0,0 +1,54 @@
+import { CalendarView } from '../type';
+
+interface UseDateSelectProps {
+  viewDate: Date;
+  setViewDate: (date: Date) => void;
+  method: CalendarView;
+  setSelectMode:(mode:CalendarView) => void;
+  onChange: (date: Date) => void;
+  setView:(view:CalendarView)=>void;
+}
+
+const useDateSelect = ({
+  viewDate, setViewDate, onChange, setSelectMode, method, setView,
+}: UseDateSelectProps) => {
+  const min = new Date(2000, 0, 1);
+  const max = new Date(2099, 11, 31);
+
+  const onDayClick = (day: Date) => {
+    if (day < min || day > max) {
+      return;
+    }
+
+    setViewDate(day);
+    setView('day');
+    onChange(day);
+  };
+
+  const onMonthClick = (month:number) => {
+    const newDate = new Date(viewDate.getFullYear(), month, 1);
+
+    setViewDate(newDate);
+
+    if (method !== 'month') setSelectMode(method);
+    if (method === 'month') {
+      setView('month');
+      onChange(newDate);
+    }
+  };
+
+  const onYearClick = (year:number) => {
+    const newDate = new Date(year, 0, 1);
+
+    setViewDate(newDate);
+    if (method !== 'year') setSelectMode(method);
+    if (method === 'year') {
+      setView('year');
+      onChange(newDate);
+    }
+  };
+
+  return { onDayClick, onMonthClick, onYearClick };
+};
+
+export default useDateSelect;

package/src/Calendar/index.scss

@@ -0,0 +1,189 @@
+button {
+  border: none;
+  background-color: transparent;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent; // 모바일 터치 하이라이트 색상 제거
+}
+
+body:not([data-theme="dark"]) {
+  --calendar-white: #ffffff;
+  --calendar-black: #000000;
+  --calendar-P-5: #eff5ff;
+  --calendar-P-10: #d3e1fb;
+  --calendar-P-20: #a7c4f7;
+  --calendar-P-30: #7ca6f3;
+  --calendar-P-40: #5089ef;
+  --calendar-P-50: #246beb;
+  --calendar-P-60: #1d56bc;
+  --calendar-P-70: #16408d;
+  --calendar-P-90: #07152f;
+  --calendar-P-100: #000000;
+  --calendar-S-5: #edf1f5;
+  --calendar-S-10: #cdd7e4;
+  --calendar-S-20: #b4c4d6;
+  --calendar-S-30: #99b0cb;
+  --calendar-S-40: #2a5c96;
+  --calendar-S-50: #003675;
+  --calendar-S-60: #002b5e;
+  --calendar-S-70: #002036;
+  --calendar-S-80: #00162f;
+  --calendar-S-90: #000b17;
+  --calendar-G-5: #f8f8f8;
+  --calendar-G-10: #f0f0f0;
+  --calendar-G-20: #e4e4e4;
+  --calendar-G-30: #d8d8d8;
+  --calendar-G-40: #c6c6c6;
+  --calendar-G-50: #8e8e8e;
+  --calendar-G-60: #717171;
+  --calendar-G-70: #555555;
+  --calendar-G-80: #2d2d2d;
+  --calendar-G-90: #1d1d1d;
+  --calendar-Point-5: #fdf2f3;
+  --calendar-Point-10: #f8d6d8;
+  --calendar-Point-20: #f5a3a8;
+  --calendar-Point-30: #f1747c;
+  --calendar-Point-40: #ec4651;
+  --calendar-Point-50: #e71825;
+  --calendar-Point-60: #b9131e;
+  --calendar-Point-70: #8b0e16;
+  --calendar-Point-80: #5c0a0f;
+  --calendar-Point-90: #2e0507;
+  --calendar-Warning-5: #fff8e9;
+  --calendar-Warning-10: #ffeac1;
+  --calendar-Warning-20: #ffe2a7;
+  --calendar-Warning-30: #ffd47c;
+  --calendar-Warning-40: #ffc550;
+  --calendar-Warning-50: #ffb724;
+  --calendar-Warning-60: #98690a;
+  --calendar-Warning-70: #66490e;
+  --calendar-Warning-80: #4d370b;
+  --calendar-Warning-90: #332507;
+  --calendar-Success-5: #eef7f0;
+  --calendar-Success-10: #cee9d4;
+  --calendar-Success-20: #b2dcbb;
+  --calendar-Success-30: #8cca99;
+  --calendar-Success-40: #33a14b;
+  --calendar-Success-50: #008a1e;
+  --calendar-Success-60: #006e18;
+  --calendar-Success-70: #005312;
+  --calendar-Success-80: #00370c;
+  --calendar-Success-90: #002207;
+  --calendar-Info-5: #e9f0ff;
+  --calendar-Info-10: #d4e1ff;
+  --calendar-Info-20: #a9c3ff;
+  --calendar-Info-30: #7da4ff;
+  --calendar-Info-40: #5286ff;
+  --calendar-Info-50: #2768ff;
+  --calendar-Info-60: #1f53cc;
+  --calendar-Info-70: #173e99;
+  --calendar-Info-80: #0c1f4d;
+  --calendar-Info-90: #040a1a;
+  --calendar-Red: #e40000;
+  --calendar-Red2: #ffe4e4;
+  --calendar-Green: #2fb400;
+  --calendar-Green-2: #d7ffe0;
+  --calendar-Orange: #ff8800;
+  --calendar-Orange-5: #ffead1;
+  --calendar-Orange-10: #ffdacc;
+  --calendar-Orange-30: #ff8f66;
+  --calendar-Orange-40: #ff6a33;
+  --calendar-Orange-50: #ff4500;
+  --calendar-Orange-60: #d53209;
+  --calendar-Orange-70: #992900;
+  --calendar-Orange-80: #661c00;
+  --calendar-Orange-90: #330e00;
+  --Calendar-Background: #ffffff;
+}
+
+body[data-theme="dark"] {
+  --calendar-white: #000000;
+  --calendar-black: #ffffff;
+  --calendar-P-90: #eff5ff;
+  --calendar-P-80: #d3e1fb;
+  --calendar-P-70: #a7c4f7;
+  --calendar-P-60: #7ca6f3;
+  --calendar-P-50: #5089ef;
+  --calendar-P-40: #246beb;
+  --calendar-P-30: #225fc9;
+  --calendar-P-20: #1e53b4;
+  --calendar-P-10: #1b4ba3;
+  --calendar-P-5: #0f2b5f;
+  --calendar-S-90: #edf1f5;
+  --calendar-S-80: #cdd7e4;
+  --calendar-S-70: #b4c4d6;
+  --calendar-S-60: #99b0cb;
+  --calendar-S-50: #2a5c96;
+  --calendar-S-40: #003675;
+  --calendar-S-30: #002b5e;
+  --calendar-S-20: #002036;
+  --calendar-S-10: #00162f;
+  --calendar-S-5: #000b17;
+  --calendar-G-90: #f8f8f8;
+  --calendar-G-80: #f0f0f0;
+  --calendar-G-70: #e4e4e4;
+  --calendar-G-60: #d8d8d8;
+  --calendar-G-50: #c6c6c6;
+  --calendar-G-40: #8e8e8e;
+  --calendar-G-30: #717171;
+  --calendar-G-20: #555555;
+  --calendar-G-10: #2d2d2d;
+  --calendar-G-5: #1d1d1d;
+  --calendar-Point-5: #fdf2f3;
+  --calendar-Point-10: #f8d6d8;
+  --calendar-Point-20: #f5a3a8;
+  --calendar-Point-30: #f1747c;
+  --calendar-Point-40: #ec4651;
+  --calendar-Point-50: #e71825;
+  --calendar-Point-60: #b9131e;
+  --calendar-Point-70: #8b0e16;
+  --calendar-Point-80: #5c0a0f;
+  --calendar-Point-90: #2e0507;
+  --calendar-Warning-5: #fff8e9;
+  --calendar-Warning-10: #ffeac1;
+  --calendar-Warning-20: #ffe2a7;
+  --calendar-Warning-30: #ffd47c;
+  --calendar-Warning-40: #ffc550;
+  --calendar-Warning-50: #ffb724;
+  --calendar-Warning-60: #98690a;
+  --calendar-Warning-70: #66490e;
+  --calendar-Warning-80: #4d370b;
+  --calendar-Warning-90: #332507;
+  --calendar-Success-5: #eef7f0;
+  --calendar-Success-10: #cee9d4;
+  --calendar-Success-20: #b2dcbb;
+  --calendar-Success-30: #8cca99;
+  --calendar-Success-40: #33a14b;
+  --calendar-Success-50: #008a1e;
+  --calendar-Success-60: #006e18;
+  --calendar-Success-70: #005312;
+  --calendar-Success-80: #00370c;
+  --calendar-Success-90: #002207;
+  --calendar-Info-5: #e9f0ff;
+  --calendar-Info-10: #d4e1ff;
+  --calendar-Info-20: #a9c3ff;
+  --calendar-Info-30: #7da4ff;
+  --calendar-Info-40: #5286ff;
+  --calendar-Info-50: #2768ff;
+  --calendar-Info-60: #1f53cc;
+  --calendar-Info-70: #173e99;
+  --calendar-Info-80: #0c1f4d;
+  --calendar-Info-90: #040a1a;
+  --calendar-Red: #e40000;
+  --calendar-Red2: #ffe4e4;
+  --calendar-Green: #2fb400;
+  --calendar-Green-2: #d7ffe0;
+  --calendar-Orange: #ff8800;
+  --calendar-Orange-5: #ffead1;
+  --calendar-Orange-10: #ffdacc;
+  --calendar-Orange-30: #ff8f66;
+  --calendar-Orange-40: #ff6a33;
+  --calendar-Orange-50: #ff4500;
+  --calendar-Orange-60: #d53209;
+  --calendar-Orange-70: #992900;
+  --calendar-Orange-80: #661c00;
+  --calendar-Orange-90: #330e00;
+  --Calendar-Background: #ffffff;
+}

package/src/Calendar/index.tsx

@@ -0,0 +1,66 @@
+/* eslint-disable react/no-array-index-key */
+import { CalendarRange, CalendarView } from './type';
+import RangeCalendar from './RangeCalendar';
+import SingleCalendar from './SingleCalendar';
+import ScrollCalendar from './ScrollCalendar';
+
+import './index.scss';
+
+interface CalendarProps {
+  className?: string;
+  date?: Date | CalendarRange;
+  view?: CalendarView;
+  setView?: (view:CalendarView)=>void;
+  tileContent?: (date: Date | undefined, view: CalendarView) => React.ReactNode;
+  onChange?:(date:Date | CalendarRange)=>void;
+  min?: Date;
+  max?: Date;
+  onClose?: () => void;
+  viewSelector?: boolean;
+  selectRange?: boolean;
+  scroll?: boolean;
+}
+
+export default function Calendar({
+  className = '', date: selectedDate, view, setView = () => { }, tileContent, onChange = () => { }, onClose, viewSelector = true,
+  min = new Date('2000-01-01'), max = new Date('2099-11-31'), selectRange = false, scroll = false,
+}: CalendarProps) {
+  if (scroll) {
+    return (
+      <ScrollCalendar
+        className={className}
+        date={selectedDate as CalendarRange}
+        onChange={onChange}
+        min={min}
+        max={max}
+      />
+    );
+  }
+  if (selectRange) {
+    return (
+      <RangeCalendar
+        className={className}
+        date={selectedDate as CalendarRange}
+        onChange={onChange}
+        min={min}
+        max={max}
+        onClose={onClose}
+      />
+    );
+  }
+
+  return (
+    <SingleCalendar
+      className={className}
+      date={selectedDate as Date}
+      view={view}
+      setView={setView}
+      tileContent={tileContent}
+      onChange={onChange}
+      min={min}
+      max={max}
+      onClose={onClose}
+      viewSelector={viewSelector}
+    />
+  );
+}

package/src/Calendar/type.ts

@@ -0,0 +1,3 @@
+export type CalendarView = 'day' | 'month' | 'year';
+
+export type CalendarRange = [Date | null | undefined, Date | null | undefined];