feat: 웹캠 데이터 형식 변경 (#15)

* fix: slop 데이터 형식 변경에 따른 컴포넌트 적용 * fix: 지산 스키장 예시 추가 * fix: 도메인에 따라 다른 데이터를 주도록 분기처리
Nexters · Aug 17, 2024 · 31506b0 · 31506b0
1 parent fe504b3
commit 31506b0
Show file tree

Hide file tree

Showing 8 changed files with 129 additions and 117 deletions.
diff --git a/src/app/mobile/webcam/[key]/page.tsx b/src/app/mobile/webcam/[key]/page.tsx
@@ -0,0 +1,20 @@
+import { redirect } from 'next/navigation';
+import React from 'react';
+import WebcamMobileMapPage from '@/pages/webcam/ui/webcam-mobile-map-page';
+import { JISAN } from '@/entities/slop/model';
+
+const domainMap = {
+  jisan: JISAN,
+};
+
+const Page = ({ params }: { params: { key: string } }) => {
+  if (!(params.key in domainMap)) {
+    redirect('/not-found');
+  }
+
+  const domain = domainMap[params.key as keyof typeof domainMap];
+
+  return <WebcamMobileMapPage data={domain} />;
+};
+
+export default Page;
diff --git a/src/app/mobile/webcam/page.tsx b/src/app/mobile/webcam/page.tsx
diff --git a/src/entities/slop/model/jisan.tsx b/src/entities/slop/model/jisan.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 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';
@@ -17,138 +19,129 @@ export const JISAN: ResortInfo = {
       level: 'BEGINNER',
       name: '레몬 리프트 1',
       Element: Lemon1LiftPath,
-      webcam: {
-        id: 'lemon-station',
-        name: '레몬 탑승장',
-        position: {
-          top: 'top-[84%]',
-          left: 'left-[20%]',
-        },
-        scale: 2,
-      },
+      webcamId: 'lemon-station',
       isOpen: true,
-      isDayOpen: false,
-      isNightOpen: false,
-      isLateNightOpen: false,
     },
     {
       id: 'lemon1-1-lift',
       level: 'BEGINNER',
       name: '레몬 리프트 1-1',
       Element: Lemon1Sub1LiftPath,
-      webcam: null,
       isOpen: false,
-      isDayOpen: false,
-      isNightOpen: false,
-      isLateNightOpen: false,
     },
     {
       id: 'orange2-lift',
       level: 'INTERMEDIATE',
       name: '오렌지 리프트 2',
       Element: Orange2LiftPath,
-      webcam: {
-        id: 'orange-station',
-        name: '오렌지 탑승장',
-        position: {
-          top: 'top-[69%]',
-          left: 'left-[29%]',
-        },
-        scale: 1,
-        src: 'http://konjiam.live.cdn.cloudn.co.kr/konjiam/cam01.stream/playlist.m3u8',
-      },
+      webcamId: 'orange-station',
       isOpen: true,
-      isDayOpen: false,
-      isNightOpen: false,
-      isLateNightOpen: false,
     },
     {
       id: 'orange3-lift',
       level: 'INTERMEDIATE',
       name: '오렌지 리프트 3',
       Element: Orange3LiftPath,
-      webcam: {
-        id: 'new-orange-station',
-        name: '뉴오렌지 탑승장',
-        position: {
-          top: 'top-[64%]',
-          left: 'left-[38%]',
-        },
-        scale: 2,
-        src: 'http://konjiam.live.cdn.cloudn.co.kr/konjiam/cam01.stream/playlist.m3u8',
-      },
+      webcamId: 'new-orange-station',
       isOpen: true,
-      isDayOpen: false,
-      isNightOpen: false,
-      isLateNightOpen: false,
     },
     {
       id: 'new-orange-lift',
       level: 'ADVANCED',
       name: '뉴오렌지 리프트',
       Element: NewOrangeLiftPath,
-      webcam: null,
       isOpen: true,
-      isDayOpen: false,
-      isNightOpen: false,
-      isLateNightOpen: false,
     },
     {
       id: 'blue-lift',
       level: 'ADVANCED',
       name: '블루 리프트 5',
       Element: BlueLiftPath,
-      webcam: {
-        id: 'blue-station',
-        name: '블루 탑승장',
-        scale: 2,
-        position: {
-          top: 'top-[69%]',
-          left: 'left-[56%]',
-        },
-      },
+      webcamId: 'blue-station',
       isOpen: true,
-      isDayOpen: false,
-      isNightOpen: false,
-      isLateNightOpen: false,
     },
     {
       id: 'silver6-lift',
       level: 'EXPERT',
       name: '실버 리프트 6',
       Element: Silver6LiftPath,
-      webcam: {
-        id: '5-station',
-        name: '5번 슬로프',
-        scale: 1,
-        position: {
-          top: 'top-[47%]',
-          left: 'left-[37%]',
-        },
-      },
+      webcamId: '5-station',
       isOpen: true,
-      isDayOpen: false,
-      isNightOpen: false,
-      isLateNightOpen: false,
     },
     {
       id: 'silver7-lift',
       level: 'UPPER_INTERMEDIATE',
       name: '실버 리프트 7',
       Element: Silver7LiftPath,
-      webcam: {
-        id: 'silver-station',
-        name: '실버 탑승장',
-        scale: 1,
-        position: {
-          top: 'top-[72%]',
-          left: 'left-[68%]',
-        },
-      },
+      webcamId: 'silver-station',
       isOpen: true,
-      isDayOpen: false,
-      isNightOpen: false,
-      isLateNightOpen: false,
+    },
+  ],
+  webcams: [
+    {
+      id: 'lemon-station',
+      name: '레몬 탑승장',
+      position: {
+        top: 'top-[84%]',
+        left: 'left-[20%]',
+      },
+      scale: 1,
+    },
+    {
+      id: 'orange-station',
+      name: '오렌지 탑승장',
+      position: {
+        top: 'top-[69%]',
+        left: 'left-[29%]',
+      },
+      scale: 1,
+      src: 'http://konjiam.live.cdn.cloudn.co.kr/konjiam/cam01.stream/playlist.m3u8',
+    },
+    {
+      id: 'blue-station',
+      name: '블루 탑승장',
+      scale: 1,
+      position: {
+        top: 'top-[69%]',
+        left: 'left-[56%]',
+      },
+    },
+    {
+      id: 'silver-station',
+      name: '실버 탑승장',
+      scale: 1,
+      position: {
+        top: 'top-[72%]',
+        left: 'left-[68%]',
+      },
+    },
+    {
+      id: '5-station',
+      name: '5번 슬로프',
+      scale: 1,
+
+      position: {
+        top: 'top-[47%]',
+        left: 'left-[37%]',
+      },
+    },
+    {
+      id: 'new-orange-station',
+      name: '뉴오렌지 탑승장',
+      scale: 1,
+      position: {
+        top: 'top-[64%]',
+        left: 'left-[38%]',
+      },
+    },
+    {
+      id: 'jisan-overview',
+      name: '지산 전경',
+      scale: 1,
+      position: {
+        top: 'top-[38%]',
+        left: 'left-[52%]',
+      },
     },
   ],
 };
diff --git a/src/entities/slop/model/model.d.ts b/src/entities/slop/model/model.d.ts
@@ -9,6 +9,7 @@ export type Level =
 export type ResortInfo = {
   MapComponent: ComponentType;
   slops: Slop[];
+  webcams: Webcam[];
 };
 
 export type Webcam = {
@@ -27,12 +28,8 @@ export type Slop = {
   level: Level;
   name: string;
   Element: React.FC;
+  webcamId?: string;
   isOpen: boolean;
-  isDayOpen: boolean;
-  isNightOpen: boolean;
-  isLateNightOpen: boolean;
-
-  webcam: Webcam | null;
 };
 
 export type Position = {

diff --git a/src/features/slop/ui/slop-camera.tsx b/src/features/slop/ui/slop-camera.tsx
@@ -27,13 +27,12 @@ const SlopCamera = ({
   const cameraRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    console.log(updateCameraPosition);
     cameraRef.current &&
       updateCameraPosition(id, {
         x: cameraRef.current.getBoundingClientRect().x,
         y: cameraRef.current.getBoundingClientRect().y,
       });
-  }, [id, updateCameraPosition]);
+  }, [id, updateCameraPosition, cameraRef]);
 
   const toggleVideo = () => {
     setIsVideoOpen((pre) => !pre);

diff --git a/src/pages/webcam/ui/webcam-mobile-map-page.tsx b/src/pages/webcam/ui/webcam-mobile-map-page.tsx
@@ -4,13 +4,10 @@ import React, { useCallback, useState } from 'react';
 import { WebcamMap, WebcamSlopList } from '@/widgets/webcam/ui';
 import useMapPinch from '@/features/slop/hooks/useMapPinch';
 import calculateWebcamPosition from '@/features/slop/lib/calculateWebcamPosition';
-import { JISAN } from '@/entities/slop/model';
-import type { Position } from '@/entities/slop/model/model';
+import type { Position, ResortInfo } from '@/entities/slop/model/model';
 import { cn } from '@/shared/lib';
 
-const WebCamMobileMapPage = () => {
-  const DUMMY2 = JISAN;
-
+const WebCamMobileMapPage = ({ data }: { data: ResortInfo }) => {
   const [cameraPositions, setCameraPositions] = useState<{
     [key: string]: Position;
   }>({});
@@ -39,12 +36,17 @@ const WebCamMobileMapPage = () => {
         ref={ref}
         style={style}
         containerRef={containerRef}
-        slops={DUMMY2.slops}
-        MapComponent={DUMMY2.MapComponent}
+        slops={data.slops}
+        webcams={data.webcams}
+        MapComponent={data.MapComponent}
         onCameraClick={handleFocusSlopCamClick}
         updateCameraPosition={updateCameraPosition}
       />
-      <WebcamSlopList list={DUMMY2.slops} onItemClick={handleFocusSlopCamClick} />
+      <WebcamSlopList
+        webcams={data.webcams}
+        list={data.slops}
+        onItemClick={handleFocusSlopCamClick}
+      />
     </main>
   );
 };

diff --git a/src/widgets/webcam/ui/webcam-map.tsx b/src/widgets/webcam/ui/webcam-map.tsx
@@ -18,30 +18,29 @@ interface WebcamMapProps extends ResortInfo {
 }
 
 const WebcamMap = forwardRef<HTMLDivElement, WebcamMapProps>(
-  ({ slops, style, MapComponent, onCameraClick, containerRef, updateCameraPosition }, ref) => {
+  (
+    { slops, webcams, style, MapComponent, onCameraClick, containerRef, updateCameraPosition },
+    ref
+  ) => {
     const { selectedSlop } = useSlopStore();
 
     return (
       <section className={cn('relative aspect-[25/14] w-full overflow-hidden')} ref={containerRef}>
         <SlopMap MapComponent={MapComponent} ref={ref} slops={slops} style={style}>
-          {slops
-            .filter(
-              (
-                slop
-              ): slop is WebcamMapProps['slops'][number] & {
-                webcam: NonNullable<WebcamMapProps['slops'][number]['webcam']>;
-              } => slop.webcam !== null
-            )
-            .map(({ id, webcam }) => (
+          {webcams.map((webcam) => {
+            const slop = slops.find((slop) => slop.webcamId === webcam.id);
+
+            return (
               <SlopCamera
-                key={id}
+                key={webcam.id}
                 webcam={webcam}
-                isOpen={selectedSlop === id}
+                isOpen={slop?.id === selectedSlop}
                 containerRef={containerRef}
                 onCameraClick={onCameraClick}
                 updateCameraPosition={updateCameraPosition}
               />
-            ))}
+            );
+          })}
         </SlopMap>
       </section>
     );