[웹챗] 기본 테마 & 시스템 메시지

채팅창 기본테마 구리다..너무

채팅창 시스템 메시지로 채팅 입장과 퇴장에 대한 알림을 넣었다. 그리고 기존 스타일들을 이제 어느 정도 잡아 줘야하기에 색배합에 관한 사이트를 참고하면서 세부적인 스타일을 잡아줬다. 솔직히 너무 볼품없긴하다. 디자인 고자가 CSS프레임워크를 쓰지 않다보니 그런듯 분명히 카카오톡을 나름 벤치마킹 했는데 문제는  전혀 그런 느낌이 안든다.

디자인의 오묘함이란... 추가적으로 메시지 전송시 스크롤이 생기면 해당 부분을 자동으로 포커싱 안되는 것을 일단 자신의 메시지가 전송되었을때만 스크롤 해주는 기능을 넣었다. 카카오톡을 살펴보니 스크롤을 감지해서 조금 더 세부적으로 처리하는 거 같다. 추후 수정해야할듯

    // 자기가 최신 메시지를 보낼때 자동 스크롤하기
    const Room: any = useRef(null);
    useEffect(() => {
        if (socket.id === chatLog[chatLog.length - 1]?.idx) {
            Room.current?.scroll(0, Room.current.scrollHeight);
        }
    }, [chatLog]);

자문자답

채팅 메시지의 경우 세부적으로 들어갈 내용이 많아 보여서 chatMessage라는 컴포넌트로 따로 분리해줬다.

import React from 'react';

interface ChatMessageProps {
    messages: Array<{
        idx: string
        message: string
    }>
    userIdx: string
}

const ChatMessage: React.FC<ChatMessageProps> = (props) => {
    const {
        messages,
        userIdx
    } = props;

    return (
        <>
            {
                messages.map((current, idx) => {
                    const Style: React.CSSProperties = {
                        maxWidth: "58%",
                        padding: "8px",
                        margin: "8px",
                        fontSize: "1rem",
                        color: "#1b1b1b",
                        wordBreak: "break-word",
                        background: "rgb(0 0 0 / 19%)",
                        borderRadius: "6px",

                    };
                    if (current.idx === '#system') {
                        Style.maxWidth = "100%";
                        Style.textAlign = "center";
                        Style.color = "rgb(98 14 14)";
                        Style.fontSize = "0.9rem";
                        Style.margin = "6px";
                    }
                    if (current.idx === userIdx) {
                        Style.background = "tomato";
                        Style.marginLeft = "auto";
                    }
                    else if (current.idx !== '#system') {
                        Style.background = "#eeeeee";
                        Style.marginRight = "auto";
                    }

                    return (
                        <p
                            key={idx}
                            style={Style}
                        >
                            {current.message}
                        </p>
                    );
                })
            }
        </>
    );
}

export default ChatMessage;

 

현재는 사실 1대1 채팅은 절반 정도 완성 된 상황이라고 볼 수 있을듯하다. 디자인은 결국 계속 다듬어야 하고, 그외 트래픽 관련은 사실 프론트엔드 영역이 아니다. 소켓 서버에서 처리할 문제이지. 이벤트 버퍼링이나 연결해제나 장애가 발생했을시 그것을 처리하는 로직과 표시해주는 UI 정도가 1대1 채팅에 필요한 추가적인 기능일 것이다. 어쨌든 익명 다대다 채팅을 간단하게 지원해주는 컴포넌트를 만드는게 목적이니, 추가적으로 각 개인을 식별 할 수 있는 닉네임 등의 기능이 필요할 것이고, 제일 중요한 디자인을 가다듬어야겠다.

헤로쿠를 통해서 데모 버전을 배포해볼려고 했는데 잘안된다. 해당부분도 처리해야겠다.

 

프론트엔드 Repo

https://github.com/yoonjonglyu/webChat

GitHub - yoonjonglyu/webChat: 간단한 채팅 웹