• Modal 만들기
  • 기본 컨테이너 figma에 맞게 디자인
  • 외부 스크롤 막기 useEffect body overflow hidden
  • 열기 닫기 기능, 외부 영역 클릭시 Modal 창 닫기
• 상세하게 검색하기 and 나에게 맞는 스터디
  • 상세하기 검색하기 상세 필터 온 오프 기능
  • 모달 제어권 상세하게 검색하기에 넘김
  • 나에게 맞는 스터디 버튼만 제작
• 더보기 버튼 관련 로직
  • 더보기 버튼 페이지네이션과 동일한 기능을 갖게 로직 구현
  • 더보기 버튼 활성화 관련 로직 구현
• 프로그래머스 코딩테스트 Lv.2 정답률 높은 거 두개 풀었음

---

Modal

외부 스크롤 막기

body에 overflow: hidden속성 주기

CSS 트릭으로써 원하지 않는 스크롤이 생기는 것을 방지하기 위함이며, 보여주려고 하는 컨텐츠가 원하는 영역에 맞춰서 보여질 수 있게 하기 위함이다.

body에 width heigt는 유저에게 보여지는 뷰포트에 따라 자동적으로 width와 height가 설정된다.

Portals

Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공합니다.

ReactDOM.createPortal(child, container)

MouseDown vs Click

click event의 버블링 문제로 mouseDown event와 click 이벤트의 차이점에 대해서 살펴보았다.

1. click
   -사용자가 해당 element에서 마우스 버튼을 눌렀을 때 발생합니다.

2. mousedown
   -사용자가 해당 element에서 마우스 버튼을 눌렀을 때 발생합니다.

3. event의 흐름

mousedown ⇒ mouseup ⇒ click

• 실험하다 알게 된 것 : 어찌보면 당연한 것이지만 click event에서 해당 엘리먼트에 mousedown이후 해당 엘리먼트 외부에서 mouseup을 하면 click event가 감지되지 않는다.