"use strict";(self.webpackChunk_pfct_purple=self.webpackChunk_pfct_purple||[]).push([[5487],{"./src/components/Loading/index.stories.tsx":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Story1:function(){return Story1},Story2:function(){return Story2},Story3:function(){return Story3},__namedExportsOrder:function(){return __namedExportsOrder}});__webpack_require__("./node_modules/react/index.js");var ___WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/components/Loading/index.ts"),_ProgressBar__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/components/Loading/ProgressBar/index.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/react/jsx-runtime.js");const meta={title:"Component/Loading",component:___WEBPACK_IMPORTED_MODULE_1__.Od,tags:["autodocs"],parameters:{docs:{description:{component:'updated 230523\n\n<a href="https://www.notion.so/Loading-c210da0d1c0b408f9cb6c5925baa9fb7?pvs=4" target="_blank">노션페이지</a>\n<br/>\n사용자에게 진행 상황을 안내하거나 UI를 불러올 때 사용합니다.'}}}};__webpack_exports__.default=meta;const Story1={render:props=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_1__.$j,{...props}),args:{colorType:"white"},parameters:{docs:{description:{story:"진행 상황을 예측할 수 없을 때 사용합니다."}}},storyName:"스피너 로딩"},Story2={render:props=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div",{style:{position:"relative"},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_ProgressBar__WEBPACK_IMPORTED_MODULE_2__.k,{...props})}),args:{progress:20,colorType:"pink"},parameters:{docs:{description:{story:"진행 상황을 예측할 수 있을 때 사용합니다."}}},storyName:"프로그레스바"},Story3={render:props=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div",{style:{background:"white",width:"500px",height:"300px",padding:"20px"},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(___WEBPACK_IMPORTED_MODULE_1__.Od.Layout,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_1__.Od,{...props}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_1__.Od,{variant:"text",width:150,height:50}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_1__.Od,{variant:"rect",height:100})]})}),args:{variant:"circle"},parameters:{docs:{description:{story:"표시될 정보의 대략적인 형태를 미리 보여주어 사용자가 다음 화면을 예상할 수 있도록 합니다."}}},storyName:"스켈레톤"};Story1.parameters={...Story1.parameters,docs:{...Story1.parameters?.docs,source:{originalSource:"{\n  render: props => <Spinner {...props} />,\n  args: {\n    colorType: 'white'\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '진행 상황을 예측할 수 없을 때 사용합니다.'\n      }\n    }\n  }\n}",...Story1.parameters?.docs?.source}}},Story2.parameters={...Story2.parameters,docs:{...Story2.parameters?.docs,source:{originalSource:"{\n  render: props => <div style={{\n    position: 'relative'\n  }}>\n            <ProgressBar {...props} />\n        </div>,\n  args: {\n    progress: 20,\n    colorType: 'pink'\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '진행 상황을 예측할 수 있을 때 사용합니다.'\n      }\n    }\n  }\n}",...Story2.parameters?.docs?.source}}},Story3.parameters={...Story3.parameters,docs:{...Story3.parameters?.docs,source:{originalSource:"{\n  render: props => <div style={{\n    background: 'white',\n    width: '500px',\n    height: '300px',\n    padding: '20px'\n  }}>\n            <Skeleton.Layout>\n                <Skeleton {...props} />\n                <br />\n                <Skeleton variant=\"text\" width={150} height={50} />\n                <br />\n                <Skeleton variant=\"rect\" height={100} />\n            </Skeleton.Layout>\n        </div>,\n  args: {\n    variant: 'circle'\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '표시될 정보의 대략적인 형태를 미리 보여주어 사용자가 다음 화면을 예상할 수 있도록 합니다.'\n      }\n    }\n  }\n}",...Story3.parameters?.docs?.source}}};const __namedExportsOrder=["Story1","Story2","Story3"]}}]);