feat: 페이지 내비게이션 로직을 usePageNavigation 훅으로 분리 및 개선

Author: eunsoA

src/pages/cart/CartContent/CartContent.tsx

@@ -3,13 +3,13 @@ import PriceContainer from './PriceContainer/PriceContainer';
 import CartList from './CartList/CartList';
 import CheckBox from '@/shared/components/CheckBox/CheckBox';
 import * as S from './CartContent.styled';
-import { useNavigate } from 'react-router-dom';
-import { ROUTES } from '@/shared/config/routes';
 import LoadingContainer from '@/shared/components/LoadingContainer/LoadingContainer';
 import ErrorContainer from '@/shared/components/ErrorContainer/ErrorContainer';
 import { useCartContext } from '../contexts/CartContext';
 import { useOrderSelection } from '../hooks/useOrderSelection';
 import { useOrderCalculation } from '../hooks/useOrderCalculation';
+import { usePageNavigation } from '@/shared/hooks/usePageNavigation';
+import { ROUTES } from '@/shared/config/routes';
 
 export default function CartContent() {
   const { cartItems, isLoading, errorMessage } = useCartContext();
@@ -20,7 +20,7 @@ export default function CartContent() {
     orderIdList,
   );
 
-  const navigate = useNavigate();
+  const { navigateTo } = usePageNavigation();
 
   if (isLoading && !cartItems?.length) {
     return <LoadingContainer />;
@@ -36,13 +36,7 @@ export default function CartContent() {
 
   const handleOrderConfirmButtonClick = () => {
     const orderList = cartItems?.filter((item) => orderIdList.includes(item.id)) ?? [];
-
-    navigate(ROUTES.ORDER_SUCCESS, {
-      state: {
-        orderList,
-        paymentAmount,
-      },
-    });
+    navigateTo(ROUTES.ORDER_SUCCESS, { orderList, paymentAmount });
   };
 
   return (

src/pages/order/OrderSuccessPage.tsx

@@ -1,29 +1,28 @@
 import BackButton from '@/shared/components/BackButton/BackButton';
 import * as S from './OrderSuccessPage.styled';
 import Header from '@/shared/components/Header/Header';
-import { useLocation, useNavigate } from 'react-router-dom';
 import { useEffect } from 'react';
+import { usePageNavigation } from '@/shared/hooks/usePageNavigation';
 import { ROUTES } from '@/shared/config/routes';
-import { CartItemType } from '@/apis/cartItems/cartItem.type';
-
-interface OrderSuccessState {
-  orderList: CartItemType[];
-  paymentAmount: number;
-}
 
 export default function OrderSuccessPage() {
-  const navigate = useNavigate();
-  const location = useLocation();
-  const { orderList, paymentAmount } = location.state as OrderSuccessState;
-  const orderListType = orderList.length;
-  const orderQuantity = orderList.reduce((acc, { quantity }) => (acc += quantity), 0);
+  const { validateOrderSuccessState, navigateTo } = usePageNavigation();
 
   useEffect(() => {
-    if (!location.state) {
-      navigate(ROUTES.CART);
+    const state = validateOrderSuccessState();
+    if (!state) {
+      navigateTo(ROUTES.CART);
+      return;
     }
   }, []);
 
+  const state = validateOrderSuccessState();
+  if (!state) return null;
+
+  const { orderList, paymentAmount } = state;
+  const orderListType = orderList.length;
+  const orderQuantity = orderList.reduce((acc, { quantity }) => (acc += quantity), 0);
+
   return (
     <>
       <Header>

src/shared/hooks/usePageNavigation.ts

@@ -0,0 +1,38 @@
+import { useLocation, useNavigate } from 'react-router-dom';
+import { CartItemType } from '@/apis/cartItems/cartItem.type';
+
+interface OrderSuccessState {
+  orderList: CartItemType[];
+  paymentAmount: number;
+}
+
+type RouteState = OrderSuccessState | undefined;
+
+export const usePageNavigation = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const navigateTo = <T extends RouteState>(route: string, state?: T) => {
+    navigate(route, state ? { state } : undefined);
+  };
+
+  const validateOrderSuccessState = (): OrderSuccessState | null => {
+    if (!location.state) return null;
+
+    const state = location.state as OrderSuccessState;
+    if (
+      !state.orderList ||
+      !Array.isArray(state.orderList) ||
+      typeof state.paymentAmount !== 'number'
+    ) {
+      return null;
+    }
+
+    return state;
+  };
+
+  return {
+    navigateTo,
+    validateOrderSuccessState,
+  };
+};