@pfct/purple 1.4.0-rc.6 → 1.4.0-rc.7

package/dist/components/BottomSheet/BaseBottomSheet/index.d.ts

@@ -1,11 +1,11 @@
-import { default as React } from 'react';
+import React from 'react';
+import * as Styled from './index.styled';
 import { ChildrenStyleProps } from './index.styled';
-import { SingleButtonProps } from '../../Button/SingleButton';
 import { DoubleButtonProps } from '../../Button/DoubleButton';
 import { OverlayRootProps } from '../../OverlayRoot';
 import { ReactFCWithChildren } from '../../../types/react';
-import * as Styled from './index.styled';
-declare const BaseBottomSheetCTASingleButton: React.FC<SingleButtonProps>;
+import { type ButtonProps } from '@/components/ui/button';
+declare const BaseBottomSheetCTASingleButton: React.FC<ButtonProps>;
 declare const BaseBottomSheetCTADoubleButton: React.FC<DoubleButtonProps>;
 declare const BaseBottomSheetBody: ReactFCWithChildren<ChildrenStyleProps>;
 declare const BaseBottomSheetHeader: ReactFCWithChildren;
@@ -17,7 +17,7 @@ type BaseBottomSheetProps = Omit<OverlayRootProps, 'onClick'> & {
 };
 declare const BaseBottomSheetComp: ReactFCWithChildren<BaseBottomSheetProps>;
 declare const BaseBottomSheet: ReactFCWithChildren<BaseBottomSheetProps> & {
-    SingleButton: React.FC<import('../../Button/BaseButton').BaseButtonProps>;
+    SingleButton: React.FC<ButtonProps>;
     DoubleButton: React.FC<DoubleButtonProps>;
     Body: ReactFCWithChildren<Styled.ChildrenStyleProps>;
     Header: ReactFCWithChildren;

package/dist/components/BottomSheet/BaseBottomSheet/index.js

@@ -0,0 +1,98 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseBottomSheetCTADoubleButton = exports.BaseBottomSheetCTASingleButton = exports.BaseBottomSheetBody = exports.BaseBottomSheetHeader = exports.BaseBottomSheetComp = exports.BaseBottomSheet = void 0;
+const hooks_1 = require("../../../hooks");
+const react_1 = __importStar(require("react"));
+const Styled = __importStar(require("./index.styled"));
+const style_constants_1 = require("../../../constants/style.constants");
+const OverlayRoot_1 = require("../../OverlayRoot");
+const button_1 = require("@/components/ui/button");
+const BaseBottomSheetCTASingleButton = (props) => (react_1.default.createElement(Styled.FooterWrapper, null,
+    react_1.default.createElement(button_1.Button, Object.assign({}, props))));
+exports.BaseBottomSheetCTASingleButton = BaseBottomSheetCTASingleButton;
+const BaseBottomSheetCTADoubleButton = (props) => (react_1.default.createElement(Styled.FooterWrapper, null,
+    react_1.default.createElement("div", { className: "flex w-full gap-[10px]" },
+        react_1.default.createElement(button_1.Button, Object.assign({}, props.left, { onClick: props.left.onClick, colorType: props.left.colorType, purpose: "sub", disabled: props.left.disabled, className: props.left.className }), props.left.children),
+        react_1.default.createElement(button_1.Button, { onClick: props.right.onClick, colorType: props.right.colorType, purpose: "main", disabled: props.right.disabled, className: props.right.className, type: props.right.type || 'submit' }, props.right.children))));
+exports.BaseBottomSheetCTADoubleButton = BaseBottomSheetCTADoubleButton;
+const BaseBottomSheetBody = (_a) => {
+    var { children } = _a, styleProps = __rest(_a, ["children"]);
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scroll(0, 0);
+    }, []);
+    return (react_1.default.createElement(Styled.ChildrenWrapper, Object.assign({ ref: ref }, styleProps), children));
+};
+exports.BaseBottomSheetBody = BaseBottomSheetBody;
+const BaseBottomSheetHeader = ({ children }) => (react_1.default.createElement(Styled.HeaderWrapper, null, children));
+exports.BaseBottomSheetHeader = BaseBottomSheetHeader;
+const BaseBottomSheetComp = ({ visible, onMaskClick, className, zIndex = style_constants_1.zIndex.modal, minHeight, children, }) => {
+    const [vh, setVh] = (0, react_1.useState)(0);
+    const checkVh = (0, react_1.useCallback)(() => {
+        setVh(window === null || window === void 0 ? void 0 : window.innerHeight);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        checkVh();
+    }, [checkVh]);
+    (0, hooks_1.useResize)(checkVh);
+    (0, hooks_1.useOverlayPreventScroll)(visible);
+    if (!visible) {
+        return null;
+    }
+    return (react_1.default.createElement(OverlayRoot_1.OverlayRoot, { visible: visible, className: className, onClick: onMaskClick, zIndex: zIndex },
+        react_1.default.createElement(Styled.ContentWrapper, null,
+            react_1.default.createElement(Styled.Content, { visible: visible, zIndex: zIndex, minHeight: minHeight, vh: vh }, children))));
+};
+exports.BaseBottomSheetComp = BaseBottomSheetComp;
+const BaseBottomSheet = Object.assign(BaseBottomSheetComp, {
+    SingleButton: BaseBottomSheetCTASingleButton,
+    DoubleButton: BaseBottomSheetCTADoubleButton,
+    Body: BaseBottomSheetBody,
+    Header: BaseBottomSheetHeader,
+});
+exports.BaseBottomSheet = BaseBottomSheet;

package/dist/components/BottomSheet/BaseBottomSheet/index.styled.d.ts

@@ -1,33 +1,33 @@
 export type BottomSheetPropsHeight = 's' | 'm' | 'l' | 'full';
-export declare const ContentWrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+export declare const ContentWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Content: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Content: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     visible: boolean;
     zIndex: number;
     vh: number;
     minHeight?: BottomSheetPropsHeight;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ContentWrapperPadding = 25;
-export declare const HeaderWrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+export declare const HeaderWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export type ChildrenStyleProps = {
     readonly hasBottomPadding?: boolean;
     readonly hasContentPadding?: boolean;
     readonly hasFullHeight?: boolean;
     readonly hideOverflow?: boolean;
 };
-export declare const ChildrenWrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+export declare const ChildrenWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-} & ChildrenStyleProps, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const FooterWrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+} & ChildrenStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FooterWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/BottomSheet/BaseBottomSheet/index.styled.js

@@ -0,0 +1,133 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FooterWrapper = exports.ChildrenWrapper = exports.HeaderWrapper = exports.ContentWrapperPadding = exports.Content = exports.ContentWrapper = void 0;
+const react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Colors_1 = require("../../../core/Colors");
+const style_constants_1 = require("../../../constants/style.constants");
+const media_util_1 = require("../../../utils/media.util");
+const DEFAULT_BOTTOM_VALUE = '100%';
+const up = (0, react_1.keyframes) `
+	from {
+		transform: translate(0, ${DEFAULT_BOTTOM_VALUE});
+		}
+	to {
+		transform: translate(0, 0);
+	}
+`;
+const down = (0, react_1.keyframes) `
+	from {
+		transform: translate(0, 0);
+	}
+	to {
+		transform: translate(0, ${DEFAULT_BOTTOM_VALUE});
+	}
+`;
+const bottomSettings = (visible, vh, minHeight) => {
+    let mobileMinHeight = 'initial';
+    switch (minHeight) {
+        case 's':
+            mobileMinHeight = vh * 0.3 + 'px';
+            break;
+        case 'm':
+            mobileMinHeight = vh * 0.6 + 'px';
+            break;
+        case 'l':
+            mobileMinHeight = vh * 0.9 + 'px';
+            break;
+        case 'full':
+            mobileMinHeight = vh + 'px';
+            break;
+    }
+    const isFullPage = minHeight === 'full';
+    return (0, react_1.css) `
+		animation: ${visible
+        ? (0, react_1.css) `
+					${up} 0.3s forwards
+			  `
+        : (0, react_1.css) `
+					${down} 0.3s forwards
+			  `};
+
+		min-height: ${mobileMinHeight};
+		max-height: calc(${vh - (isFullPage ? 0 : 45)}px);
+		border-top-right-radius: ${isFullPage ? 0 : '10px'};
+		border-top-left-radius: ${isFullPage ? 0 : '10px'};
+
+		${(0, media_util_1.Larger)((0, react_1.css) `
+			animation: none;
+		`)}
+	`;
+};
+exports.ContentWrapper = styled_1.default.div `
+	position: fixed;
+	left: 0;
+	bottom: 0;
+	width: 100%;
+
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	${(0, media_util_1.Larger)((0, react_1.css) `
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+
+		width: auto;
+	`)}
+`;
+exports.Content = styled_1.default.div `
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	background-color: ${Colors_1.basicColors.white};
+	z-index: ${(el) => el.zIndex + 1};
+
+	${({ visible, minHeight, vh }) => bottomSettings(visible, vh, minHeight)};
+
+	${({ vh }) => (0, media_util_1.Larger)((0, react_1.css) `
+			width: 360px;
+			max-height: calc(${vh - 120}px);
+			min-height: initial;
+			border-radius: 10px;
+		`)}
+`;
+exports.ContentWrapperPadding = 25;
+exports.HeaderWrapper = styled_1.default.div `
+	flex: none;
+	width: 100%;
+`;
+exports.ChildrenWrapper = styled_1.default.div `
+	flex: 1;
+
+	${({ hideOverflow = true }) => hideOverflow && 'overflow-y: auto;'}
+
+	${({ hasContentPadding = true, hasFullHeight = false, hasBottomPadding = true }) => {
+    const bottomPadding = hasFullHeight ? 0 : hasBottomPadding ? style_constants_1.LayoutSpacing.bottomMargin.mobile : 0;
+    if (hasContentPadding) {
+        return (0, react_1.css) `
+				padding: 0 ${exports.ContentWrapperPadding}px ${bottomPadding}px;
+			`;
+    }
+    else {
+        return (0, react_1.css) `
+				padding: 0 0 ${bottomPadding}px 0;
+			`;
+    }
+}};
+
+	${({ hasFullHeight = false, hasBottomPadding = true }) => (0, media_util_1.Larger)((0, react_1.css) `
+			padding-bottom: ${hasFullHeight ? 0 : hasBottomPadding ? style_constants_1.LayoutSpacing.bottomMargin.pc : 0}px;
+		`)}
+`;
+exports.FooterWrapper = styled_1.default.div `
+	flex: none;
+	width: 100%;
+
+	padding: 0 20px 20px 20px;
+`;

package/dist/components/BottomSheet/NavBottomSheet/index.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 import { BaseBottomSheetProps } from '../BaseBottomSheet';
 import { NavigationProps } from '../../Navigation';
 import { ReactFCWithChildren } from '../../../types/react';
@@ -7,9 +7,9 @@ type NavBottomSheetProps = BaseBottomSheetProps;
 declare const NavBottomSheet: ReactFCWithChildren<BaseBottomSheetProps> & {
     Header: ReactFCWithChildren;
     Navigation: React.FC<NavigationProps>;
-    Body: ReactFCWithChildren<import('../BaseBottomSheet/index.styled').ChildrenStyleProps>;
-    SingleButton: React.FC<import('../../Button/BaseButton').BaseButtonProps>;
-    DoubleButton: React.FC<import('../..').DoubleButtonProps>;
+    Body: ReactFCWithChildren<import("../BaseBottomSheet/index.styled").ChildrenStyleProps>;
+    SingleButton: React.FC<import("../..").ButtonProps>;
+    DoubleButton: React.FC<import("../..").DoubleButtonProps>;
 };
 export type { NavBottomSheetProps };
 export { NavBottomSheet, BottomSheetNavigationTemplate };

package/dist/components/BottomSheet/NavBottomSheet/index.js

@@ -0,0 +1,56 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BottomSheetNavigationTemplate = exports.NavBottomSheet = void 0;
+const react_1 = __importDefault(require("react"));
+const BaseBottomSheet_1 = require("../BaseBottomSheet");
+const Navigation_1 = require("../../Navigation");
+const Styled = __importStar(require("./index.styled"));
+const BottomSheetNavigationTemplate = ({ children }) => (react_1.default.createElement(BaseBottomSheet_1.BaseBottomSheetHeader, null,
+    react_1.default.createElement(Styled.NavigationWrapper, null, children)));
+exports.BottomSheetNavigationTemplate = BottomSheetNavigationTemplate;
+const BottomSheetNavigation = (props) => (react_1.default.createElement(BottomSheetNavigationTemplate, null,
+    react_1.default.createElement(Navigation_1.Navigation, Object.assign({}, props))));
+const NavBottomSheet = Object.assign(BaseBottomSheet_1.BaseBottomSheetComp, {
+    Header: BaseBottomSheet_1.BaseBottomSheetHeader,
+    Navigation: BottomSheetNavigation,
+    Body: BaseBottomSheet_1.BaseBottomSheetBody,
+    SingleButton: BaseBottomSheet_1.BaseBottomSheetCTASingleButton,
+    DoubleButton: BaseBottomSheet_1.BaseBottomSheetCTADoubleButton,
+});
+exports.NavBottomSheet = NavBottomSheet;

package/dist/components/BottomSheet/NavBottomSheet/index.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { NavBottomSheetProps } from '.';
+type Story = StoryObj<NavBottomSheetProps>;
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Bottom-Sheet-295e90bcc23247bb9a14b354a142df6d?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 화면 하단에서 상단으로 들어오는 컨테이너 영역입니다. <br/>
+ * 현재 페이지를 벗어나지 않고 관련된 정보 제공하거나 동작을 제어합니다.
+ *
+ */
+declare const meta: Meta<NavBottomSheetProps>;
+export default meta;
+export declare const Story1: Story;

package/dist/components/BottomSheet/NavBottomSheet/index.stories.js

@@ -0,0 +1,86 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Story1 = void 0;
+const react_1 = __importStar(require("react"));
+const _1 = require(".");
+const button_1 = require("@/components/ui/button");
+const NavComponent = (props) => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const toggleOpen = () => {
+        setOpen((prev) => !prev);
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { style: { width: '200px' } },
+            react_1.default.createElement(button_1.Button, { onClick: toggleOpen, colorType: "gray", purpose: "main" }, "\uBAA8\uB2EC \uC624\uD508")),
+        react_1.default.createElement(_1.NavBottomSheet, Object.assign({}, props, { visible: open }),
+            react_1.default.createElement(_1.NavBottomSheet.Navigation, { hasBackgroundColor: true, contentColor: "gray", rightArea: { type: 'closeIcon', handleClickButton: toggleOpen } }),
+            react_1.default.createElement(_1.NavBottomSheet.Body, null, "Hello"),
+            react_1.default.createElement(_1.NavBottomSheet.SingleButton, { colorType: "gray", purpose: "main", onClick: toggleOpen }, "\uBC84\uD2BC"))));
+};
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Bottom-Sheet-295e90bcc23247bb9a14b354a142df6d?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 화면 하단에서 상단으로 들어오는 컨테이너 영역입니다. <br/>
+ * 현재 페이지를 벗어나지 않고 관련된 정보 제공하거나 동작을 제어합니다.
+ *
+ */
+const meta = {
+    title: 'Component/BottomSheet/NavBottomSheet',
+    component: NavComponent,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+// Props 교체 가능
+exports.Story1 = {
+    render: (props) => react_1.default.createElement(NavComponent, Object.assign({}, props)),
+    args: {
+        minHeight: 'full',
+    },
+    argTypes: {},
+    parameters: {
+        docs: {
+            description: {
+                story: `
+- 바텀시트 내에서 depth가 발생할 때 혹은 사용자가 어떤 곳에 머물고 있는지 가볍게 알려줄 때 사용합니다.
+<br/>
+- 네비게이션바 아래부터 버튼이 없는 경우는 가장 하단까지, 버튼이 있는 경우는 버튼 위까지 스크롤 영역으로 지정합니다.`,
+            },
+        },
+    },
+};
+exports.Story1.storyName = '바탐시트 - 네비게이션바';

package/dist/components/BottomSheet/NavBottomSheet/index.styled.d.ts

@@ -1,4 +1,4 @@
-export declare const NavigationWrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+export declare const NavigationWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/BottomSheet/NavBottomSheet/index.styled.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationWrapper = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.NavigationWrapper = styled_1.default.div `
+	margin-top: 10px;
+`;

package/dist/components/BottomSheet/TitleBottomSheet/index.d.ts

@@ -1,17 +1,18 @@
-import { default as React } from 'react';
+import React from 'react';
 import { BaseBottomSheetProps } from '../BaseBottomSheet';
 import { DoubleButtonProps } from '../../Button/DoubleButton';
+import { ButtonProps } from '@/components/ui/button';
 type TitleBottomSheetProps = BaseBottomSheetProps;
 type TitleProps = {
     title?: string | React.ReactNode;
     subTitle?: string | React.ReactNode;
     hasContentPadding?: boolean;
 };
-declare const TitleBottomSheet: import('../../..').ReactFCWithChildren<BaseBottomSheetProps> & {
-    Header: import('../../..').ReactFCWithChildren;
-    Body: import('../../..').ReactFCWithChildren<import('../BaseBottomSheet/index.styled').ChildrenStyleProps>;
+declare const TitleBottomSheet: import("../../..").ReactFCWithChildren<BaseBottomSheetProps> & {
+    Header: import("../../..").ReactFCWithChildren;
+    Body: import("../../..").ReactFCWithChildren<import("../BaseBottomSheet/index.styled").ChildrenStyleProps>;
     Title: React.FC<TitleProps>;
-    SingleButton: React.FC<import('../../Button/BaseButton').BaseButtonProps>;
+    SingleButton: React.FC<ButtonProps>;
     DoubleButton: React.FC<DoubleButtonProps>;
 };
 export type { TitleBottomSheetProps };

package/dist/components/BottomSheet/TitleBottomSheet/index.js

@@ -0,0 +1,64 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TitleBottomSheet = void 0;
+const react_1 = __importDefault(require("react"));
+const BaseBottomSheet_1 = require("../BaseBottomSheet");
+const Headline4_1 = require("../../../core/Typography/Headline4");
+const Styled = __importStar(require("./index.styled"));
+const Title = ({ title, subTitle, hasContentPadding = true }) => {
+    return (react_1.default.createElement(Styled.TitleWrapper, { contentPadding: hasContentPadding },
+        title && react_1.default.createElement(Headline4_1.Headline4, null, title),
+        subTitle && react_1.default.createElement(Styled.SubTitle, { className: Styled.className.subTitle }, subTitle)));
+};
+const SingleButton = (props) => {
+    return (react_1.default.createElement(Styled.ButtonMargin, null,
+        react_1.default.createElement(BaseBottomSheet_1.BaseBottomSheetCTASingleButton, Object.assign({}, props))));
+};
+const DoubleButton = (props) => {
+    return (react_1.default.createElement(Styled.ButtonMargin, null,
+        react_1.default.createElement(BaseBottomSheet_1.BaseBottomSheetCTADoubleButton, Object.assign({}, props))));
+};
+const TitleBottomSheet = Object.assign(BaseBottomSheet_1.BaseBottomSheetComp, {
+    Header: BaseBottomSheet_1.BaseBottomSheetHeader,
+    Body: BaseBottomSheet_1.BaseBottomSheetBody,
+    Title,
+    SingleButton,
+    DoubleButton,
+});
+exports.TitleBottomSheet = TitleBottomSheet;

package/dist/components/BottomSheet/TitleBottomSheet/index.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TitleBottomSheetProps } from '.';
+type Story = StoryObj<TitleBottomSheetProps>;
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Bottom-Sheet-295e90bcc23247bb9a14b354a142df6d?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 화면 하단에서 상단으로 들어오는 컨테이너 영역입니다. <br/>
+ * 현재 페이지를 벗어나지 않고 관련된 정보 제공하거나 동작을 제어합니다.
+ *
+ */
+declare const meta: Meta<TitleBottomSheetProps>;
+export default meta;
+export declare const Story1: Story;