Merge pull request #749 from sparcs-kaist/dev

Main branch update from Dev branch
sparcs-kaist · Feb 23, 2024 · 4a5a89e · 4a5a89e
2 parents dd4db93 + c02564f
commit 4a5a89e
Show file tree

Hide file tree

Showing 60 changed files with 2,679 additions and 123 deletions.
diff --git a/packages/web/public/2024springEvent-graph.png b/packages/web/public/2024springEvent-graph.png
diff --git a/packages/web/src/Font.css b/packages/web/src/Font.css
@@ -25,3 +25,17 @@
     url("./static/fonts/NanumSquare_acEB.ttf") format("truetype");
   font-weight: 700;
 }
+
+@font-face {
+  font-family: "Galmuri11";
+  src: local("Galmuri11"),
+    url("./static/fonts/Galmuri11.ttf") format("truetype");
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "Galmuri11";
+  src: local("Galmuri11"),
+    url("./static/fonts/Galmuri11-Bold.ttf") format("truetype");
+  font-weight: 700;
+}
diff --git a/packages/web/src/atoms/event2024SpringInfo.ts b/packages/web/src/atoms/event2024SpringInfo.ts
@@ -0,0 +1,22 @@
+import { Quest, QuestId } from "@/types/event2024spring";
+
+import { atom } from "recoil";
+
+export type Event2024SpringInfoType = Nullable<{
+  isAgreeOnTermsOfEvent: boolean;
+  isEligible: boolean;
+  completedQuests: QuestId[];
+  creditAmount: number;
+  groupCreditAmount: number;
+  group: number;
+  ticket1Amount: number;
+  ticket2Amount: number;
+  quests: Quest[];
+}>;
+
+const event2024SpringInfoAtom = atom<Event2024SpringInfoType>({
+  key: "event2024SpringInfoAtom",
+  default: null,
+});
+
+export default event2024SpringInfoAtom;
diff --git a/packages/web/src/components/Event/CreditAmoutContainer/index.tsx b/packages/web/src/components/Event/CreditAmoutContainer/index.tsx
@@ -0,0 +1,62 @@
+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";
+
+type CreditAmountContainerProps = Parameters<typeof WhiteContainer>[0];
+
+const CreditAmountContainer = ({
+  ...whiteContainerProps
+}: CreditAmountContainerProps) => {
+  const { creditAmount, group, groupCreditAmount } =
+    useValueRecoilState("event2024SpringInfo") || {};
+
+  return (
+    <WhiteContainer
+      css={{
+        padding: "14px 16px",
+        background: eventTheme.black,
+        border: "1px solid #FFF",
+      }}
+      {...whiteContainerProps}
+    >
+      <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>
+  );
+};
+
+export default CreditAmountContainer;
diff --git a/packages/web/src/components/Event/EventButton/index.tsx b/packages/web/src/components/Event/EventButton/index.tsx
@@ -0,0 +1,29 @@
+import { HTMLAttributes } from "react";
+
+import eventTheme from "@/tools/eventTheme";
+import theme from "@/tools/theme";
+
+type EventButtonProps = {
+  title: string;
+} & HTMLAttributes<HTMLDivElement>;
+
+const EventButton = ({ title, ...divProps }: EventButtonProps) => {
+  return (
+    <div
+      css={{
+        ...eventTheme.font16_bold,
+        borderRadius: eventTheme.borderRadius,
+        textAlign: "center",
+        lineHeight: "50px",
+        color: theme.white,
+        width: "100%",
+        height: "50px",
+      }}
+      {...divProps}
+    >
+      {title}
+    </div>
+  );
+};
+
+export default EventButton;
diff --git a/packages/web/src/components/Event/SuggestJoinEventContainer/index.tsx b/packages/web/src/components/Event/SuggestJoinEventContainer/index.tsx
@@ -0,0 +1,100 @@
+import { memo, useState } from "react";
+
+import { useIsLogin, useValueRecoilState } from "@/hooks/useFetchRecoilState";
+
+import Button from "@/components/Button";
+import {
+  ModalEvent2024SpringJoin,
+  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 [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>
+      ) : 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}
+      <ModalEvent2024SpringJoin
+        isOpen={isOpenJoin}
+        onChangeIsOpen={setIsOpenJoin}
+      />
+      <ModalNotification
+        isOpen={isOpenNotification}
+        onChangeIsOpen={setIsOpenNotification}
+      />
+    </>
+  );
+};
+
+export default memo(SuggestJoinEventContainer);
diff --git a/packages/web/src/components/Footer/index.tsx b/packages/web/src/components/Footer/index.tsx
@@ -6,9 +6,10 @@ import { ModalCredit, ModalPrivacyPolicy } from "@/components/ModalPopup";
 import ButtonAboveFooter from "./ButtonAboveFooter";
 
 import { ReactComponent as SparcsLogo } from "@/static/assets/sparcsLogos/SparcsLogoWithText.svg";
+import { ReactComponent as SparcsLogoWhite } from "@/static/events/2024SparcsLogoWithTextWhite.svg";
 
 type FooterProps = {
-  type?: "only-logo" | "full" | "event-2023fall";
+  type?: "only-logo" | "full" | "event-2023fall" | "event-2024spring";
   children?: ReactNode;
 };
 
@@ -72,11 +73,45 @@ const Footer = ({ type = "full", children }: FooterProps) => {
           </a>
         </>
       )}
-      <div css={{ padding: "6px" }}>
-        <a href="https://sparcs.org/" target="_blank" rel="noreferrer">
-          <SparcsLogo style={{ height: "27px", opacity: 0.632 }} />
-        </a>
-      </div>
+      {type === "event-2024spring" && (
+        <>
+          <ModalPrivacyPolicy
+            isOpen={isOpenPrivacyPolicy}
+            onChangeIsOpen={setIsOpenPrivacyPolicy}
+          />
+          <ModalCredit
+            defaultSelectedCatagory="2024SpringEvent"
+            isOpen={isOpenCredit}
+            onChangeIsOpen={setIsOpenCredit}
+          />
+          <a className="popup-channeltalk">
+            <ButtonAboveFooter text="채널톡 문의하기" />
+          </a>
+          <ButtonAboveFooter
+            text="개인정보 처리방침"
+            onClick={onClickPrivacyPolicy}
+          />
+          <Link to="/event/2024spring-guide" css={{ textDecoration: "none" }}>
+            <ButtonAboveFooter text="택시 살펴보기" />
+          </Link>
+          <ButtonAboveFooter
+            text="새터반 택시대제전을 만든 사람들"
+            onClick={onClickCredit}
+          />
+          <div css={{ padding: "6px" }}>
+            <a href="https://sparcs.org/" target="_blank" rel="noreferrer">
+              <SparcsLogoWhite style={{ height: "27px", opacity: 0.632 }} />
+            </a>
+          </div>
+        </>
+      )}
+      {type !== "event-2024spring" && (
+        <div css={{ padding: "6px" }}>
+          <a href="https://sparcs.org/" target="_blank" rel="noreferrer">
+            <SparcsLogo style={{ height: "27px", opacity: 0.632 }} />
+          </a>
+        </div>
+      )}
     </div>
   );
 };