Merge pull request #817 from sparcs-kaist/2024fall-store-modification

2024 추석이벤트 상점 수정
sparcs-kaist · Sep 6, 2024 · 5b21302 · 5b21302
2 parents d0da633 + 8ad945a
commit 5b21302
Show file tree

Hide file tree

Showing 22 changed files with 988 additions and 709 deletions.
diff --git a/packages/web/src/components/Event/BodyRandomBox/index.tsx b/packages/web/src/components/Event/BodyRandomBox/index.tsx
@@ -14,12 +14,14 @@ type BodyRandomBoxProps = {
   isBoxOpend: boolean;
   onClickBox?: () => void;
   itemImageUrl?: string;
+  nonClick?: boolean;
 };
 
 const BodyRandomBox = ({
   isBoxOpend,
   onClickBox,
   itemImageUrl,
+  nonClick,
 }: BodyRandomBoxProps) => {
   const bodyRef = useRef<HTMLDivElement>(null);
   const getBodyWidth = useCallback(() => bodyRef.current?.clientWidth || 0, []);
@@ -81,7 +83,7 @@ const BodyRandomBox = ({
           height: `${boxSize}px`,
           aspectRatio: 1,
           margin: `0 auto`,
-          ...theme.cursor(isBoxOpend),
+          ...theme.cursor(isBoxOpend || nonClick),
           transform: `scale(${
             (boxSize / 500) * 0.8
           }) translateX(-160px) translateY(-70px)`,

diff --git a/packages/web/src/components/Event/CreditAmountStatusContainer/index.tsx b/packages/web/src/components/Event/CreditAmountStatusContainer/index.tsx
@@ -5,12 +5,9 @@ import WhiteContainer from "@/components/WhiteContainer";
 import theme from "@/tools/theme";
 
 import { ReactComponent as CreditIcon } from "@/static/events/2023fallCredit.svg";
-// ToDo : 2023fall 이미지
-import { ReactComponent as Ticket1Icon } from "@/static/events/2023fallTicket1.svg";
-// ToDo : 2023fall 이미지
-import { ReactComponent as Ticket2Icon } from "@/static/events/2023fallTicket2.svg";
 
-// ToDo : 2023fall 이미지
+// import { ReactComponent as Ticket1Icon } from "@/static/events/2023fallTicket1.svg";
+// import { ReactComponent as Ticket2Icon } from "@/static/events/2023fallTicket2.svg";
 
 type CreditAmountStatusContainerProps = {
   type?: "credit" | "ticket";
@@ -20,8 +17,7 @@ const CreditAmountStatusContainer = ({
   type = "credit",
   ...whiteContainerProps
 }: CreditAmountStatusContainerProps) => {
-  const { creditAmount, ticket1Amount, ticket2Amount } =
-    useValueRecoilState("event2023FallInfo") || {};
+  const { creditAmount } = useValueRecoilState("event2024FallInfo") || {};
 
   return (
     <WhiteContainer
@@ -37,13 +33,13 @@ const CreditAmountStatusContainer = ({
       <div css={{ color: theme.white, ...theme.font16_bold, flexGrow: 1 }}>
         {type === "credit" ? "내가 모은 송편코인" : "일반 / 고급 응모권"}
       </div>
-      {type === "credit" ? (
-        <>
-          <CreditIcon css={{ width: "27px", height: "16px" }} />
-          <div css={{ color: theme.white, ...theme.font16_bold }}>
-            {creditAmount || 0}
-          </div>
-        </>
+      <>
+        <CreditIcon css={{ width: "27px", height: "16px" }} />
+        <div css={{ color: theme.white, ...theme.font16_bold }}>
+          {creditAmount || 0}
+        </div>
+      </>
+      {/* {type === "credit" ? (
       ) : (
         <>
           <Ticket1Icon
@@ -70,7 +66,7 @@ const CreditAmountStatusContainer = ({
             {ticket2Amount || 0}
           </div>
         </>
-      )}
+      )} */}
     </WhiteContainer>
   );
 };

diff --git a/packages/web/src/components/Event/EventItemContainer/index.tsx b/packages/web/src/components/Event/EventItemContainer/index.tsx
@@ -0,0 +1,136 @@
+import { useState } from "react";
+import { useHistory } from "react-router-dom";
+
+import type { EventItem, RandomBoxResult } from "@/types/event2024fall";
+
+import { useFetchRecoilState } from "@/hooks/useFetchRecoilState";
+
+import {
+  ModalEvent2024FallItem,
+  ModalEvent2024FallRandomBox,
+} from "@/components/ModalPopup";
+import WhiteContainer from "@/components/WhiteContainer";
+
+import theme from "@/tools/theme";
+
+// ToDo : 2023fall 이미지
+import { ReactComponent as CreditIcon } from "@/static/events/2023fallCredit.svg";
+
+type EventItemComponentProps = {
+  value: EventItem;
+  fetchItems?: () => void;
+  clickable?: boolean;
+  showDescription?: boolean;
+};
+
+const EventItemContainer = ({
+  value,
+  fetchItems,
+  clickable,
+  showDescription,
+}: EventItemComponentProps) => {
+  const fetchEvent2024FallInfo = useFetchRecoilState("event2024FallInfo");
+  const history = useHistory();
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [randomBoxResult, setRandomBoxResult] =
+    useState<Nullable<RandomBoxResult>>(null);
+  const onClickHandler = () => {
+    if (value.itemType !== 3) {
+      history.push(`/event/2024fall-store/item/${value._id}`);
+    } else {
+      // setRewardItem(value);
+      setIsOpen(true);
+    }
+  };
+
+  return (
+    <WhiteContainer
+      css={{
+        width: "calc(50% - 8px)",
+        flexBasis: "calc(50% - 8px)",
+        boxSizing: "border-box",
+        minWidth: "100px",
+        padding: "12px",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "left",
+        gap: "8px",
+        // background: isSoldOut ? theme.gray_background : theme.white,
+        ...theme.font14,
+        ...theme.cursor(!clickable),
+      }}
+      onClick={clickable ? onClickHandler : undefined}
+    >
+      <div
+        css={{
+          width: "100%",
+          borderRadius: "6px",
+          aspectRatio: "1/1",
+          objectFit: "cover",
+          position: "relative",
+          overflow: "hidden",
+          background: theme.purple_light,
+        }}
+      >
+        <img
+          css={{
+            width: "100%",
+            height: "100%",
+          }}
+          src={value.imageUrl}
+          alt={value.name}
+        />
+      </div>
+      <div
+        css={{
+          ...theme.font14_bold,
+        }}
+      >
+        {value.name}
+      </div>
+      {showDescription && (
+        <div
+          css={{
+            ...theme.font12,
+          }}
+        >
+          {value.description}
+        </div>
+      )}
+      <div
+        css={{
+          display: "flex",
+          gap: "4px",
+        }}
+      >
+        <CreditIcon css={{ width: "27px", height: "16px" }} />
+        <div
+          css={{
+            ...theme.font14,
+          }}
+        >
+          {value.price}
+        </div>
+      </div>
+      <ModalEvent2024FallItem
+        itemInfo={value}
+        fetchItems={fetchItems}
+        setRandomboxResult={setRandomBoxResult}
+        isOpen={isOpen}
+        onChangeIsOpen={setIsOpen}
+      />
+      {value.itemType === 3 && (
+        <ModalEvent2024FallRandomBox
+          isOpen={!!randomBoxResult}
+          onChangeIsOpen={() => {
+            setRandomBoxResult(null);
+            fetchEvent2024FallInfo();
+          }}
+          randomBoxResult={randomBoxResult || undefined}
+        />
+      )}
+    </WhiteContainer>
+  );
+};
+
+export default EventItemContainer;
diff --git a/packages/web/src/components/Header/HeaderWithLeftNav.tsx b/packages/web/src/components/Header/HeaderWithLeftNav.tsx
@@ -53,7 +53,7 @@ const HeaderWithLeftNav = ({ value, options = [] }: HeaderWithLeftNavProps) => (
     <div css={{ display: "flex", gap: "16px" }}>
       <div css={{ flexGrow: 1 }} />
       {options.map(({ value: _value, label, to }) => (
-        <Link key={label} to={to} css={{ textDecoration: "none" }} replace>
+        <Link key={label} to={to} css={{ textDecoration: "none" }}>
           <ButtonNav key={label} selected={_value === value}>
             {label}
           </ButtonNav>