#4 feat(button): 재생/일시정지 버튼 제작

src/App.tsx

@@ -1,17 +1,44 @@
-import React, { ReactElement, useRef } from "react";
+import PlayButton from "components/PlayButton";
+import React, { ReactElement, useRef, useState } from "react";
 import "./App.css";
 
 function App(): ReactElement {
+  const [playingState, setPalyingState] = useState(false);
   const videoRef = useRef<null | HTMLVideoElement>(null);
+
+  function playVideo(): void {
+    if (videoRef.current === null) return;
+    videoRef.current.play().catch(() => {
+      console.error("플레이가 불가능합니다.");
+    });
+    setPalyingState(true);
+  }
+
+  function pauseVideo() {
+    if (videoRef.current === null) return;
+    videoRef.current.pause();
+    setPalyingState(false);
+  }
+
+  function endVideo() {
+    setPalyingState(false);
+  }
+
   return (
     <div className="App">
-      <video ref={videoRef} muted>
+      <video ref={videoRef} onEnded={endVideo} muted>
         <source
-          id="mp4"
+          id="videoTestSoure"
           src="https://ak.picdn.net/shutterstock/videos/1056468215/preview/stock-footage-top-view-of-drop-falls-into-water-and-diverging-circles-of-water-on-white-background-in-slow-motion.webm"
           type="video/webm"
         />
       </video>
+      <br />
+      <PlayButton
+        playing={playingState}
+        playEvent={playVideo}
+        pauseEvent={pauseVideo}
+      />
     </div>
   );
 }

src/components/PlayButton.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+interface PlayButtonProps {
+  playing?: boolean;
+  playEvent?: () => void;
+  pauseEvent?: () => void;
+}
+
+function PlayButton({ playing, playEvent, pauseEvent }: PlayButtonProps) {
+  function clickPlayButton() {
+    if (playing === undefined || !playEvent || !pauseEvent) return;
+    if (playing) pauseEvent();
+    else playEvent();
+  }
+
+  return (
+    <button type="button" onClick={clickPlayButton}>
+      {playing ? "일시정지" : "재생"}
+    </button>
+  );
+}
+
+PlayButton.defaultProps = {
+  playing: undefined,
+  playEvent: undefined,
+  pauseEvent: undefined,
+};
+
+export default PlayButton;