diff --git a/src/components/atoms/bottomSheets/commonSheet/Notice.tsx b/src/components/atoms/bottomSheets/commonSheet/Notice.tsx index f932e418..a8cfdb12 100644 --- a/src/components/atoms/bottomSheets/commonSheet/Notice.tsx +++ b/src/components/atoms/bottomSheets/commonSheet/Notice.tsx @@ -41,6 +41,11 @@ const content = { main: '링크가 만료되었어요', sub: '가족에게 그룹링크를 다시 요청해주세요', }, + invalid: { + icon: , + main: '잘못된 그룹코드에요', + sub: '그룹 코드를 다시 입력해주세요', + }, withdrawed: { icon: , main: '탈퇴되었습니다', diff --git a/src/components/blocks/mypage/GroupLink.tsx b/src/components/blocks/mypage/GroupLink.tsx index 3190f117..f384bd26 100644 --- a/src/components/blocks/mypage/GroupLink.tsx +++ b/src/components/blocks/mypage/GroupLink.tsx @@ -15,10 +15,10 @@ import { modals } from '@components/atoms/modals/Modals'; function GroupLink() { const navigate = useNavigate(); const { groupCode } = useParams(); - const { code, expiredDate } = decipher(groupCode!); const { setCloseBottomSheet } = useGlobalBottomSheet(); const { openExpiredNoticeSheet, + openInvalidNoticeSheet, openJoinGroupCheckSheet, openMoveGroupCheckSheet, openUnregisteredCheckSheet, @@ -42,6 +42,11 @@ function GroupLink() { navigate('/mypage'); }; + const handleInvalidNoticeAction = () => { + setCloseBottomSheet(); + navigate('/mypage/enter'); + }; + const handleMoveGroupCompleted = () => { openMoveGroupCompletedSheet(handleSheetCompletedAction); }; @@ -61,27 +66,32 @@ function GroupLink() { }); useEffect(() => { - const expired = dayjs(expiredDate); - const now = dayjs(); + try { + const { code, expiredDate } = decipher(groupCode!); + const expired = dayjs(expiredDate); + const now = dayjs(); - if (expired.isBefore(now)) { - // 1. 링크 만료되었을 때 - openExpiredNoticeSheet(handleSheetCompletedAction); - } else if (userStatus === 'error') { - // 2. 리프레쉬토큰 없을때 : 로그인 또는 가입하기 바텀시트 - openUnregisteredCheckSheet(handleSheetCompletedAction); - } else if (familyStatus === 'success') { - if (familyData.code) { - // 3. 가족이 있을때 : 새로운 가족그룹으로 이동 - openMoveGroupCheckSheet(() => { - mutateMoveFamily({ code }); - }); - } else { - // 4. 가족 없을때: 가족 그룹 참여 - openJoinGroupCheckSheet(() => { - mutateJoinFamily({ code }); - }); + if (expired.isBefore(now)) { + // 1. 링크 만료되었을 때 + openExpiredNoticeSheet(handleSheetCompletedAction); + } else if (userStatus === 'error') { + // 2. 리프레쉬토큰 없을때 : 로그인 또는 가입하기 바텀시트 + openUnregisteredCheckSheet(handleSheetCompletedAction); + } else if (familyStatus === 'success') { + if (familyData.code) { + // 3. 가족이 있을때 : 새로운 가족그룹으로 이동 + openMoveGroupCheckSheet(() => { + mutateMoveFamily({ code }); + }); + } else { + // 4. 가족 없을때: 가족 그룹 참여 + openJoinGroupCheckSheet(() => { + mutateJoinFamily({ code }); + }); + } } + } catch (error) { + openInvalidNoticeSheet(handleInvalidNoticeAction); } }, [userStatus, familyStatus]); diff --git a/src/components/blocks/mypage/useOpenGroupLinkSheets.ts b/src/components/blocks/mypage/useOpenGroupLinkSheets.ts index 6ea8ce3d..9ab01229 100644 --- a/src/components/blocks/mypage/useOpenGroupLinkSheets.ts +++ b/src/components/blocks/mypage/useOpenGroupLinkSheets.ts @@ -24,6 +24,17 @@ const useOpenGroupLinkSheets = () => { }); }; + // '잘못된 그룹코드에요' 바텀시트 + const openInvalidNoticeSheet = (handler: () => void) => { + setOpenBottomSheet({ + sheetContent: 'Notice', + contentProps: { + type: 'invalid', + onMainActionClick: handler, + }, + }); + }; + // '새로운 가족그룹으로 이동할까요?' 바텀시트 const openMoveGroupCheckSheet = (handler: () => void) => { setOpenBottomSheet({ @@ -82,6 +93,7 @@ const useOpenGroupLinkSheets = () => { return { openUnregisteredCheckSheet, openExpiredNoticeSheet, + openInvalidNoticeSheet, openMoveGroupCheckSheet, openMoveGroupDoubleCheckSheet, openJoinGroupCheckSheet, diff --git a/src/lib/utils/crypt.ts b/src/lib/utils/crypt.ts index 27f9d149..058dc183 100644 --- a/src/lib/utils/crypt.ts +++ b/src/lib/utils/crypt.ts @@ -17,12 +17,18 @@ export const cipher = (parsedData: string) => { }; export const decipher = (encryptedData: string) => { - const toDecrypt = encryptedData.replace( - /[_]/g, - (match: string) => substitutionsBeforeDecryption.get(match) ?? match, - ); - console.log(CryptoJS.AES.decrypt(toDecrypt, key).toString(CryptoJS.enc.Utf8)); - return JSON.parse( - CryptoJS.AES.decrypt(toDecrypt, key).toString(CryptoJS.enc.Utf8), - ); + try { + const toDecrypt = encryptedData.replace( + /[_]/g, + (match: string) => substitutionsBeforeDecryption.get(match) ?? match, + ); + console.log( + CryptoJS.AES.decrypt(toDecrypt, key).toString(CryptoJS.enc.Utf8), + ); + return JSON.parse( + CryptoJS.AES.decrypt(toDecrypt, key).toString(CryptoJS.enc.Utf8), + ); + } catch (e) { + throw new Error('invalid code'); + } };