명함 메일 주소 복사

src/component/Alert.js

@@ -1,8 +1,6 @@
 import styled, {css} from "styled-components";
 import {useEffect, useState} from "react";
-import { v4 } from "uuid";
-import {UI_ACTION_TYPE, useUiDispatch, useUiState} from "../context/UiReducer";
-import {logDOM} from "@testing-library/react";
+import {UI_ACTION_TYPE, useUiDispatch} from "../context/UiReducer";
 import {GoX} from "react-icons/go";
 import {IconButton} from "./IconButton";
 import {CSSTransition, TransitionGroup} from "react-transition-group";
@@ -60,7 +58,7 @@ const AlertMessageStyle = styled.li`
   }
 
   p {
-    margin-top: 4px;
+    margin-top: 2px;
   }
 `
 

src/component/BusunessCard.js

@@ -2,6 +2,8 @@ import styled from "styled-components";
 import edcanLogo from "./../assets/edcan.svg"
 import edcanTypo from "./../assets/edcan_typo.svg"
 import {SCoreDream} from "../style/Font";
+import {UI_ACTION_TYPE, useUiDispatch} from "../context/UiReducer";
+import {v4} from "uuid";
 
 const BusinessCardStyle = styled.div`
   width: 300px;
@@ -161,6 +163,8 @@ const BusinessCardStyle = styled.div`
 `
 
 export const BusinessCard = ({onMouseMove, onMouseOut, cardState}) => {
+  const uiDispatch = useUiDispatch()
+
   const cardStyle = {
     transform: `perspective(2000px) rotateX(${cardState.xDeg}deg) rotateY(${cardState.yDeg}deg)`
   };
@@ -171,7 +175,16 @@ export const BusinessCard = ({onMouseMove, onMouseOut, cardState}) => {
   }
 
   const onEmailCopy = () => {
-    navigator.clipboard.writeText("[email protected]")
+    navigator.clipboard.writeText("[email protected]").then(() => {
+      uiDispatch({
+        type: UI_ACTION_TYPE.alert_message_add,
+        message: {
+          id: v4(),
+          title: "메일 주소 복사 완료",
+          message: "메일 주소를 복사했어요"
+        }
+      })
+    })
   }
 
   return (

src/section/FirstSection.js

@@ -1,9 +1,6 @@
 import styled from "styled-components";
 import {downUp, showLeft, animation, showRight} from "../style/animation";
 import {GoChevronDown} from "react-icons/go";
-import {UI_ACTION_TYPE, useUiDispatch} from "../context/UiReducer";
-import Button from "../component/Button";
-import {v4} from "uuid";
 
 const FirstSectionStyle = styled.section`
   width: 100%;
@@ -109,8 +106,6 @@ const FirstSectionStyle = styled.section`
 `
 
 export const FirstSection = () => {
-  const dispatch = useUiDispatch()
-
   const scrollDown = () => {
     window.scrollTo({
       left: 0,
@@ -119,17 +114,6 @@ export const FirstSection = () => {
     })
   }
 
-  const add = () => {
-    dispatch({
-      type: UI_ACTION_TYPE.alert_message_add,
-      message: {
-        id: v4(),
-        title: "ㅎㅇ",
-        message: "어 그래"
-      }
-    })
-  }
-
   return (
     <FirstSectionStyle>
       <div className="title-wrap">
@@ -168,8 +152,6 @@ export const FirstSection = () => {
         </div>
       </div>
 
-      <Button onClick={add}>추가</Button>
-
       <GoChevronDown className={"go-down"} onClick={scrollDown}/>
     </FirstSectionStyle>
   )