@jk-core/components 0.0.64 → 0.0.65

package/dist/index.js

@@ -1,3 +1,4 @@
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(":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;--Calendar-Background: #ffffff}button{border:none;background-color:transparent;user-select:none;-webkit-user-select:none;-moz-user-select:none;cursor:pointer}.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:.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)}.day-tile{min-height:310px;padding:5px;background-color:var(--white)}.day-tile__tile{display:flex;flex-direction:column;justify-content:space-between;gap:5px}.day-tile__weeks{display:flex;justify-content:space-between;font-weight:400;font-size:1em}.day-tile__weeks--date{flex:1 0;display:flex;justify-content:center;align-items:center;min-width:40px;padding:5px 0}.day-tile__week{display:flex;justify-content:space-between}.day-tile__day{display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;min-width:40px;min-height:40px;border-radius:40px;padding:5px;border:none;font-weight:400;font-size:1em}@media (min-width: 1396px){.day-tile__day:hover{background-color:var(--G-5)}}.day-tile__day:active{background-color:var(--G-10)}.day-tile__day--today{color:var(--P-50);font-weight:600}.day-tile__day--selected{background-color:var(--P-50)!important;color:var(--white)!important;font-weight:600}.day-tile__day--before{color:var(--G-40)}.day-tile__day--tile{border-radius:10px;gap:5px}.month-tile{min-height:310px;padding:5px;background-color:var(--white);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);gap:5px}.month-tile__month{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:5px;border-radius:10px}.month-tile__month svg{width:15px;height:15px;cursor:pointer}@media (min-width: 1396px){.month-tile__month:hover{background-color:var(--G-5)}}.month-tile__month:active{background-color:var(--G-10)}.month-tile__month--selected{background-color:var(--P-50)!important;color:var(--white)!important}.month-tile__month--today{color:var(--P-50);font-weight:600}.month-tile__month--tile{justify-content:flex-start;gap:5px}.year-tile{min-height:310px;padding:5px;background-color:var(--white);position:relative;height:310px;display:flex;flex-direction:column;align-items:center;overflow:auto;gap:10px}.year-tile::-webkit-scrollbar{display:none}.year-tile__blank{height:calc(50% - 40px);flex-shrink:0}.year-tile__blank:last-child{height:50%}.year-tile__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}@media (min-width: 1396px){.year-tile__year:hover{background-color:var(--P-5)}}.year-tile__year:active{background-color:var(--P-10)}.year-tile__year--border{border:1px solid var(--G-30);background-color:var(--P-5)}@media (min-width: 1396px){.year-tile__year--border:hover{background-color:var(--P-10)}}.year-tile__year--year{height:40px;display:flex;align-items:center;justify-content:center}.year-tile__year--selected{color:var(--white);background-color:var(--P-50)!important}.year-tile__year--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)}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
 import * as F from "react";
 import Me, { useRef as Oe, useEffect as gr, useState as oe } from "react";
 var ie = { exports: {} }, W = {};

package/dist/index.umd.cjs

@@ -1,3 +1,4 @@
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(":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;--Calendar-Background: #ffffff}button{border:none;background-color:transparent;user-select:none;-webkit-user-select:none;-moz-user-select:none;cursor:pointer}.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:.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)}.day-tile{min-height:310px;padding:5px;background-color:var(--white)}.day-tile__tile{display:flex;flex-direction:column;justify-content:space-between;gap:5px}.day-tile__weeks{display:flex;justify-content:space-between;font-weight:400;font-size:1em}.day-tile__weeks--date{flex:1 0;display:flex;justify-content:center;align-items:center;min-width:40px;padding:5px 0}.day-tile__week{display:flex;justify-content:space-between}.day-tile__day{display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;min-width:40px;min-height:40px;border-radius:40px;padding:5px;border:none;font-weight:400;font-size:1em}@media (min-width: 1396px){.day-tile__day:hover{background-color:var(--G-5)}}.day-tile__day:active{background-color:var(--G-10)}.day-tile__day--today{color:var(--P-50);font-weight:600}.day-tile__day--selected{background-color:var(--P-50)!important;color:var(--white)!important;font-weight:600}.day-tile__day--before{color:var(--G-40)}.day-tile__day--tile{border-radius:10px;gap:5px}.month-tile{min-height:310px;padding:5px;background-color:var(--white);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);gap:5px}.month-tile__month{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:5px;border-radius:10px}.month-tile__month svg{width:15px;height:15px;cursor:pointer}@media (min-width: 1396px){.month-tile__month:hover{background-color:var(--G-5)}}.month-tile__month:active{background-color:var(--G-10)}.month-tile__month--selected{background-color:var(--P-50)!important;color:var(--white)!important}.month-tile__month--today{color:var(--P-50);font-weight:600}.month-tile__month--tile{justify-content:flex-start;gap:5px}.year-tile{min-height:310px;padding:5px;background-color:var(--white);position:relative;height:310px;display:flex;flex-direction:column;align-items:center;overflow:auto;gap:10px}.year-tile::-webkit-scrollbar{display:none}.year-tile__blank{height:calc(50% - 40px);flex-shrink:0}.year-tile__blank:last-child{height:50%}.year-tile__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}@media (min-width: 1396px){.year-tile__year:hover{background-color:var(--P-5)}}.year-tile__year:active{background-color:var(--P-10)}.year-tile__year--border{border:1px solid var(--G-30);background-color:var(--P-5)}@media (min-width: 1396px){.year-tile__year--border:hover{background-color:var(--P-10)}}.year-tile__year--year{height:40px;display:flex;align-items:center;justify-content:center}.year-tile__year--selected{color:var(--white);background-color:var(--P-50)!important}.year-tile__year--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)}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
 (function(O,k){typeof exports=="object"&&typeof module<"u"?k(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],k):(O=typeof globalThis<"u"?globalThis:O||self,k(O.index={},O.React))})(this,function(O,k){"use strict";function Me(n){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const a in n)if(a!=="default"){const p=Object.getOwnPropertyDescriptor(n,a);Object.defineProperty(i,a,p.get?p:{enumerable:!0,get:()=>n[a]})}}return i.default=n,Object.freeze(i)}const P=Me(k);var z={exports:{}},A={};/**
  * @license React
  * react-jsx-runtime.production.min.js

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jk-core/components",
-  "version": "0.0.64",
+  "version": "0.0.65",
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "types": "./dist/index.d.ts",
@@ -26,9 +26,9 @@
     }
   },
   "files": [
-    "dist",
-    "dist/style.css",
-    "src"
+    "./dist",
+    "./`src",
+    "./src/Calendar/scss"
   ],
   "keywords": [
     "utils",
@@ -81,6 +81,7 @@
     "typescript": "^5.5.3",
     "vite": "^5.4.8",
     "vite-plugin-checker": "^0.8.0",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
     "vite-plugin-dts": "^4.2.3",
     "vite-plugin-sass-dts": "^1.3.29",
     "vite-plugin-svgr": "^4.2.0",

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

@@ -1,49 +0,0 @@
-/* eslint-disable max-len */
-/* eslint-disable react/no-array-index-key */
-import isSameDay from 'Calendar/utils/isSameDay';
-
-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="day-tile">
-      <div className="day-tile__weeks">
-        {WEEKS.map((week) => (<div className="day-tile__weeks--date" key={week}>{week}</div>))}
-      </div>
-
-      <div className="day-tile__tile">
-        {weeksInMonth.map((week, index) => (
-          <div key={index} className="day-tile__week">
-            {week.map((day, idx) => (
-              <button
-                className={`day-tile__day
-                  ${isSameDay(day.date, new Date()) && 'day-tile__day--today'}
-                  ${!!selectedDate && isSameDay(day.date, selectedDate) && 'day-tile__day--selected'}
-                  ${!day.thisMonth && 'day-tile__day--before'}
-                  ${!!(tileContent && tileContent()) && 'day-tile__day--tile'}
-                `}
-                type="button"
-                key={idx}
-                onClick={() => handleDayClick(day.date)}
-              >
-                {day.date.getDate()}
-                {tileContent && tileContent()}
-              </button>
-            ))}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

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()} />,
-);

package/src/styles/color.scss

@@ -1,91 +0,0 @@
-: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;
-  --Calendar-Background: #ffffff;
-}

package/src/styles/mediaQuery.scss

@@ -1,22 +0,0 @@
-// 스크롤바 너비 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

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

package/src/vite-env.d.ts

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