hotfix: 인터페이스 변경에 따른 컴포넌트 변경 (#12)

* fix: 캠에 tooltip이 가려지는 현상 해결 * fix: 슬로프 리스트 컴포넌트 하나의 반응형으로 추가 * feat: useMapPinch 변경에 따른 적용 * fix: slop header info 아이콘 레이아웃 변경 * fix: useSlopStore 전역상태 변경에 따른 대응 * fix: eslint 에러 제거 * fix: map 컴포넌트 변경에 따른 웹 변경
Nexters · Aug 17, 2024 · 670f994 · 670f994
1 parent 853690f
commit 670f994
Show file tree

Hide file tree

Showing 11 changed files with 135 additions and 169 deletions.
diff --git a/src/features/slop/ui/slop-camera.tsx b/src/features/slop/ui/slop-camera.tsx
@@ -4,8 +4,8 @@ import type { Position, Webcam } from '@/entities/slop/model/model';
 import { cn } from '@/shared/lib';
 import CameraButton from '@/shared/ui/cam-button';
 import { Tooltip } from '@/shared/ui/tooltip';
-import SlopVideo from './slop-video';
 import useSlopStore from '../hooks/useSlopStore';
+import SlopVideo from './slop-video';
 
 interface SlopWebcamProps {
   webcam: Webcam;
@@ -27,6 +27,7 @@ const SlopCamera = ({
   const cameraRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
+    console.log(updateCameraPosition);
     cameraRef.current &&
       updateCameraPosition(id, {
         x: cameraRef.current.getBoundingClientRect().x,
@@ -38,7 +39,7 @@ const SlopCamera = ({
     setIsVideoOpen((pre) => !pre);
   };
 
-  const { selectedSlop, setSelectedSlop } = useSlopStore();
+  const { setSelectedSlop } = useSlopStore();
 
   return (
     <>

diff --git a/src/features/slop/ui/slop-status-list.tsx b/src/features/slop/ui/slop-status-list.tsx
@@ -4,6 +4,7 @@ import LevelChip from '@/entities/slop/ui/level-chip';
 import CheckIcon from '@/shared/icons/check';
 import CloseIcon from '@/shared/icons/close';
 import { cn } from '@/shared/lib';
+import useSlopStore from '../hooks/useSlopStore';
 
 interface SlopStatusListProps {
   list: {
@@ -14,11 +15,11 @@ interface SlopStatusListProps {
     isNightOpen: boolean;
     isLateNightOpen: boolean;
   }[];
-  selectedSlop: string | null;
-  setSelectedSlop: React.Dispatch<React.SetStateAction<string | null>>;
 }
 
-const SlopStatusList = ({ list, setSelectedSlop, selectedSlop }: SlopStatusListProps) => {
+const SlopStatusList = ({ list }: SlopStatusListProps) => {
+  const { selectedSlop, setSelectedSlop } = useSlopStore();
+
   const handleSlopClick = ({ id }: { id: string }) => {
     setSelectedSlop(id);
   };

diff --git a/src/pages/discovery-detail/ui/discovery-detail-page.tsx b/src/pages/discovery-detail/ui/discovery-detail-page.tsx
@@ -1,20 +1,89 @@
 'use client';
 
-import DiscoveryContent from '@/widgets/discovery-detail/ui/discovery-content';
+import { useState } from 'react';
+import { useCallback } from 'react';
+import { DiscoveryContentTabList } from '@/widgets/discovery-detail/model/constants';
 import DiscoverySummary from '@/widgets/discovery-detail/ui/discovery-summary';
 import { Header } from '@/widgets/header/ui';
+import { WebcamMap, WebcamSlopList } from '@/widgets/webcam/ui';
+import useMapPinch from '@/features/slop/hooks/useMapPinch';
+import calculateWebcamPosition from '@/features/slop/lib/calculateWebcamPosition';
 import { DiscoveryData } from '@/entities/discovery';
+import { JISAN } from '@/entities/slop/model';
+import type { Position } from '@/entities/slop/model/model';
 import { cn } from '@/shared/lib';
 
+const DUMMY2 = JISAN;
+
 const DiscoveryDetailPage = ({ params }: { params: { resortId: number } }) => {
   const discovery = DiscoveryData.find((discovery) => discovery.id === +params?.resortId);
-  if (!discovery) return null;
+  const [selectedTab, setSelectedTab] = useState('webcam');
+
+  const [cameraPositions, setCameraPositions] = useState<{
+    [key: string]: Position;
+  }>({});
+  const { ref, style, api, containerRef } = useMapPinch();
+
+  const updateCameraPosition = useCallback((id: string, position: Position) => {
+    setCameraPositions((prev) => ({ ...prev, [id]: position }));
+  }, []);
+
+  const handleFocusSlopCamClick = ({ id, scale }: { id: string; scale: number }) => {
+    const { left, top, width, height } = containerRef.current!.getBoundingClientRect();
+    const { boundedX, boundedY } = calculateWebcamPosition({
+      containerPosition: { left, top, width, height },
+      position: {
+        x: cameraPositions[id].x,
+        y: cameraPositions[id].y,
+      },
+      scale: scale,
+    });
+    api.start({ scale: scale, x: boundedX, y: boundedY });
+  };
+
+  if (!discovery) return;
 
   return (
     <div className={cn('size-full')}>
       <Header hasBackButton hasShareButton />
       <DiscoverySummary {...discovery} />
-      <DiscoveryContent />
+      <ul className={cn('flex size-full h-[53px] bg-white')}>
+        {DiscoveryContentTabList.map((tab) => (
+          <li
+            key={tab.name}
+            className={cn(
+              'title3-semibold flex h-[51px] flex-1 cursor-pointer items-center justify-center text-gray-90',
+              selectedTab === tab.name ? 'box-content border-b-2 border-gray-90' : 'text-gray-40'
+            )}
+            onClick={() => setSelectedTab(tab.name)}
+          >
+            {tab.title}
+          </li>
+        ))}
+      </ul>
+      {selectedTab === 'webcam' && (
+        <>
+          <WebcamMap
+            slops={DUMMY2.slops}
+            MapComponent={DUMMY2.MapComponent}
+            containerRef={containerRef}
+            style={style}
+            ref={ref}
+            updateCameraPosition={updateCameraPosition}
+            onCameraClick={handleFocusSlopCamClick}
+          />
+          <WebcamSlopList
+            className={cn('bg-white')}
+            list={DUMMY2.slops.map((item) => ({
+              ...item,
+              isWebcam: !!item.webcam,
+            }))}
+            onItemClick={handleFocusSlopCamClick}
+          />
+        </>
+      )}
+      {selectedTab === 'weather' && <div>날씨</div>}
+      {selectedTab === 'slop' && <div>슬로프</div>}
     </div>
   );
 };

diff --git a/src/pages/slop-status/ui/slop-status-page.tsx b/src/pages/slop-status/ui/slop-status-page.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useRef, useState } from 'react';
 import SlopStatusHeader from '@/widgets/header/ui/slop-status-header';
 import useMapPinch from '@/features/slop/hooks/useMapPinch';
 import SlopMap from '@/features/slop/ui/slop-map';
@@ -10,27 +9,15 @@ import { cn } from '@/shared/lib';
 
 const SlopStatusPage = () => {
   const DUMMY = JISAN;
-  const containerRef = useRef<HTMLDivElement>(null);
-  const { ref, style } = useMapPinch(containerRef);
+  const { ref, style, containerRef } = useMapPinch();
 
-  const [selectedSlop, setSelectedSlop] = useState<string | null>(null);
   return (
     <main className={cn('w-full')}>
       <SlopStatusHeader />
       <section className={cn('relative mx-[20px] overflow-hidden')} ref={containerRef}>
-        <SlopMap
-          style={style}
-          ref={ref}
-          selectedSlop={selectedSlop}
-          MapComponent={DUMMY.MapComponent}
-          slops={DUMMY.slops}
-        />
+        <SlopMap style={style} ref={ref} MapComponent={DUMMY.MapComponent} slops={DUMMY.slops} />
       </section>
-      <SlopStatusList
-        list={DUMMY.slops}
-        selectedSlop={selectedSlop}
-        setSelectedSlop={setSelectedSlop}
-      />
+      <SlopStatusList list={DUMMY.slops} />
     </main>
   );
 };

diff --git a/src/pages/webcam/ui/webcam-mobile-map-page.tsx b/src/pages/webcam/ui/webcam-mobile-map-page.tsx
@@ -7,7 +7,6 @@ import calculateWebcamPosition from '@/features/slop/lib/calculateWebcamPosition
 import { JISAN } from '@/entities/slop/model';
 import type { Position } from '@/entities/slop/model/model';
 import { cn } from '@/shared/lib';
-import useSlopStore from '@/features/slop/hooks/useSlopStore';
 
 const WebCamMobileMapPage = () => {
   const DUMMY2 = JISAN;

diff --git a/src/shared/icons/circle-info.tsx b/src/shared/icons/circle-info.tsx
@@ -1,4 +1,5 @@
-import React, { SVGProps } from 'react';
+import type { SVGProps } from 'react';
+import React from 'react';
 
 interface CircleInfoProps extends SVGProps<SVGSVGElement> {
   className?: string;

diff --git a/src/shared/ui/tooltip.tsx b/src/shared/ui/tooltip.tsx
@@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
     ref={ref}
     align={align}
     sideOffset={sideOffset}
-    className={cn('rounded-[8px] bg-gray-90 p-[10px] text-white', className)}
+    className={cn('z-40 rounded-[8px] bg-gray-90 p-[10px] text-white', className)}
     {...props}
   />
 ));

diff --git a/src/widgets/discovery-detail/ui/discovery-content.tsx b/src/widgets/discovery-detail/ui/discovery-content.tsx
diff --git a/src/widgets/header/ui/slop-status-header.tsx b/src/widgets/header/ui/slop-status-header.tsx
@@ -6,17 +6,19 @@ import { Tooltip } from '@/shared/ui/tooltip';
 const SlopStatusHeader = () => {
   return (
     <div className={cn('mb-[26px] flex items-center justify-between px-[20px]')}>
-      <h1 className={cn('title3-semibold')}>슬로프 운행 현황</h1>
-      <Tooltip
-        trigger={
-          <button>
-            <CircleInfo />
-          </button>
-        }
-        align="start"
-      >
-        <p className={cn('body3-medium')}>매일 스키장 홈페이지에 고지된 정보를 가져와요.</p>
-      </Tooltip>
+      <div className={cn('flex items-center gap-[4px]')}>
+        <h1 className={cn('title3-semibold')}>슬로프 운행 현황</h1>
+        <Tooltip
+          trigger={
+            <button>
+              <CircleInfo />
+            </button>
+          }
+          align="start"
+        >
+          <p className={cn('body3-medium')}>매일 스키장 홈페이지에 고지된 정보를 가져와요.</p>
+        </Tooltip>
+      </div>
       <p className={cn('body1-medium text-gray-50')}>10월 21일 23:00 업데이트</p>
     </div>
   );

diff --git a/src/widgets/webcam/ui/webcam-map.tsx b/src/widgets/webcam/ui/webcam-map.tsx
@@ -1,10 +1,10 @@
 import type { SpringValue } from '@react-spring/web';
 import React, { forwardRef } from 'react';
+import useSlopStore from '@/features/slop/hooks/useSlopStore';
 import SlopCamera from '@/features/slop/ui/slop-camera';
 import SlopMap from '@/features/slop/ui/slop-map';
 import type { Position, ResortInfo } from '@/entities/slop/model/model';
 import { cn } from '@/shared/lib';
-import useSlopStore from '@/features/slop/hooks/useSlopStore';
 
 interface WebcamMapProps extends ResortInfo {
   containerRef: React.RefObject<HTMLElement>;