diff --git a/README.md b/README.md index 8597eec..c7270b3 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,6 @@ React와 styled-components를 사용해서 개발되었습니다. # Special Thanks | | | | | -|:--------------------------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------------------------------------------------------------:|:-----------------------------------------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------------------------------------------------------:| +|:--------------------------------------------------------------------------------------------------------------------:|:-------------------------------------------------------------------- --------------------------------------------------:|:-----------------------------------------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------------------------------------------------------:| | FIRO | Eun-Gyo Lee | Pastel | songyeon7 | | [@iamfiro](https://github.com/iamfiro) | [@eungyolee](https://github.com/eungyolee) | [@past2l](https://github.com/past2l) | [@songyeon7](https://github.com/songyeon7) | \ No newline at end of file diff --git a/src/assets/toss_qr_code.png b/src/assets/toss_qr_code.png new file mode 100644 index 0000000..28f49b4 Binary files /dev/null and b/src/assets/toss_qr_code.png differ diff --git a/src/component/BusunessCard.js b/src/component/BusunessCard.js index 166c665..84bd151 100644 --- a/src/component/BusunessCard.js +++ b/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("me@kichan.dev").then(() => { uiDispatch({ type: UI_ACTION_TYPE.alert_message_add, diff --git a/src/component/DonationModal.js b/src/component/DonationModal.js new file mode 100644 index 0000000..41287af --- /dev/null +++ b/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 ( + + {state => + + + {"토스 +

토스로 후원하기

+ + + + } + + ) +} \ No newline at end of file diff --git a/src/component/Modal.js b/src/component/Modal.js index 5de89c3..69a4853 100644 --- a/src/component/Modal.js +++ b/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%; diff --git a/src/context/UiReducer.js b/src/context/UiReducer.js index 684136e..ce8a7c6 100644 --- a/src/context/UiReducer.js +++ b/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" } diff --git a/src/section/FirstSection.js b/src/section/FirstSection.js index b8a486e..2fcf396 100644 --- a/src/section/FirstSection.js +++ b/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"/> - + {uiDispath({type:UI_ACTION_TYPE.donation_modal_show})}}> { + ) } diff --git a/src/style/animation.js b/src/style/animation.js index c859956..48bdd01 100644 --- a/src/style/animation.js +++ b/src/style/animation.js @@ -30,6 +30,7 @@ export const animation = keyframes` opacity: 100%; } ` + export const downUp = keyframes` 0%, 100% { transform: translate(-50%, 0px); @@ -37,4 +38,44 @@ export const downUp = keyframes` 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); + } ` \ No newline at end of file