diff --git a/packages/web/src/atoms/event2024SpringInfo.ts b/packages/web/src/atoms/event2024SpringInfo.ts index d92f8cf06..7c50895ce 100644 --- a/packages/web/src/atoms/event2024SpringInfo.ts +++ b/packages/web/src/atoms/event2024SpringInfo.ts @@ -6,6 +6,8 @@ export type Event2024SpringInfoType = Nullable<{ isAgreeOnTermsOfEvent: boolean; completedQuests: QuestId[]; creditAmount: number; + groupCreditAmount: number; + group: number; ticket1Amount: number; ticket2Amount: number; quests: Quest[]; diff --git a/packages/web/src/components/Event/CreditAmoutContainer/index.tsx b/packages/web/src/components/Event/CreditAmoutContainer/index.tsx index a67bb70c9..b22367845 100644 --- a/packages/web/src/components/Event/CreditAmoutContainer/index.tsx +++ b/packages/web/src/components/Event/CreditAmoutContainer/index.tsx @@ -1,26 +1,61 @@ import { useValueRecoilState } from "@/hooks/useFetchRecoilState"; +import WhiteContainer from "@/components/WhiteContainer"; + import eventTheme from "@/tools/eventTheme"; +import theme from "@/tools/theme"; + +import CoinIcon from "@/static/events/2024springCoin.gif"; -import coin from "@/static/events/2024springCoin.gif"; +type CreditAmountContainerProps = Parameters[0]; -const CreditAmountContainer = () => { - const { creditAmount } = useValueRecoilState("event2024SpringInfo") || {}; +const CreditAmountContainer = ({ + ...whiteContainerProps +}: CreditAmountContainerProps) => { + const { creditAmount, group, groupCreditAmount } = + useValueRecoilState("event2024SpringInfo") || {}; return ( -
- coin - {creditAmount ? ("000" + creditAmount).slice(-4) : "000"} -
+
+
+ 새터 {group}반 넙죽코인 +
+ coin +
+ {groupCreditAmount ? ("000" + groupCreditAmount).slice(-4) : "000"} +
+
+
+
+ 내가 획득한 넙죽코인 +
+ coin +
+ {creditAmount ? ("000" + creditAmount).slice(-4) : "000"} +
+
+ ); }; diff --git a/packages/web/src/components/Event/SuggestJoinEventContainer/index.tsx b/packages/web/src/components/Event/SuggestJoinEventContainer/index.tsx new file mode 100644 index 000000000..14b739fe9 --- /dev/null +++ b/packages/web/src/components/Event/SuggestJoinEventContainer/index.tsx @@ -0,0 +1,125 @@ +import { memo, useMemo, useState } from "react"; + +import { useIsLogin, useValueRecoilState } from "@/hooks/useFetchRecoilState"; + +import Button from "@/components/Button"; +import { + ModalEvent2023FallJoin, + ModalNotification, +} from "@/components/ModalPopup"; +import WhiteContainer from "@/components/WhiteContainer"; + +import eventTheme from "@/tools/eventTheme"; +import theme from "@/tools/theme"; + +const SuggestJoinEventContainer = () => { + const isLogin = useIsLogin(); + const { isAgreeOnTermsOfEvent, completedQuests } = + useValueRecoilState("event2024SpringInfo") || {}; + + const randomToken = useMemo(() => !!Math.floor(Math.random() * 2), []); + const [isOpenJoin, setIsOpenJoin] = useState(false); + const [isOpenNotification, setIsOpenNotification] = useState(false); + + const styleButton = { + padding: "12px", + borderRadius: "12px", + ...eventTheme.font12_bold, + background: eventTheme.blue_title, + }; + const styleTitle = { + ...eventTheme.font16_bold, + background: eventTheme.blue_title, + backgroundClip: "text", + textFillColor: "transparent", + marginBottom: "4px", + }; + const styleDescription = { + ...eventTheme.font10, + color: theme.white, + margin: "12px", + }; + + return ( + <> + {!isLogin ? null : !isAgreeOnTermsOfEvent ? ( + +
🌟 첫 발걸음
+
+ 이벤트 참여 동의 이후 퀘스트 달성이 가능합니다. 많은 혜택과 기회를 + 놓치지 마세요! +
+ + + ) : randomToken && + completedQuests && + !completedQuests.includes("adPushAgreement") ? ( + +
🌟 Taxi의 소울메이트
+
+ Taxi 서비스를 잊지 않도록 가끔 찾아갈게요! 광고성 푸시 알림 수신 + 동의를 해주시면 방이 많이 모이는 시즌, 주변에 택시앱 사용자가 있을 + 때 알려드릴 수 있어요. +
+ + + ) : completedQuests && !completedQuests.includes("adPushAgreement") ? ( + +
🌟 Taxi의 소울메이트
+
+ Taxi 서비스를 잊지 않도록 가끔 찾아갈게요! 광고성 푸시 알림 수신 + 동의를 해주시면 방이 많이 모이는 시즌, 주변에 택시앱 사용자가 있을 + 때 알려드릴 수 있어요. +
+ + + ) : null} + + + + ); +}; + +export default memo(SuggestJoinEventContainer); diff --git a/packages/web/src/components/Skeleton/index.tsx b/packages/web/src/components/Skeleton/index.tsx index 40ff90508..46a2bb9db 100644 --- a/packages/web/src/components/Skeleton/index.tsx +++ b/packages/web/src/components/Skeleton/index.tsx @@ -92,7 +92,13 @@ const Skeleton = ({ children }: SkeletonProps) => { )} {children} - {isDisplayNavigation &&
} + {isDisplayNavigation && ( +
+ )} )} diff --git a/packages/web/src/hooks/event/useEventBackgroundEffect.ts b/packages/web/src/hooks/event/useEventBackgroundEffect.ts new file mode 100644 index 000000000..1543bd0de --- /dev/null +++ b/packages/web/src/hooks/event/useEventBackgroundEffect.ts @@ -0,0 +1,13 @@ +import { CSSProperties, useEffect } from "react"; + +export const useEventBackgroundEffect = ( + color: CSSProperties["color"] = "#000000" +) => { + useEffect(() => { + const prevBackground = document.body.style.background; + document.body.style.background = color; + return () => { + document.body.style.background = prevBackground; + }; + }, [color]); +}; diff --git a/packages/web/src/pages/Event/Event2024SpringMissions.tsx b/packages/web/src/pages/Event/Event2024SpringMissions.tsx index 4b26ba44d..b2425347d 100644 --- a/packages/web/src/pages/Event/Event2024SpringMissions.tsx +++ b/packages/web/src/pages/Event/Event2024SpringMissions.tsx @@ -1,27 +1,28 @@ import { memo, useMemo } from "react"; -import type { Quest } from "@/types/event2023fall"; +import type { Quest } from "@/types/event2024spring"; +import { useEventBackgroundEffect } from "@/hooks/event/useEventBackgroundEffect"; import { useValueRecoilState } from "@/hooks/useFetchRecoilState"; import AdaptiveDiv from "@/components/AdaptiveDiv"; -import CreditAmountStatusContainer from "@/components/Event/CreditAmountStatusContainer"; -import WhiteContainerSuggestJoinEvent from "@/components/Event/WhiteContainerSuggestJoinEvent"; +import CreditAmountContainer from "@/components/Event/CreditAmoutContainer"; +import SuggestJoinEventContainer from "@/components/Event/SuggestJoinEventContainer"; import Footer from "@/components/Footer"; import HeaderWithBackButton from "@/components/Header/HeaderWithBackButton"; import WhiteContainer from "@/components/WhiteContainer"; +import eventTheme from "@/tools/eventTheme"; import theme from "@/tools/theme"; -import { ReactComponent as CreditIcon } from "@/static/events/2023fallCredit.svg"; -import { ReactComponent as MissionCompleteIcon } from "@/static/events/2023fallMissionComplete.svg"; -import { ReactComponent as Ticket1Icon } from "@/static/events/2023fallTicket1.svg"; +import Coin from "@/static/events/2024springCoin.gif"; +import { ReactComponent as CoinComplete } from "@/static/events/2024springCoinComplete.svg"; type MissionContainerProps = { quest: Quest; }; const MissionContainer = ({ quest }: MissionContainerProps) => { - const { completedQuests } = useValueRecoilState("event2023FallInfo") || {}; + const { completedQuests } = useValueRecoilState("event2024SpringInfo") || {}; const [isDone, questCompletedCnt] = useMemo(() => { const cnt = completedQuests?.filter((questId) => questId === quest?.id).length || 0; @@ -64,13 +65,19 @@ const MissionContainer = ({ quest }: MissionContainerProps) => { flexGrow: 1, }; const styleTitle = { - ...theme.font16_bold, - color: isDone ? theme.gray_text : theme.black, + ...eventTheme.font16_bold, + background: isDone ? theme.gray_text : eventTheme.blue_title, + backgroundClip: "text", + textFillColor: "transparent", marginBottom: "4px", }; const styleDescription = { - ...theme.font12, - color: isDone ? theme.gray_text : theme.black, + ...eventTheme.font10, + color: isDone ? theme.gray_text : theme.white, + "& *": { + ...eventTheme.font10, + color: isDone ? theme.gray_text : theme.white, + }, }; const styleReward = { display: "flex", @@ -78,100 +85,87 @@ const MissionContainer = ({ quest }: MissionContainerProps) => { gap: "4px", }; const styleRewardText = { - ...theme.font12_bold, - color: isDone ? theme.gray_text : theme.black, + ...eventTheme.font12, + color: isDone ? theme.gray_text : theme.white, }; - const styleStamp = { - position: "absolute" as const, - right: "-10px", - bottom: "-10px", - width: "100px", - height: "100px", - opacity: 0.5, + const styleRewardCoin = { + ...eventTheme.font12_bold, + color: isDone ? theme.gray_text : theme.white, }; return (
-
-
-
- {quest.name} - {isDone &&
} + > +
+
+
+ {quest.name} + {isDone &&
} +
+
+
+
{quest.name}
+
-
-
{quest.name}
-
-
-
-
-
- 달성 {questCompletedCnt}번 / 최대 {quest.maxCount}번 -
-
- {!isDone && ( +
+
+ {questCompletedCnt}회 달성{" "} + {quest.maxCount > 0 + ? `(최대 ${quest.maxCount}회)` + : `(무제한 달성 가능)`} +
+
<> -
달성 시에
- {quest.reward.credit ? ( - + {isDone ? ( + ) : ( - + coin )} -
- X {quest.reward.credit + (quest.reward.ticket1 || 0)} 획득 -
+ +
{quest.reward.credit}
- )} +
+ {/* {isDone && } */}
- {isDone && } ); }; const Event2024SpringMissions = () => { - const { quests } = useValueRecoilState("event2023FallInfo") || {}; + const { quests } = useValueRecoilState("event2024SpringInfo") || {}; + useEventBackgroundEffect(); return ( - <> +
퀘스트
- - + + {quests?.map((quest) => ( ))} -
+
- +
); }; diff --git a/packages/web/src/pages/Event/index.tsx b/packages/web/src/pages/Event/index.tsx index 7b89d5d64..14f6c9592 100644 --- a/packages/web/src/pages/Event/index.tsx +++ b/packages/web/src/pages/Event/index.tsx @@ -39,7 +39,7 @@ const Event = () => { case "2024spring-leaderboard": return ; default: - return ; + return ; } }; diff --git a/packages/web/src/pages/Home/EventSection/EventSection2024Spring.tsx b/packages/web/src/pages/Home/EventSection/EventSection2024Spring.tsx index 919efccf1..d4840a4c0 100644 --- a/packages/web/src/pages/Home/EventSection/EventSection2024Spring.tsx +++ b/packages/web/src/pages/Home/EventSection/EventSection2024Spring.tsx @@ -69,7 +69,7 @@ const EventSection2024Spring = () => { paddingBottom: "15px", }} > -
{ color: eventTheme.white, }} > - 새터 00반 넙죽코인 - -
+ 새터 00반 넙죽코인 */} + + {/*
*/}
+ + + + + + + + + + + + + + + + + + diff --git a/packages/web/src/static/events/2024springCoinComplete.svg b/packages/web/src/static/events/2024springCoinComplete.svg new file mode 100644 index 000000000..409907fc5 --- /dev/null +++ b/packages/web/src/static/events/2024springCoinComplete.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/web/src/tools/eventTheme.ts b/packages/web/src/tools/eventTheme.ts index fd42a17a5..20116e0c5 100644 --- a/packages/web/src/tools/eventTheme.ts +++ b/packages/web/src/tools/eventTheme.ts @@ -29,14 +29,6 @@ const eventTheme = { borderRadius: "12px", // Font Size - font12: { - fontFamily: "Galmuri11", - fontWeight: 400, - fontSize: 12, - letterSpacing: "0.048px", - lineHeight: "14px", - }, - font16: { fontFamily: "Galmuri11", fontWeight: 400, @@ -53,6 +45,30 @@ const eventTheme = { lineHeight: "19px", }, + font12: { + fontFamily: "Galmuri11", + fontSize: 12, + letterSpacing: -0.4, + fontWeight: 400, + lineHeight: "19px", + }, + + font12_bold: { + fontFamily: "Galmuri11", + fontSize: 12, + letterSpacing: -0.4, + fontWeight: 700, + lineHeight: "19px", + }, + + font10: { + fontFamily: "Galmuri11", + fontSize: 10, + letterSpacing: -0.4, + fontWeight: 400, + lineHeight: "19px", + }, + font20: { fontFamily: "Galmuri11", fontSize: 20,