From ff30d19453c993f16bd0563ab625543840fa8874 Mon Sep 17 00:00:00 2001 From: 14Kgun Date: Wed, 27 Sep 2023 18:20:42 +0900 Subject: [PATCH 1/3] Add: ModalEvent2023FallJoin to Mypage --- src/atoms/loginInfo.ts | 1 + .../WhiteContainerSuggestJoinEvent/index.tsx | 4 +- .../LinkEvent2023FallInstagramStoryShare.tsx | 4 +- .../ModalPopup/Body/BodyRoomSelection.tsx | 3 +- .../ModalPopup/ModalEvent2023FallItem.tsx | 3 +- .../ModalPopup/ModalEvent2023FallJoin.tsx | 99 ++++++++++++++----- src/components/ModalPopup/ModalTerms.tsx | 3 +- src/hooks/useFetchRecoilState/index.tsx | 5 + src/pages/Addroom/index.tsx | 3 +- src/pages/Event/Event2023FallHistory.tsx | 4 +- src/pages/Home/InfoSection.tsx | 7 +- src/pages/Mypage/index.tsx | 35 ++++--- src/pages/Myroom/index.jsx | 9 +- 13 files changed, 120 insertions(+), 60 deletions(-) diff --git a/src/atoms/loginInfo.ts b/src/atoms/loginInfo.ts index c754634d5..3ad60b307 100644 --- 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; diff --git a/src/components/Event/WhiteContainerSuggestJoinEvent/index.tsx b/src/components/Event/WhiteContainerSuggestJoinEvent/index.tsx index 056ec644c..cd342346a 100644 --- 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 index daa41b53b..4d1caf64b 100644 --- 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(false); diff --git a/src/components/ModalPopup/Body/BodyRoomSelection.tsx b/src/components/ModalPopup/Body/BodyRoomSelection.tsx index 4eaa1b807..a99cca05d 100644 --- 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 index 0f7ab0324..c7cac2bba 100644 --- 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 index adc9a1ea3..48b1d929f 100644 --- 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[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) => { 를 하여 방에서 나가야 합니다. +
• 실제 Taxi 동승을 하지 않고{" "} 허위로 방을 개설하거나 참여하여 @@ -101,6 +114,7 @@ const ModalEvent2023FallJoin = (modalProps: ModalEvent2023FallJoinProps) => { 요청할 수 있습니다. 또한, 본 서비스를 부정 이용하는 사용자에게는 택시 서비스 이용 제한 및 법적 조치를 취할 수 있습니다.
+
•{" "} @@ -111,31 +125,66 @@ const ModalEvent2023FallJoin = (modalProps: ModalEvent2023FallJoinProps) => { 입력해주신 연락처는 이후 수정이 불가능합니다.
- -
- 전화번호 - +
+
+ • 본 약관은 동의 이후에도 {'"'}마이페이지{">"}한가위 송편 이벤트 참여 + 약관{'"'}에서 다시 확인하실 수 있습니다.{" "}
- + {isLogin && + (isAgreeOnTermsOfEvent ? ( + <> +
+ +
+ 전화번호 + +
+ + + ) : ( + <> +
+ +
+ 전화번호 + +
+ + + ))} ); }; diff --git a/src/components/ModalPopup/ModalTerms.tsx b/src/components/ModalPopup/ModalTerms.tsx index 90c8ad00e..90aa1b613 100644 --- 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 index 9911d21c8..4c6f2e883 100644 --- 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 index 002f7c2e6..2cec96330 100644 --- 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 index 123cf3c74..83757293e 100644 --- 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 ( <> { 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 index fd8ddf88e..fb942ac77 100644 --- 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,11 +39,12 @@ 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"), @@ -50,24 +52,16 @@ const Mypage = () => { ); 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 = () => { {t("privacy_policy")} + {eventMode === "2023fall" && ( + + 한가위 송편 이벤트 참여 약관 + + )} {t("credit")} @@ -205,6 +204,10 @@ const Mypage = () => { onChangeIsOpen={setIsOpenPrivacyPolicy} /> + ); diff --git a/src/pages/Myroom/index.jsx b/src/pages/Myroom/index.jsx index e7c5df4bd..4bb3e10a4 100644 --- a/src/pages/Myroom/index.jsx +++ b/src/pages/Myroom/index.jsx @@ -2,6 +2,7 @@ import { useEffect } from "react"; import { useHistory, useParams } from "react-router-dom"; import useButterflyState from "hooks/useButterflyState"; +import { useIsLogin, useValueRecoilState } from "hooks/useFetchRecoilState"; import usePageFromSearchParams from "hooks/usePageFromSearchParams"; import AdaptiveDiv from "components/AdaptiveDiv"; @@ -12,20 +13,16 @@ import WhiteContainerSuggestLogin from "components/WhiteContainer/WhiteContainer import R1Myroom from "./R1Myroom"; import R2Myroom from "./R2Myroom"; -import loginInfoAtom from "atoms/loginInfo"; -import myRoomsAtom from "atoms/myRooms"; -import { useRecoilValue } from "recoil"; - export const MAX_PARTICIPATION = 5; const Myroom = () => { const history = useHistory(); const { roomId } = useParams(); const butterflyState = useButterflyState(); - const myRooms = useRecoilValue(myRoomsAtom); + const myRooms = useValueRecoilState("myRooms"); const totalPages = Math.ceil((myRooms?.done?.length ?? 0) / PAGE_MAX_ITEMS); const currentPage = usePageFromSearchParams(totalPages); - const isLogin = !!useRecoilValue(loginInfoAtom)?.id; + const isLogin = useIsLogin(); useEffect(() => { if (butterflyState === "fold" && roomId) { From 2420f11d6247ed2c25775d7893240580e0f1284d Mon Sep 17 00:00:00 2001 From: 14Kgun Date: Wed, 27 Sep 2023 18:37:34 +0900 Subject: [PATCH 2/3] Fix: icon --- src/pages/Mypage/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Mypage/index.tsx b/src/pages/Mypage/index.tsx index fb942ac77..80f473e90 100644 --- a/src/pages/Mypage/index.tsx +++ b/src/pages/Mypage/index.tsx @@ -184,7 +184,7 @@ const Mypage = () => { {t("privacy_policy")} {eventMode === "2023fall" && ( - + 한가위 송편 이벤트 참여 약관 )} From e519af22ad74e1f3f779b8daec88df688ebcd006 Mon Sep 17 00:00:00 2001 From: 14Kgun Date: Wed, 27 Sep 2023 20:13:04 +0900 Subject: [PATCH 3/3] Fix: type of phoneNumber --- src/atoms/loginInfo.ts | 2 +- src/components/ModalPopup/ModalEvent2023FallJoin.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/atoms/loginInfo.ts b/src/atoms/loginInfo.ts index 3ad60b307..e25c8ad48 100644 --- a/src/atoms/loginInfo.ts +++ b/src/atoms/loginInfo.ts @@ -12,7 +12,7 @@ export type LoginInfoType = Nullable<{ profileImgUrl: string; subinfo: { kaist: string; sparcs: string; facebook: string; twitter: string }; withdraw: boolean; - phoneNumber: string; + phoneNumber?: string; account: string; // deviceType: "web" | "app"; // #580 - loadenv의 deviceType을 사용하여야 합니다. deviceToken: Nullable; diff --git a/src/components/ModalPopup/ModalEvent2023FallJoin.tsx b/src/components/ModalPopup/ModalEvent2023FallJoin.tsx index 48b1d929f..97dbfffd7 100644 --- a/src/components/ModalPopup/ModalEvent2023FallJoin.tsx +++ b/src/components/ModalPopup/ModalEvent2023FallJoin.tsx @@ -138,7 +138,7 @@ const ModalEvent2023FallJoin = (modalProps: ModalEvent2023FallJoinProps) => {
전화번호