탑스터 웹앱 (2)

전체적인 구조를 약간씩 바꿨다.

'/' 에 탑스터를 만드는 페이지를, '/lookaround'에 피드를 보여줬었다. 좀 더 sns 같은 느낌을 주고 싶어서 메인화면으로 피드를 보여주고 우측 상단에 탑스터 만드는 페이지로 가는 메뉴를 만들었다.

모달창

내 포스트를를 삭제하기 전에 한번 더 물어보는 모달 창을 만들었다.

  const openModal = (e) => {
    this_modal.current.classList.remove("hidden");
    const data = e.currentTarget.getAttribute("postid");
    setDelPostID(data);
  };
  const closeModal = () => {
    this_modal.current.classList.add("hidden");
  };
.
.
.

 <div class="modal hidden" ref={this_modal}>
      <div class="modal_overlay" ref={overlay} onClick={closeModal}>
      </div>
      <div class="modal_content">
        <ModalFeed
          closeModal={closeModal}
          delPostID={delPostID}
          setDelSucceeded={setDelSucceeded}
        />
      </div>
</div>

해당 버튼을 누르면 모달창이 보여지고, 보여지는 컴포넌트 안에 로그아웃 함수를 넣어 놨다.

/*모달*/
.modal {
  border: 1px solid black;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal_overlay {
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  position: absolute;
}

.modal_content {
  background-color: white;
  position: relative;
  top: 0px;
  width: 270px;
  height: 120px;
  text-align: center;
  border-radius: 20px;
}

.hidden {
  display: none;
}

배포

aws EC2에 배포를 하기로 했다.
참고

정말로 좋은 영상... nginx를 사용했다.

http://react-topster.shop

이렇게.. 대충.. 마무리ㅎㅎ
재밌다재미써. 개발이 생각보다 신경써야 할게 엄청 많다. 생각지도 못한 곳에서 생각지도 못한 에러가 생기더라. 으악