From 4bfddc24789b0ab66f325570e774a1da48bc23e6 Mon Sep 17 00:00:00 2001 From: YoonHaeMin Date: Tue, 20 Aug 2024 22:48:34 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EB=8D=94=EB=AF=B8=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=84=B0=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EB=B2=84=EA=B7=B8?= =?UTF-8?q?=20=ED=95=B4=EA=B2=B0=20(#20)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: slope 데이터 추가 * feat: 잘못된 카메라 매칭 데이터 수정 * fix: hover와 색상문제 충돌 해결 * fix: 뷰포트 이상으로 리스트가 길어질 경우 잘못된 위치로 확대 되는 현상 해결 --- .../elysian-gangchon/pegasus-slop-path.tsx | 21 ++++++ .../image/elysian-gangchon/puma-slop-path.tsx | 27 ++++++++ .../slop/image/high1/apollo3-slop-path.tsx | 21 ++++++ src/entities/slop/model/elysian-gangchon.tsx | 6 +- src/entities/slop/model/gonjiam.tsx | 11 +-- src/entities/slop/model/high1.tsx | 34 +--------- .../ui/discovery-detail-page.tsx | 4 +- .../webcam/ui/webcam-mobile-map-page.tsx | 4 +- src/widgets/webcam/ui/webcam-slop-list.tsx | 68 ++++++++++--------- 9 files changed, 117 insertions(+), 79 deletions(-) create mode 100644 src/entities/slop/image/elysian-gangchon/pegasus-slop-path.tsx create mode 100644 src/entities/slop/image/elysian-gangchon/puma-slop-path.tsx create mode 100644 src/entities/slop/image/high1/apollo3-slop-path.tsx diff --git a/src/entities/slop/image/elysian-gangchon/pegasus-slop-path.tsx b/src/entities/slop/image/elysian-gangchon/pegasus-slop-path.tsx new file mode 100644 index 0000000..8580b19 --- /dev/null +++ b/src/entities/slop/image/elysian-gangchon/pegasus-slop-path.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { cn } from '@/shared/lib'; + +const PegasusSlopPath = ({ color }: { color?: string }) => { + return ( + + + + ); +}; + +export default PegasusSlopPath; diff --git a/src/entities/slop/image/elysian-gangchon/puma-slop-path.tsx b/src/entities/slop/image/elysian-gangchon/puma-slop-path.tsx new file mode 100644 index 0000000..558a43d --- /dev/null +++ b/src/entities/slop/image/elysian-gangchon/puma-slop-path.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { cn } from '@/shared/lib'; + +const PumaSlopPath = ({ color }: { color?: string }) => { + const defaultStrokeColor = 'stroke-[#447EFF]'; + const strokeColorClass = color ? color.replace('fill-', 'stroke-') : defaultStrokeColor; + + return ( + + + + ); +}; + +export default PumaSlopPath; diff --git a/src/entities/slop/image/high1/apollo3-slop-path.tsx b/src/entities/slop/image/high1/apollo3-slop-path.tsx new file mode 100644 index 0000000..b90fe71 --- /dev/null +++ b/src/entities/slop/image/high1/apollo3-slop-path.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { cn } from '@/shared/lib'; + +const Apollo3SlopPath = ({ color }: { color?: string }) => { + return ( + + + + ); +}; + +export default Apollo3SlopPath; diff --git a/src/entities/slop/model/elysian-gangchon.tsx b/src/entities/slop/model/elysian-gangchon.tsx index 33231ce..723f6f1 100644 --- a/src/entities/slop/model/elysian-gangchon.tsx +++ b/src/entities/slop/model/elysian-gangchon.tsx @@ -7,6 +7,8 @@ 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'; import RabbitSlopPath from '../image/elysian-gangchon/rabbit-slop-path'; import ZebraSlopPath from '../image/elysian-gangchon/zebra-slop-path'; import type { ResortInfo } from './model'; @@ -50,7 +52,7 @@ export const ELYSIAN_GANGCHON: ResortInfo = { id: 'pegasus-slop', level: 'INTERMEDIATE', name: '페가수스슬로프', - Element: () => <>, + Element: PegasusSlopPath, webcamId: 'ski-house', isOpen: true, }, @@ -73,7 +75,7 @@ export const ELYSIAN_GANGCHON: ResortInfo = { id: 'puma-slop', level: 'INTERMEDIATE', name: '퓨마슬로프', - Element: () => <>, + Element: PumaSlopPath, webcamId: 'alp-house', isOpen: true, }, diff --git a/src/entities/slop/model/gonjiam.tsx b/src/entities/slop/model/gonjiam.tsx index ca13e23..6c48ac6 100644 --- a/src/entities/slop/model/gonjiam.tsx +++ b/src/entities/slop/model/gonjiam.tsx @@ -21,6 +21,7 @@ export const GONJIAM: ResortInfo = { level: 'UPPER_BEGINNER', name: '와이낫슬로프', Element: WhynotSlopPath, + webcamId: 'upper-base', isOpen: true, }, { @@ -37,14 +38,6 @@ export const GONJIAM: ResortInfo = { Element: Gram2SlopPath, isOpen: true, }, - { - id: 'whynot1-slop', - level: 'UPPER_BEGINNER', - name: '와이낫슬로프 1', - Element: () => <>, - webcamId: 'upper-base', - isOpen: true, - }, { id: 'cnp1-slop', level: 'UPPER_BEGINNER', @@ -95,7 +88,7 @@ export const GONJIAM: ResortInfo = { level: 'BEGINNER', name: '휘센슬로프', Element: WhisenSlopPath, - webcamId: 'upper-base', + webcamId: 'whisen-base', isOpen: true, }, ], diff --git a/src/entities/slop/model/high1.tsx b/src/entities/slop/model/high1.tsx index e745963..b0a171c 100644 --- a/src/entities/slop/model/high1.tsx +++ b/src/entities/slop/model/high1.tsx @@ -2,6 +2,7 @@ import Apollo1SlopPath from '../image/high1/apollo1-slop-path'; import Apollo2SlopPath from '../image/high1/apollo2-slop-path'; +import Apollo3SlopPath from '../image/high1/apollo3-slop-path'; import Apollo4SlopPath from '../image/high1/apollo4-slop-path'; import Apollo6SlopPath from '../image/high1/apollo6-slop-path'; import Athena2SlopPath from '../image/high1/athena2-slop-path'; @@ -66,14 +67,6 @@ export const HIGH1: ResortInfo = { Element: Victoria2SlopPath, isOpen: true, }, - { - id: 'victoria3-slop', - level: 'EXPERT', - name: '빅토리아슬로프 3', - Element: () => <>, - webcamId: 'victoria-top', - isOpen: true, - }, { id: 'hera1-slop', level: 'INTERMEDIATE', @@ -114,7 +107,7 @@ export const HIGH1: ResortInfo = { id: 'apollo3-slop', level: 'ADVANCED', name: '아폴로슬로프 3', - Element: () => <>, + Element: Apollo3SlopPath, isOpen: true, }, { @@ -125,13 +118,6 @@ export const HIGH1: ResortInfo = { webcamId: 'apollo4-mid', isOpen: true, }, - { - id: 'apollo5-slop', - level: 'EXPERT', - name: '아폴로슬로프 5', - Element: () => <>, - isOpen: true, - }, { id: 'apollo6-slop', level: 'ADVANCED', @@ -139,15 +125,6 @@ export const HIGH1: ResortInfo = { Element: Apollo6SlopPath, isOpen: true, }, - { - id: 'athena1-slop', - name: '아테나슬로프 1', - level: 'BEGINNER', - //TODO: 확인 필요 - Element: () => <>, - webcamId: 'athena1-entry', - isOpen: true, - }, { id: 'athena2-slop', level: 'INTERMEDIATE', @@ -163,13 +140,6 @@ export const HIGH1: ResortInfo = { Element: Athena3SlopPath, isOpen: true, }, - { - id: 'athena3-1-slop', - level: 'BEGINNER', - name: '아테나슬로프 3-1', - Element: () => <>, - isOpen: true, - }, ], webcams: [ { diff --git a/src/pages/discovery-detail/ui/discovery-detail-page.tsx b/src/pages/discovery-detail/ui/discovery-detail-page.tsx index 4bbcb69..81b9a4c 100644 --- a/src/pages/discovery-detail/ui/discovery-detail-page.tsx +++ b/src/pages/discovery-detail/ui/discovery-detail-page.tsx @@ -32,9 +32,9 @@ const DiscoveryDetailPage = ({ params }: { params: { resortId: number } }) => { }, []); const handleFocusSlopCamClick = ({ id }: { id: string }) => { - const { left, top, width, height } = containerRef.current!.getBoundingClientRect(); + const { width, height } = containerRef.current!.getBoundingClientRect(); const { boundedX, boundedY } = calculateWebcamPosition({ - containerPosition: { left, top, width, height }, + containerPosition: { left: 0, top: 0, width, height }, position: { x: cameraPositions[id].x, y: cameraPositions[id].y, diff --git a/src/pages/webcam/ui/webcam-mobile-map-page.tsx b/src/pages/webcam/ui/webcam-mobile-map-page.tsx index e34d66f..5cc0753 100644 --- a/src/pages/webcam/ui/webcam-mobile-map-page.tsx +++ b/src/pages/webcam/ui/webcam-mobile-map-page.tsx @@ -18,9 +18,9 @@ const WebCamMobileMapPage = ({ data }: { data: ResortInfo }) => { }, []); const handleFocusSlopCamClick = ({ id, scale }: { id: string; scale: number }) => { - const { left, top, width, height } = containerRef.current!.getBoundingClientRect(); + const { width, height } = containerRef.current!.getBoundingClientRect(); const { boundedX, boundedY } = calculateWebcamPosition({ - containerPosition: { left, top, width, height }, + containerPosition: { left: 0, top: 0, width, height }, position: { x: cameraPositions[id].x, y: cameraPositions[id].y, diff --git a/src/widgets/webcam/ui/webcam-slop-list.tsx b/src/widgets/webcam/ui/webcam-slop-list.tsx index c5e4379..b328664 100644 --- a/src/widgets/webcam/ui/webcam-slop-list.tsx +++ b/src/widgets/webcam/ui/webcam-slop-list.tsx @@ -1,3 +1,5 @@ +'use client'; + import React from 'react'; import useSlopStore from '@/features/slop/hooks/useSlopStore'; import type { Slop, Webcam } from '@/entities/slop/model/model'; @@ -17,38 +19,40 @@ const WebcamSlopList = ({ className, list, webcams, onItemClick }: WebcamSlopLis return ( ); };