feat: connect webcam api (#53)

* feat: update resort slopes and webcams data * fix: change pathAsset to start uppercase * feat: connect slope and webcam api * fix: change slope id * fix: update slope and webcam id connection * fix: connect slope list data * fix: update close icon
Nexters · Nov 29, 2024 · e30a378 · e30a378
1 parent 6eaa521
commit e30a378
Show file tree

Hide file tree

Showing 22 changed files with 684 additions and 1,315 deletions.
diff --git a/src/entities/slope/model/model.d.ts b/src/entities/slope/model/model.d.ts
@@ -1,38 +1,33 @@
-export type Level =
-  | '초급'
-  | '초중급'
-  | '중급'
-  | '중상급'
-  | '상급'
-  | '최상급'
-  | '파크';
+export type Level = '초급' | '초중급' | '중급' | '중상급' | '상급' | '최상급' | '파크';
 
-export type Slope = {
-  name: string,
-  difficulty: Level,
-  isDayOperating: true,
-  isNightOperating: true,
-  isLateNightOperating: true,
-  isDawnOperating: true,
-  isMidnightOperating: true
-}
+export type SlopeRaw = {
+  slopeId: number;
+  name: string;
+  difficulty: Level;
+  isDayOperating: boolean;
+  isNightOperating: boolean;
+  isLateNightOperating: boolean;
+  isDawnOperating: boolean;
+  isMidnightOperating: boolean;
+  webcamNo: number;
+};
 
-export type Webcam = {
-  name: string,
-  number: 0,
-  description: string,
-  url: string
-}
+export type WebcamRaw = {
+  name: string;
+  number: number;
+  description: string;
+  url: string;
+};
 
 export type SlopeResponse = {
-  dayOperatingHours: string,
-  nightOperatingHours: string,
-  lateNightOperatingHours: string,
-  dawnOperatingHours: string,
-  midnightOperatingHours: string,
-  slopes: Slope[],
-  webcams: Webcam[]
-}
+  dayOperatingHours: string;
+  nightOperatingHours: string;
+  lateNightOperatingHours: string;
+  dawnOperatingHours: string;
+  midnightOperatingHours: string;
+  slopes: SlopeRaw[];
+  webcams: WebcamRaw[];
+};
 
 export type ResortConstant = {
   MapComponent: ComponentType | StaticImageData;
@@ -41,26 +36,25 @@ export type ResortConstant = {
 };
 
 export type WebcamConstant = {
-  id: string;
-  name: string;
+  id: number;
   scale: number;
   position: {
     top: string;
     left: string;
   };
-  src?: string;
 };
 
 export type SlopeConstant = {
-  id: string;
-  level: Level;
-  name: string;
-  Element: React.FC;
-  webcamId?: string;
-  isOpen: boolean;
+  id: number;
+  PathAsset: ComponentType<{
+    color?: string;
+  }>;
 };
 
 export type Position = {
   x: number;
   y: number;
 };
+
+export type Slope = SlopeRaw & SlopeConstant;
+export type Webcam = WebcamRaw & WebcamConstant;
diff --git a/src/entities/slope/model/resorts/eden.tsx b/src/entities/slope/model/resorts/eden.tsx
@@ -14,82 +14,53 @@ export const EDEN: ResortConstant = {
   MapComponent: MapImage,
   slopes: [
     {
-      id: 'basic-slope',
-      level: '초급',
-      name: '베이직 슬로프',
-      Element: BasicSlopePath,
-      webcamId: 'basic-slope',
-      isOpen: true,
+      id: 145,
+      PathAsset: BasicSlopePath,
     },
     {
-      id: 'main-slope',
-      level: '초급',
-      name: '메인 슬로프',
-      Element: MainSlopePath,
-      webcamId: 'basic-slope',
-      isOpen: true,
+      id: 146,
+      PathAsset: MainSlopePath,
     },
     {
-      id: 'jupiter-slope',
-      level: '중급',
-      name: '쥬피터 슬로프',
-      Element: JupiterSlopePath,
-      webcamId: 'jupiter-slope',
-      isOpen: true,
+      id: 147,
+      PathAsset: JupiterSlopePath,
     },
     {
-      id: 'saturn-slope',
-      level: '중급',
-      name: '새턴 슬로프',
-      Element: SaturnSlopePath,
-      isOpen: true,
+      id: 148,
+      PathAsset: SaturnSlopePath,
     },
     {
-      id: 'uranus-slope',
-      level: '중급',
-      name: '우라누스',
-      Element: UranusSlopePath,
-      webcamId: 'uranus-slope',
-      isOpen: true,
+      id: 149,
+      PathAsset: UranusSlopePath,
     },
     {
-      id: 'mercury-slope',
-      level: '상급',
-      name: '머큐리 슬로프',
-      Element: MercurySlopePath,
-      isOpen: true,
+      id: 150,
+      PathAsset: MercurySlopePath,
     },
     {
-      id: 'venus-slope',
-      level: '상급',
-      name: '비너스 슬로프',
-      Element: VenusSlopePath,
-      webcamId: 'basic-slope',
-      isOpen: true,
+      id: 151,
+      PathAsset: VenusSlopePath,
     },
   ],
   webcams: [
     {
-      id: 'basic-slope',
-      name: '베이직 슬로프',
+      id: 1,
       position: {
         top: 'top-[52%]',
         left: 'left-[35%]',
       },
       scale: 1,
     },
     {
-      id: 'jupiter-slope',
-      name: '쥬피터 슬로프',
+      id: 2,
       position: {
         top: 'top-[16%]',
         left: 'left-[50%]',
       },
       scale: 1,
     },
     {
-      id: 'uranus-slope',
-      name: '우라누스 슬로프',
+      id: 3,
       position: {
         top: 'top-[32%]',
         left: 'left-[77%]',

diff --git a/src/entities/slope/model/resorts/elysian-gangchon.tsx b/src/entities/slope/model/resorts/elysian-gangchon.tsx
@@ -17,107 +17,65 @@ export const ELYSIAN_GANGCHON: ResortConstant = {
   MapComponent: ElysianGangchonMap,
   slopes: [
     {
-      id: 'panda-slop',
-      level: '초급',
-      name: '팬더슬로프',
-      Element: PandaSlopPath,
-      webcamId: 'sub-house',
-      isOpen: true,
+      id: 112,
+      PathAsset: PandaSlopPath,
     },
     {
-      id: 'rabbit-slop',
-      level: '초급',
-      name: '래빗슬로프',
-      Element: RabbitSlopPath,
-      webcamId: 'sub-house',
-      isOpen: true,
+      id: 113,
+      PathAsset: RabbitSlopPath,
     },
     {
-      id: 'dragon-slop',
-      level: '중급',
-      name: '드래곤슬로프',
-      Element: DragonSlopPath,
-      webcamId: 'alp-house',
-      isOpen: true,
+      id: 114,
+      PathAsset: DragonSlopPath,
     },
     {
-      id: 'horse-slop',
-      level: '중급',
-      name: '호스슬로프',
-      Element: HorseSlopPath,
-      webcamId: 'alp-house',
-      isOpen: true,
+      id: 115,
+      PathAsset: HorseSlopPath,
     },
     {
-      id: 'pegasus-slop',
-      level: '중급',
-      name: '페가수스슬로프',
-      Element: PegasusSlopPath,
-      webcamId: 'ski-house',
-      isOpen: true,
+      id: 116,
+      PathAsset: PegasusSlopPath,
     },
     {
-      id: 'zebra-slop',
-      level: '중급',
-      name: '제브라슬로프',
-      Element: ZebraSlopPath,
-      webcamId: 'ski-house',
-      isOpen: true,
+      id: 117,
+      PathAsset: ZebraSlopPath,
     },
     {
-      id: 'deer-slop',
-      level: '중급',
-      name: '디어슬로프',
-      Element: DeerSlopPath,
-      isOpen: true,
+      id: 118,
+      PathAsset: DeerSlopPath,
     },
     {
-      id: 'puma-slop',
-      level: '중급',
-      name: '퓨마슬로프',
-      Element: PumaSlopPath,
-      webcamId: 'alp-house',
-      isOpen: true,
+      id: 119,
+      PathAsset: PumaSlopPath,
     },
     {
-      id: 'leopard-slop',
-      level: '상급',
-      name: '래퍼드슬로프',
-      Element: LeopardSlopPath,
-      webcamId: 'ski-house',
-      isOpen: true,
+      id: 120,
+      PathAsset: LeopardSlopPath,
     },
     {
-      id: 'jaguar-slop',
-      level: '상급',
-      name: '제규어슬로프',
-      Element: JaguarSlopPath,
-      webcamId: 'ski-house',
-      isOpen: true,
+      id: 121,
+      PathAsset: JaguarSlopPath,
     },
   ],
   webcams: [
     {
-      id: 'sub-house',
-      name: '서브하우스',
+      id: 1,
       position: {
         top: 'top-[86%]',
         left: 'left-[19%]',
       },
       scale: 1,
     },
     {
-      id: 'alp-house',
-      name: '알프하우스',
+      id: 2,
       position: {
         top: 'top-[7%]',
         left: 'left-[27%]',
       },
       scale: 1,
     },
     {
-      id: 'ski-house',
-      name: '스키하우스',
+      id: 3,
       position: {
         top: 'top-[83%]',
         left: 'left-[80%]',