@tripie-pyotato/design-system 0.0.0

package/dist/src/components/TripieIcon/Icon.jsx

@@ -0,0 +1,84 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var bind_1 = require("classnames/bind");
+var framer_motion_1 = require("framer-motion");
+var navigation_1 = require("next/navigation");
+var icon_module_scss_1 = require("./icon.module.scss");
+var resource_1 = require("../../shared/resource");
+var variants_1 = require("./variants");
+var cx = bind_1.default.bind(icon_module_scss_1.default);
+var Icon = function (_a) {
+    var className = _a.className, onTapStart = _a.onTapStart, 
+    // src = './icons/arrow.png',
+    _b = _a.src, 
+    // src = './icons/arrow.png',
+    src = _b === void 0 ? (0, resource_1.ICON_RESOURCE)('ARROW') : _b, animate = _a.animate, _c = _a.sizes, sizes = _c === void 0 ? 'icon' : _c, _d = _a.variants, variants = _d === void 0 ? variants_1.ICON_VARIANTS.DEFAULT : _d, transition = _a.transition;
+    return (<framer_motion_1.motion.div onTapStart={onTapStart} className={cx(sizes, className)} variants={variants} transition={transition} animate={animate}>
+      <img src={src} alt={"".concat(src, " icon")}/>
+    </framer_motion_1.motion.div>);
+};
+var NavigateIcon = function (_a) {
+    var className = _a.className, _b = _a.direction, direction = _b === void 0 ? 'back' : _b, src = _a.src, _c = _a.sizes, sizes = _c === void 0 ? 'icon' : _c, animate = _a.animate, disabled = _a.disabled, _d = _a.variants, variants = _d === void 0 ? variants_1.ICON_VARIANTS.NAVIGATE(direction) : _d, transition = _a.transition;
+    var navigate = (0, navigation_1.useRouter)();
+    var onNavigate = function (_a) {
+        var direction = _a.direction;
+        direction === 'back' ? navigate.back() : navigate.forward();
+    };
+    return (<framer_motion_1.motion.button disabled={disabled} onTapStart={function () { return onNavigate({ direction: direction }); }} whileTap={'hover'} whileHover={'hover'} className={cx(sizes, className)} variants={variants} transition={transition} initial={'closed'} animate={animate}>
+      <img src={(0, resource_1.ICON_RESOURCE)('ARROW')} alt={src + '버튼'}/>
+    </framer_motion_1.motion.button>);
+};
+var RefreshIcon = function (_a) {
+    var className = _a.className, onTapStart = _a.onTapStart, animate = _a.animate, transition = _a.transition, _b = _a.sizes, sizes = _b === void 0 ? 'icon' : _b;
+    return (<framer_motion_1.motion.div onTapStart={onTapStart} whileTap={'hover'} whileHover={'hover'} className={cx(sizes, className)} variants={variants_1.ICON_VARIANTS.REFRESH('undo')} transition={transition} initial={'closed'} animate={animate}>
+      <img src={(0, resource_1.ICON_RESOURCE)('REFRESH')} alt={'새로고침 버튼'}/>
+    </framer_motion_1.motion.div>);
+};
+var PlaneIcon = function (_a) {
+    var className = _a.className, _b = _a.sizes, sizes = _b === void 0 ? 'icon' : _b;
+    return (<framer_motion_1.motion.img variants={variants_1.ICON_VARIANTS.PLANE} animate={'fly'} initial={'rotate'} src={(0, resource_1.ICON_RESOURCE)('PLANE')} className={cx(sizes, 'plane', className)}/>);
+};
+var CloudIcon = function (_a) {
+    var _b = _a.index, index = _b === void 0 ? 0 : _b, _c = _a.sizes, sizes = _c === void 0 ? 'icon' : _c;
+    return (<framer_motion_1.motion.img variants={variants_1.ICON_VARIANTS.CLOUD} initial={{
+            opacity: "".concat(0.2),
+            translateX: "".concat(80 * (Math.random() * (index + 1)), "vw"),
+            translateY: "".concat(Math.random() * 100, "px"),
+        }} animate={{ translateX: '-100vw' }} transition={{ decelerate: 2, repeat: Infinity, duration: 35, bounce: 0, delay: index * 0.1 }} src={(0, resource_1.ICON_RESOURCE)('CLOUD')} className={cx(sizes)}/>);
+};
+var LoadingIcon = function (_a) {
+    var className = _a.className, _b = _a.sizes, sizes = _b === void 0 ? 'icon' : _b;
+    return (<framer_motion_1.motion.img animate={{ rotate: '360deg' }} transition={{ repeat: Infinity, duration: 10, bounce: 0 }} src={(0, resource_1.ICON_RESOURCE)('LOADING')} className={cx(sizes, className)}/>);
+};
+var CursorIcon = function (_a) {
+    var _b = _a.hovered, hovered = _b === void 0 ? '' : _b, className = _a.className, transition = _a.transition, _c = _a.sizes, sizes = _c === void 0 ? 'icon' : _c;
+    return (<framer_motion_1.motion.img variants={variants_1.ICON_VARIANTS.CURSOR} src={(0, resource_1.ICON_RESOURCE)('CURSOR')} initial={'initial'} animate={hovered} transition={transition} className={cx(sizes, className)}/>);
+};
+var ScrollIcon = function (_a) {
+    var _b = _a.hovered, hovered = _b === void 0 ? '' : _b, className = _a.className, _c = _a.next, next = _c === void 0 ? true : _c, transition = _a.transition, onTapStart = _a.onTapStart, _d = _a.sizes, sizes = _d === void 0 ? 'icon' : _d;
+    return (<framer_motion_1.motion.img variants={variants_1.ICON_VARIANTS.SCROLL(next)} onTapStart={onTapStart} src={(0, resource_1.ICON_RESOURCE)('NEXT')} initial={'initial'} animate={hovered} transition={transition} className={cx(sizes, next ? 'next' : 'prev', className)}/>);
+};
+var TransportIcon = function (_a) {
+    var _b = _a.active, active = _b === void 0 ? false : _b, _c = _a.type, type = _c === void 0 ? 'FLAG' : _c, className = _a.className, _d = _a.sizes, sizes = _d === void 0 ? 'icon' : _d;
+    return (<framer_motion_1.motion.img animate={active ? { rotate: [0, 10, -10, 0] } : { rotate: 0 }} transition={active ? { repeat: Infinity, repeatType: 'loop', duration: 0.8, ease: 'easeInOut' } : {}} className={cx(sizes, className)} src={(0, resource_1.ICON_RESOURCE)(type)}/>);
+};
+var XIcon = function (_a) {
+    var className = _a.className, _b = _a.sizes, sizes = _b === void 0 ? 'icon' : _b;
+    return <framer_motion_1.motion.img className={cx(sizes, className)} src={(0, resource_1.ICON_RESOURCE)('X')}/>;
+};
+var CheckIcon = function (_a) {
+    var className = _a.className, _b = _a.sizes, sizes = _b === void 0 ? 'icon' : _b;
+    return <framer_motion_1.motion.img className={cx(sizes, className)} src={(0, resource_1.ICON_RESOURCE)('CHECK')}/>;
+};
+Icon.Navigate = NavigateIcon;
+Icon.Refresh = RefreshIcon;
+Icon.Plane = PlaneIcon;
+Icon.Cloud = CloudIcon;
+Icon.Loading = LoadingIcon;
+Icon.Transport = TransportIcon;
+Icon.Cursor = CursorIcon;
+Icon.Scroll = ScrollIcon;
+Icon.X = XIcon;
+Icon.Check = CheckIcon;
+exports.default = Icon;

package/dist/src/components/TripieIcon/icon-transport.stories.jsx

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TransportActiveWalkIcon = exports.TransportWalkIcon = exports.TransportActiveTramIcon = exports.TransportTramIcon = exports.TransportActiveTrainIcon = exports.TransportTrainIcon = exports.TransportActiveShipIcon = exports.TransportShipIcon = exports.TransportActiveFlagIcon = exports.TransportFlagIcon = exports.TransportActiveCarIcon = exports.TransportCarIcon = exports.TransportActiveBusIcon = exports.TransportBusIcon = exports.TransportIcon = void 0;
+var react_1 = require("react");
+var hooks_1 = require("../../hooks");
+var Icon_1 = require("./Icon");
+var meta = {
+    title: 'tripie-ui/Icon/Transport',
+    component: Icon_1.default,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: '교통 수단 관련 아이콘 컴포넌트들입니다.',
+            },
+        },
+    },
+    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.TransportIcon = {
+    name: 'Icon.Transport',
+    render: function () { return <Icon_1.default.Transport />; },
+};
+exports.TransportBusIcon = {
+    name: 'Icon.Transport.Bus',
+    render: function () { return <Icon_1.default.Transport type={'BUS'}/>; },
+};
+exports.TransportActiveBusIcon = {
+    name: 'Icon.Transport.Bus.Active',
+    render: function () { return <Icon_1.default.Transport active={true} type={'BUS'}/>; },
+};
+exports.TransportCarIcon = {
+    name: 'Icon.Transport.Car',
+    render: function () { return <Icon_1.default.Transport type={'CAR'}/>; },
+};
+exports.TransportActiveCarIcon = {
+    name: 'Icon.Transport.Car.Active',
+    render: function () { return <Icon_1.default.Transport active={true} type={'CAR'}/>; },
+};
+exports.TransportFlagIcon = {
+    name: 'Icon.Transport.Flag',
+    render: function () { return <Icon_1.default.Transport type={'FLAG'}/>; },
+};
+exports.TransportActiveFlagIcon = {
+    name: 'Icon.Transport.Flag.Active',
+    render: function () { return <Icon_1.default.Transport active={true} type={'FLAG'}/>; },
+};
+exports.TransportShipIcon = {
+    name: 'Icon.Transport.Ship',
+    render: function () { return <Icon_1.default.Transport type={'SHIP'}/>; },
+};
+exports.TransportActiveShipIcon = {
+    name: 'Icon.Transport.Ship.Active',
+    render: function () { return <Icon_1.default.Transport active={true} type={'SHIP'}/>; },
+};
+exports.TransportTrainIcon = {
+    name: 'Icon.Transport.Train',
+    render: function () { return <Icon_1.default.Transport type={'TRAIN'}/>; },
+};
+exports.TransportActiveTrainIcon = {
+    name: 'Icon.Transport.Train.Active',
+    render: function () { return <Icon_1.default.Transport active={true} type={'TRAIN'}/>; },
+};
+exports.TransportTramIcon = {
+    name: 'Icon.Transport.Tram',
+    render: function () { return <Icon_1.default.Transport type={'TRAM'}/>; },
+};
+exports.TransportActiveTramIcon = {
+    name: 'Icon.Transport.Tram.Active',
+    render: function () { return <Icon_1.default.Transport active={true} type={'TRAM'}/>; },
+};
+exports.TransportWalkIcon = {
+    name: 'Icon.Transport.Walk',
+    render: function () { return <Icon_1.default.Transport type={'WALK'}/>; },
+};
+exports.TransportActiveWalkIcon = {
+    name: 'Icon.Transport.Walk.Active',
+    render: function () { return <Icon_1.default.Transport active={true} type={'WALK'}/>; },
+};

package/dist/src/components/TripieIcon/icon.stories.jsx

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckIcon = exports.XIcon = exports.ScrollIcon = exports.CursorIcon = exports.CloudIcon = exports.PlaneIcon = exports.RefreshIcon = exports.NavigateIcon = exports.LargeNavigateIcon = exports.Default = void 0;
+var react_1 = require("react");
+var hooks_1 = require("../../hooks");
+var Icon_1 = require("./Icon");
+var meta = {
+    title: 'tripie-ui/Icon',
+    component: Icon_1.default,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: '교통 수단 이외 상호작용이 가능한 모든 아이콘 컴포넌트들입니다.',
+            },
+        },
+    },
+    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: 'Icon.Default',
+};
+exports.LargeNavigateIcon = {
+    name: 'Icon.Navigate.Large',
+    render: function () { return <Icon_1.default.Navigate sizes="large"/>; },
+};
+exports.NavigateIcon = {
+    name: 'Icon.Navigate',
+    render: function () { return <Icon_1.default.Navigate />; },
+};
+exports.RefreshIcon = {
+    name: 'Icon.Refresh',
+    render: function () { return <Icon_1.default.Refresh />; },
+};
+exports.PlaneIcon = {
+    name: 'Icon.Plane',
+    render: function () { return <Icon_1.default.Plane />; },
+};
+exports.CloudIcon = {
+    name: 'Icon.Cloud',
+    render: function () { return <Icon_1.default.Cloud index={0}/>; },
+};
+exports.CursorIcon = {
+    name: 'Icon.Cursor',
+    render: function () { return <Icon_1.default.Cursor />; },
+};
+exports.ScrollIcon = {
+    name: 'Icon.Scroll',
+    render: function () { return <Icon_1.default.Scroll />; },
+};
+exports.XIcon = {
+    name: 'Icon.X',
+    render: function () { return <Icon_1.default.X />; },
+};
+exports.CheckIcon = {
+    name: 'Icon.Check',
+    render: function () { return <Icon_1.default.Check />; },
+};

package/dist/src/components/TripieIcon/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("./Icon"), exports);
+var Icon_1 = require("./Icon");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return Icon_1.default; } });

package/dist/src/components/TripieIcon/variants.js

@@ -0,0 +1,172 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ICON_VARIANTS = void 0;
+exports.ICON_VARIANTS = {
+    DEFAULT: {
+        closed: function () { return ({}); },
+        open: function () { return ({
+            rotate: '45deg',
+            transition: {
+                duration: 0.5,
+                bounce: 0,
+            },
+        }); },
+        hover: function () { return ({
+            rotate: '45deg',
+            transition: {
+                duration: 0.5,
+                bounce: 0,
+            },
+        }); },
+    },
+    NAVIGATE: function (direction) {
+        return (direction === 'back'
+            ? {
+                closed: function () { return ({
+                    rotate: '-135deg',
+                    transition: {
+                        duration: 0.1,
+                        bounce: 1,
+                    },
+                }); },
+                hover: function () { return ({
+                    rotate: '-90deg',
+                    transition: {
+                        duration: 0.1,
+                        bounce: 1,
+                    },
+                }); },
+            }
+            : {
+                closed: function () { return ({
+                    rotate: '45deg',
+                    transition: {
+                        duration: 0.1,
+                        bounce: 1,
+                    },
+                }); },
+                hover: function () { return ({
+                    rotate: '0deg',
+                    transition: {
+                        duration: 0.1,
+                        bounce: 1,
+                    },
+                }); },
+            });
+    },
+    REFRESH: function (action) {
+        return (action === 'redo'
+            ? {
+                closed: function () { return ({
+                    rotate: '-135deg',
+                    transition: {
+                        duration: 0.1,
+                        bounce: 1,
+                    },
+                }); },
+                hover: function () { return ({
+                    rotate: '-90deg',
+                    transition: {
+                        duration: 0.1,
+                        bounce: 1,
+                    },
+                }); },
+            }
+            : {
+                closed: function () { return ({
+                    rotate: '45deg',
+                    transition: {
+                        duration: 0.1,
+                        bounce: 1,
+                    },
+                }); },
+                hover: function () { return ({
+                    rotate: '0deg',
+                    transition: {
+                        duration: 0.1,
+                        bounce: 1,
+                    },
+                }); },
+            });
+    },
+    PLANE: {
+        rotate: {
+            rotate: '90deg',
+        },
+        fly: function () { return ({
+            translateX: '100vw',
+            transition: {
+                repeat: Infinity,
+                duration: 5,
+                bounce: 1,
+            },
+        }); },
+    },
+    CLOUD: {
+        rest: function () { return ({
+            opacity: "".concat(Math.random()),
+            translateX: "".concat(Math.random() * 1000, "rem"),
+            translateY: "".concat(Math.random() * 100, "px"),
+        }); },
+        float: function () { return ({
+            translateX: '-100%',
+            delay: 1,
+            transition: {
+                decelerate: 2,
+                repeat: Infinity,
+                duration: 8,
+                bounce: 1,
+            },
+        }); },
+    },
+    CURSOR: {
+        initial: function () { return ({
+            translateY: '-10px',
+        }); },
+        hover: function () { return ({
+            pointerEvents: 'none',
+            translateX: '-50px',
+            translateY: '-5px',
+            transition: {
+                decelerate: 2,
+                duration: 0.5,
+                bounce: 0,
+            },
+        }); },
+    },
+    SCROLL: function (next) {
+        return (next
+            ? {
+                initial: function () { return ({
+                    rotate: '0deg',
+                    transition: {
+                        duration: 0.1,
+                        bounce: 1,
+                    },
+                }); },
+                hover: function () { return ({
+                    rotate: '-90deg',
+                    transition: {
+                        duration: 0.1,
+                        bounce: 1,
+                    },
+                }); },
+            }
+            : {
+                initial: function () { return ({
+                    rotate: '-180deg',
+                    transition: {
+                        duration: 0.1,
+                        bounce: 1,
+                    },
+                }); },
+                hover: function () { return ({
+                    rotate: '0deg',
+                    transition: {
+                        duration: 0.1,
+                        bounce: 1,
+                    },
+                }); },
+            });
+    },
+};

package/dist/src/components/TripieImage/TripieImage.jsx

@@ -0,0 +1,25 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var bind_1 = require("classnames/bind");
+var image_1 = require("next/image");
+var resource_1 = require("../../shared/resource");
+var Text_1 = require("../Text");
+var TripieContainer_1 = require("../TripieContainer");
+var tripie_image_module_scss_1 = require("./tripie-image.module.scss");
+var cx = bind_1.default.bind(tripie_image_module_scss_1.default);
+var TripieImage = function (_a) {
+    var alt = _a.alt, src = _a.src, refs = _a.refs, _b = _a.sizes, sizes = _b === void 0 ? 'default' : _b, className = _a.className, _c = _a.withBorder, withBorder = _c === void 0 ? true : _c, blurDataURL = _a.blurDataURL, _d = _a.fill, fill = _d === void 0 ? true : _d;
+    return (<TripieContainer_1.default margin="none" className={cx('tripie-image', 'img-wrap', sizes, withBorder && 'with-border', className)}>
+      {blurDataURL == null ? (<img className={cx('tripie-image', 'img-wrap', sizes, withBorder && 'with-border')} src={src !== null && src !== void 0 ? src : resource_1.PLACEHOLDER} alt={"".concat(alt, "\uC758 \uC774\uBBF8\uC9C0\uC77C \uC218 \uC788\uC74C")}/>) : (<image_1.default src={src !== null && src !== void 0 ? src : resource_1.PLACEHOLDER} alt={alt} sizes={'(min-width:640px) 50vw, 100vw'} placeholder="blur" fill={fill} blurDataURL={blurDataURL} ref={refs}/>)}
+    </TripieContainer_1.default>);
+};
+var ImageWithSourceUrl = function (_a) {
+    var alt = _a.alt, src = _a.src, refs = _a.refs, className = _a.className, _b = _a.sizes, sizes = _b === void 0 ? 'medium' : _b, sourceUrl = _a.sourceUrl, _c = _a.withBorder, withBorder = _c === void 0 ? true : _c, blurDataURL = _a.blurDataURL;
+    return (<TripieContainer_1.default margin="none" className={cx('img-wrap', withBorder !== null && withBorder !== void 0 ? withBorder : 'with-border', className)}>
+      <TripieImage src={src} alt={alt} refs={refs} sizes={sizes} blurDataURL={blurDataURL}/>
+      <Text_1.default className={cx('source-url', 'img-source')}>{"\uCD9C\uCC98 ".concat(sourceUrl)}</Text_1.default>
+    </TripieContainer_1.default>);
+};
+TripieImage.WithSourceUrl = ImageWithSourceUrl;
+exports.default = TripieImage;

package/dist/src/components/TripieImage/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("./TripieImage"), exports);
+var TripieImage_1 = require("./TripieImage");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return TripieImage_1.default; } });

package/dist/src/components/TripieImage/tripie-image.stories.jsx

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithBlurDataUrl = exports.WithLongSourceUrl = exports.WithSourceUrl = exports.SmallImage = exports.MediumImage = exports.IconImage = exports.NoImage = exports.Default = void 0;
+var react_1 = require("react");
+var hooks_1 = require("../../hooks");
+var TripieImage_1 = require("./TripieImage");
+var meta = {
+    title: 'tripie-ui/Image',
+    component: TripieImage_1.default,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: '이미지 컴포넌트입니다. withBorder boolean 값으로 테두리를 설정할 수 있고, TripieImage.WithSourceUrl 컴포넌트의 경우 sourceUrl을 제공하여 이미지 출처를 표기할 수 있습니다.',
+            },
+        },
+    },
+    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: 'Default',
+    args: {
+        alt: 'https://media.triple.guide/triple-cms/c_fill,f_auto,h_256,w_256/54e3594d-1087-43ff-b760-7231d4103edf.jpeg이미지일수도 있음',
+        src: 'https://media.triple.guide/triple-cms/c_fill,f_auto,h_256,w_256/54e3594d-1087-43ff-b760-7231d4103edf.jpeg',
+        blurDataURL: 'data:image/svg+xml;base64,CiAgPHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4IDUnPgogICAgPGZpbHRlciBpZD0nYicgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSdzUkdCJz4KICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0nMScgLz4KICAgIDwvZmlsdGVyPgogICAgPGltYWdlIHByZXNlcnZlQXNwZWN0UmF0aW89J25vbmUnIGZpbHRlcj0ndXJsKCNiKScgeD0nMCcgeT0nMCcgaGVpZ2h0PScxMDAlJyB3aWR0aD0nMTAwJScgCiAgICBocmVmPSdkYXRhOmltYWdlL2F2aWY7YmFzZTY0LC85ai8yd0JEQUFnSUNBZ0pDQWtLQ2drTkRnd09EUk1SRUJBUkV4d1VGaFFXRkJ3ckd4OGJHeDhiS3lZdUpTTWxMaVpFTlM4dk5VUk9RajVDVGw5VlZWOTNjWGVjbk5ILzJ3QkRBUWdJQ0FnSkNBa0tDZ2tORGd3T0RSTVJFQkFSRXh3VUZoUVdGQndyR3g4Ykd4OGJLeVl1SlNNbExpWkVOUzh2TlVST1FqNUNUbDlWVlY5M2NYZWNuTkgvd2dBUkNBQUxBQkFEQVNJQUFoRUJBeEVCLzhRQUZnQUJBUUVBQUFBQUFBQUFBQUFBQUFBQUJnVUgvOFFBRlFFQkFRQUFBQUFBQUFBQUFBQUFBQUFBQkFYLzJnQU1Bd0VBQWhBREVBQUFBS0NuRFhhSjMvL0VBQ0lRQUFFREF3TUZBQUFBQUFBQUFBQUFBQUlCQXdVQUJCSVJFeUV4TWtGaHNmL2FBQWdCQVFBQlB3Q01uYmQ1eHNIV2tISXROVStwUXpFRXp0NVhIZVdLWWdTODFBcVRyd01tU2szb2E0K3c2VmNtVzZmUG12L0VBQm9SQUFJQ0F3QUFBQUFBQUFBQUFBQUFBQUVDQXhFQUVpTC8yZ0FJQVFJQkFUOEFFMHBUWXZmVlovL0VBQm9SQVFBQ0F3RUFBQUFBQUFBQUFBQUFBQUVDQXdBRUVSTC8yZ0FJQVFNQkFUOEFxMXFtYkh5SERQL1onIC8+CiAgPC9zdmc+Cg==',
+        sizes: 'default',
+    },
+};
+exports.NoImage = {
+    name: 'Image.None',
+    args: {
+        sizes: 'medium',
+    },
+};
+exports.IconImage = {
+    name: 'Image.Icon',
+    args: {
+        alt: 'https://media.triple.guide/triple-cms/c_fill,f_auto,h_256,w_256/54e3594d-1087-43ff-b760-7231d4103edf.jpeg이미지일수도 있음',
+        src: 'https://media.triple.guide/triple-cms/c_fill,f_auto,h_256,w_256/54e3594d-1087-43ff-b760-7231d4103edf.jpeg',
+        sizes: 'icon',
+        withBorder: false,
+    },
+};
+exports.MediumImage = {
+    name: 'Image.Medium',
+    args: {
+        alt: 'https://media.triple.guide/triple-cms/c_fill,f_auto,h_256,w_256/54e3594d-1087-43ff-b760-7231d4103edf.jpeg이미지일수도 있음',
+        src: 'https://media.triple.guide/triple-cms/c_fill,f_auto,h_256,w_256/54e3594d-1087-43ff-b760-7231d4103edf.jpeg',
+        sizes: 'medium',
+    },
+};
+exports.SmallImage = {
+    name: 'Image.Small',
+    args: {
+        alt: 'https://media.triple.guide/triple-cms/c_fill,f_auto,h_256,w_256/54e3594d-1087-43ff-b760-7231d4103edf.jpeg이미지일수도 있음',
+        src: 'https://media.triple.guide/triple-cms/c_fill,f_auto,h_256,w_256/54e3594d-1087-43ff-b760-7231d4103edf.jpeg',
+        sizes: 'small',
+    },
+};
+exports.WithSourceUrl = {
+    name: 'Image.WithSourceUrl',
+    render: function () { return (<TripieImage_1.default.WithSourceUrl sourceUrl={'https://이미지 출처'} alt={'https://media.triple.guide/triple-cms/c_fill,f_auto,h_256,w_256/54e3594d-1087-43ff-b760-7231d4103edf.jpeg이미지일수도 있음'} src={'https://media.triple.guide/triple-cms/c_fill,f_auto,h_256,w_256/54e3594d-1087-43ff-b760-7231d4103edf.jpeg'}/>); },
+};
+exports.WithLongSourceUrl = {
+    name: 'Image.WithLongSourceUrl',
+    render: function () { return (<TripieImage_1.default.WithSourceUrl sourceUrl={'https://엄청 긴 이미지 출처 엄청 긴 이미지 출처엄청 긴 이미지 출처엄청 긴 이미지 출처엄청 긴 이미지 출처엄청 긴 이미지 출처엄청 긴 이미지 출처엄청 긴 이미지 출처엄청 긴 이미지 출처엄청 긴 이미지 출처엄청 긴 이미지 출처엄청 긴 이미지 출처'} alt={'https://media.triple.guide/triple-cms/c_fill,f_auto,h_256,w_256/54e3594d-1087-43ff-b760-7231d4103edf.jpeg이미지일수도 있음'} src={'https://media.triple.guide/triple-cms/c_fill,f_auto,h_256,w_256/54e3594d-1087-43ff-b760-7231d4103edf.jpeg'}/>); },
+};
+exports.WithBlurDataUrl = {
+    name: 'Image.WithBlurDataUrl',
+    render: function () {
+        return (<div style={{ width: '24rem' }}>
+        <TripieImage_1.default alt={'https://media.triple.guide/triple-cms/c_fill,f_auto,h_256,w_256/54e3594d-1087-43ff-b760-7231d4103edf.jpeg이미지일수도 있음'} src={'https://media.triple.guide/triple-cms/c_fill,f_auto,h_256,w_256/54e3594d-1087-43ff-b760-7231d4103edf.jpeg'} blurDataURL="data:image/svg+xml;base64,CiAgPHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4IDUnPgogICAgPGZpbHRlciBpZD0nYicgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSdzUkdCJz4KICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0nMScgLz4KICAgIDwvZmlsdGVyPgogICAgPGltYWdlIHByZXNlcnZlQXNwZWN0UmF0aW89J25vbmUnIGZpbHRlcj0ndXJsKCNiKScgeD0nMCcgeT0nMCcgaGVpZ2h0PScxMDAlJyB3aWR0aD0nMTAwJScgCiAgICBocmVmPSdkYXRhOmltYWdlL2F2aWY7YmFzZTY0LC85ai8yd0JEQUFnSUNBZ0pDQWtLQ2drTkRnd09EUk1SRUJBUkV4d1VGaFFXRkJ3ckd4OGJHeDhiS3lZdUpTTWxMaVpFTlM4dk5VUk9RajVDVGw5VlZWOTNjWGVjbk5ILzJ3QkRBUWdJQ0FnSkNBa0tDZ2tORGd3T0RSTVJFQkFSRXh3VUZoUVdGQndyR3g4Ykd4OGJLeVl1SlNNbExpWkVOUzh2TlVST1FqNUNUbDlWVlY5M2NYZWNuTkgvd2dBUkNBQUxBQkFEQVNJQUFoRUJBeEVCLzhRQUZnQUJBUUVBQUFBQUFBQUFBQUFBQUFBQUJnVUgvOFFBRlFFQkFRQUFBQUFBQUFBQUFBQUFBQUFBQkFYLzJnQU1Bd0VBQWhBREVBQUFBS0NuRFhhSjMvL0VBQ0lRQUFFREF3TUZBQUFBQUFBQUFBQUFBQUlCQXdVQUJCSVJFeUV4TWtGaHNmL2FBQWdCQVFBQlB3Q01uYmQ1eHNIV2tISXROVStwUXpFRXp0NVhIZVdLWWdTODFBcVRyd01tU2szb2E0K3c2VmNtVzZmUG12L0VBQm9SQUFJQ0F3QUFBQUFBQUFBQUFBQUFBQUVDQXhFQUVpTC8yZ0FJQVFJQkFUOEFFMHBUWXZmVlovL0VBQm9SQVFBQ0F3RUFBQUFBQUFBQUFBQUFBQUVDQXdBRUVSTC8yZ0FJQVFNQkFUOEFxMXFtYkh5SERQL1onIC8+CiAgPC9zdmc+Cg=="/>
+      </div>);
+    },
+};

package/dist/src/components/TripieSkeleton/Skeleton.jsx

@@ -0,0 +1,30 @@
+"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 skeleton_module_scss_1 = require("./skeleton.module.scss");
+var cx = bind_1.default.bind(skeleton_module_scss_1.default);
+var Skeleton = function (_a) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    return (<div className={cx('skeleton', className)} {...props}>
+      {children}
+    </div>);
+};
+var SkeletonImage = function (_a) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    return (<div className={cx('skeleton', className)} {...props}>
+      {children}
+    </div>);
+};
+Skeleton.Image = SkeletonImage;
+exports.default = Skeleton;

package/dist/src/components/TripieSkeleton/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("./Skeleton"), exports);
+var Skeleton_1 = require("./Skeleton");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return Skeleton_1.default; } });

package/dist/src/components/TripieSkeleton/skeleton.stories.jsx

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var react_1 = require("react");
+var hooks_1 = require("../../hooks");
+var Skeleton_1 = require("./Skeleton");
+var meta = {
+    title: 'tripie-ui/Skeleton',
+    component: Skeleton_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: 'Default Skeleton',
+    args: {
+        children: <Skeleton_1.default></Skeleton_1.default>,
+    },
+};