Merge pull request #675 from sparcs-kaist/dev

Main branch update from Dev branch
sparcs-kaist · Sep 26, 2023 · cbd4abf · cbd4abf
2 parents 3e9611d + 57612b2
commit cbd4abf
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 20 deletions.
diff --git a/src/components/Header/HeaderWithLeftNav.tsx b/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" }}>
+        <Link key={label} to={to} css={{ textDecoration: "none" }} replace>
           <ButtonNav key={label} selected={_value === value}>
             {label}
           </ButtonNav>

diff --git a/src/components/ModalPopup/ModalEvent2023FallItem.tsx b/src/components/ModalPopup/ModalEvent2023FallItem.tsx
@@ -77,11 +77,11 @@ const ModalEvent2023FallItem = ({
       eventMode !== "2023fall"
         ? [true, "이벤트 기간이 아닙니다"]
         : itemInfo.stock <= 0
-        ? [true, "매진된 상품은 구매할 수 없습니다"]
+        ? [true, "매진된 상품입니다"]
         : !event2023FallInfo || !isLogin
         ? [true, "로그인 후 구매가 가능합니다"]
         : event2023FallInfo.creditAmount < itemInfo.price
-        ? [true, "송편이 부족하여 구매할 수 없습니다"]
+        ? [true, "송편이 부족합니다"]
         : [false, "구매하기"],
     [eventMode, event2023FallInfo, itemInfo]
   );

diff --git a/src/components/ModalPopup/ModalEvent2023FallItemInstagram.tsx b/src/components/ModalPopup/ModalEvent2023FallItemInstagram.tsx
@@ -18,6 +18,13 @@ type ModalEvent2023FallItemInstagramProps = { item?: EventItem } & Parameters<
   typeof Modal
 >[0];
 
+const Background = () => (
+  <div css={{ position: "absolute", top: "20%", left: 0, bottom: 0, right: 0 }}>
+    <div className="c2023fallevent-before"></div>
+    <div className="c2023fallevent-after"></div>
+  </div>
+);
+
 const ModalEvent2023FallItemInstagram = ({
   item,
   ...modalProps
@@ -43,7 +50,11 @@ const ModalEvent2023FallItemInstagram = ({
   };
 
   return (
-    <Modal padding="16px 12px 12px" {...modalProps}>
+    <Modal
+      padding="16px 12px 12px"
+      backgroundChildren={<Background />}
+      {...modalProps}
+    >
       <div css={styleTitle}>
         <ShareRoundedIcon style={styleIcon} />
         인스타그램 스토리에 공유하기

diff --git a/src/components/ModalPopup/ModalEvent2023FallRandomBox.tsx b/src/components/ModalPopup/ModalEvent2023FallRandomBox.tsx
@@ -1,4 +1,11 @@
-import { memo, useCallback, useEffect, useState } from "react";
+import {
+  Dispatch,
+  SetStateAction,
+  memo,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
 
 import type { EventItem } from "types/event2023fall";
 
@@ -23,19 +30,29 @@ const Background = () => (
   </div>
 );
 
-type ModalEvent2023FallRandomBoxProps = { item?: EventItem } & Parameters<
-  typeof Modal
->[0];
+type ModalEvent2023FallRandomBoxProps = {
+  item?: EventItem;
+  setShareItem?: Dispatch<SetStateAction<Nullable<EventItem>>>;
+} & Parameters<typeof Modal>[0];
 
 const ModalEvent2023FallRandomBox = ({
   item,
+  setShareItem,
   ...modalProps
 }: ModalEvent2023FallRandomBoxProps) => {
   const [isBoxOpend, setIsBoxOpend] = useState<boolean>(false);
   const isDisplayRandomBox = !useDelayBoolean(!modalProps.isOpen, 500);
   const isDisplayItemName = useDelay<boolean>(isBoxOpend, !isBoxOpend, 6000);
   const onClickOk = useCallback(() => setIsBoxOpend(true), []);
 
+  const onChangeIsOpen = useCallback(
+    (isOpen: boolean) => {
+      if (!isOpen && item) setShareItem?.(item);
+      modalProps?.onChangeIsOpen?.(isOpen);
+    },
+    [item, setShareItem, modalProps]
+  );
+
   useEffect(() => {
     if (!modalProps.isOpen) setIsBoxOpend(false);
   }, [modalProps.isOpen]);
@@ -58,10 +75,11 @@ const ModalEvent2023FallRandomBox = ({
 
   return (
     <Modal
+      {...modalProps}
       css={{ padding: "16px 12px 12px", overflow: "hidden" }}
-      onEnter={onClickOk}
       backgroundChildren={isBoxOpend ? <Background /> : undefined}
-      {...modalProps}
+      onEnter={onClickOk}
+      onChangeIsOpen={onChangeIsOpen}
     >
       <div css={styleTitle}>
         <HelpCenterRoundedIcon style={styleIcon} />
@@ -102,11 +120,7 @@ const ModalEvent2023FallRandomBox = ({
           ...theme.font14_bold,
         }}
         disabled={isDisplayItemName ? false : isBoxOpend}
-        onClick={
-          isDisplayItemName
-            ? () => modalProps?.onChangeIsOpen?.(false)
-            : onClickOk
-        }
+        onClick={isDisplayItemName ? () => onChangeIsOpen(false) : onClickOk}
       >
         {isDisplayItemName ? "확인" : "박스 열기"}
       </Button>

diff --git a/src/pages/Event/Event2023FallHistory.tsx b/src/pages/Event/Event2023FallHistory.tsx
@@ -186,13 +186,13 @@ const Event2023FallHistory = () => {
               <b>🎁 지급 방법 :</b> 각 상품 별 지급 방법은 아래와 같습니다.
             </div>
             <div css={{ ...theme.font14, marginBottom: "5px" }}>
-              1. 북측 매점 교환권 : 교양분관 SPARCS 동방에서 교환권을 수령하실
-              수 있습니다.
+              1. 북측 매점 교환권 / 교내 엔제리너스 아이스 아메리카노 S: (엔터
+              넣어주세요) 교양분관 SPARCS 동방에서 교환권을 수령하실 수
+              있습니다.
             </div>
             <div css={{ ...theme.font14, marginBottom: "5px" }}>
-              2. 교내 엔제리너스 아이스 아메리카노 S / BBQ 황금올리브+콜라1.25L
-              / 오색송편 : 이벤트 참여 때 등록한 연락처로 기프티콘을 발송해
-              드립니다.
+              2. BBQ 황금올리브+콜라 1.25L / 오색송편: 이벤트 참여 때 등록한
+              연락처로 기프티콘을 발송해 드립니다.
             </div>
           </div>
         </WhiteContainer>

diff --git a/src/pages/Event/Event2023FallStore/ItemListSection.tsx b/src/pages/Event/Event2023FallStore/ItemListSection.tsx
@@ -125,6 +125,7 @@ const EventItemContainer = ({ value, fetchItems }: EventItemComponentProps) => {
           isOpen={!!rewardItem}
           onChangeIsOpen={() => setRewardItem(null)}
           item={rewardItem || undefined}
+          setShareItem={setShareItem}
         />
       )}
       <ModalEvent2023FallItemInstagram