From b5f205ddcfd272ce0f0f7acfa764174455cd0e4c Mon Sep 17 00:00:00 2001 From: Sangmin Park Date: Tue, 1 Aug 2023 14:54:21 +0900 Subject: [PATCH 1/8] 123 --- components/LoginChecker.tsx | 3 +- components/modal/CoinAnimation.tsx | 39 +++++++ components/modal/CoinIcon.tsx | 25 ++++ .../modal/event/AttendanceCoinModal.tsx | 61 ++++++++++ components/modal/event/WelcomeModal.tsx | 8 +- styles/modal/CoinAnimation.module.scss | 109 ++++++++++++++++++ styles/modal/event/WelcomeModal.module.scss | 4 +- 7 files changed, 242 insertions(+), 7 deletions(-) create mode 100644 components/modal/CoinAnimation.tsx create mode 100644 components/modal/CoinIcon.tsx create mode 100644 components/modal/event/AttendanceCoinModal.tsx create mode 100644 styles/modal/CoinAnimation.module.scss diff --git a/components/LoginChecker.tsx b/components/LoginChecker.tsx index ae55f0fa0..cb1ac80b8 100644 --- a/components/LoginChecker.tsx +++ b/components/LoginChecker.tsx @@ -12,7 +12,8 @@ export default function LoginChecker({ children }: LoginCheckerProps) { return loggedIn ? ( <> - {firstVisited && } +{/* {firstVisited && } + */} {} {children} ) : ( diff --git a/components/modal/CoinAnimation.tsx b/components/modal/CoinAnimation.tsx new file mode 100644 index 000000000..d82d2965b --- /dev/null +++ b/components/modal/CoinAnimation.tsx @@ -0,0 +1,39 @@ +import React from "react"; +import styles from "styles/modal/CoinAnimation.module.scss"; +import CoinIcon from './CoinIcon' + +interface amountProps { + amount: number; +} + +export default function CoinAnimation({amount}: amountProps){ + const tilts = ["l", "r", "none"]; + + const moneyamount = Array.from({ length: amount }).map((_, index) => { + const randomTilt = tilts[Math.floor(Math.random() * 3)]; + const stackStyle = randomTilt === "none" ? styles.stack : styles.stackl; + + return ( +
+ + + +
+ ); + }); + + return ( +
+
+
+ {moneyamount} +
+
+ +{amount} +
+
+
+ ); +} + + diff --git a/components/modal/CoinIcon.tsx b/components/modal/CoinIcon.tsx new file mode 100644 index 000000000..7ca08cd79 --- /dev/null +++ b/components/modal/CoinIcon.tsx @@ -0,0 +1,25 @@ +import React from 'react'; + +const CoinIcon = () => ( + + + + + + + + + + + + + + + + + + + +); + +export default CoinIcon; \ No newline at end of file diff --git a/components/modal/event/AttendanceCoinModal.tsx b/components/modal/event/AttendanceCoinModal.tsx new file mode 100644 index 000000000..3e2590d7b --- /dev/null +++ b/components/modal/event/AttendanceCoinModal.tsx @@ -0,0 +1,61 @@ +import { useSetRecoilState } from 'recoil'; +import { firstVisitedState } from 'utils/recoil/modal'; +//import styles from 'styles/modal/event/AttendanceCoinModal.module.scss'; +import styles from 'styles/modal/event/WelcomeModal.module.scss'; +import modalStyles from 'styles/modal/Modal.module.scss'; + +export default function AttendanceCoinModal() { + const setFirstVisited = useSetRecoilState(firstVisitedState); + const content = { + title: '출 석', + message: + '출석하기를 클릭하시면 \n코인을 획득하실수 있습니다.', + }; + + const openPageManual = () => { + window.open( + 'https://github.com/42organization/42arcade.gg.client/wiki/42gg.kr--%ED%8E%98%EC%9D%B4%EC%A7%80-%EA%B0%80%EC%9D%B4%EB%93%9C' + ); + }; + + const closeModalBackdropHandler = (e: React.MouseEvent) => { + if (e.target instanceof HTMLDivElement && e.target.id === 'modalOutside') { + setFirstVisited(false); + } + }; + + const closeModalButtonHandler = () => { + setFirstVisited(false); + }; + + return ( +
+
+
+
{content.title}
+
{content.message}
+
+ {`@`} + {`)->->--`} +
+
+
+
+ +
+
+ +
+
+
+
+ ); +} diff --git a/components/modal/event/WelcomeModal.tsx b/components/modal/event/WelcomeModal.tsx index 986332c83..5dd4b3dd0 100644 --- a/components/modal/event/WelcomeModal.tsx +++ b/components/modal/event/WelcomeModal.tsx @@ -1,5 +1,6 @@ import { useSetRecoilState } from 'recoil'; import { firstVisitedState } from 'utils/recoil/modal'; +import CoinAnimation from "../CoinAnimation"; import styles from 'styles/modal/event/WelcomeModal.module.scss'; import modalStyles from 'styles/modal/Modal.module.scss'; @@ -38,10 +39,7 @@ export default function WelcomeModal() {
{content.title}
{content.message}
-
- {`@`} - {`)->->--`} -
+
@@ -51,7 +49,7 @@ export default function WelcomeModal() {
diff --git a/styles/modal/CoinAnimation.module.scss b/styles/modal/CoinAnimation.module.scss new file mode 100644 index 000000000..b8cf0183f --- /dev/null +++ b/styles/modal/CoinAnimation.module.scss @@ -0,0 +1,109 @@ +$anim_duration: 0.65; +$anim_delay: 0.3; +$fontsize: 50px; + +.stageCoins{ + width: 4rem; + height: 6rem; + margin: auto; +} + +.stage { + width: 100%; + height: 100%; + font-size: $fontsize; + + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} + +.column { + height: 100%; + display: flex; + flex-direction: column-reverse; + flex-grow:0; +} + +.stack { + position:relative; + height: 0.15em; +} + +.stackl { + position:relative; + height: 0.15em; + left: -0.125em; +} + +.stackr { + position:relative; + height: 0.15em; + left: 0.125em; +} + +.fall { + opacity: 0; + animation: falling #{$anim_duration}s ease-in forwards 1; +} + +.coin { + padding: 0 0.5em; + width: 2.1em; + height: 1.1em; + transform: translateY(-100%); +} + +@for $i from 1 through 15 { + .fall:nth-child(#{$i}) { + animation-delay: #{($i*$anim_delay) * $anim_duration}s; + } +} + +.appear { + font-size: 2rem; + height: -0.15em; + color: white; + opacity: 0; + animation: appear #{$anim_duration}s ease-in forwards 1; +} + +@for $i from 1 through 25 { + .appear:nth-child(#{$i}) { + animation-delay: #{($i*3.5*$anim_delay) * $anim_duration}s; + } +} + +@keyframes falling { + 0% { + transform: translatey(-100px); + opacity: 0; + } + + 80% { + transform: translatey(0); + opacity: 1; + } + 82%{ + transform: translatey(-3px); + opacity: 1; + } + + 100% { + transform: translatey(0); + opacity: 1; + } +} + +@keyframes appear { + 0% { + opacity: 0; + } + 50% { + opacity: 0.5; + } + 100% { + opacity: 1; + } +} \ No newline at end of file diff --git a/styles/modal/event/WelcomeModal.module.scss b/styles/modal/event/WelcomeModal.module.scss index 5cd712a5a..c740c26fc 100644 --- a/styles/modal/event/WelcomeModal.module.scss +++ b/styles/modal/event/WelcomeModal.module.scss @@ -7,15 +7,17 @@ .phrase { @include modal-phrase; white-space: pre-wrap; + margin-bottom: 0rem; .title { @include modalTitle; - padding-bottom: 2rem; + padding-bottom: 1rem; color: rgba(90, 14, 102, 1); text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.25); } .message { font-family: 'NanumSquare_acR'; line-height: 150%; + padding: 1rem; } .rose { padding-top: 1rem; From 5e956d475db42061506f2cb07783ba7cd58a9b98 Mon Sep 17 00:00:00 2001 From: Sangmin Park Date: Wed, 2 Aug 2023 12:15:01 +0900 Subject: [PATCH 2/8] =?UTF-8?q?[Feat][GGFE-141]=20welcomemodal=EC=97=90=20?= =?UTF-8?q?coinchange=20animation=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/modal/event/WelcomeModal.tsx | 24 +++++++++- .../modal/statChange/CoinStatChange.tsx | 33 +++++++++++++ styles/modal/CoinChangeAnimation.module.scss | 48 +++++++++++++++++++ types/coinTypes.ts | 5 ++ 4 files changed, 109 insertions(+), 1 deletion(-) create mode 100644 components/modal/statChange/CoinStatChange.tsx create mode 100644 styles/modal/CoinChangeAnimation.module.scss create mode 100644 types/coinTypes.ts diff --git a/components/modal/event/WelcomeModal.tsx b/components/modal/event/WelcomeModal.tsx index 5dd4b3dd0..f2bf2b966 100644 --- a/components/modal/event/WelcomeModal.tsx +++ b/components/modal/event/WelcomeModal.tsx @@ -1,17 +1,36 @@ import { useSetRecoilState } from 'recoil'; import { firstVisitedState } from 'utils/recoil/modal'; +import { CoinResult } from 'types/coinTypes'; import CoinAnimation from "../CoinAnimation"; import styles from 'styles/modal/event/WelcomeModal.module.scss'; import modalStyles from 'styles/modal/Modal.module.scss'; +import { useState, useEffect } from 'react'; +import useAxiosGet from 'hooks/useAxiosGet'; +import CoinStat from 'components/modal/statChange/CoinStatChange'; export default function WelcomeModal() { const setFirstVisited = useSetRecoilState(firstVisitedState); + //const [coin, setCoin] = useState(); + const beforeCoin = 3; + const afterCoin = 3; + const coinIncrement = 3; const content = { title: 'Welcome!', message: '42GG에 오신걸 환영합니다.\n당신의 행복한 탁구 생활을\n응원합니다! 총총총...', }; +/* useEffect(() => { + getCoinHandler(); + }, []); + + const getCoinHandler = useAxiosGet({ + url: `/pingpong/users/attendance`, + setState: setCoin, + err: 'KP03', + type: 'setError', + }); */ + const openPageManual = () => { window.open( 'https://github.com/42organization/42arcade.gg.client/wiki/42gg.kr--%ED%8E%98%EC%9D%B4%EC%A7%80-%EA%B0%80%EC%9D%B4%EB%93%9C' @@ -39,7 +58,10 @@ export default function WelcomeModal() {
{content.title}
{content.message}
- + {/* */} + + {/* */} +
diff --git a/components/modal/statChange/CoinStatChange.tsx b/components/modal/statChange/CoinStatChange.tsx new file mode 100644 index 000000000..06c2376ba --- /dev/null +++ b/components/modal/statChange/CoinStatChange.tsx @@ -0,0 +1,33 @@ +import { sleep } from 'utils/sleep'; +import { useEffect, useState } from "react"; +import styles from 'styles/modal/CoinChangeAnimation.module.scss'; + +interface CoinChangeProps { + after: number; + before: number; +} + +export default function CoinStatChange({ after, before }: CoinChangeProps) { + const [coin, setCoin] = useState(before); + + useEffect(() => { + CoinChangeAnimation(); + }, []); + + console.log(after, before); + const CoinChangeAnimation = () => { + const toAdd = 1; + for (let i = 0; i < after; i++) { + sleep(i * 500).then(() => setCoin((thisCoin) => thisCoin + toAdd)); + } + } + + return ( +
+
+ {coin}  + [{(after >= 0 ? '+' : '') + after}] +
+
+ ); +} \ No newline at end of file diff --git a/styles/modal/CoinChangeAnimation.module.scss b/styles/modal/CoinChangeAnimation.module.scss new file mode 100644 index 000000000..89db7d9bd --- /dev/null +++ b/styles/modal/CoinChangeAnimation.module.scss @@ -0,0 +1,48 @@ +@import 'styles/common.scss'; + +$ppp-font: 2.8rem; + +.coinWrap { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 0.6rem; + .coin { + display: flex; + align-items: center; + color: rgba(255, 255, 255, 1); + font-family: 'NanumSquare_acEB', sans-serif; + font-size: $ppp-font; + font-weight: 800; + text-align: center; + letter-spacing: 0.04rem; + text-shadow: 0px 0px 10px rgba(255, 255, 255, 1); + + span:nth-child(2) { + margin-top: 0.5rem; + font-size: $big-giant-font; + } + } +} + +@keyframes scaleCup { + 0% { + transform: scale(0.6); + } + + 100% { + transform: scale(1); + } +} + +@keyframes confettiRain { + 0% { + margin-top: -100vh; + opacity: 1; + } + + 100% { + margin-top: 100vh; + opacity: 1; + } +} diff --git a/types/coinTypes.ts b/types/coinTypes.ts new file mode 100644 index 000000000..2da12ba22 --- /dev/null +++ b/types/coinTypes.ts @@ -0,0 +1,5 @@ +export type CoinResult = { + beforeCoin: number; + afterCoin: number; + coinIncrement: number; +} \ No newline at end of file From 5c550046888c5bc72ed07b2b5445cdc3bf7c9e78 Mon Sep 17 00:00:00 2001 From: Sangmin Park Date: Thu, 3 Aug 2023 15:48:22 +0900 Subject: [PATCH 3/8] =?UTF-8?q?[Feat]=20[GGFE-141]=20=EC=BD=94=EC=9D=B8?= =?UTF-8?q?=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Layout/Layout.tsx | 13 ++++ components/LoginChecker.tsx | 9 +-- components/modal/ModalProvider.tsx | 6 ++ components/modal/event/WelcomeModal.tsx | 68 +++++++++---------- .../modal/statChange/CoinChangeModal.tsx | 30 ++++++++ .../modal/statChange/CoinStatChange.tsx | 45 ++++++------ hooks/Login/useLoginCheck.ts | 8 +-- hooks/modal/aftergame/useSubmitModal.ts | 44 +++++++++++- pages/api/pingpong/users/attendance.ts | 23 +++++++ styles/modal/CoinChangeModal.module.scss | 43 ++++++++++++ types/mainType.ts | 7 ++ types/modalTypes.ts | 9 ++- utils/recoil/modal.ts | 5 -- 13 files changed, 230 insertions(+), 80 deletions(-) create mode 100644 components/modal/statChange/CoinChangeModal.tsx create mode 100644 pages/api/pingpong/users/attendance.ts create mode 100644 styles/modal/CoinChangeModal.module.scss diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx index d77a12a64..90658232a 100644 --- a/components/Layout/Layout.tsx +++ b/components/Layout/Layout.tsx @@ -21,6 +21,11 @@ import useLiveCheck from 'hooks/Layout/useLiveCheck'; import useAxiosResponse from 'hooks/useAxiosResponse'; import styles from 'styles/Layout/Layout.module.scss'; +import { Modal } from 'types/modalTypes'; +//import { useSetRecoilState } from 'recoil'; +import { modalState } from 'utils/recoil/modal'; +//import { useEffect } from 'react'; + type AppLayoutProps = { children: React.ReactNode; }; @@ -31,12 +36,20 @@ export default function AppLayout({ children }: AppLayoutProps) { const presentPath = useRouter().asPath; const router = useRouter(); const openCurrentMatch = useRecoilValue(openCurrentMatchState); + const setModal = useSetRecoilState(modalState); useAxiosResponse(); useGetUserSeason(); useSetAfterGameModal(); useLiveCheck(presentPath); useAnnouncementCheck(presentPath); + + useEffect(() => { + /* if (user.isAttended) + setModal({modalName: 'WELCOME'}); */ + setModal({ modalName: 'EVENT-WELCOME' }); + }, []); + const onClickMatch = () => { router.replace('/'); router.push(`/match`); diff --git a/components/LoginChecker.tsx b/components/LoginChecker.tsx index cb1ac80b8..320dc8a47 100644 --- a/components/LoginChecker.tsx +++ b/components/LoginChecker.tsx @@ -1,5 +1,4 @@ import Login from 'pages/login'; -import WelcomeModal from './modal/event/WelcomeModal'; import styles from 'styles/Layout/Layout.module.scss'; import useLoginCheck from 'hooks/Login/useLoginCheck'; @@ -8,14 +7,10 @@ interface LoginCheckerProps { } export default function LoginChecker({ children }: LoginCheckerProps) { - const [isLoading, loggedIn, firstVisited] = useLoginCheck(); + const [isLoading, loggedIn] = useLoginCheck(); return loggedIn ? ( - <> -{/* {firstVisited && } - */} {} - {children} - + <>{children} ) : (
{!isLoading && }
diff --git a/components/modal/ModalProvider.tsx b/components/modal/ModalProvider.tsx index f23960c10..e7b790c93 100644 --- a/components/modal/ModalProvider.tsx +++ b/components/modal/ModalProvider.tsx @@ -21,6 +21,9 @@ import AdminSeasonEdit from './admin/SeasonEdit'; import FeedbackDetailModal from './admin/FeedbackDetailModal'; import DeletePenaltyModal from './admin/DeletePenaltyModal'; import AdminModifyScoreModal from './admin/AdminModifyScoreModal'; +import CoinChangeModal from './statChange/CoinChangeModal'; +import WelcomeModal from './event/WelcomeModal'; + import styles from 'styles/modal/Modal.module.scss'; export default function ModalProvider() { @@ -38,6 +41,7 @@ export default function ModalProvider() { penaltyId, ISeason, ModifyScore, + CoinResult, }, setModal, ] = useRecoilState(modalState); @@ -74,6 +78,8 @@ export default function ModalProvider() { ) : null, 'USER-KAKAO_EDIT': , + 'COIN-ANIMATION': CoinResult ? : null, + 'EVENT-WELCOME': , }; useEffect(() => { diff --git a/components/modal/event/WelcomeModal.tsx b/components/modal/event/WelcomeModal.tsx index f2bf2b966..d4942833d 100644 --- a/components/modal/event/WelcomeModal.tsx +++ b/components/modal/event/WelcomeModal.tsx @@ -1,35 +1,36 @@ import { useSetRecoilState } from 'recoil'; -import { firstVisitedState } from 'utils/recoil/modal'; +import { Modal } from 'types/modalTypes'; +import useAxiosGet from 'hooks/useAxiosGet'; +import useMockAxiosGet from 'hooks/useAxiosGet'; +import { useState, useEffect } from 'react'; import { CoinResult } from 'types/coinTypes'; -import CoinAnimation from "../CoinAnimation"; +import { modalState } from 'utils/recoil/modal'; import styles from 'styles/modal/event/WelcomeModal.module.scss'; -import modalStyles from 'styles/modal/Modal.module.scss'; -import { useState, useEffect } from 'react'; -import useAxiosGet from 'hooks/useAxiosGet'; -import CoinStat from 'components/modal/statChange/CoinStatChange'; export default function WelcomeModal() { - const setFirstVisited = useSetRecoilState(firstVisitedState); - //const [coin, setCoin] = useState(); - const beforeCoin = 3; - const afterCoin = 3; - const coinIncrement = 3; + const setModal = useSetRecoilState(modalState); + const [coin, setCoin] = useState({ + afterCoin: 3, + beforeCoin: 3, + coinIncrement: 3, + }); + const content = { title: 'Welcome!', message: '42GG에 오신걸 환영합니다.\n당신의 행복한 탁구 생활을\n응원합니다! 총총총...', }; -/* useEffect(() => { - getCoinHandler(); - }, []); - - const getCoinHandler = useAxiosGet({ - url: `/pingpong/users/attendance`, + /* const postCoinHandler = useMockAxiosGet({ + url: `/users/attendance`, setState: setCoin, - err: 'KP03', + err: 'SM01', type: 'setError', - }); */ + }); + + useEffect(() => { + getCoinHandler(); + }, []); */ const openPageManual = () => { window.open( @@ -37,31 +38,26 @@ export default function WelcomeModal() { ); }; - const closeModalBackdropHandler = (e: React.MouseEvent) => { - if (e.target instanceof HTMLDivElement && e.target.id === 'modalOutside') { - setFirstVisited(false); - } - }; + if (!coin) return null; - const closeModalButtonHandler = () => { - setFirstVisited(false); + const openAttendanceCoin = () => { + setModal({ + modalName: 'COIN-ANIMATION', + CoinResult: { + afterCoin: coin?.afterCoin, + beforeCoin: coin?.beforeCoin, + coinIncrement: coin?.coinIncrement, + }, + }); }; return ( -
+
{content.title}
{content.message}
- {/* */} - - {/* */} -
@@ -69,7 +65,7 @@ export default function WelcomeModal() {
diff --git a/components/modal/statChange/CoinChangeModal.tsx b/components/modal/statChange/CoinChangeModal.tsx new file mode 100644 index 000000000..9fa9b6e18 --- /dev/null +++ b/components/modal/statChange/CoinChangeModal.tsx @@ -0,0 +1,30 @@ +import { useSetRecoilState } from 'recoil'; +import { modalState } from 'utils/recoil/modal'; +import { reloadMatchState } from 'utils/recoil/match'; +import { CoinResult } from 'types/coinTypes'; +import CoinAnimation from '../CoinAnimation'; +import CoinStat from 'components/modal/statChange/CoinStatChange'; +import styles from 'styles/modal/CoinChangeModal.module.scss'; + +export default function CoinChangeModal(coin: CoinResult) { + const setModal = useSetRecoilState(modalState); + + const closeModal = () => { + setModal({ modalName: null }); + }; + + return ( +
+
+
+
💲
+ + +
화면을 클릭해주세요!
+
+
+ ); +} diff --git a/components/modal/statChange/CoinStatChange.tsx b/components/modal/statChange/CoinStatChange.tsx index 06c2376ba..964ae8a30 100644 --- a/components/modal/statChange/CoinStatChange.tsx +++ b/components/modal/statChange/CoinStatChange.tsx @@ -1,33 +1,32 @@ import { sleep } from 'utils/sleep'; -import { useEffect, useState } from "react"; +import { useEffect, useState } from 'react'; import styles from 'styles/modal/CoinChangeAnimation.module.scss'; interface CoinChangeProps { - after: number; - before: number; + after: number; + before: number; } export default function CoinStatChange({ after, before }: CoinChangeProps) { - const [coin, setCoin] = useState(before); + const [coin, setCoin] = useState(before); - useEffect(() => { - CoinChangeAnimation(); - }, []); + useEffect(() => { + CoinChangeAnimation(); + }, []); - console.log(after, before); - const CoinChangeAnimation = () => { - const toAdd = 1; - for (let i = 0; i < after; i++) { - sleep(i * 500).then(() => setCoin((thisCoin) => thisCoin + toAdd)); - } - } + const CoinChangeAnimation = () => { + const toAdd = 1; + for (let i = before; i < after; i++) { + sleep(i * 500).then(() => setCoin((thisCoin) => thisCoin + toAdd)); + } + }; - return ( -
-
- {coin}  - [{(after >= 0 ? '+' : '') + after}] -
-
- ); -} \ No newline at end of file + return ( +
+
+ {coin}  + [{(after >= 0 ? '+' : '') + after}] +
+
+ ); +} diff --git a/hooks/Login/useLoginCheck.ts b/hooks/Login/useLoginCheck.ts index 6178527cc..eb70a1cbe 100644 --- a/hooks/Login/useLoginCheck.ts +++ b/hooks/Login/useLoginCheck.ts @@ -2,16 +2,13 @@ import { NextRouter, useRouter } from 'next/router'; import { useState, useEffect } from 'react'; import { useRecoilState } from 'recoil'; import { loginState } from 'utils/recoil/login'; -import { firstVisitedState } from 'utils/recoil/modal'; import Cookies from 'js-cookie'; -type useLoginCheckReturn = [boolean, boolean, boolean]; +type useLoginCheckReturn = [boolean, boolean]; const useLoginCheck = (): useLoginCheckReturn => { const [isLoading, setIsLoading] = useState(true); const [loggedIn, setLoggedIn] = useRecoilState(loginState); - const [firstVisited, setFirestVisited] = - useRecoilState(firstVisitedState); const router: NextRouter = useRouter(); const presentPath: string = router.asPath; const token: string = presentPath.split('?token=')[1]; @@ -20,7 +17,6 @@ const useLoginCheck = (): useLoginCheckReturn => { useEffect(() => { if (token) { localStorage.setItem('42gg-token', token); - setFirestVisited(true); setLoggedIn(true); router.replace('/'); } @@ -29,7 +25,7 @@ const useLoginCheck = (): useLoginCheckReturn => { } setIsLoading(false); }, []); - return [isLoading, loggedIn, firstVisited]; + return [isLoading, loggedIn]; }; export default useLoginCheck; diff --git a/hooks/modal/aftergame/useSubmitModal.ts b/hooks/modal/aftergame/useSubmitModal.ts index be823a33c..3a2fcf402 100644 --- a/hooks/modal/aftergame/useSubmitModal.ts +++ b/hooks/modal/aftergame/useSubmitModal.ts @@ -3,6 +3,8 @@ import { AfterGame, TeamScore } from 'types/scoreTypes'; import { reloadMatchState } from 'utils/recoil/match'; import { modalState } from 'utils/recoil/modal'; import { errorState } from 'utils/recoil/error'; +import { CoinResult } from 'types/coinTypes'; +import { useState, useEffect } from 'react'; import axios from 'axios'; import { instance } from 'utils/axios'; @@ -30,6 +32,16 @@ const useSubmitModal = (currentGame: AfterGame) => { const setError = useSetRecoilState(errorState); const setModal = useSetRecoilState(modalState); const setReloadMatch = useSetRecoilState(reloadMatchState); + const [normalcoin, setNormalCoin] = useState({ + afterCoin: 8, + beforeCoin: 6, + coinIncrement: 2, + }); + const [rankcoin, setRankCoin] = useState({ + afterCoin: 10, + beforeCoin: 5, + coinIncrement: 5, + }); const { gameId, matchTeamsInfo, mode } = currentGame; const { myTeam, enemyTeam } = matchTeamsInfo; @@ -61,9 +73,15 @@ const useSubmitModal = (currentGame: AfterGame) => { return; } } - openStatChangeModal(); + openChangeModal(); }; + async function openChangeModal() { + openStatChangeModal(); + await new Promise((resolve) => setTimeout(resolve, 2000)); // 2초 대기 + openRankCoin(); + } + const submitNormalHandler = async () => { const requestBody: normalRequest = { gameId: gameId, @@ -74,7 +92,7 @@ const useSubmitModal = (currentGame: AfterGame) => { setError('KP04'); return; } - openStatChangeModal(); + openChangeModal(); }; const openStatChangeModal = () => { @@ -87,6 +105,28 @@ const useSubmitModal = (currentGame: AfterGame) => { }); }; + const openNormalCoin = () => { + setModal({ + modalName: 'COIN-ANIMATION', + CoinResult: { + afterCoin: normalcoin?.afterCoin, + beforeCoin: normalcoin?.beforeCoin, + coinIncrement: normalcoin?.coinIncrement, + }, + }); + }; + + const openRankCoin = () => { + setModal({ + modalName: 'COIN-ANIMATION', + CoinResult: { + afterCoin: rankcoin?.afterCoin, + beforeCoin: rankcoin?.beforeCoin, + coinIncrement: rankcoin?.coinIncrement, + }, + }); + }; + return { submitRankHandler, submitNormalHandler, diff --git a/pages/api/pingpong/users/attendance.ts b/pages/api/pingpong/users/attendance.ts new file mode 100644 index 000000000..883239089 --- /dev/null +++ b/pages/api/pingpong/users/attendance.ts @@ -0,0 +1,23 @@ +import type { NextApiRequest, NextApiResponse } from 'next'; +import { CoinResult } from 'types/coinTypes'; + +export default function handler( + req: NextApiRequest, + res: NextApiResponse +) { + //const {method} = req; + + const bcoin = 3; + const acoin = 3; + const icoin = 3; + + const coinData: CoinResult = { + beforeCoin: bcoin, + afterCoin: acoin, + coinIncrement: icoin, + }; + + //if (method == 'GET') { + res.status(200).json(coinData); + //} +} diff --git a/styles/modal/CoinChangeModal.module.scss b/styles/modal/CoinChangeModal.module.scss new file mode 100644 index 000000000..08ea7d44c --- /dev/null +++ b/styles/modal/CoinChangeModal.module.scss @@ -0,0 +1,43 @@ +@import 'styles/common.scss'; + +$ppp-font: 2.8rem; + +.fixedContainer { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + &.front { + z-index: 3; + } + &.back { + z-index: 2; + } +} + +.container { + @include modalContainer('SKYVIOLET'); + align-items: stretch; + min-height: 18.75rem; + min-width: 21rem; + box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.25); + border-radius: 0.625rem; + color: black; + .emoji { + margin-bottom: 1.5rem; + font-size: 2.5rem; + text-align: center; + } +} + +.guide { + color: rgba(203, 185, 255, 1); + letter-spacing: 0.04rem; + font-size: $medium-font; + text-align: center; +} + +.buttons { + @include modalButton; +} diff --git a/types/mainType.ts b/types/mainType.ts index ea7a82fa6..344f3eb98 100644 --- a/types/mainType.ts +++ b/types/mainType.ts @@ -7,6 +7,13 @@ export interface User { isAdmin: boolean; userImageUri: string; } +export interface User_v3 { + intraId: string; + isAdmin: boolean; + userImageUri: string; + isAttended: boolean; + tierImageUri: string; +} export interface Live { notiCount: number; diff --git a/types/modalTypes.ts b/types/modalTypes.ts index 1aef4ac54..ad080a712 100644 --- a/types/modalTypes.ts +++ b/types/modalTypes.ts @@ -3,6 +3,7 @@ import { ISeason } from './seasonTypes'; import { Value } from 'react-quill'; import { IFeedback } from 'components/admin/feedback/FeedbackTable'; import { ModifyScoreType } from 'types/admin/gameLogTypes'; +import { CoinResult } from 'types/coinTypes'; type EventModal = 'WELCOME' | 'ANNOUNCEMENT'; @@ -31,7 +32,8 @@ type ModalName = | `MATCH-${MatchModal}` | `USER-${UserModal}` | `FIXED-${FixedModal}` - | `ADMIN-${AdminModal}`; + | `ADMIN-${AdminModal}` + | `COIN-ANIMATION`; export interface Cancel { startTime: string; } @@ -50,6 +52,10 @@ export interface Exp { gameId?: number; mode?: MatchMode | null; } +export interface Coin { + //gameId?: number; + mode?: MatchMode | null; +} export interface Manual { radioMode: MatchMode; @@ -73,4 +79,5 @@ export interface Modal { penaltyId?: number; ISeason?: ISeason; ModifyScore?: ModifyScoreType; + CoinResult?: CoinResult; } diff --git a/utils/recoil/modal.ts b/utils/recoil/modal.ts index 5bd4859e2..66d874b63 100644 --- a/utils/recoil/modal.ts +++ b/utils/recoil/modal.ts @@ -6,8 +6,3 @@ export const modalState = atom({ key: `modalState/${v1()}`, default: { modalName: null }, }); - -export const firstVisitedState = atom({ - key: `firtVisitedState/${v1()}`, - default: false, -}); From bf83544a7412df1537089040e119159ee5602711 Mon Sep 17 00:00:00 2001 From: Sangmin Park Date: Thu, 3 Aug 2023 16:04:14 +0900 Subject: [PATCH 4/8] =?UTF-8?q?coinstat=20[GGFE-141]=20=EA=B0=92=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/modal/event/WelcomeModal.tsx | 2 +- components/modal/statChange/CoinStatChange.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/modal/event/WelcomeModal.tsx b/components/modal/event/WelcomeModal.tsx index d4942833d..ab5a41afb 100644 --- a/components/modal/event/WelcomeModal.tsx +++ b/components/modal/event/WelcomeModal.tsx @@ -10,7 +10,7 @@ import styles from 'styles/modal/event/WelcomeModal.module.scss'; export default function WelcomeModal() { const setModal = useSetRecoilState(modalState); const [coin, setCoin] = useState({ - afterCoin: 3, + afterCoin: 6, beforeCoin: 3, coinIncrement: 3, }); diff --git a/components/modal/statChange/CoinStatChange.tsx b/components/modal/statChange/CoinStatChange.tsx index 964ae8a30..945c825a7 100644 --- a/components/modal/statChange/CoinStatChange.tsx +++ b/components/modal/statChange/CoinStatChange.tsx @@ -25,7 +25,7 @@ export default function CoinStatChange({ after, before }: CoinChangeProps) {
{coin}  - [{(after >= 0 ? '+' : '') + after}] + [{(after >= 0 ? '+' : '') + (after - before)}]
); From 30e46d52319ee6a1699a9591c99ca8f4a083fc85 Mon Sep 17 00:00:00 2001 From: Sangmin Park Date: Fri, 4 Aug 2023 16:41:56 +0900 Subject: [PATCH 5/8] =?UTF-8?q?[Feat]=20[GGFE-141]=20mockapi=EC=9E=91?= =?UTF-8?q?=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Layout/Layout.tsx | 18 +----- components/modal/CoinAnimation.tsx | 63 +++++++++---------- components/modal/CoinIcon.tsx | 53 ++++++++++------ .../modal/event/AttendanceCoinModal.tsx | 61 ------------------ components/modal/event/WelcomeModal.tsx | 46 +++++++++++--- .../modal/statChange/StatChangeModal.tsx | 28 ++++++++- hooks/Layout/useGetUserSeason.ts | 30 +++++++-- hooks/modal/aftergame/useSubmitModal.ts | 44 +------------ pages/api/pingpong/games/normal.ts | 23 +++++++ pages/api/pingpong/games/rank.ts | 23 +++++++ pages/api/pingpong/users/attendance.ts | 8 +-- pages/api/pingpong/users/user.ts | 19 ++++++ styles/modal/event/WelcomeModal.module.scss | 4 +- types/gameTypes.ts | 3 + types/mainType.ts | 5 -- utils/recoil/layout.ts | 2 + 16 files changed, 231 insertions(+), 199 deletions(-) delete mode 100644 components/modal/event/AttendanceCoinModal.tsx create mode 100644 pages/api/pingpong/games/normal.ts create mode 100644 pages/api/pingpong/games/rank.ts create mode 100644 pages/api/pingpong/users/user.ts diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx index 90658232a..0e6ba919d 100644 --- a/components/Layout/Layout.tsx +++ b/components/Layout/Layout.tsx @@ -1,8 +1,6 @@ import { useRouter } from 'next/router'; -import { useEffect } from 'react'; -import { useRecoilValue, useSetRecoilState } from 'recoil'; +import { useRecoilValue } from 'recoil'; import { colorModeState } from 'utils/recoil/colorMode'; -import { loginState } from 'utils/recoil/login'; import { userState } from 'utils/recoil/layout'; import { openCurrentMatchState } from 'utils/recoil/match'; import Statistics from 'pages/statistics'; @@ -21,11 +19,6 @@ import useLiveCheck from 'hooks/Layout/useLiveCheck'; import useAxiosResponse from 'hooks/useAxiosResponse'; import styles from 'styles/Layout/Layout.module.scss'; -import { Modal } from 'types/modalTypes'; -//import { useSetRecoilState } from 'recoil'; -import { modalState } from 'utils/recoil/modal'; -//import { useEffect } from 'react'; - type AppLayoutProps = { children: React.ReactNode; }; @@ -36,20 +29,13 @@ export default function AppLayout({ children }: AppLayoutProps) { const presentPath = useRouter().asPath; const router = useRouter(); const openCurrentMatch = useRecoilValue(openCurrentMatchState); - const setModal = useSetRecoilState(modalState); useAxiosResponse(); - useGetUserSeason(); + useGetUserSeason(presentPath); useSetAfterGameModal(); useLiveCheck(presentPath); useAnnouncementCheck(presentPath); - useEffect(() => { - /* if (user.isAttended) - setModal({modalName: 'WELCOME'}); */ - setModal({ modalName: 'EVENT-WELCOME' }); - }, []); - const onClickMatch = () => { router.replace('/'); router.push(`/match`); diff --git a/components/modal/CoinAnimation.tsx b/components/modal/CoinAnimation.tsx index d82d2965b..4a357dd95 100644 --- a/components/modal/CoinAnimation.tsx +++ b/components/modal/CoinAnimation.tsx @@ -1,39 +1,38 @@ -import React from "react"; -import styles from "styles/modal/CoinAnimation.module.scss"; -import CoinIcon from './CoinIcon' +import React from 'react'; +import styles from 'styles/modal/CoinAnimation.module.scss'; +import CoinIcon from './CoinIcon'; interface amountProps { - amount: number; + amount: number; } -export default function CoinAnimation({amount}: amountProps){ - const tilts = ["l", "r", "none"]; +export default function CoinAnimation({ amount }: amountProps) { + const tilts = ['l', 'r', 'none']; - const moneyamount = Array.from({ length: amount }).map((_, index) => { - const randomTilt = tilts[Math.floor(Math.random() * 3)]; - const stackStyle = randomTilt === "none" ? styles.stack : styles.stackl; - - return ( -
- - - -
- ); - }); - - return ( -
-
-
- {moneyamount} -
-
- +{amount} -
-
-
- ); -} + const moneyamount = Array.from({ length: amount }).map((_, index) => { + const randomTilt = tilts[Math.floor(Math.random() * 3)]; + const stackStyle = + randomTilt === 'none' + ? styles.stack + : randomTilt === 'l' + ? styles.stackl + : styles.stackr; + return ( +
+ + + +
+ ); + }); + return ( +
+
+
{moneyamount}
+
+{amount}
+
+
+ ); +} diff --git a/components/modal/CoinIcon.tsx b/components/modal/CoinIcon.tsx index 7ca08cd79..5365b170e 100644 --- a/components/modal/CoinIcon.tsx +++ b/components/modal/CoinIcon.tsx @@ -1,25 +1,38 @@ import React from 'react'; const CoinIcon = () => ( - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + ); -export default CoinIcon; \ No newline at end of file +export default CoinIcon; diff --git a/components/modal/event/AttendanceCoinModal.tsx b/components/modal/event/AttendanceCoinModal.tsx deleted file mode 100644 index 3e2590d7b..000000000 --- a/components/modal/event/AttendanceCoinModal.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { useSetRecoilState } from 'recoil'; -import { firstVisitedState } from 'utils/recoil/modal'; -//import styles from 'styles/modal/event/AttendanceCoinModal.module.scss'; -import styles from 'styles/modal/event/WelcomeModal.module.scss'; -import modalStyles from 'styles/modal/Modal.module.scss'; - -export default function AttendanceCoinModal() { - const setFirstVisited = useSetRecoilState(firstVisitedState); - const content = { - title: '출 석', - message: - '출석하기를 클릭하시면 \n코인을 획득하실수 있습니다.', - }; - - const openPageManual = () => { - window.open( - 'https://github.com/42organization/42arcade.gg.client/wiki/42gg.kr--%ED%8E%98%EC%9D%B4%EC%A7%80-%EA%B0%80%EC%9D%B4%EB%93%9C' - ); - }; - - const closeModalBackdropHandler = (e: React.MouseEvent) => { - if (e.target instanceof HTMLDivElement && e.target.id === 'modalOutside') { - setFirstVisited(false); - } - }; - - const closeModalButtonHandler = () => { - setFirstVisited(false); - }; - - return ( -
-
-
-
{content.title}
-
{content.message}
-
- {`@`} - {`)->->--`} -
-
-
-
- -
-
- -
-
-
-
- ); -} diff --git a/components/modal/event/WelcomeModal.tsx b/components/modal/event/WelcomeModal.tsx index ab5a41afb..f8fc85293 100644 --- a/components/modal/event/WelcomeModal.tsx +++ b/components/modal/event/WelcomeModal.tsx @@ -1,19 +1,18 @@ import { useSetRecoilState } from 'recoil'; import { Modal } from 'types/modalTypes'; import useAxiosGet from 'hooks/useAxiosGet'; -import useMockAxiosGet from 'hooks/useAxiosGet'; +import { useMockAxiosGet } from 'hooks/useAxiosGet'; import { useState, useEffect } from 'react'; +import { instance } from 'utils/axios'; import { CoinResult } from 'types/coinTypes'; import { modalState } from 'utils/recoil/modal'; +import { errorState } from 'utils/recoil/error'; import styles from 'styles/modal/event/WelcomeModal.module.scss'; export default function WelcomeModal() { const setModal = useSetRecoilState(modalState); - const [coin, setCoin] = useState({ - afterCoin: 6, - beforeCoin: 3, - coinIncrement: 3, - }); + const [coin, setCoin] = useState(); + const setError = useSetRecoilState(errorState); const content = { title: 'Welcome!', @@ -21,7 +20,22 @@ export default function WelcomeModal() { '42GG에 오신걸 환영합니다.\n당신의 행복한 탁구 생활을\n응원합니다! 총총총...', }; - /* const postCoinHandler = useMockAxiosGet({ + /* const postCoinHandler = async() => { + try { + const res = await instance.post( + `/pingpong/users/attendance` + ); + setCoin(res.data); + } catch (error) { + setError('SM01'); + } + }; + + useEffect(() => { + postCoinHandler(); + }, []); */ + + const getCoinHandler = useMockAxiosGet({ url: `/users/attendance`, setState: setCoin, err: 'SM01', @@ -30,7 +44,7 @@ export default function WelcomeModal() { useEffect(() => { getCoinHandler(); - }, []); */ + }, []); const openPageManual = () => { window.open( @@ -51,6 +65,16 @@ export default function WelcomeModal() { }); }; + const openStatChangeModal = () => { + setModal({ + modalName: 'FIXED-STAT', + exp: { + gameId: 0, + mode: 'RANK', + }, + }); + }; + return (
@@ -58,6 +82,10 @@ export default function WelcomeModal() {
{content.title}
{content.message}
+
+ {`@`} + {`)->->--`} +
@@ -65,7 +93,7 @@ export default function WelcomeModal() {
diff --git a/components/modal/statChange/StatChangeModal.tsx b/components/modal/statChange/StatChangeModal.tsx index b7c4ab153..cb12dbea3 100644 --- a/components/modal/statChange/StatChangeModal.tsx +++ b/components/modal/statChange/StatChangeModal.tsx @@ -7,6 +7,8 @@ import { reloadMatchState } from 'utils/recoil/match'; import ExpStat from './ExpStat'; import PppStat from 'components/modal/statChange/PppStat'; import useAxiosGet from 'hooks/useAxiosGet'; +import { useMockAxiosGet } from 'hooks/useAxiosGet'; +import { CoinResult } from 'types/coinTypes'; import styles from 'styles/modal/afterGame/StatChangeModal.module.scss'; export default function StatChangeModal({ gameId, mode }: Exp) { @@ -17,20 +19,44 @@ export default function StatChangeModal({ gameId, mode }: Exp) { getExpHandler(); }, []); - const getExpHandler = useAxiosGet({ + /* const getExpHandler = useAxiosGet({ url: `/pingpong/games/${gameId}/result/${mode?.toLowerCase()}`, setState: setStat, err: 'KP03', type: 'setError', + }); */ + + const getExpHandler = useMockAxiosGet({ + url: `/games/normal`, + setState: setStat, + err: 'KP03', + type: 'setError', }); const closeModal = () => { setReloadMatch(true); setModal({ modalName: null }); + openCoin(); }; + /* async function openChangeModal() { + await new Promise((resolve) => setTimeout(resolve, 2000)); // 2초 대기 + openStatChangeModal(); + } */ + if (!stat) return null; + const openCoin = () => { + setModal({ + modalName: 'COIN-ANIMATION', + CoinResult: { + afterCoin: stat.afterCoin, + beforeCoin: stat.beforeCoin, + coinIncrement: stat.coinIncrement, + }, + }); + }; + return (
{ +const useGetUserSeason = (presentPath: string) => { const setUser = useSetRecoilState(userState); const setSeasonList = useSetRecoilState(seasonListState); + const isLogIn = useRecoilValue(loginState); + const user = useRecoilValue(userState); - const getUserHandler = useAxiosGet({ + const setModal = useSetRecoilState(modalState); + + /* const getUserHandler = useAxiosGet({ url: '/pingpong/users', setState: setUser, err: 'JB02', type: 'setError', + }); */ + + const getUserHandler = useMockAxiosGet({ + url: '/users/user', + setState: setUser, + err: 'JB02', + type: 'setError', }); const getSeasonListHandler = useAxiosGet({ @@ -26,10 +41,17 @@ const useGetUserSeason = () => { type: 'setError', }); + useEffect(() => { + console.log(user.isAttended, presentPath === '/', isLogIn); + if (user.isAttended && presentPath === '/' && isLogIn) { + setModal({ modalName: 'EVENT-WELCOME' }); + } + }, [user.isAttended, presentPath, isLogIn]); + useEffect(() => { getUserHandler(); getSeasonListHandler(); - }, []); + }, [presentPath, isLogIn]); }; export default useGetUserSeason; diff --git a/hooks/modal/aftergame/useSubmitModal.ts b/hooks/modal/aftergame/useSubmitModal.ts index 3a2fcf402..be823a33c 100644 --- a/hooks/modal/aftergame/useSubmitModal.ts +++ b/hooks/modal/aftergame/useSubmitModal.ts @@ -3,8 +3,6 @@ import { AfterGame, TeamScore } from 'types/scoreTypes'; import { reloadMatchState } from 'utils/recoil/match'; import { modalState } from 'utils/recoil/modal'; import { errorState } from 'utils/recoil/error'; -import { CoinResult } from 'types/coinTypes'; -import { useState, useEffect } from 'react'; import axios from 'axios'; import { instance } from 'utils/axios'; @@ -32,16 +30,6 @@ const useSubmitModal = (currentGame: AfterGame) => { const setError = useSetRecoilState(errorState); const setModal = useSetRecoilState(modalState); const setReloadMatch = useSetRecoilState(reloadMatchState); - const [normalcoin, setNormalCoin] = useState({ - afterCoin: 8, - beforeCoin: 6, - coinIncrement: 2, - }); - const [rankcoin, setRankCoin] = useState({ - afterCoin: 10, - beforeCoin: 5, - coinIncrement: 5, - }); const { gameId, matchTeamsInfo, mode } = currentGame; const { myTeam, enemyTeam } = matchTeamsInfo; @@ -73,14 +61,8 @@ const useSubmitModal = (currentGame: AfterGame) => { return; } } - openChangeModal(); - }; - - async function openChangeModal() { openStatChangeModal(); - await new Promise((resolve) => setTimeout(resolve, 2000)); // 2초 대기 - openRankCoin(); - } + }; const submitNormalHandler = async () => { const requestBody: normalRequest = { @@ -92,7 +74,7 @@ const useSubmitModal = (currentGame: AfterGame) => { setError('KP04'); return; } - openChangeModal(); + openStatChangeModal(); }; const openStatChangeModal = () => { @@ -105,28 +87,6 @@ const useSubmitModal = (currentGame: AfterGame) => { }); }; - const openNormalCoin = () => { - setModal({ - modalName: 'COIN-ANIMATION', - CoinResult: { - afterCoin: normalcoin?.afterCoin, - beforeCoin: normalcoin?.beforeCoin, - coinIncrement: normalcoin?.coinIncrement, - }, - }); - }; - - const openRankCoin = () => { - setModal({ - modalName: 'COIN-ANIMATION', - CoinResult: { - afterCoin: rankcoin?.afterCoin, - beforeCoin: rankcoin?.beforeCoin, - coinIncrement: rankcoin?.coinIncrement, - }, - }); - }; - return { submitRankHandler, submitNormalHandler, diff --git a/pages/api/pingpong/games/normal.ts b/pages/api/pingpong/games/normal.ts new file mode 100644 index 000000000..85833b319 --- /dev/null +++ b/pages/api/pingpong/games/normal.ts @@ -0,0 +1,23 @@ +import type { NextApiRequest, NextApiResponse } from 'next'; +import { GameResult } from 'types/gameTypes'; + +export default function handler( + req: NextApiRequest, + res: NextApiResponse +) { + const GameResultData: GameResult = { + beforeExp: 100, + beforeMaxExp: 300, + beforeLevel: 3, + increasedExp: 200, + increasedLevel: 4, + afterMaxExp: 500, + changedPpp: 100, + beforePpp: 1000, + beforeCoin: 3, + afterCoin: 6, + coinIncrement: 3, + }; + + res.status(200).json(GameResultData); +} diff --git a/pages/api/pingpong/games/rank.ts b/pages/api/pingpong/games/rank.ts new file mode 100644 index 000000000..85833b319 --- /dev/null +++ b/pages/api/pingpong/games/rank.ts @@ -0,0 +1,23 @@ +import type { NextApiRequest, NextApiResponse } from 'next'; +import { GameResult } from 'types/gameTypes'; + +export default function handler( + req: NextApiRequest, + res: NextApiResponse +) { + const GameResultData: GameResult = { + beforeExp: 100, + beforeMaxExp: 300, + beforeLevel: 3, + increasedExp: 200, + increasedLevel: 4, + afterMaxExp: 500, + changedPpp: 100, + beforePpp: 1000, + beforeCoin: 3, + afterCoin: 6, + coinIncrement: 3, + }; + + res.status(200).json(GameResultData); +} diff --git a/pages/api/pingpong/users/attendance.ts b/pages/api/pingpong/users/attendance.ts index 883239089..d12e51acd 100644 --- a/pages/api/pingpong/users/attendance.ts +++ b/pages/api/pingpong/users/attendance.ts @@ -5,11 +5,9 @@ export default function handler( req: NextApiRequest, res: NextApiResponse ) { - //const {method} = req; - const bcoin = 3; - const acoin = 3; - const icoin = 3; + const acoin = 9; + const icoin = 6; const coinData: CoinResult = { beforeCoin: bcoin, @@ -17,7 +15,5 @@ export default function handler( coinIncrement: icoin, }; - //if (method == 'GET') { res.status(200).json(coinData); - //} } diff --git a/pages/api/pingpong/users/user.ts b/pages/api/pingpong/users/user.ts new file mode 100644 index 000000000..8b5d505ff --- /dev/null +++ b/pages/api/pingpong/users/user.ts @@ -0,0 +1,19 @@ +import type { NextApiRequest, NextApiResponse } from 'next'; +import { User } from 'types/mainType'; + +export default function handler( + req: NextApiRequest, + res: NextApiResponse +) { + const userData: User = { + intraId: 'sangmipa', + isAdmin: true, + userImageUri: + 'https://42gg-public-test-image.s3.ap-northeast-2.amazonaws.com/images/yoahn-1a995822-19d6-499a-a494-0a566395a64b.jpeg', + isAttended: true, + tierImageUri: + 'https://42gg-public-test-image.s3.ap-northeast-2.amazonaws.com/images/cheolee-69dec7cb-63ce-4d29-8591-c3ac83da7bf9.jpeg', + }; + + res.status(200).json(userData); +} diff --git a/styles/modal/event/WelcomeModal.module.scss b/styles/modal/event/WelcomeModal.module.scss index c740c26fc..5cd712a5a 100644 --- a/styles/modal/event/WelcomeModal.module.scss +++ b/styles/modal/event/WelcomeModal.module.scss @@ -7,17 +7,15 @@ .phrase { @include modal-phrase; white-space: pre-wrap; - margin-bottom: 0rem; .title { @include modalTitle; - padding-bottom: 1rem; + padding-bottom: 2rem; color: rgba(90, 14, 102, 1); text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.25); } .message { font-family: 'NanumSquare_acR'; line-height: 150%; - padding: 1rem; } .rose { padding-top: 1rem; diff --git a/types/gameTypes.ts b/types/gameTypes.ts index 80589d8ab..0f6342eb4 100644 --- a/types/gameTypes.ts +++ b/types/gameTypes.ts @@ -44,4 +44,7 @@ export type GameResult = { afterMaxExp: number; changedPpp?: number; beforePpp?: number; + beforeCoin: number; + afterCoin: number; + coinIncrement: number; }; diff --git a/types/mainType.ts b/types/mainType.ts index 344f3eb98..7de45763b 100644 --- a/types/mainType.ts +++ b/types/mainType.ts @@ -6,11 +6,6 @@ export interface User { intraId: string; isAdmin: boolean; userImageUri: string; -} -export interface User_v3 { - intraId: string; - isAdmin: boolean; - userImageUri: string; isAttended: boolean; tierImageUri: string; } diff --git a/utils/recoil/layout.ts b/utils/recoil/layout.ts index 94cb58080..27a692f3c 100644 --- a/utils/recoil/layout.ts +++ b/utils/recoil/layout.ts @@ -8,6 +8,8 @@ export const userState = atom({ intraId: '', isAdmin: false, userImageUri: '', + isAttended: false, + tierImageUri: '', }, }); From 056adb9265842574522a651b940758d7654271d3 Mon Sep 17 00:00:00 2001 From: Sangmin Park Date: Mon, 7 Aug 2023 13:49:18 +0900 Subject: [PATCH 6/8] =?UTF-8?q?[Style]=20[GGFE-141]=20imageuri=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/api/pingpong/users/user.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/api/pingpong/users/user.ts b/pages/api/pingpong/users/user.ts index 8b5d505ff..f7aabbf84 100644 --- a/pages/api/pingpong/users/user.ts +++ b/pages/api/pingpong/users/user.ts @@ -9,10 +9,10 @@ export default function handler( intraId: 'sangmipa', isAdmin: true, userImageUri: - 'https://42gg-public-test-image.s3.ap-northeast-2.amazonaws.com/images/yoahn-1a995822-19d6-499a-a494-0a566395a64b.jpeg', + '/Users/sangminpark/Desktop/42gg.client/public/image/fallBackSrc.jpeg', isAttended: true, tierImageUri: - 'https://42gg-public-test-image.s3.ap-northeast-2.amazonaws.com/images/cheolee-69dec7cb-63ce-4d29-8591-c3ac83da7bf9.jpeg', + '/Users/sangminpark/Desktop/42gg.client/public/image/fallBackSrc.jpeg', }; res.status(200).json(userData); From a2d39cd49a76f679d8f7f9e7e50cd0b4335ff5df Mon Sep 17 00:00:00 2001 From: Sangmin Park Date: Mon, 7 Aug 2023 13:49:55 +0900 Subject: [PATCH 7/8] =?UTF-8?q?[Style]=20[GGFE-141]=20imageuri=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/api/pingpong/users/user.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/pages/api/pingpong/users/user.ts b/pages/api/pingpong/users/user.ts index f7aabbf84..e6c9d573f 100644 --- a/pages/api/pingpong/users/user.ts +++ b/pages/api/pingpong/users/user.ts @@ -8,11 +8,9 @@ export default function handler( const userData: User = { intraId: 'sangmipa', isAdmin: true, - userImageUri: - '/Users/sangminpark/Desktop/42gg.client/public/image/fallBackSrc.jpeg', + userImageUri: '/image/fallBackSrc.jpeg', isAttended: true, - tierImageUri: - '/Users/sangminpark/Desktop/42gg.client/public/image/fallBackSrc.jpeg', + tierImageUri: '/image/fallBackSrc.jpeg', }; res.status(200).json(userData); From 07f2e21b895a9c51e56dc0f02256268a90086e12 Mon Sep 17 00:00:00 2001 From: Sangmin Park Date: Mon, 7 Aug 2023 14:14:06 +0900 Subject: [PATCH 8/8] =?UTF-8?q?[Style]=20[GGFE-141]=20=ED=95=84=EC=9A=94?= =?UTF-8?q?=EC=97=86=EB=8A=94=20=EB=B6=80=EB=B6=84=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/modal/statChange/StatChangeModal.tsx | 5 ----- hooks/Layout/useGetUserSeason.ts | 1 - 2 files changed, 6 deletions(-) diff --git a/components/modal/statChange/StatChangeModal.tsx b/components/modal/statChange/StatChangeModal.tsx index cb12dbea3..18e872edc 100644 --- a/components/modal/statChange/StatChangeModal.tsx +++ b/components/modal/statChange/StatChangeModal.tsx @@ -39,11 +39,6 @@ export default function StatChangeModal({ gameId, mode }: Exp) { openCoin(); }; - /* async function openChangeModal() { - await new Promise((resolve) => setTimeout(resolve, 2000)); // 2초 대기 - openStatChangeModal(); - } */ - if (!stat) return null; const openCoin = () => { diff --git a/hooks/Layout/useGetUserSeason.ts b/hooks/Layout/useGetUserSeason.ts index 7331c5acf..3837c87c8 100644 --- a/hooks/Layout/useGetUserSeason.ts +++ b/hooks/Layout/useGetUserSeason.ts @@ -42,7 +42,6 @@ const useGetUserSeason = (presentPath: string) => { }); useEffect(() => { - console.log(user.isAttended, presentPath === '/', isLogIn); if (user.isAttended && presentPath === '/' && isLogIn) { setModal({ modalName: 'EVENT-WELCOME' }); }