[웹챗] 레이아웃 스타일 & 기본 스타일

레이아웃이 잘보이게 기본 스타일을 입혔다.

이번 프로젝트의 경우 채팅창을 모듈로 배포하는게 목적이기 때문에 그 채팅창을 감싸는 부분과 채팅창 부분의 경우 스타일링 방식을 조금 다르게 처리했다. 레이아웃은 css flex를 통해서 잡았고, 추후 모듈 배포나 기타 설정에 따라서 사용자가 수정하거나 옵션을 줄 수 있도록 할 예정이다.

 

디자인은 디자이너가 아니라서 노력대비 효율이 별로 나오지 않으므로 최대한 심플하면서 깔끔한 느낌을 줄 수 있게 색배합 정도만 신경썼다.

 

먼저 모듈배포에 포함 되지 않을 레이아웃 부분의 경우 styled-components를 통해서 글로벌 스타일과 컴포넌트 스타일을 통해서 간단한 레이아웃과 스타일을 잡아줬다. 이 부분은 추가 기능을 넣지 않는한 크게 변할 부분은 없을거로 예상된다.

const CommonStyle = createGlobalStyle`
    * {
        box-sizing: border-box;
    }
    body {
        background-color: #EADEDE;
        // #131313
    }
    #app {
        display: flex;
        flex-flow: column wrap;
    }
`;
const Header = StyledComponents.header`
    display: flex;
    justify-content: center;
    width: 100%;
    height: 120px;
    margin: 0;
    padding: 12px;
    border-bottom: 1px solid;
`;
const Logo = StyledComponents.h1`
    color: #F58840;
`;
const Main = StyledComponents.main`
    display: flex;
    justify-content: center;
    flex: 1 90vh;
`;
const Footer = StyledComponents.footer`
    display: flex;
    justify-content: center;
`;
const Copy = StyledComponents.small`
    color: #535252;
`;

채팅창 부분의 경우 추후 모듈 배포시 의존성 패키지를 줄이기 위해서 스타일드 컴포넌트가 아닌 인라인 스타일로 기본적인 스타일을 잡아줬다. 또 추후 패키지 배포시에는 사용자가 설정 할 수 있는 테마, width, height, color등의 옵션과 다크모드 등의 기능들을 제공하고, 해당 설정에 따라 적절하게 UI가 조절 되도록 해서 배포할 예정이다.

채팅 부분

해당 부분을 작업하면서 조금 중요한 이슈를 하나 발견했는데  채팅 메시지를 수신해서 배열에 담아서 렌더링 하는 로직에서 메시지 갯수가 늘어날 경우 메모리 성능을 너무 잡아먹어서 멈추는 현상을 발견했다. 해당 부분에 대해서는 최적화 를 진행해야할 필요가 있다. 그전에 먼저 채팅 메시지에 대한 데이터 포맷과, 관리에 대한 부분(기록의 유지 등)에 대해서 조금 고민 할 필요가 있는데 해당 부분에 대해서 정의 내린 후 메시지에 대한 UI 작업을 진행할 예정이다.

    const [chatLog, setChatLog] = useState<Array<any>>([]);
    socket.on('receive', (msg: any) => {
        const state = Array.from(chatLog);
        state.push(msg);
        setChatLog(state);
    });

    return (
        <div
            className="chat-room"
            style={{
                display: "flex",
                flexFlow: "column nowrap",
                flex: "1 0px",
                border: "1px solid",
                overflow: "auto",
            }}
        >
            {chatLog.map((msg: any, idx: any) => <p key={idx}>{msg}</p>)}
        </div>
    );

프론트엔드 Repo

https://github.com/yoonjonglyu/webChat

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

벡엔드 Repo

https://github.com/yoonjonglyu/webChat-server

GitHub - yoonjonglyu/webChat-server: webchat, socket.io, nest.js, 채팅서버