[v1.0.0]

- use material-ui for styles - use material-ui's style api - added Header component - added MainButton asset
FallenMapoBridge · Nov 18, 2019 · 9ce0433 · 9ce0433
1 parent b087841
commit 9ce0433
Show file tree

Hide file tree

Showing 19 changed files with 387 additions and 37 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "webpack-manifest-plugin": "^2.0.4"
   },
   "dependencies": {
+    "@material-ui/core": "^4.6.1",
     "@storybook/addon-actions": "^5.2.6",
     "@storybook/addons": "^5.2.6",
     "react": "^16.11.0",

diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,9 @@
 <html lang="ko" dir="ltr">
   <head>
     <meta charset="utf-8">
-    <title>React Boilerplate</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
+    <title>VISQUIT PoS</title>
     <base href="/" />
   </head>
   <body>

diff --git a/src/components/base/Header/Header.css b/src/components/base/Header/Header.css
diff --git a/src/components/base/Header/Header.js b/src/components/base/Header/Header.js
@@ -0,0 +1,28 @@
+import React, { Component } from 'react'
+import AppBar from '@material-ui/core/AppBar'
+import Toolbar from '@material-ui/core/Toolbar'
+import TypoGraphy from '@material-ui/core/Typography'
+
+import { makeStyles } from '@material-ui/core/styles'
+const useStyles = makeStyles({
+  root: {
+    marginBottom: 10
+  }
+})
+
+const Header = (props) => {
+  const classes = useStyles()
+  return (
+    <AppBar className={classes.root} color="primary" position="static">
+      <Toolbar>
+        <TypoGraphy variant="h4"
+          color="inherit"
+        >
+          VISQUIT PoS
+       </TypoGraphy>
+      </Toolbar>
+    </AppBar>
+  )
+}
+
+export default Header
diff --git a/src/components/base/Header/Header.stories.js b/src/components/base/Header/Header.stories.js
@@ -0,0 +1,12 @@
+import React, { useState } from 'react'
+import { storiesOf } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+
+import Header from './Header'
+
+storiesOf('Header', module)
+  .add('default', () => {
+    return (
+      <Header />
+    )
+  })
diff --git a/src/components/base/Header/index.js b/src/components/base/Header/index.js
@@ -0,0 +1,2 @@
+import Header from './Header'
+export default Header
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import Header from './Header'
		export default Header