React 채팅방 css

React 프로젝트에서 채팅방을 구현했다.

1. dummy data

const [test, setTest] = useState([
    {type: 0, content: "1", day: getDate(new Date()), time: getTime(new Date())}, 
    {type:1, content: "2", day: getDate(new Date()), time: getTime(new Date())}, 
    {type: 0, content: "3", day: getDate(new Date()), time: getTime(new Date())}, 
    {type: 1, content: "안녕하세요", day: getDate(new Date()), time: getTime(new Date())}
  ]);

위와 같이 변수를 설정하고 dummy data를 넣어줬다. 채팅창에 메시지를 전송할 때마다 test array에 메시지를 추가한다.

setTest((val) => 
	[...val, 
    	{type: 0, content: message, day: getDate(new Date()), time: getTime(new Date())}
    ])

 

2. function return

map을 이용해서 "test" array에 들어있는 메시지들을 하나씩 빼낸다. 이때, 내가 쓴 채팅과 상대방이 쓴 채팅을 구분해야 하는데 그것은 type으로 구분한다. type=0이면 내(parent)가 쓴 채팅, type=1이면 상대방(child)이 쓴 채팅이다.

따라서 아래 코드와 같이 조건문을 활용해서 화면에 출력하고자 한다.

내 채팅은 오른쪽, 상대방 채팅은 왼쪽에 띄워지게 하고 싶었고 그래서 내 채팅은 display: "flex", justifyContent: "flex-end"로 설정했다.

alignItems: "flex-end"로 설정한 이유는 메세지 옆에 현재 시간을 띄우는데, 밑 라인을 일치시키고 싶어서이다.

<div>
    {test.map((data, idx) => {
      return (
        <div key={idx}>
          {data.type === 0
          ? <div style={{display: "flex", justifyContent: "flex-end", alignItems: "flex-end"}}>
              <span className="talk__time">{data.time}</span>
              <span className="parent__chat">{data.content}</span>
            </div>
          : <div style={{display: "flex", alignItems: "flex-end"}}>
              <span className="child__chat">{data.content}</span>
              <span className="talk__time">{data.time}</span>
            </div>
          }
        </div>
      )
    })}
  </div>

 

3. class for css

그럼 이제 "parent__chat", "child__chat" class에 대해 알아보자.

처음에는 parent__chat에서 float: right, child__chat에서 float: left로 설정했다. 하지만 이렇게 하니까 span이 먹히지 않아 채팅 내용이 한 줄 통채로 들어갔다.

parent__chat, child__chat 내부에 display: flex, justify-content: flex-end 등과 같은 코드를 적용시켜보려고 했지만 채팅 내부에 flex가 생기는 것이기 때문에 아무 소용이 없었다. 결국 채팅의 상위 태그의 flex 설정이 바뀌어야 했다.

따라서 위 2번의 코드를 보면 채팅이 있는 span tag 위에 div tag를 하나 더 달아서 flex 값을 채팅 주체에 따라 다르게 설정한 것을 알 수 있다.

그 외의 css로는 내 채팅일 때는 text-align: right 으로 설정한 것이 있다.

.parent__chat {
    font-family: ${props => props.theme.pretendard};
    font-size: 16px;
    text-align: right;
    display: inline-block;

    margin: 5px;
    padding: 5px 8px;
    border-radius: 5px;
    box-shadow: 3px 3px 3px #dbdbdb;
    background-color: #f7f3c1;
    @media ${props => props.theme.mobile} {
      font-size: min(1.3vw, 1rem);
    }
  }
  .child__chat {
    font-size: 16px;
    display: inline-block;
    font-family: ${props => props.theme.pretendard};

    margin: 5px;
    padding: 5px 8px;
    border-radius: 5px;
    box-shadow: 3px 3px 3px #dbdbdb;
    background-color: #c3f7c1;
    @media ${props => props.theme.mobile} {
      font-size: min(1.3vw, 1rem);
    }
  }

 

4. 참고

• display: inline-block을 설정하면 한 줄 통채가 아니라 글이 있는 부분만 선택되는데, 이 코드에서는 지워도 문제가 없었다.
• 채팅방 외부에 shadow를 넣으면 조금 더 퀄리티가 높아진 듯한 효과를 줄 수 있다. 평소에는 box-shadow: 5px 5px 5px gray;를 자주 사용하는데, 이렇게 하면 우측과 하단에만 음영이 지게 된다.
• 사각형의 네 모서리 모두에 음영을 주고 싶다면 box-shadow: 0px 0px 15px gray; 와 같이 쓰면 된다.
• 현재 시간이 오후 13:13과 같이 나오는데, 이것을 오후 1:13으로 바꾸고 싶다면 getTime() 함수를 수정하면 된다. getTime() 함수는 현재 날짜 및 시각을 입력으로 받고 그 중에서 현재 시각을 원하는 형태로 출력하도록 작성한 함수이다.

결과 화면