Merge pull request #656 from sparcs-kaist/dev

Main branch update from Dev branch

src/atoms/event2023FallInfo.ts

@@ -1,10 +1,13 @@
+import { Quest, QuestId } from "types/event2023fall";
+
 import { atom } from "recoil";
 
 export type Event2023FallInfoType = Nullable<{
   creditAmount: number;
-  eventStatus: string[];
+  completedQuests: QuestId[];
   ticket1Amount: number;
   ticket2Amount: number;
+  quests: Quest[];
 }>;
 
 const event2023FallInfoAtom = atom<Event2023FallInfoType>({

src/components/Chat/MessagesBody/MessageSet/index.tsx

@@ -18,7 +18,7 @@ import { getChatUniquewKey } from "tools/chat/chats";
 import dayjs from "tools/day";
 import theme from "tools/theme";
 
-import { ReactComponent as TaxiIcon } from "static/assets/TaxiAppIcon.svg";
+import { ReactComponent as TaxiIcon } from "static/assets/sparcsLogos/TaxiAppIcon.svg";
 
 type MessageBodyProps = {
   type: (UserChat | BotChat)["type"];

src/components/Empty.tsx

@@ -1,40 +1,41 @@
-import { ReactNode } from "react";
+import { HTMLProps, ReactNode } from "react";
 
 import theme from "tools/theme";
 
 import NotInterestedIcon from "@material-ui/icons/NotInterested";
 
-type ScreenType = "mobile" | "pc";
-
 type EmptyProps = {
-  screen: ScreenType;
-  children: ReactNode;
-  marginBottom?: PixelValue;
-};
+  type: "mobile" | "pc";
+  children?: ReactNode;
+  className?: string;
+} & HTMLProps<HTMLDivElement>;
 
-const Empty = ({ screen, children, marginBottom }: EmptyProps) => {
-  const styleCommon: CSS = {
+const Empty = ({ type, children, className, ...divProps }: EmptyProps) => {
+  const styleCommon = {
     display: "flex",
     justifyContent: "center",
     ...theme.font14_bold,
     color: theme.gray_text,
     columnGap: "6px",
-    marginBottom: marginBottom,
   };
-  const styleMobile: CSS = {
+  const styleMobile = {
     ...styleCommon,
     padding: "24px 0",
     borderRadius: "12px",
     backgroundColor: theme.gray_background,
     border: "0.25px solid " + theme.gray_line,
   };
-  const stylePC: CSS = {
+  const stylePC = {
     ...styleCommon,
     padding: "48px 0 26px",
   };
 
   return (
-    <div style={screen === "pc" ? stylePC : styleMobile}>
+    <div
+      css={type === "pc" ? stylePC : styleMobile}
+      className={className}
+      {...divProps}
+    >
       <NotInterestedIcon style={{ fontSize: "16px" }} />
       {children}
     </div>

src/components/Event/BodyRandomBox/index.tsx

@@ -0,0 +1,103 @@
+import { css, keyframes } from "@emotion/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { ReactComponent as BackPlane } from "static/events/2023fallRandomboxBack.svg";
+import { ReactComponent as FrontPlane } from "static/events/2023fallRandomboxFront.svg";
+import { ReactComponent as FrontPlaneLight } from "static/events/2023fallRandomboxFrontLight.svg";
+import { ReactComponent as LeftPlane } from "static/events/2023fallRandomboxLeft.svg";
+import { ReactComponent as RightPlane } from "static/events/2023fallRandomboxRight.svg";
+import { ReactComponent as RightPlaneLight } from "static/events/2023fallRandomboxRightLight.svg";
+import { ReactComponent as TopPlane } from "static/events/2023fallRandomboxTop.svg";
+
+type BodyRandomBoxProps = {
+  isBoxOpend: boolean;
+  onClickBox?: () => void;
+  itemImageUrl?: string;
+};
+
+const BodyRandomBox = ({
+  isBoxOpend,
+  onClickBox,
+  itemImageUrl,
+}: BodyRandomBoxProps) => {
+  const bodyRef = useRef<HTMLDivElement>(null);
+  const getBodyWidth = useCallback(() => bodyRef.current?.clientWidth || 0, []);
+  const [bodyWidth, setBodyWidth] = useState<number>(getBodyWidth());
+  const boxSize = bodyWidth * 0.6;
+
+  useEffect(() => {
+    const resizeEvent = () => setBodyWidth(getBodyWidth());
+    resizeEvent();
+    window.addEventListener("resize", resizeEvent);
+    return () => window.removeEventListener("resize", resizeEvent);
+  }, []);
+
+  const stylePlane = {
+    position: "absolute" as const,
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+  };
+  const stylePlaneLRInversion = {
+    transform: "scaleX(-1)",
+  };
+  const stylePlaneFlash = css`
+    animation: ${keyframes`
+    0% {
+      opacity: 0;
+    }
+    50% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+    `} 2s linear infinite;
+  `;
+
+  return (
+    <div ref={bodyRef} css={{ height: `${boxSize * 1.3}px` }}>
+      <div
+        css={{
+          width: "1rem",
+          aspectRatio: 1,
+          margin: `${boxSize / 2 + 20}px auto 0`,
+          transform: `scale(${(boxSize / 16) * 0.8})`,
+        }}
+      >
+        <div
+          className={[
+            "c2023fallevent-randombox",
+            ...(isBoxOpend ? ["c2023fallevent-randombox-open"] : []),
+          ].join(" ")}
+          onClick={onClickBox}
+        >
+          <div className="c2023fallevent-randombox-side c2023fallevent-randombox-side-front">
+            <FrontPlane css={stylePlane} />
+            <FrontPlaneLight css={[stylePlane, stylePlaneFlash]} />
+          </div>
+          <div className="c2023fallevent-randombox-side c2023fallevent-randombox-side-back">
+            <BackPlane css={{ ...stylePlane, ...stylePlaneLRInversion }} />
+          </div>
+          <div className="c2023fallevent-randombox-side c2023fallevent-randombox-side-left">
+            <LeftPlane css={{ ...stylePlane, ...stylePlaneLRInversion }} />
+          </div>
+          <div className="c2023fallevent-randombox-side c2023fallevent-randombox-side-right">
+            {/* <RightPlaneLight css={stylePlane} />
+              <RightPlane css={[stylePlane, stylePlaneFlash]} /> */}
+            <RightPlane css={stylePlane} />
+            <RightPlaneLight css={[stylePlane, stylePlaneFlash]} />
+          </div>
+          <div className="c2023fallevent-randombox-side c2023fallevent-randombox-side-top">
+            <TopPlane css={stylePlane} />
+          </div>
+          <div className="c2023fallevent-randombox-side c2023fallevent-randombox-side-bottom" />
+          <div className="c2023fallevent-emoji">🎟</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BodyRandomBox;

src/components/Footer/ButtonAboveFooter.tsx

@@ -0,0 +1,23 @@
+import theme from "tools/theme";
+
+type ButtonAboveFooterProps = {
+  text: string;
+  onClick?: () => void;
+};
+
+const ButtonAboveFooter = ({ text, onClick }: ButtonAboveFooterProps) => (
+  <div css={{ ...theme.font12, padding: "6px" }}>
+    <a
+      onClick={onClick}
+      style={{
+        textDecoration: "none",
+        color: theme.gray_text,
+        ...theme.cursor(),
+      }}
+    >
+      {text}
+    </a>
+  </div>
+);
+
+export default ButtonAboveFooter;

src/components/Footer/index.tsx

@@ -0,0 +1,84 @@
+import { ReactNode, memo, useCallback, useState } from "react";
+import { Link } from "react-router-dom";
+
+import { ModalCredit, ModalPrivacyPolicy } from "components/ModalPopup";
+
+import ButtonAboveFooter from "./ButtonAboveFooter";
+
+import { ReactComponent as SparcsLogo } from "static/assets/sparcsLogos/SparcsLogoWithText.svg";
+
+type FooterProps = {
+  type?: "only-logo" | "full" | "event-2023fall";
+  children?: ReactNode;
+};
+
+const Footer = ({ type = "full", children }: FooterProps) => {
+  const [isOpenPrivacyPolicy, setIsOpenPrivacyPolicy] = useState(false);
+  const [isOpenCredit, setIsOpenCredit] = useState(false);
+
+  const onClickPrivacyPolicy = useCallback(
+    () => setIsOpenPrivacyPolicy(true),
+    [setIsOpenPrivacyPolicy]
+  );
+  const onClickCredit = useCallback(
+    () => setIsOpenCredit(true),
+    [setIsOpenCredit]
+  );
+
+  return (
+    <div
+      css={{
+        paddingTop: "45px",
+        textAlign: "center",
+      }}
+    >
+      {children}
+      {type === "full" && (
+        <>
+          <ModalPrivacyPolicy
+            isOpen={isOpenPrivacyPolicy}
+            onChangeIsOpen={setIsOpenPrivacyPolicy}
+          />
+          <ModalCredit isOpen={isOpenCredit} onChangeIsOpen={setIsOpenCredit} />
+          <a className="popup-channeltalk">
+            <ButtonAboveFooter text="채널톡 문의하기" />
+          </a>
+          <ButtonAboveFooter
+            text="개인정보 처리방침"
+            onClick={onClickPrivacyPolicy}
+          />
+          <Link to="/event/2023spring-guide" css={{ textDecoration: "none" }}>
+            <ButtonAboveFooter text="택시 살펴보기" />
+          </Link>
+          <ButtonAboveFooter text="만든 사람들" onClick={onClickCredit} />
+        </>
+      )}
+      {type === "event-2023fall" && (
+        <>
+          <ModalCredit
+            defaultSelectedCatagory="2023FallEvent"
+            isOpen={isOpenCredit}
+            onChangeIsOpen={setIsOpenCredit}
+          />
+          <ButtonAboveFooter
+            text="한가위 송편 이벤트를 만든 사람들"
+            onClick={onClickCredit}
+          />
+          <Link to="/event/2023spring-guide" css={{ textDecoration: "none" }}>
+            <ButtonAboveFooter text="택시 살펴보기" />
+          </Link>
+          <a className="popup-channeltalk">
+            <ButtonAboveFooter text="채널톡 문의하기" />
+          </a>
+        </>
+      )}
+      <div css={{ padding: "6px" }}>
+        <a href="https://sparcs.org/" target="_blank" rel="noreferrer">
+          <SparcsLogo style={{ height: "27px", opacity: 0.632 }} />
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default memo(Footer);