Merge branch 'dev' into #633-event-instagram-story

src/components/ModalPopup/ModalMypageModify.tsx

@@ -178,7 +178,9 @@ const ModalMypageModify = ({
         method: "post",
         data: { nickname },
         onError: () => setAlert(t("page_modify.nickname_failed")),
+        //#region event2023Fall
         onSuccess: () => event2023FallQuestComplete("nicknameChanging"), // event2023Fall
+        //#endregion
       });
     }
     if (account !== loginInfo?.account) {
@@ -188,7 +190,9 @@ const ModalMypageModify = ({
         method: "post",
         data: { account },
         onError: () => setAlert(t("page_modify.account_failed")),
+        //#region event2023Fall
         onSuccess: () => event2023FallQuestComplete("accountChanging"), // event2023Fall
+        //#endregion
       });
     }
     if (isNeedToUpdateLoginInfo) {

src/components/ModalPopup/ModalNotification.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useRef } from "react";
 import { useTranslation } from "react-i18next";
 
+import { useEvent2023FallQuestComplete } from "hooks/event/useEvent2023FallQuestComplete";
 import {
   useFetchRecoilState,
   useValueRecoilState,
@@ -64,6 +65,9 @@ const ModalNotification = ({
   const notificationOptions = useValueRecoilState("notificationOptions");
   const fetchNotificationOptions = useFetchRecoilState("notificationOptions");
   const isAxiosCalled = useRef(false);
+  //#region event2023Fall
+  const event2023FallQuestComplete = useEvent2023FallQuestComplete();
+  //#endregion
 
   const styleTitle = {
     ...theme.font18,
@@ -108,8 +112,13 @@ const ModalNotification = ({
       });
       fetchNotificationOptions();
       isAxiosCalled.current = false;
+
+      //#region event2023Fall
+      if (optionName === "advertisement" && value)
+        event2023FallQuestComplete("adPushAgreement");
+      //#endregion
     },
-    [deviceToken]
+    [deviceToken, event2023FallQuestComplete]
   );
   const onChangeNotificationAll = useCallback(
     async (value: boolean) => {
@@ -133,13 +142,18 @@ const ModalNotification = ({
             beforeDepart: value,
             chatting: value,
             notice: value,
+            advertisement: value,
           },
         },
       });
       fetchNotificationOptions();
       isAxiosCalled.current = false;
+
+      //#region event2023Fall
+      if (value) event2023FallQuestComplete("adPushAgreement");
+      //#endregion
     },
-    [deviceToken]
+    [deviceToken, event2023FallQuestComplete]
   );
   const onChangeNotificationChatting = useCallback(
     onChangeNotificationOption("chatting"),
@@ -153,6 +167,10 @@ const ModalNotification = ({
     onChangeNotificationOption("notice"),
     [onChangeNotificationOption]
   );
+  const onChangeNotificationAdvertisement = useCallback(
+    onChangeNotificationOption("advertisement"),
+    [onChangeNotificationOption]
+  );
 
   return (
     <Modal
@@ -197,6 +215,11 @@ const ModalNotification = ({
               value={!!notificationOptions?.notice}
               onChangeValue={onChangeNotificationNotice}
             />
+            <SelectNotification
+              text="광고성 알림"
+              value={!!notificationOptions?.advertisement}
+              onChangeValue={onChangeNotificationAdvertisement}
+            />
           </div>
         </>
       ) : (

src/pages/Event/Event2023FallHistory.tsx

@@ -6,7 +6,6 @@ import { useValueRecoilState } from "hooks/useFetchRecoilState";
 import useQuery from "hooks/useTaxiAPI";
 
 import AdaptiveDiv from "components/AdaptiveDiv";
-import DottedLine from "components/DottedLine";
 import Empty from "components/Empty";
 import CreditAmountStatusContainer from "components/Event/CreditAmountStatusContainer";
 import Footer from "components/Footer";
@@ -18,18 +17,71 @@ import WhiteContainerSuggestLogin from "components/WhiteContainer/WhiteContainer
 import dayjs, { day2str } from "tools/day";
 import theme from "tools/theme";
 
+type HistoryItemProps = {
+  imageUrl: string;
+  title: string;
+  description: string;
+  date: Date;
+};
+
+const HistoryItem = ({
+  imageUrl,
+  title,
+  description,
+  date,
+}: HistoryItemProps) => (
+  <WhiteContainer
+    css={{
+      padding: "12px",
+      display: "flex",
+      alignItems: "stretch",
+      gap: "10px",
+    }}
+  >
+    <div
+      css={{
+        width: "25%",
+        flexShrink: 0,
+      }}
+    >
+      <div
+        css={{
+          border: `1px solid ${theme.gray_line}`,
+          borderRadius: "10px",
+          overflow: "hidden",
+          backgroundColor: theme.white,
+          aspectRatio: "1 / 1",
+        }}
+      >
+        <img src={imageUrl} css={{ width: "100%" }} />
+      </div>
+    </div>
+    <div
+      css={{
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      <div css={{ ...theme.font16_bold }}>{title}</div>
+      <div css={{ ...theme.font14, marginTop: "5px" }}>{description}</div>
+      <div css={{ ...theme.font12, color: theme.gray_text, marginTop: "auto" }}>
+        {day2str(dayjs(date))}
+      </div>
+    </div>
+  </WhiteContainer>
+);
+
 const HistorySection = () => {
   const { transactions } =
     useQuery.get("/events/2023fall/transactions")[1] || {};
   const purchaseHistory = useMemo(
     () =>
-      (transactions || [])
-        .filter(({ type }: Transaction) => type === "use")
-        .sort((x: Transaction, y: Transaction) =>
-          dayjs(y.doneat).diff(dayjs(x.doneat))
-        ),
+      (transactions || []).sort((x: Transaction, y: Transaction) =>
+        dayjs(y.createAt).diff(dayjs(x.createAt))
+      ),
     [transactions]
   ) as Array<Transaction>;
+  const { quests } = useValueRecoilState("event2023FallInfo") || {};
 
   return (
     <>
@@ -42,32 +94,32 @@ const HistorySection = () => {
       </Title>
       {purchaseHistory.length > 0 ? (
         purchaseHistory.map(
-          ({ _id, amount, eventId, itemId, comment, doneat }: Transaction) => (
-            <WhiteContainer key={_id} css={{ padding: "12px" }}>
-              <div
-                css={{
-                  ...theme.font12_bold,
-                  color: theme.purple,
-                  margin: "0 8px",
-                  marginBottom: "12px",
-                }}
-              >
-                {comment}
-              </div>
-              <DottedLine />
-              <div css={{ padding: "12px 8px 0" }}>
-                <div css={{ ...theme.font12 }}>
-                  <b>구매 아이디</b> : {_id}
-                  <br />
-                  <b>구매 상품</b> : {itemId || ""}
-                  <br />
-                  <b>차감된 송편</b> : {amount || ""}
-                  <br />
-                  <b>구매 시각</b> : {day2str(dayjs(doneat))}
-                </div>
-              </div>
-            </WhiteContainer>
-          )
+          ({ _id, type, comment, createAt, questId, item }: Transaction) => {
+            if (type === "get") {
+              const quest = quests?.find((quest) => quest.id === questId);
+              return (
+                <HistoryItem
+                  key={_id}
+                  imageUrl={quest?.imageUrl || ""}
+                  title={quest?.name || ""}
+                  description={comment}
+                  date={createAt}
+                />
+              );
+            } else if (type === "use") {
+              return (
+                <HistoryItem
+                  key={_id}
+                  imageUrl={item.imageUrl}
+                  title={item.name}
+                  description={comment}
+                  date={createAt}
+                />
+              );
+            } else {
+              return null;
+            }
+          }
         )
       ) : (
         <Empty type="mobile">구매 이력이 없습니다.</Empty>

src/pages/Event/Event2023FallStore/PublicNoticeContainer.tsx

@@ -5,17 +5,37 @@ import useQuery from "hooks/useTaxiAPI";
 
 import WhiteContainer from "components/WhiteContainer";
 
+import dayjs, {
+  dayDifference2str,
+  dayNowServer,
+  dayServerToClient,
+} from "tools/day";
 import theme from "tools/theme";
 
 import CampaignRoundedIcon from "@mui/icons-material/CampaignRounded";
 
+type Transaction = {
+  text: string;
+  createAt: Date;
+};
+
 const PublicNoticeContainer = () => {
-  const { transactions } = useQuery.get(
+  const { transactions }: { transactions: Array<Transaction> } = useQuery.get(
     "/events/2023fall/public-notice/recentTransactions"
   )[1] || { transactions: [] };
   const notices = useMemo(() => {
+    const publicNotices = transactions
+      .sort((a, b) => dayjs(b.createAt).diff(a.createAt))
+      .map(
+        ({ text, createAt }) =>
+          `[${dayDifference2str(
+            dayServerToClient(createAt),
+            dayNowServer()
+          )}] ${text}`
+      );
     return [
       "[공지] 아이템이 조기 소진될 경우 9월 30일(토), 10월 5일(목)에 추가 입고될 예정입니다.",
+      ...publicNotices,
       "[공지] 이벤트가 종료되면 아이템을 구매할 수 없습니다. 종료 전에 송편을 모두 소진해주세요.",
     ];
   }, [transactions]);