Project (09.15) - 일정 관리 페이지 기능 구현 중

이번주 할 일✔️

1. 일정 관리 페이지 기능 구현
   (사용자 클릭 시 정보 저장 가능하도록 ⭕)

2. 팝업 페이지 파일 분리 ⭕

3. 아이디, 비밀번호 유효성 검사 -> (비밀번호 확인만 가능) ⭕
   -> 대신 아이디, 비밀번호 입력안하고 다음 버튼 클릭 시 alert로 경고는 하지만 다음으로 넘어감.. 수정 필요하고, 비밀번호 입력 후 비밀번호 확인까지하면 잘 작동되지만, 여기서 비밀번호 입력부분 지우면, 오류 발생 수정필요

4. 체크리스트

5. gpt api 적용

---

일정관리 페이지 기능 구현

date range picker을 이용하여 양 옆 사이드 아이콘 클릭 시 사용자가 달력에서 설정한 start date 부터 end date까지 자유롭게 이동 가능하게 만들면서 일정도 그에 맞게 보이도록 설정하고자 한다.

 $('#prevDay').on('click', function () {
        	if(currentDate >= starDate){
        		currentDate = currentDate.subtract(1,'days');
        		 updateDateDisplay();
        	}
        });

이전 날짜로 이동하기위해 java script 에 저렇게 조건을 걸었는데, 실행 안됨.. 찾아보니 moment.js의 날짜 객체를 비교할 때에는 비교 연산자를 사용할 수 없다!
moment.js의 날짜 비교 메서드인 isSameOrAfter(), isSameOrBefore()등을 사용해야한다.

사용해서 사용자 입력 시 전체 일정 보이고, 다음 버튼 클릭 시 startDate부터 endDate까지 볼 수 있다.

---

CSS 탬플릿 찾아서 리스트 디자인은 가져왔는데 이제 원하는 기능 구현은 사용자가 목적지 입력해서 클릭 시 자동으로 들어가고, 삭제도 가능하도록.. 그리고 일정이 6개 이상이 되면 다음 페이지로 넘어가게 페이지네이션을 구현..

지금 상태는 어딜 클릭하든 리스트가 증가됨............ 어떻게 해야하지.... 그리고 검색창이랑 겹침... 해결.. 시급....... 🥲

kakao 지도 API에 목적지를 선택 시 리스트에 저장하는 것이 목표..

그렇기에 가져온 api를 사용하면 검색 결과를 마커와 함께 지도에 표시가 되어있는데 클릭은 안되고 있다. -> 클릭이 가능하도록 추가, 클릭 시 저장하는 기능 필요.

구글링을 통해서 javaScript로 어떻게 이용할지 찾아봄..

사용자가 클릭한 장소를 저장는데 필요한 배열이 필요.. ->

var savedPlaces = [];

중복된 장소라면 이미 추가된 목적지라는 alert이 뜨도록 ! 배열에 클릭 시 목적지가 추가되고, 새로운 목록 항목 요소를 생성하기 위해, document.createElement('li')로 작성해서 li 태그를 동적을 생성해서 변수에 저장

li.textContent, textContent는 요소의 텍스트 내용을 설정하거나 가져오는 데 사용.. 나는 목적지의 이름이 li 항목의 텍스트로 표시되게 하기 위해

appendChild(li) 메서드로 새로운 자식 요소를 추가! -> html 문서에서 해당 목록이 업데이트되서 새로 추가된 항목이 화면에 표시되게 된다.

근데.. 이제 선택은 되고.. 차례로 입력은 되는데.... 저렇게 겹치게.. 나온다.. 어떻게 하지 add hidden 코드 다시 수정 봐야할 듯.... 오래걸린다.. 진짜