2024.07.13-1

src/component/BusunessCard.js

@@ -176,6 +176,7 @@ export const BusinessCard = ({onMouseMove, onMouseOut, cardState}) => {
   }
 
   const onEmailCopy = () => {
+    // uiDispatch({type: UI_ACTION_TYPE.donation_modal_show})
     navigator.clipboard.writeText("[email protected]").then(() => {
       uiDispatch({
         type: UI_ACTION_TYPE.alert_message_add,

src/component/DonationModal.js

@@ -0,0 +1,83 @@
+import styled, {css} from "styled-components";
+import {CSSTransition} from "react-transition-group";
+import {UI_ACTION_TYPE, useUiDispatch} from "../context/UiReducer";
+import {fadeIn, fadeOut, scaleDown, scaleUp} from "../style/animation";
+import toss_qr_code from "./../assets/toss_qr_code.png"
+import Button from "./Button";
+
+const DonationModalStyle = styled.div`
+  width: 100vw;
+  height: calc(100 * var(--vh));
+
+  background-color: rgba(0, 0, 0, 0.66);
+
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  pointer-events: auto;
+
+  transition: 260ms;
+
+  animation-duration: 250ms;
+  ${({state}) => css`
+    ${state === "entering" && css`
+      animation-name: ${fadeIn};
+    `}
+    ${state === "exiting" && css`
+      animation-name: ${fadeOut};
+    `}
+  `}
+`
+
+const ModalContent = styled.div`
+  padding: 12px;
+  border-radius: 12px;
+  background-color: #fff;
+
+  //display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  .qr-code {
+    width: 180px;
+  }
+
+  h3 {
+    text-align: center;
+  }
+
+  button {
+    width: 100%;
+    margin-top: 20px;
+  }
+`
+
+export const DonationModal = ({isShow}) => {
+  const uiDispatch = useUiDispatch()
+  const closeModal = (e) => {
+    if (e.target !== e.currentTarget) {
+      return
+    }
+
+    uiDispatch({type: UI_ACTION_TYPE.donation_modal_hide})
+  }
+
+  return (
+    <CSSTransition in={isShow} timeout={250} unmountOnExit>
+      {state =>
+        <DonationModalStyle onClick={closeModal} state={state}>
+          <ModalContent>
+            <img className={"qr-code"} src={toss_qr_code} alt={"토스 송금하기 QR코드"}/>
+            <h3>토스로 후원하기</h3>
+            <Button onClick={closeModal}>닫기</Button>
+          </ModalContent>
+        </DonationModalStyle>
+      }
+    </CSSTransition>
+  )
+}

src/component/Modal.js

@@ -1,48 +1,8 @@
-import styled, {css, keyframes} from "styled-components";
+import styled, {css} from "styled-components";
 import Button from "./Button";
 import {UI_ACTION_TYPE, useUiDispatch} from "../context/UiReducer";
-import {useEffect, useState} from "react";
 import {CSSTransition} from "react-transition-group";
-
-const fadeIn = keyframes`
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-`
-
-const fadeOut = keyframes`
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-`
-
-const scaleUp = keyframes`
-  0% {
-    transform: scale(0.975);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-`
-
-const scaleDown = keyframes`
-  0% {
-    transform: scale(1);
-  }
-
-  100% {
-    transform: scale(0.975);
-  }
-`
+import {fadeIn, fadeOut, scaleDown, scaleUp} from "../style/animation";
 
 const ModalStyle = styled.div`
   width: 100%;

src/context/UiReducer.js

@@ -8,11 +8,16 @@ export const UI_ACTION_TYPE = {
 
   alert_message_add : "ALERT_MESSAGE_ADD",
   alert_message_remove: "ALERT_MESSAGE_REMOVE",
+
+  donation_modal_show: "DONATION_MODAL_SHOW",
+  donation_modal_hide: "DONATION_MODAL_HIDE",
+  donation_modal_toggle: "DONATION_MODAL_TOGGLE",
 }
 
 const uiState = {
   isModalShow: false,
-  alertMessage: []
+  alertMessage: [],
+  isDonationModalShow: false,
 }
 
 function reducer(state, action) {
@@ -32,6 +37,7 @@ function reducer(state, action) {
         ...state,
         isModalShow: !state.isModalShow
       }
+
     case UI_ACTION_TYPE.alert_message_add:
       return {
         ...state,
@@ -42,6 +48,22 @@ function reducer(state, action) {
         ...state,
         alertMessage: state.alertMessage.filter(m => m.id !== action.id)
       }
+
+    case UI_ACTION_TYPE.donation_modal_show:
+      return {
+        ...state,
+        isDonationModalShow: true
+      }
+    case UI_ACTION_TYPE.donation_modal_hide:
+      return {
+        ...state,
+        isDonationModalShow: false
+      }
+    case UI_ACTION_TYPE.donation_modal_toggle:
+      return {
+        ...state,
+        isDonationModalShow: !state.isDonationModalShow
+      }
     default:
       throw "Undefined ui reducer action type"
   }

src/section/FirstSection.js

@@ -1,6 +1,7 @@
 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";
 
 const FirstSectionStyle = styled.section`
   width: 100%;
@@ -115,6 +116,7 @@ const FirstSectionStyle = styled.section`
 `
 
 export const FirstSection = () => {
+  const uiDispath = useUiDispatch();
   const scrollDown = () => {
     window.scrollTo({
       left: 0,
@@ -150,7 +152,7 @@ export const FirstSection = () => {
                 d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/>
             </svg>
           </a>
-          <a href="https://toss.me/바키찬희찬" target="_blank">
+          <a onClick={() => {uiDispath({type:UI_ACTION_TYPE.donation_modal_show})}}>
             <svg xmlns="http://www.w3.org/2000/svg" id="_이어_2" viewBox="0 0 1601.86 1500">
               <g id="Layer_1">
                 <path className="cls-1"

src/section/UiSection.js

@@ -2,6 +2,7 @@ import styled from "styled-components";
 import Modal from "../component/Modal";
 import {useUiState} from "../context/UiReducer";
 import Alert from "../component/Alert";
+import {DonationModal} from "../component/DonationModal";
 
 const UiSectionStyle = styled.section`
   width: 100%;
@@ -21,6 +22,7 @@ const UiSection = () => {
     <UiSectionStyle>
       <Modal isShow={uiState.isModalShow}/>
       <Alert alertMessage={uiState.alertMessage}/>
+      <DonationModal isShow={uiState.isDonationModalShow}/>
     </UiSectionStyle>
   )
 }

src/style/animation.js

@@ -30,11 +30,52 @@ export const animation = keyframes`
     opacity: 100%;
   }
 `
+
 export const downUp = keyframes`
   0%, 100% {
     transform: translate(-50%, 0px);
   }
   50% {
     transform: translate(-50%, 40px);
   }
+`
+
+export const fadeIn = keyframes`
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+`
+
+export const fadeOut = keyframes`
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+`
+
+export const scaleUp = keyframes`
+  0% {
+    transform: scale(0.975);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+`
+
+export const scaleDown = keyframes`
+  0% {
+    transform: scale(1);
+  }
+
+  100% {
+    transform: scale(0.975);
+  }
 `