Merge pull request #309 from bankidz/refactor/mypage

fix : 그룹코드 에러처리
bankidz · Nov 20, 2022 · ec462df · ec462df
2 parents 6553451 + b9cefc5
commit ec462df
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 28 deletions.
diff --git 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: <Warning />,
+    main: '잘못된 그룹코드에요',
+    sub: '그룹 코드를 다시 입력해주세요',
+  },
   withdrawed: {
     icon: <Complete />,
     main: '탈퇴되었습니다',

diff --git 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
@@ -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
@@ -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');
+  }
 };