@croquiscom/pds 0.43.0 → 0.44.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @croquiscom/pds
 
+## 0.44.0
+
+### Minor Changes
+
+- 89d8071: BasicModal CustomFooter FullScreen 모드 fixed 지원 추가
+
+  ## BreakPoint
+
+  BasicModal props가 다음과 같이 변경되었습니다.
+
+  - fixedHeader, fixedFooter props가 제거되었습니다.
+  - fullScreen 속성이 true일 경우 Modal header, footer 영역이 자동 fixed 처리됩니다.
+  - footer 속성을 통해 커스텀할 경우에도 footer node 영역이 자동 fixed 처리됩니다.
+  - contentProps 속성에 maxHeight이 추가되었습니다.
+    - 콘텐츠 영역 maxHeight을 커스텀할 수 있습니다.
+
 ## 0.43.0
 
 ### Minor Changes

package/README.md

@@ -2,7 +2,7 @@
 
 # PDS
 
-- 🎨 [Storybook](https://main--63219cdd878b411aa90ad43c.chromatic.com/)
+- 🎨 [Storybook](https://storybook.kakaostyle.in/master/pds/?path=/story/intro--page)
 
 PDS(파트너 디자인 시스템)은 [카카오스타일 파트너센터](https://shop.zigzag.kr/) 디자인 시스템을 위한 리액트 기반의 라이브러리입니다.
 

package/dist/components/badge/Badge.d.ts

@@ -9,7 +9,11 @@ export interface BadgeProps {
     size?: BadgeSize;
     /** @default black */
     color?: BadgeColor;
-    /** 라벨 우측 영역에 렌더링 될 아이콘 요소 */
+    /**
+     * 라벨 우측 영역에 렌더링 될 아이콘 요소
+     *  - Icon 컴포넌트 color props가 있더라도 BadgeColor에 따라 currentColor가 지정됩니다.
+     *  - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 8로 고정됩니다.
+     */
     icon?: ReactElement<IconProps>;
 }
 export declare const Badge: ({ className, kind, size, color, icon, children, }: PropsWithChildren<BadgeProps>) => JSX.Element;

package/dist/components/banner/NormalBanner.d.ts

@@ -7,6 +7,11 @@ export interface NormalBannerProps {
      * @default info
      */
     kind?: NormalBannerKind;
+    /**
+     * 타이블 좌측에 렌더링 될 아이콘 요소
+     *  - Icon 컴포넌트 color props가 있더라도 kind 따라 currentColor가 지정됩니다.
+     *  - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 16으로 고정됩니다.
+     */
     iconComponent?: React.ComponentType<IconProps>;
     title: string;
     message?: ReactNode;

package/dist/components/bottom-sheet/BottomSheet.d.ts

@@ -5,17 +5,21 @@ type BottomSheetContentWithCloseAction = (action: {
 export interface BottomSheetProps {
     className?: string;
     opened?: boolean;
-    /** @default 1020 */
+    /**
+     * 기본값으로 [ZIndexOrder](https://github.com/croquiscom/pds/blob/main/src/styles/zIndex.ts) 규칙을 적용합니다.
+     * @default 1020
+     */
     zIndex?: number;
     title?: ReactNode;
     subTitle?: ReactNode;
     content?: ReactNode | BottomSheetContentWithCloseAction;
     /**
+     * 오버레이 클릭 닫힘 사용 여부
      * @default true
      */
     canClickOutside?: boolean;
     /**
-     * @desc bottom sheet 드래그 닫힘 지원 여부
+     * 드래그 닫힘 사용 여부
      * @default true
      */
     canDragClose?: boolean;

package/dist/components/bottom-sheet/BottomSheet.stories.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
-import { ComponentMeta } from '@storybook/react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { BottomSheet } from './BottomSheet';
 declare const _default: ComponentMeta<({ className, zIndex, opened: openProp, canClickOutside, canDragClose, title, subTitle, content, onClose, }: import("./BottomSheet").BottomSheetProps) => JSX.Element>;
 export default _default;
 export declare const Base: any;
-export declare const MaxHeight: () => JSX.Element;
+export declare const MaxHeight: ComponentStory<typeof BottomSheet>;
 export declare const DisabledCloseDimClick: any;
 export declare const DisabledCloseDrag: any;
-export declare const ContentWithCloseAction: () => JSX.Element;
+export declare const ContentWithCloseAction: ComponentStory<typeof BottomSheet>;

package/dist/components/button/Button.d.ts

@@ -2,6 +2,9 @@ import React, { ButtonHTMLAttributes, ReactElement } from 'react';
 import { ButtonSize, ButtonKind } from './types';
 import { IconProps } from '../icons/generated';
 export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    /**
+     * 너비 100% 사용 여부
+     */
     fill?: boolean;
     /** @default secondary */
     kind?: ButtonKind;
@@ -11,9 +14,17 @@ export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement
     type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
     /** @default false */
     loading?: boolean;
-    /** @desc 좌측 영역에 렌더링 될 아이콘 요소 */
+    /**
+     * 버튼 좌측 영역에 렌더링 될 아이콘 요소
+     *  - Icon 컴포넌트 color props가 있더라도 kind 따라 currentColor가 지정됩니다.
+     *  - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 ButtonSize에 따라 고정됩니다.
+     */
     startIcon?: ReactElement<IconProps>;
-    /** @desc 우측 영역에 렌더링 될 아이콘 요소 */
+    /**
+     * 버튼 우측 영역에 렌더링 될 아이콘 요소
+     *  - Icon 컴포넌트 color props가 있더라도 kind 따라 currentColor가 지정됩니다.
+     *  - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 ButtonSize에 따라 고정됩니다.
+     */
     endIcon?: ReactElement<IconProps>;
 }
 export interface ButtonIconProps {

package/dist/components/button/Button.stories.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { Button } from './Button';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
 declare const _default: ComponentMeta<React.ForwardRefExoticComponent<import("./Button").ButtonProps & React.RefAttributes<HTMLButtonElement>>>;
 export default _default;
 export declare const Primary: any;
@@ -10,4 +11,4 @@ export declare const StartIcon: any;
 export declare const EndIcon: any;
 export declare const Loading: any;
 export declare const FullWidth: any;
-export declare const Focus: () => JSX.Element;
+export declare const Focus: ComponentStory<typeof Button>;

package/dist/components/button/IconButton.d.ts

@@ -4,12 +4,14 @@ import { ButtonProps } from './Button';
 import { IconProps } from '../icons/generated';
 export interface IconButtonProps extends Omit<ButtonProps, 'size' | 'loading' | 'startIcon' | 'endIcon' | 'kind'> {
     /**
-     * @desc shape 'circle'의 경우 적용되지 않습니다.
+     * shape 속성이 'circle'의 경우 적용되지 않습니다.
      * @default outlined_secondary
      */
     kind?: IconButtonKind;
     /**
-     * @desc 렌더링 될 아이콘 요소
+     * 렌더링 될 아이콘 요소
+     *  - Icon 컴포넌트 color props가 없다면 currentColor가 지정됩니다.
+     *  - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 16으로 고정됩니다.
      */
     icon?: ReactElement<IconProps>;
     /** @default rectangle */

package/dist/components/button/TextButton.d.ts

@@ -9,7 +9,7 @@ export interface TextButtonProps extends Omit<ButtonProps, 'loading' | 'kind'> {
     /** @default medium */
     size?: TextButtonSize;
     /**
-     * @desc kind값이 link일 경우 적용되지 않습니다.
+     * kind값이 link일 경우 고정 컬러(semantic_colors.content.primary)로 지정됩니다.
      * @default semantic_colors.content.primary
      */
     color?: string;

package/dist/components/date-picker/DatePicker.d.ts

@@ -6,15 +6,34 @@ export declare const DATE_FORMAT = "yyyy.MM.dd";
 export declare const DATE_HOUR_MINUTE_FORMAT = "yyyy.MM.dd HH:mm";
 export declare const DATE_HOUR_MINUTE_SECOND_FORMAT = "yyyy.MM.dd HH:mm:ss";
 export interface DatePickerBaseProps {
+    /**
+     * Input 너비를 지정할 수 있습니다.
+     * @default 100%
+     */
     width?: CSSValueWithLength;
     error?: boolean;
     disabled?: boolean;
     className?: string;
+    /**
+     * Input 우측 입력한 value를 지울 수 있는 remove 버튼 사용 유무
+     *   - 입력된 value가 없다면 기본 달력 아이콘이 노출됩니다.
+     *   - 입력된 value가 있다면 마우스 호버시 remove 버튼이 노출됩니다.
+     * @default false
+     */
     showRemoveButton?: boolean;
     opened?: boolean;
     onOpen?: () => void;
     onClose?: () => void;
+    /**
+     * Overlay 영역 클릭시 닫힘 사용 여부
+     * @default true
+     */
     canClickOutside?: boolean;
+    /**
+     * 기본값으로 [ZIndexOrder](https://github.com/croquiscom/pds/blob/main/src/styles/zIndex.ts) 규칙을 적용합니다.
+     * @default 1035
+     */
+    zIndex?: number;
 }
 export interface DatePickerProps extends DatePickerBaseProps {
     /**
@@ -22,22 +41,33 @@ export interface DatePickerProps extends DatePickerBaseProps {
      */
     placeholder?: string;
     value?: Date;
+    /**
+     * 선택 불가능한 날짜를 지정할 수 있습니다.
+     *  [Matcher](https://github.com/gpbl/react-day-picker/blob/master/packages/react-day-picker/src/types/Matchers.ts#L52)
+     */
     disabledDays?: Matcher | Matcher[];
     /**
+     * 달력 하단 '오늘' 날짜를 바로 선택할 수 있는 버튼 사용 유무
      * @default false
      */
     showTodayButton?: boolean;
+    /**
+     * 타임 노출이 필요한 경우 포멧을 지정할 수 있습니다.
+     *  - 'hourMinute'일 경우 yyyy.MM.dd HH:mm
+     *  - 'hourMinuteSecond' 일 경우 yyyy.MM.dd HH:mm:ss
+     *  - showTimePicker 속성이 true일 경우 displayTimeFormat은 hourMinute으로 적용됩니다.
+     */
     displayTimeFormat?: displayTimeFormat;
     /**
+     * 달력 하단 TimePicker를 노출합니다. onChange value에 시간 정보를 포함하여 전달합니다.
      * @default false
-     * @desc 달력 하단 TimePicker를 노출합니다. onChange value에 시간 정보를 포함하여 전달합니다.
      */
     showTimePicker?: boolean;
     /**
+     * TimePicker 사용시 Footer 영역(취소/확인)은 고정 노출됩니다.
      * @default false
-     * @desc TimePicker 사용시 Footer 영역은 고정 노출됩니다.
      */
     showFooter?: boolean;
     onChange?: (value: Date | null) => void;
 }
-export declare const DatePicker: ({ width, error, disabled, className, placeholder, displayTimeFormat, value, disabledDays, canClickOutside, showRemoveButton, showTodayButton, showTimePicker, showFooter, onChange, opened: openProp, onOpen, onClose, }: DatePickerProps) => JSX.Element;
+export declare const DatePicker: ({ width, error, disabled, className, placeholder, displayTimeFormat, value, disabledDays, canClickOutside, showRemoveButton, showTodayButton, showTimePicker, showFooter, zIndex, onChange, opened: openProp, onOpen, onClose, }: DatePickerProps) => JSX.Element;

package/dist/components/date-picker/DatePicker.stories.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<({ width, error, disabled, className, placeholder, displayTimeFormat, value, disabledDays, canClickOutside, showRemoveButton, showTodayButton, showTimePicker, showFooter, onChange, opened: openProp, onOpen, onClose, }: import("./DatePicker").DatePickerProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ width, error, disabled, className, placeholder, displayTimeFormat, value, disabledDays, canClickOutside, showRemoveButton, showTodayButton, showTimePicker, showFooter, zIndex, onChange, opened: openProp, onOpen, onClose, }: import("./DatePicker").DatePickerProps) => JSX.Element>;
 export default _default;
 export declare const Base: any;
 export declare const Disabled: any;
@@ -9,7 +9,6 @@ export declare const ShowRemoveButton: any;
 export declare const ShowFooter: any;
 export declare const ShowTodayButton: any;
 export declare const ShowTimePicker: any;
-export declare const Opened: any;
 export declare const ShowTimeHourMinute: any;
 export declare const ShowTimeHourMinuteSecond: any;
 export declare const DisableDays: any;

package/dist/components/date-picker/DateRangePicker.d.ts

@@ -9,15 +9,29 @@ export type DatePresetItem = {
 export type DatePreset = DatePresetItem[];
 export type Dates = DateRange;
 export interface DateRangePickerProps extends DatePickerBaseProps {
+    /**
+     * 좌측 DatePreset 사용 유무
+     * @default false
+     */
     showDatePreset?: boolean;
+    /**
+     * [Dates Type](https://github.com/gpbl/react-day-picker/blob/master/packages/react-day-picker/src/types/Matchers.ts#L73)
+     */
     dates?: Dates;
     minDate?: Date;
     maxDate?: Date;
+    /**
+     * MaxRange 범위를 지정할 수 있습니다.
+     *  - [keyof Duration](https://github.com/date-fns/date-fns/blob/main/src/types.ts#L19)
+     */
     maxRange?: [number, keyof Duration];
+    /**
+     * DatePreset 타입에 맞는 사용자 지정 preset을 사용할 수 있습니다.
+     */
     customDatePreset?: DatePreset;
     /**
+     * 지정해서 보여지는 개월의 개수를 임의로 조정할 수 있습니다.
      * @default 2
-     * @desc 지정해서 보여지는 개월의 개수를 임의로 조정할 수 있습니다.
      */
     numberOfMonths?: number;
     onChange?: (start: Dates['from'], end: Dates['to']) => void;

package/dist/components/date-picker/DateRangePicker.stories.d.ts

@@ -5,7 +5,6 @@ export default _default;
 export declare const Base: any;
 export declare const Disabled: any;
 export declare const Error: any;
-export declare const Opened: any;
 export declare const ShowRemoveButton: any;
 export declare const NumberOfMonths: any;
 export declare const MinDate: any;

package/dist/components/divider/Divider.d.ts

@@ -5,12 +5,19 @@ export type DividerSize = 'small' | 'medium';
 export interface DividerProps {
     /** @default 'horizontal' */
     direction?: direction;
+    /**
+     * 간격을 설정할 수 있습니다.
+     *  - direction horizontal 일경우 상하 간격에 적용됩니다.
+     *  - direction vertical 일경우 좌우 간격에 적용됩니다.
+     */
     spacing?: CSSValueWithLength;
     /** @default 'small' */
     size?: DividerSize;
     /**
+     * 지정된 길이를 설정할 수 있습니다.
+     *  - 지정하지 않을 경우 direction horizontal 이라면 width 값이 100%로 고정됩니다.
+     *  - 지정하지 않을 경우 direction vertical 이라면 height값이 100%로 고정됩니다.
      * @default '100%'
-     * @desc 지정되지 않을 경우 horizontal 일경우 width 값이, vertical 일경우 height값이 100%로 고정됩니다.
      */
     length?: CSSValueWithLength;
 }

package/dist/components/dropdown/Dropdown.d.ts

@@ -7,20 +7,28 @@ export interface DropdownOption<OptionValue> {
 }
 export interface DropdownProps<OptionValue> {
     className?: string;
+    /**
+     * Input 너비를 지정할 수 있습니다.
+     */
     width?: CSSValueWithLength;
     /**
-     * @desc Dropdown maxHeight값
+     * Dropdown OptionList maxHeight값
      * @default 400
      */
     maxHeight?: number;
-    /** @default 1030 */
+    /**
+     * 기본값으로 [ZIndexOrder](https://github.com/croquiscom/pds/blob/main/src/styles/zIndex.ts) 규칙을 적용합니다.
+     * @default 1030
+     */
     zIndex?: number;
     disabled?: boolean;
     options: Array<DropdownOption<OptionValue>>;
     placeholder?: string;
     value?: OptionValue;
     /**
-     * @desc floating 요소가 reference 영역을 넘어갈 경우 자동 위치 처리 사용 유무
+     * floating 요소가 reference 영역을 넘어갈 경우 자동 위치 처리 사용 유무
+     *  - 자동 위치 상/하만 적용됩니다.
+     * @default true
      */
     autoPlacement?: boolean;
     keyExtractor?: (item: DropdownOption<OptionValue>, index: number) => string | number;

package/dist/components/dropdown/DropdownInput.d.ts

@@ -6,6 +6,9 @@ export interface DropdownInputOption<OptionValue> {
     disabled?: boolean;
 }
 export interface DropdownInputProps<OptionValue> extends Omit<DropdownProps<OptionValue>, 'options' | 'keyExtractor' | 'onChange'> {
+    /**
+     * 입력된 검색결과를 전달합니다.
+     */
     onSearch?: (inputValue: string) => void;
     onChange?: (value: OptionValue | undefined) => void;
     options: Array<DropdownInputOption<OptionValue>>;

package/dist/components/file-upload/FileUpload.d.ts

@@ -14,21 +14,40 @@ export interface UploadFile {
 export interface FileUploadProps {
     className?: string;
     label?: ReactNode;
+    /**
+     * HTMLInputElement['accept']
+     */
     accept?: HTMLInputElement['accept'];
     disabled?: boolean;
+    /**
+     * HTMLInputElement['multiple']
+     */
     multiple?: boolean;
+    /**
+     * 최대 업로드 파일 갯수
+     */
     maxCount?: number;
     /**
+     * FileList내 삭제버튼 사용 유무
      * @default true
      */
     showRemoveButton?: boolean;
     /**
-     * @desc FileUploadButton과 함께 업로드된 FileList를 노출하려면 지정된 UploadFile 타입으로 전달해야합니다.
+     * FileList를 노출하려면 지정된 UploadFile 타입으로 전달해야합니다.
      */
     fileList?: UploadFile[];
     onChange?: (file: File | FileList) => void;
+    /**
+     * FileList 클릭시 인덱스 정보와 함께 전달합니다.
+     */
     onClickFile?: (file: UploadFile, index: number) => void;
+    /**
+     * 업로드 시도시 maxCount를 넘길 경우 전달합니다.
+     */
     onLimitMaxCount?: () => void;
+    /**
+     * 삭제 버튼 클릭시 인덱스 정보와 함께  전달합니다.
+     */
     onClickFileRemove?: (file: UploadFile, index: number) => void;
 }
 export declare const FileUpload: ({ className, accept, label, disabled, multiple, maxCount, showRemoveButton, fileList, onChange, onClickFile, onLimitMaxCount, onClickFileRemove, }: FileUploadProps) => JSX.Element;

package/dist/components/form/FormField.d.ts

@@ -4,9 +4,21 @@ import { CSSValueWithLength } from '../../styles';
 export interface FormFieldProps {
     className?: string;
     label?: ReactNode;
+    /**
+     * 라벨 우측 렌더링될 Addon 요소
+     */
     rightAddon?: ReactNode;
+    /**
+     * 라벨 필수(*) 표시 사용 유무
+     */
     required?: boolean;
+    /**
+     * HelpTextProps 타입으로 넘길 경우 라벨 우측 IconHelp14에 자동으로 popover 처리됩니다.
+     */
     helper?: HelpTextProps;
+    /**
+     * 최소너비 80px내에서 라벨 너비를 지정할 수 있습니다.
+     */
     labelWidth?: CSSValueWithLength;
 }
 export declare const FormField: ({ className, label, rightAddon, required, helper, labelWidth, children, }: PropsWithChildren<FormFieldProps>) => JSX.Element;

package/dist/components/form/FormField.stories.d.ts

@@ -4,7 +4,7 @@ import { FormField } from './FormField';
 declare const _default: ComponentMeta<({ className, label, rightAddon, required, helper, labelWidth, children, }: React.PropsWithChildren<import("./FormField").FormFieldProps>) => JSX.Element>;
 export default _default;
 export declare const Base: any;
-export declare const LabelWith: any;
+export declare const LabelWidth: any;
 export declare const WithRadioGroup: ComponentStory<typeof FormField>;
 export declare const WithCheckboxGroup: ComponentStory<typeof FormField>;
 export declare const WithHelpPopover: any;

package/dist/components/input/InputAffix.d.ts

@@ -6,9 +6,9 @@ export interface InputAffixProps {
     disabled?: boolean;
     status?: InputStatus;
     width?: CSSValueWithLength;
-    /** Addon Left */
+    /** Input 좌측에 렌더링될 Addon 요소 */
     prefix?: string;
-    /** Addon Right */
+    /** Input 우측에 렌더링될 Addon 요소 */
     suffix?: string;
 }
 export declare const InputAffix: ({ className, disabled, children, status, prefix, suffix, width, }: PropsWithChildren<InputAffixProps>) => JSX.Element;

package/dist/components/input/InputBase.d.ts

@@ -7,16 +7,19 @@ export interface InputBaseType {
     alignment?: InputAlignment;
     /** @default info */
     status?: InputStatus;
-    /** @desc 좌측 영역에 렌더링 될 요소 */
+    /** 좌측 영역에 렌더링 될 요소 */
     startElement?: ReactElement<IconProps> | ReactNode;
-    /** @desc 우측 영역에 렌더링 될 요소 */
+    /** 우측 영역에 렌더링 될 요소 */
     endElement?: ReactElement<IconProps> | ReactNode;
-    /** @desc prefix */
+    /** Input prefix 요소 */
     leftAddon?: InputAffixProps['prefix'];
-    /** @desc suffix */
+    /** Input suffix 요소 */
     rightAddon?: InputAffixProps['suffix'];
     width?: CSSValueWithLength;
-    /** @default false */
+    /**
+     * 입력된 value count 노출 여부
+     * @default false
+     */
     showCounter?: boolean;
 }
 export type InputBaseProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'width'> & InputBaseType;

package/dist/components/menu/Menu.d.ts

@@ -17,6 +17,9 @@ export declare const useMenuContext: () => MenuContextProps;
 export interface MenuProps extends HTMLAttributes<HTMLUListElement> {
     selectedMenu?: MenuContextProps['activeMenu'];
     onClickMenu?: (id: MenuContextProps['activeMenuGroup']) => void;
+    /**
+     * Toggle 기능 사용 여부
+     */
     toggleMode?: MenuContextProps['toggleMode'];
 }
 export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLUListElement>>;

package/dist/components/modal/AlertModal.d.ts

@@ -7,5 +7,5 @@ export interface AlertModalProps extends Omit<ConfirmModalProps, 'cancelText' |
      */
     kind?: NotificationKind;
 }
-export declare const AlertModal: ({ width, kind, dense, fill, title, confirmText, text, subtext, onConfirm, onExited, ...props }: AlertModalProps) => JSX.Element;
+export declare const AlertModal: ({ width, kind, dense, fill, title, confirmText, text, subtext, zIndex, onConfirm, onExited, ...props }: AlertModalProps) => JSX.Element;
 export declare const Alert: (properties: AlertModalProps) => Promise<void>;

package/dist/components/modal/AlertModal.stories.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { AlertModal, AlertModalProps } from './AlertModal';
-declare const _default: ComponentMeta<({ width, kind, dense, fill, title, confirmText, text, subtext, onConfirm, onExited, ...props }: AlertModalProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ width, kind, dense, fill, title, confirmText, text, subtext, zIndex, onConfirm, onExited, ...props }: AlertModalProps) => JSX.Element>;
 export default _default;
 export declare const Base: ComponentStory<typeof AlertModal>;
 export declare const Dense: ComponentStory<typeof AlertModal>;

package/dist/components/modal/ConfirmModal.d.ts

@@ -1,15 +1,21 @@
 import { ReactNode } from 'react';
 import { ModalOverlayBaseProps } from './ModalOverlay';
-export interface ConfirmModalProps extends Omit<ModalOverlayBaseProps, 'onClose' | 'fullScreen'> {
+export interface ConfirmModalProps extends Omit<ModalOverlayBaseProps, 'onClose'> {
     title: ReactNode;
     text?: ReactNode;
     subtext?: ReactNode;
+    /**
+     * 좁은 간격 사용 유무
+     */
     dense?: boolean;
     confirmText?: string;
     cancelText?: string;
+    /**
+     * onConfirm/onCancel이 호출된 직후 onClose가 호출됩니다.
+     */
     onConfirm?: () => void | Promise<void>;
     onCancel?: () => void | Promise<void>;
     onClose?: () => void | Promise<void>;
 }
-export declare const ConfirmModal: ({ title, width, dense, fill, text, subtext, confirmText, cancelText, onConfirm, onCancel, onClose, onExited, ...props }: ConfirmModalProps) => JSX.Element;
+export declare const ConfirmModal: ({ title, width, zIndex, dense, fill, text, subtext, confirmText, cancelText, onConfirm, onCancel, onClose, onExited, ...props }: ConfirmModalProps) => JSX.Element;
 export declare const Confirm: (properties: ConfirmModalProps) => Promise<boolean>;

package/dist/components/modal/ConfirmModal.stories.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { ConfirmModal } from './ConfirmModal';
-declare const _default: ComponentMeta<({ title, width, dense, fill, text, subtext, confirmText, cancelText, onConfirm, onCancel, onClose, onExited, ...props }: import("./ConfirmModal").ConfirmModalProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ title, width, zIndex, dense, fill, text, subtext, confirmText, cancelText, onConfirm, onCancel, onClose, onExited, ...props }: import("./ConfirmModal").ConfirmModalProps) => JSX.Element>;
 export default _default;
 export declare const Base: ComponentStory<typeof ConfirmModal>;
 export declare const Dense: ComponentStory<typeof ConfirmModal>;

package/dist/components/modal/Modal.d.ts

@@ -1,16 +1,30 @@
 import React, { PropsWithChildren, ReactNode } from 'react';
 import { ButtonProps } from '../button';
-import { SpaceProps } from '../../styles';
+import { CSSValueWithLength, SpaceProps } from '../../styles';
 import { ModalOverlayBaseProps, ModalBaseCancelReason } from './ModalOverlay';
 export type ModalButtonProps = Omit<ButtonProps, 'onClick'>;
 export type ModalCancelReason = ModalBaseCancelReason;
+export interface ModalContentProps extends SpaceProps {
+    maxHeight?: CSSValueWithLength;
+}
+type LayoutHeightType = {
+    header: number;
+    footer: number;
+};
 export interface ModalProps extends Omit<ModalOverlayBaseProps, 'onClose'> {
     title?: ReactNode;
     confirmText?: string;
+    /**
+     * [ButtonProps](https://storybook.kakaostyle.in/master/pds/?path=/docs/component-button--primary)를 confirmButton에 적용할 수 있습니다.
+     */
     confirmButtonProps?: ModalButtonProps;
+    /**
+     * [ButtonProps](https://storybook.kakaostyle.in/master/pds/?path=/docs/component-button--primary)를 cancelButton에 적용할 수 있습니다.
+     */
     cancelText?: string;
     cancelButtonProps?: ModalButtonProps;
     /**
+     * 헤더 영역 타이틀 좌측 backButton 사용 유무
      * @default false
      */
     backButton?: boolean;
@@ -19,42 +33,46 @@ export interface ModalProps extends Omit<ModalOverlayBaseProps, 'onClose'> {
      */
     closeButton?: boolean;
     /**
+     * 좁은 간격 사용 유무
      * @default false
      */
     dense?: boolean;
-    contentProps?: ModalContentProps;
     /**
-     * @desc Footer content, 커스텀 푸터 요소 사용시 default Footer(confirmText, cancelText)는 미노출됩니다.
+     * 바디 영역 콘텐츠 ModalContentProps를 통한 커스텀이 가능합니다.
+     *  - [SpaceProps](https://github.com/croquiscom/pds/blob/main/src/styles/space.ts)
+     *  - maxHeight
      */
-    footer?: ReactNode;
+    contentProps?: ModalContentProps;
     /**
-     * @desc Modal Header position 고정 여부, fullScreen일 경우만 적용됩니다.
-     * @default false
+     * 푸터 영역을 커스텀할 수 있습니다.
+     *  - 기본 Footer(confirmText, cancelText)는 미노출됩니다.
+     *  - dense 속성이 적용되지 않습니다.
+     *  - fullScreen 속성이 true일 경우 자동 해당 영역은 fixed 처리 됩니다.
      */
-    fixedHeader?: boolean;
+    footer?: ReactNode;
     /**
-     * @desc Modal Footer position 고정 여부, fullScreen일 경우만 적용됩니다.
+     * 전체화면 사용 유무, 헤더/푸터 영역이 자동 고정됩니다.
      * @default false
      */
-    fixedFooter?: boolean;
+    fullScreen?: boolean;
     onConfirm?: () => void;
     /**
-     * @desc cancel 이벤트, reason('cancelClick' | 'escapeKeyPress' | 'overlayClick')을 포함하여 전달합니다.
+     * reason을 포함한 cancel 이벤트를 전달합니다.
+     *  - 'cancelClick' | 'escapeKeyPress' | 'overlayClick'
      */
     onCancel?: (reason: ModalBaseCancelReason) => void;
     /**
-     * @desc Modal Header backButton 클릭 이벤트
+     * Modal Header backButton 클릭 이벤트
      */
     onClickBackButton?: () => void;
 }
-export interface ModalContentProps extends Pick<ModalProps, 'fixedHeader' | 'fixedFooter' | 'dense'>, SpaceProps {
-}
 export declare const MIN_WIDTH = 480;
-export declare const Modal: ({ opened: openProp, children, title, width, confirmText, cancelText, closeButton, backButton, dense, fill, fullScreen, fixedHeader, fixedFooter, footer, confirmButtonProps, cancelButtonProps, contentProps, onConfirm, onCancel, onExited, onClickBackButton, ...props }: PropsWithChildren<ModalProps>) => JSX.Element;
+export declare const Modal: ({ opened: openProp, children, title, width, zIndex, confirmText, cancelText, closeButton, backButton, dense, fill, fullScreen, footer, confirmButtonProps, cancelButtonProps, contentProps, onConfirm, onCancel, onExited, onClickBackButton, ...props }: PropsWithChildren<ModalProps>) => JSX.Element;
 export declare const ModalContent: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType<any>;
 } & ModalContentProps & {
-    headerHeight: number;
-    footerHeight: number;
+    fixed: boolean;
+    layoutHeight: LayoutHeightType;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};