About_Section2 & Works 구현_20210602-03_Day9,10

진행 사항

02

[Client]ADD Studies Component

- Implement Studies and Modal

- Store Studies data in Firestore

- Use useState method to convey according datas to Modal component

 

03

[Client]ADD Works Section

- Implement Works Section

- Store Works data in Firestore

- Use useState method to convey according datas to Modal component

 

Firestore

 

겹친 영역 이벤터

Studies / Works 의 아이템 클릭 시 모달 창이 뜨는데, 아이템의 어떠한 부분을 클릭해도 가장 바깥쪽 즉,

Item 엘리먼트만 반응하여 App 에서 받아온 handleItem method 를 통해 해당 아이템의 데이터를 모달에 전달한다.

이 때, Item 엘리먼트 이외의 내부 엘리먼트는 반응하지 않는데, pointer-events 를 none 으로 설정하여 이벤트가 기능을 무력화 시킨다.

도움받은 사이트

겹친 영역 이벤터: https://kyounghwan01.github.io/blog/etc/CSS/dup-area-event/