@jk-core/components 0.0.5 → 0.0.7

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

@@ -1,79 +0,0 @@
-@use "../mixin.module.scss" as mixin;
-@use "../../../styles/mediaQuery.scss" as media;
-
-.body {
-  @include mixin.body;
-
-  &__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 {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    width: 100%;
-    min-width: 40px;
-    min-height: 40px;
-    border-radius: 100%;
-    padding: 5px;
-    border: none;
-    font-weight: 400;
-    font-size: 1em;
-
-    &:hover {
-      @include media.pc {
-        background-color: var(--G-5);
-      }
-    }
-
-    &:active {
-      background-color: var(--G-10);
-    }
-
-    &--today {
-      color: var(--P-50);
-      font-weight: 600;
-    }
-
-    &--selected {
-      background-color: var(--P-50) !important;
-      color: var(--white) !important;
-      font-weight: 600;
-    }
-
-    &--before {
-      color: var(--G-40);
-    }
-
-    &--tile {
-      border-radius: 10px;
-      gap: 5px;
-    }
-  }
-}

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

@@ -1,52 +0,0 @@
-/* eslint-disable max-len */
-/* eslint-disable react/no-array-index-key */
-import { cn } from '@jk-core/utils';
-import isSameDay from '../../utils/isSameDay';
-import styles from './DayTile.module.scss';
-
-const WEEKS = ['일', '월', '화', '수', '목', '금', '토'];
-
-interface Props {
-  selectedDate?: Date;
-  weeksInMonth: {
-    thisMonth: boolean;
-    date: Date;
-  }[][];
-  tileContent?: () => React.ReactNode;
-  handleDayClick: (day: Date) => void;
-}
-export default function DayTile({
-  selectedDate, weeksInMonth, tileContent, handleDayClick,
-}: Props) {
-  return (
-    <div className={styles.body}>
-      <div className={styles.body__weeks}>
-        {WEEKS.map((week) => (<div className={styles['body__weeks--date']} key={week}>{week}</div>))}
-      </div>
-
-      <div className={styles.body__tile}>
-        {weeksInMonth.map((week, index) => (
-          <div key={index} className={styles.body__week}>
-            {week.map((day, idx) => (
-              <button
-                className={cn({
-                  [styles.body__day]: true,
-                  [styles['body__day--today']]: isSameDay(day.date, new Date()),
-                  [styles['body__day--selected']]: !!selectedDate && isSameDay(day.date, selectedDate),
-                  [styles['body__day--before']]: !day.thisMonth,
-                  [styles['body__day--tile']]: !!(tileContent && tileContent()),
-                })}
-                type="button"
-                key={idx}
-                onClick={() => handleDayClick(day.date)}
-              >
-                {day.date.getDate()}
-                {tileContent && tileContent()}
-              </button>
-            ))}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

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

@@ -1,44 +0,0 @@
-@use "../mixin.module.scss" as mixin;
-
-.body {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(4, 1fr);
-  gap: 5px;
-
-  @include mixin.body;
-
-  &__month {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 5px;
-    border-radius: 10px;
-
-    svg {
-      width: 15px;
-      height: 15px;
-      cursor: pointer;
-    }
-
-    &:active {
-      background-color: var(--G-10);
-    }
-
-    &--selected {
-      background-color: var(--P-50) !important;
-      color: var(--white) !important;
-    }
-
-    &--today {
-      color: var(--P-50);
-      font-weight: 600;
-    }
-
-    &--tile {
-      justify-content: flex-start;
-      gap: 5px;
-    }
-  }
-}

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

@@ -1,38 +0,0 @@
-import { cn } from '@jk-core/utils';
-import styles from './MonthTile.module.scss';
-import isSameDay from '../../utils/isSameDay';
-import { CalendarView } from '../../type';
-
-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;
-}
-export default function MonthTile({
-  selectedDate, viewDate, handleMonthClick, tileContent = () => false,
-}: Props) {
-  return (
-    <div className={styles.body}>
-      {MONTHS.map((month) => (
-        <button
-          className={cn({
-            [styles.body__month]: true,
-            [styles['body__month--selected']]: !!selectedDate && isSameDay(selectedDate, new Date(viewDate.getFullYear(), month), 'month'),
-            [styles['body__month--today']]: isSameDay(new Date(viewDate.getFullYear(), month), new Date(), 'month'),
-            [styles['body__month--tile']]: !!tileContent(new Date(viewDate.getFullYear(), month - 1, 1), 'month'),
-          })}
-          type="button"
-          key={month}
-          onClick={() => handleMonthClick(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/YearTile/YearTile.module.scss

@@ -1,85 +0,0 @@
-@use "../mixin.module.scss" as mixin;
-@use "../../../styles/mediaQuery.scss" as media;
-
-.body {
-  @include mixin.body;
-
-  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;
-
-    &:hover {
-      @include media.pc {
-        background-color: var(--P-5);
-      }
-    }
-
-    &:active {
-      background-color: var(--P-10);
-    }
-
-    &--border {
-      border: 1px solid var(--G-30);
-      background-color: var(--P-5);
-
-      &:hover {
-        @include media.pc {
-          background-color: var(--P-10);
-        }
-      }
-    }
-
-    &--year {
-      height: 40px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    &--selected {
-      color: var(--white);
-      background-color: var(--P-50) !important;
-    }
-
-    &--tile {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 40px;
-      color: var(--G-80);
-      width: 100%;
-      background-color: var(--white);
-      border-top: var(--P-50);
-    }
-  }
-}

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

@@ -1,60 +0,0 @@
-import { cn } from '@jk-core/utils';
-import { useEffect, useRef } from 'react';
-import styles from './YearTile.module.scss';
-import { CalendarView } from '../../type';
-
-interface Props {
-  selectedDate?: Date;
-  onClick: (year: number) => void;
-  tileContent?: (date: Date, view:CalendarView) => React.ReactNode;
-}
-
-const YEARS = Array.from({ length: 100 }, (_, i) => i + 2000);
-
-export default function YearTile({
-  selectedDate, onClick,
-  tileContent = () => false,
-}: Props) {
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const selectedRef = useRef<HTMLButtonElement>(null);
-
-  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.body} ref={wrapperRef}>
-      <div className={styles.body__blank} />
-      {YEARS.map((year) => (
-        <button
-          className={cn({
-            [styles.body__year]: true,
-            [styles['body__year--selected']]: !!selectedDate && selectedDate.getFullYear() === year,
-            [styles['body__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['body__year--year']}>{year}</span>
-          {tileContent(new Date(year, 1, 1), 'year') && (
-          <div className={styles['body__year--tile']}>
-            {tileContent(new Date(year, 1, 1), 'year')}
-          </div>
-          )}
-        </button>
-      ))}
-      <div className={styles.body__blank} />
-    </div>
-  );
-}

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

@@ -1,5 +0,0 @@
-@mixin body {
-  min-height: 310px;
-  padding: 5px;
-  background-color: var(--white);
-}

package/src/Calendar/hooks/useCalendarNav.ts

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

package/src/Calendar/hooks/useDateSelect.ts

@@ -1,47 +0,0 @@
-import { CalendarView } from '../type';
-
-interface UseDateSelectProps {
-  viewDate: Date;
-  setViewDate: (date: Date) => void;
-  method: CalendarView;
-  setSelectMode:(mode:CalendarView) => void;
-  onChange:(date:Date) => void;
-
-}
-
-const useDateSelect = ({
-  viewDate, setViewDate, onChange, setSelectMode, method,
-}: 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);
-    onChange(day);
-  };
-
-  const onMonthClick = (month:number) => {
-    const newDate = new Date(viewDate.getFullYear(), month, 1);
-
-    setViewDate(newDate);
-
-    if (method !== 'month') setSelectMode(method);
-    if (method === 'month') onChange(newDate);
-  };
-
-  const onYearClick = (year:number) => {
-    const newDate = new Date(year, 0, 1);
-
-    setViewDate(newDate);
-    if (method !== 'year') setSelectMode(method);
-    if (method === 'year') onChange(newDate);
-  };
-
-  return { onDayClick, onMonthClick, onYearClick };
-};
-
-export default useDateSelect;

package/src/Calendar/index.tsx

@@ -1,166 +0,0 @@
-/* eslint-disable react/no-array-index-key */
-import { useState } from 'react';
-import { cn } from '@jk-core/utils';
-import CloseIcon from '../assets/close.svg';
-import DropIcon from '../assets/drop-arrow.svg';
-import styles from './Calendar.module.scss';
-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/color.scss';
-
-interface CalendarProps {
-  date?: Date;
-  view?: CalendarView;
-  tileContent?: (date: Date | undefined, view: CalendarView) => React.ReactNode;
-  onChange?:(date:Date)=>void;
-  min?: Date;
-  max?: Date;
-  onClose?:()=>void;
-}
-
-export default function Calendar({
-  date: selectedDate, view, tileContent, onChange = () => { }, onClose,
-  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>('day');
-  const weeksInMonth = getWeeksInMonth(viewDate);
-  const { onDayClick, onMonthClick, onYearClick } = useDateSelect({
-    viewDate,
-    setViewDate: (data) => setViewDate(data),
-    onChange,
-    setSelectMode,
-    method,
-  });
-  const { disabled, onArrowClick } = useCalendarNav({
-    method, selectMode, date: viewDate, setDate: setViewDate, min, max,
-  });
-
-  return (
-    <div className={styles.calendar}>
-      <div className={styles.calendar__close}>
-        {onClose
-      && (
-        <CloseIcon onClick={onClose} />
-      )}
-      </div>
-      {/* 일/월/년 선택 버튼 */}
-      <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={() => { setMethod('day'); setSelectMode('day'); }}
-        >일
-        </button>
-        <button
-          className={cn({
-            [styles.view__selector]: true,
-            [styles['view__selector--selected']]: method === 'month',
-          })}
-          type="button"
-          onClick={() => { setMethod('month'); setSelectMode('month'); }}
-        >월
-        </button>
-        <button
-          className={cn({
-            [styles.view__selector]: true,
-            [styles['view__selector--selected']]: method === 'year',
-          })}
-          type="button"
-          onClick={() => { setMethod('year'); setSelectMode('year'); }}
-        >년
-        </button>
-      </div>
-
-      <div className={styles.nav}>
-        <button
-          className={styles.nav__button}
-          type="button"
-          onClick={() => onArrowClick('prev')}
-          disabled={disabled('prev')}
-        >
-          ◀︎
-        </button>
-        <div className={styles.nav__label}>
-          {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>
-        <button
-          className={styles.nav__button}
-          type="button"
-          onClick={() => onArrowClick('next')}
-          disabled={disabled('next')}
-        >►
-        </button>
-      </div>
-
-      {(method === 'day' && selectMode === 'day') && (
-      <DayTile
-        selectedDate={selectedDate}
-        weeksInMonth={weeksInMonth}
-        // selectRange={selectRange}
-        // selectedRange={selectedRange}
-        handleDayClick={onDayClick}
-        tileContent={() => (tileContent ? tileContent(selectedDate, method) : null)}
-      />
-      )}
-
-      {((method === 'month' || selectMode === 'month') && selectMode !== 'year') && (
-        <MonthTile
-          selectedDate={selectedDate}
-          viewDate={viewDate}
-          handleMonthClick={onMonthClick}
-          tileContent={tileContent}
-
-        />
-      )}
-
-      {(method === 'year' || selectMode === 'year') && (
-        <YearTile
-          selectedDate={selectedDate}
-          onClick={onYearClick}
-          tileContent={tileContent}
-        />
-      )}
-    </div>
-  );
-}

package/src/Calendar/type.ts

@@ -1,6 +0,0 @@
-export type CalendarView = 'day' | 'month' | 'year';
-
-export interface CalendarRange {
-  start: Date | null;
-  end: Date | null;
-}