Django 클론코딩으로 인스타그램을 ! 4탄

게시글 업로드 구현하기

이번 게시글에서는 인스타그램의 새 게시물 만들기 기능에 대해 공부해보자 !

실제 인스타그램 pc 버전의 화면을 캡처해왔다 !

사진을 업로드한 후 이후 글을 작성하여 업로드 하는 간단한 UI/UX 를 제공하고 있다

 

기존 화면 위에 새로운 화면이 그려지는 모달로 새 게시물을 생성하는 화면을 제공한다

우리도 피드 생성 모달을 만들어보자

 

아래 순서대로 css 와 html 추가하자

    .modal_overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(1.5px);
        -webkit-backdrop-filter: blur(1.5px);
    }

    .modal_window {
        background: white;
        backdrop-filter: blur(13.5px);
        -webkit-backdrop-filter: blur(13.5px);
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        width: 800px;
        height: 600px;
        position: relative;
        padding: 10px;
    }

<div class="modal_overlay">
    <div class="modal_window">
    </div>
</div>

로컬 서버를 실행시켜보면 위 화면 같이 나온다

css 에 배경 필터 옵션인 blur 설정하여 흐릿한 효과를 넣고 알파값으로 투명도를 설정했다

border-radius 를 통해 모서리가 둥근 사각형을 만들었다

 

우리가 글생성 버튼을 클릭한 경우에 모달 창이 뜨도록 

즉 아이콘을 눌렀을때 이벤트가 발생하도록 만들어보자 !

 

글생성 버튼인 add_box 에 id 속성을 넣어주어야한다

이유는 자바스크립트에서 해당 아이콘을 찾을 수 있도록 해주기 위함이다

이제 add_feed 라는 아이디를 가진 아이콘을 누르면 모달이 나타나도록 

또 모달이 나타나고 사라지고 제어하기 위해서 모달에도 id 값을 추가해주면 된다

<!-- add_box id 속성 추가 -->
<span id="add_feed" class="material-icons-outlined">add_box</span>

<!-- model id 속성 추가 -->
<div id = "modal_add_feed" class="modal_overlay">
  <div class="modal_window">
  </div>
</div>

자바스크립트를 살짝 코딩해보자

<script>
    const modal = document.getElementById("modal_add_feed");
    const buttonAddFeed = document.getElementById("add_feed");
    buttonAddFeed.addEventListener("click", e => {
        modal.style.display = "flex";
        document.body.style.overflowY = "hidden"; // 스크롤 없애기
    });
</script>

const 상수 modal 를 만들고 modal_add_feed 를 id값으로 찾는 element를 찾아 넣겠다

buttonAddFeed 는 add_feed 를 가르킨다

.addEventListener 를 통해 buttonAddFeed 를 누를 경우 괄호 안의 코드가 실행된다라는 뜻으로 이해하면된다

자바스크립트가 주가 아니니 간략한 흐름만 이해해도 괜찮다

본래 인스타그램 피드 생성 모달이 뜨면 스크롤이 없어지기 때문에 이것도 설정해주자 !

 

css .modal_overlay 내 display 값도 none 으로 변경하여 버튼을 누르기전 화면에서 보이지 않도록 해두어야한다

display: none;

 

짜잔 ! 닫기 버튼도 달아주자 ㅎㅎ

차례로 css 와 html 코드이다

    .modal_title{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      font-weight: bold;
      font-size: 20px;
      }

    .modal_title_side{
      flex: 0 0 40px;
      text-align: center;
      }

    <!-- create feed -->
    <div id="modal_add_feed" class="modal_overlay">
      <div class="modal_window">
        <div class="modal_title">
          <div class="modal_title_side"></div>
          <div> 새 게시물 </div>
          <div class="modal_title_side">
              <span id="close_modal" class="material-icons-outlined">
                  close
              </span>
          </div>
        </div>
      </div>
    </div>

css flex-direction 이 row 일때 가로로 정렬되고

justify-content 가 space-between 각 요소들이 균등하게 공간을 차지하기 때문에

비어있는 modal_title_div div 를 넣어주어 정렬을 맞추어주었다

모달에 닫는 버튼을 넣어주었으니 닫기 모달을 닫느 자바스크립트 코드를 추가하자

<script>
    // 모달 띄우기 코드
    const modal = document.getElementById("modal_add_feed");
    const buttonAddFeed = document.getElementById("add_feed");
    buttonAddFeed.addEventListener("click", e => {
        modal.style.display = "flex";
        document.body.style.overflowY = "hidden"; // 스크롤 없애기
    });
    
    // 모달 닫기 코드
    const buttonCloseModal = document.getElementById("close_modal");
    buttonCloseModal.addEventListener("click", e => {
        modal.style.display = "none";
        document.body.style.overflowY = "visible";
    });

</script>

닫기 버튼까지 구현 !

하지만 스크롤이 이미 내려져있는 상태에서는 모달이 정상적으로 작동하지 않는다 !

사용자가 어떤 위치에 있던지 모달을 화면 가운데로 보여주도록 코드를 수정해야하는데

자바스크립트를 사용하여 현재 사용자가 스크롤을 얼마나 움직였는지 로그를 찍을 수 잇다

 

움직이는 휠의 로그 값을 찍어서 그에 맞춰서 모달의 위치를 보여주면 된다

자바스크립트르 수정해 휠이 어디에 위치해도 모달이 정상적으로 보여지도록 하자 !

 // 모달 띄우기 코드
    const modal = document.getElementById("modal_add_feed");
    const buttonAddFeed = document.getElementById("add_feed");
    buttonAddFeed.addEventListener("click", e => {
        modal.style.top = window.pageYOffset + 'px'; // top을 이용해 시작 y위치를 바꿔줌 
        modal.style.display = "flex";
        document.body.style.overflowY = "hidden"; // 스크롤 없애기
    });

 

---

이미지 업로드 구현하기

인스타그램 pc 버전에서는 이미지를 드래그해서 업로드할 수 있다

모달 창 타이틀 아래 공간에 파일을 업로드할 수 있도록 구현해보자

 

css 와 html 코드를 작성하고 Jquery 로 드래그 앤 드롭 코드를 짜면 된다 !

 .modal_image_upload{
        outline: 2px dashed black ;
        outline-offset:-10px;
        text-align: center;
        transition: all .15s ease-in-out;
        width:780px;
        height: 548px;
    }

<div id="modal_add_feed" class="modal_overlay">
    <div class="modal_window">
        <div class="modal_title">
            <div class="modal_title_side"></div>
            <div> 새 게시물 </div>
            <div class="modal_title_side">
                <span id="close_modal" class="material-icons-outlined">
                    close
                </span>
            </div>
        </div>
        <div class="modal_image_upload">

        </div>
    </div>
</div>

드래그 앤 드롭으로 사진을 올릴 수 있도록 화면 구성을 만들었다

사진 파일을 드래그했을때 업로드 되는 즉 액션을 코드로 만들어주어야한다

드래그 앤 드롭이라하며 이는 Jquery 로 구현하면 된다

Jquery 는 자바스크립트와 유사하며 몇가지 기능을 짧게 사용할 수 있도록 만들어주는 라이브러리이다

 

제이쿼리를 사용하기 위해 head 태그 내에 아래 한 줄을 추가한다

 <!-- jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

기존의 자바스크립트 코드에 제이쿼리 코드를 써주면 된다

<!-- jquery 부분 -->

    $('.modal_image_upload')
        .on("dragover", dragOver)
        .on("dragleave", dragOver)
        .on("drop", uploadFiles);

    function dragOver(e){
        e.stopPropagation();
        e.preventDefault();
        
        if (e.type == "dragover") {
            $(e.target).css({
                "background-color": "black",
                "outline-offset": "-20px"
            });
        } else {
            $(e.target).css({
                "background-color": "white",
                "outline-offset": "-10px"
            });
        }
    }

    function uploadFiles(e){
        e.stopPropagation();
        e.preventDefault();
        
        e.dataTransfer = e.originalEvent.dataTransfer; 
        var files =  e.dataTransfer.files;

        if (files.length > 1) {
            alert('하나만 올려라.');
            return;
        }

        if (files[0].type.match(/image.*/)) {
            $(e.target).css({
                "background-image": "url(" + window.URL.createObjectURL(files[0]) + ")",
                "outline": "none",
                "background-size": "100% 100%"});
        }else{
            alert('이미지가 아닙니다.');
            return;
        }

    }

제이쿼리를 간단히 보면 자바스크립트에서는 id값으로 찾아왔지만

$('.modal_image_upload') 는 modal_image_upload 클래스로 찾아온다

.on() 아라는 코드가 여러개 붙어있는데 이건 자바스크립트의 이벤트리스너랑 유사하다

각 마우스를 드래그해서 올렸을때, 드래그가 밖으로 나갔을때, 드롭했을때 등 특정함수를 실행시킨다

더 자세히 공부하고 싶다면 JQuery API Documentation 을 검색해보면 된다 !

그럴싸 !

지금까지 우리가 구현한 것은 프론트에서 새 게시글을 생성하는 모달창을 띄우고

사진을 드레그 앤 드롭으로 업로드 하는 것까지 이다 !

 

다음 포스팅에서는 백엔드로 넘기고 새 게시글의 글 내용을 작성하는 것까지 고민하고 구현해보자 :D