@pfct/purple 1.3.4-npm-test.1

package/dist/components/DatePicker/RangeDatePicker/hooks/useRangeDatePicker.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRangeDatePicker = void 0;
+const react_1 = require("react");
+const useBaseDatePicker_1 = __importDefault(require("../../BaseDatePicker/hooks/useBaseDatePicker"));
+const index_util_1 = require("./index.util");
+const types_1 = require("../../../../types");
+const INIT_SELECTED_DATA = types_1.EMPTY_DATE;
+const useRangeDatePicker = (props) => {
+    const baseDatePicker = (0, useBaseDatePicker_1.default)(props);
+    const { colorType, disabledDates, selectedStartDate, selectedEndDate, onUpdateSelectedStartDate, onUpdateSelectedEndDate, } = props;
+    const handleClickDate = (0, react_1.useCallback)((val) => {
+        if (selectedStartDate === types_1.EMPTY_DATE) {
+            onUpdateSelectedStartDate(val);
+        }
+        else if (val.timestamp < selectedStartDate.timestamp) {
+            onUpdateSelectedStartDate(val);
+            onUpdateSelectedEndDate(types_1.EMPTY_DATE);
+        }
+        else if (selectedEndDate === types_1.EMPTY_DATE) {
+            onUpdateSelectedEndDate(val);
+        }
+        else {
+            onUpdateSelectedStartDate(val);
+            onUpdateSelectedEndDate(types_1.EMPTY_DATE);
+        }
+    }, [selectedStartDate, selectedEndDate, onUpdateSelectedStartDate, onUpdateSelectedEndDate]);
+    const resetSelectedData = () => {
+        onUpdateSelectedStartDate(INIT_SELECTED_DATA);
+        onUpdateSelectedEndDate(INIT_SELECTED_DATA);
+    };
+    const dateList = (0, react_1.useMemo)(() => {
+        const dates = baseDatePicker.dateList;
+        return (0, index_util_1.convertDatesWithRangeDatePickerFeatures)({
+            dates,
+            disabledDates,
+            selectedStartDate,
+            selectedEndDate,
+            colorType,
+            handleClickDate,
+        });
+    }, [baseDatePicker.dateList, disabledDates, colorType, selectedStartDate, selectedEndDate, handleClickDate]);
+    return Object.assign(Object.assign({}, baseDatePicker), { dateList,
+        resetSelectedData });
+};
+exports.useRangeDatePicker = useRangeDatePicker;

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

@@ -0,0 +1 @@
+export * from './hooks/useRangeDatePicker';

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

@@ -0,0 +1,17 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./hooks/useRangeDatePicker"), exports);

package/dist/components/DatePicker/RangeDatePicker/index.stories.d.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { RangeDatePickerHooksProps } from './hooks/useRangeDatePicker';
+type StoryProps = {
+    disabledDates: RangeDatePickerHooksProps['disabledDates'];
+    colorType: RangeDatePickerHooksProps['colorType'];
+};
+type Story = StoryObj<StoryProps>;
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Date-Picker-f1d8e79caa964c5d9f94015f5b6d1b54?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 특정 날짜를 선택하거나 기간을 선택할 때 사용합니다.
+ *
+ */
+declare const meta: Meta<StoryProps>;
+export default meta;
+export declare const Story2: Story;

package/dist/components/DatePicker/RangeDatePicker/index.stories.js

@@ -0,0 +1,73 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Story2 = void 0;
+const react_1 = __importStar(require("react"));
+const useRangeDatePicker_1 = require("./hooks/useRangeDatePicker");
+const date_1 = require("../../../types/date");
+const BaseDatePicker_1 = require("../BaseDatePicker");
+const utils_1 = require("../../../utils");
+const ThemeColor = 'gray';
+const today = new date_1.PurpleDate().today;
+const RangeDatePickerComponent = (hookInput) => {
+    const [selectedStartDate, setSelectedStartDate] = (0, react_1.useState)(date_1.EMPTY_DATE);
+    const [selectedEndDate, setSelectedEndDate] = (0, react_1.useState)(date_1.EMPTY_DATE);
+    const [displayDate, setDisplayDate] = (0, react_1.useState)(today);
+    const props = (0, useRangeDatePicker_1.useRangeDatePicker)(Object.assign(Object.assign({}, hookInput), { selectedStartDate,
+        selectedEndDate,
+        displayDate, onUpdateSelectedStartDate: setSelectedStartDate, onUpdateSelectedEndDate: setSelectedEndDate, onUpdateDisplayDate: setDisplayDate }));
+    return react_1.default.createElement(BaseDatePicker_1.BaseDatePicker, Object.assign({}, props));
+};
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Date-Picker-f1d8e79caa964c5d9f94015f5b6d1b54?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 특정 날짜를 선택하거나 기간을 선택할 때 사용합니다.
+ *
+ */
+const meta = {
+    title: 'Component/DatePicker',
+    component: RangeDatePickerComponent,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Story2 = {
+    render: (props) => react_1.default.createElement(RangeDatePickerComponent, Object.assign({}, props)),
+    args: {
+        disabledDates: [
+            [new date_1.PurpleDate([2023, 9, 2]), new date_1.PurpleDate([2023, 9, 4])],
+            [new date_1.PurpleDate([2023, 9, 27]), new date_1.PurpleDate([2023, 9, 27])],
+        ],
+        colorType: ThemeColor,
+    },
+    argTypes: {
+        colorType: {
+            options: utils_1.ColorTypeArray,
+            control: { type: 'radio' },
+        },
+    },
+};
+exports.Story2.storyName = 'RangeDatePicker';

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { RangeDatePickerHooksReturnType } from '../RangeDatePicker/hooks/useRangeDatePicker';
+import { DoubleButtonProps } from '../../Button/DoubleButton';
+import { ColorType } from '../../../utils';
+type RangeDatePickerModalProps = RangeDatePickerHooksReturnType & {
+    selectedStartDisplayDate: string;
+    selectedEndDisplayDate: string;
+    visibleModal: boolean;
+    colorType: ColorType;
+    rightDisabled: DoubleButtonProps['right']['disabled'];
+    openModal: () => void;
+    closeModal: () => void;
+    onReset: () => void;
+    onConfirm: () => void;
+};
+declare const RangeDatePickerModal: React.FC<RangeDatePickerModalProps>;
+export type { RangeDatePickerModalProps };
+export { RangeDatePickerModal };
+export * from './useRangeDatePickerModal';

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

@@ -0,0 +1,58 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RangeDatePickerModal = void 0;
+const react_1 = __importDefault(require("react"));
+const BaseDatePicker_1 = require("../BaseDatePicker");
+const Styled = __importStar(require("./index.styled"));
+const NavBottomSheet_1 = require("../../BottomSheet/NavBottomSheet");
+const RangeDatePickerModal = (props) => {
+    const { selectedStartDisplayDate, selectedEndDisplayDate, visibleModal, colorType, rightDisabled, onReset, onConfirm, closeModal, } = props;
+    return (react_1.default.createElement(NavBottomSheet_1.NavBottomSheet, { visible: visibleModal, onMaskClick: closeModal },
+        react_1.default.createElement(NavBottomSheet_1.BottomSheetNavigationTemplate, null,
+            react_1.default.createElement(Styled.NavBottomSheetTitleWrapper, null,
+                react_1.default.createElement(Styled.TitleLeftItem, null, selectedStartDisplayDate),
+                react_1.default.createElement(Styled.DashItem, null, "-"),
+                react_1.default.createElement(Styled.TitleRightItem, null, selectedEndDisplayDate))),
+        react_1.default.createElement(NavBottomSheet_1.NavBottomSheet.Body, { hasContentPadding: false, hasBottomPadding: false },
+            react_1.default.createElement(Styled.ModalContentWrapper, null,
+                react_1.default.createElement(BaseDatePicker_1.BaseDatePicker, Object.assign({}, props)))),
+        react_1.default.createElement(NavBottomSheet_1.NavBottomSheet.DoubleButton, { purpose: "main", colorType: colorType, left: {
+                children: '재설정',
+                onClick: onReset,
+            }, right: {
+                children: '확인',
+                disabled: rightDisabled,
+                onClick: onConfirm,
+            } })));
+};
+exports.RangeDatePickerModal = RangeDatePickerModal;
+__exportStar(require("./useRangeDatePickerModal"), exports);

package/dist/components/DatePicker/RangeDatePickerModal/index.stories.d.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { RangeDatePickerModalHooksProps } from './useRangeDatePickerModal';
+type StoryProps = {
+    disabledDates: RangeDatePickerModalHooksProps['disabledDates'];
+    colorType: RangeDatePickerModalHooksProps['colorType'];
+};
+type Story = StoryObj<StoryProps>;
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Date-Picker-f1d8e79caa964c5d9f94015f5b6d1b54?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 특정 날짜를 선택하거나 기간을 선택할 때 사용합니다.
+ *
+ */
+declare const meta: Meta<StoryProps>;
+export default meta;
+export declare const Story4: Story;

package/dist/components/DatePicker/RangeDatePickerModal/index.stories.js

@@ -0,0 +1,78 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Story4 = void 0;
+const react_1 = __importStar(require("react"));
+const useRangeDatePickerModal_1 = require("./useRangeDatePickerModal");
+const _1 = require(".");
+const library_1 = require("../../../library");
+const Button_1 = require("../../../components/Button");
+const utils_1 = require("../../../utils");
+const types_1 = require("../../../types");
+const ThemeColor = 'gray';
+const today = new types_1.PurpleDate().today;
+const RangeDatePickerModalComponent = (hookInput) => {
+    const [selectedStartDate, setSelectedStartDate] = (0, react_1.useState)(types_1.EMPTY_DATE);
+    const [selectedEndDate, setSelectedEndDate] = (0, react_1.useState)(types_1.EMPTY_DATE);
+    const [displayDate, setDisplayDate] = (0, react_1.useState)(today);
+    const props = (0, useRangeDatePickerModal_1.useRangeDatePickerModal)(Object.assign(Object.assign({}, hookInput), { selectedStartDate,
+        selectedEndDate,
+        displayDate, defaultSelectedStartDisplayDate: '시작일', defaultSelectedEndDisplayDate: '종료일', onUpdateSelectedStartDate: setSelectedStartDate, onUpdateSelectedEndDate: setSelectedEndDate, onUpdateDisplayDate: setDisplayDate }));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(library_1.Spacing, { spaceNumber: 15 }),
+        react_1.default.createElement(Button_1.SingleButton, { onClick: props.openModal, colorType: ThemeColor, purpose: "main" }, "RangeDatePicker OPEN"),
+        react_1.default.createElement(_1.RangeDatePickerModal, Object.assign({}, props, { colorType: ThemeColor }))));
+};
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Date-Picker-f1d8e79caa964c5d9f94015f5b6d1b54?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 특정 날짜를 선택하거나 기간을 선택할 때 사용합니다.
+ *
+ */
+const meta = {
+    title: 'Component/DatePicker',
+    component: RangeDatePickerModalComponent,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Story4 = {
+    render: (props) => react_1.default.createElement(RangeDatePickerModalComponent, Object.assign({}, props)),
+    args: {
+        disabledDates: [
+            [new types_1.PurpleDate([2023, 9, 2]), new types_1.PurpleDate([2023, 9, 4])],
+            [new types_1.PurpleDate([2023, 9, 27]), new types_1.PurpleDate([2023, 9, 27])],
+        ],
+        colorType: ThemeColor,
+    },
+    argTypes: {
+        colorType: {
+            options: utils_1.ColorTypeArray,
+            control: { type: 'radio' },
+        },
+    },
+};
+exports.Story4.storyName = 'RangeDatePicker (바탐시트)';

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

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export declare const ModalContentWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const NavBottomSheetTitleWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TitleLeftItem: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DashItem: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TitleRightItem: 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/RangeDatePickerModal/index.styled.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TitleRightItem = exports.DashItem = exports.TitleLeftItem = exports.NavBottomSheetTitleWrapper = exports.ModalContentWrapper = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("@emotion/react");
+const core_1 = require("../../../core");
+exports.ModalContentWrapper = styled_1.default.div `
+	width: 100%;
+	display: flex;
+	justify-content: center;
+`;
+exports.NavBottomSheetTitleWrapper = styled_1.default.div `
+	display: flex;
+	justify-content: center;
+	padding: 15px 0;
+`;
+const textStyle = (0, react_1.css) `
+	${(0, core_1.headline5)()}
+	color: ${core_1.basicColors.gray900};
+`;
+const TITLE_ITEM_WIDTH = 300;
+exports.TitleLeftItem = styled_1.default.div `
+	${textStyle}
+
+	width: ${TITLE_ITEM_WIDTH}px;
+	text-align: right;
+`;
+exports.DashItem = styled_1.default.div `
+	${textStyle}
+
+	margin-left: 3px;
+	margin-right: 3px;
+`;
+exports.TitleRightItem = styled_1.default.div `
+	${textStyle}
+
+	width: ${TITLE_ITEM_WIDTH}px;
+	text-align: left;
+`;

package/dist/components/DatePicker/RangeDatePickerModal/useRangeDatePickerModal.d.ts

@@ -0,0 +1,10 @@
+import { RangeDatePickerHooksProps } from '../RangeDatePicker/hooks/useRangeDatePicker';
+import { RangeDatePickerModalProps } from '.';
+type RangeDatePickerModalHooksProps = RangeDatePickerHooksProps & {
+    defaultSelectedStartDisplayDate: string;
+    defaultSelectedEndDisplayDate: string;
+};
+type RangeDatePickerModalHooksReturnType = Omit<RangeDatePickerModalProps, 'colorType'>;
+declare const useRangeDatePickerModal: (props: RangeDatePickerModalHooksProps) => RangeDatePickerModalHooksReturnType;
+export type { RangeDatePickerModalHooksProps };
+export { useRangeDatePickerModal };

package/dist/components/DatePicker/RangeDatePickerModal/useRangeDatePickerModal.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRangeDatePickerModal = void 0;
+const react_1 = require("react");
+const useRangeDatePicker_1 = require("../RangeDatePicker/hooks/useRangeDatePicker");
+const index_util_1 = require("../BaseDatePicker/hooks/index.util");
+const types_1 = require("../../../types");
+const INIT_SELECTED_DATA = types_1.EMPTY_DATE;
+const today = new types_1.PurpleDate().today;
+const useRangeDatePickerModal = (props) => {
+    const [visibleModal, setVisibleModal] = (0, react_1.useState)(false);
+    const [tempSelectedStartDate, setTempSelectedStartDate] = (0, react_1.useState)(INIT_SELECTED_DATA);
+    const [tempSelectedEndDate, setTempSelectedEndDate] = (0, react_1.useState)(INIT_SELECTED_DATA);
+    const selectedStartDisplayDate = (0, index_util_1.convertDateToDisplayString)(tempSelectedStartDate, props.defaultSelectedStartDisplayDate);
+    const selectedEndDisplayDate = (0, index_util_1.convertDateToDisplayString)(tempSelectedEndDate, props.defaultSelectedEndDisplayDate);
+    const rightDisabled = !(tempSelectedStartDate && tempSelectedEndDate);
+    const baseDatePicker = (0, useRangeDatePicker_1.useRangeDatePicker)(Object.assign(Object.assign({}, props), { 
+        // 모달 내 임시 value, setter
+        selectedStartDate: tempSelectedStartDate, selectedEndDate: tempSelectedEndDate, onUpdateSelectedStartDate: setTempSelectedStartDate, onUpdateSelectedEndDate: setTempSelectedEndDate }));
+    const openModal = () => {
+        setVisibleModal(true);
+        props.onUpdateDisplayDate(props.selectedStartDate || today);
+        setTempSelectedStartDate(props.selectedStartDate);
+        setTempSelectedEndDate(props.selectedEndDate);
+    };
+    const closeModal = () => {
+        setVisibleModal(false);
+    };
+    const onReset = () => {
+        baseDatePicker.resetSelectedData();
+    };
+    const onConfirm = () => {
+        props.onUpdateSelectedStartDate(tempSelectedStartDate);
+        props.onUpdateSelectedEndDate(tempSelectedEndDate);
+        closeModal();
+    };
+    return Object.assign(Object.assign({}, baseDatePicker), { selectedStartDisplayDate,
+        selectedEndDisplayDate,
+        visibleModal,
+        rightDisabled,
+        openModal,
+        closeModal,
+        onReset,
+        onConfirm });
+};
+exports.useRangeDatePickerModal = useRangeDatePickerModal;

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

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

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

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertDatesWithSingleDatePickerFeatures = void 0;
+const types_1 = require("../../../../types");
+const index_util_1 = require("../../BaseDatePicker/hooks/index.util");
+const convertDatesWithSingleDatePickerFeatures = ({ dates, disabledDates, selectedDate, 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 commonResult = {
+                date: d,
+                colorType,
+                isToday,
+                isInRange: false,
+            };
+            // 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 (selectedDate && d.toDateString() === selectedDate.toDateString()) {
+                return Object.assign(Object.assign({}, commonResult), { type: '포커스단일' });
+            }
+            else {
+                return Object.assign(Object.assign({}, commonResult), { type: '활성화', onClickDate: handleClickDate });
+            }
+        }
+    }));
+};
+exports.convertDatesWithSingleDatePickerFeatures = convertDatesWithSingleDatePickerFeatures;

package/dist/components/DatePicker/SingleDatePicker/hooks/useSingleDatePicker.d.ts

@@ -0,0 +1,17 @@
+import { BaseDatePickerHookProps, BaseDatePickerHookReturnType } from '../../BaseDatePicker/hooks/useBaseDatePicker';
+import { SingleDateOfMonthProps } from '../../BaseDatePicker/DateOfMonth/type';
+import { ColorType } from '../../../../utils';
+import { DateOrNullType, DateOrNullTypeTupleList } from '../../../../types';
+type SingleDatePickerHooksProps = BaseDatePickerHookProps & {
+    colorType: ColorType;
+    disabledDates: DateOrNullTypeTupleList;
+    selectedDate: DateOrNullType;
+    onUpdateSelectedDate: (date: DateOrNullType) => void;
+};
+type SingleDatePickerHooksReturnType = Omit<BaseDatePickerHookReturnType, 'dateList'> & {
+    dateList: SingleDateOfMonthProps[][];
+    resetSelectedData: () => void;
+};
+declare const useSingleDatePicker: (props: SingleDatePickerHooksProps) => SingleDatePickerHooksReturnType;
+export type { SingleDatePickerHooksProps, SingleDatePickerHooksReturnType };
+export { useSingleDatePicker };

package/dist/components/DatePicker/SingleDatePicker/hooks/useSingleDatePicker.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSingleDatePicker = void 0;
+const react_1 = require("react");
+const useBaseDatePicker_1 = __importDefault(require("../../BaseDatePicker/hooks/useBaseDatePicker"));
+const index_util_1 = require("./index.util");
+const types_1 = require("../../../../types");
+const INIT_SELECTED_DATA = types_1.EMPTY_DATE;
+const useSingleDatePicker = (props) => {
+    const baseDatePicker = (0, useBaseDatePicker_1.default)(props);
+    const dateList = (0, react_1.useMemo)(() => {
+        const dates = baseDatePicker.dateList;
+        return (0, index_util_1.convertDatesWithSingleDatePickerFeatures)({
+            dates,
+            disabledDates: props.disabledDates,
+            selectedDate: props.selectedDate,
+            colorType: props.colorType,
+            handleClickDate: props.onUpdateSelectedDate,
+        });
+    }, [props, baseDatePicker.dateList]);
+    const resetSelectedData = () => {
+        props.onUpdateSelectedDate(INIT_SELECTED_DATA);
+    };
+    return Object.assign(Object.assign({}, baseDatePicker), { dateList,
+        resetSelectedData });
+};
+exports.useSingleDatePicker = useSingleDatePicker;

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

@@ -0,0 +1 @@
+export * from './hooks/useSingleDatePicker';

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

@@ -0,0 +1,17 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./hooks/useSingleDatePicker"), exports);

package/dist/components/DatePicker/SingleDatePicker/index.stories.d.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SingleDatePickerHooksProps } from './hooks/useSingleDatePicker';
+type StoryProps = {
+    disabledDates: SingleDatePickerHooksProps['disabledDates'];
+    colorType: SingleDatePickerHooksProps['colorType'];
+};
+type Story = StoryObj<StoryProps>;
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Date-Picker-f1d8e79caa964c5d9f94015f5b6d1b54?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 특정 날짜를 선택하거나 기간을 선택할 때 사용합니다.
+ *
+ */
+declare const meta: Meta<StoryProps>;
+export default meta;
+export declare const Story1: Story;