[첫번째 프로젝트] 팀원 소개 페이지 만들기2

디테일을 들어가야 하는데 어렵다..

우선 오늘 해야할 일!!

 

첫번째 모달

1. 여기서 버티컬 닷을 눌렀을 때 수정, 삭제 드롭다운이 나와야함 

2. 블로그 가기 버튼에 url연동 시켜서 클릭 시 블로그 주소로 이동

3. 삭제 버튼 누르면 세번째 모달이 뿅 하고 나와야 됨

4. 엑스 버튼 누르면 창 꺼지기

 

 

모달2는 

1. 등록 버튼을 누르면 데이터베이스에 내용 저장되고 카드가 생성되어야 함
2. 엑스 버튼 누르면 창 꺼지기 


모달3는 

1. 네 버튼을 누르면 "삭제되었습니다." 알럿이 뜨고
2. 아니오 버튼 누르면 창 꺼지기
3. 엑스 버튼 눌러도 창 꺼지기 

 

---

이제 팀원들 코드들을 깃허브에서 공유하기로 했는데 

나만 코드가 HTML, CSS, JS 각각 3개씩이네?ㅎㅎ

우선 커밋하고 본다

 

---

커밋 싹 다 하고 html부터 공동 index.html에 옮겨보자

 

이 3가지 모달 html파일을 우선 팀원소개 섹션에서 각 카드들을 누르면 뜰 수 있도록 윗쪽에 배치함.

 

이 첫번째 모달에서 수정을 눌렀을 때 두번째 수정 페이지 모달창이 뜨는 js를 먼저 구동했다.

 

// 수정 버튼 클릭 시 처리
const modal_2 = document.querySelector(".modalSecond");
const btnOpenModal_2 = document.querySelector(".btnOpenModal_2");

btnOpenModal_2.addEventListener("click", () => {
  modal_2.style.display = "flex";
});

 

이렇게 했을 때 두번째 수정페이지 모달창이 잘 뜬다.

(두번째 페이지가 떴을때 첫번째 모달이 그대로 떠 있어서 그 부분은 두번째 모달이 떴을 때 사라지도록 처리해야됨->내일할겨)

 

// 첫번째 모달창 삭제 버튼 클릭 시 처리
const modal_3 = document.querySelector(".modalThird");
const btnOpenModal_3 = document.querySelector(".btn-open-modalThird");

btnOpenModal_3.addEventListener("click", () => {
  modal_3.style.display = "flex";
});

 

첫번째 모달에서 삭제 버튼 눌렀을 때 3번째 모달인 삭제창이 잘뜬다.

(모달창 3개 다 왜때문인지 연결하니까 css가 엉망이 돼벌임 ㅜㅜ 이것도 내일 한다)

 

그리고 대망의 팀원카드와 첫번째 모달창을 연결하는 난관에 봉착함

이거때메 오늘 하루 다 씀;;

const modal_1 = document.querySelector(".modalFirst");
const btnOpenModal_1 = document.querySelector(".mycard");
 
 btnOpenModal_1.addEventListener("click", () => {
  modal_1.style.display = "flex";
  });

 

처음엔 이렇게 다른 모달 연결하듯이 했다.,, 될줄 알았지...

저기서 .mycard는 다른 팀원이 만들어 둔 6개의 카드들의 클래스 네임이였다.

 

그런데 문제는 querySelector()로 마이카드에 연결 시켰더니 가장 앞에 있는 한장의 카드에만 연동이 되었다.... 잉?

원래 쿼리셀렉 메서드가 그런거래요... 

그래서 찾은 방법은 팀원이 만들어둔 카드 이벤트리스너에 내 모달을 갖다 붙이는것!!!!!

 

    cardDiv.addEventListener("click", (event) => {
      console.log(cardDiv.dataset.index + "의 상세보기 페이지");
      modal_1.style.display = "flex";
    });
  });
}

 

이것까지가 오늘 한 일...

 

나 오늘 뭐했냐... 뻘짓 하다가 하루 그냥 보냈네.. 눈물나네... ㅎㅎㅎ

할일이 아직 많으니까 내일도 아자아자!!!!