[CHAT] 사이드바 UI 수정 및 채팅방 컴포넌트 생성

front/src/components/Chat/ChatRoomSideBar.tsx

@@ -0,0 +1,36 @@
+import React, { useCallback } from 'react'
+import useChatRoomStore from '../../store/useChatRoomStore'
+import { Box, styled } from '@mui/material';
+import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
+
+const ChatRoomSideBar = () => {
+  const setIsChatRoomShow = useChatRoomStore((state)=> state.setIsChatRoomShow);
+  const handleChatRoomClose = useCallback(()=>{
+    setIsChatRoomShow(false);
+  },[setIsChatRoomShow])
+
+
+  const DrawerHeader = styled("div")(({ theme }) => ({
+    display: "flex",
+    height: "8rem",
+    alignItems: "center",
+    padding: theme.spacing(0, 1),
+    ...theme.mixins.toolbar,
+    justifyContent: "flex-start",
+  }));
+
+  return (
+    <DrawerHeader >
+      <ArrowForwardIosIcon 
+      onClick={handleChatRoomClose} 
+      sx={{color:"white"}}
+      className="cursor-pointer"
+      />
+      <Box>
+        <div >다이렉트 메세지</div>
+      </Box>
+    </DrawerHeader>
+  )
+}
+
+export default ChatRoomSideBar

front/src/components/Layout/DropDown.tsx

@@ -0,0 +1,28 @@
+import { Box } from '@mui/material'
+import React, { useMemo } from 'react'
+
+interface DropDownProps{
+    dropDownItems : string[];
+}
+
+const DropDown: React.FC<DropDownProps> = ({dropDownItems}) => {
+
+    const dropDownList = useMemo(()=>{
+        return dropDownItems.map((item, index)=>{
+            return <li className='h-10 leading-10'>{item}</li>
+        })
+    },[dropDownItems])
+
+
+return (
+    <Box className='absolute top-11 right-0 w-32 h-auto z-50 bg-dark text-pink shadow-md'>
+        <ul className='flex flex-col items-center'>
+            {
+                dropDownList
+            }
+        </ul>
+    </Box>
+  )
+}
+
+export default DropDown

front/src/components/Layout/FriendsRightSideBar.tsx

@@ -1,59 +1,69 @@
 import {
-  Avatar,
-  Badge,
+  Box,
   Divider,
-  List,
-  ListItem,
-  ListItemAvatar,
-  ListItemText,
   styled,
+  TextField,
 } from "@mui/material";
 import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import { SideBarProps } from "../../types/layout";
-import React from "react";
-import MemberProfile from "../Profile/MemberProfile";
+import React, { useState } from "react";
+import DropDown from "../Layout/DropDown";
+import MemberList from "./MemberList";
+import { messageMemberList } from "../../utils/fakeData";
 
 const FriendsRightSideBar: React.FC<SideBarProps> = ({ close }) => {
   const DrawerHeader = styled("div")(({ theme }) => ({
     display: "flex",
+    height: "8rem",
     alignItems: "center",
     padding: theme.spacing(0, 1),
     ...theme.mixins.toolbar,
     justifyContent: "flex-start",
   }));
 
-  const [openProfile, setOpenProfile] = React.useState(false);
-  const handleOpen = () => setOpenProfile(true);
-  const handleClose = () => setOpenProfile(false);
+  const [openDropDown, setOpenDropDown] = useState(false);
+  const toggleDropDown = () => setOpenDropDown(!openDropDown);
+  const dropDownItems = ['디엠', '그룹', '전체 메세지']
+
   return (
     <>
-      <DrawerHeader>
-        <ArrowForwardIosIcon onClick={close} />
-        <div>친구목록</div>
+      <DrawerHeader className="flex-col">
+        <Box className="w-full flex py-3 px-1">
+          <ArrowForwardIosIcon onClick={close} className="cursor-pointer"/>
+          <Box className="w-full flex justify-between">
+            <div className="pl-1">친구 목록</div>
+            <Box className="relative">
+              { openDropDown?
+                <KeyboardArrowUpIcon 
+                  sx={{color: "purple"}}
+                  className="cursor-pointer" 
+                  onClick={toggleDropDown}
+                />:
+                <KeyboardArrowDownIcon className="cursor-pointer" onClick={toggleDropDown}/>
+              }
+              { openDropDown && 
+                <DropDown dropDownItems={dropDownItems}/>
+              }
+            </Box>
+          </Box>
+        </Box>
+        <TextField 
+          placeholder="친구 검색" 
+          variant="filled"
+          InputProps={{
+            sx: {
+              '& .MuiFilledInput-input': {
+                padding: '15px 12px 8px 12px', // 내부 input 요소의 패딩
+              },
+            }
+          }} 
+          sx={{paddingBottom: "1rem"}}
+          />
       </DrawerHeader>
       <Divider />
-      <List>
-        <ListItem>
-          <ListItemAvatar onClick={handleOpen}>
-            <Badge
-              color="success"
-              variant="dot"
-              overlap="circular"
-              anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
-            >
-              <Avatar
-                alt="user nickname"
-                src="https://images.unsplash.com/photo-1517849845537-4d257902454a?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-              />
-            </Badge>
-          </ListItemAvatar>
-          <ListItemText primary="민선님" />
-        </ListItem>
-      </List>
-      <MemberProfile
-        openModal={openProfile}
-        closeModal={handleClose}
-      ></MemberProfile>
+      <MemberList memberList={messageMemberList}/>
     </>
   );
 };

front/src/components/Layout/Header.tsx

@@ -5,6 +5,8 @@ import SupervisedUserCircleIcon from "@mui/icons-material/SupervisedUserCircle";
 import ChatBubbleIcon from "@mui/icons-material/ChatBubble";
 import FriendsRightSideBar from "./FriendsRightSideBar";
 import MessageRightSideBar from "./MessageRightSideBar";
+import ChatRoomSideBar from "../Chat/ChatRoomSideBar";
+import useChatRoomStore from "../../store/useChatRoomStore";
 
 interface AppBarProps extends MuiAppBarProps {
   open?: boolean;
@@ -14,6 +16,8 @@ const Header = () => {
   const DRAWER_WIDTH = 240; // 오른쪽 사이드바 넓이
   const [open, setOpen] = useState(false); // 사이드바 열고 닫힌 상태
   const [openDrawer, setOpenDrawer] = useState<string | null>(null); // 메세지 또는 친구 사이드바 상태
+  const IsChatRoomShow = useChatRoomStore(state=>state.isChatRoomShow);
+
 
   // 오른쪽 사이드바 오픈 핸들러
   const handleDrawerOpen = (sidebar: string) => {
@@ -85,6 +89,25 @@ const Header = () => {
         open={openDrawer === "message"}>
         <MessageRightSideBar close={handleDrawerClose} />
       </Drawer>
+
+
+      <Drawer
+      sx={{
+        width: DRAWER_WIDTH,
+        flexShrink: 0,
+        "& .MuiDrawer-paper": {
+          width: DRAWER_WIDTH,
+          backgroundColor: "#2A2F4F",
+          color: "white"
+        }, 
+      }}
+      variant="persistent"
+      anchor="right"
+      open={IsChatRoomShow}>
+      <ChatRoomSideBar />
+    </Drawer>
+
+
     </header>
   );
 };

front/src/components/Layout/MemberList.tsx

@@ -0,0 +1,33 @@
+import { List } from "@mui/material";
+import MemberListItem from "./MemberListItem";
+import MemberProfile from "../Profile/MemberProfile";
+import React from "react";
+import { Member } from "../../types/layout";
+
+interface MemberListProps{
+    memberList: Member[]
+}
+
+// TODO : 오른쪽 사이드바 멤버 리스트
+const MemberList : React.FC<MemberListProps> = ({memberList}) => {
+    const [openProfile, setOpenProfile] = React.useState(false);
+    const handleProfileOpen = () => setOpenProfile(true);
+    const handleProfileClose = () => setOpenProfile(false);
+
+    return (
+    <>
+        <List className="overflow-auto scrollbar-hide">
+            {memberList.map(member=>(
+                <MemberListItem member={member} handleProfileOpen = {handleProfileOpen}/>
+            ))}     
+        </List>
+        <MemberProfile
+            openModal={openProfile}
+            closeModal={handleProfileClose}
+        ></MemberProfile>
+    </>
+
+  )
+}
+
+export default MemberList

front/src/components/Layout/MemberListItem.tsx

@@ -0,0 +1,53 @@
+import { Member } from "../../types/layout"
+import {
+    Avatar,
+    Badge,
+    ListItem,
+    ListItemAvatar,
+    ListItemText,
+  } from "@mui/material";
+import useChatRoomStore from "../../store/useChatRoomStore";
+import { useCallback } from "react";
+interface MemberListItemProps{
+    member: Member;
+    handleProfileOpen : () => void;
+}
+
+const MemberListItem : React.FC<MemberListItemProps>= ({member, handleProfileOpen}) => {
+
+  const  setIsChatRoomShow = useChatRoomStore((state)=> state.setIsChatRoomShow);
+  const handleChatRoomOpen = useCallback(()=>{
+    setIsChatRoomShow(true)
+  },[setIsChatRoomShow])
+
+  return (
+    <div>
+        <ListItem sx={{'&:hover': {
+            backgroundColor: "#FDE2F3",
+            }
+        }}>
+            <ListItemAvatar onClick={handleProfileOpen}>
+                <Badge
+                color="success"
+                variant="dot"
+                overlap="circular"
+                sx={{cursor: "pointer"}}
+                anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+                >
+                <Avatar
+                alt="user nickname"
+                src={member.profilePath}
+                />
+                </Badge>
+            </ListItemAvatar>
+            <ListItemText 
+            primary={member.userName} 
+            sx={{cursor: "pointer"}}
+            onClick={handleChatRoomOpen}
+            />
+        </ListItem>
+    </div>
+  )
+}
+
+export default MemberListItem