@jk-core/components 0.0.64 → 0.1.0

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

@@ -1,34 +0,0 @@
-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="month-tile">
-      {MONTHS.map((month) => (
-        <button
-          className={`month-tile__month
-            ${!!selectedDate && isSameDay(selectedDate, new Date(viewDate.getFullYear(), month), 'month') && 'month-tile--selected'} 
-            ${isSameDay(new Date(viewDate.getFullYear(), month), new Date(), 'month') && 'month-tile__month--today'} 
-            ${!!tileContent(new Date(viewDate.getFullYear(), month - 1, 1), 'month') && 'month-tile__month--tile'}`}
-          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/index.tsx

@@ -1,54 +0,0 @@
-import { useEffect, useRef } from 'react';
-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="year-tile" ref={wrapperRef}>
-      <div className="year-tile__blank" />
-      {YEARS.map((year) => (
-        <button
-          className={`year-tile__year ${selectedDate && selectedDate.getFullYear() === year && 'year-tile__year--selected'} ${tileContent(new Date(year, 1, 1), 'year') && 'year-tile__year--border'}`}
-          key={year}
-          type="button"
-          ref={!!selectedDate && selectedDate.getFullYear() === year ? selectedRef : null}
-          onClick={() => onClick(year)}
-        >
-          <span className="year-tile__year--year">{year}</span>
-          {tileContent(new Date(year, 1, 1), 'year') && (
-          <div className="year-tile__year--tile">
-            {tileContent(new Date(year, 1, 1), 'year')}
-          </div>
-          )}
-        </button>
-      ))}
-      <div className="year-tile__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,143 +0,0 @@
-/* eslint-disable react/no-array-index-key */
-import { useState } from 'react';
-import CloseIcon from '../assets/close.svg';
-import DropIcon from '../assets/drop-arrow.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 './scss/main.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="calendar">
-      <div className="calendar__close">
-        {onClose && (
-          <CloseIcon onClick={onClose} />
-        )}
-      </div>
-      {/* 일/월/년 선택 버튼 */}
-      <div className="view">
-        <div className={`view__block ${method === 'month' && 'view__block--second'} ${method === 'year' && 'view__block--last'}`} />
-        <button
-          className={`view__selector ${method === 'day' && 'view__selector--selected'}`}
-          type="button"
-          onClick={() => { setMethod('day'); setSelectMode('day'); }}
-        >일
-        </button>
-        <button
-          className={`view__selector ${method === 'month' && 'view__selector--selected'}`}
-          type="button"
-          onClick={() => { setMethod('month'); setSelectMode('month'); }}
-        >월
-        </button>
-        <button
-          className={`view__selector ${method === 'year' && 'view__selector--selected'}`}
-          type="button"
-          onClick={() => { setMethod('year'); setSelectMode('year'); }}
-        >년
-        </button>
-      </div>
-
-      <div className="nav">
-        <button
-          className="nav__button"
-          type="button"
-          onClick={() => onArrowClick('prev')}
-          disabled={disabled('prev')}
-        >
-          ◀︎
-        </button>
-        <div className="nav__label">
-          {method === 'year' && '연도 선택'}
-          {method !== 'year' && (
-          <button
-            className={`nav__label--date ${selectMode === 'year' && 'nav__label--date-selected'}`}
-            type="button"
-            onClick={() => setSelectMode('year')}
-          >
-            {`${viewDate.getFullYear()}년`}<DropIcon />
-          </button>
-          )}
-          {method === 'day' && (
-          <button
-            className={`nav__label--date ${selectMode === 'month' && 'nav__label--date-selected'}`}
-            type="button"
-            onClick={() => setSelectMode('month')}
-          >
-            {`${viewDate.getMonth() + 1}월`}<DropIcon />
-          </button>
-          )}
-        </div>
-        <button
-          className="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/style.css

@@ -1,129 +0,0 @@
-.calendar {
-  width: 100%;
-  min-width: 300px;
-  border: 1px solid var(--G-30);
-  border-radius: 10px;
-  overflow: hidden;
-  color: var(--G-80);
-  background-color: var(--white);
-}
-
-.calendar__close {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  padding: 5px 5px 0 0;
-}
-
-.calendar__close svg {
-  width: 15px;
-  height: 15px;
-  cursor: pointer;
-}
-
-.view {
-  position: relative;
-  margin: 0 auto;
-  width: 90%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: #f3f4f8;
-  border-radius: 10px;
-}
-
-.view__block {
-  position: absolute;
-  background-color: #fff;
-  left: 0;
-  height: 100%;
-  border: 2px solid var(--G-30);
-  width: 33.3%;
-  border-radius: 10px;
-  transition: 0.3s;
-}
-
-.view__block--second {
-  left: 33%;
-}
-
-.view__block--last {
-  left: 66.6%;
-}
-
-.view__selector {
-  position: relative;
-  height: 40px;
-  flex: 1 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--G-60);
-  font-size: 1em;
-  font-weight: 400;
-}
-
-.view__selector--selected {
-  color: var(--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(--G-30);
-  font-size: 1.3em;
-  font-weight: 400;
-}
-
-.nav__button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  padding: 10px;
-  border-radius: 100%;
-}
-
-.nav__button:active {
-  background-color: var(--G-30);
-}
-
-.nav__button:disabled {
-  cursor: not-allowed;
-  fill: var(--G-40);
-  background-color: transparent;
-}
-
-.nav__label {
-  flex: 1 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  font-size: 1.1em;
-  font-weight: 400;
-}
-
-.nav__label--date {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 5px;
-  padding: 5px 10px;
-  font-size: 1.2em;
-  font-weight: 400;
-}
-
-.nav__label--date svg {
-  width: 15px;
-  height: 15px;
-}
-
-.nav__label--date-selected {
-  background-color: var(--S-10);
-}

package/src/Calendar/type.ts

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

package/src/Calendar/utils/getWeeksInMonth.ts

@@ -1,45 +0,0 @@
-const getWeeksInMonth = (viewDate:Date) => {
-  const startOfMonth = new Date(viewDate.getFullYear(), viewDate.getMonth(), 1);
-  const endOfMonth = new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 0);
-  const weeks = [];
-  let currentWeek = [];
-
-  const startDayOfWeek = startOfMonth.getDay();
-  if (startDayOfWeek !== 0) {
-    const prevMonthEnd = new Date(startOfMonth);
-    prevMonthEnd.setDate(0);
-    for (let i = startDayOfWeek - 1; i >= 0; i -= 1) {
-      const prevDate = new Date(prevMonthEnd);
-      prevDate.setDate(prevMonthEnd.getDate() - i);
-      currentWeek.push({ thisMonth: false, date: prevDate });
-    }
-  }
-
-  const currentDate = new Date(startOfMonth);
-
-  while (currentDate <= endOfMonth) {
-    currentWeek.push({ thisMonth: true, date: new Date(currentDate) });
-    if (currentDate.getDay() === 6) {
-      weeks.push(currentWeek);
-      currentWeek = [];
-    }
-    currentDate.setDate(currentDate.getDate() + 1);
-  }
-
-  const endDayOfWeek = endOfMonth.getDay();
-  if (endDayOfWeek !== 6) {
-    for (let i = 1; i <= 6 - endDayOfWeek; i += 1) {
-      const nextDate = new Date(endOfMonth);
-      nextDate.setDate(endOfMonth.getDate() + i);
-      currentWeek.push({ thisMonth: false, date: nextDate });
-    }
-  }
-
-  if (currentWeek.length > 0) {
-    weeks.push(currentWeek);
-  }
-
-  return weeks;
-};
-
-export default getWeeksInMonth;

package/src/Calendar/utils/isInRange.ts

@@ -1,8 +0,0 @@
-import { CalendarRange } from '../type';
-
-const isInRange = (day: Date, range:CalendarRange) => {
-  if (!range.start || !range.end) return false;
-  return day > range.start && day < range.end;
-};
-
-export default isInRange;

package/src/Calendar/utils/isSameDay.ts

@@ -1,21 +0,0 @@
-import { CalendarView } from '../type';
-
-const isSameDay = (date1: Date | null, date2: Date | null, view: CalendarView = 'day'): boolean => {
-  if (date1 === null || date2 === null) return false;
-
-  switch (view) {
-    case 'day':
-      return date1.getFullYear() === date2.getFullYear()
-        && date1.getMonth() === date2.getMonth()
-        && date1.getDate() === date2.getDate();
-    case 'month':
-      return date1.getFullYear() === date2.getFullYear()
-        && date1.getMonth() === date2.getMonth();
-    case 'year':
-      return date1.getFullYear() === date2.getFullYear();
-    default:
-      return false;
-  }
-};
-
-export default isSameDay;

package/src/assets/close.svg

@@ -1,16 +0,0 @@
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
-<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#000000" fill="#000000" stroke-width="0.696">
-
-<g id="SVGRepo_bgCarrier" stroke-width="0"/>
-
-<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
-
-<g id="SVGRepo_iconCarrier">
-
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19.207 6.207a1 1 0 0 0-1.414-1.414L12 10.586 6.207 4.793a1 1 0 0 0-1.414 1.414L10.586 12l-5.793 5.793a1 1 0 1 0 1.414 1.414L12 13.414l5.793 5.793a1 1 0 0 0 1.414-1.414L13.414 12l5.793-5.793z" />
-
-</g>
-
-</svg>

package/src/assets/drop-arrow.svg

@@ -1,3 +0,0 @@
-<svg width="25" height="25" viewBox="0 0 20 20" fill="none"  stroke="#2D2D2D" xmlns="http://www.w3.org/2000/svg">
-<path d="M5 7.5L10 13L15 7.5" stroke-width="1.4" stroke-linecap="round"/>
-</svg>

package/src/index.tsx

@@ -1,3 +0,0 @@
-import Calendar from './Calendar';
-
-export { Calendar };

package/src/main.tsx

@@ -1,6 +0,0 @@
-import { createRoot } from 'react-dom/client';
-import Calendar from './Calendar';
-
-createRoot(document.getElementById('root')!).render(
-  <Calendar date={new Date()} />,
-);