Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

ksw_devlog

TIL 03.08 - 최종 프로젝트 5주차 본문

TIL

TIL 03.08 - 최종 프로젝트 5주차

kimcoach 2023. 3. 9. 00:33
모달창 (영역 밖 클릭 시 닫기)

검색창 밖 영역을 클릭하면 모달창이 사라지게 하기

 

// 검색창 currentTarget
  const searchRef = useRef(null);
  
  // 검색창 드랍다운 생성유뮤
  const [isSearchUserDropDown, setIsSearchUserDropDown] = useState(false);
  
  const searchModalOutSideClick = (e) => {
    // 검색창 영역 밖 클릭하면 닫히게 하기
    if (searchRef.current === e.target) {
      setSearchdropDownClick(false);
    }
  };
  
  .....
  
  return (
  	<>
    <div onClick={openModal}>
    {isSearchUserDropDown &&
    <Layer
    	ref={searchRef}
        onClick={(e)=>searchModalOutSideClick(e)}
    > // 전체영역
    <ModalLayer>
    <Modal />
    </ModalLayer>
    </Layer>
    }
    </div>
    </>
    )
    
    ....
    
    //스타일컴포넌트 (예시, position fixed가 중요)
const Layer = styled.div`
   z-index: 1500;
   display: block;
   background: rgba(0,0,0,0.3);
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
`
const ModalLayer = styled.div`
  z-index:2000;
  width: 400px;
  height: 600px;
  position:fixed;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%) !important;
`

그러나 검색창 드랍다운 위치를 정확하게 지정하지 못하여서 보류하였다..

다른 사용자 화면에는 검색창 아이콘이랑 간격이 벌어지게 보였다.

 

참고자료 :

https://velog.io/@leejpsd/React-%EB%AA%A8%EB%8B%AC%EC%98%81%EC%97%AD-%EB%B0%96-%ED%81%B4%EB%A6%AD%EC%8B%9C-%EB%8B%AB%EA%B8%B0

 

React 모달 밖 영역 클릭시 닫기

React 모달영역 밖 클릭시 닫기

velog.io

 

'TIL' 카테고리의 다른 글

최종 프로젝트 회고  (0) 2023.03.20
TIL 03.09 - 최종 프로젝트 5주차  (0) 2023.03.10
TIL 03.07 - 최종 프로젝트 5주차  (0) 2023.03.07
TIL 03.06 - 최종 프로젝트 5주차  (0) 2023.03.07
WIL 18주차 - 최종 프로젝트 4주차  (0) 2023.03.06