@tripie-pyotato/design-system 0.0.0

package/dist/src/components/TripieButton/MenuToggle/MenuList/menu-list.stories.jsx

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var react_1 = require("react");
+var _1 = require(".");
+var hooks_1 = require("../../../../hooks");
+var MenuItem_1 = require("../MenuItem");
+var meta = {
+    title: 'tripie-ui/Button/Menu/List',
+    component: _1.default,
+    tags: ['autodocs'],
+    argTypes: {},
+    parameters: {
+        docs: {
+            description: {
+                component: '네비게이션 토글 버튼이 열린 상태에서 보이는 메뉴 리스트 컴포넌트. 여닫을 때 리스트 아이템들이 하나씩 stagger되는 애니메이션이 동작합니다. 다른 ui 위에 리스트가 올라가면 블러 효과가 있습니다.',
+            },
+        },
+    },
+    decorators: [
+        function (story, context) {
+            var _a = (0, hooks_1.useAppTheme)(), mode = _a.mode, setMode = _a.setMode;
+            var selectedTheme = context.globals.theme || mode;
+            (0, react_1.useEffect)(function () {
+                setMode(selectedTheme);
+            }, [selectedTheme]);
+            return <div className={"".concat(context.globals.theme)}>{story()}</div>;
+        },
+    ],
+};
+exports.default = meta;
+exports.Default = {
+    name: 'Default',
+    render: function () {
+        return (<div style={{ height: '12rem' }}>
+        <_1.default>
+          {Array.from({ length: 3 }, function (_, i) { return (<MenuItem_1.default key={i}>아이템 {i + 1}</MenuItem_1.default>); })}
+        </_1.default>
+      </div>);
+    },
+};

package/dist/src/components/TripieButton/MenuToggle/MenuList/variants.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NAVIGATION_VARIANT = void 0;
+exports.NAVIGATION_VARIANT = {
+    open: {
+        opacity: 1,
+        display: 'inline-block',
+        transition: { staggerChildren: 0.07, delayChildren: 0.2 },
+    },
+    closed: {
+        opacity: 0,
+        display: 'none',
+        transition: { staggerChildren: 0.05, staggerDirection: -1 },
+    },
+};

package/dist/src/components/TripieButton/MenuToggle/MenuToggle.jsx

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Path = void 0;
+var bind_1 = require("classnames/bind");
+var framer_motion_1 = require("framer-motion");
+var useCycle_1 = require("../../../hooks/useCycle");
+var colors_1 = require("../../../shared/colors");
+var TripieContainer_1 = require("../../TripieContainer/TripieContainer");
+var NoStyleButton_1 = require("../NoStyle/NoStyleButton");
+var menu_toggle_module_scss_1 = require("./menu-toggle.module.scss");
+var MenuItem_1 = require("./MenuItem");
+var MenuList_1 = require("./MenuList");
+var cx = bind_1.default.bind(menu_toggle_module_scss_1.default);
+var Path = function (props) { return (<framer_motion_1.motion.path fill="transparent" strokeWidth="1" stroke={colors_1.default[0]} strokeLinecap="round" {...props}/>); };
+exports.Path = Path;
+var ToggleButton = function (_a) {
+    var toggle = _a.toggle;
+    return (<NoStyleButton_1.default action={function () { return toggle(); }} className={cx('menu-toggle')}>
+    <svg width="24" height="24" viewBox="0 0 24 24" className={cx('svg')}>
+      <exports.Path variants={{
+            closed: { d: 'M 2 2.5 L 20 2.5' },
+            open: { d: 'M 3 16.5 L 17 2.5' },
+        }}/>
+      <exports.Path d="M 2 9.423 L 20 9.423" variants={{
+            closed: { opacity: 1 },
+            open: { opacity: 0 },
+        }} transition={{ duration: 0.1 }}/>
+      <exports.Path variants={{
+            closed: { d: 'M 2 16.346 L 20 16.346' },
+            open: { d: 'M 3 2.5 L 17 16.346' },
+        }}/>
+    </svg>
+  </NoStyleButton_1.default>);
+};
+var MenuToggle = function (_a) {
+    var className = _a.className, _b = _a.children, children = _b === void 0 ? '' : _b, _c = _a.initial, initial = _c === void 0 ? false : _c;
+    var _d = (0, useCycle_1.useCycle)(initial, true), isOpen = _d[0], toggleOpen = _d[1];
+    return (<framer_motion_1.motion.nav className={cx('nav', className)} initial={initial} animate={isOpen ? 'open' : 'closed'}>
+      <TripieContainer_1.default margin="none">{children}</TripieContainer_1.default>
+      <ToggleButton toggle={toggleOpen}/>
+    </framer_motion_1.motion.nav>);
+};
+MenuToggle.Item = MenuItem_1.default;
+MenuToggle.List = MenuList_1.default;
+exports.default = MenuToggle;

package/dist/src/components/TripieButton/MenuToggle/index.js

@@ -0,0 +1,20 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+__exportStar(require("./MenuToggle"), exports);
+var MenuToggle_1 = require("./MenuToggle");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return MenuToggle_1.default; } });

package/dist/src/components/TripieButton/MenuToggle/menu-toggle.stories.jsx

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClosedMenu = exports.OpennedMenu = exports.Default = void 0;
+var react_1 = require("react");
+var _1 = require(".");
+var hooks_1 = require("../../../hooks");
+var meta = {
+    title: 'tripie-ui/Button/Menu/Toggle',
+    component: _1.default,
+    tags: ['autodocs'],
+    argTypes: {},
+    parameters: {
+        docs: {
+            description: {
+                component: '네비게이션 토글 버튼, 닫힌 상태에는 버거 아이콘이며 열린 상태에서는 X 모양으로 애니메이션 전환합니다.',
+            },
+        },
+    },
+    decorators: [
+        function (story, context) {
+            var _a = (0, hooks_1.useAppTheme)(), mode = _a.mode, setMode = _a.setMode;
+            var selectedTheme = context.globals.theme || mode;
+            (0, react_1.useEffect)(function () {
+                setMode(selectedTheme);
+            }, [selectedTheme]);
+            return (<div className={"".concat(context.globals.theme)} style={{ height: '12rem' }}>
+          {story()}
+        </div>);
+        },
+    ],
+};
+exports.default = meta;
+exports.Default = {
+    name: 'MenuToggle',
+};
+exports.OpennedMenu = {
+    name: 'MenuToggle.initalOpen',
+    render: function () {
+        return (<_1.default initial={true}>
+        <_1.default.List>
+          {Array.from({ length: 3 }, function (_, i) { return (<_1.default.Item key={i}>아이템 {i + 1}</_1.default.Item>); })}
+        </_1.default.List>
+      </_1.default>);
+    },
+};
+exports.ClosedMenu = {
+    name: 'MenuToggle.initial.Closed',
+    render: function () {
+        return (<_1.default initial={false}>
+        <_1.default.List>
+          {Array.from({ length: 3 }, function (_, i) { return (<_1.default.Item key={i}>아이템 {i + 1}</_1.default.Item>); })}
+        </_1.default.List>
+      </_1.default>);
+    },
+};

package/dist/src/components/TripieButton/NoStyle/NoStyleButton.jsx

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var bind_1 = require("classnames/bind");
+var no_style_button_module_scss_1 = require("./no-style-button.module.scss");
+var cx = bind_1.default.bind(no_style_button_module_scss_1.default);
+var NoStyleButton = function (_a) {
+    var action = _a.action, children = _a.children, _b = _a.name, name = _b === void 0 ? '' : _b, className = _a.className;
+    return (<button name={name} onClick={action} className={cx('clear-btn', className)}>
+      {children}
+    </button>);
+};
+exports.default = NoStyleButton;

package/dist/src/components/TripieButton/NoStyle/NoStyleButton.spec.jsx

@@ -0,0 +1,87 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("@testing-library/react");
+var user_event_1 = require("@testing-library/user-event");
+var vitest_1 = require("vitest");
+var NoStyleButton_1 = require("./NoStyleButton");
+describe('No Style button Component called', function () {
+    it('버튼 클릭 시 action 함수가 호출된다.', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var actionMock, buttonElement;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    actionMock = vitest_1.vi.fn();
+                    (0, react_1.render)(<NoStyleButton_1.default action={actionMock}>button</NoStyleButton_1.default>);
+                    buttonElement = react_1.screen.getByRole('button', { name: /button/i });
+                    expect(buttonElement).toBeInTheDocument();
+                    return [4 /*yield*/, user_event_1.default.click(buttonElement)];
+                case 1:
+                    _a.sent(); // 클릭
+                    expect(actionMock).toHaveBeenCalled(); // 함수가 호출되었는지 체크
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('버튼 호버 시 커서가 pointer가 된다.', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var actionMock, buttonElement, style;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    actionMock = vitest_1.vi.fn();
+                    (0, react_1.render)(<NoStyleButton_1.default action={actionMock}>button</NoStyleButton_1.default>);
+                    buttonElement = react_1.screen.getByRole('button', { name: /button/i });
+                    expect(buttonElement).toBeInTheDocument();
+                    return [4 /*yield*/, user_event_1.default.hover(buttonElement)];
+                case 1:
+                    _a.sent();
+                    style = getComputedStyle(buttonElement);
+                    expect(style.cursor).toBe('pointer');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('테두리 없는 버튼이 랜더된다.', function () {
+        var actionMock = vitest_1.vi.fn(); // 🔥 Mock function
+        (0, react_1.render)(<NoStyleButton_1.default action={actionMock}>button</NoStyleButton_1.default>);
+        var buttonElement = react_1.screen.getByRole('button', { name: /button/i });
+        expect(buttonElement).toBeInTheDocument();
+        var style = getComputedStyle(buttonElement);
+        expect(style.border).toBe('0px');
+    });
+});

package/dist/src/components/TripieButton/NoStyle/index.js

@@ -0,0 +1,20 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+__exportStar(require("./NoStyleButton"), exports);
+var NoStyleButton_1 = require("./NoStyleButton");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return NoStyleButton_1.default; } });

package/dist/src/components/TripieButton/NoStyle/no-style-button.stories.jsx

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var react_1 = require("react");
+var _1 = require(".");
+var hooks_1 = require("../../../hooks");
+var meta = {
+    title: 'tripie-ui/Button/NoStyle',
+    component: _1.default,
+    tags: ['autodocs'],
+    argTypes: {},
+    decorators: [
+        function (story, context) {
+            var _a = (0, hooks_1.useAppTheme)(), mode = _a.mode, setMode = _a.setMode;
+            var selectedTheme = context.globals.theme || mode;
+            (0, react_1.useEffect)(function () {
+                setMode(selectedTheme);
+            }, [selectedTheme]);
+            return <div className={"".concat(context.globals.theme)}>{story()}</div>;
+        },
+    ],
+};
+exports.default = meta;
+exports.Default = {
+    name: 'Button',
+    args: {
+        children: 'Default',
+    },
+};

package/dist/src/components/TripieCard/Card.jsx

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var bind_1 = require("classnames/bind");
+var framer_motion_1 = require("framer-motion");
+var variants_1 = require("../../shared/variants");
+var Divider_1 = require("../Divider");
+var MotionSlideUp_1 = require("../MotionSlideUp/MotionSlideUp");
+var Text_1 = require("../Text");
+var TripieContainer_1 = require("../TripieContainer/TripieContainer");
+var TripieImage_1 = require("../TripieImage");
+var card_module_scss_1 = require("./card.module.scss");
+var cx = bind_1.default.bind(card_module_scss_1.default);
+var Card = function (_a) {
+    var duration = _a.duration, replays = _a.replays, _b = _a.delay, delay = _b === void 0 ? 0.3 : _b, children = _a.children, className = _a.className;
+    return (<MotionSlideUp_1.default delay={delay} duration={duration} replays={replays} className={cx('with-border', 'outer-wrap', className)}>
+      {children}
+      <div className={cx('noise')}></div>
+    </MotionSlideUp_1.default>);
+};
+var CardContent = function (_a) {
+    var children = _a.children, className = _a.className, ref = _a.ref;
+    return (<TripieContainer_1.default margin="none" ref={ref} className={cx('with-border', 'inner-wrap', className)}>
+      {children}
+    </TripieContainer_1.default>);
+};
+var ClickableCardContent = function (_a) {
+    var children = _a.children, ref = _a.ref, className = _a.className, onClick = _a.onClick, selected = _a.selected;
+    return (<framer_motion_1.motion.div ref={ref} whileHover={'shine'} whileTap={'shine'} animate={selected ? 'selected' : 'rest'} variants={variants_1.SHINE_VARIANT} onClick={onClick} className={cx('chip', 'with-border', 'inner-wrap', className)}>
+      {children}
+    </framer_motion_1.motion.div>);
+};
+var CardDescription = function (_a) {
+    var children = _a.children, className = _a.className;
+    return (<TripieContainer_1.default margin="none" className={cx('inner-wrap', 'with-description', className)}>
+      {children}
+    </TripieContainer_1.default>);
+};
+var CardWithImage = function (_a) {
+    var onClick = _a.onClick, src = _a.src, alt = _a.alt, title = _a.title, summary = _a.summary, className = _a.className, sourceUrl = _a.sourceUrl, _b = _a.imageSize, imageSize = _b === void 0 ? 'medium' : _b, _c = _a.displaySource, displaySource = _c === void 0 ? false : _c, withBorder = _a.withBorder, blurDataURL = _a.blurDataURL;
+    return (<Card.ClickableContent onClick={onClick} className={cx('article-card', className)}>
+      <TripieContainer_1.default margin="none" className={cx('img-wrap')}>
+        {sourceUrl == null || !displaySource ? (<TripieImage_1.default blurDataURL={blurDataURL} src={src} sizes={imageSize} alt={alt !== null && alt !== void 0 ? alt : "".concat(src, " \uC774\uBBF8\uC9C0\uC77C \uC218\uB3C4 \uC788\uC74C")} className={cx('thumbnail')} withBorder={withBorder}/>) : (<TripieImage_1.default.WithSourceUrl sizes={imageSize} withBorder={withBorder} sourceUrl={sourceUrl} src={src} alt={alt !== null && alt !== void 0 ? alt : "".concat(src, " \uC774\uBBF8\uC9C0\uC77C \uC218\uB3C4 \uC788\uC74C")} className={cx('thumbnail')}/>)}
+      </TripieContainer_1.default>
+      <TripieContainer_1.default>
+        <TripieContainer_1.default margin="sm" applyMargin="bottom">
+          <Text_1.default className={cx('bold')}>{title}</Text_1.default>
+          <Divider_1.default />
+        </TripieContainer_1.default>
+        {summary}
+      </TripieContainer_1.default>
+    </Card.ClickableContent>);
+};
+Card.Content = CardContent;
+Card.ClickableContent = ClickableCardContent;
+Card.Description = CardDescription;
+Card.WithCoverImage = CardWithImage;
+exports.default = Card;

package/dist/src/components/TripieCard/card.stories.jsx

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardWithCoverImage = exports.CardDescription = exports.ClickableCardContent = exports.CardContent = exports.Default = void 0;
+var react_1 = require("react");
+var hooks_1 = require("../../hooks");
+var Card_1 = require("./Card");
+var meta = {
+    title: 'tripie-ui/Card',
+    component: Card_1.default,
+    tags: ['autodocs'],
+    argTypes: {},
+    decorators: [
+        function (story, context) {
+            var _a = (0, hooks_1.useAppTheme)(), mode = _a.mode, setMode = _a.setMode;
+            var selectedTheme = context.globals.theme || mode;
+            (0, react_1.useEffect)(function () {
+                setMode(selectedTheme);
+            }, [selectedTheme]);
+            return <div className={"".concat(context.globals.theme)}>{story()}</div>;
+        },
+    ],
+};
+exports.default = meta;
+exports.Default = {
+    name: 'Card',
+    args: {
+        children: 'Default',
+    },
+};
+exports.CardContent = {
+    name: 'Card.Content',
+    render: function () { return <Card_1.default.Content> Card Content</Card_1.default.Content>; },
+};
+exports.ClickableCardContent = {
+    name: 'Card.ClickableContent',
+    render: function () { return <Card_1.default.ClickableContent>ClickableContent Card Content</Card_1.default.ClickableContent>; },
+};
+exports.CardDescription = {
+    name: 'Card.Description',
+    render: function () { return <Card_1.default.Description>Card Description</Card_1.default.Description>; },
+};
+exports.CardWithCoverImage = {
+    name: 'Card.WithCoverImage',
+    render: function () { return (<Card_1.default.WithCoverImage src={'https://media.triple.guide/triple-cms/c_fill,f_auto,h_256,w_256/54e3594d-1087-43ff-b760-7231d4103edf.jpeg'} alt={'https://media.triple.guide/triple-cms/c_limit,f_auto,h_2048,w_2048/54e3594d-1087-43ff-b760-7231d4103edf.jpeg의 이미지일 수도 있음'} summary={'대자연부터 감성 카페까지, 인생샷을 남길 수 있는 곳'} title={'여름 제주 인생샷 명소 BEST 7'} withBorder={false}/>); },
+};

package/dist/src/components/TripieCard/index.js

@@ -0,0 +1,20 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+__exportStar(require("./Card"), exports);
+var Card_1 = require("./Card");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return Card_1.default; } });

package/dist/src/components/TripieContainer/TripieContainer.jsx

@@ -0,0 +1,23 @@
+"use strict";
+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 });
+var bind_1 = require("classnames/bind");
+var tripie_container_module_scss_1 = require("./tripie-container.module.scss");
+var cx = bind_1.default.bind(tripie_container_module_scss_1.default);
+var TripieContainer = function (_a) {
+    var children = _a.children, className = _a.className, _b = _a.align, align = _b === void 0 ? 'left' : _b, _c = _a.margin, margin = _c === void 0 ? 'm' : _c, _d = _a.applyMargin, applyMargin = _d === void 0 ? 'all' : _d, _e = _a.preserveWhiteSpace, preserveWhiteSpace = _e === void 0 ? false : _e, refs = _a.refs, props = __rest(_a, ["children", "className", "align", "margin", "applyMargin", "preserveWhiteSpace", "refs"]);
+    return (<div ref={refs} className={cx('layout-fill-available', "align-".concat(align), 'container', applyMargin, margin, preserveWhiteSpace ? 'preserve-white-space' : '', className)} {...props}>
+      {children}
+    </div>);
+};
+exports.default = TripieContainer;

package/dist/src/components/TripieContainer/index.js

@@ -0,0 +1,20 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+__exportStar(require("./TripieContainer"), exports);
+var TripieContainer_1 = require("./TripieContainer");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return TripieContainer_1.default; } });

package/dist/src/components/TripieContainer/tripie-container.stories.jsx

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AllXl = exports.AllL = exports.AllSm = exports.AllXsm = exports.AllDefault = exports.PreserveWhiteSpace = exports.Default = void 0;
+var react_1 = require("react");
+var hooks_1 = require("../../hooks");
+var TripieContainer_1 = require("./TripieContainer");
+var meta = {
+    title: 'tripie-ui/Container',
+    component: TripieContainer_1.default,
+    tags: ['autodocs'],
+    decorators: [
+        function (story, context) {
+            var _a = (0, hooks_1.useAppTheme)(), mode = _a.mode, setMode = _a.setMode;
+            var selectedTheme = context.globals.theme || mode;
+            (0, react_1.useEffect)(function () {
+                setMode(selectedTheme);
+            }, [selectedTheme]);
+            return <div className={"".concat(context.globals.theme)}>{story()}</div>;
+        },
+    ],
+};
+exports.default = meta;
+exports.Default = {
+    name: 'Margin-Default',
+    args: {
+        children: 'default container',
+    },
+};
+exports.PreserveWhiteSpace = {
+    name: 'PreserveWhiteSpace',
+    args: {
+        children: 'preserve white space =true 설정 시 \n 줄바꿈 이스케이프 문자열 줄바꿈이 유지됩니다.',
+        preserveWhiteSpace: true,
+    },
+};
+exports.AllDefault = {
+    name: 'Margin-m',
+    args: {
+        children: 'MarginAll m container',
+        margin: 'm',
+    },
+};
+exports.AllXsm = {
+    name: 'Margin-xm',
+    args: {
+        children: 'm container',
+        margin: 'xsm',
+    },
+};
+exports.AllSm = {
+    name: 'Margin-sm',
+    args: {
+        children: 'sm container',
+        margin: 'sm',
+    },
+};
+exports.AllL = {
+    name: 'Margin-l',
+    args: {
+        children: ' l container',
+        margin: 'l',
+    },
+};
+exports.AllXl = {
+    name: 'Margin-xl',
+    args: {
+        children: ' xl container',
+        margin: 'xl',
+    },
+};