From 1e5c2183f3d71b4efbd7a40f3e05f845253b3955 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8E=E1=85=A1=E1=86=AB=E1=84=8C?= =?UTF-8?q?=E1=85=B5=E1=86=AB?= Date: Sat, 22 Jan 2022 17:21:51 +0900 Subject: [PATCH 1/4] style(layout): add TicketContainer , not add css file --- src/stories/Layout/TicketBody/TicketBody.jsx | 14 +++ .../TicketBodyHeader/TicketBodyHeader.jsx | 14 +++ .../Layout/TicketBottom/TicketBottom.jsx | 14 +++ .../TicketContainer/TicketContainer.css | 48 ++++++++++ .../TicketContainer/TicketContainer.jsx | 51 +++++++++++ .../TicketContainer.stories.jsx | 89 +++++++++++++++++++ src/stories/Layout/TicketTop/TicketTop.jsx | 14 +++ 7 files changed, 244 insertions(+) create mode 100644 src/stories/Layout/TicketBody/TicketBody.jsx create mode 100644 src/stories/Layout/TicketBodyHeader/TicketBodyHeader.jsx create mode 100644 src/stories/Layout/TicketBottom/TicketBottom.jsx create mode 100644 src/stories/Layout/TicketContainer/TicketContainer.css create mode 100644 src/stories/Layout/TicketContainer/TicketContainer.jsx create mode 100644 src/stories/Layout/TicketContainer/TicketContainer.stories.jsx create mode 100644 src/stories/Layout/TicketTop/TicketTop.jsx diff --git a/src/stories/Layout/TicketBody/TicketBody.jsx b/src/stories/Layout/TicketBody/TicketBody.jsx new file mode 100644 index 0000000..b86bf84 --- /dev/null +++ b/src/stories/Layout/TicketBody/TicketBody.jsx @@ -0,0 +1,14 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +// import './TicketBody.css'; + +export const TicketBody = ({ children }) => { + return
2222
; +}; + +TicketBody.propTypes = { + /** + * any contents to display + */ + children: PropTypes.node +}; diff --git a/src/stories/Layout/TicketBodyHeader/TicketBodyHeader.jsx b/src/stories/Layout/TicketBodyHeader/TicketBodyHeader.jsx new file mode 100644 index 0000000..f5ace10 --- /dev/null +++ b/src/stories/Layout/TicketBodyHeader/TicketBodyHeader.jsx @@ -0,0 +1,14 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +// import './TicketBodyHeader.css'; + +export const TicketBodyHeader = ({ children }) => { + return
1234
; +}; + +TicketBodyHeader.propTypes = { + /** + * any contents to display + */ + children: PropTypes.node +}; diff --git a/src/stories/Layout/TicketBottom/TicketBottom.jsx b/src/stories/Layout/TicketBottom/TicketBottom.jsx new file mode 100644 index 0000000..ff4a561 --- /dev/null +++ b/src/stories/Layout/TicketBottom/TicketBottom.jsx @@ -0,0 +1,14 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +// import './TicketBottom.css'; + +export const TicketBottom = ({ children }) => { + return
1234
; +}; + +TicketBottom.propTypes = { + /** + * any contents to display + */ + children: PropTypes.node +}; diff --git a/src/stories/Layout/TicketContainer/TicketContainer.css b/src/stories/Layout/TicketContainer/TicketContainer.css new file mode 100644 index 0000000..0885048 --- /dev/null +++ b/src/stories/Layout/TicketContainer/TicketContainer.css @@ -0,0 +1,48 @@ +.TicketContainer { + background-color: transparent; /* Green */ + border: none; + color: white; + text-align: center; + text-decoration: none; + /* justify-content: center; */ + align-items: center; + + display: flex; + /* position: relative; */ + /* position: relative; */ +} + +.TicketContainer--medium { + font-size: 18px; + line-height: 20px; + /* vertical-align: middle; */ + /* padding: 11px 20px; */ +} + +.TicketContainer--font-white { + color: white; +} + +.TicketContainer--font-gray { + color: #b6b7b8; +} + +/* .TicketContainer-center { + position: absolute; + top: 50%; +} */ + +.TicketContainer--circle { + justify-content: center; + align-items: center; + + display: flex; + height: 32px; + width: 32px; + background: black; + border-radius: 16px; + -moz-border-radius: 16px; + -webkit-border-radius: 16px; + /* margin-left: 25%; + margin-top: 25%; */ +} diff --git a/src/stories/Layout/TicketContainer/TicketContainer.jsx b/src/stories/Layout/TicketContainer/TicketContainer.jsx new file mode 100644 index 0000000..014a6da --- /dev/null +++ b/src/stories/Layout/TicketContainer/TicketContainer.jsx @@ -0,0 +1,51 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { TicketBody } from '../TicketBody/TicketBody.jsx'; +import { TicketBodyHeader } from '../TicketBodyHeader/TicketBodyHeader.jsx'; +import { TicketTop } from '../TicketTop/TicketTop.jsx'; +import { TicketBottom } from '../TicketBottom/TicketBottom.jsx'; + +// import './TicketContainer.css'; +// import { ReactComponent as GoFrontArrow } from './GoFrontArrow.svg'; +/** + * Primary UI component for user interaction + */ +export const TicketContainer = ({ children }) => { + // const mode = primary + // ? 'storybook-button--primary' + // : 'storybook-button--secondary'; + return
{children}
; +}; + +// const ArrayOfChildrenComponents = ; +// const fieldType = ; + +TicketContainer.propTypes = { + /** + * children components need + */ + children: PropTypes.oneOfType([ + PropTypes.arrayOf( + PropTypes.shape({ + type: PropTypes.oneOf([ + TicketBody, + TicketBodyHeader, + TicketTop, + TicketBottom + ]) + }) + ), // array of fields + PropTypes.shape({ + type: PropTypes.oneOf([ + TicketBody, + TicketBodyHeader, + TicketTop, + TicketBottom + ]) + }) // singular field + ]).isRequired +}; + +// TicketContainer.defaultProps = { +// children: <>{/* */} +// }; diff --git a/src/stories/Layout/TicketContainer/TicketContainer.stories.jsx b/src/stories/Layout/TicketContainer/TicketContainer.stories.jsx new file mode 100644 index 0000000..82c9db2 --- /dev/null +++ b/src/stories/Layout/TicketContainer/TicketContainer.stories.jsx @@ -0,0 +1,89 @@ +import React from 'react'; + +import { TicketContainer } from './TicketContainer'; +import { TicketBody } from '../TicketBody/TicketBody'; +import { TicketBodyHeader } from '../TicketBodyHeader/TicketBodyHeader.jsx'; +import { TicketTop } from '../TicketTop/TicketTop'; +import { TicketBottom } from '../TicketBottom/TicketBottom'; + +const TicketElement = { + TicketTop: , + TicketBodyHeader: , + TicketBody: , + TicketBottom: +}; +export default { + title: 'Layout/TicketContainer', + component: TicketContainer, + argTypes: { + children: { + options: Object.keys(TicketElement), + mapping: TicketElement, + control: { + type: 'check', + labels: { + TicketTop: 'TicketTop', + TicketBodyHeader: 'TicketBodyHeader', + TicketBody: 'TicketBody', + TicketBottom: 'TicketBottom' + } + } + } + } +}; + +const Template = args => { + if (Array.isArray(args.children)) { + args = { + ...args, + children: args.children.map(label => TicketElement[label]) + }; + } + return ; +}; + +export const Default = Template.bind({}); +// Default.args = { +// children: +// }; +// export const 카카오페이송금 = Template.bind({}); +// 카카오페이송금.args = { +// label: '또는, 카카오페이로 송금하기', +// fontColor: 'gray', +// arrowColor: 'yellow', +// arrowCircleBackground: false +// }; + +export const 입금완료 = Template.bind({}); +입금완료.args = { + children: +}; + +// export const 휴대폰인증하러가기 = Template.bind({}); +// 휴대폰인증하러가기.args = { +// label: '휴대폰 인증하러 가기', +// fontColor: 'white', +// arrowColor: 'white' +// }; +// TicketContainer.propTypes = { +// /** +// * Button contents +// */ +// label: PropTypes.string.isRequired, +// /** +// * Optional click handler +// */ +// onClick: PropTypes.func, +// /** +// * 폰트의 컬러를 변경할수 있습니다. 기본은 white 입니다, +// */ +// fontColor: PropTypes.oneOf(['white', 'gray']), +// /** +// * 화살표의 색을 변경할수 있습니다. 기본은 white 입니다, +// */ +// arrowColor: PropTypes.oneOf(['white', 'yellow']), +// /** +// * 화살표 배경에 원을 지정할 수 있습니다. 기본은 true 입니다, +// */ +// arrowCircleBackground: PropTypes.bool +// }; diff --git a/src/stories/Layout/TicketTop/TicketTop.jsx b/src/stories/Layout/TicketTop/TicketTop.jsx new file mode 100644 index 0000000..5e0cad4 --- /dev/null +++ b/src/stories/Layout/TicketTop/TicketTop.jsx @@ -0,0 +1,14 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +// import './TicketTop.css'; + +export const TicketTop = ({ children }) => { + return
1234444
; +}; + +TicketTop.propTypes = { + /** + * any contents to display + */ + children: PropTypes.node +}; From 29f4020aa10c83f2886687bf199bd49772d8eead Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=95=9C=EA=B7=9C=EC=A7=84?= Date: Sat, 22 Jan 2022 17:45:47 +0900 Subject: [PATCH 2/4] test(container): container story added --- package-lock.json | 1 + src/index.js | 4 +- src/stories/Container/Container.css | 45 +++++++++++++++++++++ src/stories/Container/Container.jsx | 38 +++++++++++++++++ src/stories/Container/Container.stories.jsx | 21 ++++++++++ 5 files changed, 107 insertions(+), 2 deletions(-) create mode 100644 src/stories/Container/Container.css create mode 100644 src/stories/Container/Container.jsx create mode 100644 src/stories/Container/Container.stories.jsx diff --git a/package-lock.json b/package-lock.json index b205401..aac17e3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "gosrock-storybook", "version": "0.0.0-development", "license": "MIT", "dependencies": { diff --git a/src/index.js b/src/index.js index d5728ce..c5f9f85 100644 --- a/src/index.js +++ b/src/index.js @@ -6,5 +6,5 @@ import { GoBackButton } from './stories/GoBackButton/GoBackButton.jsx'; import { Header } from './stories/Header/Header.jsx'; import { Page } from './stories/PageTest/Page.jsx'; import { GoFrontButton } from './stories/GoFrontButton/GoFrontButton.jsx'; - -export { Button, Header, Page, GoBackButton, GoFrontButton }; +import { Container } from './stories/Container/Container'; +export { Button, Header, Page, GoBackButton, GoFrontButton, Container }; diff --git a/src/stories/Container/Container.css b/src/stories/Container/Container.css new file mode 100644 index 0000000..f5827d0 --- /dev/null +++ b/src/stories/Container/Container.css @@ -0,0 +1,45 @@ +body { + background-color: #040404; + } + .body-wrap { + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + } + .container { + height: 100%; + min-height: 660px; + width: 100%; + min-width: 320px; + max-width: 600px; + background-color: #121212; + margin: 0 auto; + } + + .inner-container { + height: calc(100% - 80px); + margin: 40px 20px; + } + + @media screen and (min-width: 480px) { + .container { + min-width: 375px; + border-radius: 15px; + height: 90%; + margin: 0 200px; + } + } + @media screen and (min-width: 774px) { + .inner-container { + margin: 40px; + } + } + + .vertical-grid { + height: 600px; + display: grid; + grid-template-rows: 1fr 4fr 1fr; + } + \ No newline at end of file diff --git a/src/stories/Container/Container.jsx b/src/stories/Container/Container.jsx new file mode 100644 index 0000000..cad4c0c --- /dev/null +++ b/src/stories/Container/Container.jsx @@ -0,0 +1,38 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import './Container.css'; + +/** + * Primary UI component for user interaction + */ +export const Container = ({ children, ...props }) => { + // const mode = primary + // ? 'storybook-button--primary' + // : 'storybook-button--secondary'; + return ( + <> +
+
+
+
+
grid1
+
grid2
+
grid3
+
+
+
+
+ + ); +}; + +Container.propTypes = { + /** + * Button contents + */ + children: PropTypes.node +}; + +Container.defaultProps = { + children: undefined +}; diff --git a/src/stories/Container/Container.stories.jsx b/src/stories/Container/Container.stories.jsx new file mode 100644 index 0000000..dadd54a --- /dev/null +++ b/src/stories/Container/Container.stories.jsx @@ -0,0 +1,21 @@ +import React from 'react'; + +import { Container } from './Container'; + +export default { + title: 'Container', + component: Container, + + argTypes: {}, + decorators: [ + Story => ( +
+ +
+ ) + ] +}; + +const Template = args => ; + +export const Default = Template.bind({}); From 66f18df1a38d1e38b1f65701fa7c1da707b160e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8E=E1=85=A1=E1=86=AB=E1=84=8C?= =?UTF-8?q?=E1=85=B5=E1=86=AB?= Date: Sat, 22 Jan 2022 19:24:08 +0900 Subject: [PATCH 3/4] style(src/layout): before merge commit --- src/stories/Layout/TicketBody/TicketBody.jsx | 2 +- src/stories/Layout/TicketBodyHeader/TicketBodyHeader.jsx | 2 +- src/stories/Layout/TicketBottom/TicketBottom.jsx | 2 +- src/stories/Layout/TicketContainer/TicketContainer.jsx | 1 + src/stories/Layout/TicketTop/TicketTop.jsx | 2 +- 5 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/stories/Layout/TicketBody/TicketBody.jsx b/src/stories/Layout/TicketBody/TicketBody.jsx index b86bf84..d4c04be 100644 --- a/src/stories/Layout/TicketBody/TicketBody.jsx +++ b/src/stories/Layout/TicketBody/TicketBody.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; // import './TicketBody.css'; export const TicketBody = ({ children }) => { - return
2222
; + return
2222
; }; TicketBody.propTypes = { diff --git a/src/stories/Layout/TicketBodyHeader/TicketBodyHeader.jsx b/src/stories/Layout/TicketBodyHeader/TicketBodyHeader.jsx index f5ace10..73b37be 100644 --- a/src/stories/Layout/TicketBodyHeader/TicketBodyHeader.jsx +++ b/src/stories/Layout/TicketBodyHeader/TicketBodyHeader.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; // import './TicketBodyHeader.css'; export const TicketBodyHeader = ({ children }) => { - return
1234
; + return
1234
; }; TicketBodyHeader.propTypes = { diff --git a/src/stories/Layout/TicketBottom/TicketBottom.jsx b/src/stories/Layout/TicketBottom/TicketBottom.jsx index ff4a561..3b31af1 100644 --- a/src/stories/Layout/TicketBottom/TicketBottom.jsx +++ b/src/stories/Layout/TicketBottom/TicketBottom.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; // import './TicketBottom.css'; export const TicketBottom = ({ children }) => { - return
1234
; + return
1234
; }; TicketBottom.propTypes = { diff --git a/src/stories/Layout/TicketContainer/TicketContainer.jsx b/src/stories/Layout/TicketContainer/TicketContainer.jsx index 014a6da..43c5780 100644 --- a/src/stories/Layout/TicketContainer/TicketContainer.jsx +++ b/src/stories/Layout/TicketContainer/TicketContainer.jsx @@ -11,6 +11,7 @@ import { TicketBottom } from '../TicketBottom/TicketBottom.jsx'; * Primary UI component for user interaction */ export const TicketContainer = ({ children }) => { + console.log(children); // const mode = primary // ? 'storybook-button--primary' // : 'storybook-button--secondary'; diff --git a/src/stories/Layout/TicketTop/TicketTop.jsx b/src/stories/Layout/TicketTop/TicketTop.jsx index 5e0cad4..19da221 100644 --- a/src/stories/Layout/TicketTop/TicketTop.jsx +++ b/src/stories/Layout/TicketTop/TicketTop.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; // import './TicketTop.css'; export const TicketTop = ({ children }) => { - return
1234444
; + return
1234444
; }; TicketTop.propTypes = { From 8e03db69d47bc67b5bb5785a7c38448550be9292 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8E=E1=85=A1=E1=86=AB=E1=84=8C?= =?UTF-8?q?=E1=85=B5=E1=86=AB?= Date: Sat, 22 Jan 2022 22:40:41 +0900 Subject: [PATCH 4/4] fix: add TicketContainer , Ticket header,Body,Bottom,Top --- src/index.js | 4 +- src/stories/Container/Container.css | 79 +++++++++---------- src/stories/Layout/TicketBody/TicketBody.css | 6 ++ src/stories/Layout/TicketBody/TicketBody.jsx | 4 +- .../TicketBodyHeader/TicketBodyHeader.css | 6 ++ .../TicketBodyHeader/TicketBodyHeader.jsx | 4 +- .../Layout/TicketBottom/TicketBottom.css | 6 ++ .../Layout/TicketBottom/TicketBottom.jsx | 4 +- .../TicketContainer/TicketContainer.css | 79 ++++++++++--------- .../TicketContainer/TicketContainer.jsx | 18 ++--- .../TicketContainer.stories.jsx | 30 +++++-- src/stories/Layout/TicketTop/TicketTop.css | 6 ++ src/stories/Layout/TicketTop/TicketTop.jsx | 4 +- 13 files changed, 144 insertions(+), 106 deletions(-) create mode 100644 src/stories/Layout/TicketBody/TicketBody.css create mode 100644 src/stories/Layout/TicketBodyHeader/TicketBodyHeader.css create mode 100644 src/stories/Layout/TicketBottom/TicketBottom.css create mode 100644 src/stories/Layout/TicketTop/TicketTop.css diff --git a/src/index.js b/src/index.js index c5f9f85..29dc440 100644 --- a/src/index.js +++ b/src/index.js @@ -6,5 +6,5 @@ import { GoBackButton } from './stories/GoBackButton/GoBackButton.jsx'; import { Header } from './stories/Header/Header.jsx'; import { Page } from './stories/PageTest/Page.jsx'; import { GoFrontButton } from './stories/GoFrontButton/GoFrontButton.jsx'; -import { Container } from './stories/Container/Container'; -export { Button, Header, Page, GoBackButton, GoFrontButton, Container }; +// import { Container } from './stories/Container/Container'; +export { Button, Header, Page, GoBackButton, GoFrontButton }; diff --git a/src/stories/Container/Container.css b/src/stories/Container/Container.css index f5827d0..f5868ff 100644 --- a/src/stories/Container/Container.css +++ b/src/stories/Container/Container.css @@ -1,45 +1,44 @@ body { - background-color: #040404; - } - .body-wrap { - width: 100vw; - height: 100vh; - display: flex; - justify-content: center; - align-items: center; - } + background-color: #040404; +} +.body-wrap { + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} +.container { + height: 100%; + min-height: 660px; + width: 100%; + min-width: 320px; + max-width: 600px; + background-color: #121212; + margin: 0 auto; +} + +.inner-container { + height: calc(100% - 80px); + margin: 40px 20px; +} + +@media screen and (min-width: 480px) { .container { - height: 100%; - min-height: 660px; - width: 100%; - min-width: 320px; - max-width: 600px; - background-color: #121212; - margin: 0 auto; + min-width: 375px; + border-radius: 15px; + height: 90%; + margin: 0 200px; } - +} +@media screen and (min-width: 774px) { .inner-container { - height: calc(100% - 80px); - margin: 40px 20px; - } - - @media screen and (min-width: 480px) { - .container { - min-width: 375px; - border-radius: 15px; - height: 90%; - margin: 0 200px; - } - } - @media screen and (min-width: 774px) { - .inner-container { - margin: 40px; - } - } - - .vertical-grid { - height: 600px; - display: grid; - grid-template-rows: 1fr 4fr 1fr; + margin: 40px; } - \ No newline at end of file +} + +.vertical-grid { + height: 600px; + display: grid; + grid-template-rows: 1fr 4fr 1fr; +} diff --git a/src/stories/Layout/TicketBody/TicketBody.css b/src/stories/Layout/TicketBody/TicketBody.css new file mode 100644 index 0000000..cb27087 --- /dev/null +++ b/src/stories/Layout/TicketBody/TicketBody.css @@ -0,0 +1,6 @@ +.TicketBody { + flex-grow: 2; + order: -1; + background-color: white; + display: flex; +} diff --git a/src/stories/Layout/TicketBody/TicketBody.jsx b/src/stories/Layout/TicketBody/TicketBody.jsx index d4c04be..fc71637 100644 --- a/src/stories/Layout/TicketBody/TicketBody.jsx +++ b/src/stories/Layout/TicketBody/TicketBody.jsx @@ -1,9 +1,9 @@ import React from 'react'; import PropTypes from 'prop-types'; -// import './TicketBody.css'; +import './TicketBody.css'; export const TicketBody = ({ children }) => { - return
2222
; + return
{children}
; }; TicketBody.propTypes = { diff --git a/src/stories/Layout/TicketBodyHeader/TicketBodyHeader.css b/src/stories/Layout/TicketBodyHeader/TicketBodyHeader.css new file mode 100644 index 0000000..e5089a6 --- /dev/null +++ b/src/stories/Layout/TicketBodyHeader/TicketBodyHeader.css @@ -0,0 +1,6 @@ +.TicketBodyHeader { + flex-grow: 2; + order: 0; + display: flex; + background-color: rgb(138, 56, 56); +} diff --git a/src/stories/Layout/TicketBodyHeader/TicketBodyHeader.jsx b/src/stories/Layout/TicketBodyHeader/TicketBodyHeader.jsx index 73b37be..7090262 100644 --- a/src/stories/Layout/TicketBodyHeader/TicketBodyHeader.jsx +++ b/src/stories/Layout/TicketBodyHeader/TicketBodyHeader.jsx @@ -1,9 +1,9 @@ import React from 'react'; import PropTypes from 'prop-types'; -// import './TicketBodyHeader.css'; +import './TicketBodyHeader.css'; export const TicketBodyHeader = ({ children }) => { - return
1234
; + return
{children}
; }; TicketBodyHeader.propTypes = { diff --git a/src/stories/Layout/TicketBottom/TicketBottom.css b/src/stories/Layout/TicketBottom/TicketBottom.css new file mode 100644 index 0000000..7f5e64b --- /dev/null +++ b/src/stories/Layout/TicketBottom/TicketBottom.css @@ -0,0 +1,6 @@ +.TicketBottom { + flex-grow: 2; + order: 1; + display: flex; + background-color: rgb(96, 20, 227); +} diff --git a/src/stories/Layout/TicketBottom/TicketBottom.jsx b/src/stories/Layout/TicketBottom/TicketBottom.jsx index 3b31af1..2b19fa7 100644 --- a/src/stories/Layout/TicketBottom/TicketBottom.jsx +++ b/src/stories/Layout/TicketBottom/TicketBottom.jsx @@ -1,9 +1,9 @@ import React from 'react'; import PropTypes from 'prop-types'; -// import './TicketBottom.css'; +import './TicketBottom.css'; export const TicketBottom = ({ children }) => { - return
1234
; + return
{children}
; }; TicketBottom.propTypes = { diff --git a/src/stories/Layout/TicketContainer/TicketContainer.css b/src/stories/Layout/TicketContainer/TicketContainer.css index 0885048..6afa035 100644 --- a/src/stories/Layout/TicketContainer/TicketContainer.css +++ b/src/stories/Layout/TicketContainer/TicketContainer.css @@ -1,48 +1,51 @@ -.TicketContainer { - background-color: transparent; /* Green */ - border: none; - color: white; - text-align: center; - text-decoration: none; - /* justify-content: center; */ - align-items: center; - +/* body { + background-color: #040404; +} */ +.Ticket-Container-Wrap { + /* veiwport fit */ + width: 100vw; + height: 100vh; display: flex; - /* position: relative; */ - /* position: relative; */ + justify-content: center; + align-items: center; } -.TicketContainer--medium { - font-size: 18px; - line-height: 20px; - /* vertical-align: middle; */ - /* padding: 11px 20px; */ +.Ticket-Container { + height: 90%; + /* min-height: 560px; */ + max-height: 800px; + width: 90%; + /* min-width: 320px; */ + max-width: 600px; + background-color: #121212; + /* margin: 0 auto; */ + /* border-radius: 15px; */ } -.TicketContainer--font-white { - color: white; +.Ticket-Inner-Container { + box-sizing: border-box; + height: 100%; + padding: 5% 5%; + display: flex; + flex-direction: column; } -.TicketContainer--font-gray { - color: #b6b7b8; +/* @media screen and (min-width: 480px) { + .Ticket-Container { + min-width: 375px; + border-radius: 15px; + height: 90%; + margin: 0 200px; + } } - -/* .TicketContainer-center { - position: absolute; - top: 50%; +@media screen and (min-width: 774px) { + .Ticket-Inner-Container { + margin: 40px; + } } */ -.TicketContainer--circle { - justify-content: center; - align-items: center; - - display: flex; - height: 32px; - width: 32px; - background: black; - border-radius: 16px; - -moz-border-radius: 16px; - -webkit-border-radius: 16px; - /* margin-left: 25%; - margin-top: 25%; */ -} +/* .vertical-grid { + height: 600px; + display: grid; + grid-template-rows: 1fr 4fr 1fr; +} */ diff --git a/src/stories/Layout/TicketContainer/TicketContainer.jsx b/src/stories/Layout/TicketContainer/TicketContainer.jsx index 43c5780..b0471a7 100644 --- a/src/stories/Layout/TicketContainer/TicketContainer.jsx +++ b/src/stories/Layout/TicketContainer/TicketContainer.jsx @@ -4,22 +4,20 @@ import { TicketBody } from '../TicketBody/TicketBody.jsx'; import { TicketBodyHeader } from '../TicketBodyHeader/TicketBodyHeader.jsx'; import { TicketTop } from '../TicketTop/TicketTop.jsx'; import { TicketBottom } from '../TicketBottom/TicketBottom.jsx'; +import './TicketContainer.css'; -// import './TicketContainer.css'; -// import { ReactComponent as GoFrontArrow } from './GoFrontArrow.svg'; /** * Primary UI component for user interaction */ export const TicketContainer = ({ children }) => { console.log(children); - // const mode = primary - // ? 'storybook-button--primary' - // : 'storybook-button--secondary'; - return
{children}
; -}; -// const ArrayOfChildrenComponents = ; -// const fieldType = ; + return ( +
+
{children}
+
+ ); +}; TicketContainer.propTypes = { /** @@ -48,5 +46,5 @@ TicketContainer.propTypes = { }; // TicketContainer.defaultProps = { -// children: <>{/* */} +// children: [] // }; diff --git a/src/stories/Layout/TicketContainer/TicketContainer.stories.jsx b/src/stories/Layout/TicketContainer/TicketContainer.stories.jsx index 82c9db2..02750d6 100644 --- a/src/stories/Layout/TicketContainer/TicketContainer.stories.jsx +++ b/src/stories/Layout/TicketContainer/TicketContainer.stories.jsx @@ -7,10 +7,20 @@ import { TicketTop } from '../TicketTop/TicketTop'; import { TicketBottom } from '../TicketBottom/TicketBottom'; const TicketElement = { - TicketTop: , - TicketBodyHeader: , - TicketBody: , - TicketBottom: + TicketTop: ( + +
TicketTop
+ + ), + TicketBodyHeader: ( + TicketBodyHeader 비율을 2로 + ), + TicketBody: ( + +
TicketBody 비율을 2로
+ + ), + TicketBottom: TicketBottom 비율을 2로 }; export default { title: 'Layout/TicketContainer', @@ -39,7 +49,11 @@ const Template = args => { children: args.children.map(label => TicketElement[label]) }; } - return ; + return ( +
+ +
+ ); }; export const Default = Template.bind({}); @@ -54,9 +68,9 @@ export const Default = Template.bind({}); // arrowCircleBackground: false // }; -export const 입금완료 = Template.bind({}); -입금완료.args = { - children: +export const 티켓화면 = Template.bind({}); +티켓화면.args = { + children: ['TicketTop', 'TicketBottom', 'TicketBody'] }; // export const 휴대폰인증하러가기 = Template.bind({}); diff --git a/src/stories/Layout/TicketTop/TicketTop.css b/src/stories/Layout/TicketTop/TicketTop.css new file mode 100644 index 0000000..a08ab53 --- /dev/null +++ b/src/stories/Layout/TicketTop/TicketTop.css @@ -0,0 +1,6 @@ +.TicketTop { + flex-grow: 0.5; + order: -2; + display: flex; + background-color: rgb(232, 232, 13); +} diff --git a/src/stories/Layout/TicketTop/TicketTop.jsx b/src/stories/Layout/TicketTop/TicketTop.jsx index 19da221..d473ad5 100644 --- a/src/stories/Layout/TicketTop/TicketTop.jsx +++ b/src/stories/Layout/TicketTop/TicketTop.jsx @@ -1,9 +1,9 @@ import React from 'react'; import PropTypes from 'prop-types'; -// import './TicketTop.css'; +import './TicketTop.css'; export const TicketTop = ({ children }) => { - return
1234444
; + return
{children}
; }; TicketTop.propTypes = {