재시민

NodeJS 로 채팅 서비스 만들기 디자인

이제 디자인과 추가기능을 만들어보려고한다.

추가할 목록은 다음과 같다.

• 디자인 css
• key event

디자인

디자인 요소는 총 세가지로 구성해보았다.

• me
• other
• connect
• disconnect
• inputbox

#main{
    margin: auto;
    margin-top: 100px;
    padding:3px;
    background-color: lightblue;
    text-align:center;
    width:400px;
}

#main #room_type{
    margin : 10px 10px 20px 20px;
    padding-top : 10px;
    padding-bottom: 10px;
    border-radius: 10px;
    background-color: lightgray;
}
#chat{
    border-radius: 10px;
    margin : 10px;
    padding : 10px;
}

.me{
    background-color: lightgreen;
    border-radius: 10px;
    margin : 2px;
    padding : 2px;
}
.other{
    background-color: lightcoral;
    border-radius: 10px;
    margin : 2px;
    padding : 2px;
}

.connect{
    background-color: pink;
    border-radius: 10px;
    margin : 2px;
    padding : 2px;
}
.disconnect{
    background-color: yellow;
    border-radius: 10px;
    margin : 2px;
    padding : 2px;
}

딱히 다른 건 없지만 카톡처럼 내 채팅은 왼쪽으로 상대 채팅은 오른쪽으로 하고싶은데 아직 방법을 찾지 못했다.

수많은 구글링을 통해 찾아내버렸다.

    overflow: hidden;
    height:auto;
    float:right;
    clear:both;
    word-break:break-all;

여기서 clear, word-break 에 대해 알아보자면

Clear

• clear : left 왼쪽을 취소
• clear : right 오른쪽을 취소
• clear : both 오른쪽 왼쪽을 취소

여기서 clear : both 를 사용한 이유는 float : right 를 하게 되면 추가된 div 가 아래로 내려가지 않고 옆으로 붙기 때문이다.

Word-break

주로 줄 바꿈을 할 때 사용하는 요소이다.

• word- break : normal 중단점 : 공백
• word-break : break-all : 중단점 : 음절

Key Event

카카오톡을 보면 채팅창 값이 비어있으면 전송버튼이 비활성화 된다. 이 기능을 구현해 보려고 한다.

$(function(){
    if($(this).val().trim() == ''){
        $('#send').attr('disabled', true)
    }
    else {
        $('#send').attr('disabled', false)
    }
    $(document).on('keyup', '#test', function(){
        if($(this).val().trim() == ''){
            $('#send').attr('disabled', true)
        }
        else {
            $('#send').attr('disabled', false)
        }
    })
        $('#test').focus(function (e) { 
        e.preventDefault();
        $('#send').css('background-color', 'yellow');
    });
    $('#test').blur(function (e) { 
        e.preventDefault();
        $('#send').css('background-color', 'rgb(214,214,214)');
    });
    $(document).on('keypress', function(e){
        if($('#test').val().trim() != ''){
            if(e.which == 13) {
                send();
                $("#chat").scrollTop($(document).height());
            }
        }
    })
})

음 이렇게 보면 진짜 더러운 코드다..

하지만 더이상 좋은 생각이 나지 않아....

코드를 좀 보자면 key event 가 발생하지 않을 때 초기설정으로 disabled 해주고 그 이후 key event 를 통해 설정을 해주었다. 더 좋은 방법이 있으면 좋겠지만 계속 생각한다면 머리가 다 빠져버릴 것 같아서 이만.