podo-ui 0.8.0 → 0.8.2

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

@@ -29,6 +29,14 @@ export interface DateTimeLimit {
 }
 /** 분 단위 선택 옵션 */
 export type MinuteStep = 1 | 5 | 10 | 15 | 20 | 30;
+/** 초기 달력 표시 월 설정 */
+export type CalendarInitial = 'now' | 'prevMonth' | 'nextMonth' | Date;
+export interface InitialCalendar {
+    /** 시작 달력 초기 월 (period 모드의 왼쪽 달력) */
+    start?: CalendarInitial;
+    /** 종료 달력 초기 월 (period 모드의 오른쪽 달력) */
+    end?: CalendarInitial;
+}
 export interface DatePickerProps {
     /** 선택 모드: instant(단일) | period(기간) */
     mode?: DatePickerMode;
@@ -58,6 +66,18 @@ export interface DatePickerProps {
     maxDate?: Date | DateTimeLimit;
     /** 분 단위 선택 간격 (1, 5, 10, 15, 30) 기본값: 1 */
     minuteStep?: MinuteStep;
+    /**
+     * 날짜/시간 표시 포맷
+     * y: 년, m: 월, d: 일, h: 시, i: 분
+     * 예시: "y-m-d", "y.m.d h:i", "y년 m월 d일 h시 i분"
+     */
+    format?: string;
+    /**
+     * 기간 선택 모드에서 초기 달력 표시 월 설정
+     * start: 왼쪽 달력, end: 오른쪽 달력
+     * 값: 'now' | 'prevMonth' | 'nextMonth' | Date
+     */
+    initialCalendar?: InitialCalendar;
 }
 declare const DatePicker: React.FC<DatePickerProps>;
 export default DatePicker;

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

@@ -1 +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"}
+{"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,oBAAoB;AACpB,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,WAAW,GAAG,WAAW,GAAG,IAAI,CAAC;AAEvE,MAAM,WAAW,eAAe;IAC9B,oCAAoC;IACpC,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,qCAAqC;IACrC,GAAG,CAAC,EAAE,eAAe,CAAC;CACvB;AAED,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;IACxB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;CACnC;AAujBD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAklBzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/react/molecule/datepicker.js

@@ -3,6 +3,43 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useState, useRef, useEffect } from 'react';
 import styles from './datepicker.module.scss';
 // Helper functions
+/** CalendarInitial 값을 Date로 변환 */
+const resolveCalendarInitial = (initial, fallback) => {
+    if (!initial)
+        return fallback;
+    if (initial instanceof Date)
+        return initial;
+    const now = new Date();
+    switch (initial) {
+        case 'now':
+            return new Date(now.getFullYear(), now.getMonth(), 1);
+        case 'prevMonth':
+            return new Date(now.getFullYear(), now.getMonth() - 1, 1);
+        case 'nextMonth':
+            return new Date(now.getFullYear(), now.getMonth() + 1, 1);
+        default:
+            return fallback;
+    }
+};
+/**
+ * 커스텀 포맷으로 날짜/시간 포맷팅
+ * y: 년(4자리), m: 월(2자리), d: 일(2자리), h: 시(2자리), i: 분(2자리)
+ */
+const formatWithPattern = (date, time, pattern) => {
+    if (!date && !time)
+        return '';
+    let result = pattern;
+    if (date) {
+        result = result.replace(/y/g, String(date.getFullYear()));
+        result = result.replace(/m/g, String(date.getMonth() + 1).padStart(2, '0'));
+        result = result.replace(/d/g, String(date.getDate()).padStart(2, '0'));
+    }
+    if (time) {
+        result = result.replace(/h/g, String(time.hour).padStart(2, '0'));
+        result = result.replace(/i/g, String(time.minute).padStart(2, '0'));
+    }
+    return result;
+};
 const formatDate = (date) => {
     const year = date.getFullYear();
     const month = String(date.getMonth() + 1).padStart(2, '0');
@@ -265,12 +302,27 @@ const PeriodCalendar = ({ value, endValue, onSelect, viewDate, endViewDate, onVi
     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 DatePicker = ({ mode = 'instant', type = 'date', value, onChange, placeholder, disabled = false, showActions, align = 'left', className, disable, enable, minDate, maxDate, minuteStep = 1, format, initialCalendar, }) => {
     const [selectingPart, setSelectingPart] = useState(null);
     const [tempValue, setTempValue] = useState(value || {});
-    const [viewDate, setViewDate] = useState(value?.date || new Date());
+    // 초기 달력 표시 월 계산
+    const [viewDate, setViewDate] = useState(() => {
+        if (value?.date)
+            return value.date;
+        if (initialCalendar?.start) {
+            return resolveCalendarInitial(initialCalendar.start, new Date());
+        }
+        return new Date();
+    });
     const [endViewDate, setEndViewDate] = useState(() => {
-        const d = value?.endDate || new Date();
+        if (value?.endDate) {
+            return new Date(value.endDate.getFullYear(), value.endDate.getMonth() + 1, 1);
+        }
+        if (initialCalendar?.end) {
+            return resolveCalendarInitial(initialCalendar.end, new Date());
+        }
+        // 기본값: 현재 달의 다음 달
+        const d = new Date();
         return new Date(d.getFullYear(), d.getMonth() + 1, 1);
     });
     const containerRef = useRef(null);
@@ -294,6 +346,16 @@ const DatePicker = ({ mode = 'instant', type = 'date', value, onChange, placehol
     const formatPeriodText = () => {
         if (!tempValue.date)
             return '';
+        // format prop이 있으면 사용
+        if (format) {
+            const startText = formatWithPattern(tempValue.date, tempValue.time, format);
+            if (tempValue.endDate) {
+                const endText = formatWithPattern(tempValue.endDate, tempValue.endTime, format);
+                return `${startText} ~ ${endText}`;
+            }
+            return startText;
+        }
+        // 기본 포맷 (한국어)
         const formatKoreanDateTime = (date, time) => {
             const year = date.getFullYear();
             const month = date.getMonth() + 1;
@@ -422,15 +484,28 @@ const DatePicker = ({ mode = 'instant', type = 'date', value, onChange, placehol
     const displayValue = shouldShowActions ? tempValue : value;
     const hasStartValue = !!displayValue?.date;
     const hasEndValue = !!displayValue?.endDate;
+    // 날짜만 표시하는 포맷 (시간 제외)
+    const getDateOnlyFormat = () => {
+        if (!format)
+            return undefined;
+        // 시간 관련 부분 제거 (h, i 및 그 주변 문자들)
+        return format.replace(/\s*h[:\s]*i[분]?/g, '').replace(/\s*h시\s*i분/g, '').trim();
+    };
     // Helper to render date button
     const renderDateButton = (date, isActive, onClick, isPlaceholder) => {
+        const dateFormat = getDateOnlyFormat();
         if (isPlaceholder || !date) {
-            return (_jsx("button", { type: "button", className: `${styles.inputPart} ${isActive ? styles.active : ''} ${styles.placeholder}`, onClick: onClick, children: "YYYY - MM - DD" }));
+            // format이 있으면 placeholder도 포맷에 맞게 표시
+            const placeholderText = dateFormat
+                ? dateFormat.replace(/y/g, 'YYYY').replace(/m/g, 'MM').replace(/d/g, 'DD')
+                : 'YYYY - MM - DD';
+            return (_jsx("button", { type: "button", className: `${styles.inputPart} ${isActive ? styles.active : ''} ${styles.placeholder}`, onClick: onClick, children: placeholderText }));
         }
-        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] }));
+        // format prop이 있으면 사용 (날짜만)
+        const displayText = dateFormat
+            ? formatWithPattern(date, undefined, dateFormat)
+            : `${date.getFullYear()} - ${String(date.getMonth() + 1).padStart(2, '0')} - ${String(date.getDate()).padStart(2, '0')}`;
+        return (_jsx("button", { type: "button", className: `${styles.inputPart} ${isActive ? styles.active : ''}`, onClick: onClick, children: displayText }));
     };
     // Helper to render hour select
     const renderHourSelect = (time, part, isPlaceholder) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "podo-ui",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "type": "module",
   "author": "hada0127 <work@tarucy.net>",
   "license": "MIT",
@@ -16,6 +16,8 @@
   "types": "dist/index.d.ts",
   "files": [
     "dist",
+    "cdn",
+    "vanilla",
     "scss",
     "global.scss",
     "global.d.ts",
@@ -55,13 +57,25 @@
       "types": "./global.d.ts",
       "default": "./scss/*"
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./cdn/podo-ui.css": "./cdn/podo-ui.css",
+    "./cdn/podo-ui.min.css": "./cdn/podo-ui.min.css",
+    "./cdn/podo-datepicker.js": "./cdn/podo-datepicker.js",
+    "./cdn/podo-datepicker.min.js": "./cdn/podo-datepicker.min.js",
+    "./cdn/podo-datepicker.css": "./cdn/podo-datepicker.css",
+    "./cdn/podo-datepicker.min.css": "./cdn/podo-datepicker.min.css",
+    "./cdn/font/*": "./cdn/font/*",
+    "./vanilla/datepicker": "./vanilla/datepicker.js",
+    "./vanilla/datepicker.css": "./vanilla/datepicker.css"
   },
   "scripts": {
     "dev": "next dev -p 5432",
     "build": "next build",
     "build:lib": "node ./cli/build-lib.js",
-    "prepublishOnly": "npm run build:lib",
+    "build:cdn": "node ./cli/build-cdn.js",
+    "build:cdn-js": "node ./cli/build-cdn-js.js",
+    "build:all": "npm run build:lib && npm run build:cdn && npm run build:cdn-js",
+    "prepublishOnly": "npm run build:all",
     "start": "next start",
     "lint": "next lint",
     "icon": "node ./cli/icon-scss.js",

package/scss/icon/icon-name.scss

@@ -116,4 +116,21 @@ $icon-name: (
   lock: \e977,
   unlock: \e978,
   save: \e979,
+  database: \e980,
+  undo: \e981,
+  redo: \e982,
+  unlink-alt: \e983,
+  youtube-stroke: \e984,
+  horizontalLine: \e985,
+  gap: \e986,
+  clipboard: \e987,
+  inputForm: \e988,
+  copy: \e989,
+  text: \e990,
+  logout: \e991,
+  detailView: \e992,
+  company: \e993,
+  landing: \e994,
+  code: \e995,
+  footer: \e996,
 );