fix: update resort map

src/entities/slope/model/model.d.ts

@@ -35,7 +35,7 @@ export type SlopeResponse = {
 }
 
 export type ResortConstant = {
-  MapComponent: ComponentType;
+  MapComponent: ComponentType | StaticImageData;
   slopes: SlopeConstant[];
   webcams: WebcamConstant[];
 };

src/entities/slope/model/resorts/eden.tsx

@@ -1,9 +1,9 @@
 'use client';
 
+import MapImage from '@public/maps/eden.png';
 import BasicSlopePath from '../image/eden/basic-slope-path';
 import JupiterSlopePath from '../image/eden/jupiter-slope-path';
 import MainSlopePath from '../image/eden/main-slope-path';
-import MapImage from '../image/eden/map';
 import MercurySlopePath from '../image/eden/mercury-slope-path';
 import SaturnSlopePath from '../image/eden/saturn-slope-path';
 import UranusSlopePath from '../image/eden/uranus-slope-path';

src/entities/slope/model/resorts/elysian-gangchon.tsx

@@ -1,11 +1,11 @@
 'use client';
 
+import ElysianGangchonMap from '@public/maps/elysian-gangchon.png';
 import DeerSlopPath from '../image/elysian-gangchon/deer-slop-path';
 import DragonSlopPath from '../image/elysian-gangchon/dragon-slop-path';
 import HorseSlopPath from '../image/elysian-gangchon/horse-slop-path';
 import JaguarSlopPath from '../image/elysian-gangchon/jaguar-slop-path';
 import LeopardSlopPath from '../image/elysian-gangchon/leopard-slop-path';
-import ElysianGangchonMap from '../image/elysian-gangchon/map';
 import PandaSlopPath from '../image/elysian-gangchon/panda-slop-path';
 import PegasusSlopPath from '../image/elysian-gangchon/pegasus-slop-path';
 import PumaSlopPath from '../image/elysian-gangchon/puma-slop-path';

src/entities/slope/model/resorts/gonjiam.tsx

@@ -1,10 +1,10 @@
 'use client';
 
+import GonjiamMap from '@public/maps/gonjiam.png';
 import CNP1SlopPath from '../image/gonjiam/cnp1-slop-path';
 import CNP2SlopPath from '../image/gonjiam/cnp2-slop-path';
 import Gram1SlopPath from '../image/gonjiam/gram1-slop-path';
 import Gram2SlopPath from '../image/gonjiam/gram2-slop-path';
-import GonjiamMap from '../image/gonjiam/map';
 import ThinkyouBridgeSlopPath from '../image/gonjiam/thinkyou-bridge-slop';
 import Thinkyou1SlopPath from '../image/gonjiam/thinkyou1-slop-path';
 import Thinkyou2SlopPath from '../image/gonjiam/thinkyou2-slop-path';

src/entities/slope/model/resorts/high1.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import High1Map from '@public/maps/high1.png';
 import Apollo1SlopPath from '../image/high1/apollo1-slop-path';
 import Apollo2SlopPath from '../image/high1/apollo2-slop-path';
 import Apollo3SlopPath from '../image/high1/apollo3-slop-path';
@@ -10,7 +11,6 @@ import Athena3SlopPath from '../image/high1/athena3-slop-path';
 import Hera1SlopPath from '../image/high1/hera1-slop-path';
 import Hera2SlopPath from '../image/high1/hera2-slop-path';
 import Hera3SlopPath from '../image/high1/hera3-slop-path';
-import High1Map from '../image/high1/map';
 import Victoria1SlopPath from '../image/high1/victoria1-slop-path';
 import Victoria2SlopPath from '../image/high1/victoria2-slop-path';
 import Zeus1SlopPath from '../image/high1/zeus1-slop-path';

src/entities/slope/model/resorts/jisan.tsx

@@ -1,9 +1,9 @@
 'use client';
 
+import MapImage from '@public/maps/jisan.png';
 import BlueLiftPath from '../image/jisan/blue-lift-path';
 import Lemon1Sub1LiftPath from '../image/jisan/lemon1-1-lift-path';
 import Lemon1LiftPath from '../image/jisan/lemon1-lift-path';
-import MapImage from '../image/jisan/map';
 import NewOrangeLiftPath from '../image/jisan/new-orange-lift-path';
 import Orange2LiftPath from '../image/jisan/orange2-lift-path';
 import Orange3LiftPath from '../image/jisan/orange3-lift-path';

src/entities/slope/model/resorts/muju.tsx

@@ -1,13 +1,13 @@
 'use client';
 
+import MujuMap from '@public/maps/muju.png';
 import AllegroPath from '../image/muju/allegro-path';
 import CadenzaSlopePath from '../image/muju/cadenza-slope-path';
 import ConnectionSlopePath from '../image/muju/connection-slope-path';
 import EasternSlopePath from '../image/muju/eastern-slope-path';
 import FlamingoPath from '../image/muju/flamingo-path';
 import FreewayPath from '../image/muju/freeway-path';
 import Freeway2Path from '../image/muju/freeway2-path';
-import MujuMap from '../image/muju/map';
 import MinuetPath from '../image/muju/minuet-path';
 import ModeratoPath from '../image/muju/moderato-path';
 import MozartPath from '../image/muju/mozart-path';

src/entities/slope/model/resorts/phoenix.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import MapImage from '@public/maps/phoenix.png';
 import ChampionSlopePath from '../image/phoenix/champion-slope-path';
 import DiggySlopePath from '../image/phoenix/diggy-slope-path';
 import DukeSlopePath from '../image/phoenix/duke-slope-path';
@@ -8,7 +9,6 @@ import FantasySlopePath from '../image/phoenix/fantasy-slope-path';
 import HawkSlope1Path from '../image/phoenix/hawk-slope1-path';
 import HawkSlope2Path from '../image/phoenix/hawk-slope2-path';
 import KiwiSlopePath from '../image/phoenix/kiwi-slope-path';
-import MapImage from '../image/phoenix/map';
 import MogulSlopePath from '../image/phoenix/mogul-slope-path';
 import PanoramaPath from '../image/phoenix/panorama-path';
 import ParadisePath from '../image/phoenix/paradise-path';

src/entities/slope/model/resorts/vivaldipark.tsx

@@ -1,12 +1,12 @@
 'use client';
 
+import VivaldiparkMap from '@public/maps/vivaldipark.png';
 import BalladSlopPath from '../image/vivaldipark/ballad-slop-path';
 import BluesSlopPath from '../image/vivaldipark/blues-slop-path';
 import ClassicSlopPath from '../image/vivaldipark/classic-slop-path';
 import FunkySlopPath from '../image/vivaldipark/funky-slop-path';
 import HiphopSlopPath from '../image/vivaldipark/hiphop-slop-path';
 import JazzSlopPath from '../image/vivaldipark/jazz-slop-path';
-import VivaldiparkMap from '../image/vivaldipark/map';
 import ReggaeSlopPath from '../image/vivaldipark/reggae-slop-path';
 import RockSlopPath from '../image/vivaldipark/rock-slop-path';
 import TechnoSlopPath from '../image/vivaldipark/techno-slop-path';

src/entities/slope/model/resorts/wellihilli.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import WellihilliMap from '@public/maps/wellihilli.png';
 import AlphaSlope1Path from '../image/wellihilli/alpha-slope1-path';
 import AlphaSlope2Path from '../image/wellihilli/alpha-slope2-path';
 import AlphaSlope3Path from '../image/wellihilli/alpha-slope3-path';
@@ -18,7 +19,6 @@ import EchoSlope1Path from '../image/wellihilli/echo-slope1-path';
 import EchoSlope2Path from '../image/wellihilli/echo-slope2-path';
 import EchoSlope3Path from '../image/wellihilli/echo-slope3-path';
 import HalfPipePath from '../image/wellihilli/half-pipe-path';
-import WellihilliMap from '../image/wellihilli/map';
 import StarExpress1Path from '../image/wellihilli/star-express1-path';
 import StarExpress2Path from '../image/wellihilli/star-express2-path';
 import type { ResortConstant } from '../model';

src/entities/slope/model/resorts/yongpyong.tsx

@@ -1,11 +1,11 @@
 'use client';
 
+import MapImage from '@public/maps/yongpyong.png';
 import BlueSlopePath from '../image/yongpyong/blue-slope-path';
 import DragonParkPath from '../image/yongpyong/dragon-park-path';
 import GoldFantasticPath from '../image/yongpyong/gold-fantastic-path';
 import GoldParadisePath from '../image/yongpyong/gold-paradise-path';
 import GoldValleyPath from '../image/yongpyong/gold-valley-path';
-import MapImage from '../image/yongpyong/map';
 import MegaGreenPath from '../image/yongpyong/mega-green-path';
 import NewGoldSlopePath from '../image/yongpyong/new-gold-slope-path';
 import NewRedSlopePath from '../image/yongpyong/new-red-slope-path';

src/features/slope/ui/slope-map.tsx

@@ -1,4 +1,5 @@
 import { animated } from '@react-spring/web';
+import Image, { type StaticImageData } from 'next/image';
 import type { ComponentType } from 'react';
 import React, { forwardRef } from 'react';
 import type { Level } from '@/entities/slope/model';
@@ -8,7 +9,7 @@ import useSlopeStore from '../hooks/useSlopeStore';
 
 interface SlopeMapProps {
   children?: React.ReactNode;
-  MapComponent: ComponentType;
+  MapComponent: ComponentType | StaticImageData;
 
   slopes: {
     id: string;
@@ -29,14 +30,20 @@ const SlopeMap = forwardRef<HTMLDivElement, SlopeMapProps>(
       <animated.div
         ref={ref}
         style={{
+          position: 'relative',
           touchAction: 'none',
           display: 'inline-block',
           width: '100%',
           height: '100%',
+          aspectRatio: '377 / 211',
           ...style,
         }}
       >
-        <MapComponent />
+        {typeof MapComponent === 'object' ? (
+          <Image src={MapComponent} alt="map" fill sizes="100%" />
+        ) : (
+          <MapComponent />
+        )}
         {slopes.map((slope) => (
           <div key={slope.id} className={cn('absolute top-0 w-full')}>
             <slope.Element