From b78f5a522af6021c249de0a2d435a053abd2b859 Mon Sep 17 00:00:00 2001
From: Skile <imleejm@gmail.com>
Date: Wed, 19 Jun 2019 21:27:12 +0900
Subject: [PATCH] Add RoomSettingButton

---
 frontend/public/settings.png                  | Bin 0 -> 1209 bytes
 frontend/src/components/atoms/Graph/index.js  |   1 +
 .../src/components/atoms/LinkButton/index.js  |  26 ++++++++++++++++++
 .../src/components/pages/RoomPage/index.js    |  19 ++++++++++---
 4 files changed, 42 insertions(+), 4 deletions(-)
 create mode 100644 frontend/public/settings.png
 create mode 100644 frontend/src/components/atoms/LinkButton/index.js

diff --git a/frontend/public/settings.png b/frontend/public/settings.png
new file mode 100644
index 0000000000000000000000000000000000000000..067ceac9a8786232510f4f81b07098cad2b98291
GIT binary patch
literal 1209
zcmV;q1V;ObP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F8000DlNkl<Zc-qxh
zNoZ416m@8o;y_gd6|uOmsE7)RLKVSbA&Ty*;=+a4rCULY7IkC0Q0PMK!j%KqP213U
zp69u=p+lM`w&{>`Zqg)8@;v9$ACljUzbJU&k>vmP?mc%p_hrkL|3R{|vv*WfR3u=%
zEH5ul6+&$NXT}Q)3-`kC4XpN>ni^46RmF8ClCzDCjd7a>P+3_ySY2K1*6a0RZEa1o
zwzd+$yKv`na&qDU`gdt*>HW<D_}bUkCuEtLnj(O)aOYrLg9v!A*9jfz?d|QcssO-)
zi?y}2!s&E+K{Pcr3Dm+HD1J~@R`wL@F4i&m42*u{p4HV=v9Pcp0ED26u#T#YLXA$R
z^8y$i9v1cW^`fPvMM?<`AWZ~ifalNg-M+ZE=-od*KQExe3XoS-0f5pJdgSqVL?~f;
z2*hMEd7n8P4#DDu@f5YjlM%Ybv9YnR04Oe(OSs)`={t+Ip`k%Q$G5DktXMVqPliX<
ziHQlJMg|85Y1~L2iP|{wc>tcz2Qtn`SglquJ3A}p=H{eglfCv8i^U@49=cA4WI6UM
z2xq7KEG;c<8;qBAcXw}4%5LcC>7i#fD4)Wo8K1Vcwl*o>O5t9-?}wf3!NPn52#wfe
zfifM6<rjWuu$btXuh?uh!Is3{^18aZeFP1~amB^O`*HRs&oCmsA{QavCj|shQc`l6
z^g1&$BgV(arMz`@bxG~zTXb?k0dQ)doYF&pf1>0J>geq3B<PG_J^q-7SiPZyt%bdY
zyu7?UA<`L#J)I*XBYtPiW-}w83kKj7NrfJUlHT5463y#y#fyk0(II8@7-iVHg48AA
z{bB6eB?EZ7KH(%r8yFbyBNAEoUZc?*k6?6fhfbH$A*N5ZBQNaxPTt;)brK=EgwJRA
z{Dc>4Y%`?-Jii%91Q^jkq{TGb?RKe!N#l%uF!t*qt@_H)&=B+33Xm~j=Eg6rRvR*%
z1V?H|(LN5S1V-L>baeQ6LF5b@>fm-T<4|}Dt>{@<S@Cn<U@!<08i|QRitWrOLD%(Q
z5lCY1D)Y$NAP5+Gn3<Wm(+6-2+Vc+IjgF3P2s?{%ov<ueOIQx<^+3<5fB?XRF*sl{
z8jS(z6_xCQf=PJL1|<bhXar!VGHn!kPGBS}5*JywprGIo&L-k{e8`Ik!s%FEUf!UT
z>A)QDa6+=@CnqPRuqp+qAPYKSDEfN<+X*Q3zSps6gn)1jW9V}^TcQSlcDhFNOG`^p
z8D`<qIIA4S^Hp6!kfTJB$@KKJw-Y#+`uqFCGA8$v&=9>Zs{TLZ=jZPO@?kQfY@8Eq
zU8xpP@iaF#O9PACz@F#GWj)9McxU7|S9<|Hhr?Rl1>~tlBdmCOgw&kG_eTKv9(#Xa
zWnpC#lyU?Y6&0OT1p<A05K3D>zixVo?`EVWA<W&;#Hr^yyzuPvX8x0GMJs+lH0)4x
zFM`OW^H#*G8S8`q@Jzqyzh)utbN=*wo;RZPKOyv9gLGX8dKLQ{0<gJQFA%vCk)HVj
XO|ex5So2YH00000NkvXXu0mjf0QW}b

literal 0
HcmV?d00001

diff --git a/frontend/src/components/atoms/Graph/index.js b/frontend/src/components/atoms/Graph/index.js
index 8295dfb..8171624 100644
--- a/frontend/src/components/atoms/Graph/index.js
+++ b/frontend/src/components/atoms/Graph/index.js
@@ -11,6 +11,7 @@ const Wrapper = styled.div`
   padding-top: 100%;
   width: 100%;
   position: relative;
+  z-index: -1;
 `
 
 const Content = styled.div`
diff --git a/frontend/src/components/atoms/LinkButton/index.js b/frontend/src/components/atoms/LinkButton/index.js
new file mode 100644
index 0000000..ceeb04d
--- /dev/null
+++ b/frontend/src/components/atoms/LinkButton/index.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { withRouter } from 'react-router-dom'
+
+import { Button } from 'components'
+
+const LinkButton = props => {
+  const { onClick, history, to, ...rest } = props
+  return (
+    <Button
+      {...rest}
+      onClick={
+        evt => {
+          onClick && onClick(evt)
+          history.push(to)
+        }
+      }
+    />
+  )
+}
+
+LinkButton.propTypes = {
+  to: PropTypes.string.isRequired
+}
+
+export default withRouter(LinkButton)
diff --git a/frontend/src/components/pages/RoomPage/index.js b/frontend/src/components/pages/RoomPage/index.js
index df8b3e3..f20b2d7 100644
--- a/frontend/src/components/pages/RoomPage/index.js
+++ b/frontend/src/components/pages/RoomPage/index.js
@@ -1,11 +1,24 @@
 import React from 'react'
+import styled from 'styled-components'
 import PropTypes from 'prop-types'
 
-import { Block, Button, Graph, List, ListItem, Header } from 'components'
+import { Block, Button, Graph, List, LinkButton, ListItem, Header } from 'components'
 import { MemberList, PaymentList } from 'containers'
 import { getMemberDebtList, getSimplifiedGraph } from 'services/simplifier'
 import { Link } from 'react-router-dom'
  
+const SettingButton = styled(LinkButton)`
+  align-self: flex-end;  
+  background: url('/settings.png');
+  border: 0;
+  outline: 0;
+  margin: -32px 0 0;
+  padding: 0;
+  height: 32px;
+  width: 32px;
+  cursor: pointer;
+`
+
 const RoomPage = props => {
   const { room, members, showPayment, payments, onClickMember, onToggle } = props
   if (!room) return <Block transparent>Loading...</Block>
@@ -37,6 +50,7 @@ const RoomPage = props => {
       <Header />
       <Block transparent>
         <Graph graph={graph} events={events} />
+        <SettingButton to={`/room/${room.url}/setting/`} />
       </Block>
       <Button onClick={onToggle}>
         {showPayment ? "멤버 목록 보기" : "결제 목록 보기"}
@@ -48,9 +62,6 @@ const RoomPage = props => {
       <Block transparent>
         <a>로그아웃</a>
       </Block>
-      <Block>
-        <Link to={`/room/${room.url}/setting/`}>button</Link>
-      </Block>
     </div>
   )
 }