@pfct/purple 1.3.4-npm-test.1

package/dist/components/DatePicker/BaseDatePicker/hooks/index.spec.js

@@ -0,0 +1,280 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_2 = require("@testing-library/react");
+const useBaseDatePicker_1 = __importDefault(require("./useBaseDatePicker"));
+const index_util_1 = require("./index.util");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const types_1 = require("../../../../types");
+describe('useBaseDatePicker 는 표시년월에 대한 dateList 를 제공합니다.', () => {
+    const TempComponent = () => {
+        const [displayDate, setDisplayDate] = (0, react_1.useState)(new types_1.PurpleDate([2019, 9, 1]));
+        const result = (0, useBaseDatePicker_1.default)({
+            displayDate,
+            onUpdateDisplayDate: setDisplayDate,
+        });
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement("div", null,
+                "\uB144:",
+                result.displayYear),
+            react_1.default.createElement("div", null,
+                "\uC6D4:",
+                result.displayMonth)));
+    };
+    it('displayDate 출력 확인', () => {
+        (0, react_2.render)(react_1.default.createElement(TempComponent, null));
+        expect(react_2.screen.getByText('년:2019')).toBeInTheDocument();
+        expect(react_2.screen.getByText('월:9')).toBeInTheDocument();
+    });
+    it('getDateListByWeek: 특정달에 존재하는 일자들을 주별 리스트로 반환합니다 - (1)', () => {
+        const formatter = (d) => {
+            if (d === types_1.EMPTY_DATE) {
+                return types_1.EMPTY_DATE;
+            }
+            else {
+                return d.toDateString('YYYY.MM.DD');
+            }
+        };
+        const dateList = (0, index_util_1.getDateList)({
+            displayYear: 2023,
+            displayMonth: 8,
+        });
+        expect(JSON.stringify(dateList.map(formatter))).toBe(JSON.stringify([
+            null,
+            null,
+            '2023.08.01',
+            '2023.08.02',
+            '2023.08.03',
+            '2023.08.04',
+            '2023.08.05',
+            '2023.08.06',
+            '2023.08.07',
+            '2023.08.08',
+            '2023.08.09',
+            '2023.08.10',
+            '2023.08.11',
+            '2023.08.12',
+            '2023.08.13',
+            '2023.08.14',
+            '2023.08.15',
+            '2023.08.16',
+            '2023.08.17',
+            '2023.08.18',
+            '2023.08.19',
+            '2023.08.20',
+            '2023.08.21',
+            '2023.08.22',
+            '2023.08.23',
+            '2023.08.24',
+            '2023.08.25',
+            '2023.08.26',
+            '2023.08.27',
+            '2023.08.28',
+            '2023.08.29',
+            '2023.08.30',
+            '2023.08.31',
+            null,
+            null,
+            null,
+            null,
+            null,
+            null,
+            null,
+            null,
+            null,
+        ]));
+    });
+    it('getDateListByWeek: 특정달에 존재하는 일자들을 주별 리스트로 반환합니다 - (2)', () => {
+        const formatter = (d) => {
+            if (d === types_1.EMPTY_DATE) {
+                return types_1.EMPTY_DATE;
+            }
+            else {
+                return d.toDateString('YYYY.MM.DD');
+            }
+        };
+        const dateList = (0, index_util_1.getDateList)({
+            displayYear: 2023,
+            displayMonth: 2,
+        });
+        expect(JSON.stringify(dateList.map(formatter))).toBe(JSON.stringify([
+            null,
+            null,
+            null,
+            '2023.02.01',
+            '2023.02.02',
+            '2023.02.03',
+            '2023.02.04',
+            '2023.02.05',
+            '2023.02.06',
+            '2023.02.07',
+            '2023.02.08',
+            '2023.02.09',
+            '2023.02.10',
+            '2023.02.11',
+            '2023.02.12',
+            '2023.02.13',
+            '2023.02.14',
+            '2023.02.15',
+            '2023.02.16',
+            '2023.02.17',
+            '2023.02.18',
+            '2023.02.19',
+            '2023.02.20',
+            '2023.02.21',
+            '2023.02.22',
+            '2023.02.23',
+            '2023.02.24',
+            '2023.02.25',
+            '2023.02.26',
+            '2023.02.27',
+            '2023.02.28',
+            null,
+            null,
+            null,
+            null,
+            null,
+            null,
+            null,
+            null,
+            null,
+            null,
+            null,
+        ]));
+    });
+});
+describe('checkIsInRagne 함수는 범위 내에 있는지 체크합니다', () => {
+    it('START_DATE 는 달력의 범위 시작 상수, END_DATE는 범위 끝 상수로 사용됩니다.', () => {
+        expect((0, index_util_1.checkIsInRange)({
+            from: types_1.START_DATE,
+            to: new types_1.PurpleDate([2023, 8, 31]),
+            target: new types_1.PurpleDate([2023, 8, 30]),
+        })).toBe(true);
+        expect((0, index_util_1.checkIsInRange)({
+            from: new types_1.PurpleDate([2023, 8, 31]),
+            to: types_1.END_DATE,
+            target: new types_1.PurpleDate([2023, 8, 30]),
+        })).toBe(false);
+        expect((0, index_util_1.checkIsInRange)({
+            from: new types_1.PurpleDate([2023, 8, 31]),
+            to: types_1.END_DATE,
+            target: new types_1.PurpleDate([2023, 8, 31]),
+        })).toBe(true);
+        expect((0, index_util_1.checkIsInRange)({
+            from: new types_1.PurpleDate([2023, 8, 31]),
+            to: types_1.END_DATE,
+            target: new types_1.PurpleDate([2023, 9, 1]),
+        })).toBe(true);
+    });
+    it(`from | to 중에 ${types_1.EMPTY_DATE} 값은, 미선택으로 인식합니다`, () => {
+        expect((0, index_util_1.checkIsInRange)({
+            from: types_1.EMPTY_DATE,
+            to: types_1.EMPTY_DATE,
+            target: new types_1.PurpleDate([2023, 8, 30]),
+        })).toBe(false);
+        expect((0, index_util_1.checkIsInRange)({
+            from: new types_1.PurpleDate([2023, 8, 31]),
+            to: types_1.EMPTY_DATE,
+            target: new types_1.PurpleDate([2023, 8, 30]),
+        })).toBe(false);
+        expect((0, index_util_1.checkIsInRange)({
+            from: new types_1.PurpleDate([2023, 8, 31]),
+            to: types_1.EMPTY_DATE,
+            target: new types_1.PurpleDate([2023, 8, 31]),
+        })).toBe(false);
+        expect((0, index_util_1.checkIsInRange)({
+            from: new types_1.PurpleDate([2023, 8, 31]),
+            to: types_1.EMPTY_DATE,
+            target: new types_1.PurpleDate([2023, 9, 1]),
+        })).toBe(false);
+        expect((0, index_util_1.checkIsInRange)({
+            from: new types_1.PurpleDate([2023, 8, 1]),
+            to: new types_1.PurpleDate([2023, 8, 31]),
+            target: new types_1.PurpleDate([2023, 8, 2]),
+        })).toBe(true);
+        expect((0, index_util_1.checkIsInRange)({
+            from: new types_1.PurpleDate([2023, 8, 1]),
+            to: new types_1.PurpleDate([2023, 8, 31]),
+            target: new types_1.PurpleDate([2023, 9, 2]),
+        })).toBe(false);
+    });
+});
+describe('Year & Month Controller', () => {
+    const TempComponent = () => {
+        const [displayDate, setDisplayDate] = (0, react_1.useState)(new types_1.PurpleDate([2019, 1, 1]));
+        const result = (0, useBaseDatePicker_1.default)({
+            displayDate,
+            onUpdateDisplayDate: setDisplayDate,
+        });
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("button", { onClick: result.handleClickPrevYear }, "prev year"),
+                react_1.default.createElement("button", { onClick: result.handleClickPrevMonth }, "prev month"),
+                react_1.default.createElement("button", { onClick: result.handleClickNextMonth }, "next month"),
+                react_1.default.createElement("button", { onClick: result.handleClickNextYear }, "next year")),
+            react_1.default.createElement("div", null,
+                "\uB144:",
+                result.displayYear),
+            react_1.default.createElement("div", null,
+                "\uC6D4:",
+                result.displayMonth)));
+    };
+    it('표시년월을 조절할 수 있습니다.', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(TempComponent, null));
+        const prevYearButton = react_2.screen.getByText('prev year');
+        const prevMonthButton = react_2.screen.getByText('prev month');
+        const nextMonthButton = react_2.screen.getByText('next month');
+        const nextYearButton = react_2.screen.getByText('next year');
+        expect(react_2.screen.getByText('년:2019')).toBeInTheDocument();
+        expect(react_2.screen.getByText('월:1')).toBeInTheDocument();
+        yield user_event_1.default.click(prevYearButton);
+        yield user_event_1.default.click(prevYearButton);
+        expect(react_2.screen.getByText('년:2017')).toBeInTheDocument();
+        expect(react_2.screen.getByText('월:1')).toBeInTheDocument();
+        yield user_event_1.default.click(prevMonthButton);
+        expect(react_2.screen.getByText('년:2016')).toBeInTheDocument();
+        expect(react_2.screen.getByText('월:12')).toBeInTheDocument();
+        yield user_event_1.default.click(nextMonthButton);
+        yield user_event_1.default.click(nextMonthButton);
+        expect(react_2.screen.getByText('년:2017')).toBeInTheDocument();
+        expect(react_2.screen.getByText('월:2')).toBeInTheDocument();
+        yield user_event_1.default.click(nextYearButton);
+        expect(react_2.screen.getByText('년:2018')).toBeInTheDocument();
+        expect(react_2.screen.getByText('월:2')).toBeInTheDocument();
+    }));
+});

package/dist/components/DatePicker/BaseDatePicker/hooks/index.util.d.ts

@@ -0,0 +1,24 @@
+import { DateOrNullType, PurpleDate } from '../../../../types';
+export declare const DAY_OF_WEEK_LIST: string[];
+export declare const NUMBER_OF_WEEK_DAYS: number;
+export declare const NUMBER_OF_WEEK = 6;
+interface DisplayInfo {
+    displayYear: number;
+    displayMonth: number;
+}
+export declare const getDateListByWeek: ({ displayYear, displayMonth }: DisplayInfo) => DateOrNullType[][];
+/**
+ *
+ * @param displayYear 표시연도
+ * @param displayMonth 표시달(1~12)
+ * @returns ex. 2017-06에 필요한 일자들을 리스트로 반환합니다.
+ */
+export declare const getDateList: ({ displayYear, displayMonth }: DisplayInfo) => DateOrNullType[];
+export declare const splitDateListByWeek: (dates: DateOrNullType[]) => DateOrNullType[][];
+export declare const checkIsInRange: ({ from, to, target, }: {
+    from: DateOrNullType;
+    to: DateOrNullType;
+    target: PurpleDate;
+}) => boolean;
+export declare const convertDateToDisplayString: (val: DateOrNullType, defaultValue: string) => string;
+export {};

package/dist/components/DatePicker/BaseDatePicker/hooks/index.util.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertDateToDisplayString = exports.checkIsInRange = exports.splitDateListByWeek = exports.getDateList = exports.getDateListByWeek = exports.NUMBER_OF_WEEK = exports.NUMBER_OF_WEEK_DAYS = exports.DAY_OF_WEEK_LIST = void 0;
+const types_1 = require("../../../../types");
+exports.DAY_OF_WEEK_LIST = ['일', '월', '화', '수', '목', '금', '토'];
+exports.NUMBER_OF_WEEK_DAYS = exports.DAY_OF_WEEK_LIST.length; // 7
+exports.NUMBER_OF_WEEK = 6;
+const getDateListByWeek = ({ displayYear, displayMonth }) => {
+    return (0, exports.splitDateListByWeek)((0, exports.getDateList)({ displayYear, displayMonth }));
+};
+exports.getDateListByWeek = getDateListByWeek;
+/**
+ *
+ * @param displayYear 표시연도
+ * @param displayMonth 표시달(1~12)
+ * @returns ex. 2017-06에 필요한 일자들을 리스트로 반환합니다.
+ */
+const getDateList = ({ displayYear, displayMonth }) => {
+    const result = [];
+    const firstDate = new types_1.PurpleDate([displayYear, displayMonth, 1]);
+    const firstDateDayOfWeekIndex = firstDate.indexOfDayOfWeek;
+    const lastDate = new types_1.PurpleDate([displayYear, displayMonth + 1, 0]); // 직전달 마지막날을 의미함
+    const lastDateOfMonth = lastDate.dateOfMonth;
+    let cnt = 0;
+    // 앞에 칸 채우기
+    for (let i = 0; i < firstDateDayOfWeekIndex; i++) {
+        result.push(types_1.EMPTY_DATE);
+        cnt++;
+    }
+    // 실제 데이터 채우기
+    for (let d = 1; d <= lastDateOfMonth; d++) {
+        result.push(new types_1.PurpleDate([displayYear, displayMonth, d]));
+        cnt++;
+    }
+    // 뒤에 칸 채우기
+    while (cnt < exports.NUMBER_OF_WEEK_DAYS * exports.NUMBER_OF_WEEK) {
+        result.push(types_1.EMPTY_DATE);
+        cnt++;
+    }
+    return result;
+};
+exports.getDateList = getDateList;
+const splitDateListByWeek = (dates) => {
+    const result = [];
+    let tempWeek = [];
+    for (let i = 0; i < dates.length; i++) {
+        if (tempWeek.length === exports.NUMBER_OF_WEEK_DAYS) {
+            result.push(tempWeek.slice());
+            tempWeek = [];
+        }
+        tempWeek.push(dates[i]);
+    }
+    result.push(tempWeek.slice());
+    return result;
+};
+exports.splitDateListByWeek = splitDateListByWeek;
+const checkIsInRange = ({ from, to, target, }) => {
+    if (from === types_1.EMPTY_DATE || to === types_1.EMPTY_DATE) {
+        return false;
+    }
+    else {
+        const fDate = from.timestamp;
+        const tDate = to.timestamp;
+        const targetDate = target.timestamp;
+        if (from === types_1.EMPTY_DATE || to === types_1.EMPTY_DATE) {
+            return false;
+        }
+        else {
+            if (targetDate <= tDate && targetDate >= fDate) {
+                return true;
+            }
+            return false;
+        }
+    }
+};
+exports.checkIsInRange = checkIsInRange;
+const convertDateToDisplayString = (val, defaultValue) => {
+    if (!val) {
+        return defaultValue;
+    }
+    else {
+        return val.toDateString('YY.MM.DD', '.');
+    }
+};
+exports.convertDateToDisplayString = convertDateToDisplayString;

package/dist/components/DatePicker/BaseDatePicker/hooks/useBaseDatePicker.d.ts

@@ -0,0 +1,11 @@
+import { BaseDatePickerProps } from '..';
+import { DateOrNullType, PurpleDate } from '../../../../types';
+export type BaseDatePickerHookProps = {
+    displayDate: PurpleDate;
+    onUpdateDisplayDate: (date: PurpleDate) => void;
+};
+export type BaseDatePickerHookReturnType = Omit<BaseDatePickerProps, 'dateList'> & {
+    dateList: DateOrNullType[][];
+};
+declare const useBaseDatePicker: ({ displayDate, onUpdateDisplayDate, }: BaseDatePickerHookProps) => BaseDatePickerHookReturnType;
+export default useBaseDatePicker;

package/dist/components/DatePicker/BaseDatePicker/hooks/useBaseDatePicker.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const index_util_1 = require("./index.util");
+const useBaseDatePicker = ({ displayDate, onUpdateDisplayDate, }) => {
+    const displayYear = displayDate.year;
+    const displayMonth = displayDate.month;
+    const dateList = (0, react_1.useMemo)(() => (0, index_util_1.getDateListByWeek)({
+        displayYear,
+        displayMonth,
+    }), [displayYear, displayMonth]);
+    const handleClickPrevMonth = () => {
+        onUpdateDisplayDate(displayDate.addMonth(-1));
+    };
+    const handleClickNextMonth = () => {
+        onUpdateDisplayDate(displayDate.addMonth(1));
+    };
+    const handleClickPrevYear = () => {
+        onUpdateDisplayDate(displayDate.addYear(-1));
+    };
+    const handleClickNextYear = () => {
+        onUpdateDisplayDate(displayDate.addYear(1));
+    };
+    return {
+        dateList,
+        displayYear,
+        displayMonth,
+        handleClickPrevMonth,
+        handleClickNextMonth,
+        handleClickPrevYear,
+        handleClickNextYear,
+    };
+};
+exports.default = useBaseDatePicker;

package/dist/components/DatePicker/BaseDatePicker/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { YearMonthControllerProps } from './YearMonthController';
+import { UnionDateOfMonthProps } from './DateOfMonth/type';
+import { DateOrNullType } from '../../../types/date';
+type BaseDatePickerProps = YearMonthControllerProps & {
+    dateList: (DateOrNullType | UnionDateOfMonthProps)[][];
+};
+declare const BaseDatePicker: React.FC<BaseDatePickerProps>;
+export type { BaseDatePickerProps };
+export { BaseDatePicker };

package/dist/components/DatePicker/BaseDatePicker/index.js

@@ -0,0 +1,68 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseDatePicker = void 0;
+const react_1 = __importDefault(require("react"));
+const Styled = __importStar(require("./index.styled"));
+const YearMonthController_1 = __importDefault(require("./YearMonthController"));
+const library_1 = require("../../../library");
+const Month_1 = __importDefault(require("./Month"));
+const Week_1 = __importDefault(require("./Week"));
+const DateOfMonth_1 = require("./DateOfMonth");
+const date_1 = require("../../../types/date");
+const index_util_1 = require("./hooks/index.util");
+const DayOfWeek_1 = __importDefault(require("./DayOfWeek"));
+const BaseDatePicker = (props) => {
+    return (react_1.default.createElement(Styled.DatePickerWrapper, null,
+        react_1.default.createElement(YearMonthController_1.default, { displayYear: props.displayYear, displayMonth: props.displayMonth, handleClickPrevYear: props.handleClickPrevYear, handleClickPrevMonth: props.handleClickPrevMonth, handleClickNextMonth: props.handleClickNextMonth, handleClickNextYear: props.handleClickNextYear }),
+        react_1.default.createElement(library_1.Spacing, { spaceNumber: 10 }),
+        react_1.default.createElement(Month_1.default, null,
+            react_1.default.createElement(Week_1.default, null, index_util_1.DAY_OF_WEEK_LIST.map((val, key) => (react_1.default.createElement(DayOfWeek_1.default, { key: key }, val)))),
+            props.dateList.map((week, key) => {
+                return (react_1.default.createElement(Week_1.default, { key: `week-${key}` }, week.map((d, key) => {
+                    if (!(d === date_1.EMPTY_DATE || d instanceof date_1.PurpleDate)) {
+                        switch (d.type) {
+                            case '비활성화':
+                                return react_1.default.createElement(DateOfMonth_1.DisabledDateOfMonth, Object.assign({}, d, { key: d.date.toDateString() }));
+                            case '활성화':
+                                return react_1.default.createElement(DateOfMonth_1.ActiveDateOfMonth, Object.assign({}, d, { key: d.date.toDateString() }));
+                            case '포커스단일':
+                                return react_1.default.createElement(DateOfMonth_1.SingleFocusDateOfMonth, Object.assign({}, d, { key: d.date.toDateString() }));
+                            case '포커스시작일':
+                                return react_1.default.createElement(DateOfMonth_1.RangeStartFocusDateOfMonth, Object.assign({}, d, { key: d.date.toDateString() }));
+                            case '포커스종료일':
+                                return react_1.default.createElement(DateOfMonth_1.RangeEndFocusDateOfMonth, Object.assign({}, d, { key: d.date.toDateString() }));
+                            case '빈값':
+                            default:
+                                return react_1.default.createElement(DateOfMonth_1.NoneDateOfMonth, Object.assign({}, d, { key: `null-${key}` }));
+                        }
+                    }
+                })));
+            }))));
+};
+exports.BaseDatePicker = BaseDatePicker;

package/dist/components/DatePicker/BaseDatePicker/index.styled.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const DATEPICKER_MIN_WIDTH = 320;
+export declare const DatePickerWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/DatePicker/BaseDatePicker/index.styled.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePickerWrapper = exports.DATEPICKER_MIN_WIDTH = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Colors_1 = require("../../../core/Colors");
+exports.DATEPICKER_MIN_WIDTH = 320;
+const DATEPICKER_MAX_WIDTH = 360;
+exports.DatePickerWrapper = styled_1.default.div `
+	background-color: ${Colors_1.basicColors.white};
+	padding-top: 10px;
+	margin-right: 20px;
+	margin-left: 20px;
+
+	width: 100%;
+	min-width: ${exports.DATEPICKER_MIN_WIDTH}px;
+	max-width: ${DATEPICKER_MAX_WIDTH}px;
+`;

package/dist/components/DatePicker/RangeDatePicker/hooks/index.util.d.ts

@@ -0,0 +1,11 @@
+import { DateOrNullType, DateOrNullTypeTupleList, PurpleDate } from '../../../../types';
+import { ColorType } from '../../../../utils';
+import { RangeDateOfMonthProps } from '../../BaseDatePicker/DateOfMonth/type';
+export declare const convertDatesWithRangeDatePickerFeatures: ({ dates, disabledDates, selectedStartDate, selectedEndDate, colorType, handleClickDate, }: {
+    dates: DateOrNullType[][];
+    disabledDates: DateOrNullTypeTupleList;
+    selectedStartDate: DateOrNullType;
+    selectedEndDate: DateOrNullType;
+    colorType: ColorType;
+    handleClickDate: (val: PurpleDate) => void;
+}) => RangeDateOfMonthProps[][];

package/dist/components/DatePicker/RangeDatePicker/hooks/index.util.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertDatesWithRangeDatePickerFeatures = void 0;
+const types_1 = require("../../../../types");
+const index_util_1 = require("../../BaseDatePicker/hooks/index.util");
+const convertDatesWithRangeDatePickerFeatures = ({ dates, disabledDates, selectedStartDate, selectedEndDate, colorType, handleClickDate, }) => {
+    return dates.map((week) => week.map((d) => {
+        if (d === types_1.EMPTY_DATE) {
+            return {
+                type: '빈값',
+                date: types_1.EMPTY_DATE,
+            };
+        }
+        else {
+            const isToday = d.isToday();
+            const isInRange = (0, index_util_1.checkIsInRange)({
+                from: selectedStartDate,
+                to: selectedEndDate,
+                target: d,
+            });
+            const commonResult = {
+                date: d,
+                colorType,
+                isToday,
+                isInRange,
+            };
+            // check1) 비활성화 item
+            for (let row = 0; row < disabledDates.length; row++) {
+                const [startDisabledDate, endDisabledDate] = disabledDates[row];
+                const isDisabled = (0, index_util_1.checkIsInRange)({
+                    from: startDisabledDate || types_1.START_DATE,
+                    to: endDisabledDate || types_1.END_DATE,
+                    target: d,
+                });
+                if (isDisabled) {
+                    return Object.assign(Object.assign({}, commonResult), { type: '비활성화' });
+                }
+            }
+            // check2) 포커스 item
+            if (selectedStartDate && d.toDateString() === selectedStartDate.toDateString()) {
+                return Object.assign(Object.assign({}, commonResult), { isInRange: true, type: '포커스시작일' });
+            }
+            else if (selectedEndDate && d.toDateString() === selectedEndDate.toDateString()) {
+                return Object.assign(Object.assign({}, commonResult), { isInRange: true, type: '포커스종료일' });
+            }
+            else {
+                return Object.assign(Object.assign({}, commonResult), { type: '활성화', onClickDate: handleClickDate });
+            }
+        }
+    }));
+};
+exports.convertDatesWithRangeDatePickerFeatures = convertDatesWithRangeDatePickerFeatures;

package/dist/components/DatePicker/RangeDatePicker/hooks/useRangeDatePicker.d.ts

@@ -0,0 +1,19 @@
+import { BaseDatePickerHookProps, BaseDatePickerHookReturnType } from '../../BaseDatePicker/hooks/useBaseDatePicker';
+import { RangeDateOfMonthProps } from '../../BaseDatePicker/DateOfMonth/type';
+import { ColorType } from '../../../../utils';
+import { DateOrNullType, DateOrNullTypeTupleList } from '../../../../types';
+type RangeDatePickerHooksProps = BaseDatePickerHookProps & {
+    colorType: ColorType;
+    disabledDates: DateOrNullTypeTupleList;
+    selectedStartDate: DateOrNullType;
+    selectedEndDate: DateOrNullType;
+    onUpdateSelectedStartDate: (date: DateOrNullType) => void;
+    onUpdateSelectedEndDate: (date: DateOrNullType) => void;
+};
+type RangeDatePickerHooksReturnType = Omit<BaseDatePickerHookReturnType, 'dateList'> & {
+    dateList: RangeDateOfMonthProps[][];
+    resetSelectedData: () => void;
+};
+declare const useRangeDatePicker: (props: RangeDatePickerHooksProps) => RangeDatePickerHooksReturnType;
+export type { RangeDatePickerHooksProps, RangeDatePickerHooksReturnType };
+export { useRangeDatePicker };