diff --git a/src/_app/pages/CapsuleDetailPage/CapsuleStatusSwitcher/UnDiggedScreen/UndigHandler/UnDigModalManager.tsx b/src/_app/pages/CapsuleDetailPage/CapsuleStatusSwitcher/UnDiggedScreen/UndigHandler/UnDigModalManager.tsx
index df32768..e12edd9 100644
--- a/src/_app/pages/CapsuleDetailPage/CapsuleStatusSwitcher/UnDiggedScreen/UndigHandler/UnDigModalManager.tsx
+++ b/src/_app/pages/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: (
-
+
),
};
diff --git a/src/_app/pages/CapsuleDetailPage/CapsuleStatusSwitcher/UnDiggedScreen/UndigHandler/type.tsx b/src/_app/pages/CapsuleDetailPage/CapsuleStatusSwitcher/UnDiggedScreen/UndigHandler/type.tsx
index 704b3fb..ee364a6 100644
--- 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
index 5803377..a6f1d68 100644
--- 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("");
const handleInputPassword = (newPassword: string) =>
setInputPassword(newPassword);
- const { mutateAsync } = useDigMutate({ code: capsuleCode });
+ const { mutateAsync, invalidateCapsuleQueries } = useDigMutate({
+ code: capsuleCode,
+ });
const [unDigStatus, setUnDigStatus] = useState(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
index 4e13414..b4daa87 100644
--- 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
index d3fa46d..e9a9507 100644
--- 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,
+};