feat: 페이지별 채팅 컴포넌트 추가 및 레이아웃 조정

Author: gominzip

frontend/src/components/client/ClientView.tsx

@@ -18,6 +18,9 @@ const ClientView = () => {
 export default ClientView;
 
 const ClientViewContainer = styled.main`
-  padding: 0 24px;
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 60px;
   background-color: ${({ theme }) => theme.tokenColors['surface-default']};
+  scrollbar-width: none;
 `;

frontend/src/components/client/Header.tsx

@@ -7,8 +7,10 @@ const Header = () => {
 export default Header;
 
 const HeaderContainer = styled.div`
-  display: flex;
+  width: 100%;
   height: 60px;
-  padding: 0 60px;
+  position: fixed;
+  display: flex;
   background-color: ${({ theme }) => theme.tokenColors['surface-default']};
+  z-index: 11000;
 `;

frontend/src/components/client/Player.tsx

@@ -7,7 +7,7 @@ import CustomPlayIcon from '@assets/custom_play_icon.svg';
 import PauseIcon from '@assets/icons/pause_icon.svg';
 import PlayIcon from '@assets/icons/play_icon.svg';
 
-const Player = ({ videoUrl }: { videoUrl: string; }) => {
+const Player = ({ videoUrl }: { videoUrl: string }) => {
   const [onHLSReady, setOnHLSReady] = useState(false);
   const [isPaused, setIsPaused] = useState(false);
   const [showIcon, setShowIcon] = useState(false);

frontend/src/components/host/Header.tsx

@@ -9,8 +9,11 @@ export default function Header() {
 }
 
 const Container = styled.header`
+  width: 100%;
+  height: 60px;
+  position: fixed;
   background-color: #222222;
-  padding: 10px 20px;
   color: #fff;
   font-weight: bold;
+  z-index: 11000;
 `;

frontend/src/components/host/Setting.tsx

@@ -18,5 +18,6 @@ export default function Setting() {
 }
 
 const Container = styled.main`
-  flex: 7;
+  flex: 1;
+  overflow-y: auto;
 `;

frontend/src/index.css

@@ -17,6 +17,7 @@ body,
 #root {
   height: 100%;
   margin: 0;
+  background-color: #141517;
 }
 
 body {

frontend/src/pages/ClientPage.tsx

@@ -1,21 +1,24 @@
 import styled from 'styled-components';
 
-import { Chat, ClientView, Header } from '@components/client';
+import { ClientView, Header } from '@components/client';
+import { ChatRoom } from '@components/chat';
 
 export default function ClientPage() {
   return (
     <>
       <Header />
       <ClientContainer>
         <ClientView />
-        <Chat />
+        <ChatRoom />
       </ClientContainer>
     </>
   );
 }
 
 const ClientContainer = styled.div`
+  box-sizing: border-box;
+  padding: 60px 10px 0 10px;
+  height: 100%;
   display: flex;
-  justify-content: center;
-  background-color: ${({ theme }) => theme.tokenColors['surface-default']};
+  background-color: ${({ theme }) => theme.tokenColors['susrface-default']};
 `;

frontend/src/pages/HostPage.tsx

@@ -1,4 +1,5 @@
-import { Setting, Chat, Header } from '@components/host';
+import { ChatRoom } from '@components/chat';
+import { Setting, Header } from '@components/host';
 import styled from 'styled-components';
 
 export default function HostPage() {
@@ -7,12 +8,15 @@ export default function HostPage() {
       <Header />
       <FlexContainer>
         <Setting />
-        <Chat />
+        <ChatRoom />
       </FlexContainer>
     </>
   );
 }
 
 const FlexContainer = styled.div`
+  box-sizing: border-box;
+  height: 100%;
   display: flex;
+  padding-top: 60px;
 `;