From 6950b29e8d6892bdcfa3ff57ae1f6ed18bf787f5 Mon Sep 17 00:00:00 2001
From: Skile <imleejm@gmail.com>
Date: Wed, 19 Jun 2019 21:44:38 +0900
Subject: [PATCH] Make LinkCopyButton

---
 frontend/src/components/atoms/Button/index.js   | 1 +
 frontend/src/components/atoms/Graph/index.js    | 1 -
 frontend/src/components/atoms/Header/index.js   | 1 +
 frontend/src/components/pages/RoomPage/index.js | 7 ++++++-
 4 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/atoms/Button/index.js b/frontend/src/components/atoms/Button/index.js
index 280fcd6..456933c 100644
--- 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
index 8171624..8295dfb 100644
--- 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
index 1c6ddca..6dd83d8 100644
--- 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
index f20b2d7..252bb6b 100644
--- 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>