Make LinkCopyButton

jtjun · Jun 19, 2019 · 6950b29 · 6950b29
1 parent b78f5a5
commit 6950b29
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 2 deletions.
diff --git a/frontend/src/components/atoms/Button/index.js b/frontend/src/components/atoms/Button/index.js
@@ -15,6 +15,7 @@ const Button = styled.button`
   padding: 4px 15px;
   width: 100%;
   max-width: 224px;
+  z-index: 1;
 `
 
 const LightButton = styled(Button)`

diff --git a/frontend/src/components/atoms/Graph/index.js b/frontend/src/components/atoms/Graph/index.js
@@ -11,7 +11,6 @@ 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/Header/index.js b/frontend/src/components/atoms/Header/index.js
@@ -10,6 +10,7 @@ const Wrapper = styled.div`
   position: fixed;
   top: 0;
   width: 100%;
+  z-index: 2;
 `
 
 const Header = (props) => (

diff --git a/frontend/src/components/pages/RoomPage/index.js b/frontend/src/components/pages/RoomPage/index.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 import PropTypes from 'prop-types'
+import { CopyToClipboard } from 'react-copy-to-clipboard'
 
 import { Block, Button, Graph, List, LinkButton, ListItem, Header } from 'components'
 import { MemberList, PaymentList } from 'containers'
@@ -17,6 +18,7 @@ const SettingButton = styled(LinkButton)`
   height: 32px;
   width: 32px;
   cursor: pointer;
+  z-index: 1;
 `
 
 const RoomPage = props => {
@@ -47,8 +49,11 @@ const RoomPage = props => {
 
   return (
     <div>
-      <Header />
+      <Header />      
       <Block transparent>
+        <CopyToClipboard text={window.location.href} onCopy={() => {}}>
+          <Button>링크 복사</Button>
+        </CopyToClipboard>
         <Graph graph={graph} events={events} />
         <SettingButton to={`/room/${room.url}/setting/`} />
       </Block>