@ncds/ui-admin 1.6.4 → 1.8.0

package/dist/temp/assets/scripts/notification/const/icons.d.ts

@@ -0,0 +1,25 @@
+import type { NotificationColor } from './types';
+export declare const SVG_ICONS: {
+    readonly 'pin-02': (size: string) => string;
+    readonly 'alert-triangle': (size: string) => string;
+    readonly 'alert-circle': (size: string) => string;
+    readonly 'check-circle': (size: string) => string;
+    readonly 'info-circle': (size: string) => string;
+    readonly 'message-chat-square': (size: string) => string;
+    readonly 'x-close': (size: string) => string;
+};
+export declare const FLOATING_ICON_MAP: Partial<Record<NotificationColor, (size: string) => string>>;
+export declare const FULL_WIDTH_ICON_MAP: {
+    readonly neutral: (size: string) => string;
+    readonly error: (size: string) => string;
+    readonly warning: (size: string) => string;
+    readonly success: (size: string) => string;
+    readonly info: (size: string) => string;
+};
+export declare const ICON_MAP: {
+    readonly neutral: (size: string) => string;
+    readonly error: (size: string) => string;
+    readonly warning: (size: string) => string;
+    readonly success: (size: string) => string;
+    readonly info: (size: string) => string;
+};

package/dist/temp/assets/scripts/notification/const/icons.js

@@ -0,0 +1,25 @@
+// SVG 아이콘들 (크기는 동적으로 설정)
+export const SVG_ICONS = {
+    'pin-02': (size) => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.377 15.616 2.72 21.273m8.974-14.631-1.56 1.56a2 2 0 0 1-.264.242 1 1 0 0 1-.207.111c-.082.032-.17.05-.347.085l-3.665.733c-.952.19-1.428.286-1.65.537a1 1 0 0 0-.243.8c.046.333.39.677 1.076 1.363l7.086 7.086c.686.687 1.03 1.03 1.362 1.076a1 1 0 0 0 .801-.242c.251-.223.346-.7.537-1.651l.733-3.665c.035-.176.053-.265.085-.347a1 1 0 0 1 .11-.207c.051-.072.115-.136.242-.263l1.561-1.561c.082-.082.122-.122.167-.158q.06-.047.126-.085c.05-.029.103-.051.208-.097l2.495-1.069c.727-.312 1.091-.467 1.256-.72a1 1 0 0 0 .144-.747c-.06-.295-.34-.575-.9-1.135l-5.142-5.143c-.56-.56-.84-.84-1.135-.9a1 1 0 0 0-.748.145c-.252.165-.407.529-.72 1.256l-1.068 2.495a2 2 0 0 1-.097.208 1 1 0 0 1-.085.126 2 2 0 0 1-.158.167"></path></svg>`,
+    'alert-triangle': (size) => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v4m0 4h.01M10.615 3.892 2.39 18.098c-.456.788-.684 1.182-.65 1.506a1 1 0 0 0 .406.705c.263.191.718.191 1.629.191h16.45c.91 0 1.365 0 1.628-.191a1 1 0 0 0 .407-.705c.034-.324-.195-.718-.65-1.506L13.383 3.892c-.454-.785-.681-1.178-.978-1.31a1 1 0 0 0-.812 0c-.297.132-.524.525-.979 1.31"></path></svg>`,
+    'alert-circle': (size) => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10"></path></svg>`,
+    'check-circle': (size) => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7.5 12 3 3 6-6m5.5 3c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10"></path></svg>`,
+    'info-circle': (size) => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none" color="#5720B7" class="ncua-full-width-notification__icon"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 16v-4m0-4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10"></path></svg>`,
+    'message-chat-square': (size) => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none" color="#0C111D" class="ncua-full-width-notification__icon"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 15-3.075 3.114c-.43.434-.644.651-.828.666a.5.5 0 0 1-.421-.172c-.12-.14-.12-.446-.12-1.056v-1.56c0-.548-.449-.944-.99-1.024v0a3 3 0 0 1-2.534-2.533C2 12.219 2 11.96 2 11.445V6.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C4.28 2 5.12 2 6.8 2h7.4c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.311 1.311C19 4.28 19 5.12 19 6.8V11m0 11-2.176-1.513c-.306-.213-.46-.32-.626-.395a2 2 0 0 0-.462-.145c-.18-.033-.367-.033-.74-.033H13.2c-1.12 0-1.68 0-2.108-.218a2 2 0 0 1-.874-.874C10 18.394 10 17.834 10 16.714V14.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C11.52 11 12.08 11 13.2 11h5.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 12.52 22 13.08 22 14.2v2.714c0 .932 0 1.398-.152 1.766a2 2 0 0 1-1.083 1.082c-.367.152-.833.152-1.765.152z"></path></svg>`,
+    'x-close': (size) => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6 6 18M6 6l12 12"></path></svg>`,
+};
+export const FLOATING_ICON_MAP = {
+    neutral: SVG_ICONS['pin-02'],
+    error: SVG_ICONS['alert-triangle'],
+    warning: SVG_ICONS['alert-circle'],
+    success: SVG_ICONS['check-circle'],
+    // info는 floating에서는 지원하지 않음
+};
+export const FULL_WIDTH_ICON_MAP = {
+    neutral: SVG_ICONS['message-chat-square'],
+    error: SVG_ICONS['alert-triangle'],
+    warning: SVG_ICONS['alert-triangle'],
+    success: SVG_ICONS['check-circle'],
+    info: SVG_ICONS['info-circle'],
+};
+export const ICON_MAP = FULL_WIDTH_ICON_MAP;

package/dist/temp/assets/scripts/notification/const/index.d.ts

@@ -0,0 +1,5 @@
+export type { NotificationColor, NotificationHierarchy, NotificationAction, BaseNotificationOptions } from './types';
+export { SVG_ICONS, FLOATING_ICON_MAP, FULL_WIDTH_ICON_MAP, ICON_MAP } from './icons';
+export { CLASS_NAMES } from './classNames';
+export { FEATURED_ICON_SIZES, ICON_PIXEL_SIZES, CLOSE_BUTTON_SIZES, CLOSE_BUTTON_SVG_SIZES, FULL_WIDTH_SIZES, MESSAGE_SIZES, getSizes, } from './sizes';
+export { MESSAGE_CLOSE_ICON_COLORS } from './types';

package/dist/temp/assets/scripts/notification/const/index.js

@@ -0,0 +1,4 @@
+export { SVG_ICONS, FLOATING_ICON_MAP, FULL_WIDTH_ICON_MAP, ICON_MAP } from './icons';
+export { CLASS_NAMES } from './classNames';
+export { FEATURED_ICON_SIZES, ICON_PIXEL_SIZES, CLOSE_BUTTON_SIZES, CLOSE_BUTTON_SVG_SIZES, FULL_WIDTH_SIZES, MESSAGE_SIZES, getSizes, } from './sizes';
+export { MESSAGE_CLOSE_ICON_COLORS } from './types';

package/dist/temp/assets/scripts/notification/const/sizes.d.ts

@@ -0,0 +1,32 @@
+export declare const FEATURED_ICON_SIZES: {
+    readonly MOBILE: "md";
+    readonly DESKTOP: "sm";
+};
+export declare const ICON_PIXEL_SIZES: {
+    readonly MOBILE: "20";
+    readonly DESKTOP: "16";
+    readonly FULL_WIDTH: "16";
+};
+export declare const CLOSE_BUTTON_SIZES: {
+    readonly MOBILE: "sm";
+    readonly DESKTOP: "xs";
+};
+export declare const CLOSE_BUTTON_SVG_SIZES: {
+    readonly xs: 16;
+    readonly sm: 20;
+};
+export declare const FULL_WIDTH_SIZES: {
+    readonly ICON: "16";
+    readonly CLOSE_BUTTON: "20";
+};
+export declare const MESSAGE_SIZES: {
+    readonly FEATURED_ICON: "lg";
+    readonly ICON_PIXEL: "24";
+    readonly CLOSE_BUTTON: "20";
+};
+export declare const getSizes: {
+    readonly featuredIcon: (isMobile: boolean) => "sm" | "md";
+    readonly iconPixel: (isMobile: boolean) => "16" | "20";
+    readonly closeButton: (isMobile: boolean) => "xs" | "sm";
+    readonly closeButtonSvg: (size: keyof typeof CLOSE_BUTTON_SVG_SIZES) => 16 | 20;
+};

package/dist/temp/assets/scripts/notification/const/sizes.js

@@ -0,0 +1,40 @@
+// 알림 컴포넌트 사이즈 관련 상수들
+// FeaturedIcon 사이즈
+export const FEATURED_ICON_SIZES = {
+    MOBILE: 'md',
+    DESKTOP: 'sm',
+};
+// SVG 아이콘 픽셀 사이즈
+export const ICON_PIXEL_SIZES = {
+    MOBILE: '20',
+    DESKTOP: '16',
+    FULL_WIDTH: '16', // Full-width는 항상 고정
+};
+// 닫기 버튼 사이즈
+export const CLOSE_BUTTON_SIZES = {
+    MOBILE: 'sm',
+    DESKTOP: 'xs',
+};
+// 닫기 버튼 SVG 픽셀 사이즈
+export const CLOSE_BUTTON_SVG_SIZES = {
+    xs: 16,
+    sm: 20,
+};
+// Full-width 알림 고정 사이즈
+export const FULL_WIDTH_SIZES = {
+    ICON: '16',
+    CLOSE_BUTTON: '20',
+};
+// Message 알림 고정 사이즈
+export const MESSAGE_SIZES = {
+    FEATURED_ICON: 'lg',
+    ICON_PIXEL: '24',
+    CLOSE_BUTTON: '20',
+};
+// 사이즈 유틸리티 함수들
+export const getSizes = {
+    featuredIcon: (isMobile) => (isMobile ? FEATURED_ICON_SIZES.MOBILE : FEATURED_ICON_SIZES.DESKTOP),
+    iconPixel: (isMobile) => (isMobile ? ICON_PIXEL_SIZES.MOBILE : ICON_PIXEL_SIZES.DESKTOP),
+    closeButton: (isMobile) => (isMobile ? CLOSE_BUTTON_SIZES.MOBILE : CLOSE_BUTTON_SIZES.DESKTOP),
+    closeButtonSvg: (size) => CLOSE_BUTTON_SVG_SIZES[size],
+};

package/dist/temp/assets/scripts/notification/const/types.d.ts

@@ -0,0 +1,19 @@
+export type NotificationColor = 'neutral' | 'error' | 'warning' | 'success' | 'info';
+export type NotificationHierarchy = 'link' | 'link-gray';
+export interface NotificationAction {
+    label: string;
+    onClick: () => void;
+    hierarchy?: NotificationHierarchy;
+}
+export interface BaseNotificationOptions {
+    title: string;
+    supportingText?: string;
+    color?: NotificationColor;
+    onClose?: () => void;
+    className?: string;
+    actions?: NotificationAction[];
+    autoClose?: number;
+    supportTextLink?: string;
+    onHidePermanently?: () => void;
+}
+export declare const MESSAGE_CLOSE_ICON_COLORS: Record<NotificationColor, string>;

package/dist/temp/assets/scripts/notification/const/types.js

@@ -0,0 +1,8 @@
+// Message Notification 닫기 버튼 아이콘 색상 맵
+export const MESSAGE_CLOSE_ICON_COLORS = {
+    neutral: '#6B7280',
+    error: '#EF4444',
+    warning: '#F97316',
+    success: '#16A34A',
+    info: '#6B7280', // info는 message 타입에서 지원하지 않지만 fallback용
+};

package/dist/temp/assets/scripts/notification/index.d.ts

@@ -0,0 +1,7 @@
+export { Notification, type NotificationOptions } from './Notification';
+export { FullWidthNotification, type FullWidthNotificationOptions } from './FullWidthNotification';
+export { FloatingNotification, type FloatingNotificationOptions } from './FloatingNotification';
+export { MessageNotification, type MessageNotificationOptions } from './MessageNotification';
+export * from './utils';
+export type { NotificationColor, NotificationHierarchy, NotificationAction, BaseNotificationOptions } from './const';
+export { SVG_ICONS, CLASS_NAMES, ICON_MAP, FLOATING_ICON_MAP, FULL_WIDTH_ICON_MAP } from './const';

package/dist/temp/assets/scripts/notification/index.js

@@ -0,0 +1,11 @@
+export { Notification } from './Notification';
+export { FullWidthNotification } from './FullWidthNotification';
+export { FloatingNotification } from './FloatingNotification';
+export { MessageNotification } from './MessageNotification';
+export * from './utils';
+export { SVG_ICONS, CLASS_NAMES, ICON_MAP, FLOATING_ICON_MAP, FULL_WIDTH_ICON_MAP } from './const';
+// 전역 등록 ( 추후 index.ts와 개별동작 할 수 있게끔 대비 )
+if (typeof window !== 'undefined') {
+    window.ncua = window.ncua || {};
+    window.ncua.Notification = Notification;
+}

package/dist/temp/assets/scripts/notification/utils.d.ts

@@ -0,0 +1,8 @@
+import type { NotificationColor, NotificationAction } from './const';
+export declare function createWrapperElement(baseClass: string, color: NotificationColor, className?: string): HTMLElement;
+export declare function buildClassName(baseClass: string, color: NotificationColor, className?: string): string;
+export declare function renderSupportingText(supportingText?: string, className?: string, supportTextLink?: string): string;
+export declare function renderActions(actions: NotificationAction[], wrapperClass: string): string;
+export declare function bindNotificationEvents(element: HTMLElement, actions: NotificationAction[], onClose?: () => void, onRemove?: () => void): void;
+export declare function setupAutoClose(autoClose: number, onClose?: () => void, onRemove?: () => void): number | undefined;
+export declare const isMobile: () => boolean;

package/dist/temp/assets/scripts/notification/utils.js

@@ -0,0 +1,89 @@
+import { CLASS_NAMES } from './const';
+import { BREAKPOINT } from '../../../src/constant/breakpoint';
+// 공통 유틸리티 함수들
+export function createWrapperElement(baseClass, color, className) {
+    const wrapper = document.createElement('div');
+    wrapper.className = buildClassName(baseClass, color, className);
+    wrapper.setAttribute('role', 'alert');
+    return wrapper;
+}
+export function buildClassName(baseClass, color, className) {
+    const classes = [baseClass, `${baseClass}--${color}`];
+    if (className) {
+        classes.push(className);
+    }
+    return classes.join(' ');
+}
+export function renderSupportingText(supportingText, className, supportTextLink) {
+    if (!supportingText)
+        return '';
+    if (supportTextLink) {
+        return `<a href="${supportTextLink}" class="ncua-full-width-notification__link"><span class="${className}">${supportingText}</span></a>`;
+    }
+    return `<span class="${className}">${supportingText}</span>`;
+}
+export function renderActions(actions, wrapperClass) {
+    // 액션이 없으면 빈 문자열 반환
+    if (!actions || actions.length === 0) {
+        return '';
+    }
+    const buttonsHtml = actions
+        .map((action) => {
+        const buttonHtml = `
+      <button 
+        class="ncua-btn ncua-btn--sm ncua-btn--${action.hierarchy || 'text'}"
+        data-action="${action.label}-${action.hierarchy}"
+      >
+        ${action.label}
+      </button>`;
+        return buttonHtml;
+    })
+        .join('');
+    return `<div class="${wrapperClass}">${buttonsHtml}</div>`;
+}
+// 공통 이벤트 처리
+export function bindNotificationEvents(element, actions, onClose, onRemove) {
+    element.addEventListener('click', (event) => {
+        const target = event.target;
+        // 닫기 버튼 클릭 처리
+        if (target.matches(`.${CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON}, .${CLASS_NAMES.FLOATING.CLOSE_BUTTON}`) ||
+            target.closest(`.${CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON}, .${CLASS_NAMES.FLOATING.CLOSE_BUTTON}`) ||
+            target.closest(`.${CLASS_NAMES.MESSAGE.CLOSE_BUTTON}`)) {
+            onClose?.();
+            onRemove?.();
+            return;
+        }
+        // 액션 버튼 클릭 처리
+        const actionButton = target.closest('.ncua-btn[data-action]');
+        if (actionButton && actions) {
+            const actionData = actionButton.getAttribute('data-action');
+            if (actionData) {
+                let matchedAction = null;
+                for (const action of actions) {
+                    const expectedDataAction = `${action.label}-${action.hierarchy || 'link'}`;
+                    if (actionData === expectedDataAction) {
+                        matchedAction = action;
+                        break;
+                    }
+                }
+                if (matchedAction?.onClick) {
+                    matchedAction.onClick();
+                }
+            }
+        }
+    });
+}
+// 자동 닫기 설정
+export function setupAutoClose(autoClose, onClose, onRemove) {
+    if (autoClose > 0) {
+        return window.setTimeout(() => {
+            onClose?.();
+            onRemove?.();
+        }, autoClose);
+    }
+    return undefined;
+}
+// Mobile detection utility
+export const isMobile = () => {
+    return window.innerWidth <= parseInt(BREAKPOINT.mobile);
+};

package/dist/temp/assets/scripts/progress-bar/ProgressBar.d.ts

@@ -0,0 +1,67 @@
+/**
+ * ProgressBar 클래스
+ * 프로그레스 바를 생성하고 관리하는 역할을 합니다.
+ */
+export type ProgressLabel = 'right' | 'bottom' | 'top-float' | 'bottom-float';
+export interface ProgressSegment {
+    value: number;
+    color?: string;
+}
+export interface ProcessedSegment extends ProgressSegment {
+    width: number;
+}
+export interface ProgressBarOptions {
+    label?: ProgressLabel;
+    value?: number;
+    segments?: ProgressSegment[];
+    showZeroLabel?: boolean;
+    valueToPercent?: boolean;
+}
+/**
+ * ProgressBar 클래스
+ */
+export declare class ProgressBar {
+    private options;
+    private element;
+    constructor(options?: ProgressBarOptions);
+    /**
+     * segments 처리 로직
+     */
+    private processSegments;
+    /**
+     * 단일 라벨 HTML 생성
+     */
+    private renderSingleLabel;
+    /**
+     * segments 라벨 HTML 생성
+     */
+    private renderSegmentLabels;
+    /**
+     * segment bar HTML 생성
+     */
+    private renderSegmentBar;
+    /**
+     * HTML 문자열 생성
+     */
+    toHTML(): string;
+    /**
+     * DOM 요소 생성
+     */
+    toElement(): HTMLElement;
+    /**
+     * 요소 반환
+     */
+    getElement(): HTMLElement | null;
+    /**
+     * 옵션 업데이트
+     */
+    updateOptions(newOptions: Partial<ProgressBarOptions>): void;
+    /**
+     * Static factory method
+     */
+    static create(options?: ProgressBarOptions): ProgressBar;
+    /**
+     * Static method: HTML 문자열 생성
+     */
+    static toHTML(options: ProgressBarOptions): string;
+}

package/dist/temp/assets/scripts/progress-bar/ProgressBar.js

@@ -0,0 +1,263 @@
+/**
+ * ProgressBar 클래스
+ * 프로그레스 바를 생성하고 관리하는 역할을 합니다.
+ */
+/**
+ * 값을 0-100 범위로 제한
+ */
+function clampValue(value) {
+    return Math.min(Math.max(0, value), 100);
+}
+/**
+ * 색상 이름을 fill 색상 클래스명으로 변환
+ */
+function getFillColorClass(color) {
+    if (!color)
+        return '';
+    const normalizedColor = color.toLowerCase().trim();
+    return `ncua-progress-bar__fill--color-${normalizedColor}`;
+}
+/**
+ * 색상 이름을 label 색상 클래스명으로 변환
+ */
+function getLabelColorClass(color) {
+    if (!color)
+        return '';
+    const normalizedColor = color.toLowerCase().trim();
+    return `ncua-progress-bar__label--color-${normalizedColor}`;
+}
+/**
+ * ProgressBar 클래스
+ */
+export class ProgressBar {
+    constructor(options = {}) {
+        this.element = null;
+        this.options = {
+            showZeroLabel: false,
+            valueToPercent: true,
+            ...options,
+        };
+    }
+    /**
+     * segments 처리 로직
+     */
+    processSegments() {
+        const { segments, label, valueToPercent } = this.options;
+        const hasSegments = Boolean(segments && segments.length > 0);
+        const segmentCount = segments?.length ?? 0;
+        if (hasSegments) {
+            // segment가 2개 이상일 때만 valueToPercent 적용 (기본값: true)
+            const shouldApplyValueToPercent = segmentCount >= 2 && valueToPercent !== false;
+            let segmentsToProcess = segments;
+            // valueToPercent 적용: segments의 합계를 100%로 규정하고 비율로 계산
+            if (shouldApplyValueToPercent) {
+                // 원본 값들의 합계 계산
+                const originalTotal = segmentsToProcess.reduce((sum, seg) => sum + seg.value, 0);
+                if (originalTotal > 0) {
+                    // 각 segment를 합계 대비 비율로 변환 (합계를 100%로 규정)
+                    segmentsToProcess = segmentsToProcess.map((segment) => ({
+                        value: (segment.value / originalTotal) * 100,
+                        color: segment.color,
+                    }));
+                }
+            }
+            // 각 값 제한 (0-100 범위)
+            const limitedSegments = segmentsToProcess.map((segment) => ({
+                value: clampValue(segment.value),
+                color: segment.color,
+            }));
+            // 전체 합계 계산
+            const actualTotal = limitedSegments.reduce((sum, seg) => sum + seg.value, 0);
+            const total = Math.min(actualTotal, 100);
+            // 모든 segments를 좌측에서부터 연속적으로 배치 (비율로 계산)
+            const processed = limitedSegments.map((segment) => ({
+                ...segment,
+                width: actualTotal > 0 ? (segment.value / actualTotal) * total : 0,
+            }));
+            // segment의 개수가 2이상일때는 bottom 라벨로 고정
+            const effectiveLabel = segmentCount >= 2 ? 'bottom' : label;
+            // floating label 스타일
+            const progressValueStyle = effectiveLabel === 'top-float' || effectiveLabel === 'bottom-float'
+                ? { '--progress-value': `${total}%` }
+                : undefined;
+            return {
+                totalValue: total,
+                displayValue: `${total.toFixed(0)}%`,
+                processedSegments: processed,
+                effectiveLabel,
+                progressValueStyle,
+            };
+        }
+        // value만 있을 때는 valueToPercent 무시 (이미 퍼센트로 간주)
+        if (this.options.value !== undefined) {
+            const clamped = clampValue(this.options.value);
+            const effectiveLabel = label;
+            const progressValueStyle = effectiveLabel === 'top-float' || effectiveLabel === 'bottom-float'
+                ? { '--progress-value': `${clamped}%` }
+                : undefined;
+            return {
+                totalValue: clamped,
+                displayValue: `${clamped.toFixed(0)}%`,
+                processedSegments: [],
+                effectiveLabel,
+                progressValueStyle,
+            };
+        }
+        return {
+            totalValue: 0,
+            displayValue: '0%',
+            processedSegments: [],
+            effectiveLabel: label,
+            progressValueStyle: undefined,
+        };
+    }
+    /**
+     * 단일 라벨 HTML 생성
+     */
+    renderSingleLabel(labelType, displayValue, totalValue) {
+        // 0%이고 showZeroLabel이 false면 라벨 표시하지 않음
+        if (totalValue === 0 && !this.options.showZeroLabel) {
+            return '';
+        }
+        return `<span class="ncua-progress-bar__label ncua-progress-bar__label-${labelType}">${displayValue}</span>`;
+    }
+    /**
+     * segments 라벨 HTML 생성
+     */
+    renderSegmentLabels(segments, segmentCount) {
+        if (segmentCount < 2)
+            return '';
+        const labels = [];
+        segments.forEach((segment, index) => {
+            // 0%이고 showZeroLabel이 false면 라벨 표시하지 않음
+            if (segment.value === 0 && !this.options.showZeroLabel) {
+                return;
+            }
+            let leftPosition = 0;
+            for (let i = 0; i < index; i++) {
+                leftPosition += segments[i].width;
+            }
+            // 0%일 때는 segment 시작 위치에 맞추되, 라벨이 게이지 바를 넘어가지 않도록 조정
+            // 그 외에는 중앙에 정렬
+            const isZero = segment.value === 0;
+            // 0%일 때는 약간의 오프셋을 주어 자연스럽게 보이도록 함 (라벨 너비의 절반 정도)
+            const labelPosition = isZero ? Math.max(0, leftPosition - 1) : leftPosition + segment.width / 2;
+            const transform = isZero ? 'translateX(0)' : 'translateX(-50%)';
+            const colorClass = getLabelColorClass(segment.color);
+            labels.push(`<span class="ncua-progress-bar__label ncua-progress-bar__label--segment ${colorClass}" style="left: ${labelPosition}%; transform: ${transform};">${segment.value.toFixed(0)}%</span>`);
+        });
+        return labels.length > 0 ? `<div class="ncua-progress-bar__labels--multiple">${labels.join('')}</div>` : '';
+    }
+    /**
+     * segment bar HTML 생성
+     */
+    renderSegmentBar(segments) {
+        const fills = [];
+        segments.forEach((segment, index) => {
+            const classes = [
+                'ncua-progress-bar__fill',
+                index === 0 ? 'ncua-progress-bar__fill--first' : '',
+                index === segments.length - 1 ? 'ncua-progress-bar__fill--last' : '',
+                getFillColorClass(segment.color),
+            ]
+                .filter(Boolean)
+                .join(' ');
+            fills.push(`<div class="${classes}" style="width: ${segment.width}%;"></div>`);
+        });
+        return fills.join('');
+    }
+    /**
+     * HTML 문자열 생성
+     */
+    toHTML() {
+        const { totalValue, displayValue, processedSegments, effectiveLabel, progressValueStyle } = this.processSegments();
+        const hasSegments = Boolean(this.options.segments && this.options.segments.length > 0);
+        const segmentCount = this.options.segments?.length ?? 0;
+        const isFloatingLabel = effectiveLabel === 'top-float' || effectiveLabel === 'bottom-float';
+        // 스타일 문자열 생성
+        const styleString = progressValueStyle
+            ? `style="${Object.entries(progressValueStyle)
+                .map(([key, value]) => `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${value}`)
+                .join('; ')}"`
+            : '';
+        // segment가 1개이거나 value만 있을 때는 동일하게 처리 (단일 progress bar)
+        const isSingleBar = segmentCount < 2; // segment가 0개 또는 1개일 때
+        if (isSingleBar) {
+            const fillColorClass = hasSegments && segmentCount === 1 ? getFillColorClass(processedSegments[0].color) : '';
+            const floatingLabel = isFloatingLabel ? this.renderSingleLabel(effectiveLabel, displayValue, totalValue) : '';
+            const rightLabel = effectiveLabel === 'right' ? this.renderSingleLabel('right', displayValue, totalValue) : '';
+            const bottomLabel = effectiveLabel === 'bottom' ? this.renderSingleLabel('bottom', displayValue, totalValue) : '';
+            // 단일 progress bar일 때는 text-align: left를 위한 클래스 추가
+            const singleSegmentClass = 'ncua-progress-bar--single-segment';
+            return `<div class="ncua-progress-bar ncua-progress-bar-${effectiveLabel || ''} ${singleSegmentClass}" ${styleString}>
+  ${floatingLabel}
+  <div class="ncua-progress-bar__content">
+    <div class="ncua-progress-bar__bar">
+      <div class="ncua-progress-bar__fill ${fillColorClass}" style="width: ${totalValue}%;" aria-valuenow="${totalValue}" aria-valuemin="0" aria-valuemax="100"></div>
+    </div>
+    ${rightLabel}
+  </div>
+  ${bottomLabel}
+</div>`;
+        }
+        // 일반 케이스
+        const floatingLabel = isFloatingLabel ? this.renderSingleLabel(effectiveLabel, displayValue, totalValue) : '';
+        const rightLabel = effectiveLabel === 'right' ? this.renderSingleLabel('right', displayValue, totalValue) : '';
+        const bottomLabel = effectiveLabel === 'bottom' ? this.renderSingleLabel('bottom', displayValue, totalValue) : '';
+        const segmentLabels = hasSegments && segmentCount >= 2 ? this.renderSegmentLabels(processedSegments, segmentCount) : '';
+        const segmentBar = hasSegments
+            ? this.renderSegmentBar(processedSegments)
+            : `<div class="ncua-progress-bar__fill" style="width: ${totalValue}%;" aria-valuenow="${totalValue}" aria-valuemin="0" aria-valuemax="100"></div>`;
+        const segmentsClass = hasSegments ? 'ncua-progress-bar__bar--segments' : '';
+        return `<div class="ncua-progress-bar ncua-progress-bar-${effectiveLabel || ''}" ${styleString}>
+  ${floatingLabel}
+  <div class="ncua-progress-bar__content">
+    <div class="ncua-progress-bar__bar ${segmentsClass}">
+      ${segmentBar}
+    </div>
+    ${rightLabel}
+  </div>
+  ${hasSegments && segmentCount >= 2 ? segmentLabels : bottomLabel}
+</div>`;
+    }
+    /**
+     * DOM 요소 생성
+     */
+    toElement() {
+        const div = document.createElement('div');
+        div.innerHTML = this.toHTML();
+        this.element = div.firstElementChild;
+        return this.element;
+    }
+    /**
+     * 요소 반환
+     */
+    getElement() {
+        return this.toElement();
+    }
+    /**
+     * 옵션 업데이트
+     */
+    updateOptions(newOptions) {
+        this.options = { ...this.options, ...newOptions };
+        if (this.element) {
+            const newElement = this.toElement();
+            if (this.element.parentNode) {
+                this.element.parentNode.replaceChild(newElement, this.element);
+            }
+            this.element = newElement;
+        }
+    }
+    /**
+     * Static factory method
+     */
+    static create(options) {
+        return new ProgressBar(options);
+    }
+    /**
+     * Static method: HTML 문자열 생성
+     */
+    static toHTML(options) {
+        return new ProgressBar(options).toHTML();
+    }
+}

package/dist/temp/assets/scripts/progress-bar/index.d.ts

@@ -0,0 +1 @@
+export { ProgressBar, type ProgressBarOptions, type ProgressLabel, type ProgressSegment } from './ProgressBar';

package/dist/temp/assets/scripts/progress-bar/index.js

@@ -0,0 +1 @@
+export { ProgressBar } from './ProgressBar';