ksw_devlog
TIL 03.08 - 최종 프로젝트 5주차 본문
모달창 (영역 밖 클릭 시 닫기)
검색창 밖 영역을 클릭하면 모달창이 사라지게 하기
// 검색창 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;
`
그러나 검색창 드랍다운 위치를 정확하게 지정하지 못하여서 보류하였다..
다른 사용자 화면에는 검색창 아이콘이랑 간격이 벌어지게 보였다.
참고자료 :
'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 |