text: (window.webpackJsonp=window.webpackJsonp||[]).push([[155],{407:function(t,s,a){"use strict";a.r(s);var e=a(12),o=Object(e.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"storybook-레이아웃-💰"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#storybook-레이아웃-💰"}},[t._v("#")]),t._v(" Storybook 레이아웃 💰")]),t._v(" "),a("p",[t._v("Storybook의 Canvas에 Story가 레이아웃 되는 방식을 설정 할 수 있습니다.")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("레이아웃")]),t._v(" "),a("th",[t._v("설명")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("code",[t._v("fullscreen")])]),t._v(" "),a("td",[t._v("Canvas 영역을 꽉 채운 레이아웃")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("padded")])]),t._v(" "),a("td",[t._v("컴포넌트 주변에 패딩을 추가한 레이아웃")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("centered")])]),t._v(" "),a("td",[t._v("정 중앙에 컴포넌트 레이아웃")])])])]),t._v(" "),a("p",[t._v("예를 들어 모든 Story를 중앙에 배치하고자 한다면 "),a("code",[t._v("centered")]),t._v(" 값을 사용합니다.")]),t._v(" "),a("div",{staticClass:"language-jsx line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-jsx"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" parameters "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  layout"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'centered'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br")])]),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("모든 Style 레이아웃 일괄 적용")]),t._v(" "),a("p",[a("code",[t._v(".storybook/preview.js")]),t._v(" 파일을 열어 "),a("code",[t._v("parameters")]),t._v(" 항목에 "),a("code",[t._v("layout")]),t._v("을 설정하면 모든 Story 레이아웃을 일괄 설정할 수 있습니다.")])]),t._v(" "),a("img",{staticClass:"zoom medium-zoom",staticStyle:{width:"100%",height:"auto"},attrs:{src:"https://gblobscdn.gitbook.com/assets%2F-MUfqhMWK9ILIx0SXJTa%2F-MVXotkDzGiIhRqiJhtB%2F-MVXq4343Hd0gdGkJHwg%2Fimage.png?alt=media&token=415e0aca-84d4-455f-be49-bd9e4f1b31f4",alt:""}})])}),[],!1,null,null,null);s.default=o.exports}}]);