✂️ 분배된 이슈

UI 이슈 해결 (#68, https://github.com/boostcampwm-2022/web33-Mildo/issues/86)

🚩 구현 목표

상세모달창 제목 애니메이션 변경 (v)

검색창 포커스 시 아웃라인 해제

로그인 모달창, 사이드바 모달창 애니메이션 적용

검색 자동완성 모달 너비 길이 조절

🍀 세부 목표

🖥️ 구현 내용

상세모달창 제목 애니메이션 변경

export const Title = styled.h1`
  ...
  /* width: 100%; */
	...
`;

• width: 100% 제거 → 이걸로 인해 offsetWidth, clientWidth, scrollWidth이 모두 같은 px이 나오기 때문에 제목의 width를 정확하게 측정할 수 없게 된다.

const titleWidthRef = useRef<HTMLHeadingElement>(null);
...
useEffect(() => {
  if (titleWidthRef && titleWidthRef.current) {
    setTitleWidth(titleWidthRef.current.clientWidth);
  }
}, [firstLevelInfo]);

• titleWidthRef 속성을 Title 엘리먼트에 설정하여, 해당 엘리먼트에 대응하는 width를 구할 수 있도록 한다.
• 원래는 useLayoutEffect로 구현하고자 했다. useLayoutEffect를 사용하게 된다면 화면 깜빡임 문제를 해결할 수 있다는 장점과, 렌더링 시점에서 동기적으로 실행되기 때문에 속도가 느려진다는 단점을 안고 있다. 속도의 느림 현상을 유의미하게 체감하지는 않았기 때문에 일단은 useEffect를 사용해서 구현했다. (참고 자료: https://guiyomi.tistory.com/120)

const [windowWidth, setWindowWidth] = useState<number>(window.innerWidth);

useEffect(() => {
    const checkViewportWidth = () => {
      setWindowWidth(window.innerWidth);
    };

    window.addEventListener('resize', checkViewportWidth);

		// 클린업 함수
    return () => {
      window.removeEventListener('resize', checkViewportWidth);
    };
  }, []);

• 그 다음으로는, 뷰포트(화면 전체)의 너비를 구하기 위한 코드를 작성했다. window.innerWidth로 초기화를 진행했다.