Merge pull request #732 from sparcs-kaist/#728-2024-봄-이벤트-퀘스트-페이지-만들기

#728 2024 봄 이벤트 퀘스트 페이지 만들기
sparcs-kaist · Feb 19, 2024 · d14ac50 · d14ac50
2 parents 012b747 + f33c3f8
commit d14ac50
Show file tree

Hide file tree

Showing 13 changed files with 321 additions and 100 deletions.
diff --git 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
@@ -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<typeof WhiteContainer>[0];
 
-const CreditAmountContainer = () => {
-  const { creditAmount } = useValueRecoilState("event2024SpringInfo") || {};
+const CreditAmountContainer = ({
+  ...whiteContainerProps
+}: CreditAmountContainerProps) => {
+  const { creditAmount, group, groupCreditAmount } =
+    useValueRecoilState("event2024SpringInfo") || {};
 
   return (
-    <div
+    <WhiteContainer
       css={{
-        ...eventTheme.font16_bold,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: "8px",
-        color: eventTheme.white,
+        padding: "14px 16px",
+        background: eventTheme.black,
+        border: "1px solid #FFF",
       }}
+      {...whiteContainerProps}
     >
-      <img width="24px" src={coin} alt="coin" />
-      {creditAmount ? ("000" + creditAmount).slice(-4) : "000"}
-    </div>
+      <div
+        css={{
+          display: "flex",
+          gap: "8px",
+          alignItems: "center",
+        }}
+      >
+        <div css={{ color: theme.white, ...eventTheme.font16, flexGrow: 1 }}>
+          새터 {group}반 넙죽코인
+        </div>
+        <img width="27px" src={CoinIcon} alt="coin" />
+        <div css={{ color: theme.white, ...eventTheme.font16_bold }}>
+          {groupCreditAmount ? ("000" + groupCreditAmount).slice(-4) : "000"}
+        </div>
+      </div>
+      <div
+        css={{
+          display: "flex",
+          gap: "4px",
+          alignItems: "center",
+          marginTop: "12px",
+        }}
+      >
+        <div css={{ color: theme.white, ...eventTheme.font12, flexGrow: 1 }}>
+          내가 획득한 넙죽코인
+        </div>
+        <img width="16px" src={CoinIcon} alt="coin" />
+        <div css={{ color: theme.white, ...eventTheme.font12_bold }}>
+          {creditAmount ? ("000" + creditAmount).slice(-4) : "000"}
+        </div>
+      </div>
+    </WhiteContainer>
   );
 };
 

diff --git a/packages/web/src/components/Event/SuggestJoinEventContainer/index.tsx 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<boolean>(false);
+  const [isOpenNotification, setIsOpenNotification] = useState<boolean>(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 ? (
+        <WhiteContainer
+          css={{
+            padding: "14px 16px",
+            background: eventTheme.black,
+            border: "1px solid #FFF",
+          }}
+        >
+          <div css={styleTitle}>🌟 첫 발걸음</div>
+          <div css={styleDescription}>
+            이벤트 참여 동의 이후 퀘스트 달성이 가능합니다. 많은 혜택과 기회를
+            놓치지 마세요!
+          </div>
+          <Button
+            type="purple"
+            css={styleButton}
+            onClick={() => setIsOpenJoin(true)}
+          >
+            이벤트 참여하기
+          </Button>
+        </WhiteContainer>
+      ) : randomToken &&
+        completedQuests &&
+        !completedQuests.includes("adPushAgreement") ? (
+        <WhiteContainer
+          css={{
+            padding: "14px 16px",
+            background: eventTheme.black,
+            border: "1px solid #FFF",
+          }}
+        >
+          <div css={styleTitle}>🌟 Taxi의 소울메이트</div>
+          <div css={styleDescription}>
+            Taxi 서비스를 잊지 않도록 가끔 찾아갈게요! 광고성 푸시 알림 수신
+            동의를 해주시면 방이 많이 모이는 시즌, 주변에 택시앱 사용자가 있을
+            때 알려드릴 수 있어요.
+          </div>
+          <Button
+            type="purple"
+            css={styleButton}
+            onClick={() => setIsOpenNotification(true)}
+          >
+            광고성 푸시 알림 수신 동의하고 넙죽코인 50개 얻기
+          </Button>
+        </WhiteContainer>
+      ) : completedQuests && !completedQuests.includes("adPushAgreement") ? (
+        <WhiteContainer
+          css={{
+            padding: "14px 16px",
+            background: eventTheme.black,
+            border: "1px solid #FFF",
+          }}
+        >
+          <div css={styleTitle}>🌟 Taxi의 소울메이트</div>
+          <div css={styleDescription}>
+            Taxi 서비스를 잊지 않도록 가끔 찾아갈게요! 광고성 푸시 알림 수신
+            동의를 해주시면 방이 많이 모이는 시즌, 주변에 택시앱 사용자가 있을
+            때 알려드릴 수 있어요.
+          </div>
+          <Button
+            type="purple"
+            css={styleButton}
+            onClick={() => setIsOpenNotification(true)}
+          >
+            광고성 푸시 알림 수신 동의하고 넙죽코인 50개 얻기
+          </Button>
+        </WhiteContainer>
+      ) : null}
+      <ModalEvent2023FallJoin
+        isOpen={isOpenJoin}
+        onChangeIsOpen={setIsOpenJoin}
+      />
+      <ModalNotification
+        isOpen={isOpenNotification}
+        onChangeIsOpen={setIsOpenNotification}
+      />
+    </>
+  );
+};
+
+export default memo(SuggestJoinEventContainer);
diff --git 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}
           <ModalTerms isOpen={!!userId && !isAgreeOnTermsOfService} />
-          {isDisplayNavigation && <div css={{ height: "88px" }} />}
+          {isDisplayNavigation && (
+            <div
+              css={{
+                height: "88px",
+              }}
+            />
+          )}
         </>
       )}
     </Container>

diff --git a/packages/web/src/hooks/event/useEventBackgroundEffect.ts 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]);
+};