refactor: 카드 클릭 시 상세페이지 이동

src/components/estimate/sent/SentEstimateCard.tsx

@@ -1,8 +1,12 @@
+import Link from "next/link";
+
 import { Text } from "@/components/common/Text";
 import { MoveTypeChip } from "@/components/common/Chip/MoveTypeChip";
 import DesignatedChip from "@/components/estimate/DesignatedChip";
 import FrameIcon from "@/icons/frame.svg";
+import { APP_ROUTES } from "@/lib/constants/appRoutes";
 import { formatKoreanDateTime } from "@/lib/utils/date";
+import { markInternalDetailNavigationOnClick } from "@/lib/utils/detailNavigation";
 import type { MoveType } from "@/types/move";
 
 export interface SentEstimateItem {
@@ -19,7 +23,6 @@ export interface SentEstimateItem {
 
 interface SentEstimateCardProps {
   estimate: SentEstimateItem;
-  onViewDetail?: (estimateId: number) => void;
 }
 
 function RouteArrow() {
@@ -31,12 +34,19 @@ function RouteArrow() {
   );
 }
 
-export default function SentEstimateCard({ estimate, onViewDetail }: SentEstimateCardProps) {
+export default function SentEstimateCard({ estimate }: SentEstimateCardProps) {
   const isConfirmed = estimate.status !== "SENT";
   const isCompleted = estimate.status === "COMPLETED";
+  const detailHref = APP_ROUTES.MOVER_ESTIMATES.SENT_DETAIL(estimate.id);
 
   return (
     <article className="border-border-subtle bg-background-default shadow-estimate-card rounded-20 relative flex min-h-[333px] w-full flex-col gap-24 overflow-hidden border-[0.5px] px-20 py-24 md:min-h-[322px] md:gap-32 md:px-40 md:py-32 xl:min-h-[324px]">
+      <Link
+        href={detailHref}
+        aria-label={`${estimate.customerName} 고객님 견적 상세보기`}
+        className="rounded-20 absolute inset-0 z-10 cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-border-brand)]"
+        onClick={(event) => markInternalDetailNavigationOnClick(event, detailHref)}
+      />
       <div className="flex flex-1 flex-col gap-16 md:gap-24">
         <div className="flex min-h-26 items-center justify-between">
           <div className="flex items-center gap-8">
@@ -117,18 +127,18 @@ export default function SentEstimateCard({ estimate, onViewDetail }: SentEstimat
       </div>
 
       {isCompleted ? (
-        <div className="bg-overlay-card-disabled border-border-dimmed rounded-20 absolute inset-[-0.5px] flex items-center justify-center border">
+        <div className="bg-overlay-card-disabled border-border-dimmed rounded-20 pointer-events-none absolute inset-[-0.5px] z-20 flex items-center justify-center border">
           <div className="flex w-[200px] flex-col items-center gap-20">
             <Text variant="2lg-semibold" className="text-text-inverse">
               이사 완료된 견적이에요
             </Text>
-            <button
-              type="button"
-              className="bg-background-brand-muted border-border-brand text-text-brand shadow-cta rounded-12 flex h-54 w-full items-center justify-center border"
-              onClick={() => onViewDetail?.(estimate.id)}
+            <Link
+              href={detailHref}
+              className="bg-background-brand-muted border-border-brand text-text-brand shadow-cta rounded-12 pointer-events-auto flex h-54 w-full items-center justify-center border"
+              onClick={(event) => markInternalDetailNavigationOnClick(event, detailHref)}
             >
               <Text variant="lg-semibold">견적 상세보기</Text>
-            </button>
+            </Link>
           </div>
         </div>
       ) : null}

src/components/estimate/sent/SentEstimatesPage.tsx

@@ -1,17 +1,13 @@
 "use client";
 
 import { useEffect, useRef } from "react";
-import { useRouter } from "next/navigation";
 
 import MoverEstimateTabs from "@/components/estimate/MoverEstimateTabs";
 import EstimatesQueryStatus from "@/components/estimate/EstimatesQueryStatus";
 import SentEstimateCard from "@/components/estimate/sent/SentEstimateCard";
 import { useSentEstimates } from "@/hooks/useSentEstimates";
-import { APP_ROUTES } from "@/lib/constants/appRoutes";
-import { markInternalDetailNavigation } from "@/lib/utils/detailNavigation";
 
 export default function SentEstimatesPage() {
-  const router = useRouter();
   const sentinelRef = useRef<HTMLDivElement>(null);
   const query = useSentEstimates();
   const { fetchNextPage, hasNextPage, isFetchingNextPage, isFetchNextPageError } = query;
@@ -68,12 +64,6 @@ export default function SentEstimatesPage() {
                     price: estimate.price,
                     status: estimate.status,
                   }}
-                  onViewDetail={(estimateId) => {
-                    const detailHref = APP_ROUTES.MOVER_ESTIMATES.SENT_DETAIL(estimateId);
-
-                    markInternalDetailNavigation(detailHref);
-                    router.push(detailHref);
-                  }}
                 />
               </div>
             ))}