[#3] feat: VideoModal-VideoSection UI implemented

src/components/VideoModal/UploaderSection/UploaderSection.tsx

@@ -2,6 +2,7 @@ import React, { useContext } from 'react';
 import styled, { ThemeContext } from 'styled-components';
 
 const UploaderSection = () => {
+  const themeStyle = useContext(ThemeContext);
   return <div>Hi</div>;
 };
 

src/components/VideoModal/VideoModal.tsx

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
 import styled, { ThemeContext } from 'styled-components';
+
 import VideoSection from './VideoSection';
 import UploaderSection from './UploaderSection';
 import CommentSection from './CommentSection';
@@ -45,11 +46,13 @@ const ModalContentWrapper = styled.div`
 
 const ModalLeftContent = styled.div`
   width: 100%;
+  position: relative;
 `;
 
 const ModalRightContent = styled.div`
   width: 100%;
   display: flex;
+  padding: 20px;
   flex-direction: column;
 `;
 

src/components/VideoModal/VideoSection/VideoSection.tsx

@@ -1,9 +1,63 @@
 import React, { useContext } from 'react';
 import styled, { ThemeContext } from 'styled-components';
-import SampleVideo from 'assets/video/shorts_1min.mp4';
+import sampleVideoUrl from 'assets/video/shorts_1min.mp4';
 
 const VideoSection = () => {
-  return <div>Hi</div>;
+  return (
+    <VideoWrapper>
+      <video
+        loop
+        muted
+        autoPlay
+        playsInline
+        style={{
+          width: '100%',
+          height: '100%',
+          position: 'absolute',
+          objectFit: 'cover',
+          zIndex: 0,
+        }}
+      >
+        <source src={sampleVideoUrl} type="video/mp4" />
+        <track kind="captions" />
+      </video>
+      <VideoController>
+        <PlayButton />
+        <VolumeButton />
+      </VideoController>
+    </VideoWrapper>
+  );
 };
 
+const VideoWrapper = styled.div`
+  height: 100%;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  border-radius: 5px 0 0 5px;
+`;
+
+const VideoController = styled.div`
+  position: absolute;
+  display: flex;
+  bottom: 20px;
+  width: 100%;
+  padding: 0 20px;
+  justify-content: space-between;
+`;
+
+const PlayButton = styled.div`
+  height: 24px;
+  width: 24px;
+  background: #fff;
+  cursor: pointer;
+`;
+
+const VolumeButton = styled.div`
+  height: 24px;
+  width: 24px;
+  background: #fff;
+  cursor: pointer;
+`;
+
 export default VideoSection;