@jk-core/components 0.0.1

package/src/Calendar/hooks/useCalendarNav.ts

@@ -0,0 +1,80 @@
+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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,166 @@
+/* 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

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

package/src/Calendar/utils/getWeeksInMonth.ts

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,16 @@
+<!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

@@ -0,0 +1,3 @@
+<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

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

package/src/styles/color.scss

@@ -0,0 +1,90 @@
+:root {
+  --white: #ffffff;
+  --black: #000000;
+  --P-5: #eff5ff;
+  --P-10: #d3e1fb;
+  --P-20: #a7c4f7;
+  --P-30: #7ca6f3;
+  --P-40: #5089ef;
+  --P-50: #246beb;
+  --P-60: #1d56bc;
+  --P-70: #16408d;
+  --P-90: #07152f;
+  --P-100: #000000;
+  --S-5: #edf1f5;
+  --S-10: #cdd7e4;
+  --S-20: #b4c4d6;
+  --S-30: #99b0cb;
+  --S-40: #2a5c96;
+  --S-50: #003675;
+  --S-60: #002b5e;
+  --S-70: #002036;
+  --S-80: #00162f;
+  --S-90: #000b17;
+  --G-5: #f8f8f8;
+  --G-10: #f0f0f0;
+  --G-20: #e4e4e4;
+  --G-30: #d8d8d8;
+  --G-40: #c6c6c6;
+  --G-50: #8e8e8e;
+  --G-60: #717171;
+  --G-70: #555555;
+  --G-80: #2d2d2d;
+  --G-90: #1d1d1d;
+  --Point-5: #fdf2f3;
+  --Point-10: #f8d6d8;
+  --Point-20: #f5a3a8;
+  --Point-30: #f1747c;
+  --Point-40: #ec4651;
+  --Point-50: #e71825;
+  --Point-60: #b9131e;
+  --Point-70: #8b0e16;
+  --Point-80: #5c0a0f;
+  --Point-90: #2e0507;
+  --Warning-5: #fff8e9;
+  --Warning-10: #ffeac1;
+  --Warning-20: #ffe2a7;
+  --Warning-30: #ffd47c;
+  --Warning-40: #ffc550;
+  --Warning-50: #ffb724;
+  --Warning-60: #98690a;
+  --Warning-70: #66490e;
+  --Warning-80: #4d370b;
+  --Warning-90: #332507;
+  --Success-5: #eef7f0;
+  --Success-10: #cee9d4;
+  --Success-20: #b2dcbb;
+  --Success-30: #8cca99;
+  --Success-40: #33a14b;
+  --Success-50: #008a1e;
+  --Success-60: #006e18;
+  --Success-70: #005312;
+  --Success-80: #00370c;
+  --Success-90: #002207;
+  --Info-5: #e9f0ff;
+  --Info-10: #d4e1ff;
+  --Info-20: #a9c3ff;
+  --Info-30: #7da4ff;
+  --Info-40: #5286ff;
+  --Info-50: #2768ff;
+  --Info-60: #1f53cc;
+  --Info-70: #173e99;
+  --Info-80: #0c1f4d;
+  --Info-90: #040a1a;
+  --Red: #e40000;
+  --Red2: #ffe4e4;
+  --Green: #2fb400;
+  --Green-2: #d7ffe0;
+  --Orange: #ff8800;
+  --Orange-5: #ffead1;
+  --Orange-10: #ffdacc;
+  --Orange-30: #ff8f66;
+  --Orange-40: #ff6a33;
+  --Orange-50: #ff4500;
+  --Orange-60: #d53209;
+  --Orange-70: #992900;
+  --Orange-80: #661c00;
+  --Orange-90: #330e00;
+  --Modal-Shadow: #0000005a;
+  --Modal-Background: #6666663a;
+}

package/src/styles/mediaQuery.scss

@@ -0,0 +1,22 @@
+// 스크롤바 너비 14px 추가
+$pc: 1396px;
+$tablet: 1395px;
+$mobile: 774px;
+
+@mixin pc {
+  @media (min-width: $pc) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media (max-width: $tablet) {
+    @content;
+  }
+}
+
+@mixin mobile {
+  @media (max-width: $mobile) {
+    @content;
+  }
+}

package/src/svg.d.ts

@@ -0,0 +1,6 @@
+// svg를 ReactComponent처럼 사용하기 위해 선언
+declare module '*.svg' {
+  import { HTMLAttributes } from 'react';
+
+  export default React.Component<HTMLAttributes<HTMLDivElement>>;
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+ "extends": "../../tsconfig.base.json",
+  "compilerOptions": {   
+    "composite": true,
+    "baseUrl": "./src",
+    "outDir": "dist",
+    "rootDir": "./src",
+    "jsx": "react-jsx",
+    "emitDeclarationOnly": true,
+    "types": ["node", "vite/client","vite-plugin-svgr/client"],
+  },
+  "include": ["./src", "./src/svg.d.ts"]
+}