Merge pull request #83 from Minsoek96/dev/digged

fix : queryKey invalidation
uchumu · Dec 11, 2024 · be32302 · be32302
2 parents 90627a3 + 3023196
commit be32302
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 26 deletions.
diff --git a/...CapsuleDetailPage/CapsuleStatusSwitcher/UnDiggedScreen/UndigHandler/UnDigModalManager.tsx b/...CapsuleDetailPage/CapsuleStatusSwitcher/UnDiggedScreen/UndigHandler/UnDigModalManager.tsx
@@ -1,7 +1,7 @@
 import { UnDigStatus } from "./type";
 import UnDigConfirmationModal from "@/components/Modals/CapsuleUnDigModal/UnDigConfirmationModal";
 import UnDigPassWordModal from "@/components/Modals/CapsuleUnDigModal/UnDigPassWordModal";
-import { getFormattedDate } from "@/utils/formatTime";
+import { getFormattedDateTime } from "@/utils/formatTime";
 
 interface Props {
   undigStatus: UnDigStatus;
@@ -18,10 +18,15 @@ interface Props {
  * @param goalTime - 캡슐 목표 시간 (number)
  * @returns 상태에 맞는 모달 컴포넌트
  */
-export default function UnDigModalManager({ undigStatus,hideModal,onClick,goalTime }: Props) {
+export default function UnDigModalManager({
+  undigStatus,
+  hideModal,
+  onClick,
+  goalTime,
+}: Props) {
   if (!undigStatus) return null;
 
-  const formatGoalTime = getFormattedDate(new Date(goalTime))
+  const formatGoalTime = getFormattedDateTime(new Date(goalTime * 1000));
 
   const modals = {
     failUndig: (
@@ -40,10 +45,7 @@ export default function UnDigModalManager({ undigStatus,hideModal,onClick,goalTi
       />
     ),
     passwordError: (
-      <UnDigPassWordModal
-        hideModal={hideModal}
-        onClick={onClick}
-      />
+      <UnDigPassWordModal hideModal={hideModal} onClick={onClick} />
     ),
   };
 

diff --git a/src/_app/pages/CapsuleDetailPage/CapsuleStatusSwitcher/UnDiggedScreen/UndigHandler/type.tsx b/src/_app/pages/CapsuleDetailPage/CapsuleStatusSwitcher/UnDiggedScreen/UndigHandler/type.tsx
@@ -1,2 +1,7 @@
-export type UnDigStatus = "failUndig" | "successUndig" | "passwordError"
+export const UN_DIG_STATUS = {
+  SUCCESS: 'successUndig',
+  FAILURE: 'failUndig',
+  PASSWORD_ERROR: 'passwordError',
+} as const;
 
+export type UnDigStatus = (typeof UN_DIG_STATUS)[keyof typeof UN_DIG_STATUS];
diff --git a/src/_app/pages/CapsuleDetailPage/CapsuleStatusSwitcher/UnDiggedScreen/index.tsx b/src/_app/pages/CapsuleDetailPage/CapsuleStatusSwitcher/UnDiggedScreen/index.tsx
@@ -17,6 +17,7 @@ import {
   UnDigStatus,
   UnDigModalManager,
   unDiggedErrorHandler,
+  UN_DIG_STATUS,
 } from "./UndigHandler";
 
 interface Props {
@@ -36,19 +37,24 @@ const UnDiggedScreen = ({ capsule }: Props) => {
   const [inputPassword, setInputPassword] = useState<string>("");
   const handleInputPassword = (newPassword: string) =>
     setInputPassword(newPassword);
-  const { mutateAsync } = useDigMutate({ code: capsuleCode });
+  const { mutateAsync, invalidateCapsuleQueries } = useDigMutate({
+    code: capsuleCode,
+  });
 
   const [unDigStatus, setUnDigStatus] = useState<UnDigStatus | null>(null);
 
-  const hideUnDigModal = () => setUnDigStatus(null);
-  const unDigComplateModal = async () => {
-    hideUnDigModal();
-    navigate(`/capsule/${encodeURIComponent(capsuleCode)}`);
+  const hideUnDigModal = () => {
+    setUnDigStatus(null);
   };
 
+  const unDigComplateModal = () => {
+    if (unDigStatus === UN_DIG_STATUS.SUCCESS) invalidateCapsuleQueries();
+    hideUnDigModal();
+  };
+  //파묻기 타임 초과시 불필요한 API 방지
   const undiggedOverTime = () => {
+    setUnDigStatus(UN_DIG_STATUS.FAILURE);
     hideDigModal();
-    setUnDigStatus("failUndig");
     return;
   };
 
@@ -62,8 +68,8 @@ const UnDiggedScreen = ({ capsule }: Props) => {
       setGlobalLoading(true);
       await mutateAsync({ code: capsuleCode, password: inputPassword });
       setTimeout(() => {
-        setUnDigStatus("successUndig");
-      });
+        setUnDigStatus(UN_DIG_STATUS.SUCCESS);
+      }, 1000);
     } catch (error) {
       const message = await unDiggedErrorHandler(error);
       setTimeout(() => {

diff --git a/src/queries/Capsule/useCapsuleService.ts b/src/queries/Capsule/useCapsuleService.ts
@@ -20,14 +20,25 @@ interface UseDigMutateProps {
 export const useDigMutate = ({ code }: UseDigMutateProps) => {
   const queryClient = useQueryClient();
 
-  return useMutation(
+  const mutation = useMutation(
     {
       mutationFn: CapsuleService.putCapsuleDig,
-      onSuccess: () =>
-        queryClient.invalidateQueries({
-          queryKey: queryKeys.capsule({ code }),
-        }),
+      onSuccess: () => {},
     },
     queryClient
   );
+
+  return {
+    ...mutation,
+    invalidateCapsuleQueries: () =>
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.capsule({ code }),
+      }),
+  };
 };
+
+// 모달 확인 하기전에 캐싱이 초기화되서 페이지 전환되어 디자인 규격 안맞는 문제
+// onSuccess: () =>
+//   queryClient.invalidateQueries({
+//     queryKey: queryKeys.capsule({ code }),
+//   }),
diff --git a/src/utils/formatTime.ts b/src/utils/formatTime.ts
@@ -20,14 +20,35 @@ const getFormattedDate = (date: Date): string => {
 };
 
 /**
-* 날짜가 과거 시간인지 확인
-* @param date 확인할 Date 객체
-* @returns true면 미래, false면 과거 또는 현재
-*/
+ * 날짜를 "YYYY년" M월 D일 H시 mm분" 형식으로 반환하는 유틸리티 함수
+ * @param date - 포맷팅할 Date 객체  
+ * @returns "YYYY년 M월 D일 H시 mm분" 형식의 문자열
+ */
+const getFormattedDateTime = (date: Date): string => {
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const hours = date.getHours();
+  const minutes = String(date.getMinutes()).padStart(2,'0');
+
+  return `${year}년 ${month}월 ${day}일 ${hours}시 ${minutes}분`;
+};
+
+
+/**
+ * 날짜가 과거 시간인지 확인
+ * @param date 확인할 Date 객체
+ * @returns true면 미래, false면 과거 또는 현재
+ */
 const getIsPastTime = (date: Date) => {
   const currentTime = getSecondsFromDate(new Date());
   const selectedTime = getSecondsFromDate(date);
   return currentTime > selectedTime;
 };
 
-export { getFormattedDate, getSecondsFromDate, getIsPastTime };
+export {
+  getFormattedDate,
+  getSecondsFromDate,
+  getIsPastTime,
+  getFormattedDateTime,
+};