feat: 팝업을 제외한 채팅방 컴포넌트 레이아웃 구현 완료

Author: gominzip

frontend/src/components/chat/ChatRoom.tsx

@@ -0,0 +1,47 @@
+import styled from 'styled-components';
+import ChatHeader from './ChatHeader';
+import ChatInput from './ChatInput';
+import ChatList from './ChatList';
+import ChatQuestionSection from './ChatQuestionSection';
+
+interface ChatRoomProps {}
+
+export const ChatRoom = ({}: ChatRoomProps) => {
+  return (
+    <ChatRoomContainer>
+      <ChatHeader />
+
+      <ChatQuestionSection />
+
+      <ChatListContainer>
+        <ChatList />
+      </ChatListContainer>
+
+      <ChatInputContainer>
+        <ChatInput type="normal" />
+      </ChatInputContainer>
+    </ChatRoomContainer>
+  );
+};
+export default ChatRoom;
+
+const ChatRoomContainer = styled.aside`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 380px;
+  border-left: 1px solid ${({ theme }) => theme.tokenColors['surface-alt']};
+  background: ${({ theme }) => theme.tokenColors['surface-default']};
+`;
+
+const ChatListContainer = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: end;
+  overflow-y: auto;
+`;
+
+const ChatInputContainer = styled.div`
+  padding: 10px 20px;
+`;

frontend/src/components/chat/LayerPopup.tsx

@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+
+interface LayerPopupProps {}
+
+export const LayerPopup = ({}: LayerPopupProps) => {
+  return (
+    <LayerPopupContainer>
+      <LayerPopupWrapper>
+        <LayerPopupButton>📢 채팅 규칙</LayerPopupButton>
+      </LayerPopupWrapper>
+    </LayerPopupContainer>
+  );
+};
+export default LayerPopup;
+
+const LayerPopupContainer = styled.div`
+  width: 262px;
+  background-color: #373a3f;
+  border-radius: 7px;
+  box-shadow: 0px 4px 4px 0px #3c444b3c;
+  padding: 5px;
+  gap: 1px;
+  ${({ theme }) => theme.tokenTypographys['display-bold14']}
+  color: ${({ theme }) => theme.tokenColors['color-white']};
+`;
+
+const LayerPopupWrapper = styled.div`
+  :hover {
+    background-color: #5e5e61;
+  }
+`;
+
+const LayerPopupButton = styled.button`
+  width: 100%;
+  text-align: start;
+  padding: 8px;
+  border-radius: 9px;
+  ${({ theme }) => theme.tokenTypographys['display-bold14']}
+  color: ${({ theme }) => theme.tokenColors['color-white']};
+  cursor: pointer;
+`;

frontend/src/components/chat/index.ts

@@ -0,0 +1 @@
+export { default as ChatRoom } from './ChatRoom';