Til (2022.02.23)

채팅글 컴포넌트

 

실시간 채팅을 socket.io를 통해 객체로 받아온다. 

객체안에는 채팅 친 사람의 id가 들어있는데 그 id를 이용해 css만으로 반대로 나오게 해봤다.

각자 스타일컴포넌트로 props를 통해 id를 내려준후 그 id가 자신과 일치하면 오른쪽 정렬,

일치하지 않으면 flex-direction: row-reverse나 정렬만 바꿔주는것 만으로 전체 반전이 일어날 수 있게 했다.

import React from "react";
import styled from "styled-components";

function Testtext({ chat }: any) {
  //아이디가 내아이디와 같으면 왼쪽 아니면 오른쪽
  //세션 아이디
  const myId = sessionStorage.getItem("steamid");

  return (
    <ChatDiv id={chat.id} myId={myId}>
      <ChatImg src={chat.profileImg}></ChatImg>
      <ChatBoxDiv>
        <ChatBoxNameH2 id={chat.id} myId={myId}>
          {chat.nickName}
        </ChatBoxNameH2>
        <ChatBoxTextDiv id={chat.id} myId={myId}>
          <ChatBoxTextP id={chat.id} myId={myId}>
            {chat.text}
          </ChatBoxTextP>
          <ChatBoxTextDateP>{chat.time}</ChatBoxTextDateP>
        </ChatBoxTextDiv>
      </ChatBoxDiv>
    </ChatDiv>
  );
}

export default Testtext;

const ChatDiv = styled.div<{ id: any; myId: any }>`
  margin-bottom: 30px;
  display: flex;
  flex-direction: ${(props) => (props.id !== props.myId ? "" : "row-reverse")};
`;
const ChatImg = styled.img`
  width: 60px;
  height: 60px;
  background-color: #fff;
  border-radius: 50%;
`;
const ChatBoxDiv = styled.div`
  margin: 0 15px;
`;
const ChatBoxNameH2 = styled.h2<{ id: any; myId: any }>`
  font-size: 16px;
  color: #fff;
  margin-bottom: 10px;
  text-align: ${(props) => (props.id !== props.myId ? "left" : "right")};
`;
const ChatBoxTextDiv = styled.div<{ id: any; myId: any }>`
  display: flex;
  flex-direction: ${(props) =>
    props.id !== props.myId ? "row" : "row-reverse"};
`;
const ChatBoxTextP = styled.p<{ id: any; myId: any }>`
  background-color: #ccc;
  max-width: 500px;
  padding: 10px 15px;
  border-radius: 10px;
  border-top-left-radius: ${(props) =>
    props.id !== props.myId ? "0" : "10px"};
  border-top-right-radius: ${(props) =>
    props.id !== props.myId ? "10px" : "0"};
`;
const ChatBoxTextDateP = styled.p`
  margin-top: auto;
  margin-left: 12px;
  margin-right: 12px;
  color: #ccc;
  font-size: 12px;
  font-weight: 100;
`;