yamoo9
commented
1 year ago 문제 원인
CSS 만으로 상태를 제어하고, 싱글 페이지 애플리케이션 방식(CSR: Client Side Routing)으로 라우팅 하기에 문제가 발생하였습니다. 🤔
문제 해결
이 문제 해결을 위해 StProfileBox 요소에 클릭 이벤트를 연결해 :hover 또는 :focus-within 일시적으로 해제해야 합니다.
아래 작성된 코드를 참고하세요.
const stModalContainerRef = useRef(null);<StProfileBox
aria-label="프로필 페이지로 이동합니다."
to="/profile-page"
onClick={() => {
const modalContainer = stModalContainerRef.current;
if (stModalContainerRef.current) {
modalContainer.style.display = 'none';
setTimeout(() => {
modalContainer.style.removeProperty('display');
}, 10);
}
}}
>아래는 문제가 해결된 영상입니다. 참고하세요. 😃
가이드 파일
첨부된 가이드 파일을 확인해보세요.
변경섭
문제 상황
저번에 키보드로 로고모달 접근 질문으로 within 으로 야무쌤께 접근 가능하다는 답변을 받았습니다!
키보드로 접근이 잘 되었지만 프로필 전환 클릭 시 페이지 이동이 되어도 모달 창이 계속 남아있는 것을 알게되었습니다.
이 문제를 해결하기 위해 상태값을 주고 closeModal을 해보았지만 잘 되지 않았습니다.
페이지 이동 클릭 후 로고모달창이 비활성화 되게 할 수 있을까요?
프로젝트 저장소 URL
브랜치명 : bug/#97 저장소 주소 : https://github.com/kyungseob7/together/tree/bug/%2397 파일명 : Header.jsx , LogoModal.jsx
환경 정보