Merge pull request #18 from Gosrock/chanjin

Chanjin

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 };

src/stories/Container/Container.css

@@ -0,0 +1,44 @@
+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;
+}

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 (
+    <>
+      <div className="body-wrap">
+        <div className="container">
+          <div className="inner-container">
+            <div className="vertical-grid">
+              <div style={{ color: 'white' }}>grid1</div>
+              <div style={{ color: 'white' }}>grid2</div>
+              <div style={{ color: 'white' }}>grid3</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+Container.propTypes = {
+  /**
+   * Button contents
+   */
+  children: PropTypes.node
+};
+
+Container.defaultProps = {
+  children: undefined
+};

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 => (
+      <div style={{ backgroundColor: 'black' }}>
+        <Story />
+      </div>
+    )
+  ]
+};
+
+const Template = args => <Container {...args} />;
+
+export const Default = Template.bind({});

src/stories/Layout/TicketBody/TicketBody.css

@@ -0,0 +1,6 @@
+.TicketBody {
+  flex-grow: 2;
+  order: -1;
+  background-color: white;
+  display: flex;
+}

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 <div className="TicketBody">{children}</div>;
+};
+
+TicketBody.propTypes = {
+  /**
+   * any contents to display
+   */
+  children: PropTypes.node
+};

src/stories/Layout/TicketBodyHeader/TicketBodyHeader.css

@@ -0,0 +1,6 @@
+.TicketBodyHeader {
+  flex-grow: 2;
+  order: 0;
+  display: flex;
+  background-color: rgb(138, 56, 56);
+}

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 <div className="TicketBodyHeader">{children}</div>;
+};
+
+TicketBodyHeader.propTypes = {
+  /**
+   * any contents to display
+   */
+  children: PropTypes.node
+};

src/stories/Layout/TicketBottom/TicketBottom.css

@@ -0,0 +1,6 @@
+.TicketBottom {
+  flex-grow: 2;
+  order: 1;
+  display: flex;
+  background-color: rgb(96, 20, 227);
+}

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 <div className="TicketBottom">{children}</div>;
+};
+
+TicketBottom.propTypes = {
+  /**
+   * any contents to display
+   */
+  children: PropTypes.node
+};

src/stories/Layout/TicketContainer/TicketContainer.css

@@ -0,0 +1,51 @@
+/* body {
+  background-color: #040404;
+} */
+.Ticket-Container-Wrap {
+  /* veiwport fit */
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.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; */
+}
+
+.Ticket-Inner-Container {
+  box-sizing: border-box;
+  height: 100%;
+  padding: 5% 5%;
+  display: flex;
+  flex-direction: column;
+}
+
+/* @media screen and (min-width: 480px) {
+  .Ticket-Container {
+    min-width: 375px;
+    border-radius: 15px;
+    height: 90%;
+    margin: 0 200px;
+  }
+}
+@media screen and (min-width: 774px) {
+  .Ticket-Inner-Container {
+    margin: 40px;
+  }
+} */
+
+/* .vertical-grid {
+  height: 600px;
+  display: grid;
+  grid-template-rows: 1fr 4fr 1fr;
+} */

src/stories/Layout/TicketContainer/TicketContainer.jsx

@@ -0,0 +1,50 @@
+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';
+
+/**
+ * Primary UI component for user interaction
+ */
+export const TicketContainer = ({ children }) => {
+  console.log(children);
+
+  return (
+    <div className="Ticket-Container">
+      <div className="Ticket-Inner-Container">{children}</div>
+    </div>
+  );
+};
+
+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: [<TicketTop />]
+// };

src/stories/Layout/TicketContainer/TicketContainer.stories.jsx

@@ -0,0 +1,103 @@
+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: (
+    <TicketTop>
+      <div style={{ display: 'inline' }}>TicketTop</div>
+    </TicketTop>
+  ),
+  TicketBodyHeader: (
+    <TicketBodyHeader>TicketBodyHeader 비율을 2로</TicketBodyHeader>
+  ),
+  TicketBody: (
+    <TicketBody>
+      <div style={{ width: '100%', height: '100%' }}>TicketBody 비율을 2로</div>
+    </TicketBody>
+  ),
+  TicketBottom: <TicketBottom>TicketBottom 비율을 2로</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 (
+    <div className="Ticket-Container-Wrap">
+      <TicketContainer {...args} />
+    </div>
+  );
+};
+
+export const Default = Template.bind({});
+// Default.args = {
+//   children: <TicketBody></TicketBody>
+// };
+// export const 카카오페이송금 = Template.bind({});
+// 카카오페이송금.args = {
+//   label: '또는, 카카오페이로 송금하기',
+//   fontColor: 'gray',
+//   arrowColor: 'yellow',
+//   arrowCircleBackground: false
+// };
+
+export const 티켓화면 = Template.bind({});
+티켓화면.args = {
+  children: ['TicketTop', 'TicketBottom', 'TicketBody']
+};
+
+// 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
+// };