podo-ui 0.7.6 → 0.8.0

package/dist/index.d.ts

@@ -7,13 +7,15 @@ import Chip from './react/atom/chip';
 import Tooltip from './react/atom/tooltip';
 import Pagination from './react/molecule/pagination';
 import Field from './react/molecule/field';
+import DatePicker from './react/molecule/datepicker';
 declare const Form: {
     Input: import("react").FC<import("./react/atom/input").InputWrapperProps>;
     Textarea: import("react").FC<import("./react/atom/textarea").TextareaWrapperProps>;
     Editor: ({ value, width, height, minHeight, maxHeight, resizable, onChange, validator, placeholder, toolbar, }: import("./react/atom/editor").EditorProps) => import("react/jsx-runtime").JSX.Element;
     EditorView: ({ value, className }: import("./react/atom/editor-view").EditorViewProps) => import("react/jsx-runtime").JSX.Element;
     Field: ({ label, labelClass, required, helper, helperClass, children, validator, value, setClassName, className, }: import("./react/molecule/field").FieldProps) => import("react/jsx-runtime").JSX.Element;
+    DatePicker: import("react").FC<import("./react/molecule/datepicker").DatePickerProps>;
 };
 export default Form;
-export { Input, Textarea, Editor, EditorView, Avatar, Chip, Tooltip, Pagination, Field };
+export { Input, Textarea, Editor, EditorView, Avatar, Chip, Tooltip, Pagination, Field, DatePicker };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,IAAI,MAAM,mBAAmB,CAAC;AACrC,OAAO,OAAO,MAAM,sBAAsB,CAAC;AAC3C,OAAO,UAAU,MAAM,6BAA6B,CAAC;AACrD,OAAO,KAAK,MAAM,wBAAwB,CAAC;AAC3C,QAAA,MAAM,IAAI;;;;;;CAMT,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,IAAI,MAAM,mBAAmB,CAAC;AACrC,OAAO,OAAO,MAAM,sBAAsB,CAAC;AAC3C,OAAO,UAAU,MAAM,6BAA6B,CAAC;AACrD,OAAO,KAAK,MAAM,wBAAwB,CAAC;AAC3C,OAAO,UAAU,MAAM,6BAA6B,CAAC;AACrD,QAAA,MAAM,IAAI;;;;;;;CAOT,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC"}

package/dist/index.js

@@ -7,12 +7,14 @@ import Chip from './react/atom/chip';
 import Tooltip from './react/atom/tooltip';
 import Pagination from './react/molecule/pagination';
 import Field from './react/molecule/field';
+import DatePicker from './react/molecule/datepicker';
 const Form = {
     Input,
     Textarea,
     Editor,
     EditorView,
     Field,
+    DatePicker,
 };
 export default Form;
-export { Input, Textarea, Editor, EditorView, Avatar, Chip, Tooltip, Pagination, Field };
+export { Input, Textarea, Editor, EditorView, Avatar, Chip, Tooltip, Pagination, Field, DatePicker };

package/dist/react/molecule/datepicker.d.ts

@@ -0,0 +1,64 @@
+export type DatePickerMode = 'instant' | 'period';
+export type DatePickerType = 'date' | 'time' | 'datetime';
+/** 시간 값 (시, 분) */
+export interface TimeValue {
+    hour: number;
+    minute: number;
+}
+export interface DatePickerValue {
+    /** 시작 날짜 (년, 월, 일) */
+    date?: Date;
+    /** 시작 시간 (시, 분) */
+    time?: TimeValue;
+    /** 종료 날짜 (년, 월, 일) - period 모드에서 사용 */
+    endDate?: Date;
+    /** 종료 시간 (시, 분) - period 모드에서 사용 */
+    endTime?: TimeValue;
+}
+/** 날짜 범위 정의 */
+export interface DateRange {
+    from: Date;
+    to: Date;
+}
+/** 날짜 비활성화/활성화 조건 타입 */
+export type DateCondition = Date | DateRange | ((date: Date) => boolean);
+/** 날짜+시간 제한 값 (날짜만 또는 날짜+시간) */
+export interface DateTimeLimit {
+    date: Date;
+    time?: TimeValue;
+}
+/** 분 단위 선택 옵션 */
+export type MinuteStep = 1 | 5 | 10 | 15 | 20 | 30;
+export interface DatePickerProps {
+    /** 선택 모드: instant(단일) | period(기간) */
+    mode?: DatePickerMode;
+    /** 값 타입: date | time | datetime */
+    type?: DatePickerType;
+    /** 선택된 값 */
+    value?: DatePickerValue;
+    /** 값 변경 콜백 */
+    onChange?: (value: DatePickerValue) => void;
+    /** 플레이스홀더 */
+    placeholder?: string;
+    /** 비활성화 */
+    disabled?: boolean;
+    /** 하단 버튼 표시 (mode가 period일 때 기본 true) */
+    showActions?: boolean;
+    /** 드롭다운 정렬 */
+    align?: 'left' | 'right';
+    /** 클래스명 */
+    className?: string;
+    /** 선택 불가능한 날짜 조건 (특정 날짜, 범위, 함수) */
+    disable?: DateCondition[];
+    /** 선택 가능한 날짜 조건 (지정된 날짜만 활성화) */
+    enable?: DateCondition[];
+    /** 선택 가능한 최소 날짜 (Date 또는 { date, time }) */
+    minDate?: Date | DateTimeLimit;
+    /** 선택 가능한 최대 날짜 (Date 또는 { date, time }) */
+    maxDate?: Date | DateTimeLimit;
+    /** 분 단위 선택 간격 (1, 5, 10, 15, 30) 기본값: 1 */
+    minuteStep?: MinuteStep;
+}
+declare const DatePicker: React.FC<DatePickerProps>;
+export default DatePicker;
+//# sourceMappingURL=datepicker.d.ts.map

package/dist/react/molecule/datepicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["../../../react/molecule/datepicker.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAC;AAClD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC;AAE1D,kBAAkB;AAClB,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eAAe;IAC9B,sBAAsB;IACtB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,mBAAmB;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,uCAAuC;IACvC,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,oCAAoC;IACpC,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAe;AACf,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,IAAI,CAAC;IACX,EAAE,EAAE,IAAI,CAAC;CACV;AAED,wBAAwB;AACxB,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC;AAEzE,gCAAgC;AAChC,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,iBAAiB;AACjB,MAAM,MAAM,UAAU,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEnD,MAAM,WAAW,eAAe;IAC9B,sCAAsC;IACtC,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,mCAAmC;IACnC,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,YAAY;IACZ,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,cAAc;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5C,aAAa;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,WAAW;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,OAAO,CAAC,EAAE,aAAa,EAAE,CAAC;IAC1B,iCAAiC;IACjC,MAAM,CAAC,EAAE,aAAa,EAAE,CAAC;IACzB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,IAAI,GAAG,aAAa,CAAC;IAC/B,4CAA4C;IAC5C,OAAO,CAAC,EAAE,IAAI,GAAG,aAAa,CAAC;IAC/B,2CAA2C;IAC3C,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAygBD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAmiBzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/react/molecule/datepicker.js

@@ -0,0 +1,593 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import styles from './datepicker.module.scss';
+// Helper functions
+const formatDate = (date) => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year} - ${month} - ${day}`;
+};
+const formatTime = (date) => {
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    return `${hours} : ${minutes}`;
+};
+const formatDateTime = (date) => {
+    return `${formatDate(date)} ${formatTime(date)}`;
+};
+const isSameDay = (date1, date2) => {
+    return (date1.getFullYear() === date2.getFullYear() &&
+        date1.getMonth() === date2.getMonth() &&
+        date1.getDate() === date2.getDate());
+};
+const isInRange = (date, start, end) => {
+    const d = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    const s = new Date(start.getFullYear(), start.getMonth(), start.getDate());
+    const e = new Date(end.getFullYear(), end.getMonth(), end.getDate());
+    return d >= s && d <= e;
+};
+const isInRangeExclusive = (date, start, end) => {
+    const d = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    const s = new Date(start.getFullYear(), start.getMonth(), start.getDate());
+    const e = new Date(end.getFullYear(), end.getMonth(), end.getDate());
+    return d > s && d < e;
+};
+const getDaysInMonth = (year, month) => {
+    return new Date(year, month + 1, 0).getDate();
+};
+const getFirstDayOfMonth = (year, month) => {
+    return new Date(year, month, 1).getDay();
+};
+/** DateRange 타입 가드 */
+const isDateRange = (condition) => {
+    return typeof condition === 'object' && 'from' in condition && 'to' in condition;
+};
+/** 날짜가 조건에 해당하는지 확인 */
+const matchesCondition = (date, condition) => {
+    if (typeof condition === 'function') {
+        return condition(date);
+    }
+    if (isDateRange(condition)) {
+        return isInRange(date, condition.from, condition.to);
+    }
+    // Date 타입
+    return isSameDay(date, condition);
+};
+/** 날짜가 비활성화되어야 하는지 확인 */
+const isDateDisabled = (date, disable, enable) => {
+    // enable이 지정된 경우: 지정된 조건에 맞지 않으면 비활성화
+    if (enable && enable.length > 0) {
+        const isEnabled = enable.some((condition) => matchesCondition(date, condition));
+        return !isEnabled;
+    }
+    // disable이 지정된 경우: 지정된 조건에 맞으면 비활성화
+    if (disable && disable.length > 0) {
+        return disable.some((condition) => matchesCondition(date, condition));
+    }
+    return false;
+};
+/** DateTimeLimit 타입 가드 */
+const isDateTimeLimit = (value) => {
+    return typeof value === 'object' && 'date' in value && !(value instanceof Date);
+};
+/** DateTimeLimit에서 Date와 TimeValue 추출 */
+const extractDateTimeLimit = (limit) => {
+    if (isDateTimeLimit(limit)) {
+        return { date: limit.date, time: limit.time };
+    }
+    return { date: limit };
+};
+/** 날짜가 minDate보다 이전인지 확인 (날짜만 비교) */
+const isBeforeMinDate = (date, minDate) => {
+    if (!minDate)
+        return false;
+    const { date: minDateValue } = extractDateTimeLimit(minDate);
+    const d = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    const m = new Date(minDateValue.getFullYear(), minDateValue.getMonth(), minDateValue.getDate());
+    return d < m;
+};
+/** 날짜가 maxDate보다 이후인지 확인 (날짜만 비교) */
+const isAfterMaxDate = (date, maxDate) => {
+    if (!maxDate)
+        return false;
+    const { date: maxDateValue } = extractDateTimeLimit(maxDate);
+    const d = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    const m = new Date(maxDateValue.getFullYear(), maxDateValue.getMonth(), maxDateValue.getDate());
+    return d > m;
+};
+/** 날짜+시간이 minDate보다 이전인지 확인 */
+const isBeforeMinDateTime = (date, time, minDate) => {
+    if (!minDate)
+        return false;
+    const { date: minDateValue, time: minTime } = extractDateTimeLimit(minDate);
+    const d = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    const m = new Date(minDateValue.getFullYear(), minDateValue.getMonth(), minDateValue.getDate());
+    if (d < m)
+        return true;
+    if (d > m)
+        return false;
+    // 같은 날짜: 시간 비교
+    if (minTime && time) {
+        if (time.hour < minTime.hour)
+            return true;
+        if (time.hour === minTime.hour && time.minute < minTime.minute)
+            return true;
+    }
+    return false;
+};
+/** 날짜+시간이 maxDate보다 이후인지 확인 */
+const isAfterMaxDateTime = (date, time, maxDate) => {
+    if (!maxDate)
+        return false;
+    const { date: maxDateValue, time: maxTime } = extractDateTimeLimit(maxDate);
+    const d = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    const m = new Date(maxDateValue.getFullYear(), maxDateValue.getMonth(), maxDateValue.getDate());
+    if (d > m)
+        return true;
+    if (d < m)
+        return false;
+    // 같은 날짜: 시간 비교
+    if (maxTime && time) {
+        if (time.hour > maxTime.hour)
+            return true;
+        if (time.hour === maxTime.hour && time.minute > maxTime.minute)
+            return true;
+    }
+    return false;
+};
+const Calendar = ({ value, endValue, mode, onSelect, viewDate, onViewDateChange, showPrevNav = true, showNextNav = true, minViewDate, maxViewDate, disable, enable, minDate, maxDate, }) => {
+    const today = new Date();
+    const year = viewDate.getFullYear();
+    const month = viewDate.getMonth();
+    const weekDays = ['일', '월', '화', '수', '목', '금', '토'];
+    // 년도 옵션: 현재 년도 ±10년
+    const currentYear = today.getFullYear();
+    const yearOptions = Array.from({ length: 21 }, (_, i) => currentYear - 10 + i);
+    // 월 옵션: 1~12월
+    const monthOptions = Array.from({ length: 12 }, (_, i) => i);
+    // minViewDate/maxViewDate 기반 제한 계산
+    const minYear = minViewDate?.getFullYear();
+    const minMonth = minViewDate?.getMonth();
+    const maxYear = maxViewDate?.getFullYear();
+    const maxMonth = maxViewDate?.getMonth();
+    // 이전 월 버튼 비활성화 여부
+    const isPrevDisabled = minViewDate
+        ? year < minYear || (year === minYear && month <= minMonth)
+        : false;
+    // 다음 월 버튼 비활성화 여부
+    const isNextDisabled = maxViewDate
+        ? year > maxYear || (year === maxYear && month >= maxMonth)
+        : false;
+    // 년도 옵션 필터링 (선택 가능한 년도만)
+    const filteredYearOptions = yearOptions.filter((y) => {
+        if (minYear !== undefined && y < minYear)
+            return false;
+        if (maxYear !== undefined && y > maxYear)
+            return false;
+        return true;
+    });
+    // 월 옵션 필터링 (현재 선택된 년도에서 선택 가능한 월만)
+    const filteredMonthOptions = monthOptions.filter((m) => {
+        if (minYear !== undefined && minMonth !== undefined) {
+            if (year === minYear && m < minMonth)
+                return false;
+        }
+        if (maxYear !== undefined && maxMonth !== undefined) {
+            if (year === maxYear && m > maxMonth)
+                return false;
+        }
+        return true;
+    });
+    const handlePrevMonth = () => {
+        if (isPrevDisabled)
+            return;
+        onViewDateChange(new Date(year, month - 1, 1));
+    };
+    const handleNextMonth = () => {
+        if (isNextDisabled)
+            return;
+        onViewDateChange(new Date(year, month + 1, 1));
+    };
+    const handleYearChange = (e) => {
+        onViewDateChange(new Date(parseInt(e.target.value), month, 1));
+    };
+    const handleMonthChange = (e) => {
+        onViewDateChange(new Date(year, parseInt(e.target.value), 1));
+    };
+    const renderDaysView = () => {
+        const daysInMonth = getDaysInMonth(year, month);
+        const firstDay = getFirstDayOfMonth(year, month);
+        const prevMonthDays = getDaysInMonth(year, month - 1);
+        const days = [];
+        // 날짜 비활성화 확인 (disable/enable + minDate/maxDate)
+        const checkDateDisabled = (date) => {
+            if (isDateDisabled(date, disable, enable))
+                return true;
+            if (isBeforeMinDate(date, minDate))
+                return true;
+            if (isAfterMaxDate(date, maxDate))
+                return true;
+            return false;
+        };
+        // Previous month days
+        for (let i = firstDay - 1; i >= 0; i--) {
+            const day = prevMonthDays - i;
+            const prevDate = new Date(year, month - 1, day);
+            const isDisabled = checkDateDisabled(prevDate);
+            days.push(_jsx("button", { type: "button", className: `${styles.calendarCell} ${styles.other} ${isDisabled ? styles.disabled : ''}`, onClick: () => !isDisabled && onSelect(prevDate), disabled: isDisabled, children: day }, `prev-${day}`));
+        }
+        // Current month days
+        for (let day = 1; day <= daysInMonth; day++) {
+            const date = new Date(year, month, day);
+            const isToday = isSameDay(date, today);
+            const isSelected = value && isSameDay(date, value);
+            const isRangeStart = mode === 'period' && value && isSameDay(date, value);
+            const isRangeEnd = mode === 'period' && endValue && isSameDay(date, endValue);
+            const isInRangeDay = mode === 'period' && value && endValue && isInRangeExclusive(date, value, endValue);
+            const isDisabled = checkDateDisabled(date);
+            let cellClass = styles.calendarCell;
+            if (isDisabled)
+                cellClass += ` ${styles.disabled}`;
+            if (isToday && !isSelected && !isRangeStart && !isRangeEnd)
+                cellClass += ` ${styles.today}`;
+            if (mode === 'instant' && isSelected)
+                cellClass += ` ${styles.selected}`;
+            if (isRangeStart)
+                cellClass += ` ${styles.rangeStart}`;
+            if (isRangeEnd)
+                cellClass += ` ${styles.rangeEnd}`;
+            if (isInRangeDay)
+                cellClass += ` ${styles.inRange}`;
+            days.push(_jsx("button", { type: "button", className: cellClass, onClick: () => !isDisabled && onSelect(date), disabled: isDisabled, children: day }, day));
+        }
+        // Next month days
+        const totalCells = Math.ceil((firstDay + daysInMonth) / 7) * 7;
+        const remainingDays = totalCells - (firstDay + daysInMonth);
+        for (let day = 1; day <= remainingDays; day++) {
+            const nextDate = new Date(year, month + 1, day);
+            const isDisabled = checkDateDisabled(nextDate);
+            days.push(_jsx("button", { type: "button", className: `${styles.calendarCell} ${styles.other} ${isDisabled ? styles.disabled : ''}`, onClick: () => !isDisabled && onSelect(nextDate), disabled: isDisabled, children: day }, `next-${day}`));
+        }
+        // Group into rows
+        const rows = [];
+        for (let i = 0; i < days.length; i += 7) {
+            rows.push(_jsx("div", { className: styles.calendarRow, children: days.slice(i, i + 7) }, i));
+        }
+        return (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.calendarRow, children: weekDays.map((day) => (_jsx("div", { className: `${styles.calendarCell} ${styles.header}`, children: day }, day))) }), rows] }));
+    };
+    return (_jsxs("div", { className: styles.calendar, children: [_jsxs("div", { className: styles.calendarNav, children: [showPrevNav ? (_jsx("button", { type: "button", className: styles.navButton, onClick: handlePrevMonth, disabled: isPrevDisabled, children: _jsx("i", { className: "icon-expand-left" }) })) : (_jsx("div", { className: styles.navButtonPlaceholder })), _jsxs("div", { className: styles.navTitle, children: [_jsx("div", { className: styles.navSelectWrapper, children: _jsx("select", { className: styles.navSelect, value: year, onChange: handleYearChange, children: filteredYearOptions.map((y) => (_jsxs("option", { value: y, children: [y, "\uB144"] }, y))) }) }), _jsx("div", { className: styles.navSelectWrapper, children: _jsx("select", { className: styles.navSelect, value: month, onChange: handleMonthChange, children: filteredMonthOptions.map((m) => (_jsxs("option", { value: m, children: [m + 1, "\uC6D4"] }, m))) }) })] }), showNextNav ? (_jsx("button", { type: "button", className: styles.navButton, onClick: handleNextMonth, disabled: isNextDisabled, children: _jsx("i", { className: "icon-expand-right" }) })) : (_jsx("div", { className: styles.navButtonPlaceholder }))] }), _jsx("div", { className: styles.calendarGrid, children: renderDaysView() })] }));
+};
+const PeriodCalendar = ({ value, endValue, onSelect, viewDate, endViewDate, onViewDateChange, onEndViewDateChange, disable, enable, minDate, maxDate, }) => {
+    // 왼쪽 달력: 오른쪽 달력(endViewDate)보다 이후로 이동 불가
+    // 오른쪽 달력: 왼쪽 달력(viewDate)보다 이전으로 이동 불가
+    return (_jsxs("div", { className: styles.periodCalendars, children: [_jsx("div", { className: styles.periodCalendarLeft, children: _jsx(Calendar, { value: value, endValue: endValue, mode: "period", onSelect: onSelect, viewDate: viewDate, onViewDateChange: onViewDateChange, showPrevNav: true, showNextNav: true, maxViewDate: endViewDate, disable: disable, enable: enable, minDate: minDate, maxDate: maxDate }) }), _jsx("div", { className: styles.periodCalendarRight, children: _jsx(Calendar, { value: value, endValue: endValue, mode: "period", onSelect: onSelect, viewDate: endViewDate, onViewDateChange: onEndViewDateChange, showPrevNav: true, showNextNav: true, minViewDate: viewDate, disable: disable, enable: enable, minDate: minDate, maxDate: maxDate }) })] }));
+};
+// Main DatePicker Component
+const DatePicker = ({ mode = 'instant', type = 'date', value, onChange, placeholder, disabled = false, showActions, align = 'left', className, disable, enable, minDate, maxDate, minuteStep = 1, }) => {
+    const [selectingPart, setSelectingPart] = useState(null);
+    const [tempValue, setTempValue] = useState(value || {});
+    const [viewDate, setViewDate] = useState(value?.date || new Date());
+    const [endViewDate, setEndViewDate] = useState(() => {
+        const d = value?.endDate || new Date();
+        return new Date(d.getFullYear(), d.getMonth() + 1, 1);
+    });
+    const containerRef = useRef(null);
+    const shouldShowActions = showActions ?? mode === 'period';
+    // 날짜 선택 시에만 드롭다운 표시 (시/분은 native select 사용)
+    const isOpen = selectingPart === 'date' || selectingPart === 'endDate';
+    // Close on outside click
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setSelectingPart(null);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    // Sync temp value with prop value
+    useEffect(() => {
+        setTempValue(value || {});
+    }, [value]);
+    const formatPeriodText = () => {
+        if (!tempValue.date)
+            return '';
+        const formatKoreanDateTime = (date, time) => {
+            const year = date.getFullYear();
+            const month = date.getMonth() + 1;
+            const day = date.getDate();
+            const dateStr = `${year}년 ${month}월 ${day}일`;
+            if (type === 'datetime' && time) {
+                const hours = String(time.hour).padStart(2, '0');
+                const minutes = String(time.minute).padStart(2, '0');
+                return `${dateStr} ${hours}:${minutes}`;
+            }
+            return dateStr;
+        };
+        const startText = formatKoreanDateTime(tempValue.date, tempValue.time);
+        if (tempValue.endDate) {
+            const endText = formatKoreanDateTime(tempValue.endDate, tempValue.endTime);
+            return `${startText} ~ ${endText}`;
+        }
+        return startText;
+    };
+    // 날짜 선택 시 시간을 minDate/maxDate 범위 내로 자동 보정
+    const adjustTimeForDate = (date, time) => {
+        if (!time)
+            return time;
+        const minLimit = minDate ? extractDateTimeLimit(minDate) : null;
+        const maxLimit = maxDate ? extractDateTimeLimit(maxDate) : null;
+        let adjustedHour = time.hour;
+        let adjustedMinute = time.minute;
+        // minDate와 같은 날짜인 경우
+        if (minLimit?.time && isSameDay(date, minLimit.date)) {
+            if (adjustedHour < minLimit.time.hour) {
+                adjustedHour = minLimit.time.hour;
+                // minuteStep에 맞춰 올림
+                adjustedMinute = Math.ceil(minLimit.time.minute / minuteStep) * minuteStep;
+            }
+            else if (adjustedHour === minLimit.time.hour && adjustedMinute < minLimit.time.minute) {
+                // minuteStep에 맞춰 올림
+                adjustedMinute = Math.ceil(minLimit.time.minute / minuteStep) * minuteStep;
+            }
+        }
+        // maxDate와 같은 날짜인 경우
+        if (maxLimit?.time && isSameDay(date, maxLimit.date)) {
+            if (adjustedHour > maxLimit.time.hour) {
+                adjustedHour = maxLimit.time.hour;
+                // minuteStep에 맞춰 내림
+                adjustedMinute = Math.floor(maxLimit.time.minute / minuteStep) * minuteStep;
+            }
+            else if (adjustedHour === maxLimit.time.hour && adjustedMinute > maxLimit.time.minute) {
+                // minuteStep에 맞춰 내림
+                adjustedMinute = Math.floor(maxLimit.time.minute / minuteStep) * minuteStep;
+            }
+        }
+        if (adjustedHour !== time.hour || adjustedMinute !== time.minute) {
+            return { hour: adjustedHour, minute: adjustedMinute };
+        }
+        return time;
+    };
+    const handleDateSelect = (date) => {
+        // 날짜만 저장 (시간은 별도 time/endTime으로 관리)
+        const newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+        // instant 모드: 단일 날짜 선택 후 닫기
+        if (mode === 'instant') {
+            const adjustedTime = adjustTimeForDate(newDate, tempValue.time);
+            const newValue = { ...tempValue, date: newDate, time: adjustedTime };
+            setTempValue(newValue);
+            if (!shouldShowActions) {
+                onChange?.(newValue);
+            }
+            setSelectingPart(null);
+            return;
+        }
+        // period 모드: 기간 선택 로직
+        // 시작일/종료일이 같을 수 있음
+        // 시작일이 종료일보다 이후일 수 없음 (자동 정렬)
+        // 종료일이 시작일보다 이전일 수 없음 (자동 정렬)
+        // 하나만 선택해도 드롭다운 유지 (적용 버튼으로 닫음)
+        const existingStartDate = tempValue.date;
+        const existingEndDate = tempValue.endDate;
+        if (!existingStartDate) {
+            // 첫 번째 날짜 선택: 시작일 설정
+            const adjustedTime = adjustTimeForDate(newDate, tempValue.time);
+            setTempValue({ ...tempValue, date: newDate, time: adjustedTime });
+            // 드롭다운 유지 - 종료일 선택 대기
+            return;
+        }
+        if (!existingEndDate) {
+            // 두 번째 날짜 선택: 시작일/종료일 자동 정렬
+            const dateOnly = new Date(newDate.getFullYear(), newDate.getMonth(), newDate.getDate());
+            const startDateOnly = new Date(existingStartDate.getFullYear(), existingStartDate.getMonth(), existingStartDate.getDate());
+            if (dateOnly < startDateOnly) {
+                // 선택한 날짜가 시작일보다 이전 → 스왑 (선택한 날짜가 시작일, 기존 시작일이 종료일)
+                // 시간도 함께 스왑하고 범위 보정
+                const adjustedStartTime = adjustTimeForDate(newDate, tempValue.time);
+                const adjustedEndTime = adjustTimeForDate(existingStartDate, tempValue.time);
+                setTempValue({
+                    date: newDate,
+                    time: adjustedStartTime,
+                    endDate: existingStartDate,
+                    endTime: adjustedEndTime,
+                });
+            }
+            else {
+                // 선택한 날짜가 시작일 이후/같음 → 종료일로 설정
+                const adjustedEndTime = adjustTimeForDate(newDate, tempValue.endTime);
+                setTempValue({ ...tempValue, endDate: newDate, endTime: adjustedEndTime });
+            }
+            // 드롭다운 유지 - 적용 버튼으로 닫음
+            return;
+        }
+        // 이미 둘 다 선택된 경우 → 새로운 시작일로 리셋
+        const adjustedTime = adjustTimeForDate(newDate, tempValue.time);
+        setTempValue({ date: newDate, time: adjustedTime, endDate: undefined, endTime: undefined });
+    };
+    const handleReset = () => {
+        setTempValue({});
+        setSelectingPart(null);
+    };
+    const handleApply = () => {
+        onChange?.(tempValue);
+        setSelectingPart(null);
+    };
+    const handlePartClick = (part) => {
+        if (disabled)
+            return;
+        setSelectingPart(selectingPart === part ? null : part);
+    };
+    const displayValue = shouldShowActions ? tempValue : value;
+    const hasStartValue = !!displayValue?.date;
+    const hasEndValue = !!displayValue?.endDate;
+    // Helper to render date button
+    const renderDateButton = (date, isActive, onClick, isPlaceholder) => {
+        if (isPlaceholder || !date) {
+            return (_jsx("button", { type: "button", className: `${styles.inputPart} ${isActive ? styles.active : ''} ${styles.placeholder}`, onClick: onClick, children: "YYYY - MM - DD" }));
+        }
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        return (_jsxs("button", { type: "button", className: `${styles.inputPart} ${isActive ? styles.active : ''}`, onClick: onClick, children: [year, " - ", month, " - ", day] }));
+    };
+    // Helper to render hour select
+    const renderHourSelect = (time, part, isPlaceholder) => {
+        const hour = time?.hour ?? 0;
+        const hours = Array.from({ length: 24 }, (_, i) => i);
+        const isEnd = part === 'endHour';
+        const currentDate = isEnd ? tempValue.endDate : tempValue.date;
+        // minDate/maxDate 시간 제한 계산
+        const minLimit = minDate ? extractDateTimeLimit(minDate) : null;
+        const maxLimit = maxDate ? extractDateTimeLimit(maxDate) : null;
+        const isHourDisabled = (h) => {
+            if (!currentDate)
+                return false;
+            // minDate와 같은 날짜인 경우
+            if (minLimit?.time && isSameDay(currentDate, minLimit.date)) {
+                if (h < minLimit.time.hour)
+                    return true;
+            }
+            // maxDate와 같은 날짜인 경우
+            if (maxLimit?.time && isSameDay(currentDate, maxLimit.date)) {
+                if (h > maxLimit.time.hour)
+                    return true;
+            }
+            return false;
+        };
+        const handleChange = (e) => {
+            const selectedHour = parseInt(e.target.value, 10);
+            const currentTime = isEnd ? tempValue.endTime : tempValue.time;
+            let newMinute = currentTime?.minute ?? 0;
+            // 시간 변경 시 분이 범위를 벗어나면 자동 보정
+            if (currentDate) {
+                // minDate와 같은 날짜이고 선택한 시간이 minLimit 시간과 같은 경우
+                if (minLimit?.time && isSameDay(currentDate, minLimit.date) && selectedHour === minLimit.time.hour) {
+                    if (newMinute < minLimit.time.minute) {
+                        // minuteStep에 맞춰 올림
+                        newMinute = Math.ceil(minLimit.time.minute / minuteStep) * minuteStep;
+                    }
+                }
+                // maxDate와 같은 날짜이고 선택한 시간이 maxLimit 시간과 같은 경우
+                if (maxLimit?.time && isSameDay(currentDate, maxLimit.date) && selectedHour === maxLimit.time.hour) {
+                    if (newMinute > maxLimit.time.minute) {
+                        // minuteStep에 맞춰 내림
+                        newMinute = Math.floor(maxLimit.time.minute / minuteStep) * minuteStep;
+                    }
+                }
+            }
+            // minuteStep에 맞지 않는 분 값 보정
+            if (newMinute % minuteStep !== 0) {
+                newMinute = Math.floor(newMinute / minuteStep) * minuteStep;
+            }
+            const newTime = { hour: selectedHour, minute: newMinute };
+            const newValue = isEnd
+                ? { ...tempValue, endTime: newTime }
+                : { ...tempValue, time: newTime };
+            setTempValue(newValue);
+            if (!shouldShowActions) {
+                onChange?.(newValue);
+            }
+        };
+        return (_jsx("select", { className: `${styles.timeSelect} ${isPlaceholder ? styles.placeholder : ''}`, value: hour, onChange: handleChange, disabled: disabled, children: hours.map((h) => (_jsx("option", { value: h, disabled: isHourDisabled(h), children: String(h).padStart(2, '0') }, h))) }));
+    };
+    // Helper to render minute select
+    const renderMinuteSelect = (time, part, isPlaceholder) => {
+        const minute = time?.minute ?? 0;
+        // minuteStep에 따라 분 옵션 생성 (0, step, step*2, ...)
+        const minutes = Array.from({ length: Math.ceil(60 / minuteStep) }, (_, i) => i * minuteStep);
+        const isEnd = part === 'endMinute';
+        const currentDate = isEnd ? tempValue.endDate : tempValue.date;
+        const currentTime = isEnd ? tempValue.endTime : tempValue.time;
+        // minDate/maxDate 시간 제한 계산
+        const minLimit = minDate ? extractDateTimeLimit(minDate) : null;
+        const maxLimit = maxDate ? extractDateTimeLimit(maxDate) : null;
+        const isMinuteDisabled = (m) => {
+            if (!currentDate || !currentTime)
+                return false;
+            // minDate와 같은 날짜이고 같은 시간인 경우
+            if (minLimit?.time && isSameDay(currentDate, minLimit.date) && currentTime.hour === minLimit.time.hour) {
+                if (m < minLimit.time.minute)
+                    return true;
+            }
+            // maxDate와 같은 날짜이고 같은 시간인 경우
+            if (maxLimit?.time && isSameDay(currentDate, maxLimit.date) && currentTime.hour === maxLimit.time.hour) {
+                if (m > maxLimit.time.minute)
+                    return true;
+            }
+            return false;
+        };
+        const handleChange = (e) => {
+            let selectedMinute = parseInt(e.target.value, 10);
+            const selectedHour = currentTime?.hour ?? 0;
+            // 분 선택 시 범위 자동 보정
+            if (currentDate) {
+                // minDate와 같은 날짜이고 같은 시간인 경우
+                if (minLimit?.time && isSameDay(currentDate, minLimit.date) && selectedHour === minLimit.time.hour) {
+                    if (selectedMinute < minLimit.time.minute) {
+                        // minuteStep에 맞춰 올림
+                        selectedMinute = Math.ceil(minLimit.time.minute / minuteStep) * minuteStep;
+                    }
+                }
+                // maxDate와 같은 날짜이고 같은 시간인 경우
+                if (maxLimit?.time && isSameDay(currentDate, maxLimit.date) && selectedHour === maxLimit.time.hour) {
+                    if (selectedMinute > maxLimit.time.minute) {
+                        // minuteStep에 맞춰 내림
+                        selectedMinute = Math.floor(maxLimit.time.minute / minuteStep) * minuteStep;
+                    }
+                }
+            }
+            const newTime = { hour: selectedHour, minute: selectedMinute };
+            const newValue = isEnd
+                ? { ...tempValue, endTime: newTime }
+                : { ...tempValue, time: newTime };
+            setTempValue(newValue);
+            if (!shouldShowActions) {
+                onChange?.(newValue);
+            }
+        };
+        // 현재 값이 minuteStep에 맞지 않으면 가장 가까운 값으로 표시
+        const displayMinute = minutes.includes(minute) ? minute : Math.floor(minute / minuteStep) * minuteStep;
+        return (_jsx("select", { className: `${styles.timeSelect} ${isPlaceholder ? styles.placeholder : ''}`, value: displayMinute, onChange: handleChange, disabled: disabled, children: minutes.map((m) => (_jsx("option", { value: m, disabled: isMinuteDisabled(m), children: String(m).padStart(2, '0') }, m))) }));
+    };
+    // Render input content with clickable parts
+    const renderInputContent = () => {
+        const hasStartTime = displayValue?.time !== undefined;
+        const hasEndTime = displayValue?.endTime !== undefined;
+        if (type === 'date') {
+            if (mode === 'period') {
+                return (_jsxs("div", { className: styles.inputContent, children: [renderDateButton(displayValue?.date, selectingPart === 'date', () => handlePartClick('date'), !hasStartValue), _jsx("span", { className: styles.separator, children: "~" }), renderDateButton(displayValue?.endDate, selectingPart === 'endDate', () => handlePartClick('endDate'), !hasEndValue)] }));
+            }
+            return (_jsx("div", { className: styles.inputContent, children: renderDateButton(displayValue?.date, selectingPart === 'date', () => handlePartClick('date'), !hasStartValue) }));
+        }
+        if (type === 'time') {
+            if (mode === 'period') {
+                return (_jsxs("div", { className: styles.inputContent, children: [_jsxs("div", { className: styles.timeSection, children: [renderHourSelect(displayValue?.time, 'hour', !hasStartTime), _jsx("span", { className: styles.timeSeparator, children: ":" }), renderMinuteSelect(displayValue?.time, 'minute', !hasStartTime)] }), _jsx("span", { className: styles.separator, children: "~" }), _jsxs("div", { className: styles.timeSection, children: [renderHourSelect(displayValue?.endTime, 'endHour', !hasEndTime), _jsx("span", { className: styles.timeSeparator, children: ":" }), renderMinuteSelect(displayValue?.endTime, 'endMinute', !hasEndTime)] })] }));
+            }
+            return (_jsx("div", { className: styles.inputContent, children: _jsxs("div", { className: styles.timeSection, children: [renderHourSelect(displayValue?.time, 'hour', !hasStartTime), _jsx("span", { className: styles.timeSeparator, children: ":" }), renderMinuteSelect(displayValue?.time, 'minute', !hasStartTime)] }) }));
+        }
+        // datetime
+        if (mode === 'period') {
+            return (_jsxs("div", { className: styles.inputContent, children: [renderDateButton(displayValue?.date, selectingPart === 'date', () => handlePartClick('date'), !hasStartValue), _jsxs("div", { className: styles.timeSection, children: [renderHourSelect(displayValue?.time, 'hour', !hasStartTime), _jsx("span", { className: styles.timeSeparator, children: ":" }), renderMinuteSelect(displayValue?.time, 'minute', !hasStartTime)] }), _jsx("span", { className: styles.separator, children: "~" }), renderDateButton(displayValue?.endDate, selectingPart === 'endDate', () => handlePartClick('endDate'), !hasEndValue), _jsxs("div", { className: styles.timeSection, children: [renderHourSelect(displayValue?.endTime, 'endHour', !hasEndTime), _jsx("span", { className: styles.timeSeparator, children: ":" }), renderMinuteSelect(displayValue?.endTime, 'endMinute', !hasEndTime)] })] }));
+        }
+        return (_jsxs("div", { className: styles.inputContent, children: [renderDateButton(displayValue?.date, selectingPart === 'date', () => handlePartClick('date'), !hasStartValue), _jsxs("div", { className: styles.timeSection, children: [renderHourSelect(displayValue?.time, 'hour', !hasStartTime), _jsx("span", { className: styles.timeSeparator, children: ":" }), renderMinuteSelect(displayValue?.time, 'minute', !hasStartTime)] })] }));
+    };
+    // Render dropdown content based on selecting part
+    const renderDropdownContent = () => {
+        // 날짜 선택만 드롭다운으로 표시 (시/분은 native select 사용)
+        if (selectingPart === 'date' || selectingPart === 'endDate') {
+            // period 모드: 두 개의 달력을 나란히 표시
+            if (mode === 'period') {
+                return (_jsx(PeriodCalendar, { value: tempValue.date, endValue: tempValue.endDate, onSelect: handleDateSelect, viewDate: viewDate, endViewDate: endViewDate, onViewDateChange: setViewDate, onEndViewDateChange: setEndViewDate, disable: disable, enable: enable, minDate: minDate, maxDate: maxDate }));
+            }
+            // instant 모드: 단일 달력
+            return (_jsx(Calendar, { value: tempValue.date, endValue: tempValue.endDate, mode: mode, onSelect: handleDateSelect, viewDate: viewDate, onViewDateChange: setViewDate, disable: disable, enable: enable, minDate: minDate, maxDate: maxDate }));
+        }
+        return null;
+    };
+    // 아이콘 결정 (time 타입은 icon-time, 나머지는 icon-calendar)
+    const inputIcon = type === 'time' ? 'icon-time' : 'icon-calendar';
+    return (_jsxs("div", { ref: containerRef, className: `${styles.datepicker} ${className || ''}`, children: [_jsxs("div", { className: `${styles.input} ${isOpen ? styles.active : ''} ${disabled ? styles.disabled : ''}`, children: [renderInputContent(), _jsx("i", { className: `${styles.inputIcon} ${inputIcon}` })] }), isOpen && (_jsxs("div", { className: `${styles.dropdown} ${align === 'right' ? styles.right : ''}`, children: [renderDropdownContent(), shouldShowActions && (_jsxs("div", { className: styles.bottomActions, children: [_jsx("span", { className: styles.periodText, children: mode === 'period' && tempValue.date ? formatPeriodText() : '' }), _jsxs("div", { className: styles.actionButtons, children: [_jsxs("button", { type: "button", className: `${styles.actionButton} ${styles.reset}`, onClick: handleReset, children: [_jsx("i", { className: "icon-refresh" }), "\uCD08\uAE30\uD654"] }), _jsx("button", { type: "button", className: `${styles.actionButton} ${styles.apply}`, onClick: handleApply, children: "\uC801\uC6A9" })] })] }))] }))] }));
+};
+export default DatePicker;

package/dist/react/molecule/datepicker.module.scss

@@ -0,0 +1,635 @@
+@use '../../../mixin.scss' as *;
+
+// DatePicker Input
+.datepicker {
+  position: relative;
+  display: inline-block;
+}
+
+.input {
+  display: flex;
+  align-items: center;
+  gap: s(2);
+  padding: s(3) s(4);
+  background: color('bg-block');
+  border: 1px solid color('border');
+  border-radius: r(3);
+  cursor: pointer;
+  transition: border-color 0.2s;
+
+  &:hover {
+    border-color: color('border-hover');
+  }
+
+  &:focus-within,
+  &.active {
+    border-color: color('primary');
+  }
+
+  &.disabled {
+    background: color('bg-disabled');
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+}
+
+// Input Content (피그마 디자인에 맞춘 구조)
+.inputContent {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: s(2);
+}
+
+// 개별 클릭 가능한 입력 파트 (날짜용)
+.inputPart {
+  @include p4;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  padding: 0 s(2);
+  background: none;
+  border: none;
+  border-radius: r(4);
+  cursor: pointer;
+  transition: background 0.2s;
+  color: color('text-body');
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+
+  &:hover {
+    background: color('default');
+  }
+
+  &.active {
+    background: color('default-fill');
+  }
+
+  &.placeholder {
+    color: color('text-action-disabled');
+  }
+}
+
+.timeSection {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+}
+
+.timeSelect {
+  @include p4;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background: none;
+  border: none;
+  padding: 0 s(2);
+  flex: 1;
+  text-align: center;
+  text-align-last: center;
+  color: color('text-body');
+  cursor: pointer;
+  border-radius: r(4);
+  transition: background 0.2s;
+  font-variant-numeric: tabular-nums;
+
+  &:hover {
+    background: color('default');
+  }
+
+  &:focus {
+    outline: none;
+    background: color('default-fill');
+  }
+
+  &.placeholder {
+    color: color('text-action-disabled');
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+}
+
+.timeSeparator {
+  @include p4;
+  color: color('text-body');
+}
+
+.separator {
+  @include p4;
+  color: color('text-body');
+  padding: 0 s(1);
+}
+
+.inputIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  font-size: 20px;
+  line-height: 1;
+  color: color('text-sub');
+  flex-shrink: 0;
+}
+
+// Dropdown
+.dropdown {
+  position: absolute;
+  top: calc(100% + s(2));
+  left: 0;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: s(5);
+  background: color('bg-modal');
+  border-radius: s(3);
+  box-shadow: 0 6px 18px -3px rgba(50, 50, 50, 0.06);
+
+  &.right {
+    left: auto;
+    right: 0;
+  }
+}
+
+// Calendar
+.calendar {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 280px;
+}
+
+.calendarNav {
+  display: flex;
+  align-items: center;
+  gap: s(4);
+  height: 40px;
+}
+
+.navButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: color('default');
+  border: none;
+  border-radius: r(3);
+  cursor: pointer;
+  transition: background 0.2s;
+
+  &:hover {
+    background: color('default-hover');
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  i {
+    font-size: 20px;
+    color: color('text-action');
+  }
+}
+
+.navButtonPlaceholder {
+  width: 40px;
+  height: 40px;
+}
+
+.navTitle {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: s(1);
+}
+
+.navTitleButton {
+  @include display7;
+  display: flex;
+  align-items: center;
+  gap: s(2);
+  padding: 0 s(2);
+  background: none;
+  border: none;
+  border-radius: r(4);
+  cursor: pointer;
+  transition: background 0.2s;
+
+  &:hover {
+    background: color('default');
+  }
+
+  i {
+    font-size: 18px;
+    color: color('text-action');
+  }
+}
+
+.navSelectWrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  &::after {
+    content: '';
+    position: absolute;
+    right: s(2);
+    top: 50%;
+    transform: translateY(-50%);
+    width: 0;
+    height: 0;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 5px solid color('text-action');
+    pointer-events: none;
+  }
+}
+
+.navSelect {
+  @include display7;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background: none;
+  border: none;
+  padding: s(2) s(6) s(2) s(2);
+  border-radius: r(4);
+  cursor: pointer;
+  transition: background 0.2s;
+  color: color('text-body');
+
+  &:hover {
+    background: color('default');
+  }
+
+  &:focus {
+    outline: none;
+    background: color('default-fill');
+  }
+}
+
+.calendarGrid {
+  display: flex;
+  flex-direction: column;
+  gap: s(2);
+  padding-top: s(3);
+  border-top: 1px solid color('border');
+}
+
+.calendarRow {
+  display: flex;
+  width: 100%;
+}
+
+.calendarCell {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  @include p3;
+  background: none;
+  border: none;
+  border-radius: r(3);
+  cursor: pointer;
+  transition: background 0.2s;
+
+  &.header {
+    color: color('text-sub');
+    cursor: default;
+  }
+
+  &.other {
+    color: color('text-action-disabled');
+  }
+
+  &.today {
+    font-weight: 600;
+    color: color('primary');
+  }
+
+  &.selected {
+    background: color('primary');
+    color: color('primary-reverse');
+    font-weight: 600;
+  }
+
+  &.inRange {
+    background: color('primary-fill');
+    border-radius: 0;
+  }
+
+  &.rangeStart {
+    background: color('primary');
+    color: color('primary-reverse');
+    font-weight: 600;
+    border-radius: r(3);
+  }
+
+  &.rangeEnd {
+    background: color('primary');
+    color: color('primary-reverse');
+    font-weight: 600;
+    border-radius: r(3);
+  }
+
+  &.disabled {
+    color: color('text-action-disabled');
+    background: color('default');
+    border: none;
+    border-radius: 0;
+    outline: none;
+    cursor: not-allowed;
+
+    &:hover {
+      background: color('default');
+    }
+  }
+
+  &:not(.header):not(.selected):not(.disabled):not(.rangeStart):not(.rangeEnd):not(.inRange):hover {
+    background: color('default');
+  }
+}
+
+// Year/Month Selector
+.yearMonthGrid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: s(2);
+  padding-top: s(3);
+  border-top: 1px solid color('border');
+}
+
+.yearMonthCell {
+  @include p3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  background: none;
+  border: none;
+  border-radius: r(3);
+  cursor: pointer;
+  transition: background 0.2s;
+
+  &:hover {
+    background: color('default');
+  }
+
+  &.selected {
+    background: color('primary');
+    color: color('primary-reverse');
+    font-weight: 600;
+  }
+
+  &.current {
+    font-weight: 600;
+    color: color('primary');
+  }
+}
+
+// Time Selector
+.timeSelector {
+  display: flex;
+  flex-direction: column;
+  min-width: 120px;
+  background: color('bg-block');
+  border-radius: r(2);
+}
+
+.timeDisplay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: s(1);
+  padding: s(2);
+}
+
+.timeDisplayItem {
+  @include display7;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: s(2) s(3);
+  background: color('default');
+  border: none;
+  border-radius: r(2);
+  cursor: pointer;
+  transition: background 0.2s;
+  min-width: 48px;
+
+  &:hover {
+    background: color('default-hover');
+  }
+
+  &.active {
+    background: color('primary');
+    color: color('primary-reverse');
+  }
+}
+
+.timeDisplaySeparator {
+  @include display7;
+  color: color('text-body');
+}
+
+.timeColumn {
+  display: flex;
+  flex-direction: column;
+  gap: s(1);
+  padding: s(3);
+  max-height: 200px;
+  overflow-y: auto;
+  border-top: 1px solid color('border');
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: color('border');
+    border-radius: r(full);
+  }
+}
+
+.timeItem {
+  @include p4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: s(2) s(3);
+  background: none;
+  border: none;
+  border-radius: r(2);
+  cursor: pointer;
+  transition: background 0.2s;
+  text-align: center;
+
+  &:hover {
+    background: color('default');
+  }
+
+  &.selected {
+    background: color('primary');
+    color: color('primary-reverse');
+    font-weight: 600;
+  }
+}
+
+// Bottom Actions
+.bottomActions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: s(3);
+  padding-top: s(3);
+  border-top: 1px solid color('border');
+}
+
+.periodText {
+  @include p3;
+  color: color('primary');
+  flex: 1;
+}
+
+.actionButtons {
+  display: flex;
+  gap: s(3);
+  flex-shrink: 0;
+}
+
+.actionButton {
+  @include p3;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: s(2);
+  padding: s(3) s(4);
+  border-radius: r(3);
+  cursor: pointer;
+  transition: background 0.2s;
+  white-space: nowrap;
+
+  i {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    font-size: 18px;
+    line-height: 1;
+  }
+
+  &.reset {
+    background: color('default-fill');
+    border: 1px solid color('border');
+    color: color('default-reverse');
+
+    &:hover {
+      background: color('default-hover');
+    }
+  }
+
+  &.apply {
+    background: color('primary');
+    border: none;
+    color: color('primary-reverse');
+
+    &:hover {
+      background: color('primary-hover');
+    }
+  }
+}
+
+// Combined Layout (datetime)
+.combinedDropdown {
+  display: flex;
+  gap: s(5);
+}
+
+.calendarWrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.timeWrapper {
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid color('border');
+  padding-left: s(5);
+}
+
+.timeLabel {
+  @include p4;
+  color: color('text-sub');
+  margin-bottom: s(2);
+  text-align: center;
+}
+
+// Period Calendar Layout (두 개 캘린더가 하나의 드롭다운에서 가로로)
+.periodCalendarWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: s(4);
+}
+
+.periodCalendarNav {
+  display: flex;
+  align-items: center;
+  gap: s(4);
+  height: 40px;
+}
+
+.periodCalendarNavSection {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: s(4);
+}
+
+.periodCalendarBody {
+  display: flex;
+  gap: s(4);
+  padding-top: s(3);
+  border-top: 1px solid color('border');
+}
+
+.periodCalendarColumn {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: s(2);
+}
+
+// Period Calendars (두 개 달력 나란히)
+.periodCalendars {
+  display: flex;
+  gap: s(4);
+}
+
+.periodCalendarLeft {
+  flex: 1;
+}
+
+.periodCalendarRight {
+  flex: 1;
+}
+
+.periodCalendar {
+  flex: 1;
+
+  &:not(:last-child) {
+    border-right: 1px solid color('border');
+    padding-right: s(4);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "podo-ui",
-  "version": "0.7.6",
+  "version": "0.8.0",
   "type": "module",
   "author": "hada0127 <work@tarucy.net>",
   "license": "MIT",
@@ -58,7 +58,7 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev -p 5432",
     "build": "next build",
     "build:lib": "node ./cli/build-lib.js",
     "prepublishOnly": "npm run build:lib",