fix: qa 대응 (#36)

* feat: 2배수 상수 빠져있던것 반영 * fix: 지도 사진 2배수로 변경 * fix: 웹캠 로딩 문구 노출
Nexters · Sep 9, 2024 · 7c38c4c · 7c38c4c
1 parent 1f0e5cc
commit 7c38c4c
Show file tree

Hide file tree

Showing 15 changed files with 41 additions and 38 deletions.
diff --git a/src/entities/slop/image/eden/map.tsx b/src/entities/slop/image/eden/map.tsx
diff --git a/src/entities/slop/image/elysian-gangchon/map.tsx b/src/entities/slop/image/elysian-gangchon/map.tsx
diff --git a/src/entities/slop/image/gonjiam/map.tsx b/src/entities/slop/image/gonjiam/map.tsx
diff --git a/src/entities/slop/image/high1/map.tsx b/src/entities/slop/image/high1/map.tsx
diff --git a/src/entities/slop/image/jisan/map.tsx b/src/entities/slop/image/jisan/map.tsx
diff --git a/src/entities/slop/image/muju/map.tsx b/src/entities/slop/image/muju/map.tsx
diff --git a/src/entities/slop/image/phoenix/map.tsx b/src/entities/slop/image/phoenix/map.tsx
diff --git a/src/entities/slop/image/vivaldipark/map.tsx b/src/entities/slop/image/vivaldipark/map.tsx
diff --git a/src/entities/slop/image/wellihilli/map.tsx b/src/entities/slop/image/wellihilli/map.tsx
diff --git a/src/entities/slop/image/yongpyong/map.tsx b/src/entities/slop/image/yongpyong/map.tsx
diff --git a/src/entities/slop/model/muju.tsx b/src/entities/slop/model/muju.tsx
@@ -246,7 +246,7 @@ export const MUJU: ResortInfo = {
         left: 'left-[47%]',
       },
       src: '/api/webcam?url=http://muju.live.cdn.cloudn.co.kr/mujuresort/_definst_/cam01.stream/playlist.m3u8',
-      scale: 1,
+      scale: 2,
     },
     {
       id: 'heidi-house',
@@ -256,7 +256,7 @@ export const MUJU: ResortInfo = {
         left: 'left-[70%]',
       },
       src: '/api/webcam?url=http://muju.live.cdn.cloudn.co.kr/mujuresort/_definst_/cam03.stream/playlist.m3u8',
-      scale: 1,
+      scale: 2,
     },
     {
       id: 'seolcheon-house',
@@ -266,7 +266,7 @@ export const MUJU: ResortInfo = {
         left: 'left-[28%]',
       },
       src: '/api/webcam?url=http://muju.live.cdn.cloudn.co.kr/mujuresort/_definst_/cam05.stream/playlist.m3u8',
-      scale: 1,
+      scale: 2,
     },
     {
       id: 'soyokgihang-sundown',
@@ -276,7 +276,7 @@ export const MUJU: ResortInfo = {
         left: 'left-[68%]',
       },
       src: '/api/webcam?url=http://muju.live.cdn.cloudn.co.kr/mujuresort/_definst_/cam04.stream/playlist.m3u8',
-      scale: 1,
+      scale: 2,
     },
     {
       id: 'seolcheonbong-summit',
@@ -286,7 +286,7 @@ export const MUJU: ResortInfo = {
         left: 'left-[37%]',
       },
       src: '/api/webcam?url=http://muju.live.cdn.cloudn.co.kr/mujuresort/_definst_/cam07.stream/playlist.m3u8',
-      scale: 1,
+      scale: 2,
     },
     {
       id: 'mozart-minuet',
@@ -296,7 +296,7 @@ export const MUJU: ResortInfo = {
         left: 'left-[27%]',
       },
       src: '/api/webcam?url=http://muju.live.cdn.cloudn.co.kr/mujuresort/_definst_/cam08.stream/playlist.m3u8',
-      scale: 1,
+      scale: 2,
     },
     {
       id: 'seolcheon-top-slope',
@@ -306,7 +306,7 @@ export const MUJU: ResortInfo = {
         left: 'left-[23%]',
       },
       src: '/api/webcam?url=http://muju.live.cdn.cloudn.co.kr/mujuresort/_definst_/cam06.stream/playlist.m3u8',
-      scale: 1,
+      scale: 2,
     },
     {
       id: 'mansunbong-summit',
@@ -316,7 +316,7 @@ export const MUJU: ResortInfo = {
         left: 'left-[51%]',
       },
       src: '/api/webcam?url=http://muju.live.cdn.cloudn.co.kr/mujuresort/_definst_/cam02.stream/playlist.m3u8',
-      scale: 1,
+      scale: 2,
     },
   ],
 };

diff --git a/src/entities/slop/model/yongpyong.tsx b/src/entities/slop/model/yongpyong.tsx
@@ -197,7 +197,7 @@ export const YONGPYONG: ResortInfo = {
         left: 'left-[17%]',
       },
       src: '/api/webcam?url=https://live.yongpyong.co.kr/Ycam1/cam15.stream/chunklist.m3u8',
-      scale: 1,
+      scale: 2,
     },
     {
       id: 'red-slope',
@@ -207,7 +207,7 @@ export const YONGPYONG: ResortInfo = {
         left: 'left-[29%]',
       },
       src: '/api/webcam?url=https://live.yongpyong.co.kr/Ycam1/cam03.stream/chunklist.m3u8',
-      scale: 1,
+      scale: 2,
     },
     {
       id: 'pink-slope',
@@ -216,7 +216,7 @@ export const YONGPYONG: ResortInfo = {
         top: 'top-[64%]',
         left: 'left-[33%]',
       },
-      scale: 1,
+      scale: 2,
     },
     {
       id: 'yellow-slope',
@@ -225,7 +225,7 @@ export const YONGPYONG: ResortInfo = {
         top: 'top-[71%]',
         left: 'left-[37%]',
       },
-      scale: 1,
+      scale: 2,
     },
     {
       id: 'rainbow-top',
@@ -235,7 +235,7 @@ export const YONGPYONG: ResortInfo = {
         left: 'left-[61%]',
       },
       src: '/api/webcam?url=https://live.yongpyong.co.kr/Ycam1/cam05.stream/chunklist.m3u8',
-      scale: 1,
+      scale: 2,
     },
     {
       id: 'rainbow-foreground',
@@ -245,7 +245,7 @@ export const YONGPYONG: ResortInfo = {
         left: 'left-[79%]',
       },
       src: '/api/webcam?url=https://live.yongpyong.co.kr/Ycam1/cam10.stream/chunklist.m3u8',
-      scale: 1,
+      scale: 2,
     },
     {
       id: 'mega-green-slope',
@@ -255,7 +255,7 @@ export const YONGPYONG: ResortInfo = {
         left: 'left-[56%]',
       },
       src: '/api/webcam?url=https://live.yongpyong.co.kr/Ycam1/cam07.stream/chunklist.m3u8',
-      scale: 1,
+      scale: 2,
     },
     {
       id: 'base-foreground',
@@ -264,7 +264,7 @@ export const YONGPYONG: ResortInfo = {
         top: 'top-[84%]',
         left: 'left-[34%]',
       },
-      scale: 1,
+      scale: 2,
     },
     {
       id: 'access-road',
@@ -273,7 +273,7 @@ export const YONGPYONG: ResortInfo = {
         top: 'top-[86%]',
         left: 'left-[26%]',
       },
-      scale: 1,
+      scale: 2,
     },
     {
       id: 'slope-top',
@@ -282,7 +282,7 @@ export const YONGPYONG: ResortInfo = {
         top: 'top-[26%]',
         left: 'left-[30%]',
       },
-      scale: 1,
+      scale: 2,
     },
   ],
 };
diff --git a/src/features/slop/ui/slop-video.tsx b/src/features/slop/ui/slop-video.tsx
@@ -61,7 +61,10 @@ const SlopVideo = ({ src, closeVideo }: SlopVideoProps) => {
     <div
       className={cn('absolute top-0 z-50 flex h-full w-full items-center justify-center bg-black')}
     >
-      <Loading />
+      <div className={cn('absolute flex h-[110px] flex-col items-center justify-between')}>
+        <Loading />
+        <p className={cn('body1-medium text-white')}>웹캠을 불러오고 있어요</p>
+      </div>
 
       <video
         playsInline

diff --git a/src/shared/ui/loading.tsx b/src/shared/ui/loading.tsx
@@ -7,7 +7,7 @@ interface LoadingProps {
 const Loading = ({ className }: LoadingProps) => {
   return (
     <div
-      className={cn('absolute h-4 w-4 animate-mulShdSpin rounded-full bg-black', className)}
+      className={cn('mt-[2em] h-4 w-4 animate-mulShdSpin rounded-full bg-black', className)}
     ></div>
   );
 };

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -107,35 +107,35 @@ const config = {
         mulShdSpin: {
           '0%, 100%': {
             boxShadow:
-              '0 -3em 0 0.2em #fff, 2em -2em 0 0em #fff, 3em 0 0 -1em #fff, 2em 2em 0 -1em #fff, 0 3em 0 -1em #fff, -2em 2em 0 -1em #fff, -3em 0 0 -1em #fff, -2em -2em 0 0 #fff',
+              '0 -2em 0 0.1em #fff, 1.5em -1.5em 0 0em #fff, 2em 0 0 -0.5em #fff, 1.5em 1.5em 0 -0.5em #fff, 0 2em 0 -0.5em #fff, -1.5em 1.5em 0 -0.5em #fff, -2em 0 0 -0.5em #fff, -1.5em -1.5em 0 0 #fff',
           },
           '12.5%': {
             boxShadow:
-              '0 -3em 0 0 #fff, 2em -2em 0 0.2em #fff, 3em 0 0 0 #fff, 2em 2em 0 -1em #fff, 0 3em 0 -1em #fff, -2em 2em 0 -1em #fff, -3em 0 0 -1em #fff, -2em -2em 0 -1em #fff',
+              '0 -2em 0 0 #fff, 1.5em -1.5em 0 0.1em #fff, 2em 0 0 0 #fff, 1.5em 1.5em 0 -0.5em #fff, 0 2em 0 -0.5em #fff, -1.5em 1.5em 0 -0.5em #fff, -2em 0 0 -0.5em #fff, -1.5em -1.5em 0 -0.5em #fff',
           },
           '25%': {
             boxShadow:
-              '0 -3em 0 -0.5em #fff, 2em -2em 0 0 #fff, 3em 0 0 0.2em #fff, 2em 2em 0 0 #fff, 0 3em 0 -1em #fff, -2em 2em 0 -1em #fff, -3em 0 0 -1em #fff, -2em -2em 0 -1em #fff',
+              '0 -2em 0 -0.25em #fff, 1.5em -1.5em 0 0 #fff, 2em 0 0 0.1em #fff, 1.5em 1.5em 0 0 #fff, 0 2em 0 -0.5em #fff, -1.5em 1.5em 0 -0.5em #fff, -2em 0 0 -0.5em #fff, -1.5em -1.5em 0 -0.5em #fff',
           },
           '37.5%': {
             boxShadow:
-              '0 -3em 0 -1em #fff, 2em -2em 0 -1em #fff, 3em 0 0 0 #fff, 2em 2em 0 0.2em #fff, 0 3em 0 0 #fff, -2em 2em 0 -1em #fff, -3em 0 0 -1em #fff, -2em -2em 0 -1em #fff',
+              '0 -2em 0 -0.5em #fff, 1.5em -1.5em 0 -0.5em #fff, 2em 0 0 0 #fff, 1.5em 1.5em 0 0.1em #fff, 0 2em 0 0 #fff, -1.5em 1.5em 0 -0.5em #fff, -2em 0 0 -0.5em #fff, -1.5em -1.5em 0 -0.5em #fff',
           },
           '50%': {
             boxShadow:
-              '0 -3em 0 -1em #fff, 2em -2em 0 -1em #fff, 3em 0 0 -1em #fff, 2em 2em 0 0 #fff, 0 3em 0 0.2em #fff, -2em 2em 0 0 #fff, -3em 0 0 -1em #fff, -2em -2em 0 -1em #fff',
+              '0 -2em 0 -0.5em #fff, 1.5em -1.5em 0 -0.5em #fff, 2em 0 0 -0.5em #fff, 1.5em 1.5em 0 0 #fff, 0 2em 0 0.1em #fff, -1.5em 1.5em 0 0 #fff, -2em 0 0 -0.5em #fff, -1.5em -1.5em 0 -0.5em #fff',
           },
           '62.5%': {
             boxShadow:
-              '0 -3em 0 -1em #fff, 2em -2em 0 -1em #fff, 3em 0 0 -1em #fff, 2em 2em 0 -1em #fff, 0 3em 0 0 #fff, -2em 2em 0 0.2em #fff, -3em 0 0 0 #fff, -2em -2em 0 -1em #fff',
+              '0 -2em 0 -0.5em #fff, 1.5em -1.5em 0 -0.5em #fff, 2em 0 0 -0.5em #fff, 1.5em 1.5em 0 -0.5em #fff, 0 2em 0 0 #fff, -1.5em 1.5em 0 0.1em #fff, -2em 0 0 0 #fff, -1.5em -1.5em 0 -0.5em #fff',
           },
           '75%': {
             boxShadow:
-              '0 -3em 0 -1em #fff, 2em -2em 0 -1em #fff, 3em 0 0 -1em #fff, 2em 2em 0 -1em #fff, 0 3em 0 -1em #fff, -2em 2em 0 0 #fff, -3em 0 0 0.2em #fff, -2em -2em 0 0 #fff',
+              '0 -2em 0 -0.5em #fff, 1.5em -1.5em 0 -0.5em #fff, 2em 0 0 -0.5em #fff, 1.5em 1.5em 0 -0.5em #fff, 0 2em 0 -0.5em #fff, -1.5em 1.5em 0 0 #fff, -2em 0 0 0.1em #fff, -1.5em -1.5em 0 0 #fff',
           },
           '87.5%': {
             boxShadow:
-              '0 -3em 0 0 #fff, 2em -2em 0 -1em #fff, 3em 0 0 -1em #fff, 2em 2em 0 -1em #fff, 0 3em 0 -1em #fff, -2em 2em 0 0 #fff, -3em 0 0 0 #fff, -2em -2em 0 0.2em #fff',
+              '0 -2em 0 0 #fff, 1.5em -1.5em 0 -0.5em #fff, 2em 0 0 -0.5em #fff, 1.5em 1.5em 0 -0.5em #fff, 0 2em 0 -0.5em #fff, -1.5em 1.5em 0 0 #fff, -2em 0 0 0 #fff, -1.5em -1.5em 0 0.1em #fff',
           },
         },
       },