[🥸JavaScript]📝랜딩페이지 만들기➰카카오맵 API, 이메일 유효성 검사, 사이드 메뉴

📍 진행상황

🧷 랜딩페이지 웹, 모바일 버전 화면 작업 진행 👉🏻 7of7 진행 완료
◾ <p> 태그 줄바꿈 적용 방식 조정
◾ 카카오 API를 통해 마커 및 맵 레벨 초기화 기능 추가, 아이콘 변경
◾ 구독하기 버튼의 웹과 모바일 화면 간 위치 조정
◾ 이메일 입력 후 버튼 클릭 시 모달창 띄우기 및 유효성 검사
◾ 헤더 사이드 메뉴바 작업
◾ 레이아웃 전체 세밀 조정

---

📌 개발 완료 부분 시연 영상

 
✅ 레이아웃의 간격, 요소의 크기 등을 피그마 디자인 파일과 일치하도록 조정했습니다.
추가로, 텍스트와 이미지의 배치도 최적화하였습니다.
 
✅ 웹에서는 <br> 태그에 `display: none`을 적용하여 줄바꿈을 숨기고,
모바일에서는 `display: flex`를 적용하여 줄바꿈을 표시했습니다.

---

📁 카카오맵 API 사용과 예제

◾카카오 API를 사용할 수 있는 방법으로는 공식 홈페이지에서
로그인을 하고 개인 API 키를 발급을 받은 다음에 진행을 할 수 있습니다. 

지도 타입, 줌 레벨 변경 예제

 

마커 표시 샘플 예제

왼쪽의 이미지는 카카오 자체에서 제공해주는 샘플 예제입니다.
이 예제를 활용해서 오른쪽과 같이 화면을 구현했습니다.
자바스크립트를 활용해서 맵의 레벨과 마커를 초기화할 수 있는 기능을 추가하였습니다.

---

📁 이메일 유효성 검사

이메일 유효성 검사

올바른 이메일 형식 입력 시 모달창 띄우기

 
❗OK! 버튼 클릭시 화면 최상단으로 올라가는 현상이 있기 때문에 고칠 예정입니다.

---

📁 relative, absolute으로 포지션 이동하기

왼: PC 버전 / 오: 모바일 버전

1️⃣ position이동

처음에 피그마에서 이미지를 보는데 도대체 저 버튼은 어떻게 구현할까? 라는 생각이 들었습니다.
👉🏻 찾아보니 `position` 속성을 이용하면 원래 위치 혹은 부모 요소를 기준으로 배치할 수 있기 때문에
화면을 조절해도 의도한 위치에 고정시킬 수 있습니다.

2️⃣ 이메일 입력창

직사각형에 `border-radius` 값을 주고 그 위에 `input` 창을 구현하였습니다.
✔️ 그러나 이전에 input을 이용하여 border-radius 값을 주어서
로그인 화면을 만들었던 경험이 있어 이미지만 배치할 수 있는 방법을 알아낸다면
화면과 같이 또 다른 방법으로도 개발해보려합니다.
 

📁 메뉴바 펼치기(사이드 메뉴)

오늘 가장 애먹었던 부분인데요! 코드가 자꾸 에러가 나서 if ~ else 문으로 어느 부분에서 오류가 나는지
확인을 해보니 메뉴 펼치기 버튼은 제대로 작동을 하고 있는데 다른 요소에 가려져서 안 보인다는 것을 알았습니다.
`z-index` 를 이용해서 이 문제를 해결해주었습니다.

⭐ 코드리뷰➰카카오맵, 이메일 유효성 검사, 사이드 메뉴

✅ 카카오맵 API

[🥸JavaScript]📝카카오 지도 API 사용법과 키 숨기기(gitignore )➰랜딩 페이지

✅ 이메일 유효성 검사

 
이메일 입력 필드를 검증하고, 입력값이 비어 있거나 유효한 이메일 형식이 아닌 경우에 경고를 표시하도록 구현했습니다.

<script>
// 이메일 유효성 검사(정규표현식)
function validateEmail(email) {
    const pattern = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
    return pattern.test(email); // 패턴이 입력한 문자열과 일치하는지 확인
}

// 입력값이 올바른지 체크
function inputCheck() {
    const emailInput = document.getElementById('emailInput');
    const email = emailInput.value.trim(); // 양쪽 공백 제거
    if (!email || !validateEmail(email)) { // 빈 문자열이거나 이메일 형식이 유효하지 않은 경우
        alert('입력란이 공백이거나 이메일 주소가 유효하지 않습니다.');
        return false;
    }
    return true;
}

// 유효성 검사 진행 문제 없을 시 모달창 열림
function showModal(event) {
    event.preventDefault(); // 기본 동작을 방지
    if (inputCheck()) { // 입력값이 유효한 경우
        document.getElementById('modal').style.display = 'flex'; // 모달 표시
    }
}

// OK 버튼 클릭시 모달창 닫힘
function closeModal(event) {
    event.preventDefault(); // 기본 동작을 방지
    document.getElementById('modal').style.display = 'none'; // 모달 숨기기
}

// 폼 제출 후 모달창 닫힘
function confirmSubscription(event) {
    event.preventDefault(); // 기본 동작을 방지
    document.querySelector('.form-container').submit(); // 폼 제출
    closeModal(event); // 모달 닫기
}

// 이벤트 리스너를 설정
document.querySelector('.subscribeButton').addEventListener('click', showModal);
document.querySelector('.modalButton').addEventListener('click', closeModal);
document.getElementById('modalConfirmButton').addEventListener('click', confirmSubscription);

</script>

 
 

✅ 헤더 사이드 메뉴

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const menuOpenButton = document.querySelector('.menuOpenButton');
        const menuCloseButton = document.querySelector('.menuCloseButton');
        const menu = document.querySelector('.menu');

		// translateX의 초기값 100%에서 0으로 변경, 메뉴를 화면으로 보이게함
        menuOpenButton.addEventListener('click', function() {
            menu.classList.add('open'); 
        });

		// translateX의 변경값을 제거, 화면 밖으로 나가게 되어 메뉴가 닫히는 것처럼 보임
        menuCloseButton.addEventListener('click', function() {
            menu.classList.remove('open');
        });
        
    });
</script>

 
⭐ 사이드 메뉴의 핵심은 CSS에 메뉴창이 열릴 수 있도록 새로운 클래스를 추가해
`translateX()`를 사용해서 사이드바가 움직일 수 있도록 해주는겁니다.

transform: translateX(100%); /* 메뉴를 화면에 보이지 않도록 오른쪽 밖에 위치 */
transform: translateX(0); /* 메뉴가 보일 수 있도록 X 값이 이동 */

 
오른쪽 화면에서 왼쪽 방향으로 사이드 메뉴가 나타나게끔 해주었는데요.
따라서 X 값을 이용하면 되고 위에서 아래로 나타나는
메뉴를 만들고 싶다면 `translateY()` 값을 이용하시면 되겠습니다.

---

📝 11일차 부트캠프 회고

1️⃣ 잘했던 점
카카오맵 API와 이메일 유효성 검사를 이용하는 등 다양한 기술 요소를 통합하여 개발을 진행하였고, 레이아웃과 요소의 크기를 피그마와 맞춰 사용자 경험을 향상시켰습니다.

2️⃣ 부족했던 점
개인적으로 relative, absolute 값을 이용해서 버튼의 배치를 부모 요소와 붙어있으면서 움직이도록 하는 것이 어려웠습니다. 

3️⃣ 향후 개선 방향
버튼 배치와 레이아웃 조정에 대한 이해도를 높이기 위해 관련 자료 더 찾아보고
카카오맵 API에서 발급받은 키를 숨기기 위한 방법을 찾아보려 합니다.