인스타그램 알람 기능 구현 - 모달창 크기 조절, 내용 제한

안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)

yeonee 블로그 : 네이버 블로그

 

마지막 파이널 프로젝트로 sns를 구현하게 되었어요.

기능구현 전에 기본적인 UI 구현 중 모달창을 띄우는 과정을 겪었는데요, 모달창 크기 조절 및 모달창 내용 제한이 은근 알고 나면 간단한 기능이랍니다.
제가 맡은 부분인 알람창과 알람버튼을 누르면 해당 알람들이 모달창을 통해 뜨도록 간단하게 구현하는 방법을 알아보겠습니다.

 

* html

<!-- alart-tool Modal -->
<div class="modal">
    <div class="modal-body">
        <div class="alarm-all-btn">
            <a>
                모두보기
            </a>        
        </div>
        <div class="modal-profile-icon">
            <label>
                <a>
                    <img src="resources/img/profile1.jpg"/>
                </a>
            </label>
            <div class="modal-alarm-contents">
                <div class="modal-alarm-user">
                    im_Zzang_gu_da
                </div>
                <div class="modal-alarm-content">
                    im_Zzang_gu_da님이 회원님을 팔로우하기 시작했습니다. 
                </div>
            </div> 
        </div>
        <div class="modal-profile-icon">
            <label>
                <a>
                    <img src="resources/img/profile2.jpg"/>
                </a>
            </label>
            <div class="modal-alarm-contents">
                <div class="modal-alarm-user">
                    i_want_to_be_a_Gamani
                </div>
                <div class="modal-alarm-content">
                    i_want_to_be_a_Gamani님이 댓글을 남겼습니다 : "나는야 진정한 가마니가 될꺼야>_0!!"
                </div>
            </div> 
        </div>
        <div class="modal-profile-icon">
            <label>
                <a>
                    <img src="resources/img/profile3.jpg"/>
                </a>
            </label>
            <div class="modal-alarm-contents">
                <div class="modal-alarm-user">
                    im_Danbi
                </div>
                <div class="modal-alarm-content">
                    im_Danbi님이 회원님의 사진을 좋아요💗 눌렀습니다.
                </div>
            </div> 
        </div>
        <div class="modal-profile-icon">
            <label>
                <a>
                    <img src="resources/img/profile4.jpg"/>
                </a>
            </label>
            <div class="modal-alarm-contents">
                <div class="modal-alarm-user">
                    im_so_Sad
                </div>
                <div class="modal-alarm-content">
                    im_so_Sad님이 댓글을 남겼습니다 : "희미한 과거만 바라보다 선명한 현재를 놓치지 말자"
                </div>
            </div> 
        </div>
        <div class="modal-profile-icon">
            <label>
                <a>
                    <img src="resources/img/profile5.jpg"/>
                </a>
            </label>
            <div class="modal-alarm-contents">
                <div class="modal-alarm-user">
                    im_so_famous_spongeBob
                </div>
                <div class="modal-alarm-content">
                    im_so_famous_spongeBob님이 댓글을 남겼습니다 : "사실 집게리아 패티는 중국산이야 ㅠ.ㅠ"
                </div>
            </div> 
        </div>
        <div class="modal-profile-icon">
            <label>
                <a>
                    <img src="resources/img/profile6.jpg"/>
                </a>
            </label>
            <div class="modal-alarm-contents">
                <div class="modal-alarm-user">
                    im_so_4rory_ya
                </div>
                <div class="modal-alarm-content">
                    im_so_4rory_ya님이 회원님을 팔로우하기 시작했습니다. 
                </div>
            </div> 
        </div>
        <div class="modal-profile-icon">
            <label>
                <a>
                    <img src="resources/img/profile7.jpg"/>
                </a>
            </label>
            <div class="modal-alarm-contents">
                <div class="modal-alarm-user">
                    Cute_cat
                </div>
                <div class="modal-alarm-content">
                    Cute_cat님이 회원님의 사진을 좋아요💗 눌렀습니다.
                </div>
            </div> 
        </div>
    </div>
</div>

 

* script

<script>
    const body = document.querySelector('body');
    const modal = document.querySelector('.modal');
    const alarmModal = document.querySelector('.alert-tool');

    alarmModal.addEventListener('click', () => {
        modal.classList.toggle('show');
        if(modal.classList.contains('show')){
            body.style.overflow = 'hidden';
        }
    });

    modal.addEventListener('click', (event) => {
        if(event.target === modal){
            modal.classList.toggle('show');

            if (!modal.classList.contains('show')) {
                body.style.overflow = 'auto';
            }
        }
    });
</script>

 

* css

/* alert-tool Modal */
.modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
  }

.modal.show {
    display: block;
}

.alarm-all-btn a{
    padding: 0px 0px 1px 225px;
    margin-top: 0px;
    color: gray;
    font-size: 13px;
    cursor: pointer;
}

.alarm-all-btn a:hover{
    color: rgb(73, 73, 73);
}

.modal-body {
    position: absolute;
    margin-top: 3.8%;
    right: 60.5px;
    width: 280px;
    height: 440px;
    padding: 10px 15.5px 15.5px 15.5px;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
}

.modal-alarm-content{
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    width: 220px;
}

.modal-profile-icon{
    display: flex;
    color: gray;
    cursor: pointer;
}

.modal-profile-icon img{
    width: 50px; 
    height: 50px;
    border-radius: 100%;
    cursor: pointer;
}

.modal-alarm-user{
    padding-left: 14px;
    color: gray;
    font-size: 13px;
    font-weight: bold;
}

.modal-alarm-content{
    padding: 14px 10px 10px 12px;
    text-align: left;
    font-size: 12px;
}

 

아이디값을 이용하면 제이쿼리 구문을 작성할 수 있지만, 
조원분들과 맞춘 헤더와 사이드바 등 틀에 id를 추가하기 번거로워 기존의 클래스명으로 자바스크립트 구문을 구현했답니다.