Refactor: map-image 로딩 처리 및 지도 에러 처리

src/pages/map/location/[placeId].tsx

@@ -1,38 +1,63 @@
-'use client';
 import { useRouter } from 'next/router';
 import Image from 'next/image';
 import { Header, LocationCard, AddressCopy } from '@/shared/components';
+import { useState } from 'react';
+import { cn } from '@/shared/lib';
 
 export default function LocationPage() {
   const router = useRouter();
   const { name, imageSrc, description, address } = router.query;
+  const [imgLoaded, setImgLoaded] = useState(false);
+
+  const defaultImage =
+    'https://geulda-ai-video-bucket.s3.ap-southeast-2.amazonaws.com/default/blank_background.svg';
 
   if (!router.isReady || !name) {
     return <p className="text-center mt-10">불러오는 중...</p>;
   }
 
+  const src =
+    typeof imageSrc === 'string' ? imageSrc.trim() : defaultImage;
+
   return (
     <div className="relative w-full h-[100vh] overflow-auto px-[2.4rem]">
       <Header title={String(name)} onClick={() => router.back()} />
 
       <main className="relative pt-[14.3rem] gap-[1.2rem] flex flex-col">
+        {!imgLoaded && (
+          <>
+            <div className="w-full h-[436px] bg-gray-200 animate-pulse rounded-[16px]" />
+            <div className="mt-[1.2rem] w-full h-[12rem] bg-gray-200 animate-pulse rounded-[20px]" />
+            <div className="mt-[1.2rem] w-full h-[4rem] bg-gray-200 animate-pulse rounded-[20px]" />
+          </>
+        )}
+
         <Image
-          src={typeof imageSrc === 'string' ? imageSrc : '/assets/board.svg'}
+          src={src}
           alt={String(name)}
           width={354}
           height={436}
-          className="w-full h-auto object-cover block rounded-[16px]"
+          className={cn(
+            'w-full h-auto object-cover block rounded-[16px] transition-opacity duration-300',
+            imgLoaded ? 'opacity-100' : 'opacity-0'
+          )}
+          onLoadingComplete={() => setImgLoaded(true)}
         />
 
-        <LocationCard
-          name={String(name)}
-          address={String(address)}
-          description={String(description)}
-          variant="mint"
-          size="large"
-        />
+        {imgLoaded && (
+          <>
+            <LocationCard
+              name={String(name)}
+              address={String(address)}
+              description={String(description)}
+              variant="mint"
+              size="large"
+            />
+
+            <AddressCopy variant="mint" value={String(address)} />
+          </>
+        )}
 
-        <AddressCopy variant="mint" value={String(address)} />
       </main>
     </div>
   );

src/pages/map/result/Map.tsx

@@ -1,6 +1,7 @@
 import { Header } from '@/shared/components';
 import { useRouter } from 'next/router';
 import FullMap from '@/shared/components/map/result/components/FullMap';
+import { useEffect } from 'react';
 
 const MapPage = () => {
   const router = useRouter();
@@ -9,6 +10,12 @@ const MapPage = () => {
     ? router.query.sessionId[0]
     : router.query.sessionId;
 
+  useEffect(() => {
+    if (router.isReady && !sessionId) {
+      router.push('/auth');
+    }
+  }, [router, sessionId]);
+
   return (
     <main
       className="w-full h-[100vh] bg-mint-300 overflow-hidden"
@@ -27,7 +34,10 @@ const MapPage = () => {
       />
 
       {sessionId ? (
-        <FullMap sessionId={sessionId} />
+        <FullMap
+          sessionId={sessionId}
+          onError={() => router.push('/auth')} 
+        />
       ) : (
         <div className="flex h-full items-center justify-center text-gray-600 text-title-sm bg-gray-200">
           코스 정보가 없습니다

src/shared/components/map/result/components/FullMap.tsx

@@ -1,16 +1,25 @@
-import { useRef, useState } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import { useCourseSession } from '@/shared/api/course/queries/useCourseSession';
 import { useKakaoCourseMap } from '@/shared/hooks/kakaoMap/useKakaoCourseMap';
 import LocationBubble from '@/shared/components/container/LocationBubble';
 import type { CoursePlace } from '@/shared/api/course/types/courseSession';
 
-export default function FullMap({ sessionId }: { sessionId: string }) {
-  const mapRef = useRef<HTMLDivElement | null>(null);
-  const { data } = useCourseSession(sessionId);
+interface FullMapProps {
+  sessionId: string;
+  onError?: () => void; 
+}
 
+export default function FullMap({ sessionId, onError }: FullMapProps) {
+  const mapRef = useRef<HTMLDivElement | null>(null);
+  const { data, isError } = useCourseSession(sessionId);
   const [selectedPlace, setSelectedPlace] = useState<CoursePlace | null>(null);
-  const [bubblePos, setBubblePos] =
-    useState<{ x: number; y: number } | null>(null);
+  const [bubblePos, setBubblePos] = useState<{ x: number; y: number } | null>(null);
+
+  useEffect(() => {
+    if (isError) {
+      onError?.(); 
+    }
+  }, [isError, onError]);
 
   useKakaoCourseMap(mapRef, {
     places: data?.places || [],
@@ -21,7 +30,7 @@ export default function FullMap({ sessionId }: { sessionId: string }) {
 
       const centerX = window.innerWidth / 2;
       const centerY = window.innerHeight / 2;
-      const offsetY = 20; 
+      const offsetY = 20;
 
       setBubblePos({
         x: centerX,
@@ -47,7 +56,7 @@ export default function FullMap({ sessionId }: { sessionId: string }) {
             style={{
               top: bubblePos.y,
               left: bubblePos.x,
-              transform: "translate(-50%, -100%)",
+              transform: 'translate(-50%, -100%)',
             }}
             onClick={(e) => e.stopPropagation()}
           >