[15일 메이킹 프로젝트] #10일차 개발일지

목차

1. 시작의 한마디

2. 오늘의 목표 

3. 회의 내용

4. 업무 이슈/고민 & 해결

5. Next up

---

1. 시작의 한마디

벌써 10일차. 한 가지를 해결하면 또 다른 문제가 기다리고 있다 ㅜㅜ

2. 오늘의 목표

 1. 모달창 구현

 2. 로그인 기능 구현

 3. 지역별 고양이 페이지 화면 사이즈 조정

3. 회의 / 작업 내용

1. 모달창 구현

- 모달창 css / html

* 모달창 */
.modal {
  display: flex;
  height: 100%;
  width: 100%;
  position: fixed;
  justify-content: center;
  align-items: center;
  top: 0;
}

/* 모달창 배경 */
.modal__overlay {
  background-color: rgba(0, 0, 0, 0.3);
  height: 100%;
  width: 100%;
}

/* 모달창 내용 */
.modal__content {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5), 0 10px 10px rgba(0, 0, 0, 0.22);
  background-color: white;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 800px;
  min-width: 800px;
  height: 400px;
  min-height: 400px;
  top: 20vh;
  padding: 20px 20px 20px 40px;
  border-radius: 10px;
  display: flex;
  justify-content: flex-start;
  font-family: "Pretendard-Regular";
  left: 25%; /* 모달창 가운데 정렬이 잘 안됌 */
}

/* 고양이 이미지 */
.modal-img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  overflow: hidden;
  position: absolute;
}

/* 데려갈꼬냥?로고 */
.modal-logo {
  position: absolute;
  width: 210px;
  height: 60px;
  top: 20px;
  right: 10px;
}

/* 고양이 정보 내용 */
.modal__content ul {
  position: absolute;
  left: 370px;
  bottom: 30px;
}

.modal__content li {
  margin-bottom: 20px;
}

.modal__content .modal-title {
  font-weight: bold;
  font-size: 16px;
  margin-right: 20px;
  display: inline-block;
  width: 80px;
}

.modal__content .modal-text {
  font-size: 14px;
}

/* 로드 된 첫 화면 : 모달창 안보이게*/
.hidden {
  display: none;
}

- jQuery와 Vanila Js로 기능 구현

: Vanila JS로 구현시 각 카드 클릭이 되지 않는 문제점 있었음 -> jQuery로 해결

: jQuery로 구현시 모달창 중앙정렬이 되지 않는 문제가 있었음. -> .modal__content { left: 25%; }

/*모달창 기능 jQuery */
        
$(function(){ 
  $(".cat-card").click(function(){
  $(".modal").fadeIn('fast');  //cat-card click-> onModal
  });

  $(".modal__overlay").click(function(){
  $(".modal").fadeOut('fast'); //영역 밖 click-> offModal
  });
  });

 /* 모달창 기능 Vanila JS */
 const openButton = document.querySelector('.cat-card'); //onModal button
 const modal = document.querySelector('.modal'); //html에서의 모달 촤상위 요소
 const overlay = document.querySelector('.modal__overlay'); //모달창 활성시 배경 흐리게

const openModal = () => {
modal.classList.remove('hidden'); //onModal -> hidden요소가 사라지게. (모달켜짐)
}
const closeModal = () => {
modal.classList.add('hidden'); //offModal -> hidden요소가 다시 등장. (모달꺼짐)
}

openButton.addEventListener('click', openModal); //onModal

overlay.addEventListener('click',closeModal); //offModal (모달창 영역 밖 클릭)

- 모달창에 API 데이터 분류 및 입력 - id로 특정시키는 방법이 관건! > 내일 json 데이터로 변환해서 확인.

 

2. 로그인 기능 구현

- 로그인 기능 구현 O

- 네비바 로그아웃으로 변경되도록 수정예정 (내일)

 

3. 지역별 고양이 페이지 화면 사이즈 조정

- 모니터 이상 넘어가면 잘리는 현상 : width 100vh -> 90vh로 변경

4. 업무 이슈/고민 & 해결

- 변수선언 : var, let, const -> 기본적으로 const를 사용하고, 재할당이 필요한 경우에 한정해 let을 사용하는 것이 좋다.

- classList : 클래스를 조작하는 다양한 메소드를 쓸 수 있다.

- classList.add : 삽입

- classList.remove : 제거

- addEventListener() : 이벤트를 등록하는 가장 권장되는 방식

- .querySelector() : 특정 name이나 id를 제한하지 않고, css 선택자 요소찾기.

5. Next UP

- API 데이터 분석

- API 데이터 연결 (지역세부, 모달창)

- 로그인시 네비바 로그아웃으로 바뀌도록 수정

- JS 화면이동 해결 (CAT-TEST PAGE)

- 리뷰페이지 삭제

- API 데이터 LIST 페이지 넘기기 구현