# 24.10.28_ 마켓컬리 클론코딩8_팝업부분

 

전 포스팅에 남겼던 팝업 부분으로 해당 내용이 누락되어서 추가하게 되었다.

 

팝업 부분의 전체 코드는 아래와 같다.

<div class="popup" id="popupContainer">         <dialog class="popup__container" id="popupDialog">             <div class="popup__img">                 <a href="#">                     <img class="img__detail" src="{% static 'images/popup.jpg' %}" alt="칼리 뷰티 플랫폼 상세페이지">                 </a>             </div>             <form method="dialog">                 <button class="button__closeToday" value="cancel" id="closeToday">오늘 하루 안보기</button>                 <button class="button__close" value="default">닫기</button>             </form>         </dialog>     </div>       <script>         document.addEventListener('DOMContentLoaded', function () {             const popupDialog = document.getElementById('popupDialog');             const closeTodayBtn = document.getElementById('closeToday');             const popupElement = document.getElementById('popupContainer'); // 팝업 전체 요소             // 쿠키에서 'hidePopup' 값 확인             if (document.cookie.indexOf('hidePopup=true') === -1) {                 popupDialog.showModal(); // 팝업 열기             } else {                 popupDialog.close();                 popupElement.style.display = 'none';  // 팝업 요소를 숨김             }             // "오늘 하루 안보기" 버튼 클릭 시             closeTodayBtn.addEventListener('click', function () {                 // 쿠키에 hidePopup 값 설정 (하루 동안 유지)                 document.cookie = "hidePopup=true; max-age=86400; path=/";                 popupDialog.close();                 popupElement.style.display = 'none';  // 팝업 전체 숨기기                 document.body.classList.remove('modal-open');  // 페이지의 스크롤 활성화             });             // "닫기" 버튼 클릭 시 팝업 닫기             popupDialog.addEventListener('close', function () {                 popupElement.style.display = 'none';  // 팝업 전체 숨기기                 document.body.classList.remove('modal-open');  // 페이지의 스크롤 활성화             });         });       </script>

 

HTML 구조 부터 설명을 하면 아래와 같다.

<div class="popup" id="popupContainer">     <dialog class="popup__container" id="popupDialog">         <div class="popup__img">             <a href="#">                 <img class="img__detail" src="{% static 'images/popup.jpg' %}" alt="칼리 뷰티 플랫폼 상세페이지">             </a>         </div>         <form method="dialog">             <button class="button__closeToday" value="cancel" id="closeToday">오늘 하루 안보기</button>             <button class="button__close" value="default">닫기</button>         </form>     </dialog> </div>

 

 

• <div class="popup" id="popupContainer">
  팝업 전체를 감싸는 요소입니다. 팝업이 숨겨질 때 이 요소를 숨겨서 팝업 전체를 화면에서 제거해 준다.
• <dialog> 태그
  <dialog> 요소는 팝업의 본체 역할로, showModal() 메서드를 통해 팝업을 화면에 띄울 수 있다.
• 이미지 링크
  popup.jpg 이미지를 사용해 팝업 상세 페이지를 제공하며. 이 이미지 링크는 클릭 시 사용자에게 추가 정보를 보여줄 수 있다.
• 버튼
  • 오늘 하루 안보기: 클릭 시 쿠키에 hidePopup 값을 설정해 하루 동안 팝업을 숨겨준다.
  • 닫기: 쿠키와 무관하게 팝업을 닫는다.

JavaScript 코드 설명

<script> document.addEventListener('DOMContentLoaded', function () {     const popupDialog = document.getElementById('popupDialog');     const closeTodayBtn = document.getElementById('closeToday');     const popupElement = document.getElementById('popupContainer'); // 팝업 전체 요소     // 쿠키에서 'hidePopup' 값 확인     if (document.cookie.indexOf('hidePopup=true') === -1) {         popupDialog.showModal(); // 팝업 열기     } else {         popupDialog.close();         popupElement.style.display = 'none';  // 팝업 요소를 숨김     }     // "오늘 하루 안보기" 버튼 클릭 시     closeTodayBtn.addEventListener('click', function () {         // 쿠키에 hidePopup 값 설정 (하루 동안 유지)         document.cookie = "hidePopup=true; max-age=86400; path=/";         popupDialog.close();         popupElement.style.display = 'none';  // 팝업 전체 숨기기         document.body.classList.remove('modal-open');  // 페이지의 스크롤 활성화     });     // "닫기" 버튼 클릭 시 팝업 닫기     popupDialog.addEventListener('close', function () {         popupElement.style.display = 'none';  // 팝업 전체 숨기기         document.body.classList.remove('modal-open');  // 페이지의 스크롤 활성화     }); }); </script>

 

 

1. 팝업 상태 확인 (쿠키 확인)
   document.cookie로 쿠키 값을 확인하여 hidePopup 값이 없으면 팝업을 열고, 이미 존재한다면 팝업을 숨겨준다.
2. 오늘 하루 안보기 버튼
   "오늘 하루 안보기" 버튼을 클릭하면 쿠키에 hidePopup=true 값이 설정되고, 이 쿠키는 하루 동안 유지되며, 해당 기간 동안 사용자가 홈페이지를 방문해도 팝업이 나타나지 않는다.
3. 닫기 이벤트 처리
   팝업이 닫히면 popupElement.style.display = 'none';으로 팝업을 화면에서 제거해준다.

팁: 팝업 다시 활성화 방법

• 팝업을 다시 활성화하고 싶다면 쿠키를 초기화 해주어야 하는데. 브라우저에서 F12를 눌러 개발자 도구를 열고, Application > Storage > Cookies에서 해당 홈페이지 주소를 우클릭해 Clear를 눌러서 쿠키를 삭제하면 된다.
• 이후에는 새로고침 후 팝업이 다시 등장하게 되는 것이다.

CSS 부분

/* 팝업의 기본 스타일 */ .popup {   position: fixed; /* 화면에 고정된 위치로 설정 */   top: 0; /* 상단으로 위치 설정 */   left: 0; /* 왼쪽으로 위치 설정 */   width: 100%; /* 화면 너비 전체를 차지 */   height: 100%; /* 화면 높이 전체를 차지 */   display: flex; /* 플렉스 박스 레이아웃 사용 */   align-items: center; /* 수직 중앙 정렬 */   justify-content: center; /* 수평 중앙 정렬 */   z-index: 1000; /* 다른 요소 위에 표시되도록 설정 */ } .popup__container {   width: 350px;   background-color: #fff;   /* padding: 10px; /*--------- 이부분도*/   border-radius: 10px;   border: none; /* 검은색 선 제거 --------  이부분 이야기 해보기 */    position: absolute;   top: 50%;   left: 50%;   transform: translate(-50%, -50%);   display: flex;   flex-direction: column;   align-items: center; } .popup__img {   width: 100%; /* 이미지 감싸는 박스의 너비를 100%로 설정 */   overflow: hidden; /* 넘치는 부분 숨기기 */ } .popup__img img {   width: 100%; /* 이미지의 너비를 100%로 설정하여 부모 요소에 맞춤 */   height: auto; /* 이미지의 높이를 자동으로 설정하여 비율 유지 */   display: block; /* 이미지 아래의 여백을 제거 */ } .button__close, .button__closeToday {   margin-top: 0px; /* 버튼의 상단 여백 설정 */   margin-right: 20px; /* 오른쪽 버튼 간격 조정 */   padding: 20px 20px; /* 버튼 내부 여백 설정 */   background-color: transparent; /* 배경색을 투명하게 설정 */   color: #07080a; /* 텍스트 색상 설정 */   border: none; /* 경계선 제거 */   border-radius: 5px; /* 모서리를 둥글게 설정 */   cursor: pointer; /* 커서 포인터로 설정하여 클릭 가능함을 시각적으로 표시 */   font-size: 15px; /* 글씨 크기 조정 */   display: inline-block; /* 버튼을 블록 수준 요소로 변경 */   text-align: center; /* 텍스트 가운데 정렬 */ } /* 버튼을 가로로 배치 */ .button-container {   display: flex; /* 플렉스 박스 레이아웃 사용 */   justify-content: center; /* 수평 중앙 정렬 */ } .button__close:hover, .button__closeToday:hover {   color: #080a0c; /* 호버 시 텍스트 색상 변경 */ }

 

css부분의 경우 최대한 주석을 달아서 동료 개발자들도 쉽게 팝업 위치 및 내용을 조정할 수 있게 처리하였다.