From b258ac6ba728f60c8d51ca072542b2858350cc51 Mon Sep 17 00:00:00 2001
From: Changhyun-Hong <alex963@naver.com>
Date: Thu, 14 Nov 2024 16:38:35 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20space=EB=B0=94=EB=A1=9C=20=EC=9E=AC?=
 =?UTF-8?q?=EC=83=9D,=20=EC=A0=95=EC=A7=80=20=EC=95=84=EC=9D=B4=EC=BD=98?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/{ => icons}/custom_play_icon.svg   |  0
 frontend/src/assets/icons/live_pause_icon.svg | 12 +++++++
 frontend/src/assets/icons/pause_icon.svg      | 32 ++++---------------
 frontend/src/assets/icons/play_icon.svg       | 22 +++----------
 frontend/src/components/client/Player.tsx     | 29 +++++++++++++++--
 5 files changed, 49 insertions(+), 46 deletions(-)
 rename frontend/src/assets/{ => icons}/custom_play_icon.svg (100%)
 create mode 100644 frontend/src/assets/icons/live_pause_icon.svg

diff --git a/frontend/src/assets/custom_play_icon.svg b/frontend/src/assets/icons/custom_play_icon.svg
similarity index 100%
rename from frontend/src/assets/custom_play_icon.svg
rename to frontend/src/assets/icons/custom_play_icon.svg
diff --git a/frontend/src/assets/icons/live_pause_icon.svg b/frontend/src/assets/icons/live_pause_icon.svg
new file mode 100644
index 00000000..1a2d1b0d
--- /dev/null
+++ b/frontend/src/assets/icons/live_pause_icon.svg
@@ -0,0 +1,12 @@
+<svg focusable="false" xmlns="http://www.w3.org/2000/svg" width="95" height="95" viewBox="0 0 95 95" class="pzp-ui-icon__svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g fill="none" fill-rule="evenodd" stroke="none" stroke-width="1">
+    <g transform="translate(-181.000000, -81.000000)">
+      <g transform="translate(181.000000, 81.000000)">
+        <circle fill="#000000" cx="47.5" cy="47.5" r="47.5"></circle>
+        <g fill="#FFFFFF" transform="translate(29.785714, 29.785714)">
+          <rect x="0.0714285714" y="0.0714285714" width="35.2857143" height="35.2857143" rx="2"></rect>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/frontend/src/assets/icons/pause_icon.svg b/frontend/src/assets/icons/pause_icon.svg
index 7269d367..c1f14183 100644
--- a/frontend/src/assets/icons/pause_icon.svg
+++ b/frontend/src/assets/icons/pause_icon.svg
@@ -1,26 +1,6 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
- preserveAspectRatio="xMidYMid meet">
-
-<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
-fill="#000000" stroke="none">
-<path d="M2330 5110 c-199 -18 -464 -78 -649 -146 -237 -88 -529 -254 -727
--414 -101 -82 -302 -283 -384 -384 -160 -198 -326 -490 -414 -727 -124 -336
--178 -742 -146 -1097 19 -216 76 -470 146 -661 88 -237 254 -529 414 -727 82
--101 283 -302 384 -384 198 -160 490 -326 727 -414 336 -124 742 -178 1097
--146 216 19 470 76 661 146 237 88 529 254 727 414 101 82 302 283 384 384
-160 198 326 490 414 727 70 191 127 445 146 661 32 355 -22 761 -146 1097 -88
-237 -254 529 -414 727 -82 101 -283 302 -384 384 -198 160 -490 326 -727 414
--337 124 -747 178 -1109 146z m405 -510 c486 -46 924 -251 1269 -596 675 -676
-796 -1699 298 -2514 -157 -257 -415 -515 -672 -672 -544 -333 -1188 -397
--1778 -176 -279 104 -523 262 -736 474 -625 626 -781 1564 -390 2347 378 757
-1185 1214 2009 1137z"/>
-<path d="M1790 2560 l0 -1020 255 0 255 0 0 1020 0 1020 -255 0 -255 0 0
--1020z"/>
-<path d="M2820 2560 l0 -1020 255 0 255 0 0 1020 0 1020 -255 0 -255 0 0
--1020z"/>
-</g>
-</svg>
+<svg focusable="false" xmlns="http://www.w3.org/2000/svg" width="95" height="95" viewBox="0 0 77 77" class="pzp-ui-icon__svg">
+  <g fill="none" fill-rule="evenodd">
+    <circle cx="38.5" cy="38.5" r="38.5" fill="#000" opacity="1"></circle> 
+    <path fill="#FFF" d="M32.838 21.7a2 2 0 0 1 2 2v29.6a2 2 0 0 1-2 2H28.6a2 2 0 0 1-2-2V23.7a2 2 0 0 1 2-2h4.238zm15.562 0a2 2 0 0 1 2 2v29.6a2 2 0 0 1-2 2h-4.238a2 2 0 0 1-2-2V23.7a2 2 0 0 1 2-2H48.4z"></path>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/assets/icons/play_icon.svg b/frontend/src/assets/icons/play_icon.svg
index 9c7a2da9..ebeda792 100644
--- a/frontend/src/assets/icons/play_icon.svg
+++ b/frontend/src/assets/icons/play_icon.svg
@@ -1,18 +1,6 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
- preserveAspectRatio="xMidYMid meet">
-
-<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
-fill="#000000" stroke="none">
-<path d="M2255 4773 c-507 -68 -985 -319 -1345 -708 -404 -436 -628 -1062
--582 -1628 70 -858 500 -1526 1207 -1873 209 -102 415 -168 655 -209 129 -22
-467 -31 611 -16 776 80 1434 530 1756 1201 175 364 265 821 235 1189 -88 1059
--896 1910 -1945 2046 -148 19 -443 18 -592 -2z m-175 -1008 c123 -64 1772
--1023 1794 -1043 71 -67 89 -192 40 -283 -22 -39 -42 -59 -98 -93 -85 -53
--1667 -966 -1728 -998 -113 -59 -264 -4 -319 117 -18 38 -19 93 -19 1088 0
-1156 -4 1086 63 1155 73 76 185 100 267 57z"/>
-</g>
+<svg focusable="false" xmlns="http://www.w3.org/2000/svg" width="95" height="95" viewBox="0 0 77 77" class="pzp-ui-icon__svg">
+  <g fill="none" fill-rule="evenodd">
+    <circle cx="38.5" cy="38.5" r="38.5" fill="#000" opacity="1"></circle> 
+    <path fill="#FFF" d="M54.21 40.638L30.397 55.072a2.5 2.5 0 0 1-3.796-2.137v-28.87a2.5 2.5 0 0 1 3.796-2.138L54.21 36.362a2.5 2.5 0 0 1 0 4.276z"></path>
+  </g>
 </svg>
diff --git a/frontend/src/components/client/Player.tsx b/frontend/src/components/client/Player.tsx
index a0c6082f..62094fb9 100644
--- a/frontend/src/components/client/Player.tsx
+++ b/frontend/src/components/client/Player.tsx
@@ -3,7 +3,7 @@ import Hls from 'hls.js';
 import styled from 'styled-components';
 
 import playerLoading from '@assets/player_loading.gif';
-import CustomPlayIcon from '@assets/custom_play_icon.svg';
+import CustomPlayIcon from '@assets/icons/custom_play_icon.svg';
 import PauseIcon from '@assets/icons/pause_icon.svg';
 import PlayIcon from '@assets/icons/play_icon.svg';
 
@@ -58,14 +58,37 @@ const Player = ({ videoUrl }: { videoUrl: string }) => {
     }
   };
 
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.code === 'Space') {
+        e.preventDefault();
+        handlePlayPause();
+      }
+    };
+
+    const videoElement = videoRef.current;
+    videoElement?.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      videoElement?.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
   return (
     <PlayerContainer $onHLSReady={onHLSReady}>
       <LivePlayerInner>
         {onHLSReady ? (
           <>
-            <Video ref={videoRef} controls onClick={handlePlayPause} />
+            <Video
+              ref={videoRef}
+              controls
+              onClick={handlePlayPause}
+              tabIndex={0} // Video 요소가 포커스를 받을 수 있도록 설정
+            />
             {showIcon && (
-              <IconOverlay $isFullscreen={isFullscreen}>{isPaused ? <PlayIcon /> : <PauseIcon />}</IconOverlay>
+              <IconOverlay $isFullscreen={isFullscreen}>
+                {isPaused ? <PlayIcon /> : <PauseIcon />}
+              </IconOverlay>
             )}
           </>
         ) : (