Design RoomPage: add Roomname

jtjun · Jun 19, 2019 · 9ff683a · 9ff683a
1 parent 83d174a
commit 9ff683a
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 6 deletions.
diff --git a/frontend/src/components/atoms/Block/index.js b/frontend/src/components/atoms/Block/index.js
@@ -1,11 +1,18 @@
 import styled from 'styled-components'
+import PropTypes from 'prop-types'
+
+const alignItems = ({direction}) => (
+  direction === 'column' ?
+  'center' : 'baseline'
+)
 
 const Block = styled.div`
   background-color: ${props => props.transparent ? "transparent" : "white"};
   border: ${props => props.transparent ? "none" : "thin solid #bfbfbf"};
   display: flex;
-  flex-direction: ${props => props.direction || "column"};
-  align-items: center;
+  flex-direction: ${({direction}) => direction};
+  justify-content: space-between;
+  align-items: ${alignItems};
   margin: 0.5em auto 0;
   padding: 1em 20px;
   max-width: 310px;
@@ -17,4 +24,8 @@ const Block = styled.div`
   }
 `
 
+Block.defaultProps = {
+  direction: 'column',
+}
+
 export default Block
diff --git a/frontend/src/components/pages/RoomPage/index.js b/frontend/src/components/pages/RoomPage/index.js
@@ -51,14 +51,33 @@ const RoomPage = props => {
       <Header />      
       <Block transparent>
         <CopyToClipboard text={window.location.href} onCopy={() => {}}>
-          <Button>링크 복사</Button>
+          <Button width="auto" horizontal
+            style={{
+              'align-self': 'flex-end',
+              margin: '0 0 -2em'
+            }}
+          >
+            링크 복사
+          </Button>
         </CopyToClipboard>
         <Graph graph={graph} events={events} />
         <SettingButton to={`/room/${room.url}/setting/`} />
       </Block>
-      <Button onClick={onToggle}>
-        {showPayment ? "멤버 목록 보기" : "결제 목록 보기"}
-      </Button>
+      <Block direction="row" transparent
+        style={{margin: '0 auto', padding: '0'}}
+      >
+        <Button onClick={onToggle} width="auto" horizontal>
+          {showPayment ? "멤버 목록" : "결제 목록"}
+        </Button>
+        <h2 style={{
+          margin: '0 0.5em',
+          padding: '0 0.25em',
+          'border-bottom': 'solid',
+          color: 'dimgrey',
+        }}>
+          {room.roomname}
+        </h2>
+      </Block>
       {showPayment ?
         (<PaymentList />) :
         (members && <MemberList />)