[MODI-294] feat- 채팅리스트 페이지의 레이아웃 구현

src/Router.jsx

@@ -13,6 +13,7 @@ import PointChargePage from 'pages/PointChargePage';
 import NotFoundPage from './pages/NotFoundPage';
 import PrivateRoute from 'utils/PrivateRoute';
 import LoginAlertPage from 'pages/LoginAlertPage';
+import ChatPage from 'pages/ChatPage';
 
 const Router = () => {
   return (
@@ -68,6 +69,7 @@ const Router = () => {
           />
           <Route path="/needlogin" element={<LoginAlertPage />} />
           <Route path="*" element={<NotFoundPage />} />
+          <Route path="chat" element={<ChatPage />} />
         </Route>
       </Routes>
     </BrowserRouter>

src/components/Chat/ChatRoomList.jsx

@@ -0,0 +1,71 @@
+import { List } from '@mui/material';
+
+import ChatRoomListItem from './ChatRoomListItem';
+const CHAT_ROOM_LIST_DUMMY = {
+  chatListItemArray: [
+    {
+      partyId: 1,
+      ottName: '넷플릭스',
+      partyLeaderName: '조용한 사슴',
+      latestMessageText:
+        '오늘부터 공유계정의 비밀번호를 변경하였습니다. 확인부탁드립니다.',
+      countNotReadMessage: 100,
+    },
+    {
+      partyId: 2,
+      ottName: '쿠팡 플레이',
+      partyLeaderName: '살찐 고양이',
+      latestMessageText:
+        '비매너 행동을 하는 멤버가 있는 것 같은데 주의부탁드립니다. ',
+      countNotReadMessage: 3,
+    },
+    {
+      partyId: 3,
+      ottName: '라프텔',
+      partyLeaderName: '언짢은 강아지',
+      latestMessageText:
+        '오늘부터 같이 파티를 하게 되었네요! 잘 부탁드려요 ㅋㅋㅋ ',
+      countNotReadMessage: 0,
+    },
+    {
+      partyId: 4,
+      ottName: '아마존 프라임',
+      partyLeaderName: '조용한 사슴',
+      latestMessageText: '아 자꾸 비매너 행동하시는데 계속 이러시면 신고합니다',
+      countNotReadMessage: 122,
+    },
+    {
+      partyId: 1,
+      ottName: '웨이브',
+      partyLeaderName: '좋은 카멜레온',
+      latestMessageText: '혹시 지금 저만 계정 접속이 안되나요??',
+      countNotReadMessage: 83,
+    },
+  ],
+};
+
+const ChatRoomList = () => {
+  return (
+    <List>
+      {CHAT_ROOM_LIST_DUMMY.chatListItemArray.map(
+        ({
+          partyId,
+          ottName,
+          partyLeaderName,
+          latestMessageText,
+          countNotReadMessage,
+        }) => (
+          <ChatRoomListItem
+            key={partyId}
+            ottName={ottName}
+            partyLeaderName={partyLeaderName}
+            latestMessageText={latestMessageText}
+            countNotReadMessage={countNotReadMessage}
+          />
+        ),
+      )}
+    </List>
+  );
+};
+
+export default ChatRoomList;

src/components/Chat/ChatRoomListItem.jsx

@@ -0,0 +1,105 @@
+import {
+  Badge,
+  Box,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  ListItemButton,
+  Typography,
+} from '@mui/material';
+import OttLogo from 'components/Ott/OttLogo';
+import PropTypes from 'prop-types';
+
+const ChatRoomListItem = ({
+  ottName,
+  partyLeaderName,
+  latestMessageText,
+  countNotReadMessage,
+}) => {
+  const textOverflowEllipsisSx = {
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+  };
+
+  return (
+    <>
+      <ListItem disableGutters disablePadding divider>
+        <ListItemButton
+          sx={{
+            width: '100%',
+            background: 'transparent',
+            pt: 2,
+            pb: 2,
+          }}
+        >
+          <ListItemAvatar>
+            <OttLogo ottName={ottName} size={45} />
+          </ListItemAvatar>
+          <ListItemText
+            disableTypography
+            sx={{
+              width: '100%',
+            }}
+          >
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+              }}
+            >
+              <Box
+                sx={{
+                  width: '80%',
+                }}
+              >
+                <Typography
+                  variant="smallB"
+                  component="div"
+                  mb={0.5}
+                  sx={textOverflowEllipsisSx}
+                >
+                  {`${partyLeaderName}의 ${ottName}`}
+                </Typography>
+                <Typography
+                  variant="micro"
+                  component="div"
+                  sx={textOverflowEllipsisSx}
+                >
+                  {latestMessageText}
+                </Typography>
+              </Box>
+              <Badge
+                badgeContent={countNotReadMessage}
+                color="primary"
+                sx={{
+                  mr: 2,
+                }}
+              />
+            </Box>
+          </ListItemText>
+        </ListItemButton>
+      </ListItem>
+    </>
+  );
+};
+
+ChatRoomListItem.propTypes = {
+  ottName: PropTypes.oneOf([
+    '넷플릭스',
+    '왓챠',
+    '웨이브',
+    '티빙',
+    '디즈니 플러스',
+    '라프텔',
+    '쿠팡 플레이',
+    '아마존 프라임',
+    '',
+  ]),
+  partyLeaderName: PropTypes.string,
+  latestMessageText: PropTypes.string,
+  countNotReadMessage: PropTypes.number,
+};
+
+export default ChatRoomListItem;

src/pages/ChatPage.jsx

@@ -0,0 +1,17 @@
+import ChatRoomList from 'components/Chat/ChatRoomList';
+import PageContainer from 'components/Common/PageContainer';
+import PageContents from 'components/Common/PageContents';
+import PageHeader from 'components/Common/PageHeader';
+
+const ChatPage = () => {
+  return (
+    <PageContainer>
+      <PageHeader title="메세지" />
+      <PageContents>
+        <ChatRoomList />
+      </PageContents>
+    </PageContainer>
+  );
+};
+
+export default ChatPage;