feat: 0823 QA대응 (#31)

* fix: 웹캠 클릭 후 다른 슬로프 선택시 닫히도록 수정 - 비디오 열림과 선택된 웹캠을 전역상태로 분리 * feat: 윌리휠리 webcam 데이터 추가 * fix: stroke path 색상 버그해결 * fix: 주석 제거 * feat: hls 라이브러리 교체 * feat: iOS 대응 추가 * feat: 비디오 clean up 추가
Nexters · Aug 23, 2024 · 29b3ced · 29b3ced
1 parent f7d4a52
commit 29b3ced
Show file tree

Hide file tree

Showing 41 changed files with 161 additions and 129 deletions.
diff --git a/package.json b/package.json
@@ -20,12 +20,12 @@
     "@use-gesture/react": "^10.3.1",
     "autoprefixer": "^10.4.19",
     "class-variance-authority": "^0.7.0",
+    "hls.js": "^1.5.15",
     "next": "14.2.5",
     "next-themes": "^0.3.0",
     "nextjs-google-analytics": "^2.3.7",
     "react": "^18",
     "react-dom": "^18",
-    "react-hls-player": "^3.0.7",
     "sonner": "^1.5.0",
     "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss-animate": "^1.0.7",

diff --git a/src/entities/slop/image/elysian-gangchon/deer-slop-path.tsx b/src/entities/slop/image/elysian-gangchon/deer-slop-path.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { cn } from '@/shared/lib';
 
 const DeerSlopPath = ({ color }: { color?: string }) => {
-  const defaultStrokeColor = 'stroke-[#447EFF]';
-  const strokeColorClass = color ? color.replace('fill-', 'stroke-') : defaultStrokeColor;
+  const defaultStrokeColor = 'text-[#447EFF]';
+  const strokeColorClass = color ? color.replace('fill-', 'text-') : defaultStrokeColor;
   return (
     <svg
       width="100%"

diff --git a/src/entities/slop/image/elysian-gangchon/horse-slop-path.tsx b/src/entities/slop/image/elysian-gangchon/horse-slop-path.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { cn } from '@/shared/lib';
 
 const HorseSlopPath = ({ color }: { color?: string }) => {
-  const defaultStrokeColor = 'stroke-[#447EFF]';
-  const strokeColorClass = color ? color.replace('fill-', 'stroke-') : defaultStrokeColor;
+  const defaultStrokeColor = 'text-[#447EFF]';
+  const strokeColorClass = color ? color.replace('fill-', 'text-') : defaultStrokeColor;
 
   return (
     <svg

diff --git a/src/entities/slop/image/elysian-gangchon/puma-slop-path.tsx b/src/entities/slop/image/elysian-gangchon/puma-slop-path.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { cn } from '@/shared/lib';
 
 const PumaSlopPath = ({ color }: { color?: string }) => {
-  const defaultStrokeColor = 'stroke-[#447EFF]';
-  const strokeColorClass = color ? color.replace('fill-', 'stroke-') : defaultStrokeColor;
+  const defaultStrokeColor = 'text-[#447EFF]';
+  const strokeColorClass = color ? color.replace('fill-', 'text-') : defaultStrokeColor;
 
   return (
     <svg

diff --git a/src/entities/slop/image/high1/hera1-slop-path.tsx b/src/entities/slop/image/high1/hera1-slop-path.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { cn } from '@/shared/lib';
 
 const Hera1SlopPath = ({ color }: { color?: string }) => {
-  const defaultStrokeColor = 'stroke-[#447EFF]';
-  const strokeColorClass = color ? color.replace('fill-', 'stroke-') : defaultStrokeColor;
+  const defaultStrokeColor = 'text-[#447EFF]';
+  const strokeColorClass = color ? color.replace('fill-', 'text-') : defaultStrokeColor;
 
   return (
     <svg

diff --git a/src/entities/slop/image/muju/allegro-path.tsx b/src/entities/slop/image/muju/allegro-path.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { cn } from '@/shared/lib';
 
 const AllegroPath = ({ color }: { color?: string }) => {
-  const defaultStrokeColor = 'stroke-[#171D23]';
-  const strokeColorClass = color ? color.replace('fill-', 'stroke-') : defaultStrokeColor;
+  const defaultStrokeColor = 'text-[#171D23]';
+  const strokeColorClass = color ? color.replace('fill-', 'text-') : defaultStrokeColor;
   return (
     <svg
       width="100%"

diff --git a/src/entities/slop/image/muju/cadenza-slope-path.tsx b/src/entities/slop/image/muju/cadenza-slope-path.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { cn } from '@/shared/lib';
 
 const CadenzaSlopePath = ({ color }: { color?: string }) => {
-  const defaultStrokeColor = 'stroke-[#171D23]';
-  const strokeColorClass = color ? color.replace('fill-', 'stroke-') : defaultStrokeColor;
+  const defaultStrokeColor = 'text-[#171D23]';
+  const strokeColorClass = color ? color.replace('fill-', 'text-') : defaultStrokeColor;
   return (
     <svg
       width="100%"

diff --git a/src/entities/slop/image/muju/flamingo-path.tsx b/src/entities/slop/image/muju/flamingo-path.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { cn } from '@/shared/lib';
 
 const FlamingoPath = ({ color }: { color?: string }) => {
-  const defaultStrokeColor = 'stroke-[#447EFF]';
-  const strokeColorClass = color ? color.replace('fill-', 'stroke-') : defaultStrokeColor;
+  const defaultStrokeColor = 'text-[#447EFF]';
+  const strokeColorClass = color ? color.replace('fill-', 'text-') : defaultStrokeColor;
   return (
     <svg
       width="100%"

diff --git a/src/entities/slop/image/muju/freeway2-path.tsx b/src/entities/slop/image/muju/freeway2-path.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { cn } from '@/shared/lib';
 
 const Freeway2Path = ({ color }: { color?: string }) => {
-  const defaultStrokeColor = 'stroke-[#171D23]';
-  const strokeColorClass = color ? color.replace('fill-', 'stroke-') : defaultStrokeColor;
+  const defaultStrokeColor = 'text-[#171D23]';
+  const strokeColorClass = color ? color.replace('fill-', 'text-') : defaultStrokeColor;
   return (
     <svg
       width="100%"

diff --git a/src/entities/slop/image/muju/moderato-path.tsx b/src/entities/slop/image/muju/moderato-path.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { cn } from '@/shared/lib';
 
 const ModeratoPath = ({ color }: { color?: string }) => {
-  const defaultStrokeColor = 'stroke-[#171D23]';
-  const strokeColorClass = color ? color.replace('fill-', 'stroke-') : defaultStrokeColor;
+  const defaultStrokeColor = 'text-[#171D23]';
+  const strokeColorClass = color ? color.replace('fill-', 'text-') : defaultStrokeColor;
   return (
     <svg
       width="100%"

diff --git a/src/entities/slop/image/muju/mozart-path.tsx b/src/entities/slop/image/muju/mozart-path.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { cn } from '@/shared/lib';
 
 const MozartPath = ({ color }: { color?: string }) => {
-  const defaultStrokeColor = 'stroke-[#171D23]';
-  const strokeColorClass = color ? color.replace('fill-', 'stroke-') : defaultStrokeColor;
+  const defaultStrokeColor = 'text-[#171D23]';
+  const strokeColorClass = color ? color.replace('fill-', 'text-') : defaultStrokeColor;
   return (
     <svg
       width="100%"

diff --git a/src/entities/slop/image/muju/panorama-path.tsx b/src/entities/slop/image/muju/panorama-path.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { cn } from '@/shared/lib';
 
 const PanoramaPath = ({ color }: { color?: string }) => {
-  const defaultStrokeColor = 'stroke-[#171D23]';
-  const strokeColorClass = color ? color.replace('fill-', 'stroke-') : defaultStrokeColor;
+  const defaultStrokeColor = 'text-[#171D23]';
+  const strokeColorClass = color ? color.replace('fill-', 'text-') : defaultStrokeColor;
   return (
     <svg
       width="100%"

diff --git a/src/entities/slop/image/muju/polka-slope-path.tsx b/src/entities/slop/image/muju/polka-slope-path.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { cn } from '@/shared/lib';
 
 const PolkaSlopePath = ({ color }: { color?: string }) => {
-  const defaultStrokeColor = 'stroke-[#171D23]';
-  const strokeColorClass = color ? color.replace('fill-', 'stroke-') : defaultStrokeColor;
+  const defaultStrokeColor = 'text-[#171D23]';
+  const strokeColorClass = color ? color.replace('fill-', 'text-') : defaultStrokeColor;
   return (
     <svg
       width="100%"

diff --git a/src/entities/slop/image/muju/r-gardner-slope-path.tsx b/src/entities/slop/image/muju/r-gardner-slope-path.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { cn } from '@/shared/lib';
 
 const RGardnerSlopePath = ({ color }: { color?: string }) => {
-  const defaultStrokeColor = 'stroke-[#171D23]';
-  const strokeColorClass = color ? color.replace('fill-', 'stroke-') : defaultStrokeColor;
+  const defaultStrokeColor = 'text-[#171D23]';
+  const strokeColorClass = color ? color.replace('fill-', 'text-') : defaultStrokeColor;
   return (
     <svg
       width="100%"

diff --git a/src/entities/slop/image/muju/raiders-lowest-path.tsx b/src/entities/slop/image/muju/raiders-lowest-path.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { cn } from '@/shared/lib';
 
 const RaidersLowestPath = ({ color }: { color?: string }) => {
-  const defaultStrokeColor = 'stroke-[#447EFF]';
-  const strokeColorClass = color ? color.replace('fill-', 'stroke-') : defaultStrokeColor;
+  const defaultStrokeColor = 'text-[#447EFF]';
+  const strokeColorClass = color ? color.replace('fill-', 'text-') : defaultStrokeColor;
   return (
     <svg
       width="100%"

diff --git a/src/entities/slop/image/muju/rookiehill-slope-path.tsx b/src/entities/slop/image/muju/rookiehill-slope-path.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { cn } from '@/shared/lib';
 
 const RookiehillSlopePath = ({ color }: { color?: string }) => {
-  const defaultStrokeColor = 'stroke-[#447EFF]';
-  const strokeColorClass = color ? color.replace('fill-', 'stroke-') : defaultStrokeColor;
+  const defaultStrokeColor = 'text-[#447EFF]';
+  const strokeColorClass = color ? color.replace('fill-', 'text-') : defaultStrokeColor;
   return (
     <svg
       width="100%"

diff --git a/src/entities/slop/image/muju/rusutsu-slope-path.tsx b/src/entities/slop/image/muju/rusutsu-slope-path.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { cn } from '@/shared/lib';
 
 const RusutsuSlopePath = ({ color }: { color?: string }) => {
-  const defaultStrokeColor = 'stroke-[#171D23]';
-  const strokeColorClass = color ? color.replace('fill-', 'stroke-') : defaultStrokeColor;
+  const defaultStrokeColor = 'text-[#171D23]';
+  const strokeColorClass = color ? color.replace('fill-', 'text-') : defaultStrokeColor;
   return (
     <svg
       width="100%"

diff --git a/src/entities/slop/image/muju/shortcut-slope-path.tsx b/src/entities/slop/image/muju/shortcut-slope-path.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { cn } from '@/shared/lib';
 
 const ShortcutSlopePath = ({ color }: { color?: string }) => {
-  const defaultStrokeColor = 'stroke-[#171D23]';
-  const strokeColorClass = color ? color.replace('fill-', 'stroke-') : defaultStrokeColor;
+  const defaultStrokeColor = 'text-[#171D23]';
+  const strokeColorClass = color ? color.replace('fill-', 'text-') : defaultStrokeColor;
   return (
     <svg
       width="100%"

diff --git a/src/entities/slop/image/muju/soyokgihang-path.tsx b/src/entities/slop/image/muju/soyokgihang-path.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { cn } from '@/shared/lib';
 
 const SoyokgihangPath = ({ color }: { color?: string }) => {
-  const defaultStrokeColor = 'stroke-[#FF9928]';
-  const strokeColorClass = color ? color.replace('fill-', 'stroke-') : defaultStrokeColor;
+  const defaultStrokeColor = 'text-[#FF9928]';
+  const strokeColorClass = color ? color.replace('fill-', 'text-') : defaultStrokeColor;
   return (
     <svg
       width="100%"

diff --git a/src/entities/slop/image/muju/spitch-slope-path.tsx b/src/entities/slop/image/muju/spitch-slope-path.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { cn } from '@/shared/lib';
 
 const SpitchSlopePath = ({ color }: { color?: string }) => {
-  const defaultStrokeColor = 'stroke-[#171D23]';
-  const strokeColorClass = color ? color.replace('fill-', 'stroke-') : defaultStrokeColor;
+  const defaultStrokeColor = 'text-[#171D23]';
+  const strokeColorClass = color ? color.replace('fill-', 'text-') : defaultStrokeColor;
   return (
     <svg
       width="100%"

diff --git a/src/entities/slop/image/muju/western-slope-path.tsx b/src/entities/slop/image/muju/western-slope-path.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { cn } from '@/shared/lib';
 
 const WesternSlopePath = ({ color }: { color?: string }) => {
-  const defaultStrokeColor = 'stroke-[#447EFF]';
-  const strokeColorClass = color ? color.replace('fill-', 'stroke-') : defaultStrokeColor;
+  const defaultStrokeColor = 'text-[#447EFF]';
+  const strokeColorClass = color ? color.replace('fill-', 'text-') : defaultStrokeColor;
   return (
     <svg
       width="100%"

diff --git a/src/entities/slop/image/wellihilli/challenge-slope1-path.tsx b/src/entities/slop/image/wellihilli/challenge-slope1-path.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { cn } from '@/shared/lib';
 
 const ChallengeSlope1Path = ({ color }: { color?: string }) => {
-  const defaultStrokeColor = 'stroke-[#171D23]';
-  const strokeColorClass = color ? color.replace('fill-', 'stroke-') : defaultStrokeColor;
+  const defaultStrokeColor = 'text-[#171D23]';
+  const strokeColorClass = color ? color.replace('fill-', 'text-') : defaultStrokeColor;
   return (
     <svg
       width="100%"

diff --git a/src/entities/slop/image/wellihilli/echo-slope1-path.tsx b/src/entities/slop/image/wellihilli/echo-slope1-path.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { cn } from '@/shared/lib';
 
 const EchoSlope1Path = ({ color }: { color?: string }) => {
-  const defaultStrokeColor = 'stroke-[#FF9928]';
-  const strokeColorClass = color ? color.replace('fill-', 'stroke-') : defaultStrokeColor;
+  const defaultStrokeColor = 'text-[#FF9928]';
+  const strokeColorClass = color ? color.replace('fill-', 'text-') : defaultStrokeColor;
   return (
     <svg
       width="100%"

diff --git a/src/entities/slop/image/wellihilli/echo-slope2-path.tsx b/src/entities/slop/image/wellihilli/echo-slope2-path.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { cn } from '@/shared/lib';
 
 const EchoSlope2Path = ({ color }: { color?: string }) => {
-  const defaultStrokeColor = 'stroke-[#171D23]';
-  const strokeColorClass = color ? color.replace('fill-', 'stroke-') : defaultStrokeColor;
+  const defaultStrokeColor = 'text-[#171D23]';
+  const strokeColorClass = color ? color.replace('fill-', 'text-') : defaultStrokeColor;
   return (
     <svg
       width="100%"

diff --git a/src/entities/slop/image/wellihilli/echo-slope3-path.tsx b/src/entities/slop/image/wellihilli/echo-slope3-path.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { cn } from '@/shared/lib';
 
 const EchoSlope3Path = ({ color }: { color?: string }) => {
-  const defaultStrokeColor = 'stroke-[#171D23]';
-  const strokeColorClass = color ? color.replace('fill-', 'stroke-') : defaultStrokeColor;
+  const defaultStrokeColor = 'text-[#171D23]';
+  const strokeColorClass = color ? color.replace('fill-', 'text-') : defaultStrokeColor;
   return (
     <svg
       width="100%"

diff --git a/src/entities/slop/image/yongpyong/blue-slope-path.tsx b/src/entities/slop/image/yongpyong/blue-slope-path.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { cn } from '@/shared/lib';
 
 const BlueSlopePath = ({ color }: { color?: string }) => {
-  const defaultStrokeColor = 'stroke-[#303A45]';
-  const strokeColorClass = color ? color.replace('fill-', 'stroke-') : defaultStrokeColor;
+  const defaultStrokeColor = 'text-[#303A45]';
+  const strokeColorClass = color ? color.replace('fill-', 'text-') : defaultStrokeColor;
   return (
     <svg
       width="100%"

diff --git a/src/entities/slop/image/yongpyong/gold-paradise-path.tsx b/src/entities/slop/image/yongpyong/gold-paradise-path.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { cn } from '@/shared/lib';
 
 const GoldParadisePath = ({ color }: { color?: string }) => {
-  const defaultStrokeColor = 'stroke-[#447EFF]';
-  const strokeColorClass = color ? color.replace('fill-', 'stroke-') : defaultStrokeColor;
+  const defaultStrokeColor = 'text-[#447EFF]';
+  const strokeColorClass = color ? color.replace('fill-', 'text-') : defaultStrokeColor;
 
   return (
     <svg

diff --git a/src/entities/slop/image/yongpyong/new-red-slope-path.tsx b/src/entities/slop/image/yongpyong/new-red-slope-path.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { cn } from '@/shared/lib';
 
 const NewRedSlopePath = ({ color }: { color?: string }) => {
-  const defaultStrokeColor = 'stroke-[#303A45]';
-  const strokeColorClass = color ? color.replace('fill-', 'stroke-') : defaultStrokeColor;
+  const defaultStrokeColor = 'text-[#303A45]';
+  const strokeColorClass = color ? color.replace('fill-', 'text-') : defaultStrokeColor;
   return (
     <svg
       width="100%"

diff --git a/src/entities/slop/image/yongpyong/rainbow1-path.tsx b/src/entities/slop/image/yongpyong/rainbow1-path.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { cn } from '@/shared/lib';
 
 const Rainbow1Path = ({ color }: { color?: string }) => {
-  const defaultStrokeColor = 'stroke-[#303A45]';
-  const strokeColorClass = color ? color.replace('fill-', 'stroke-') : defaultStrokeColor;
+  const defaultStrokeColor = 'text-[#303A45]';
+  const strokeColorClass = color ? color.replace('fill-', 'text-') : defaultStrokeColor;
   return (
     <svg
       width="100%"

diff --git a/src/entities/slop/image/yongpyong/rainbow2-path.tsx b/src/entities/slop/image/yongpyong/rainbow2-path.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { cn } from '@/shared/lib';
 
 const Rainbow2Path = ({ color }: { color?: string }) => {
-  const defaultStrokeColor = 'stroke-[#303A45]';
-  const strokeColorClass = color ? color.replace('fill-', 'stroke-') : defaultStrokeColor;
+  const defaultStrokeColor = 'text-[#303A45]';
+  const strokeColorClass = color ? color.replace('fill-', 'text-') : defaultStrokeColor;
   return (
     <svg
       width="100%"

diff --git a/src/entities/slop/image/yongpyong/rainbow3-path.tsx b/src/entities/slop/image/yongpyong/rainbow3-path.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { cn } from '@/shared/lib';
 
 const Rainbow3Path = ({ color }: { color?: string }) => {
-  const defaultStrokeColor = 'stroke-[#303A45]';
-  const strokeColorClass = color ? color.replace('fill-', 'stroke-') : defaultStrokeColor;
+  const defaultStrokeColor = 'text-[#303A45]';
+  const strokeColorClass = color ? color.replace('fill-', 'text-') : defaultStrokeColor;
   return (
     <svg
       width="100%"

diff --git a/src/entities/slop/image/yongpyong/rainbow4-path.tsx b/src/entities/slop/image/yongpyong/rainbow4-path.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { cn } from '@/shared/lib';
 
 const Rainbow4Path = ({ color }: { color?: string }) => {
-  const defaultStrokeColor = 'stroke-[#303A45]';
-  const strokeColorClass = color ? color.replace('fill-', 'stroke-') : defaultStrokeColor;
+  const defaultStrokeColor = 'text-[#303A45]';
+  const strokeColorClass = color ? color.replace('fill-', 'texts-') : defaultStrokeColor;
   return (
     <svg
       width="100%"

diff --git a/src/entities/slop/image/yongpyong/summit-land-the-green-path.tsx b/src/entities/slop/image/yongpyong/summit-land-the-green-path.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { cn } from '@/shared/lib';
 
 const SummitLandTheGreenPath = ({ color }: { color?: string }) => {
-  const defaultStrokeColor = 'stroke-[#303A45]';
-  const strokeColorClass = color ? color.replace('fill-', 'stroke-') : defaultStrokeColor;
+  const defaultStrokeColor = 'text-[#303A45]';
+  const strokeColorClass = color ? color.replace('fill-', 'text-') : defaultStrokeColor;
   return (
     <svg
       width="100%"