[FE] feat: 참여자가 없는 비디오 페이지 기본 레이아웃 구현 (#74)

Author: zelkovaria

src/frontend/src/pages/VideoPage/index.tsx

@@ -0,0 +1,24 @@
+import { useState } from 'react';
+
+import { BodyRegularText, TitleText1 } from '@/styles/Typography';
+
+import * as S from './styles';
+
+const VideoPage = () => {
+  const [isAttend, setIsAttend] = useState(false);
+
+  return (
+    <S.VideoPage>
+      {isAttend ? (
+        <>참여시 비디오들</>
+      ) : (
+        <S.EmptyParticipant>
+          <TitleText1>채널 이름</TitleText1>
+          <BodyRegularText>현재 음성 채널에 아무도 없어요</BodyRegularText>
+        </S.EmptyParticipant>
+      )}
+    </S.VideoPage>
+  );
+};
+
+export default VideoPage;

src/frontend/src/pages/VideoPage/styles.ts

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+export const VideoPage = styled.div`
+  display: flex;
+  width: 100%;
+  color: white;
+`;
+
+export const EmptyParticipant = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+`;