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, +};