컴포넌트 생성

src/components하위 Chat 폴더 생성

Chat폴더 하위에 아래 컴포넌트 생성

Chat.jsx

ChatHeader.jsx : 채널 정보 표시

ChatInput.jsx : 채팅 입력란

ChatMessage.jsx : 채팅 메시지

ChatHedaer.jsx

import { CardContent, Grid, Paper, Typography } from '@mui/material'
import React from 'react'

export default function ChatHeader({ channelInfo }) {
  return (
    <Grid component={Paper} variant="outlined">
      <CardContent>
        <Typography variant="h5"># {channelInfo?.name}</Typography>
        <Typography variant="body1">{channelInfo?.details}</Typography>
      </CardContent>
    </Grid>
  )
}

ChatInput.jsx

import { Grid, IconButton, InputAdornment, TextField } from '@mui/material'
import InsertEmoticonIcon from '@mui/icons-material/InsertEmoticon'
import ImageIcon from '@mui/icons-material/Image'
import SendIcon from '@mui/icons-material/Send'
import React from 'react'

export default function ChatInput() {
  return (
    <Grid container sx={{ p: '20px' }}>
      <Grid item xs={12} sx={{ position: 'relative' }}>
        <TextField
          InputProps={{
            startAdornment: (
              <InputAdornment position="start">
                <IconButton>
                  <InsertEmoticonIcon />
                </IconButton>
                <IconButton>
                  <ImageIcon />
                </IconButton>
              </InputAdornment>
            ),
            endAdornment: (
              <InputAdornment position="start">
                <IconButton>
                  <SendIcon />
                </IconButton>
              </InputAdornment>
            ),
          }}
          autoComplete="off"
          label="메세지 입력"
          fullWidth
        />
      </Grid>
    </Grid>
  )
}

ChatMessage.jsx

import {
  Avatar,
  Grid,
  ListItem,
  ListItemAvatar,
  ListItemText,
} from '@mui/material'
import React from 'react'

export default function ChatMessage() {
  return (
    <ListItem>
      <ListItemAvatar sx={{ alignSelf: 'stretch' }}>
        <Avatar
          variant="rounded"
          sx={{ width: 50, height: 50 }}
          alt="profileImage"
        />
      </ListItemAvatar>
      <Grid container sx={{ ml: 2 }}>
        <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'left' }}>
          <ListItemText
            sx={{ display: 'flex' }}
            primary={'닉네임'}
            primaryTypographyProps={{ fontWeight: 'bold', color: 'orange' }}
            secondary={'2023. 05.18'}
            secondaryTypographyProps={{ color: 'gray', ml: 1 }}
          />
        </Grid>
        <Grid item xs={12}>
          <ListItemText
            align="left"
            xs={{ wordBreak: 'break-all' }}
            primary={'채팅메시지'}
          />
          {/* TODO 이미지 추가 */}
          {/* <img alt="이미지" src="" style={{ maxWidth: '100%' }} /> */}
        </Grid>
      </Grid>
    </ListItem>
  )
}

Chat.jsx

import { Divider, Grid, List, Paper, Toolbar } from '@mui/material'
import React from 'react'
import ChatHeader from './ChatHeader'
import { useSelector } from 'react-redux'
import ChatInput from './ChatInput'
import ChatMessage from './ChatMessage'

export default function Chat() {
  // redux에서 채널명 가져오기
  const { channel } = useSelector(state => state)
  return (
    <>
      <Toolbar />
      <ChatHeader channelInfo={channel.currentChannel} />
      <Grid
        container
        component={Paper}
        variant="outlined"
        sx={{ mt: 3, position: 'relative' }}
      >
        <List
          sx={{
            height: 'calc(100vh - 350px)',
            overflow: 'scroll',
            width: '100%',
            position: 'relative',
          }}
        >
          <ChatMessage />
          <ChatMessage />
          <ChatMessage />
          <ChatMessage />
          <ChatMessage />
        </List>
        <Divider />
        <ChatInput />
      </Grid>
    </>
  )
}