From 31ebc9efc520c6f4e848b258fea4e9417efeb3b6 Mon Sep 17 00:00:00 2001 From: dmson1218 Date: Thu, 7 Dec 2023 15:20:01 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=EB=B3=84=EA=B0=80=EB=A3=A8=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FE/src/assets/fourstar.svg | 5 +++++ FE/src/assets/onestar.svg | 3 +++ FE/src/assets/threestar.svg | 3 +++ FE/src/assets/twostar.svg | 4 ++++ 4 files changed, 15 insertions(+) create mode 100644 FE/src/assets/fourstar.svg create mode 100644 FE/src/assets/onestar.svg create mode 100644 FE/src/assets/threestar.svg create mode 100644 FE/src/assets/twostar.svg diff --git a/FE/src/assets/fourstar.svg b/FE/src/assets/fourstar.svg new file mode 100644 index 0000000..58b49c8 --- /dev/null +++ b/FE/src/assets/fourstar.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/FE/src/assets/onestar.svg b/FE/src/assets/onestar.svg new file mode 100644 index 0000000..6d9562c --- /dev/null +++ b/FE/src/assets/onestar.svg @@ -0,0 +1,3 @@ + + + diff --git a/FE/src/assets/threestar.svg b/FE/src/assets/threestar.svg new file mode 100644 index 0000000..d7b7a13 --- /dev/null +++ b/FE/src/assets/threestar.svg @@ -0,0 +1,3 @@ + + + diff --git a/FE/src/assets/twostar.svg b/FE/src/assets/twostar.svg new file mode 100644 index 0000000..ca9361a --- /dev/null +++ b/FE/src/assets/twostar.svg @@ -0,0 +1,4 @@ + + + + From 55f3fa2ebe1195f9471dc8d9eafbf0e012e4ef19 Mon Sep 17 00:00:00 2001 From: dmson1218 Date: Thu, 7 Dec 2023 15:20:43 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=EA=B2=B0=EC=A0=9C=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=9D=84=EC=9A=B0=EA=B8=B0=20=EC=9C=84?= =?UTF-8?q?=ED=95=9C=20=EC=83=81=ED=83=9C=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - isPurchase 상태 추가 및 관리 --- FE/src/atoms/diaryAtom.js | 1 + FE/src/components/SideBar/SideBar.js | 38 ++++++++++++++++++++++++++-- FE/src/pages/MainPage.js | 2 ++ FE/src/pages/StarPage.js | 6 ++++- 4 files changed, 44 insertions(+), 3 deletions(-) diff --git a/FE/src/atoms/diaryAtom.js b/FE/src/atoms/diaryAtom.js index 6237fe3..27e596e 100644 --- a/FE/src/atoms/diaryAtom.js +++ b/FE/src/atoms/diaryAtom.js @@ -9,6 +9,7 @@ const diaryAtom = atom({ isDelete: false, isList: false, isAnalysis: false, + isPurchase: false, diaryUuid: "", diaryPoint: "", diaryList: [], diff --git a/FE/src/components/SideBar/SideBar.js b/FE/src/components/SideBar/SideBar.js index ce9354e..c3b2ddf 100644 --- a/FE/src/components/SideBar/SideBar.js +++ b/FE/src/components/SideBar/SideBar.js @@ -4,12 +4,14 @@ import { useSetRecoilState } from "recoil"; import diaryAtom from "../../atoms/diaryAtom"; import headerAtom from "../../atoms/headerAtom"; import userAtom from "../../atoms/userAtom"; +import starAtom from "../../atoms/starAtom"; import boostcampImg from "../../assets/boostcamp.png"; function SideBar() { const setDiaryState = useSetRecoilState(diaryAtom); const setHeaderState = useSetRecoilState(headerAtom); const setUserState = useSetRecoilState(userAtom); + const setStarState = useSetRecoilState(starAtom); return ( @@ -26,6 +28,7 @@ function SideBar() { isRead: false, isList: false, isAnalysis: false, + isPurchase: false, })); }} > @@ -44,6 +47,11 @@ function SideBar() { isUpdate: false, isList: true, isAnalysis: false, + isPurchase: false, + })); + setStarState((prev) => ({ + ...prev, + mode: "create", })); }} > @@ -62,13 +70,39 @@ function SideBar() { isUpdate: false, isList: false, isAnalysis: true, + isPurchase: false, + })); + setStarState((prev) => ({ + ...prev, + mode: "create", })); }} > 별숲 현황 - - 별숲 상점 + { + setHeaderState((prev) => ({ + ...prev, + isSideBar: false, + })); + setDiaryState((prev) => ({ + ...prev, + isCreate: false, + isRead: false, + isUpdate: false, + isList: false, + isAnalysis: false, + isPurchase: true, + })); + setStarState((prev) => ({ + ...prev, + mode: "create", + })); + }} + > + 별숲 상점 + 환경 설정 : null} {diaryState.isAnalysis ? : null} {diaryState.isLoading ? : null} + {diaryState.isPurchase ? : null} ) : null} diff --git a/FE/src/pages/StarPage.js b/FE/src/pages/StarPage.js index b9f0a66..3734f15 100644 --- a/FE/src/pages/StarPage.js +++ b/FE/src/pages/StarPage.js @@ -43,7 +43,11 @@ function StarPage() { - {!(diaryState.isList || diaryState.isAnalysis) ? ( + {!( + diaryState.isList || + diaryState.isAnalysis || + diaryState.isPurchase + ) ? ( Date: Thu, 7 Dec 2023 15:21:11 +0900 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=EA=B2=B0=EC=A0=9C=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20UI=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/PurchaseModal/PurchaseModal.js | 229 ++++++++++++++++++ 1 file changed, 229 insertions(+) create mode 100644 FE/src/components/PurchaseModal/PurchaseModal.js diff --git a/FE/src/components/PurchaseModal/PurchaseModal.js b/FE/src/components/PurchaseModal/PurchaseModal.js new file mode 100644 index 0000000..1dd1c09 --- /dev/null +++ b/FE/src/components/PurchaseModal/PurchaseModal.js @@ -0,0 +1,229 @@ +import React, { useState } from "react"; +import styled from "styled-components"; +import leftIcon from "../../assets/leftIcon.svg"; +import rightIcon from "../../assets/rightIcon.svg"; +import oneStar from "../../assets/onestar.svg"; +import twoStar from "../../assets/twostar.svg"; +import threeStar from "../../assets/threestar.svg"; +import fourStar from "../../assets/fourstar.svg"; + +function PurchaseModal() { + const [x, setX] = useState(0); + + return ( + + + + 구매하기 + + + + 땅 스킨 구매 + 100 별가루 + + + 모양 슬롯 확장 + 100 별가루 + + + 광고 제거 + 350 별가루 + + + 별숲 후원 + 30000 별가루 + + + + + + 환전하기 + + + + + + 별가루 + 100 + + ₩ 1000 + + + + + 별가루 + 300 + + 120 + + ₩ 5000 + + + + + 별가루 + 1000 + + 300 + + ₩ 10000 + + + + + 별가루 + 2000 + + 1000 + + ₩ 20000 + + + + { + setX(-50); + }} + /> + { + setX(0); + }} + /> + + ); +} + +const PurchaseModalWrapper = styled.div` + z-index: 1000; + + position: fixed; + top: 0; + left: 0; + + display: flex; + justify-content: space-between; + align-items: center; + + transition: 0.5s; + transform: translateX(${(props) => props.x}%); +`; + +const PurchaseModalContainer = styled.div` + width: 100vw; + height: 100vh; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +`; + +const PurchaseModalContainerTitle = styled.div` + position: fixed; + top: 10%; + left: ${(props) => props.$left}; + transform: translateX(-50%); + + font-size: 1.8rem; + font-weight: bold; + color: #ffffff; + text-align: center; + margin-bottom: 1rem; +`; + +const PurchaseModalText = styled.div` + font-size: ${(props) => props.$size || "1.5rem"}; + font-weight: ${(props) => props.$bold || "normal"}; + color: #ffffff; + text-align: center; + line-height: 1.5; +`; + +const PurchaseModalContentWrapper = styled.div` + width: 60%; + height: 55%; + + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + grid-gap: 1rem; + + justify-items: center; + align-items: center; +`; + +const ExchangeModalContentWrapper = styled.div` + width: 70%; + height: 60%; + + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(1, 1fr); + grid-gap: 1rem; + + justify-items: center; + align-items: center; +`; + +const PurchaseModalContent = styled.div` + width: 100%; + height: 100%; + background-color: rgba(255, 255, 255, 0.2); + backdrop-filter: blur(10px); + border-radius: 1rem; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 10%; + + cursor: pointer; + + animation: modalFadeIn 0.5s; + @keyframes modalFadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + + &:hover { + background-color: rgba(255, 255, 255, 0.3); + } +`; + +const ContentTextWrapper = styled.div` + width: 100%; + height: 20%; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; +`; + +const ArrowIcon = styled.img` + width: 3rem; + height: 3rem; + + position: fixed; + top: 50%; + left: ${(props) => props.$left || "0"}; + transform: translate(-50%, -50%); + + filter: invert(1); + cursor: pointer; +`; + +const StarIcon = styled.img` + width: ${(props) => props.width}; + height: 10rem; +`; + +export default PurchaseModal;