Add: ModalEvent2023FallJoin to Mypage

sparcs-kaist · Sep 27, 2023 · ff30d19 · ff30d19
1 parent 57612b2
commit ff30d19
Show file tree

Hide file tree

Showing 13 changed files with 120 additions and 60 deletions.
diff --git a/src/atoms/loginInfo.ts b/src/atoms/loginInfo.ts
@@ -12,6 +12,7 @@ export type LoginInfoType = Nullable<{
   profileImgUrl: string;
   subinfo: { kaist: string; sparcs: string; facebook: string; twitter: string };
   withdraw: boolean;
+  phoneNumber: string;
   account: string;
   // deviceType: "web" | "app"; // #580 - loadenv의 deviceType을 사용하여야 합니다.
   deviceToken: Nullable<string>;

diff --git a/src/components/Event/WhiteContainerSuggestJoinEvent/index.tsx b/src/components/Event/WhiteContainerSuggestJoinEvent/index.tsx
@@ -1,6 +1,6 @@
 import { useMemo, useState } from "react";
 
-import { useValueRecoilState } from "hooks/useFetchRecoilState";
+import { useIsLogin, useValueRecoilState } from "hooks/useFetchRecoilState";
 
 import Button from "components/Button";
 import LinkEvent2023FallInstagramStoryShare from "components/Link/LinkEvent2023FallInstagramStoryShare";
@@ -14,7 +14,7 @@ import { deviceType } from "tools/loadenv";
 import theme from "tools/theme";
 
 const WhiteContainerSuggestJoinEvent = () => {
-  const isLogin = !!useValueRecoilState("loginInfo")?.id;
+  const isLogin = useIsLogin();
   const { isAgreeOnTermsOfEvent, completedQuests } =
     useValueRecoilState("event2023FallInfo") || {};
 

diff --git a/src/components/Link/LinkEvent2023FallInstagramStoryShare.tsx b/src/components/Link/LinkEvent2023FallInstagramStoryShare.tsx
@@ -2,7 +2,7 @@ import { HTMLAttributes, ReactNode, useCallback, useState } from "react";
 
 import { useEvent2023FallQuestComplete } from "hooks/event/useEvent2023FallQuestComplete";
 import { sendPopupInstagramStoryShareToFlutter } from "hooks/skeleton/useFlutterEventCommunicationEffect";
-import { useValueRecoilState } from "hooks/useFetchRecoilState";
+import { useIsLogin, useValueRecoilState } from "hooks/useFetchRecoilState";
 
 import ModalEvent2023FallJoin from "components/ModalPopup/ModalEvent2023FallJoin";
 
@@ -31,7 +31,7 @@ const LinkEvent2023FallInstagramStoryShare = ({
   ...aProps
 }: LinkEvent2023FallInstagramStoryShareProps) => {
   const setAlert = useSetRecoilState(alertAtom);
-  const isLogin = !!useValueRecoilState("loginInfo")?.id;
+  const isLogin = useIsLogin();
   const { isAgreeOnTermsOfEvent } =
     useValueRecoilState("event2023FallInfo") || {};
   const [isOpenJoin, setIsOpenJoin] = useState<boolean>(false);

diff --git a/src/components/ModalPopup/Body/BodyRoomSelection.tsx b/src/components/ModalPopup/Body/BodyRoomSelection.tsx
@@ -4,6 +4,7 @@ import { useHistory } from "react-router-dom";
 
 import {
   useFetchRecoilState,
+  useIsLogin,
   useValueRecoilState,
 } from "hooks/useFetchRecoilState";
 import useIsTimeOver from "hooks/useIsTimeOver";
@@ -110,7 +111,7 @@ const BodyRoomSelection = ({ roomInfo }: BodyRoomSelectionProps) => {
   const fetchMyRooms = useFetchRecoilState("myRooms");
   const setAlert = useSetRecoilState(alertAtom);
 
-  const isLogin = !!loginInfo?.id; // 로그인 여부
+  const isLogin = useIsLogin() && !!loginInfo?.id; // 로그인 여부
   const isRoomFull = roomInfo && roomInfo.part.length >= roomInfo.maxPartLength; // 방이 꽉 찼는지 여부
   const isAlreadyPart =
     isLogin &&

diff --git a/src/components/ModalPopup/ModalEvent2023FallItem.tsx b/src/components/ModalPopup/ModalEvent2023FallItem.tsx
@@ -5,6 +5,7 @@ import type { EventItem } from "types/event2023fall";
 import { useDelayBoolean } from "hooks/useDelay";
 import {
   useFetchRecoilState,
+  useIsLogin,
   useValueRecoilState,
 } from "hooks/useFetchRecoilState";
 import { useAxios } from "hooks/useTaxiAPI";
@@ -39,7 +40,7 @@ const ModalEvent2023FallItem = ({
 }: ModalEvent2023FallItemProps) => {
   const fetchEvent2023FallInfo = useFetchRecoilState("event2023FallInfo");
   const event2023FallInfo = useValueRecoilState("event2023FallInfo");
-  const isLogin = !!useValueRecoilState("loginInfo")?.id;
+  const isLogin = useIsLogin();
 
   const axios = useAxios();
   const setAlert = useSetRecoilState(alertAtom);

diff --git a/src/components/ModalPopup/ModalEvent2023FallJoin.tsx b/src/components/ModalPopup/ModalEvent2023FallJoin.tsx
@@ -1,6 +1,11 @@
 import { useCallback, useMemo, useState } from "react";
 
 import { useEvent2023FallQuestComplete } from "hooks/event/useEvent2023FallQuestComplete";
+import {
+  useFetchRecoilState,
+  useIsLogin,
+  useValueRecoilState,
+} from "hooks/useFetchRecoilState";
 import { useAxios } from "hooks/useTaxiAPI";
 
 import Button from "components/Button";
@@ -21,6 +26,12 @@ type ModalEvent2023FallJoinProps = Parameters<typeof Modal>[0];
 const ModalEvent2023FallJoin = (modalProps: ModalEvent2023FallJoinProps) => {
   const axios = useAxios();
   const setAlert = useSetRecoilState(alertAtom);
+  const isLogin = useIsLogin();
+  const { phoneNumber: phoneNumberFromLoginInfo } =
+    useValueRecoilState("loginInfo") || {};
+  const { isAgreeOnTermsOfEvent } =
+    useValueRecoilState("event2023FallInfo") || {};
+  const fetchLoginInfo = useFetchRecoilState("loginInfo");
   //#region event2023Fall
   const event2023FallQuestComplete = useEvent2023FallQuestComplete();
   //#endregion
@@ -38,6 +49,7 @@ const ModalEvent2023FallJoin = (modalProps: ModalEvent2023FallJoinProps) => {
         method: "post",
         data: { phoneNumber },
         onSuccess: () => {
+          fetchLoginInfo();
           //#region event2023Fall
           event2023FallQuestComplete("firstLogin");
           //#endregion
@@ -61,7 +73,7 @@ const ModalEvent2023FallJoin = (modalProps: ModalEvent2023FallJoinProps) => {
   const styleText = {
     ...theme.font12,
     color: theme.gray_text,
-    margin: "0 8px 12px",
+    margin: "0 8px",
   };
   const styleInputWrap = {
     margin: "12px 8px",
@@ -85,6 +97,7 @@ const ModalEvent2023FallJoin = (modalProps: ModalEvent2023FallJoinProps) => {
         </b>
         를 하여 방에서 나가야 합니다.
       </div>
+      <div css={{ height: "12px" }} />
       <div css={styleText}>
         • 실제 Taxi 동승을 하지 않고{" "}
         <b css={{ color: theme.black }}>허위로 방을 개설하거나 참여</b>하여
@@ -101,6 +114,7 @@ const ModalEvent2023FallJoin = (modalProps: ModalEvent2023FallJoinProps) => {
         요청할 수 있습니다. 또한, 본 서비스를 부정 이용하는 사용자에게는 택시
         서비스 이용 제한 및 법적 조치를 취할 수 있습니다.
       </div>
+      <div css={{ height: "12px" }} />
       <div css={styleText}>
         •{" "}
         <b css={{ color: theme.red_text }}>
@@ -111,31 +125,66 @@ const ModalEvent2023FallJoin = (modalProps: ModalEvent2023FallJoinProps) => {
           입력해주신 연락처는 이후 수정이 불가능합니다.
         </b>
       </div>
-      <DottedLine />
-      <div css={styleInputWrap}>
-        전화번호
-        <Input
-          value={phoneNumber}
-          onChangeValue={setPhoneNumber}
-          placeholder="010-0000-0000 형식으로 입력하세요"
-          css={{ width: "100%", marginLeft: "10px" }}
-        />
+      <div css={{ height: "12px" }} />
+      <div css={styleText}>
+        • 본 약관은 동의 이후에도 {'"'}마이페이지{">"}한가위 송편 이벤트 참여
+        약관{'"'}에서 다시 확인하실 수 있습니다.{" "}
       </div>
-      <Button
-        type="purple_inset"
-        css={{
-          width: "100%",
-          padding: "10px 0 9px",
-          borderRadius: "8px",
-          ...theme.font14_bold,
-        }}
-        onClick={onClickJoin}
-        disabled={!isValidPhoneNumber}
-      >
-        {!isValidPhoneNumber
-          ? "올바른 전화번호를 입력하세요"
-          : "동의 후 이벤트 참여하기"}
-      </Button>
+      {isLogin &&
+        (isAgreeOnTermsOfEvent ? (
+          <>
+            <div css={{ height: "12px" }} />
+            <DottedLine />
+            <div css={styleInputWrap}>
+              전화번호
+              <Input
+                value={phoneNumberFromLoginInfo}
+                css={{ width: "100%", marginLeft: "10px" }}
+              />
+            </div>
+            <Button
+              type="purple_inset"
+              css={{
+                width: "100%",
+                padding: "10px 0 9px",
+                borderRadius: "8px",
+                ...theme.font14_bold,
+              }}
+              disabled
+            >
+              이미 동의하셨습니다
+            </Button>
+          </>
+        ) : (
+          <>
+            <div css={{ height: "12px" }} />
+            <DottedLine />
+            <div css={styleInputWrap}>
+              전화번호
+              <Input
+                value={phoneNumber}
+                onChangeValue={setPhoneNumber}
+                placeholder="010-0000-0000 형식으로 입력하세요"
+                css={{ width: "100%", marginLeft: "10px" }}
+              />
+            </div>
+            <Button
+              type="purple_inset"
+              css={{
+                width: "100%",
+                padding: "10px 0 9px",
+                borderRadius: "8px",
+                ...theme.font14_bold,
+              }}
+              onClick={onClickJoin}
+              disabled={!isValidPhoneNumber}
+            >
+              {!isValidPhoneNumber
+                ? "올바른 전화번호를 입력하세요"
+                : "동의 후 이벤트 참여하기"}
+            </Button>
+          </>
+        ))}
     </Modal>
   );
 };

diff --git a/src/components/ModalPopup/ModalTerms.tsx b/src/components/ModalPopup/ModalTerms.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 
 import {
   useFetchRecoilState,
+  useIsLogin,
   useValueRecoilState,
 } from "hooks/useFetchRecoilState";
 import { useAxios } from "hooks/useTaxiAPI";
@@ -36,7 +37,7 @@ const ModalTerms = ({ isOpen, onChangeIsOpen = () => {} }: ModalTermsProps) => {
 
   const loginInfo = useValueRecoilState("loginInfo");
   const fetchLoginInfo = useFetchRecoilState("loginInfo");
-  const isLogin = !!loginInfo?.id; // 로그인 여부
+  const isLogin = useIsLogin(); // 로그인 여부
   const isAgree = !!loginInfo?.agreeOnTermsOfService; // 이용약관 동의 여부
 
   useEffect(() => {

diff --git a/src/hooks/useFetchRecoilState/index.tsx b/src/hooks/useFetchRecoilState/index.tsx
@@ -117,3 +117,8 @@ export const useSyncRecoilStateEffect = () => {
   const fetchEvent2023FallInfo = useFetchRecoilState("event2023FallInfo");
   useEffect(fetchEvent2023FallInfo, [userId]);
 };
+
+export const useIsLogin = (): boolean => {
+  const isLogin = !!useValueRecoilState("loginInfo")?.id;
+  return isLogin;
+};
diff --git a/src/pages/Addroom/index.tsx b/src/pages/Addroom/index.tsx
@@ -5,6 +5,7 @@ import { useHistory } from "react-router-dom";
 import { useEvent2023FallQuestComplete } from "hooks/event/useEvent2023FallQuestComplete";
 import {
   useFetchRecoilState,
+  useIsLogin,
   useValueRecoilState,
 } from "hooks/useFetchRecoilState";
 import { useAxios } from "hooks/useTaxiAPI";
@@ -57,7 +58,7 @@ const AddRoom = () => {
   const randomRoomName = useMemo(randomRoomNameGenerator, []);
 
   const setAlert = useSetRecoilState(alertAtom);
-  const isLogin = !!useValueRecoilState("loginInfo")?.id;
+  const isLogin = useIsLogin();
   const myRooms = useValueRecoilState("myRooms");
   const fetchMyRooms = useFetchRecoilState("myRooms");
   //#region event2023Fall

diff --git a/src/pages/Event/Event2023FallHistory.tsx b/src/pages/Event/Event2023FallHistory.tsx
@@ -2,7 +2,7 @@ import { memo, useMemo } from "react";
 
 import type { Transaction } from "types/event2023fall";
 
-import { useValueRecoilState } from "hooks/useFetchRecoilState";
+import { useIsLogin, useValueRecoilState } from "hooks/useFetchRecoilState";
 import useQuery from "hooks/useTaxiAPI";
 
 import AdaptiveDiv from "components/AdaptiveDiv";
@@ -129,7 +129,7 @@ const HistorySection = () => {
 };
 
 const Event2023FallHistory = () => {
-  const isLogin = !!useValueRecoilState("loginInfo")?.id;
+  const isLogin = useIsLogin();
   return (
     <>
       <HeaderWithLeftNav

diff --git a/src/pages/Home/InfoSection.tsx b/src/pages/Home/InfoSection.tsx
@@ -1,13 +1,14 @@
 import { useMemo } from "react";
 import { Link } from "react-router-dom";
 
+import { useIsLogin, useValueRecoilState } from "hooks/useFetchRecoilState";
+
 import AdaptiveDiv from "components/AdaptiveDiv";
 import Button from "components/Button";
 import LinkLogin from "components/Link/LinkLogin";
 import Room from "components/Room";
 
 import loginInfoAtom from "atoms/loginInfo";
-import myRoomsAtom from "atoms/myRooms";
 import { useRecoilValue } from "recoil";
 
 import moment, { getToday } from "tools/moment";
@@ -21,8 +22,8 @@ import { ReactComponent as TaxiLogoWhite } from "static/assets/sparcsLogos/TaxiL
 
 const InfoSection = () => {
   const loginInfo = useRecoilValue(loginInfoAtom);
-  const isLogin = !!loginInfo?.id;
-  const myRooms = useRecoilValue(myRoomsAtom);
+  const isLogin = useIsLogin();
+  const myRooms = useValueRecoilState("myRooms");
   const randomTaxiSlogan = useMemo(randomTaxiSloganGenerator, []);
 
   const styleContainer = {

diff --git a/src/pages/Mypage/index.tsx b/src/pages/Mypage/index.tsx
@@ -9,6 +9,7 @@ import Footer from "components/Footer";
 import LinkLogout from "components/Link/LinkLogout";
 import {
   ModalCredit,
+  ModalEvent2023FallJoin,
   ModalMypageModify,
   ModalNotification,
   ModalPrivacyPolicy,
@@ -22,7 +23,7 @@ import WhiteContainerSuggestLogin from "components/WhiteContainer/WhiteContainer
 
 import Menu from "./Menu";
 
-import { nodeEnv } from "tools/loadenv";
+import { eventMode, nodeEnv } from "tools/loadenv";
 import theme from "tools/theme";
 import { isNotificationOn } from "tools/trans";
 
@@ -38,36 +39,29 @@ const Mypage = () => {
   const [isOpenReport, setIsOpenReport] = useState(false);
   const [isOpenPolicy, setIsOpenPolicy] = useState(false);
   const [isOpenPrivacyPolicy, setIsOpenPrivacyPolicy] = useState(false);
+  const [isOpenEventPolicy, setIsOpenEventPolicy] = useState(false);
   const [isOpenMembers, setOpenIsMembers] = useState(false);
 
   const onClickProfileModify = useCallback(
     () => setIsOpenProfileModify(true),
-    [setIsOpenProfileModify]
+    []
   );
   const onClickTranslation = useCallback(
     () => i18n.changeLanguage(i18n.language === "ko" ? "en" : "ko"),
     [i18n.changeLanguage, i18n.language]
   );
   const onClickNotification = useCallback(
     () => setIsOpenNotification(true),
-    [setIsOpenNotification]
-  );
-  const onClickReport = useCallback(
-    () => setIsOpenReport(true),
-    [setIsOpenReport]
-  );
-  const onClickPolicy = useCallback(
-    () => setIsOpenPolicy(true),
-    [setIsOpenPolicy]
+    []
   );
+  const onClickReport = useCallback(() => setIsOpenReport(true), []);
+  const onClickPolicy = useCallback(() => setIsOpenPolicy(true), []);
   const onClickPrivacyPolicy = useCallback(
     () => setIsOpenPrivacyPolicy(true),
-    [setIsOpenPrivacyPolicy]
-  );
-  const onClickMembers = useCallback(
-    () => setOpenIsMembers(true),
-    [setOpenIsMembers]
+    []
   );
+  const onClickEventPolicy = useCallback(() => setIsOpenEventPolicy(true), []);
+  const onClickMembers = useCallback(() => setOpenIsMembers(true), []);
 
   const styleProfImg = {
     width: "50px",
@@ -189,6 +183,11 @@ const Mypage = () => {
           <Menu icon="policy" onClick={onClickPrivacyPolicy}>
             {t("privacy_policy")}
           </Menu>
+          {eventMode === "2023fall" && (
+            <Menu icon="credit" onClick={onClickEventPolicy}>
+              한가위 송편 이벤트 참여 약관
+            </Menu>
+          )}
           <Menu icon="credit" onClick={onClickMembers}>
             {t("credit")}
           </Menu>
@@ -205,6 +204,10 @@ const Mypage = () => {
         onChangeIsOpen={setIsOpenPrivacyPolicy}
       />
       <ModalTerms isOpen={isOpenPolicy} onChangeIsOpen={setIsOpenPolicy} />
+      <ModalEvent2023FallJoin
+        isOpen={isOpenEventPolicy}
+        onChangeIsOpen={setIsOpenEventPolicy}
+      />
       <ModalCredit isOpen={isOpenMembers} onChangeIsOpen={setOpenIsMembers} />
     </AdaptiveDiv>
   );