From 90714a129784bafa8e6af089e3794374dd79b05f Mon Sep 17 00:00:00 2001 From: Najeong-Kim Date: Mon, 18 Nov 2024 18:23:23 +0900 Subject: [PATCH 1/7] feat: update resort slopes and webcams data --- src/entities/slope/model/model.d.ts | 64 ++--- src/entities/slope/model/resorts/eden.tsx | 68 ++---- .../slope/model/resorts/elysian-gangchon.tsx | 77 ++---- src/entities/slope/model/resorts/gonjiam.tsx | 81 ++----- src/entities/slope/model/resorts/high1.tsx | 164 +++---------- src/entities/slope/model/resorts/jisan.tsx | 96 +++----- src/entities/slope/model/resorts/muju.tsx | 227 +++++------------- src/entities/slope/model/resorts/o2.tsx | 105 +++----- src/entities/slope/model/resorts/phoenix.tsx | 138 ++++------- .../slope/model/resorts/vivaldipark.tsx | 125 ++++------ .../slope/model/resorts/wellihilli.tsx | 150 +++--------- .../slope/model/resorts/yongpyong.tsx | 206 +++++----------- 12 files changed, 449 insertions(+), 1052 deletions(-) diff --git a/src/entities/slope/model/model.d.ts b/src/entities/slope/model/model.d.ts index 337ccfd..e085e80 100644 --- a/src/entities/slope/model/model.d.ts +++ b/src/entities/slope/model/model.d.ts @@ -1,38 +1,31 @@ -export type Level = - | '초급' - | '초중급' - | '중급' - | '중상급' - | '상급' - | '최상급' - | '파크'; +export type Level = '초급' | '초중급' | '중급' | '중상급' | '상급' | '최상급' | '파크'; export type Slope = { - name: string, - difficulty: Level, - isDayOperating: true, - isNightOperating: true, - isLateNightOperating: true, - isDawnOperating: true, - isMidnightOperating: true -} + name: string; + difficulty: Level; + isDayOperating: true; + isNightOperating: true; + isLateNightOperating: true; + isDawnOperating: true; + isMidnightOperating: true; +}; export type Webcam = { - name: string, - number: 0, - description: string, - url: string -} + name: string; + number: 0; + 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: Slope[]; + webcams: Webcam[]; +}; export type ResortConstant = { MapComponent: ComponentType | StaticImageData; @@ -41,23 +34,18 @@ 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 | string; + pathAsset: React.FC; + webcam?: number; }; export type Position = { diff --git a/src/entities/slope/model/resorts/eden.tsx b/src/entities/slope/model/resorts/eden.tsx index 8e03d71..cccfcb3 100644 --- a/src/entities/slope/model/resorts/eden.tsx +++ b/src/entities/slope/model/resorts/eden.tsx @@ -14,64 +14,42 @@ export const EDEN: ResortConstant = { MapComponent: MapImage, slopes: [ { - id: 'basic-slope', - level: '초급', - name: '베이직 슬로프', - Element: BasicSlopePath, - webcamId: 'basic-slope', - isOpen: true, + id: '베이직 슬로프', + pathAsset: BasicSlopePath, + webcam: 1, }, { - id: 'main-slope', - level: '초급', - name: '메인 슬로프', - Element: MainSlopePath, - webcamId: 'basic-slope', - isOpen: true, + id: '메인 슬로프', + pathAsset: MainSlopePath, + webcam: 1, }, { - id: 'jupiter-slope', - level: '중급', - name: '쥬피터 슬로프', - Element: JupiterSlopePath, - webcamId: 'jupiter-slope', - isOpen: true, + id: '쥬피터 슬로프', + pathAsset: JupiterSlopePath, + webcam: 2, }, { - id: 'saturn-slope', - level: '중급', - name: '새턴 슬로프', - Element: SaturnSlopePath, - isOpen: true, + id: '새턴 슬로프', + pathAsset: SaturnSlopePath, }, { - id: 'uranus-slope', - level: '중급', - name: '우라누스', - Element: UranusSlopePath, - webcamId: 'uranus-slope', - isOpen: true, + id: '우라누스 슬로프', + pathAsset: UranusSlopePath, + webcam: 3, }, { - id: 'mercury-slope', - level: '상급', - name: '머큐리 슬로프', - Element: MercurySlopePath, - isOpen: true, + id: '머큐리 슬로프', + pathAsset: MercurySlopePath, }, { - id: 'venus-slope', - level: '상급', - name: '비너스 슬로프', - Element: VenusSlopePath, - webcamId: 'basic-slope', - isOpen: true, + id: '비너스 슬로프', + pathAsset: VenusSlopePath, + webcam: 1, }, ], webcams: [ { - id: 'basic-slope', - name: '베이직 슬로프', + id: 1, position: { top: 'top-[52%]', left: 'left-[35%]', @@ -79,8 +57,7 @@ export const EDEN: ResortConstant = { scale: 1, }, { - id: 'jupiter-slope', - name: '쥬피터 슬로프', + id: 2, position: { top: 'top-[16%]', left: 'left-[50%]', @@ -88,8 +65,7 @@ export const EDEN: ResortConstant = { 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 index 5e221db..f6a3ec1 100644 --- a/src/entities/slope/model/resorts/elysian-gangchon.tsx +++ b/src/entities/slope/model/resorts/elysian-gangchon.tsx @@ -18,88 +18,57 @@ export const ELYSIAN_GANGCHON: ResortConstant = { slopes: [ { id: 'panda-slop', - level: '초급', - name: '팬더슬로프', - Element: PandaSlopPath, - webcamId: 'sub-house', - isOpen: true, + pathAsset: PandaSlopPath, + webcam: 2, }, { id: 'rabbit-slop', - level: '초급', - name: '래빗슬로프', - Element: RabbitSlopPath, - webcamId: 'sub-house', - isOpen: true, + pathAsset: RabbitSlopPath, + webcam: 2, }, { id: 'dragon-slop', - level: '중급', - name: '드래곤슬로프', - Element: DragonSlopPath, - webcamId: 'alp-house', - isOpen: true, + pathAsset: DragonSlopPath, + webcam: 1, }, { id: 'horse-slop', - level: '중급', - name: '호스슬로프', - Element: HorseSlopPath, - webcamId: 'alp-house', - isOpen: true, + pathAsset: HorseSlopPath, + webcam: 1, }, { id: 'pegasus-slop', - level: '중급', - name: '페가수스슬로프', - Element: PegasusSlopPath, - webcamId: 'ski-house', - isOpen: true, + pathAsset: PegasusSlopPath, + webcam: 3, }, { id: 'zebra-slop', - level: '중급', - name: '제브라슬로프', - Element: ZebraSlopPath, - webcamId: 'ski-house', - isOpen: true, + pathAsset: ZebraSlopPath, + webcam: 3, }, { id: 'deer-slop', - level: '중급', - name: '디어슬로프', - Element: DeerSlopPath, - isOpen: true, + pathAsset: DeerSlopPath, }, { id: 'puma-slop', - level: '중급', - name: '퓨마슬로프', - Element: PumaSlopPath, - webcamId: 'alp-house', - isOpen: true, + pathAsset: PumaSlopPath, + webcam: 1, }, { id: 'leopard-slop', - level: '상급', - name: '래퍼드슬로프', - Element: LeopardSlopPath, - webcamId: 'ski-house', - isOpen: true, + pathAsset: LeopardSlopPath, + webcam: 3, }, { id: 'jaguar-slop', - level: '상급', - name: '제규어슬로프', - Element: JaguarSlopPath, - webcamId: 'ski-house', - isOpen: true, + pathAsset: JaguarSlopPath, + webcam: 3, }, ], webcams: [ { - id: 'sub-house', - name: '서브하우스', + id: 1, position: { top: 'top-[86%]', left: 'left-[19%]', @@ -107,8 +76,7 @@ export const ELYSIAN_GANGCHON: ResortConstant = { scale: 1, }, { - id: 'alp-house', - name: '알프하우스', + id: 2, position: { top: 'top-[7%]', left: 'left-[27%]', @@ -116,8 +84,7 @@ export const ELYSIAN_GANGCHON: ResortConstant = { scale: 1, }, { - id: 'ski-house', - name: '스키하우스', + id: 3, position: { top: 'top-[83%]', left: 'left-[80%]', diff --git a/src/entities/slope/model/resorts/gonjiam.tsx b/src/entities/slope/model/resorts/gonjiam.tsx index 1411be0..75b4091 100644 --- a/src/entities/slope/model/resorts/gonjiam.tsx +++ b/src/entities/slope/model/resorts/gonjiam.tsx @@ -18,131 +18,90 @@ export const GONJIAM: ResortConstant = { slopes: [ { id: 'whynot-slop', - level: '초중급', - name: '와이낫슬로프', - Element: WhynotSlopPath, - webcamId: 'upper-base', - isOpen: true, + pathAsset: WhynotSlopPath, + webcam: 2, }, { id: 'gram1-slop', - level: '상급', - name: '그램슬로프1', - Element: Gram1SlopPath, - isOpen: true, + pathAsset: Gram1SlopPath, }, { id: 'gram2-slop', - level: '중급', - name: '그램슬로프 2', - Element: Gram2SlopPath, - isOpen: true, + pathAsset: Gram2SlopPath, }, { id: 'cnp1-slop', - level: '초중급', - name: 'CNP슬로프 1', - Element: CNP1SlopPath, - webcamId: 'cnp-top', - isOpen: true, + pathAsset: CNP1SlopPath, + webcam: 3, }, { id: 'cnp2-slop', - level: '상급', - name: 'CNP슬로프 2', - Element: CNP2SlopPath, - isOpen: true, + pathAsset: CNP2SlopPath, }, { id: 'thinkyou1-slop', - level: '중상급', - name: '씽큐리프트 1', - Element: Thinkyou1SlopPath, - webcamId: 'cnp-top', - isOpen: true, + pathAsset: Thinkyou1SlopPath, + webcam: 3, }, { id: 'thinkyou2-slop', - level: '초중급', - name: '씽큐리프트 2', - Element: Thinkyou2SlopPath, - webcamId: 'upper-base', - isOpen: true, + pathAsset: Thinkyou2SlopPath, + webcam: 2, }, { id: 'thinkyou3-slop', - level: '중상급', - name: '씽큐리프트 3', - Element: Thinkyou3SlopPath, - isOpen: true, + pathAsset: Thinkyou3SlopPath, }, { id: 'thinkyou-bridge-slop', - level: '상급', - name: '씽큐브릿지', - Element: ThinkyouBridgeSlopPath, - isOpen: true, + pathAsset: ThinkyouBridgeSlopPath, }, { id: 'whisen-slop', - level: '초급', - name: '휘센슬로프', - Element: WhisenSlopPath, - webcamId: 'whisen-base', - isOpen: true, + pathAsset: WhisenSlopPath, + webcam: 1, }, ], webcams: [ { - id: 'whisen-base', - name: '초중급 베이스', + id: 1, position: { top: 'top-[82%]', left: 'left-[51%]', }, - src: '/api/webcam?url=http://konjiam.live.cdn.cloudn.co.kr/konjiam/cam03.stream/playlist.m3u8', scale: 1, }, { - id: 'upper-base', - name: '중상급 베이스', + id: 2, position: { top: 'top-[85%]', left: 'left-[43%]', }, - //TODO: 해당 URL만 작동 안함 - // src: '/api/webcam?url=http://konjiam.live.cdn.cloudn.co.kr/konjiam/cam04.stream/playlist.m3u8', scale: 1, }, { - id: 'cnp-top', - name: '정상부 슬로프', + id: 3, position: { top: 'top-[34%]', left: 'left-[21%]', }, scale: 1, - src: '/api/webcam?url=http://konjiam.live.cdn.cloudn.co.kr/konjiam/cam02.stream/playlist.m3u8', }, { - id: 'top-rest-area', - name: '정상 휴게소', + id: 4, position: { top: 'top-[7%]', left: 'left-[20%]', }, scale: 1, - src: '/api/webcam?url=http://konjiam.live.cdn.cloudn.co.kr/konjiam/cam01.stream/playlist.m3u8', }, { - id: 'middle-slope', - name: '중간 슬로프', + id: 5, position: { top: 'top-[60%]', left: 'left-[43%]', }, scale: 1, - src: '/api/webcam?url=http://konjiam.live.cdn.cloudn.co.kr/konjiam/cam05.stream/playlist.m3u8', }, ], }; diff --git a/src/entities/slope/model/resorts/high1.tsx b/src/entities/slope/model/resorts/high1.tsx index 93aa680..697f85b 100644 --- a/src/entities/slope/model/resorts/high1.tsx +++ b/src/entities/slope/model/resorts/high1.tsx @@ -24,302 +24,218 @@ export const HIGH1: ResortConstant = { slopes: [ { id: 'zeus1-slop', - level: '초급', - name: '제우스슬로프 1', - Element: Zeus1SlopPath, - isOpen: true, + pathAsset: Zeus1SlopPath, }, { id: 'zeus2-slop', - level: '초급', - name: '제우스슬로프 2', - Element: Zeus2SlopPath, - webcamId: 'zeus2-entry', - isOpen: true, + pathAsset: Zeus2SlopPath, + webcam: 1, }, { id: 'zeus3-slop', - level: '초급', - name: '제우스슬로프 3', - Element: Zeus3SlopPath, - webcamId: 'zeus3-entry', - isOpen: true, + pathAsset: Zeus3SlopPath, + webcam: 13, }, { id: 'zeus3-1-slop', - level: '초급', - name: '제우스슬로프 3-1', - Element: Zeus3Sub1SlopPath, - isOpen: true, + pathAsset: Zeus3Sub1SlopPath, }, { id: 'victoria1-slop', - level: '상급', - name: '빅토리아슬로프 1', - Element: Victoria1SlopPath, - webcamId: 'victoria1-entry', - isOpen: true, + pathAsset: Victoria1SlopPath, + webcam: 12, }, { id: 'victoria2-slop', - level: '상급', - name: '빅토리아슬로프 2', - Element: Victoria2SlopPath, - isOpen: true, + pathAsset: Victoria2SlopPath, }, { id: 'hera1-slop', - level: '중급', - name: '헤라슬로프 1', - Element: Hera1SlopPath, - isOpen: true, + pathAsset: Hera1SlopPath, }, { id: 'hera2-slop', - level: '중상급', - name: '헤라슬로프 2', - Element: Hera2SlopPath, - webcamId: 'hera2-entry', - isOpen: true, + pathAsset: Hera2SlopPath, + webcam: 2, }, { id: 'hera3-slop', - level: '상급', - name: '헤라슬로프 3', - Element: Hera3SlopPath, - isOpen: true, + pathAsset: Hera3SlopPath, }, { id: 'apollo1-slop', - level: '상급', - name: '아폴로슬로프 1', - Element: Apollo1SlopPath, - isOpen: true, + pathAsset: Apollo1SlopPath, }, { id: 'apollo2-slop', - level: '상급', - name: '아폴로슬로프 2', - Element: Apollo2SlopPath, - isOpen: true, + pathAsset: Apollo2SlopPath, }, { id: 'apollo3-slop', - level: '상급', - name: '아폴로슬로프 3', - Element: Apollo3SlopPath, - isOpen: true, + pathAsset: Apollo3SlopPath, }, { id: 'apollo4-slop', - level: '상급', - name: '아폴로슬로프 4', - Element: Apollo4SlopPath, - webcamId: 'apollo4-mid', - isOpen: true, + pathAsset: Apollo4SlopPath, + webcam: 15, }, { id: 'apollo6-slop', - level: '상급', - name: '아폴로슬로프 6', - Element: Apollo6SlopPath, - isOpen: true, + pathAsset: Apollo6SlopPath, }, { id: 'athena2-slop', - level: '중급', - name: '아테나슬로프 2', - Element: Athena2SlopPath, - webcamId: 'athena2-entry', - isOpen: true, + pathAsset: Athena2SlopPath, + webcam: 6, }, { id: 'athena3-slop', - level: '초급', - name: '아테나슬로프 3', - Element: Athena3SlopPath, - isOpen: true, + pathAsset: Athena3SlopPath, }, ], webcams: [ { - id: 'zeus2-entry', - name: '제우스2번 슬로프 입구', + id: 1, position: { top: 'top-[6%]', left: 'left-[45%]', }, - src: '/api/webcam?url=http://59.30.12.195:1935/live/_definst_/ch1.stream/playlist.m3u8', scale: 2, }, { - id: 'hera2-entry', - name: '헤라2번 슬로프 입구', + id: 2, position: { top: 'top-[10%]', left: 'left-[50%]', }, - src: '/api/webcam?url=http://59.30.12.195:1935/live/_definst_/ch2.stream/playlist.m3u8', scale: 2, }, { - id: 'highone-top', - name: '하이원 탑', + id: 3, position: { top: 'top-[6%]', left: 'left-[54%]', }, - src: '/api/webcam?url=http://59.30.12.195:1935/live/_definst_/ch3.stream/playlist.m3u8', scale: 2, }, { - id: 'athena1-entry', - name: '아테나1번 슬로프', + id: 4, position: { top: 'top-[30%]', left: 'left-[65%]', }, - src: '/api/webcam?url=http://59.30.12.195:1935/live/_definst_/ch4.stream/playlist.m3u8', scale: 2, }, { - id: 'mountain-hub-base', - name: '마운틴 허브 베이스', + id: 5, position: { top: 'top-[35%]', left: 'left-[61%]', }, - src: '/api/webcam?url=http://59.30.12.195:1935/live/_definst_/ch5.stream/playlist.m3u8', scale: 2, }, { - id: 'athena2-entry', - name: '아테나2번 슬로프', + id: 6, position: { top: 'top-[40%]', left: 'left-[66%]', }, - src: '/api/webcam?url=http://59.30.12.195:1935/live/_definst_/ch6.stream/playlist.m3u8', scale: 2, }, { - id: 'mountain-base', - name: '마운틴 베이스', + id: 7, position: { top: 'top-[68%]', left: 'left-[78%]', }, - src: '/api/webcam?url=http://59.30.12.195:1935/live/_definst_/ch7.stream/playlist.m3u8', scale: 2, }, { - id: 'athena2-bottom', - name: '아테나2번 슬로프 하단', + id: 8, position: { top: 'top-[76%]', left: 'left-[73%]', }, - src: '/api/webcam?url=http://59.30.12.195:1935/live/_definst_/ch8.stream/playlist.m3u8', scale: 2, }, { - id: 'victoria-top', - name: '빅토리아 상단', + id: 9, position: { top: 'top-[17%]', left: 'left-[17%]', }, - src: '/api/webcam?url=http://59.30.12.195:1935/live/_definst_/ch9.stream/playlist.m3u8', scale: 2, }, { - id: 'zeus2-slope', - name: '제우스 2번', + id: 10, position: { top: 'top-[34%]', left: 'left-[38%]', }, - src: '/api/webcam?url=http://59.30.12.195:1935/live/_definst_/ch10.stream/playlist.m3u8', scale: 2, }, { - id: 'valley-hub-base', - name: '밸리 허브 베이스', + id: 11, position: { top: 'top-[40%]', left: 'left-[40%]', }, - src: '/api/webcam?url=http://59.30.12.195:1935/live/_definst_/ch11.stream/playlist.m3u8', scale: 2, }, { - id: 'victoria1-entry', - name: '빅토리아1번 슬로프', + id: 12, position: { top: 'top-[48%]', left: 'left-[43%]', }, - src: '/api/webcam?url=http://59.30.12.195:1935/live/_definst_/ch12.stream/playlist.m3u8', scale: 2, }, { - id: 'zeus3-entry', - name: '제우스3번 슬로프', + id: 13, position: { top: 'top-[50%]', left: 'left-[36%]', }, - src: '/api/webcam?url=http://59.30.12.195:1935/live/_definst_/ch13.stream/playlist.m3u8', scale: 2, }, { - id: 'zeus3-mid', - name: '제우스3번 중단부', + id: 14, position: { top: 'top-[58%]', left: 'left-[40%]', }, - src: '/api/webcam?url=http://59.30.12.195:1935/live/_definst_/ch14.stream/playlist.m3u8', scale: 2, }, { - id: 'apollo4-mid', - name: '아폴로4번 중단부', + id: 15, position: { top: 'top-[58%]', left: 'left-[52%]', }, - src: '/api/webcam?url=http://59.30.12.195:1935/live/_definst_/ch15.stream/playlist.m3u8', scale: 2, }, { - id: 'apollo-base', - name: '아폴로 베이스', + id: 16, position: { top: 'top-[71%]', left: 'left-[44%]', }, - src: '/api/webcam?url=http://59.30.12.195:1935/live/_definst_/ch16.stream/playlist.m3u8', scale: 2, }, { - id: 'zeus3-bottom', - name: '제우스3번 하단', + id: 17, position: { top: 'top-[86%]', left: 'left-[46%]', }, - src: '/api/webcam?url=http://59.30.12.195:1935/live/_definst_/ch17.stream/playlist.m3u8', scale: 2, }, { - id: 'valley-base', - name: '밸리 베이스', + id: 18, position: { top: 'top-[86%]', left: 'left-[39%]', }, - src: '/api/webcam?url=http://59.30.12.195:1935/live/_definst_/ch18.stream/playlist.m3u8', scale: 2, }, ], diff --git a/src/entities/slope/model/resorts/jisan.tsx b/src/entities/slope/model/resorts/jisan.tsx index cafb1b4..51ecb85 100644 --- a/src/entities/slope/model/resorts/jisan.tsx +++ b/src/entities/slope/model/resorts/jisan.tsx @@ -16,71 +16,46 @@ export const JISAN: ResortConstant = { slopes: [ { id: 'lemon1-lift', - level: '초급', - name: '레몬 리프트 1', - Element: Lemon1LiftPath, - webcamId: 'lemon-station', - isOpen: true, + pathAsset: Lemon1LiftPath, + webcam: 1, }, { id: 'lemon1-1-lift', - level: '초급', - name: '레몬 리프트 1-1', - Element: Lemon1Sub1LiftPath, - isOpen: false, + pathAsset: Lemon1Sub1LiftPath, }, { id: 'orange2-lift', - level: '중급', - name: '오렌지 리프트 2', - Element: Orange2LiftPath, - webcamId: 'orange-station', - isOpen: true, + pathAsset: Orange2LiftPath, + webcam: 2, }, { id: 'orange3-lift', - level: '중급', - name: '오렌지 리프트 3', - Element: Orange3LiftPath, - webcamId: 'new-orange-station', - isOpen: true, + pathAsset: Orange3LiftPath, + webcam: 3, }, { id: 'new-orange-lift', - level: '상급', - name: '뉴오렌지 리프트', - Element: NewOrangeLiftPath, - isOpen: true, + pathAsset: NewOrangeLiftPath, }, { id: 'blue-lift', - level: '상급', - name: '블루 리프트 5', - Element: BlueLiftPath, - webcamId: 'blue-station', - isOpen: true, + pathAsset: BlueLiftPath, + webcam: 4, }, { id: 'silver6-lift', - level: '최상급', - name: '실버 리프트 6', - Element: Silver6LiftPath, - webcamId: '5-station', - isOpen: true, + pathAsset: Silver6LiftPath, + webcam: 5, }, { id: 'silver7-lift', - level: '중상급', - name: '실버 리프트 7', - Element: Silver7LiftPath, - webcamId: 'silver-station', - isOpen: true, + pathAsset: Silver7LiftPath, + webcam: 6, }, ], webcams: [ { - id: 'lemon-station', - name: '레몬 탑승장', + id: 1, position: { top: 'top-[84%]', left: 'left-[20%]', @@ -88,8 +63,7 @@ export const JISAN: ResortConstant = { scale: 1, }, { - id: 'orange-station', - name: '오렌지 탑승장', + id: 2, position: { top: 'top-[74%]', left: 'left-[31%]', @@ -97,50 +71,44 @@ export const JISAN: ResortConstant = { scale: 1, }, { - id: 'blue-station', - name: '블루 탑승장', - scale: 1, + id: 3, position: { - top: 'top-[69%]', - left: 'left-[56%]', + top: 'top-[64%]', + left: 'left-[38%]', }, + scale: 1, }, { - id: 'silver-station', - name: '실버 탑승장', - scale: 1, + id: 4, position: { - top: 'top-[72%]', - left: 'left-[68%]', + top: 'top-[69%]', + left: 'left-[56%]', }, + scale: 1, }, { - id: '5-station', - name: '5번 슬로프', - scale: 1, - + id: 5, position: { top: 'top-[47%]', left: 'left-[37%]', }, + scale: 1, }, { - id: 'new-orange-station', - name: '뉴오렌지 탑승장', - scale: 1, + id: 6, position: { - top: 'top-[64%]', - left: 'left-[38%]', + top: 'top-[72%]', + left: 'left-[68%]', }, + scale: 1, }, { - id: 'jisan-overview', - name: '지산 전경', - scale: 1, + id: 7, position: { top: 'top-[38%]', left: 'left-[52%]', }, + scale: 1, }, ], }; diff --git a/src/entities/slope/model/resorts/muju.tsx b/src/entities/slope/model/resorts/muju.tsx index 1b96377..89ac33d 100644 --- a/src/entities/slope/model/resorts/muju.tsx +++ b/src/entities/slope/model/resorts/muju.tsx @@ -35,287 +35,190 @@ export const MUJU: ResortConstant = { slopes: [ { id: 'eastern-slope', - level: '초급', - name: '이스턴슬로프', - Element: EasternSlopePath, - webcamId: 'mansun-house', - isOpen: true, + pathAsset: EasternSlopePath, + webcam: 7, }, { id: 'soyokgihang', - level: '초급', - name: '서역기행', - Element: SoyokgihangPath, - webcamId: 'heidi-house', - isOpen: true, + pathAsset: SoyokgihangPath, + webcam: 5, }, { id: 'spitch-lowest', - level: '초급', - name: '스피츠 하단', - Element: SpitchLowestPath, - webcamId: 'seolcheon-house', - isOpen: true, + pathAsset: SpitchLowestPath, + webcam: 8, }, { id: 'western-slope', - level: '중급', - name: '웨스턴슬로프', - Element: WesternSlopePath, - isOpen: true, + pathAsset: WesternSlopePath, }, { id: 'sundown-slope', - level: '중급', - name: '썬다운슬로프', - Element: SundownSlopePath, - webcamId: 'soyokgihang-sundown', - isOpen: true, + pathAsset: SundownSlopePath, + webcam: 6, }, { id: 'silkroad', - level: '중급', - name: '실크로드', - Element: SilkroadPath, - webcamId: 'seolcheonbong-summit', - isOpen: true, + pathAsset: SilkroadPath, + webcam: 2, }, { id: 'rookiehill-slope', - level: '중급', - name: '루키힐슬로프', - Element: RookiehillSlopePath, - isOpen: true, + pathAsset: RookiehillSlopePath, }, { id: 'turbo-slope', - level: '중급', - name: '터보슬로프', - Element: TurboSlopePath, - webcamId: 'soyokgihang-sundown', - isOpen: true, + pathAsset: TurboSlopePath, + webcam: 6, }, { id: 'connection-slope', - level: '중급', - name: '커넥션슬로프', - Element: ConnectionSlopePath, - isOpen: true, + pathAsset: ConnectionSlopePath, }, { id: 'minuet', - level: '상급', - name: '미뉴에트', - Element: MinuetPath, - webcamId: 'mozart-minuet', - isOpen: true, + pathAsset: MinuetPath, + webcam: 3, }, { id: 'freeway', - level: '상급', - name: '프리웨이', - Element: FreewayPath, - webcamId: 'heidi-house', - isOpen: true, + pathAsset: FreewayPath, + webcam: 5, }, { id: 'yamaga-slope', - level: '상급', - name: '야마가슬로프', - Element: YamagaSlopePath, - webcamId: 'heidi-house', - isOpen: true, + pathAsset: YamagaSlopePath, + webcam: 5, }, { id: 'panorama', - level: '상급', - name: '파노라마', - Element: PanoramaPath, - isOpen: true, + pathAsset: PanoramaPath, }, { id: 'raiders-lowest', - level: '상급', - name: '레이더스 하단', - Element: RaidersLowestPath, - isOpen: true, + pathAsset: RaidersLowestPath, }, { id: 'mozart', - level: '상급', - name: '모차르트', - Element: MozartPath, - webcamId: 'mozart-minuet', - isOpen: true, + pathAsset: MozartPath, + webcam: 3, }, { id: 'waltz-slope', - level: '상급', - name: '왈츠슬로프', - Element: WaltzSlopePath, - isOpen: true, + pathAsset: WaltzSlopePath, }, { id: 'allegro', - level: '상급', - name: '알레그로', - Element: AllegroPath, - webcamId: 'seolcheon-top-slope', - isOpen: true, + pathAsset: AllegroPath, + webcam: 1, }, { id: 'raiders-highest', - level: '최상급', - name: '레이더스 상단', - Element: RaidersHighestPath, - webcamId: 'mansunbong-summit', - isOpen: true, + pathAsset: RaidersHighestPath, + webcam: 4, }, { id: 'polka-slope', - level: '최상급', - name: '폴카슬로프', - Element: PolkaSlopePath, - webcamId: 'seolcheon-top-slope', - isOpen: true, + pathAsset: PolkaSlopePath, + webcam: 1, }, { id: 'cadenza-slope', - level: '최상급', - name: '카덴자슬로프', - Element: CadenzaSlopePath, - webcamId: 'seolcheon-top-slope', - isOpen: true, + pathAsset: CadenzaSlopePath, + webcam: 1, }, { id: 'shortcut-slope', - level: '초급', - name: '쇼트컷슬로프', - Element: ShortcutSlopePath, - isOpen: true, + pathAsset: ShortcutSlopePath, }, { id: 'spitch-slope', - level: '초급', - name: '스피츠슬로프', - Element: SpitchSlopePath, - isOpen: true, + pathAsset: SpitchSlopePath, }, { id: 'flamingo', - level: '초급', - name: '플라밍고', - Element: FlamingoPath, - isOpen: true, + pathAsset: FlamingoPath, }, { id: 'moderato', - level: '초급', - name: '모데라토', - Element: ModeratoPath, - isOpen: true, + pathAsset: ModeratoPath, }, { id: 'r-gardner-slope', - level: '초급', - name: 'R.가드너슬로프', - Element: RGardnerSlopePath, - isOpen: true, + pathAsset: RGardnerSlopePath, }, { id: 'freeway2', - level: '초급', - name: '프리웨이2', - Element: Freeway2Path, - isOpen: true, + pathAsset: Freeway2Path, }, { id: 'rusutsu-slope', - level: '초급', - name: '루스츠슬로프', - Element: RusutsuSlopePath, - isOpen: true, + pathAsset: RusutsuSlopePath, }, ], webcams: [ { - id: 'mansun-house', - name: '만선 하우스', + id: 1, position: { - top: 'top-[78%]', - left: 'left-[47%]', + top: 'top-[16%]', + left: 'left-[23%]', }, - src: '/api/webcam?url=http://muju.live.cdn.cloudn.co.kr/mujuresort/_definst_/cam01.stream/playlist.m3u8', scale: 2, }, { - id: 'heidi-house', - name: '하이디 하우스', + id: 2, position: { - top: 'top-[45%]', - left: 'left-[70%]', + top: 'top-[12%]', + left: 'left-[37%]', }, - src: '/api/webcam?url=http://muju.live.cdn.cloudn.co.kr/mujuresort/_definst_/cam03.stream/playlist.m3u8', scale: 2, }, { - id: 'seolcheon-house', - name: '설천 하우스', + id: 3, position: { - top: 'top-[74%]', - left: 'left-[28%]', + top: 'top-[30%]', + left: 'left-[27%]', }, - src: '/api/webcam?url=http://muju.live.cdn.cloudn.co.kr/mujuresort/_definst_/cam05.stream/playlist.m3u8', scale: 2, }, { - id: 'soyokgihang-sundown', - name: '서역기행, 썬다운', + id: 4, position: { - top: 'top-[65%]', - left: 'left-[68%]', + top: 'top-[32%]', + left: 'left-[51%]', }, - src: '/api/webcam?url=http://muju.live.cdn.cloudn.co.kr/mujuresort/_definst_/cam04.stream/playlist.m3u8', scale: 2, }, { - id: 'seolcheonbong-summit', - name: '설천봉 정상', + id: 5, position: { - top: 'top-[12%]', - left: 'left-[37%]', + top: 'top-[45%]', + left: 'left-[70%]', }, - src: '/api/webcam?url=http://muju.live.cdn.cloudn.co.kr/mujuresort/_definst_/cam07.stream/playlist.m3u8', scale: 2, }, { - id: 'mozart-minuet', - name: '모차르트, 미뉴에트', + id: 6, position: { - top: 'top-[30%]', - left: 'left-[27%]', + top: 'top-[65%]', + left: 'left-[68%]', }, - src: '/api/webcam?url=http://muju.live.cdn.cloudn.co.kr/mujuresort/_definst_/cam08.stream/playlist.m3u8', scale: 2, }, { - id: 'seolcheon-top-slope', - name: '설천상단 슬로프', + id: 7, position: { - top: 'top-[16%]', - left: 'left-[23%]', + top: 'top-[78%]', + left: 'left-[47%]', }, - src: '/api/webcam?url=http://muju.live.cdn.cloudn.co.kr/mujuresort/_definst_/cam06.stream/playlist.m3u8', scale: 2, }, { - id: 'mansunbong-summit', - name: '만선봉 정상', + id: 8, position: { - top: 'top-[32%]', - left: 'left-[51%]', + top: 'top-[74%]', + left: 'left-[28%]', }, - src: '/api/webcam?url=http://muju.live.cdn.cloudn.co.kr/mujuresort/_definst_/cam02.stream/playlist.m3u8', scale: 2, }, ], diff --git a/src/entities/slope/model/resorts/o2.tsx b/src/entities/slope/model/resorts/o2.tsx index 35f6019..9db2b56 100644 --- a/src/entities/slope/model/resorts/o2.tsx +++ b/src/entities/slope/model/resorts/o2.tsx @@ -21,135 +21,92 @@ export const O2: ResortConstant = { slopes: [ { id: 'dream-slope1', - level: '초급', - name: '드림슬로프 1', - Element: DreamSlope1Path, - webcamId: 'dream1', - isOpen: true, + pathAsset: DreamSlope1Path, + webcam: 3, }, { id: 'dream-slope2', - level: '초급', - name: '드림슬로프 2', - Element: DreamSlope2Path, - isOpen: true, + pathAsset: DreamSlope2Path, }, { id: 'head-slope', - level: '중급', - name: '헤드슬로프', - Element: HeadSlopePath, - isOpen: true, + pathAsset: HeadSlopePath, }, { id: 'happy-slope', - level: '중급', - name: '해피슬로프', - Element: HappySlopePath, - webcamId: 'peak1', - isOpen: true, + pathAsset: HappySlopePath, + webcam: 1, }, { id: 'glory-slope1', - level: '상급', - name: '글로리슬로프 1', - Element: GlorySlope1Path, - isOpen: true, + pathAsset: GlorySlope1Path, }, { id: 'glory-slope2', - level: '상급', - name: '글로리슬로프 2', - Element: GlorySlope2Path, - isOpen: true, + pathAsset: GlorySlope2Path, }, { id: 'glory-slope3', - level: '상급', - name: '글로리슬로프 3', - Element: GlorySlope3Path, - webcamId: 'peak1', - isOpen: true, + pathAsset: GlorySlope3Path, + webcam: 1, }, { id: 'fashion-slope1', - level: '최상급', - name: '패션슬로프 1', - Element: FashionSlope1Path, - webcamId: 'peak1', - isOpen: true, + pathAsset: FashionSlope1Path, + webcam: 1, }, { id: 'fashion-slope2', - level: '최상급', - name: '패션슬로프 2', - Element: FashionSlope2Path, - isOpen: true, + pathAsset: FashionSlope2Path, }, { id: 'challenge-slope1', - level: '최상급', - name: '챌린지슬로프 1', - Element: ChallengeSlope1Path, - webcamId: 'peak2', - isOpen: true, + pathAsset: ChallengeSlope1Path, + webcam: 2, }, { id: 'challenge-slope2', - level: '최상급', - name: '챌린지슬로프 2', - Element: ChallengeSlope2Path, - webcamId: 'peak2', - isOpen: true, + pathAsset: ChallengeSlope2Path, + webcam: 2, }, { id: 'challenge-slope3', - level: '최상급', - name: '챌린지슬로프 3', - Element: ChallengeSlope3Path, - webcamId: 'peak2', - isOpen: true, + pathAsset: ChallengeSlope3Path, + webcam: 2, }, { id: 'half-pipe', - level: '초급', - name: '하프파이프', - Element: HalfPipePath, - webcamId: 'ski-house', - isOpen: true, + pathAsset: HalfPipePath, + webcam: 4, }, ], webcams: [ { - id: 'dream1', - name: '드림1', + id: 1, position: { - top: 'top-[80%]', - left: 'left-[48%]', + top: 'top-[5%]', + left: 'left-[75%]', }, scale: 1, }, { - id: 'peak1', - name: '으뜸마루', + id: 2, position: { - top: 'top-[5%]', - left: 'left-[75%]', + top: 'top-[23%]', + left: 'left-[46%]', }, scale: 1, }, { - id: 'peak2', - name: '버금마루', + id: 3, position: { - top: 'top-[23%]', - left: 'left-[46%]', + top: 'top-[80%]', + left: 'left-[48%]', }, scale: 1, }, { - id: 'ski-house', - name: '오투 스키하우스', + id: 4, position: { top: 'top-[76%]', left: 'left-[14%]', diff --git a/src/entities/slope/model/resorts/phoenix.tsx b/src/entities/slope/model/resorts/phoenix.tsx index 2044a10..e9f40d8 100644 --- a/src/entities/slope/model/resorts/phoenix.tsx +++ b/src/entities/slope/model/resorts/phoenix.tsx @@ -23,177 +23,125 @@ export const PHOENIX: ResortConstant = { slopes: [ { id: 'sparrow', - level: '초급', - name: '스패로우', - Element: SparrowPath, - webcamId: 'sparrow', - isOpen: true, + pathAsset: SparrowPath, + webcam: 6, }, { id: 'penguin-slope', - level: '초급', - name: '펭귄 슬로프', - Element: PenguinSlopePath, - webcamId: 'penguin-slope', - isOpen: true, + pathAsset: PenguinSlopePath, + webcam: 3, }, { id: 'hawk-slope1', - level: '초급', - name: '호크 슬로프 1', - Element: HawkSlope1Path, - isOpen: true, + pathAsset: HawkSlope1Path, }, { id: 'kiwi-slope', - level: '중급', - name: '키위 슬로프', - Element: KiwiSlopePath, - webcamId: 'ski-base', - isOpen: true, + pathAsset: KiwiSlopePath, + webcam: 1, }, { id: 'panorama', - level: '중급', - name: '파노라마', - Element: PanoramaPath, - webcamId: 'panorama', - isOpen: true, + pathAsset: PanoramaPath, + webcam: 4, }, { id: 'valley-slope', - level: '중급', - name: '밸리 슬로프', - Element: ValleySlopePath, - webcamId: 'montblanc-peak', - isOpen: true, + pathAsset: ValleySlopePath, + webcam: 5, }, { id: 'hawk-slope2', - level: '중급', - name: '호크 슬로프 2', - Element: HawkSlope2Path, - isOpen: true, + pathAsset: HawkSlope2Path, }, { id: 'duke-slope', - level: '중급', - name: '듀크 슬로프', - Element: DukeSlopePath, - webcamId: 'bulsae-maru-zone', - isOpen: true, + pathAsset: DukeSlopePath, + webcam: 2, }, { id: 'slope-style', - level: '중급', - name: '슬로프 스타일', - Element: SlopeStylePath, - webcamId: 'penguin-slope', - isOpen: true, + pathAsset: SlopeStylePath, + webcam: 3, }, { id: 'champion-slope', - level: '상급', - name: '챔피언 슬로프', - Element: ChampionSlopePath, - webcamId: 'champion', - isOpen: true, + pathAsset: ChampionSlopePath, + webcam: 7, }, { id: 'fantasy-slope', - level: '상급', - name: '환타지 슬로프', - Element: FantasySlopePath, - isOpen: true, + pathAsset: FantasySlopePath, }, { id: 'diggy-slope', - level: '최상급', - name: '디지 슬로프', - Element: DiggySlopePath, - webcamId: 'montblanc-peak', - isOpen: true, + pathAsset: DiggySlopePath, + webcam: 5, }, { id: 'mogul-slope', - level: '최상급', - name: '모글 슬로프', - Element: MogulSlopePath, - isOpen: true, + pathAsset: MogulSlopePath, }, { id: 'paradise', - level: '최상급', - name: '파라다이스', - Element: ParadisePath, - isOpen: true, + pathAsset: ParadisePath, }, { id: 'extreme-park', - level: '초급', - name: '익스트림 파크', - Element: ExtremeParkPath, - isOpen: true, + pathAsset: ExtremeParkPath, }, ], webcams: [ { - id: 'sparrow', - name: '스패로우', + id: 1, position: { - top: 'top-[45%]', - left: 'left-[87%]', + top: 'top-[83%]', + left: 'left-[79%]', }, scale: 1, }, { - id: 'penguin-slope', - name: '펭귄 슬로프', + id: 2, position: { - top: 'top-[79%]', - left: 'left-[43%]', + top: 'top-[31%]', + left: 'left-[9%]', }, scale: 1, }, { - id: 'ski-base', - name: '스키베이스', + id: 3, position: { - top: 'top-[83%]', - left: 'left-[79%]', + top: 'top-[79%]', + left: 'left-[43%]', }, scale: 1, }, { - id: 'bulsae-maru-zone', - name: '불새마루존', + id: 4, position: { - top: 'top-[31%]', - left: 'left-[9%]', + top: 'top-[15%]', + left: 'left-[88%]', }, scale: 1, }, { - id: 'panorama', - name: '파노라마', + id: 5, position: { - top: 'top-[15%]', - left: 'left-[88%]', + top: 'top-[7%]', + left: 'left-[53%]', }, scale: 1, }, { - id: 'montblanc-peak', - name: '몽블랑 정상', + id: 6, position: { - top: 'top-[7%]', - left: 'left-[53%]', + top: 'top-[45%]', + left: 'left-[87%]', }, scale: 1, }, { - id: 'champion', - name: '챔피온', + id: 7, position: { top: 'top-[26%]', left: 'left-[66%]', diff --git a/src/entities/slope/model/resorts/vivaldipark.tsx b/src/entities/slope/model/resorts/vivaldipark.tsx index ee33637..6713ba4 100644 --- a/src/entities/slope/model/resorts/vivaldipark.tsx +++ b/src/entities/slope/model/resorts/vivaldipark.tsx @@ -17,133 +17,99 @@ export const VIVALDIPARK: ResortConstant = { slopes: [ { id: 'ballad-slop', - level: '초급', - name: '발라드슬로프', - Element: BalladSlopPath, - webcamId: 'ballad-webcam', - isOpen: true, + pathAsset: BalladSlopPath, + webcam: 6, }, { id: 'blues-slop', - level: '초급', - name: '블루스슬로프', - Element: BluesSlopPath, - webcamId: 'blues-webcam', - isOpen: true, + pathAsset: BluesSlopPath, + webcam: 9, }, { id: 'hiphop-slop', - level: '중상급', - name: '힙합슬로프', - Element: HiphopSlopPath, - webcamId: 'hiphop-webcam', - isOpen: true, + pathAsset: HiphopSlopPath, + webcam: 4, }, { id: 'classic-slop', - level: '중상급', - name: '클래식슬로프', - Element: ClassicSlopPath, - webcamId: 'classic-webcam', - isOpen: true, + pathAsset: ClassicSlopPath, + webcam: 3, }, { id: 'reggae-slop', - level: '중급', - name: '레게슬로프', - Element: ReggaeSlopPath, - isOpen: true, + pathAsset: ReggaeSlopPath, }, { id: 'jazz-slop', - level: '중급', - name: '재즈슬로프', - Element: JazzSlopPath, - webcamId: 'jazz-webcam', - isOpen: true, + pathAsset: JazzSlopPath, + webcam: 8, }, { id: 'funky-slop', - level: '상급', - name: '펑키슬로프', - Element: FunkySlopPath, - webcamId: 'funky-webcam', - isOpen: true, + pathAsset: FunkySlopPath, + webcam: 5, }, { id: 'techno-slop', - level: '상급', - name: '테크노슬로프', - Element: TechnoSlopPath, - webcamId: 'techno-bottom', - isOpen: true, + pathAsset: TechnoSlopPath, + webcam: 7, }, { id: 'rock-slop', - level: '최상급', - name: '락슬로프', - Element: RockSlopPath, - isOpen: true, + pathAsset: RockSlopPath, }, ], webcams: [ { - id: 'ballad-webcam', - name: '발라드', + id: 1, position: { - top: 'top-[56%]', - left: 'left-[41%]', + top: 'top-[14%]', + left: 'left-[37%]', }, scale: 1, }, { - id: 'blues-webcam', - name: '블루스', + id: 2, position: { - top: 'top-[62%]', - left: 'left-[77%]', + top: 'top-[24%]', + left: 'left-[48%]', }, scale: 1, }, { - id: 'hiphop-webcam', - name: '힙합', + id: 3, position: { - top: 'top-[34%]', - left: 'left-[55%]', + top: 'top-[30%]', + left: 'left-[30%]', }, scale: 1, }, { - id: 'classic-webcam', - name: '클래식', + id: 4, position: { - top: 'top-[30%]', - left: 'left-[30%]', + top: 'top-[34%]', + left: 'left-[55%]', }, scale: 1, }, { - id: 'jazz-webcam', - name: '재즈', + id: 5, position: { - top: 'top-[62%]', - left: 'left-[21%]', + top: 'top-[44%]', + left: 'left-[46%]', }, scale: 1, }, { - id: 'funky-webcam', - name: '펑키', + id: 6, position: { - top: 'top-[44%]', - left: 'left-[46%]', + top: 'top-[56%]', + left: 'left-[41%]', }, scale: 1, }, { - id: 'techno-bottom', - name: '테크노하단', + id: 7, position: { top: 'top-[64%]', left: 'left-[51%]', @@ -151,29 +117,26 @@ export const VIVALDIPARK: ResortConstant = { scale: 1, }, { - id: 'slope-view', - name: '슬로프 전경', + id: 8, position: { - top: 'top-[76%]', - left: 'left-[45%]', + top: 'top-[62%]', + left: 'left-[21%]', }, scale: 1, }, { - id: 'skiword-top', - name: '스키월드 정상', + id: 9, position: { - top: 'top-[14%]', - left: 'left-[37%]', + top: 'top-[62%]', + left: 'left-[77%]', }, scale: 1, }, { - id: 'techno-top', - name: '테크노 상단', + id: 10, position: { - top: 'top-[24%]', - left: 'left-[48%]', + top: 'top-[76%]', + left: 'left-[45%]', }, scale: 1, }, diff --git a/src/entities/slope/model/resorts/wellihilli.tsx b/src/entities/slope/model/resorts/wellihilli.tsx index 4088346..c24f216 100644 --- a/src/entities/slope/model/resorts/wellihilli.tsx +++ b/src/entities/slope/model/resorts/wellihilli.tsx @@ -28,201 +28,131 @@ export const WELLIHILLI: ResortConstant = { slopes: [ { id: 'alpha-slope1', - level: '초급', - name: '알파슬로프 1', - Element: AlphaSlope1Path, - webcamId: 'a1/a3-slope', - isOpen: true, + pathAsset: AlphaSlope1Path, + webcam: 5, }, { id: 'alpha-slope2', - level: '초급', - name: '알파슬로프 2', - Element: AlphaSlope2Path, - webcamId: 'outdoor-square', - isOpen: true, + pathAsset: AlphaSlope2Path, + webcam: 4, }, { id: 'alpha-slope3', - level: '초급', - name: '알파슬로프 3', - Element: AlphaSlope3Path, - webcamId: 'outdoor-square', - isOpen: true, + pathAsset: AlphaSlope3Path, + webcam: 4, }, { id: 'bravo-slope1', - level: '중급', - name: '브라보슬로프 1', - Element: BravoSlope1Path, - isOpen: true, + pathAsset: BravoSlope1Path, }, { id: 'bravo-slope2', - level: '중급', - name: '브라보슬로프 2', - Element: BravoSlope2Path, - isOpen: true, + pathAsset: BravoSlope2Path, }, { id: 'delta-slope1', - level: '초급', - name: '델타슬로프 1', - Element: DeltaSlope1Path, - webcamId: 'family-slope', - isOpen: true, + pathAsset: DeltaSlope1Path, + webcam: 3, }, { id: 'delta-slope2', - level: '초급', - name: '델타슬로프 2', - Element: DeltaSlope2Path, - webcamId: 'top-square', - isOpen: true, + pathAsset: DeltaSlope2Path, + webcam: 1, }, { id: 'delta-slope-plus', - level: '초급', - name: '델타슬로프 +', - Element: DeltaSlopePlusPath, - isOpen: true, + pathAsset: DeltaSlopePlusPath, }, { id: 'echo-slope1', - level: '최상급', - name: '에코슬로프 1', - Element: EchoSlope1Path, - isOpen: true, + pathAsset: EchoSlope1Path, }, { id: 'echo-slope2', - level: '상급', - name: '에코슬로프 2', - Element: EchoSlope2Path, - isOpen: true, + pathAsset: EchoSlope2Path, }, { id: 'echo-slope3', - level: '최상급', - name: '에코슬로프 3', - Element: EchoSlope3Path, - isOpen: true, + pathAsset: EchoSlope3Path, }, { id: 'echo-slope-plus', - level: '최상급', - name: '에코슬로프 +', - Element: EchoSlopePlusPath, - isOpen: true, + pathAsset: EchoSlopePlusPath, }, { id: 'challenge-slope1', - level: '상급', - name: '첼린지슬로프 1', - Element: ChallengeSlope1Path, - isOpen: true, + pathAsset: ChallengeSlope1Path, }, { id: 'challenge-slope2', - level: '상급', - name: '첼린지슬로프 2', - Element: ChallengeSlope2Path, - isOpen: true, + pathAsset: ChallengeSlope2Path, }, { id: 'challenge-slope3', - level: '최상급', - name: '첼린지슬로프 3', - Element: ChallengeSlope3Path, - isOpen: true, + pathAsset: ChallengeSlope3Path, }, { id: 'challenge-slope4', - level: '상급', - name: '첼린지슬로프 4', - Element: ChallengeSlope4Path, - isOpen: true, + pathAsset: ChallengeSlope4Path, }, { id: 'challenge-slope5', - level: '상급', - name: '첼린지슬로프 5', - Element: ChallengeSlope5Path, - isOpen: true, + pathAsset: ChallengeSlope5Path, }, { id: 'star-express1', - level: '중급', - name: '스타 익스프레스1', - Element: StarExpress1Path, - isOpen: true, + pathAsset: StarExpress1Path, }, { id: 'star-express2', - level: '초급', - name: '스타 익스프레스2', - Element: StarExpress2Path, - webcamId: 'top-square', - isOpen: true, + pathAsset: StarExpress2Path, + webcam: 1, }, { id: 'half-pipe', - level: '초급', - name: '하프파이프', - Element: HalfPipePath, - webcamId: 'half-pipe', - isOpen: true, + pathAsset: HalfPipePath, + webcam: 2, }, ], webcams: [ { - id: 'a1/a3-slope', - name: 'A1/A3 슬로프', + id: 1, position: { - top: 'top-[62%]', - left: 'left-[8%]', + top: 'top-[4%]', + left: 'left-[56%]', }, - src: '/api/webcam?url=https://live.wellihillipark.com/wellihillipark/_definst_/cam07.stream/playlist.m3u8', scale: 1, }, { - id: 'outdoor-square', - name: '야외광장', + id: 2, position: { - top: 'top-[73%]', - left: 'left-[19%]', + top: 'top-[81%]', + left: 'left-[31%]', }, - src: '/api/webcam?url=https://live.wellihillipark.com/wellihillipark/_definst_/cam06.stream/playlist.m3u8', scale: 1, }, { - id: 'family-slope', - name: '패밀리슬로프', + id: 3, position: { top: 'top-[85%]', left: 'left-[39%]', }, - src: '/api/webcam?url=https://live.wellihillipark.com/wellihillipark/_definst_/cam05.stream/playlist.m3u8', scale: 1, }, { - id: 'top-square', - name: '정상광장', + id: 4, position: { - top: 'top-[4%]', - left: 'left-[56%]', + top: 'top-[73%]', + left: 'left-[19%]', }, - src: '/api/webcam?url=https://live.wellihillipark.com/wellihillipark/_definst_/cam03.stream/playlist.m3u8', scale: 1, }, { - id: 'half-pipe', - name: '하프파이프', + id: 5, position: { - top: 'top-[81%]', - left: 'left-[31%]', + top: 'top-[62%]', + left: 'left-[8%]', }, - src: '/api/webcam?url=https://live.wellihillipark.com/wellihillipark/_definst_/cam04.stream/playlist.m3u8', scale: 1, }, ], diff --git a/src/entities/slope/model/resorts/yongpyong.tsx b/src/entities/slope/model/resorts/yongpyong.tsx index 47f00da..44c14ce 100644 --- a/src/entities/slope/model/resorts/yongpyong.tsx +++ b/src/entities/slope/model/resorts/yongpyong.tsx @@ -29,258 +29,180 @@ export const YONGPYONG: ResortConstant = { slopes: [ { id: 'gold-valley', - level: '상급', - name: '골드 밸리', - Element: GoldValleyPath, - webcamId: 'gold-slope-foreground', - isOpen: true, + pathAsset: GoldValleyPath, + webcam: 4, }, { id: 'gold-paradise', - level: '중급', - name: '골드 파라다이스', - Element: GoldParadisePath, - isOpen: true, + pathAsset: GoldParadisePath, }, { id: 'new-gold-slope', - level: '상급', - name: '뉴골드슬로프', - Element: NewGoldSlopePath, - webcamId: 'gold-slope-foreground', - isOpen: true, + pathAsset: NewGoldSlopePath, + webcam: 4, }, { id: 'gold-fantastic', - level: '상급', - name: '골드 환타스틱', - Element: GoldFantasticPath, - webcamId: 'gold-slope-foreground', - isOpen: true, + pathAsset: GoldFantasticPath, + webcam: 4, }, { id: 'red-paradise', - level: '중급', - name: '레드 파라다이스', - Element: RedParadisePath, - webcamId: 'red-slope', - isOpen: true, + pathAsset: RedParadisePath, + webcam: 6, }, { id: 'red-slope', - level: '최상급', - name: '레드슬로프', - Element: RedSlopePath, - isOpen: true, + pathAsset: RedSlopePath, }, { id: 'new-red-slope', - level: '상급', - name: '뉴레드슬로프', - Element: NewRedSlopePath, - webcamId: 'red-slope', - isOpen: true, + pathAsset: NewRedSlopePath, + webcam: 6, }, { id: 'blue-slope', - level: '상급', - name: '블루슬로프', - Element: BlueSlopePath, - isOpen: true, + pathAsset: BlueSlopePath, }, { id: 'pink-slope', - level: '중급', - name: '핑크슬로프', - Element: PinkSlopePath, - webcamId: 'pink-slope', - isOpen: true, + pathAsset: PinkSlopePath, + webcam: 7, }, { id: 'yellow-slope', - level: '초급', - name: '옐로우슬로프', - Element: YellowSlopePath, - isOpen: true, + pathAsset: YellowSlopePath, }, { id: 'new-yellow-slope', - level: '초급', - name: '뉴 옐로우 슬로프', - Element: NewYellowSlopePath, - webcamId: 'yellow-slope', - isOpen: true, + pathAsset: NewYellowSlopePath, + webcam: 8, }, { id: 'silver-slope', - level: '중급', - name: '실버 슬로프', - Element: SilverSlopePath, - isOpen: true, + pathAsset: SilverSlopePath, }, { id: 'silver-paradise', - level: '중급', - name: '실버 파라다이스', - Element: SilverParadisePath, - isOpen: true, + pathAsset: SilverParadisePath, }, { id: 'rainbow-paradise', - level: '중급', - name: '레인보우 파라다이스', - Element: RainbowParadisePath, - webcamId: 'rainbow-top', - isOpen: true, + pathAsset: RainbowParadisePath, + webcam: 1, }, { id: 'rainbow1', - level: '최상급', - name: '레인보우 1', - Element: Rainbow1Path, - webcamId: 'rainbow-foreground', - isOpen: true, + pathAsset: Rainbow1Path, + webcam: 3, }, { id: 'rainbow2', - level: '최상급', - name: '레인보우 2', - Element: Rainbow2Path, - webcamId: 'rainbow-foreground', - isOpen: true, + pathAsset: Rainbow2Path, + webcam: 3, }, { id: 'rainbow3', - level: '최상급', - name: '레인보우 3', - Element: Rainbow3Path, - webcamId: 'rainbow-foreground', - isOpen: true, + pathAsset: Rainbow3Path, + webcam: 3, }, { id: 'rainbow4', - level: '상급', - name: '레인보우 4', - Element: Rainbow4Path, - webcamId: 'rainbow-foreground', - isOpen: true, + pathAsset: Rainbow4Path, + webcam: 3, }, { id: 'mega-green', - level: '중급', - name: '메가 그린', - Element: MegaGreenPath, - webcamId: 'mega-green-slope', - isOpen: true, + pathAsset: MegaGreenPath, + webcam: 5, }, { id: 'dragon-park', - level: '중급', - name: '드래곤 파크', - Element: DragonParkPath, - isOpen: true, + pathAsset: DragonParkPath, }, { id: 'summit-land-the-green', - level: '중급', - name: '서밋랜드 더 그린', - Element: SummitLandTheGreenPath, - isOpen: false, + pathAsset: SummitLandTheGreenPath, }, ], webcams: [ { - id: 'gold-slope-foreground', - name: '골드 슬로프 전경', + id: 1, position: { - top: 'top-[56%]', - left: 'left-[17%]', + top: 'top-[2%]', + left: 'left-[61%]', }, - src: '/api/webcam?url=https://live.yongpyong.co.kr/Ycam1/cam15.stream/chunklist.m3u8', scale: 2, }, { - id: 'red-slope', - name: '레드 슬로프', + id: 2, position: { - top: 'top-[57%]', - left: 'left-[29%]', + top: 'top-[26%]', + left: 'left-[30%]', }, - src: '/api/webcam?url=https://live.yongpyong.co.kr/Ycam1/cam03.stream/chunklist.m3u8', scale: 2, }, { - id: 'pink-slope', - name: '핑크 슬로프', + id: 3, position: { - top: 'top-[64%]', - left: 'left-[33%]', + top: 'top-[41%]', + left: 'left-[79%]', }, scale: 2, }, { - id: 'yellow-slope', - name: '옐로우 슬로프', + id: 4, position: { - top: 'top-[71%]', - left: 'left-[37%]', + top: 'top-[56%]', + left: 'left-[17%]', }, scale: 2, }, { - id: 'rainbow-top', - name: '레인보우 정상', + id: 5, position: { - top: 'top-[2%]', - left: 'left-[61%]', + top: 'top-[59%]', + left: 'left-[56%]', }, - src: '/api/webcam?url=https://live.yongpyong.co.kr/Ycam1/cam05.stream/chunklist.m3u8', scale: 2, }, { - id: 'rainbow-foreground', - name: '레인보우 전경', + id: 6, position: { - top: 'top-[41%]', - left: 'left-[79%]', + top: 'top-[57%]', + left: 'left-[29%]', }, - src: '/api/webcam?url=https://live.yongpyong.co.kr/Ycam1/cam10.stream/chunklist.m3u8', scale: 2, }, { - id: 'mega-green-slope', - name: '메가 그린 슬로프', + id: 7, position: { - top: 'top-[59%]', - left: 'left-[56%]', + top: 'top-[64%]', + left: 'left-[33%]', }, - src: '/api/webcam?url=https://live.yongpyong.co.kr/Ycam1/cam07.stream/chunklist.m3u8', scale: 2, }, { - id: 'base-foreground', - name: '베이스 전경', + id: 8, position: { - top: 'top-[84%]', - left: 'left-[34%]', + top: 'top-[71%]', + left: 'left-[37%]', }, scale: 2, }, { - id: 'access-road', - name: '용평 진입로', + id: 9, position: { - top: 'top-[86%]', - left: 'left-[26%]', + top: 'top-[84%]', + left: 'left-[34%]', }, scale: 2, }, { - id: 'slope-top', - name: '슬로프 정상', + id: 10, position: { - top: 'top-[26%]', - left: 'left-[30%]', + top: 'top-[86%]', + left: 'left-[26%]', }, scale: 2, }, From 76525055e38a902ae6de73a9d7e9fcbaa853d90f Mon Sep 17 00:00:00 2001 From: Najeong-Kim Date: Mon, 18 Nov 2024 19:46:51 +0900 Subject: [PATCH 2/7] fix: change pathAsset to start uppercase --- src/entities/slope/model/resorts/eden.tsx | 14 ++--- .../slope/model/resorts/elysian-gangchon.tsx | 20 +++---- src/entities/slope/model/resorts/gonjiam.tsx | 20 +++---- src/entities/slope/model/resorts/high1.tsx | 32 +++++------ src/entities/slope/model/resorts/jisan.tsx | 16 +++--- src/entities/slope/model/resorts/muju.tsx | 54 +++++++++---------- src/entities/slope/model/resorts/o2.tsx | 26 ++++----- src/entities/slope/model/resorts/phoenix.tsx | 30 +++++------ .../slope/model/resorts/vivaldipark.tsx | 18 +++---- .../slope/model/resorts/wellihilli.tsx | 40 +++++++------- .../slope/model/resorts/yongpyong.tsx | 42 +++++++-------- 11 files changed, 156 insertions(+), 156 deletions(-) diff --git a/src/entities/slope/model/resorts/eden.tsx b/src/entities/slope/model/resorts/eden.tsx index cccfcb3..c8ff40e 100644 --- a/src/entities/slope/model/resorts/eden.tsx +++ b/src/entities/slope/model/resorts/eden.tsx @@ -15,35 +15,35 @@ export const EDEN: ResortConstant = { slopes: [ { id: '베이직 슬로프', - pathAsset: BasicSlopePath, + PathAsset: BasicSlopePath, webcam: 1, }, { id: '메인 슬로프', - pathAsset: MainSlopePath, + PathAsset: MainSlopePath, webcam: 1, }, { id: '쥬피터 슬로프', - pathAsset: JupiterSlopePath, + PathAsset: JupiterSlopePath, webcam: 2, }, { id: '새턴 슬로프', - pathAsset: SaturnSlopePath, + PathAsset: SaturnSlopePath, }, { id: '우라누스 슬로프', - pathAsset: UranusSlopePath, + PathAsset: UranusSlopePath, webcam: 3, }, { id: '머큐리 슬로프', - pathAsset: MercurySlopePath, + PathAsset: MercurySlopePath, }, { id: '비너스 슬로프', - pathAsset: VenusSlopePath, + PathAsset: VenusSlopePath, webcam: 1, }, ], diff --git a/src/entities/slope/model/resorts/elysian-gangchon.tsx b/src/entities/slope/model/resorts/elysian-gangchon.tsx index f6a3ec1..b326dca 100644 --- a/src/entities/slope/model/resorts/elysian-gangchon.tsx +++ b/src/entities/slope/model/resorts/elysian-gangchon.tsx @@ -18,51 +18,51 @@ export const ELYSIAN_GANGCHON: ResortConstant = { slopes: [ { id: 'panda-slop', - pathAsset: PandaSlopPath, + PathAsset: PandaSlopPath, webcam: 2, }, { id: 'rabbit-slop', - pathAsset: RabbitSlopPath, + PathAsset: RabbitSlopPath, webcam: 2, }, { id: 'dragon-slop', - pathAsset: DragonSlopPath, + PathAsset: DragonSlopPath, webcam: 1, }, { id: 'horse-slop', - pathAsset: HorseSlopPath, + PathAsset: HorseSlopPath, webcam: 1, }, { id: 'pegasus-slop', - pathAsset: PegasusSlopPath, + PathAsset: PegasusSlopPath, webcam: 3, }, { id: 'zebra-slop', - pathAsset: ZebraSlopPath, + PathAsset: ZebraSlopPath, webcam: 3, }, { id: 'deer-slop', - pathAsset: DeerSlopPath, + PathAsset: DeerSlopPath, }, { id: 'puma-slop', - pathAsset: PumaSlopPath, + PathAsset: PumaSlopPath, webcam: 1, }, { id: 'leopard-slop', - pathAsset: LeopardSlopPath, + PathAsset: LeopardSlopPath, webcam: 3, }, { id: 'jaguar-slop', - pathAsset: JaguarSlopPath, + PathAsset: JaguarSlopPath, webcam: 3, }, ], diff --git a/src/entities/slope/model/resorts/gonjiam.tsx b/src/entities/slope/model/resorts/gonjiam.tsx index 75b4091..e61310f 100644 --- a/src/entities/slope/model/resorts/gonjiam.tsx +++ b/src/entities/slope/model/resorts/gonjiam.tsx @@ -18,47 +18,47 @@ export const GONJIAM: ResortConstant = { slopes: [ { id: 'whynot-slop', - pathAsset: WhynotSlopPath, + PathAsset: WhynotSlopPath, webcam: 2, }, { id: 'gram1-slop', - pathAsset: Gram1SlopPath, + PathAsset: Gram1SlopPath, }, { id: 'gram2-slop', - pathAsset: Gram2SlopPath, + PathAsset: Gram2SlopPath, }, { id: 'cnp1-slop', - pathAsset: CNP1SlopPath, + PathAsset: CNP1SlopPath, webcam: 3, }, { id: 'cnp2-slop', - pathAsset: CNP2SlopPath, + PathAsset: CNP2SlopPath, }, { id: 'thinkyou1-slop', - pathAsset: Thinkyou1SlopPath, + PathAsset: Thinkyou1SlopPath, webcam: 3, }, { id: 'thinkyou2-slop', - pathAsset: Thinkyou2SlopPath, + PathAsset: Thinkyou2SlopPath, webcam: 2, }, { id: 'thinkyou3-slop', - pathAsset: Thinkyou3SlopPath, + PathAsset: Thinkyou3SlopPath, }, { id: 'thinkyou-bridge-slop', - pathAsset: ThinkyouBridgeSlopPath, + PathAsset: ThinkyouBridgeSlopPath, }, { id: 'whisen-slop', - pathAsset: WhisenSlopPath, + PathAsset: WhisenSlopPath, webcam: 1, }, ], diff --git a/src/entities/slope/model/resorts/high1.tsx b/src/entities/slope/model/resorts/high1.tsx index 697f85b..4422e04 100644 --- a/src/entities/slope/model/resorts/high1.tsx +++ b/src/entities/slope/model/resorts/high1.tsx @@ -24,73 +24,73 @@ export const HIGH1: ResortConstant = { slopes: [ { id: 'zeus1-slop', - pathAsset: Zeus1SlopPath, + PathAsset: Zeus1SlopPath, }, { id: 'zeus2-slop', - pathAsset: Zeus2SlopPath, + PathAsset: Zeus2SlopPath, webcam: 1, }, { id: 'zeus3-slop', - pathAsset: Zeus3SlopPath, + PathAsset: Zeus3SlopPath, webcam: 13, }, { id: 'zeus3-1-slop', - pathAsset: Zeus3Sub1SlopPath, + PathAsset: Zeus3Sub1SlopPath, }, { id: 'victoria1-slop', - pathAsset: Victoria1SlopPath, + PathAsset: Victoria1SlopPath, webcam: 12, }, { id: 'victoria2-slop', - pathAsset: Victoria2SlopPath, + PathAsset: Victoria2SlopPath, }, { id: 'hera1-slop', - pathAsset: Hera1SlopPath, + PathAsset: Hera1SlopPath, }, { id: 'hera2-slop', - pathAsset: Hera2SlopPath, + PathAsset: Hera2SlopPath, webcam: 2, }, { id: 'hera3-slop', - pathAsset: Hera3SlopPath, + PathAsset: Hera3SlopPath, }, { id: 'apollo1-slop', - pathAsset: Apollo1SlopPath, + PathAsset: Apollo1SlopPath, }, { id: 'apollo2-slop', - pathAsset: Apollo2SlopPath, + PathAsset: Apollo2SlopPath, }, { id: 'apollo3-slop', - pathAsset: Apollo3SlopPath, + PathAsset: Apollo3SlopPath, }, { id: 'apollo4-slop', - pathAsset: Apollo4SlopPath, + PathAsset: Apollo4SlopPath, webcam: 15, }, { id: 'apollo6-slop', - pathAsset: Apollo6SlopPath, + PathAsset: Apollo6SlopPath, }, { id: 'athena2-slop', - pathAsset: Athena2SlopPath, + PathAsset: Athena2SlopPath, webcam: 6, }, { id: 'athena3-slop', - pathAsset: Athena3SlopPath, + PathAsset: Athena3SlopPath, }, ], webcams: [ diff --git a/src/entities/slope/model/resorts/jisan.tsx b/src/entities/slope/model/resorts/jisan.tsx index 51ecb85..1a54690 100644 --- a/src/entities/slope/model/resorts/jisan.tsx +++ b/src/entities/slope/model/resorts/jisan.tsx @@ -16,40 +16,40 @@ export const JISAN: ResortConstant = { slopes: [ { id: 'lemon1-lift', - pathAsset: Lemon1LiftPath, + PathAsset: Lemon1LiftPath, webcam: 1, }, { id: 'lemon1-1-lift', - pathAsset: Lemon1Sub1LiftPath, + PathAsset: Lemon1Sub1LiftPath, }, { id: 'orange2-lift', - pathAsset: Orange2LiftPath, + PathAsset: Orange2LiftPath, webcam: 2, }, { id: 'orange3-lift', - pathAsset: Orange3LiftPath, + PathAsset: Orange3LiftPath, webcam: 3, }, { id: 'new-orange-lift', - pathAsset: NewOrangeLiftPath, + PathAsset: NewOrangeLiftPath, }, { id: 'blue-lift', - pathAsset: BlueLiftPath, + PathAsset: BlueLiftPath, webcam: 4, }, { id: 'silver6-lift', - pathAsset: Silver6LiftPath, + PathAsset: Silver6LiftPath, webcam: 5, }, { id: 'silver7-lift', - pathAsset: Silver7LiftPath, + PathAsset: Silver7LiftPath, webcam: 6, }, ], diff --git a/src/entities/slope/model/resorts/muju.tsx b/src/entities/slope/model/resorts/muju.tsx index 89ac33d..a4bfadc 100644 --- a/src/entities/slope/model/resorts/muju.tsx +++ b/src/entities/slope/model/resorts/muju.tsx @@ -35,125 +35,125 @@ export const MUJU: ResortConstant = { slopes: [ { id: 'eastern-slope', - pathAsset: EasternSlopePath, + PathAsset: EasternSlopePath, webcam: 7, }, { id: 'soyokgihang', - pathAsset: SoyokgihangPath, + PathAsset: SoyokgihangPath, webcam: 5, }, { id: 'spitch-lowest', - pathAsset: SpitchLowestPath, + PathAsset: SpitchLowestPath, webcam: 8, }, { id: 'western-slope', - pathAsset: WesternSlopePath, + PathAsset: WesternSlopePath, }, { id: 'sundown-slope', - pathAsset: SundownSlopePath, + PathAsset: SundownSlopePath, webcam: 6, }, { id: 'silkroad', - pathAsset: SilkroadPath, + PathAsset: SilkroadPath, webcam: 2, }, { id: 'rookiehill-slope', - pathAsset: RookiehillSlopePath, + PathAsset: RookiehillSlopePath, }, { id: 'turbo-slope', - pathAsset: TurboSlopePath, + PathAsset: TurboSlopePath, webcam: 6, }, { id: 'connection-slope', - pathAsset: ConnectionSlopePath, + PathAsset: ConnectionSlopePath, }, { id: 'minuet', - pathAsset: MinuetPath, + PathAsset: MinuetPath, webcam: 3, }, { id: 'freeway', - pathAsset: FreewayPath, + PathAsset: FreewayPath, webcam: 5, }, { id: 'yamaga-slope', - pathAsset: YamagaSlopePath, + PathAsset: YamagaSlopePath, webcam: 5, }, { id: 'panorama', - pathAsset: PanoramaPath, + PathAsset: PanoramaPath, }, { id: 'raiders-lowest', - pathAsset: RaidersLowestPath, + PathAsset: RaidersLowestPath, }, { id: 'mozart', - pathAsset: MozartPath, + PathAsset: MozartPath, webcam: 3, }, { id: 'waltz-slope', - pathAsset: WaltzSlopePath, + PathAsset: WaltzSlopePath, }, { id: 'allegro', - pathAsset: AllegroPath, + PathAsset: AllegroPath, webcam: 1, }, { id: 'raiders-highest', - pathAsset: RaidersHighestPath, + PathAsset: RaidersHighestPath, webcam: 4, }, { id: 'polka-slope', - pathAsset: PolkaSlopePath, + PathAsset: PolkaSlopePath, webcam: 1, }, { id: 'cadenza-slope', - pathAsset: CadenzaSlopePath, + PathAsset: CadenzaSlopePath, webcam: 1, }, { id: 'shortcut-slope', - pathAsset: ShortcutSlopePath, + PathAsset: ShortcutSlopePath, }, { id: 'spitch-slope', - pathAsset: SpitchSlopePath, + PathAsset: SpitchSlopePath, }, { id: 'flamingo', - pathAsset: FlamingoPath, + PathAsset: FlamingoPath, }, { id: 'moderato', - pathAsset: ModeratoPath, + PathAsset: ModeratoPath, }, { id: 'r-gardner-slope', - pathAsset: RGardnerSlopePath, + PathAsset: RGardnerSlopePath, }, { id: 'freeway2', - pathAsset: Freeway2Path, + PathAsset: Freeway2Path, }, { id: 'rusutsu-slope', - pathAsset: RusutsuSlopePath, + PathAsset: RusutsuSlopePath, }, ], webcams: [ diff --git a/src/entities/slope/model/resorts/o2.tsx b/src/entities/slope/model/resorts/o2.tsx index 9db2b56..f944238 100644 --- a/src/entities/slope/model/resorts/o2.tsx +++ b/src/entities/slope/model/resorts/o2.tsx @@ -21,62 +21,62 @@ export const O2: ResortConstant = { slopes: [ { id: 'dream-slope1', - pathAsset: DreamSlope1Path, + PathAsset: DreamSlope1Path, webcam: 3, }, { id: 'dream-slope2', - pathAsset: DreamSlope2Path, + PathAsset: DreamSlope2Path, }, { id: 'head-slope', - pathAsset: HeadSlopePath, + PathAsset: HeadSlopePath, }, { id: 'happy-slope', - pathAsset: HappySlopePath, + PathAsset: HappySlopePath, webcam: 1, }, { id: 'glory-slope1', - pathAsset: GlorySlope1Path, + PathAsset: GlorySlope1Path, }, { id: 'glory-slope2', - pathAsset: GlorySlope2Path, + PathAsset: GlorySlope2Path, }, { id: 'glory-slope3', - pathAsset: GlorySlope3Path, + PathAsset: GlorySlope3Path, webcam: 1, }, { id: 'fashion-slope1', - pathAsset: FashionSlope1Path, + PathAsset: FashionSlope1Path, webcam: 1, }, { id: 'fashion-slope2', - pathAsset: FashionSlope2Path, + PathAsset: FashionSlope2Path, }, { id: 'challenge-slope1', - pathAsset: ChallengeSlope1Path, + PathAsset: ChallengeSlope1Path, webcam: 2, }, { id: 'challenge-slope2', - pathAsset: ChallengeSlope2Path, + PathAsset: ChallengeSlope2Path, webcam: 2, }, { id: 'challenge-slope3', - pathAsset: ChallengeSlope3Path, + PathAsset: ChallengeSlope3Path, webcam: 2, }, { id: 'half-pipe', - pathAsset: HalfPipePath, + PathAsset: HalfPipePath, webcam: 4, }, ], diff --git a/src/entities/slope/model/resorts/phoenix.tsx b/src/entities/slope/model/resorts/phoenix.tsx index e9f40d8..6868ba5 100644 --- a/src/entities/slope/model/resorts/phoenix.tsx +++ b/src/entities/slope/model/resorts/phoenix.tsx @@ -23,72 +23,72 @@ export const PHOENIX: ResortConstant = { slopes: [ { id: 'sparrow', - pathAsset: SparrowPath, + PathAsset: SparrowPath, webcam: 6, }, { id: 'penguin-slope', - pathAsset: PenguinSlopePath, + PathAsset: PenguinSlopePath, webcam: 3, }, { id: 'hawk-slope1', - pathAsset: HawkSlope1Path, + PathAsset: HawkSlope1Path, }, { id: 'kiwi-slope', - pathAsset: KiwiSlopePath, + PathAsset: KiwiSlopePath, webcam: 1, }, { id: 'panorama', - pathAsset: PanoramaPath, + PathAsset: PanoramaPath, webcam: 4, }, { id: 'valley-slope', - pathAsset: ValleySlopePath, + PathAsset: ValleySlopePath, webcam: 5, }, { id: 'hawk-slope2', - pathAsset: HawkSlope2Path, + PathAsset: HawkSlope2Path, }, { id: 'duke-slope', - pathAsset: DukeSlopePath, + PathAsset: DukeSlopePath, webcam: 2, }, { id: 'slope-style', - pathAsset: SlopeStylePath, + PathAsset: SlopeStylePath, webcam: 3, }, { id: 'champion-slope', - pathAsset: ChampionSlopePath, + PathAsset: ChampionSlopePath, webcam: 7, }, { id: 'fantasy-slope', - pathAsset: FantasySlopePath, + PathAsset: FantasySlopePath, }, { id: 'diggy-slope', - pathAsset: DiggySlopePath, + PathAsset: DiggySlopePath, webcam: 5, }, { id: 'mogul-slope', - pathAsset: MogulSlopePath, + PathAsset: MogulSlopePath, }, { id: 'paradise', - pathAsset: ParadisePath, + PathAsset: ParadisePath, }, { id: 'extreme-park', - pathAsset: ExtremeParkPath, + PathAsset: ExtremeParkPath, }, ], webcams: [ diff --git a/src/entities/slope/model/resorts/vivaldipark.tsx b/src/entities/slope/model/resorts/vivaldipark.tsx index 6713ba4..095f8a0 100644 --- a/src/entities/slope/model/resorts/vivaldipark.tsx +++ b/src/entities/slope/model/resorts/vivaldipark.tsx @@ -17,46 +17,46 @@ export const VIVALDIPARK: ResortConstant = { slopes: [ { id: 'ballad-slop', - pathAsset: BalladSlopPath, + PathAsset: BalladSlopPath, webcam: 6, }, { id: 'blues-slop', - pathAsset: BluesSlopPath, + PathAsset: BluesSlopPath, webcam: 9, }, { id: 'hiphop-slop', - pathAsset: HiphopSlopPath, + PathAsset: HiphopSlopPath, webcam: 4, }, { id: 'classic-slop', - pathAsset: ClassicSlopPath, + PathAsset: ClassicSlopPath, webcam: 3, }, { id: 'reggae-slop', - pathAsset: ReggaeSlopPath, + PathAsset: ReggaeSlopPath, }, { id: 'jazz-slop', - pathAsset: JazzSlopPath, + PathAsset: JazzSlopPath, webcam: 8, }, { id: 'funky-slop', - pathAsset: FunkySlopPath, + PathAsset: FunkySlopPath, webcam: 5, }, { id: 'techno-slop', - pathAsset: TechnoSlopPath, + PathAsset: TechnoSlopPath, webcam: 7, }, { id: 'rock-slop', - pathAsset: RockSlopPath, + PathAsset: RockSlopPath, }, ], webcams: [ diff --git a/src/entities/slope/model/resorts/wellihilli.tsx b/src/entities/slope/model/resorts/wellihilli.tsx index c24f216..a515577 100644 --- a/src/entities/slope/model/resorts/wellihilli.tsx +++ b/src/entities/slope/model/resorts/wellihilli.tsx @@ -28,89 +28,89 @@ export const WELLIHILLI: ResortConstant = { slopes: [ { id: 'alpha-slope1', - pathAsset: AlphaSlope1Path, + PathAsset: AlphaSlope1Path, webcam: 5, }, { id: 'alpha-slope2', - pathAsset: AlphaSlope2Path, + PathAsset: AlphaSlope2Path, webcam: 4, }, { id: 'alpha-slope3', - pathAsset: AlphaSlope3Path, + PathAsset: AlphaSlope3Path, webcam: 4, }, { id: 'bravo-slope1', - pathAsset: BravoSlope1Path, + PathAsset: BravoSlope1Path, }, { id: 'bravo-slope2', - pathAsset: BravoSlope2Path, + PathAsset: BravoSlope2Path, }, { id: 'delta-slope1', - pathAsset: DeltaSlope1Path, + PathAsset: DeltaSlope1Path, webcam: 3, }, { id: 'delta-slope2', - pathAsset: DeltaSlope2Path, + PathAsset: DeltaSlope2Path, webcam: 1, }, { id: 'delta-slope-plus', - pathAsset: DeltaSlopePlusPath, + PathAsset: DeltaSlopePlusPath, }, { id: 'echo-slope1', - pathAsset: EchoSlope1Path, + PathAsset: EchoSlope1Path, }, { id: 'echo-slope2', - pathAsset: EchoSlope2Path, + PathAsset: EchoSlope2Path, }, { id: 'echo-slope3', - pathAsset: EchoSlope3Path, + PathAsset: EchoSlope3Path, }, { id: 'echo-slope-plus', - pathAsset: EchoSlopePlusPath, + PathAsset: EchoSlopePlusPath, }, { id: 'challenge-slope1', - pathAsset: ChallengeSlope1Path, + PathAsset: ChallengeSlope1Path, }, { id: 'challenge-slope2', - pathAsset: ChallengeSlope2Path, + PathAsset: ChallengeSlope2Path, }, { id: 'challenge-slope3', - pathAsset: ChallengeSlope3Path, + PathAsset: ChallengeSlope3Path, }, { id: 'challenge-slope4', - pathAsset: ChallengeSlope4Path, + PathAsset: ChallengeSlope4Path, }, { id: 'challenge-slope5', - pathAsset: ChallengeSlope5Path, + PathAsset: ChallengeSlope5Path, }, { id: 'star-express1', - pathAsset: StarExpress1Path, + PathAsset: StarExpress1Path, }, { id: 'star-express2', - pathAsset: StarExpress2Path, + PathAsset: StarExpress2Path, webcam: 1, }, { id: 'half-pipe', - pathAsset: HalfPipePath, + PathAsset: HalfPipePath, webcam: 2, }, ], diff --git a/src/entities/slope/model/resorts/yongpyong.tsx b/src/entities/slope/model/resorts/yongpyong.tsx index 44c14ce..2632303 100644 --- a/src/entities/slope/model/resorts/yongpyong.tsx +++ b/src/entities/slope/model/resorts/yongpyong.tsx @@ -29,100 +29,100 @@ export const YONGPYONG: ResortConstant = { slopes: [ { id: 'gold-valley', - pathAsset: GoldValleyPath, + PathAsset: GoldValleyPath, webcam: 4, }, { id: 'gold-paradise', - pathAsset: GoldParadisePath, + PathAsset: GoldParadisePath, }, { id: 'new-gold-slope', - pathAsset: NewGoldSlopePath, + PathAsset: NewGoldSlopePath, webcam: 4, }, { id: 'gold-fantastic', - pathAsset: GoldFantasticPath, + PathAsset: GoldFantasticPath, webcam: 4, }, { id: 'red-paradise', - pathAsset: RedParadisePath, + PathAsset: RedParadisePath, webcam: 6, }, { id: 'red-slope', - pathAsset: RedSlopePath, + PathAsset: RedSlopePath, }, { id: 'new-red-slope', - pathAsset: NewRedSlopePath, + PathAsset: NewRedSlopePath, webcam: 6, }, { id: 'blue-slope', - pathAsset: BlueSlopePath, + PathAsset: BlueSlopePath, }, { id: 'pink-slope', - pathAsset: PinkSlopePath, + PathAsset: PinkSlopePath, webcam: 7, }, { id: 'yellow-slope', - pathAsset: YellowSlopePath, + PathAsset: YellowSlopePath, }, { id: 'new-yellow-slope', - pathAsset: NewYellowSlopePath, + PathAsset: NewYellowSlopePath, webcam: 8, }, { id: 'silver-slope', - pathAsset: SilverSlopePath, + PathAsset: SilverSlopePath, }, { id: 'silver-paradise', - pathAsset: SilverParadisePath, + PathAsset: SilverParadisePath, }, { id: 'rainbow-paradise', - pathAsset: RainbowParadisePath, + PathAsset: RainbowParadisePath, webcam: 1, }, { id: 'rainbow1', - pathAsset: Rainbow1Path, + PathAsset: Rainbow1Path, webcam: 3, }, { id: 'rainbow2', - pathAsset: Rainbow2Path, + PathAsset: Rainbow2Path, webcam: 3, }, { id: 'rainbow3', - pathAsset: Rainbow3Path, + PathAsset: Rainbow3Path, webcam: 3, }, { id: 'rainbow4', - pathAsset: Rainbow4Path, + PathAsset: Rainbow4Path, webcam: 3, }, { id: 'mega-green', - pathAsset: MegaGreenPath, + PathAsset: MegaGreenPath, webcam: 5, }, { id: 'dragon-park', - pathAsset: DragonParkPath, + PathAsset: DragonParkPath, }, { id: 'summit-land-the-green', - pathAsset: SummitLandTheGreenPath, + PathAsset: SummitLandTheGreenPath, }, ], webcams: [ From b4bb46445bbfd2a0a5f7a6c1b2057ad04407bb4b Mon Sep 17 00:00:00 2001 From: Najeong-Kim Date: Mon, 18 Nov 2024 19:51:35 +0900 Subject: [PATCH 3/7] feat: connect slope and webcam api --- src/entities/slope/model/model.d.ts | 16 +++++--- src/features/slope/hooks/useSlopeStore.ts | 5 ++- src/features/slope/ui/slope-camera.tsx | 16 ++++---- src/features/slope/ui/slope-map.tsx | 14 ++----- .../slope-status/ui/slope-status-page.tsx | 16 ++++++-- .../webcam/ui/webcam-mobile-map-page.tsx | 39 +++++++++++-------- src/widgets/webcam/ui/webcam-map.tsx | 14 ++++--- src/widgets/webcam/ui/webcam-slope-list.tsx | 31 ++++++++------- 8 files changed, 87 insertions(+), 64 deletions(-) diff --git a/src/entities/slope/model/model.d.ts b/src/entities/slope/model/model.d.ts index e085e80..24159db 100644 --- a/src/entities/slope/model/model.d.ts +++ b/src/entities/slope/model/model.d.ts @@ -1,6 +1,7 @@ export type Level = '초급' | '초중급' | '중급' | '중상급' | '상급' | '최상급' | '파크'; -export type Slope = { +export type SlopeRaw = { + id: number; name: string; difficulty: Level; isDayOperating: true; @@ -10,7 +11,7 @@ export type Slope = { isMidnightOperating: true; }; -export type Webcam = { +export type WebcamRaw = { name: string; number: 0; description: string; @@ -23,8 +24,8 @@ export type SlopeResponse = { lateNightOperatingHours: string; dawnOperatingHours: string; midnightOperatingHours: string; - slopes: Slope[]; - webcams: Webcam[]; + slopes: SlopeRaw[]; + webcams: WebcamRaw[]; }; export type ResortConstant = { @@ -44,7 +45,9 @@ export type WebcamConstant = { export type SlopeConstant = { id: number | string; - pathAsset: React.FC; + PathAsset: ComponentType<{ + color?: string; + }>; webcam?: number; }; @@ -52,3 +55,6 @@ export type Position = { x: number; y: number; }; + +export type Slope = SlopeRaw & SlopeConstant; +export type Webcam = WebcamRaw & WebcamConstant; diff --git a/src/features/slope/hooks/useSlopeStore.ts b/src/features/slope/hooks/useSlopeStore.ts index 0dbfc47..b5e58e7 100644 --- a/src/features/slope/hooks/useSlopeStore.ts +++ b/src/features/slope/hooks/useSlopeStore.ts @@ -1,7 +1,8 @@ import { create } from 'zustand'; -type SlopeId = string | null; -type CameraId = string | null | undefined; +// TODO: 데이터 수정 후 SlopeId string 타입 삭제 +type SlopeId = string | number | null; +type CameraId = number | null | undefined; interface SlopeState { selectedSlope: SlopeId; diff --git a/src/features/slope/ui/slope-camera.tsx b/src/features/slope/ui/slope-camera.tsx index 5ed7004..cb92635 100644 --- a/src/features/slope/ui/slope-camera.tsx +++ b/src/features/slope/ui/slope-camera.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useRef } from 'react'; import { createPortal } from 'react-dom'; import { toast } from 'sonner'; -import type { Position, WebcamConstant } from '@/entities/slope/model'; +import type { Position, Webcam } from '@/entities/slope/model'; import ArrowRightIcon from '@/shared/icons/arrow-right'; import NeutralFace from '@/shared/icons/neutral-face'; import { cn } from '@/shared/lib'; @@ -14,17 +14,17 @@ import SlopeVideo from './slope-video'; interface SlopeWebcamProps { isWebview?: boolean; - webcam: WebcamConstant; + webcam: Webcam; webcamScale: number; isOpen: boolean; containerRef: React.RefObject; - onCameraClick: ({ scale, id }: { scale: number; id: string }) => void; - updateCameraPosition: (id: string, position: Position) => void; + onCameraClick: ({ scale, id }: { scale: number; id: number }) => void; + updateCameraPosition: (id: number, position: Position) => void; } const SlopeCamera = ({ isWebview = false, - webcam: { scale, name, position, src, id }, + webcam: { scale, name, position, url, id }, webcamScale, isOpen, containerRef, @@ -47,7 +47,7 @@ const SlopeCamera = ({ const openVideo = () => { setOpenCamera(); - if (!src) { + if (!url) { postAppMessage('선택한 웹캠은 아직 준비중 이에요', isWebview, (message) => toast( <> @@ -88,8 +88,8 @@ const SlopeCamera = ({ {containerRef?.current && selectedCamera.isOpen && selectedCamera.id === id && - src && - createPortal(, containerRef.current)} + url && + createPortal(, containerRef.current)} ); }; diff --git a/src/features/slope/ui/slope-map.tsx b/src/features/slope/ui/slope-map.tsx index 7bc5170..b24b078 100644 --- a/src/features/slope/ui/slope-map.tsx +++ b/src/features/slope/ui/slope-map.tsx @@ -2,7 +2,7 @@ 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'; +import type { Slope } from '@/entities/slope/model'; import { cn } from '@/shared/lib'; import type useMapPinch from '../hooks/useMapPinch'; import useSlopeStore from '../hooks/useSlopeStore'; @@ -10,15 +10,7 @@ import useSlopeStore from '../hooks/useSlopeStore'; interface SlopeMapProps { children?: React.ReactNode; MapComponent: ComponentType | StaticImageData; - - slopes: { - id: string; - level: Level; - Element: ComponentType<{ - color?: string; - }>; - }[]; - + slopes: Slope[]; style: ReturnType['style']; } @@ -46,7 +38,7 @@ const SlopeMap = forwardRef( )} {slopes.map((slope) => (
- { const { ref, style, containerRef } = useMapPinch(); - const { data: slopeData } = useQuery(slopeApi.slopeQueries.slope(resortId ?? 0)); + const { data: slopeRawData } = useQuery(slopeApi.slopeQueries.slope(resortId ?? 0)); const key = ResortData.find((resort) => resort.id === resortId) ?.map as keyof typeof RESORT_DOMAIN; + const slopes = useMemo( + () => + slopeRawData?.slopes.map((slope) => ({ + ...slope, + ...RESORT_DOMAIN[key].slopes.find((slopeConstant) => slopeConstant.id === slope.id), + })) as Slope[], + [slopeRawData, key] + ); return (
@@ -25,10 +35,10 @@ const SlopeStatusPage = ({ resortId }: { resortId: number }) => { style={style} ref={ref} MapComponent={RESORT_DOMAIN[key].MapComponent} - slopes={RESORT_DOMAIN[key].slopes} + slopes={slopes} /> - +
); }; diff --git a/src/views/webcam/ui/webcam-mobile-map-page.tsx b/src/views/webcam/ui/webcam-mobile-map-page.tsx index 94fcfd2..e32c5b3 100644 --- a/src/views/webcam/ui/webcam-mobile-map-page.tsx +++ b/src/views/webcam/ui/webcam-mobile-map-page.tsx @@ -1,28 +1,39 @@ 'use client'; +import { useQuery } from '@tanstack/react-query'; import React, { useCallback, useState } from 'react'; import { WebcamMap, WebcamSlopeList } from '@/widgets/webcam/ui'; import useMapPinch from '@/features/slope/hooks/useMapPinch'; import calculateWebcamPosition from '@/features/slope/lib/calculateWebcamPosition'; import { ResortData } from '@/entities/resort'; +import { slopeApi } from '@/entities/slope'; +import type { Slope, Webcam } from '@/entities/slope/model'; import { RESORT_DOMAIN, type Position } from '@/entities/slope/model'; import { cn } from '@/shared/lib'; const WebCamMobileMapPage = ({ resortId }: { resortId?: number }) => { - const data = - RESORT_DOMAIN[ - ResortData.find((resort) => resort.id === resortId)?.map as keyof typeof RESORT_DOMAIN - ]; + const { data: slopeRawData } = useQuery(slopeApi.slopeQueries.slope(resortId ?? 0)); + const key = ResortData.find((resort) => resort.id === resortId) + ?.map as keyof typeof RESORT_DOMAIN; + const slopes = slopeRawData?.slopes.map((slope) => ({ + ...slope, + ...RESORT_DOMAIN[key].slopes.find((slopeConstant) => slopeConstant.id === slope.id), + })) as Slope[]; + const webcams = slopeRawData?.webcams.map((webcam) => ({ + ...webcam, + ...RESORT_DOMAIN[key].webcams.find((webcamConstant) => webcamConstant.id === webcam.number), + })) as Webcam[]; + const [cameraPositions, setCameraPositions] = useState<{ - [key: string]: Position; + [key: number]: Position; }>({}); const { ref, style, api, containerRef } = useMapPinch(); - const updateCameraPosition = useCallback((id: string, position: Position) => { + const updateCameraPosition = useCallback((id: number, position: Position) => { setCameraPositions((prev) => ({ ...prev, [id]: position })); }, []); - const handleFocusSlopCamClick = ({ id, scale }: { id: string; scale: number }) => { + const handleFocusSlopCamClick = ({ id, scale }: { id: number; scale: number }) => { gtag('event', 'details_webcam_webcam_click', { detail_type: resortId, webcam_type: id }); const { width, height } = containerRef.current!.getBoundingClientRect(); const { boundedX, boundedY } = calculateWebcamPosition({ @@ -36,7 +47,7 @@ const WebCamMobileMapPage = ({ resortId }: { resortId?: number }) => { api.start({ scale: scale, x: boundedX, y: boundedY }); }; - if (!data) return; + if (!slopeRawData) return; return (
@@ -45,17 +56,13 @@ const WebCamMobileMapPage = ({ resortId }: { resortId?: number }) => { style={style} isWebview containerRef={containerRef} - slopes={data.slopes} - webcams={data.webcams} - MapComponent={data.MapComponent} + slopes={slopes} + webcams={webcams} + MapComponent={RESORT_DOMAIN[key].MapComponent} onCameraClick={handleFocusSlopCamClick} updateCameraPosition={updateCameraPosition} /> - +
); }; diff --git a/src/widgets/webcam/ui/webcam-map.tsx b/src/widgets/webcam/ui/webcam-map.tsx index 57cf0c6..c0d3567 100644 --- a/src/widgets/webcam/ui/webcam-map.tsx +++ b/src/widgets/webcam/ui/webcam-map.tsx @@ -1,21 +1,25 @@ import type { SpringValue } from '@react-spring/web'; +import type { ComponentType } from 'react'; import React, { forwardRef } from 'react'; import useSlopeStore from '@/features/slope/hooks/useSlopeStore'; import SlopeCamera from '@/features/slope/ui/slope-camera'; import SlopeMap from '@/features/slope/ui/slope-map'; -import type { Position, ResortConstant } from '@/entities/slope/model'; +import type { Position, Slope, Webcam } from '@/entities/slope/model'; import { cn } from '@/shared/lib'; -interface WebcamMapProps extends ResortConstant { +interface WebcamMapProps { isWebview?: boolean; + MapComponent: ComponentType; + slopes: Slope[]; + webcams: Webcam[]; containerRef: React.RefObject; - onCameraClick: ({ scale, id }: { scale: number; id: string }) => void; + onCameraClick: ({ scale, id }: { scale: number; id: number }) => void; style: { scale: SpringValue; x: SpringValue; y: SpringValue; }; - updateCameraPosition: (id: string, position: Position) => void; + updateCameraPosition: (id: number, position: Position) => void; } const WebcamMap = forwardRef( @@ -38,7 +42,7 @@ const WebcamMap = forwardRef(
{webcams.map((webcam) => { - const slop = slopes.filter((slop) => slop.webcamId === webcam.id); + const slop = slopes.filter((slop) => slop.webcam === webcam.id); // webcam을 띄워야 하는 slop를 찾음 return ( diff --git a/src/widgets/webcam/ui/webcam-slope-list.tsx b/src/widgets/webcam/ui/webcam-slope-list.tsx index bf4db30..f387975 100644 --- a/src/widgets/webcam/ui/webcam-slope-list.tsx +++ b/src/widgets/webcam/ui/webcam-slope-list.tsx @@ -2,45 +2,48 @@ import React from 'react'; import useSlopeStore from '@/features/slope/hooks/useSlopeStore'; -import type { SlopeConstant, WebcamConstant } from '@/entities/slope/model'; +import type { Slope, Webcam } from '@/entities/slope/model'; import LevelChip from '@/entities/slope/ui/level-chip'; import { cn } from '@/shared/lib'; import CameraButton from '@/shared/ui/cam-button'; interface WebcamSlopeListProps { className?: string; - list: SlopeConstant[]; - webcams: WebcamConstant[]; - onItemClick: ({ scale, id }: { scale: number; id: string }) => void; + slopes: Slope[]; + webcams: Webcam[]; + onItemClick: ({ scale, id }: { scale: number; id: number }) => void; } -const WebcamSlopeList = ({ className, list, webcams, onItemClick }: WebcamSlopeListProps) => { +const WebcamSlopeList = ({ className, slopes, webcams, onItemClick }: WebcamSlopeListProps) => { const { selectedSlope, setSelectedSlope, setSelectedCamera, setCloseCamera } = useSlopeStore(); return (
    - {list.map((item) => { + {slopes.map((item) => { + const isOpen = [item.isDayOperating, item.isMidnightOperating, item.isNightOperating].some( + (time) => time + ); return (
  • { - if (!item.isOpen) return; + if (!isOpen) return; if (selectedSlope === item.id) { setSelectedSlope(null); setSelectedCamera(null); } else { setSelectedSlope(item.id); - setSelectedCamera(item.webcamId); + setSelectedCamera(item.webcam); } setCloseCamera(); - if (item.webcamId) { - const webcam = webcams.find((webcam) => webcam.id === item.webcamId); + if (item.webcam) { + const webcam = webcams.find((webcam) => webcam.id === item.webcam); if (!webcam) return; onItemClick({ scale: webcam.scale, @@ -50,10 +53,10 @@ const WebcamSlopeList = ({ className, list, webcams, onItemClick }: WebcamSlopeL }} >
    -

    {item.name}

    - {item.webcamId && } +

    {item.name}

    + {item.webcam && }
    - +
    • ); })} From 92a060da6ffc2ca58441c3819a027953658d8a72 Mon Sep 17 00:00:00 2001 From: bananajeong <73640737+Najeong-Kim@users.noreply.github.com> Date: Thu, 28 Nov 2024 22:04:42 +0900 Subject: [PATCH 4/7] fix: change slope id --- src/entities/slope/model/model.d.ts | 18 +-- src/entities/slope/model/resorts/eden.tsx | 19 +-- .../slope/model/resorts/elysian-gangchon.tsx | 29 ++-- src/entities/slope/model/resorts/gonjiam.tsx | 25 ++-- src/entities/slope/model/resorts/high1.tsx | 38 +++--- src/entities/slope/model/resorts/jisan.tsx | 22 ++-- src/entities/slope/model/resorts/muju.tsx | 124 ++++++++---------- src/entities/slope/model/resorts/o2.tsx | 34 ++--- src/entities/slope/model/resorts/phoenix.tsx | 39 +++--- .../slope/model/resorts/vivaldipark.tsx | 25 ++-- .../slope/model/resorts/wellihilli.tsx | 63 ++++----- .../slope/model/resorts/yongpyong.tsx | 71 ++++------ 12 files changed, 209 insertions(+), 298 deletions(-) diff --git a/src/entities/slope/model/model.d.ts b/src/entities/slope/model/model.d.ts index 24159db..1ae6ded 100644 --- a/src/entities/slope/model/model.d.ts +++ b/src/entities/slope/model/model.d.ts @@ -1,19 +1,20 @@ export type Level = '초급' | '초중급' | '중급' | '중상급' | '상급' | '최상급' | '파크'; export type SlopeRaw = { - id: number; + slopeId: number; name: string; difficulty: Level; - isDayOperating: true; - isNightOperating: true; - isLateNightOperating: true; - isDawnOperating: true; - isMidnightOperating: true; + isDayOperating: boolean; + isNightOperating: boolean; + isLateNightOperating: boolean; + isDawnOperating: boolean; + isMidnightOperating: boolean; + webcamNo: number; }; export type WebcamRaw = { name: string; - number: 0; + number: number; description: string; url: string; }; @@ -44,11 +45,10 @@ export type WebcamConstant = { }; export type SlopeConstant = { - id: number | string; + id: number; PathAsset: ComponentType<{ color?: string; }>; - webcam?: number; }; export type Position = { diff --git a/src/entities/slope/model/resorts/eden.tsx b/src/entities/slope/model/resorts/eden.tsx index c8ff40e..486eefa 100644 --- a/src/entities/slope/model/resorts/eden.tsx +++ b/src/entities/slope/model/resorts/eden.tsx @@ -14,37 +14,32 @@ export const EDEN: ResortConstant = { MapComponent: MapImage, slopes: [ { - id: '베이직 슬로프', + id: 145, PathAsset: BasicSlopePath, - webcam: 1, }, { - id: '메인 슬로프', + id: 146, PathAsset: MainSlopePath, - webcam: 1, }, { - id: '쥬피터 슬로프', + id: 147, PathAsset: JupiterSlopePath, - webcam: 2, }, { - id: '새턴 슬로프', + id: 148, PathAsset: SaturnSlopePath, }, { - id: '우라누스 슬로프', + id: 149, PathAsset: UranusSlopePath, - webcam: 3, }, { - id: '머큐리 슬로프', + id: 150, PathAsset: MercurySlopePath, }, { - id: '비너스 슬로프', + id: 151, PathAsset: VenusSlopePath, - webcam: 1, }, ], webcams: [ diff --git a/src/entities/slope/model/resorts/elysian-gangchon.tsx b/src/entities/slope/model/resorts/elysian-gangchon.tsx index b326dca..db1c169 100644 --- a/src/entities/slope/model/resorts/elysian-gangchon.tsx +++ b/src/entities/slope/model/resorts/elysian-gangchon.tsx @@ -17,53 +17,44 @@ export const ELYSIAN_GANGCHON: ResortConstant = { MapComponent: ElysianGangchonMap, slopes: [ { - id: 'panda-slop', + id: 112, PathAsset: PandaSlopPath, - webcam: 2, }, { - id: 'rabbit-slop', + id: 113, PathAsset: RabbitSlopPath, - webcam: 2, }, { - id: 'dragon-slop', + id: 114, PathAsset: DragonSlopPath, - webcam: 1, }, { - id: 'horse-slop', + id: 115, PathAsset: HorseSlopPath, - webcam: 1, }, { - id: 'pegasus-slop', + id: 116, PathAsset: PegasusSlopPath, - webcam: 3, }, { - id: 'zebra-slop', + id: 117, PathAsset: ZebraSlopPath, - webcam: 3, }, { - id: 'deer-slop', + id: 118, PathAsset: DeerSlopPath, }, { - id: 'puma-slop', + id: 119, PathAsset: PumaSlopPath, - webcam: 1, }, { - id: 'leopard-slop', + id: 120, PathAsset: LeopardSlopPath, - webcam: 3, }, { - id: 'jaguar-slop', + id: 121, PathAsset: JaguarSlopPath, - webcam: 3, }, ], webcams: [ diff --git a/src/entities/slope/model/resorts/gonjiam.tsx b/src/entities/slope/model/resorts/gonjiam.tsx index e61310f..69a6290 100644 --- a/src/entities/slope/model/resorts/gonjiam.tsx +++ b/src/entities/slope/model/resorts/gonjiam.tsx @@ -17,49 +17,44 @@ export const GONJIAM: ResortConstant = { MapComponent: GonjiamMap, slopes: [ { - id: 'whynot-slop', + id: 1, PathAsset: WhynotSlopPath, - webcam: 2, }, { - id: 'gram1-slop', + id: 2, PathAsset: Gram1SlopPath, }, { - id: 'gram2-slop', + id: 3, PathAsset: Gram2SlopPath, }, { - id: 'cnp1-slop', + id: 4, PathAsset: CNP1SlopPath, - webcam: 3, }, { - id: 'cnp2-slop', + id: 5, PathAsset: CNP2SlopPath, }, { - id: 'thinkyou1-slop', + id: 6, PathAsset: Thinkyou1SlopPath, - webcam: 3, }, { - id: 'thinkyou2-slop', + id: 7, PathAsset: Thinkyou2SlopPath, - webcam: 2, }, { - id: 'thinkyou3-slop', + id: 8, PathAsset: Thinkyou3SlopPath, }, { - id: 'thinkyou-bridge-slop', + id: 9, PathAsset: ThinkyouBridgeSlopPath, }, { - id: 'whisen-slop', + id: 10, PathAsset: WhisenSlopPath, - webcam: 1, }, ], webcams: [ diff --git a/src/entities/slope/model/resorts/high1.tsx b/src/entities/slope/model/resorts/high1.tsx index 4422e04..1149077 100644 --- a/src/entities/slope/model/resorts/high1.tsx +++ b/src/entities/slope/model/resorts/high1.tsx @@ -23,73 +23,67 @@ export const HIGH1: ResortConstant = { MapComponent: High1Map, slopes: [ { - id: 'zeus1-slop', + id: 1, PathAsset: Zeus1SlopPath, }, { - id: 'zeus2-slop', + id: 2, PathAsset: Zeus2SlopPath, - webcam: 1, }, { - id: 'zeus3-slop', + id: 3, PathAsset: Zeus3SlopPath, - webcam: 13, }, { - id: 'zeus3-1-slop', + id: 4, PathAsset: Zeus3Sub1SlopPath, }, { - id: 'victoria1-slop', + id: 5, PathAsset: Victoria1SlopPath, - webcam: 12, }, { - id: 'victoria2-slop', + id: 6, PathAsset: Victoria2SlopPath, }, { - id: 'hera1-slop', + id: 8, PathAsset: Hera1SlopPath, }, { - id: 'hera2-slop', + id: 9, PathAsset: Hera2SlopPath, - webcam: 2, }, { - id: 'hera3-slop', + id: 10, PathAsset: Hera3SlopPath, }, { - id: 'apollo1-slop', + id: 11, PathAsset: Apollo1SlopPath, }, { - id: 'apollo2-slop', + id: 12, PathAsset: Apollo2SlopPath, }, { - id: 'apollo3-slop', + id: 13, PathAsset: Apollo3SlopPath, }, { - id: 'apollo4-slop', + id: 14, PathAsset: Apollo4SlopPath, - webcam: 15, }, { - id: 'apollo6-slop', + id: 16, PathAsset: Apollo6SlopPath, }, { - id: 'athena2-slop', + id: 18, PathAsset: Athena2SlopPath, - webcam: 6, }, { - id: 'athena3-slop', + id: 19, PathAsset: Athena3SlopPath, }, ], diff --git a/src/entities/slope/model/resorts/jisan.tsx b/src/entities/slope/model/resorts/jisan.tsx index 1a54690..d7e0ddf 100644 --- a/src/entities/slope/model/resorts/jisan.tsx +++ b/src/entities/slope/model/resorts/jisan.tsx @@ -15,42 +15,36 @@ export const JISAN: ResortConstant = { MapComponent: MapImage, slopes: [ { - id: 'lemon1-lift', + id: 32, PathAsset: Lemon1LiftPath, - webcam: 1, }, { - id: 'lemon1-1-lift', + id: 33, PathAsset: Lemon1Sub1LiftPath, }, { - id: 'orange2-lift', + id: 34, PathAsset: Orange2LiftPath, - webcam: 2, }, { - id: 'orange3-lift', + id: 35, PathAsset: Orange3LiftPath, - webcam: 3, }, { - id: 'new-orange-lift', + id: 36, PathAsset: NewOrangeLiftPath, }, { - id: 'blue-lift', + id: 37, PathAsset: BlueLiftPath, - webcam: 4, }, { - id: 'silver6-lift', + id: 38, PathAsset: Silver6LiftPath, - webcam: 5, }, { - id: 'silver7-lift', + id: 39, PathAsset: Silver7LiftPath, - webcam: 6, }, ], webcams: [ diff --git a/src/entities/slope/model/resorts/muju.tsx b/src/entities/slope/model/resorts/muju.tsx index a4bfadc..b8bbb61 100644 --- a/src/entities/slope/model/resorts/muju.tsx +++ b/src/entities/slope/model/resorts/muju.tsx @@ -5,24 +5,24 @@ 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 FlamingoPath from '../image/muju/flamingo-path'; import FreewayPath from '../image/muju/freeway-path'; -import Freeway2Path from '../image/muju/freeway2-path'; +// import Freeway2Path from '../image/muju/freeway2-path'; import MinuetPath from '../image/muju/minuet-path'; -import ModeratoPath from '../image/muju/moderato-path'; +// import ModeratoPath from '../image/muju/moderato-path'; import MozartPath from '../image/muju/mozart-path'; import PanoramaPath from '../image/muju/panorama-path'; import PolkaSlopePath from '../image/muju/polka-slope-path'; -import RGardnerSlopePath from '../image/muju/r-gardner-slope-path'; +// import RGardnerSlopePath from '../image/muju/r-gardner-slope-path'; import RaidersHighestPath from '../image/muju/raiders-highest-path'; import RaidersLowestPath from '../image/muju/raiders-lowest-path'; import RookiehillSlopePath from '../image/muju/rookiehill-slope-path'; -import RusutsuSlopePath from '../image/muju/rusutsu-slope-path'; -import ShortcutSlopePath from '../image/muju/shortcut-slope-path'; +// import RusutsuSlopePath from '../image/muju/rusutsu-slope-path'; +// import ShortcutSlopePath from '../image/muju/shortcut-slope-path'; import SilkroadPath from '../image/muju/silkroad-path'; import SoyokgihangPath from '../image/muju/soyokgihang-path'; import SpitchLowestPath from '../image/muju/spitch-lowest-path'; -import SpitchSlopePath from '../image/muju/spitch-slope-path'; +// import SpitchSlopePath from '../image/muju/spitch-slope-path'; import SundownSlopePath from '../image/muju/sundown-slope-path'; import TurboSlopePath from '../image/muju/turbo-slope-path'; import WaltzSlopePath from '../image/muju/waltz-slope-path'; @@ -34,127 +34,113 @@ export const MUJU: ResortConstant = { MapComponent: MujuMap, slopes: [ { - id: 'eastern-slope', + id: 74, PathAsset: EasternSlopePath, - webcam: 7, }, { - id: 'soyokgihang', + id: 75, PathAsset: SoyokgihangPath, - webcam: 5, }, { - id: 'spitch-lowest', + id: 76, PathAsset: SpitchLowestPath, - webcam: 8, }, { - id: 'western-slope', + id: 77, PathAsset: WesternSlopePath, }, { - id: 'sundown-slope', + id: 78, PathAsset: SundownSlopePath, - webcam: 6, }, { - id: 'silkroad', + id: 79, PathAsset: SilkroadPath, - webcam: 2, }, { - id: 'rookiehill-slope', + id: 80, PathAsset: RookiehillSlopePath, }, { - id: 'turbo-slope', + id: 81, PathAsset: TurboSlopePath, - webcam: 6, }, { - id: 'connection-slope', + id: 82, PathAsset: ConnectionSlopePath, }, { - id: 'minuet', + id: 83, PathAsset: MinuetPath, - webcam: 3, }, { - id: 'freeway', + id: 84, PathAsset: FreewayPath, - webcam: 5, }, { - id: 'yamaga-slope', + id: 85, PathAsset: YamagaSlopePath, - webcam: 5, }, { - id: 'panorama', + id: 86, PathAsset: PanoramaPath, }, { - id: 'raiders-lowest', + id: 87, PathAsset: RaidersLowestPath, }, { - id: 'mozart', + id: 88, PathAsset: MozartPath, - webcam: 3, }, { - id: 'waltz-slope', + id: 89, PathAsset: WaltzSlopePath, }, { - id: 'allegro', + id: 90, PathAsset: AllegroPath, - webcam: 1, }, { - id: 'raiders-highest', + id: 91, PathAsset: RaidersHighestPath, - webcam: 4, }, { - id: 'polka-slope', + id: 92, PathAsset: PolkaSlopePath, - webcam: 1, }, { - id: 'cadenza-slope', + id: 93, PathAsset: CadenzaSlopePath, - webcam: 1, - }, - { - id: 'shortcut-slope', - PathAsset: ShortcutSlopePath, - }, - { - id: 'spitch-slope', - PathAsset: SpitchSlopePath, - }, - { - id: 'flamingo', - PathAsset: FlamingoPath, - }, - { - id: 'moderato', - PathAsset: ModeratoPath, - }, - { - id: 'r-gardner-slope', - PathAsset: RGardnerSlopePath, - }, - { - id: 'freeway2', - PathAsset: Freeway2Path, - }, - { - id: 'rusutsu-slope', - PathAsset: RusutsuSlopePath, }, + // { + // id: 'shortcut-slope', + // PathAsset: ShortcutSlopePath, + // }, + // { + // id: 'spitch-slope', + // PathAsset: SpitchSlopePath, + // }, + // { + // id: 'flamingo', + // PathAsset: FlamingoPath, + // }, + // { + // id: 'moderato', + // PathAsset: ModeratoPath, + // }, + // { + // id: 'r-gardner-slope', + // PathAsset: RGardnerSlopePath, + // }, + // { + // id: 'freeway2', + // PathAsset: Freeway2Path, + // }, + // { + // id: 'rusutsu-slope', + // PathAsset: RusutsuSlopePath, + // }, ], webcams: [ { diff --git a/src/entities/slope/model/resorts/o2.tsx b/src/entities/slope/model/resorts/o2.tsx index f944238..4a236b3 100644 --- a/src/entities/slope/model/resorts/o2.tsx +++ b/src/entities/slope/model/resorts/o2.tsx @@ -20,64 +20,56 @@ export const O2: ResortConstant = { MapComponent: MapImage, slopes: [ { - id: 'dream-slope1', + id: 132, PathAsset: DreamSlope1Path, - webcam: 3, }, { - id: 'dream-slope2', + id: 133, PathAsset: DreamSlope2Path, }, { - id: 'head-slope', + id: 134, PathAsset: HeadSlopePath, }, { - id: 'happy-slope', + id: 135, PathAsset: HappySlopePath, - webcam: 1, }, { - id: 'glory-slope1', + id: 136, PathAsset: GlorySlope1Path, }, { - id: 'glory-slope2', + id: 137, PathAsset: GlorySlope2Path, }, { - id: 'glory-slope3', + id: 138, PathAsset: GlorySlope3Path, - webcam: 1, }, { - id: 'fashion-slope1', + id: 139, PathAsset: FashionSlope1Path, - webcam: 1, }, { - id: 'fashion-slope2', + id: 140, PathAsset: FashionSlope2Path, }, { - id: 'challenge-slope1', + id: 141, PathAsset: ChallengeSlope1Path, - webcam: 2, }, { - id: 'challenge-slope2', + id: 142, PathAsset: ChallengeSlope2Path, - webcam: 2, }, { - id: 'challenge-slope3', + id: 143, PathAsset: ChallengeSlope3Path, - webcam: 2, }, { - id: 'half-pipe', + id: 144, PathAsset: HalfPipePath, - webcam: 4, }, ], webcams: [ diff --git a/src/entities/slope/model/resorts/phoenix.tsx b/src/entities/slope/model/resorts/phoenix.tsx index 6868ba5..6a54731 100644 --- a/src/entities/slope/model/resorts/phoenix.tsx +++ b/src/entities/slope/model/resorts/phoenix.tsx @@ -22,72 +22,63 @@ export const PHOENIX: ResortConstant = { MapComponent: MapImage, slopes: [ { - id: 'sparrow', + id: 59, PathAsset: SparrowPath, - webcam: 6, }, { - id: 'penguin-slope', + id: 60, PathAsset: PenguinSlopePath, - webcam: 3, }, { - id: 'hawk-slope1', + id: 61, PathAsset: HawkSlope1Path, }, { - id: 'kiwi-slope', + id: 62, PathAsset: KiwiSlopePath, - webcam: 1, }, { - id: 'panorama', + id: 63, PathAsset: PanoramaPath, - webcam: 4, }, { - id: 'valley-slope', + id: 64, PathAsset: ValleySlopePath, - webcam: 5, }, { - id: 'hawk-slope2', + id: 65, PathAsset: HawkSlope2Path, }, { - id: 'duke-slope', + id: 66, PathAsset: DukeSlopePath, - webcam: 2, }, { - id: 'slope-style', + id: 67, PathAsset: SlopeStylePath, - webcam: 3, }, { - id: 'champion-slope', + id: 68, PathAsset: ChampionSlopePath, - webcam: 7, }, { - id: 'fantasy-slope', + id: 69, PathAsset: FantasySlopePath, }, { - id: 'diggy-slope', + id: 70, PathAsset: DiggySlopePath, - webcam: 5, }, { - id: 'mogul-slope', + id: 71, PathAsset: MogulSlopePath, }, { - id: 'paradise', + id: 72, PathAsset: ParadisePath, }, { - id: 'extreme-park', + id: 73, PathAsset: ExtremeParkPath, }, ], diff --git a/src/entities/slope/model/resorts/vivaldipark.tsx b/src/entities/slope/model/resorts/vivaldipark.tsx index 095f8a0..077d733 100644 --- a/src/entities/slope/model/resorts/vivaldipark.tsx +++ b/src/entities/slope/model/resorts/vivaldipark.tsx @@ -16,46 +16,39 @@ export const VIVALDIPARK: ResortConstant = { MapComponent: VivaldiparkMap, slopes: [ { - id: 'ballad-slop', + id: 122, PathAsset: BalladSlopPath, - webcam: 6, }, { - id: 'blues-slop', + id: 123, PathAsset: BluesSlopPath, - webcam: 9, }, { - id: 'hiphop-slop', + id: 124, PathAsset: HiphopSlopPath, - webcam: 4, }, { - id: 'classic-slop', + id: 125, PathAsset: ClassicSlopPath, - webcam: 3, }, { - id: 'reggae-slop', + id: 126, PathAsset: ReggaeSlopPath, }, { - id: 'jazz-slop', + id: 127, PathAsset: JazzSlopPath, - webcam: 8, }, { - id: 'funky-slop', + id: 128, PathAsset: FunkySlopPath, - webcam: 5, }, { - id: 'techno-slop', + id: 129, PathAsset: TechnoSlopPath, - webcam: 7, }, { - id: 'rock-slop', + id: 130, PathAsset: RockSlopPath, }, ], diff --git a/src/entities/slope/model/resorts/wellihilli.tsx b/src/entities/slope/model/resorts/wellihilli.tsx index a515577..d7e2ca4 100644 --- a/src/entities/slope/model/resorts/wellihilli.tsx +++ b/src/entities/slope/model/resorts/wellihilli.tsx @@ -13,8 +13,8 @@ import ChallengeSlope4Path from '../image/wellihilli/challenge-slope4-path'; import ChallengeSlope5Path from '../image/wellihilli/challenge-slope5-path'; import DeltaSlopePlusPath from '../image/wellihilli/delta-slope-plus-path'; import DeltaSlope1Path from '../image/wellihilli/delta-slope1-path'; -import DeltaSlope2Path from '../image/wellihilli/delta-slope2-path'; -import EchoSlopePlusPath from '../image/wellihilli/echo-slope-plus-path'; +// import DeltaSlope2Path from '../image/wellihilli/delta-slope2-path'; +// import EchoSlopePlusPath from '../image/wellihilli/echo-slope-plus-path'; import EchoSlope1Path from '../image/wellihilli/echo-slope1-path'; import EchoSlope2Path from '../image/wellihilli/echo-slope2-path'; import EchoSlope3Path from '../image/wellihilli/echo-slope3-path'; @@ -27,91 +27,84 @@ export const WELLIHILLI: ResortConstant = { MapComponent: WellihilliMap, slopes: [ { - id: 'alpha-slope1', + id: 94, PathAsset: AlphaSlope1Path, - webcam: 5, }, { - id: 'alpha-slope2', + id: 95, PathAsset: AlphaSlope2Path, - webcam: 4, }, { - id: 'alpha-slope3', + id: 96, PathAsset: AlphaSlope3Path, - webcam: 4, }, { - id: 'bravo-slope1', + id: 97, PathAsset: BravoSlope1Path, }, { - id: 'bravo-slope2', + id: 98, PathAsset: BravoSlope2Path, }, { - id: 'delta-slope1', + id: 99, PathAsset: DeltaSlope1Path, - webcam: 3, }, + // { + // id: 'delta-slope2', + // PathAsset: DeltaSlope2Path, + // }, { - id: 'delta-slope2', - PathAsset: DeltaSlope2Path, - webcam: 1, - }, - { - id: 'delta-slope-plus', + id: 100, PathAsset: DeltaSlopePlusPath, }, { - id: 'echo-slope1', + id: 101, PathAsset: EchoSlope1Path, }, { - id: 'echo-slope2', + id: 102, PathAsset: EchoSlope2Path, }, { - id: 'echo-slope3', + id: 103, PathAsset: EchoSlope3Path, }, + // { + // id: 'echo-slope-plus', + // PathAsset: EchoSlopePlusPath, + // }, { - id: 'echo-slope-plus', - PathAsset: EchoSlopePlusPath, - }, - { - id: 'challenge-slope1', + id: 104, PathAsset: ChallengeSlope1Path, }, { - id: 'challenge-slope2', + id: 105, PathAsset: ChallengeSlope2Path, }, { - id: 'challenge-slope3', + id: 106, PathAsset: ChallengeSlope3Path, }, { - id: 'challenge-slope4', + id: 107, PathAsset: ChallengeSlope4Path, }, { - id: 'challenge-slope5', + id: 108, PathAsset: ChallengeSlope5Path, }, { - id: 'star-express1', + id: 109, PathAsset: StarExpress1Path, }, { - id: 'star-express2', + id: 110, PathAsset: StarExpress2Path, - webcam: 1, }, { - id: 'half-pipe', + id: 111, PathAsset: HalfPipePath, - webcam: 2, }, ], webcams: [ diff --git a/src/entities/slope/model/resorts/yongpyong.tsx b/src/entities/slope/model/resorts/yongpyong.tsx index 2632303..77228eb 100644 --- a/src/entities/slope/model/resorts/yongpyong.tsx +++ b/src/entities/slope/model/resorts/yongpyong.tsx @@ -19,8 +19,8 @@ import Rainbow4Path from '../image/yongpyong/rainbow4-path'; import RedParadisePath from '../image/yongpyong/red-paradise-path'; import RedSlopePath from '../image/yongpyong/red-slope-path'; import SilverParadisePath from '../image/yongpyong/silver-paradise-path'; -import SilverSlopePath from '../image/yongpyong/silver-slope-path'; -import SummitLandTheGreenPath from '../image/yongpyong/summit-land-the-green-path'; +// import SilverSlopePath from '../image/yongpyong/silver-slope-path'; +// import SummitLandTheGreenPath from '../image/yongpyong/summit-land-the-green-path'; import YellowSlopePath from '../image/yongpyong/yellow-slope-path'; import type { ResortConstant } from '../model'; @@ -28,102 +28,89 @@ export const YONGPYONG: ResortConstant = { MapComponent: MapImage, slopes: [ { - id: 'gold-valley', + id: 40, PathAsset: GoldValleyPath, - webcam: 4, }, { - id: 'gold-paradise', + id: 41, PathAsset: GoldParadisePath, }, { - id: 'new-gold-slope', + id: 42, PathAsset: NewGoldSlopePath, - webcam: 4, }, { - id: 'gold-fantastic', + id: 43, PathAsset: GoldFantasticPath, - webcam: 4, }, { - id: 'red-paradise', + id: 44, PathAsset: RedParadisePath, - webcam: 6, }, { - id: 'red-slope', + id: 45, PathAsset: RedSlopePath, }, { - id: 'new-red-slope', + id: 46, PathAsset: NewRedSlopePath, - webcam: 6, }, { - id: 'blue-slope', + id: 47, PathAsset: BlueSlopePath, }, { - id: 'pink-slope', + id: 48, PathAsset: PinkSlopePath, - webcam: 7, }, { - id: 'yellow-slope', + id: 49, PathAsset: YellowSlopePath, }, { - id: 'new-yellow-slope', + id: 50, PathAsset: NewYellowSlopePath, - webcam: 8, }, + // { + // id: 'silver-slope', + // PathAsset: SilverSlopePath, + // }, { - id: 'silver-slope', - PathAsset: SilverSlopePath, - }, - { - id: 'silver-paradise', + id: 51, PathAsset: SilverParadisePath, }, { - id: 'rainbow-paradise', + id: 52, PathAsset: RainbowParadisePath, - webcam: 1, }, { - id: 'rainbow1', + id: 53, PathAsset: Rainbow1Path, - webcam: 3, }, { - id: 'rainbow2', + id: 54, PathAsset: Rainbow2Path, - webcam: 3, }, { - id: 'rainbow3', + id: 55, PathAsset: Rainbow3Path, - webcam: 3, }, { - id: 'rainbow4', + id: 56, PathAsset: Rainbow4Path, - webcam: 3, }, { - id: 'mega-green', + id: 57, PathAsset: MegaGreenPath, - webcam: 5, }, { - id: 'dragon-park', + id: 58, PathAsset: DragonParkPath, }, - { - id: 'summit-land-the-green', - PathAsset: SummitLandTheGreenPath, - }, + // { + // id: 'summit-land-the-green', + // PathAsset: SummitLandTheGreenPath, + // }, ], webcams: [ { From 6f138c302ef87c2d7303308ad9bcde0626bfd2f2 Mon Sep 17 00:00:00 2001 From: bananajeong <73640737+Najeong-Kim@users.noreply.github.com> Date: Thu, 28 Nov 2024 22:32:17 +0900 Subject: [PATCH 5/7] fix: update slope and webcam id connection --- src/features/slope/ui/slope-camera.tsx | 5 ++- .../resort-detail/ui/resort-detail-page.tsx | 38 ++++++++++++++----- .../slope-status/ui/slope-status-page.tsx | 2 +- .../webcam/ui/webcam-mobile-map-page.tsx | 2 +- src/widgets/webcam/ui/webcam-map.tsx | 2 +- src/widgets/webcam/ui/webcam-slope-list.tsx | 8 ++-- 6 files changed, 40 insertions(+), 17 deletions(-) diff --git a/src/features/slope/ui/slope-camera.tsx b/src/features/slope/ui/slope-camera.tsx index cb92635..d7b5430 100644 --- a/src/features/slope/ui/slope-camera.tsx +++ b/src/features/slope/ui/slope-camera.tsx @@ -89,7 +89,10 @@ const SlopeCamera = ({ selectedCamera.isOpen && selectedCamera.id === id && url && - createPortal(, containerRef.current)} + createPortal( + , + containerRef.current + )} ); }; diff --git a/src/views/resort-detail/ui/resort-detail-page.tsx b/src/views/resort-detail/ui/resort-detail-page.tsx index f15b745..3702d6f 100644 --- a/src/views/resort-detail/ui/resort-detail-page.tsx +++ b/src/views/resort-detail/ui/resort-detail-page.tsx @@ -17,8 +17,9 @@ import calculateWebcamPosition from '@/features/slope/lib/calculateWebcamPositio import { type ResortInfo, ResortData } from '@/entities/resort'; import { resortApi } from '@/entities/resort'; import { usePostVote } from '@/entities/resort/api/use-post-vote'; +import { slopeApi } from '@/entities/slope'; import { RESORT_DOMAIN } from '@/entities/slope/model'; -import type { Position } from '@/entities/slope/model'; +import type { Position, Slope, Webcam } from '@/entities/slope/model'; import CheckIcon from '@/shared/icons/check'; import { cn } from '@/shared/lib'; @@ -28,21 +29,40 @@ const ResortDetailPage = ({ params }: { params: { resortId: string } }) => { const resort = resortsData?.find((resort) => resort.resortId === +params?.resortId); const { data: voteData } = useQuery(resortApi.resortQueries.vote(+params?.resortId)); const data = RESORT_DOMAIN[resortInfo?.map as keyof typeof RESORT_DOMAIN]; + const { data: slopeRawData } = useQuery(slopeApi.slopeQueries.slope(+params?.resortId)); + const key = ResortData.find((resort) => resort.id === +params?.resortId) + ?.map as keyof typeof RESORT_DOMAIN; + const slopes = slopeRawData?.slopes + .filter((slope) => + RESORT_DOMAIN[key].slopes.find((slopeConstant) => slopeConstant.id === slope.slopeId) + ) + .map((slope) => ({ + ...slope, + ...RESORT_DOMAIN[key].slopes.find((slopeConstant) => slopeConstant.id === slope.slopeId), + })) as Slope[]; + const webcams = slopeRawData?.webcams + .filter((webcam) => + RESORT_DOMAIN[key].webcams.find((webcamConstant) => webcamConstant.id === webcam.number) + ) + .map((webcam) => ({ + ...webcam, + ...RESORT_DOMAIN[key].webcams.find((webcamConstant) => webcamConstant.id === webcam.number), + })) as Webcam[]; const [selectedTab, setSelectedTab] = useState('webcam'); const [showAppDownloadDialog, setShowAppDownloadDialog] = useState(true); const { mutateAsync } = usePostVote(+params?.resortId); const [isPositive, setIsPositive] = useState(true); const [cameraPositions, setCameraPositions] = useState<{ - [key: string]: Position; + [key: number]: Position; }>({}); const { ref, style, api, containerRef } = useMapPinch(); - const updateCameraPosition = useCallback((id: string, position: Position) => { + const updateCameraPosition = useCallback((id: number, position: Position) => { setCameraPositions((prev) => ({ ...prev, [id]: position })); }, []); - const handleFocusSlopCamClick = ({ id }: { id: string }) => { + const handleFocusSlopCamClick = ({ id }: { id: number }) => { const { width, height } = containerRef.current!.getBoundingClientRect(); const { boundedX, boundedY } = calculateWebcamPosition({ containerPosition: { left: 0, top: 0, width, height }, @@ -76,7 +96,7 @@ const ResortDetailPage = ({ params }: { params: { resortId: string } }) => { gtag('event', 'page_view_details', { detail_type: params?.resortId }); }, []); - if (!resortInfo || !resort) return; + if (!resortInfo || !resort || !slopes || !webcams) return; return (
    @@ -105,16 +125,16 @@ const ResortDetailPage = ({ params }: { params: { resortId: string } }) => { ref={ref} style={style} containerRef={containerRef} - slopes={data.slopes} - webcams={data.webcams} + slopes={slopes} + webcams={webcams} MapComponent={data.MapComponent} onCameraClick={handleFocusSlopCamClick} updateCameraPosition={updateCameraPosition} />
    diff --git a/src/views/slope-status/ui/slope-status-page.tsx b/src/views/slope-status/ui/slope-status-page.tsx index 1ac44fb..3b3c7bb 100644 --- a/src/views/slope-status/ui/slope-status-page.tsx +++ b/src/views/slope-status/ui/slope-status-page.tsx @@ -22,7 +22,7 @@ const SlopeStatusPage = ({ resortId }: { resortId: number }) => { () => slopeRawData?.slopes.map((slope) => ({ ...slope, - ...RESORT_DOMAIN[key].slopes.find((slopeConstant) => slopeConstant.id === slope.id), + ...RESORT_DOMAIN[key].slopes.find((slopeConstant) => slopeConstant.id === slope.slopeId), })) as Slope[], [slopeRawData, key] ); diff --git a/src/views/webcam/ui/webcam-mobile-map-page.tsx b/src/views/webcam/ui/webcam-mobile-map-page.tsx index e32c5b3..b9d8876 100644 --- a/src/views/webcam/ui/webcam-mobile-map-page.tsx +++ b/src/views/webcam/ui/webcam-mobile-map-page.tsx @@ -17,7 +17,7 @@ const WebCamMobileMapPage = ({ resortId }: { resortId?: number }) => { ?.map as keyof typeof RESORT_DOMAIN; const slopes = slopeRawData?.slopes.map((slope) => ({ ...slope, - ...RESORT_DOMAIN[key].slopes.find((slopeConstant) => slopeConstant.id === slope.id), + ...RESORT_DOMAIN[key].slopes.find((slopeConstant) => slopeConstant.id === slope.slopeId), })) as Slope[]; const webcams = slopeRawData?.webcams.map((webcam) => ({ ...webcam, diff --git a/src/widgets/webcam/ui/webcam-map.tsx b/src/widgets/webcam/ui/webcam-map.tsx index c0d3567..405842f 100644 --- a/src/widgets/webcam/ui/webcam-map.tsx +++ b/src/widgets/webcam/ui/webcam-map.tsx @@ -42,7 +42,7 @@ const WebcamMap = forwardRef(
    {webcams.map((webcam) => { - const slop = slopes.filter((slop) => slop.webcam === webcam.id); + const slop = slopes.filter((slop) => slop.webcamNo === webcam.number); // webcam을 띄워야 하는 slop를 찾음 return ( diff --git a/src/widgets/webcam/ui/webcam-slope-list.tsx b/src/widgets/webcam/ui/webcam-slope-list.tsx index f387975..8e3106d 100644 --- a/src/widgets/webcam/ui/webcam-slope-list.tsx +++ b/src/widgets/webcam/ui/webcam-slope-list.tsx @@ -39,11 +39,11 @@ const WebcamSlopeList = ({ className, slopes, webcams, onItemClick }: WebcamSlop setSelectedCamera(null); } else { setSelectedSlope(item.id); - setSelectedCamera(item.webcam); + setSelectedCamera(item.webcamNo); } setCloseCamera(); - if (item.webcam) { - const webcam = webcams.find((webcam) => webcam.id === item.webcam); + if (item.webcamNo) { + const webcam = webcams.find((webcam) => webcam.id === item.webcamNo); if (!webcam) return; onItemClick({ scale: webcam.scale, @@ -54,7 +54,7 @@ const WebcamSlopeList = ({ className, slopes, webcams, onItemClick }: WebcamSlop >

    {item.name}

    - {item.webcam && } + {item.webcamNo && }
    From 4b69551b6c24ae3fa6abae125c1e4776fa0b432a Mon Sep 17 00:00:00 2001 From: bananajeong <73640737+Najeong-Kim@users.noreply.github.com> Date: Thu, 28 Nov 2024 22:52:04 +0900 Subject: [PATCH 6/7] fix: connect slope list data --- src/features/slope/hooks/useSlopeStore.ts | 3 +-- src/features/slope/ui/slope-map.tsx | 6 +++-- src/features/slope/ui/slope-status-list.tsx | 6 ++--- .../slope-status/ui/slope-status-page.tsx | 14 +++++++--- .../webcam/ui/webcam-mobile-map-page.tsx | 26 ++++++++++++------- src/widgets/webcam/ui/webcam-slope-list.tsx | 2 +- 6 files changed, 36 insertions(+), 21 deletions(-) diff --git a/src/features/slope/hooks/useSlopeStore.ts b/src/features/slope/hooks/useSlopeStore.ts index b5e58e7..38ab527 100644 --- a/src/features/slope/hooks/useSlopeStore.ts +++ b/src/features/slope/hooks/useSlopeStore.ts @@ -1,7 +1,6 @@ import { create } from 'zustand'; -// TODO: 데이터 수정 후 SlopeId string 타입 삭제 -type SlopeId = string | number | null; +type SlopeId = number | null; type CameraId = number | null | undefined; interface SlopeState { diff --git a/src/features/slope/ui/slope-map.tsx b/src/features/slope/ui/slope-map.tsx index b24b078..62e6cc0 100644 --- a/src/features/slope/ui/slope-map.tsx +++ b/src/features/slope/ui/slope-map.tsx @@ -37,10 +37,12 @@ const SlopeMap = forwardRef( )} {slopes.map((slope) => ( -
    +
    diff --git a/src/features/slope/ui/slope-status-list.tsx b/src/features/slope/ui/slope-status-list.tsx index 80b50c5..4ad7c3d 100644 --- a/src/features/slope/ui/slope-status-list.tsx +++ b/src/features/slope/ui/slope-status-list.tsx @@ -14,7 +14,7 @@ interface SlopeStatusListProps { const SlopeStatusList = ({ resortId, slopes }: SlopeStatusListProps) => { const { selectedSlope, setSelectedSlope } = useSlopeStore(); - const handleSlopClick = ({ id }: { id: string }) => { + const handleSlopClick = ({ id }: { id: number }) => { gtag('event', 'details_slope_slope_click', { detail_type: resortId, slope_type: id }); setSelectedSlope(id); }; @@ -45,8 +45,8 @@ const SlopeStatusList = ({ resortId, slopes }: SlopeStatusListProps) => { {slopes?.map((slope) => ( handleSlopClick({ id: slope.name })} + className={cn(selectedSlope === slope.slopeId && 'bg-main-5')} + onClick={() => handleSlopClick({ id: slope.slopeId })} > {slope.name} diff --git a/src/views/slope-status/ui/slope-status-page.tsx b/src/views/slope-status/ui/slope-status-page.tsx index 3b3c7bb..3521345 100644 --- a/src/views/slope-status/ui/slope-status-page.tsx +++ b/src/views/slope-status/ui/slope-status-page.tsx @@ -20,13 +20,19 @@ const SlopeStatusPage = ({ resortId }: { resortId: number }) => { ?.map as keyof typeof RESORT_DOMAIN; const slopes = useMemo( () => - slopeRawData?.slopes.map((slope) => ({ - ...slope, - ...RESORT_DOMAIN[key].slopes.find((slopeConstant) => slopeConstant.id === slope.slopeId), - })) as Slope[], + slopeRawData?.slopes + .filter((slope) => + RESORT_DOMAIN[key].slopes.find((slopeConstant) => slopeConstant.id === slope.slopeId) + ) + .map((slope) => ({ + ...slope, + ...RESORT_DOMAIN[key].slopes.find((slopeConstant) => slopeConstant.id === slope.slopeId), + })) as Slope[], [slopeRawData, key] ); + if (!slopes) return; + return (
    diff --git a/src/views/webcam/ui/webcam-mobile-map-page.tsx b/src/views/webcam/ui/webcam-mobile-map-page.tsx index b9d8876..f196357 100644 --- a/src/views/webcam/ui/webcam-mobile-map-page.tsx +++ b/src/views/webcam/ui/webcam-mobile-map-page.tsx @@ -15,14 +15,22 @@ const WebCamMobileMapPage = ({ resortId }: { resortId?: number }) => { const { data: slopeRawData } = useQuery(slopeApi.slopeQueries.slope(resortId ?? 0)); const key = ResortData.find((resort) => resort.id === resortId) ?.map as keyof typeof RESORT_DOMAIN; - const slopes = slopeRawData?.slopes.map((slope) => ({ - ...slope, - ...RESORT_DOMAIN[key].slopes.find((slopeConstant) => slopeConstant.id === slope.slopeId), - })) as Slope[]; - const webcams = slopeRawData?.webcams.map((webcam) => ({ - ...webcam, - ...RESORT_DOMAIN[key].webcams.find((webcamConstant) => webcamConstant.id === webcam.number), - })) as Webcam[]; + const slopes = slopeRawData?.slopes + .filter((slope) => + RESORT_DOMAIN[key].slopes.find((slopeConstant) => slopeConstant.id === slope.slopeId) + ) + .map((slope) => ({ + ...slope, + ...RESORT_DOMAIN[key].slopes.find((slopeConstant) => slopeConstant.id === slope.slopeId), + })) as Slope[]; + const webcams = slopeRawData?.webcams + .filter((webcam) => + RESORT_DOMAIN[key].webcams.find((webcamConstant) => webcamConstant.id === webcam.number) + ) + .map((webcam) => ({ + ...webcam, + ...RESORT_DOMAIN[key].webcams.find((webcamConstant) => webcamConstant.id === webcam.number), + })) as Webcam[]; const [cameraPositions, setCameraPositions] = useState<{ [key: number]: Position; @@ -47,7 +55,7 @@ const WebCamMobileMapPage = ({ resortId }: { resortId?: number }) => { api.start({ scale: scale, x: boundedX, y: boundedY }); }; - if (!slopeRawData) return; + if (!slopes || !webcams) return; return (
    diff --git a/src/widgets/webcam/ui/webcam-slope-list.tsx b/src/widgets/webcam/ui/webcam-slope-list.tsx index 8e3106d..1bb0b9f 100644 --- a/src/widgets/webcam/ui/webcam-slope-list.tsx +++ b/src/widgets/webcam/ui/webcam-slope-list.tsx @@ -20,7 +20,7 @@ const WebcamSlopeList = ({ className, slopes, webcams, onItemClick }: WebcamSlop return (
      {slopes.map((item) => { - const isOpen = [item.isDayOperating, item.isMidnightOperating, item.isNightOperating].some( + const isOpen = [item.isDayOperating, item.isNightOperating, item.isLateNightOperating].some( (time) => time ); return ( From 885345f2f4b3c986469da1450b14e4d5f83af9bf Mon Sep 17 00:00:00 2001 From: bananajeong <73640737+Najeong-Kim@users.noreply.github.com> Date: Thu, 28 Nov 2024 22:59:02 +0900 Subject: [PATCH 7/7] fix: update close icon --- src/shared/icons/close.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/shared/icons/close.tsx b/src/shared/icons/close.tsx index 92ed540..c0f6206 100644 --- a/src/shared/icons/close.tsx +++ b/src/shared/icons/close.tsx @@ -8,19 +8,19 @@ interface CloseIconProps extends SVGProps { const CloseIcon = ({ className, ...args }: CloseIconProps) => { return ( );