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로 초기화를 진행했다.
• 클린업 함수를 넣었다. 이 함수는 재렌더링이 되는 시점과 새로운 useEffect 함수가 호출되는 시점 사이에 실행된다. 따라서 ‘resize'이벤트가 발생하게 되면 checkViewportWidth → setWindowWidth를 통해 새로운 window.innerWidth으로 값을 갱신시켜 주고, 재렌더링 된다.
• ‘클린업 함수’를 통해 컴포넌트가 언마운트되는 경우에는 이벤트 리스너가 실행되지 않도록 설정한다.

const [slidable, setSlidable] = useState<boolean>(true);
...
useEffect(() => {
  if (titleWidth + 50 > windowWidth) {
    setSlidable(true);
    return;
  }
  setSlidable(false);
}, [titleWidth, windowWidth]);

• 이제 titleWidth, windowWidth를 전부 걸어주었기 때문에, 그 다음에는 slidable속성을 걸어주어야 한다. titleWidth, windowWidth의 상태값이 변화할 때마다 바뀔 수 있도록 설정하였으며, 만약에 제목이 너무 길다고 판단되는 경우에는 애니메이션 효과를 걸어두고, 그렇지 않은 경우에는 애니메이션 효과를 걸지 않도록, **setSlidable()**을 통해서 값을 설정했다.

<Title ref={titleWidthRef} slide={slidable} textWidth={titleWidth}>
  현재&nbsp;
  <TitleLocation
    populationLevel={firstLevelInfo[1].populationLevel}>
    {firstLevelInfo[0]}
  </TitleLocation>
  {INFO_DETAIL_TITLE[firstLevelInfo[1].populationLevel]}
</Title>
{slidable ? (
  <Title
    ref={titleWidthRef}
    slide={slidable}
    textWidth={titleWidth}>
    현재&nbsp;
    <TitleLocation
      populationLevel={firstLevelInfo[1].populationLevel}>
      {firstLevelInfo[0]}
    </TitleLocation>
    {INFO_DETAIL_TITLE[firstLevelInfo[1].populationLevel]}
  </Title>
) : (
  <></>
)}

export const Title = styled.h1<TitleTypes>`
  display: block;
  text-align: center;
  font-size: 1rem;
  white-space: nowrap;
  will-change: transform;
  animation: ${props =>
    props.slide
      ? css`
          ${marquee(props.textWidth)} 10s linear infinite
        `
      : ''};
`;

• 이제 slidable 상태값을 기반으로 Title에서 slide props로 넘겨주고, styled-component에서 slide의 값에 따라 애니메이션 구현 여부를 설정한다.
• textWidth props를 통해 marquee 속성을 적용할 때, 해당 텍스트 길이에 맞는 값을 넣어준다. 결과적으로 텍스트 길이 여부에 상관없이 모두가 동일한 위치에서 동일한 속도로 이동하게 된다.
• 결론: keyframes의 transform: translate() 속성의 x값을 해당 텍스트 길이를 기반으로 설정하고, flexbox의 gap 속성을 50%로 설정, 마지막으로 두 개의 Title 엘리먼트를 렌더링 시켜주면 가장 최적화된 애니메이션이 완성되는 것 같다.

&:focus {
    outline: none;
}

• 해당 엘리먼트에 focus 이벤트 적용할 시 outline: none 을 적용하여 간단하게 해결.

• 로그인 모달과 사이드바의 모달 애니메이션을 다르게 적용하려고 했지만, 각각 따로 애니메이션을 적용하는 일이 생각보다 꽤 귀찮은 일이기 때문에 하나의 애니메이션으로 동일하게 적용하고자 했다.

return (
    <>
      {/* {isOpen && (
        <>
          {background && <Filter onClick={clickModalHandler} />}
          <ModalContainer customModalStyle={customModalStyle}>
            {children}
          </ModalContainer>
        </>
      )} */}
      <Filter onClick={clickModalHandler} open={isOpen && background} />
      <ModalContainer customModalStyle={customModalStyle} open={isOpen}>
        {children}
      </ModalContainer>
    </>
  );
};

• 일단 삼항연산자를 걷어냈다. 특히, 무언가를 보여주려고 애니메이션을 거는 경우에는 display: none을 걸거나 삼항연산자를 사용하게 된다면 나중에 display 속성을 걸어줄 수가 없기 때문이다. 그 대신에, Filter 컴포넌트와 ModalContainer에 open prop을 추가해서, 해당 prop의 boolean 유/무에 따라 애니메이션을 어떻게 적용할 것인 지에 대해서 작성할 예정이었다.

const ModalContainer = styled.div<ModalContainerProps>`
  z-index: ${Z_INDEX.MODAL};
  ${props => props.customModalStyle && props.customModalStyle}
  /* display: ${props => !props.open && 'none'}; */
  visibility: ${props => (props.open ? 'visible' : 'hidden')};
  ${props => !props.open && `z-index: -100`};
  animation: ${props =>
    props.open
      ? css`
          ${fadeIn} .2s linear
        `
      : css`
          ${fadeOut} .2s linear
        `};
`;

const Filter = styled.div<{ open: boolean }>`
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: ${Z_INDEX.FILTER};
  background-color: rgba(0, 0, 0, 0.5);
  /* display: ${props => (props.open ? 'block' : 'none')}; */
  visibility: ${props => (props.open ? 'visible' : 'hidden')};
	${props => !props.open && `z-index: -100`};
  animation: ${props =>
    props.open
      ? css`
          ${fadeIn} .2s linear
        `
      : css`
          ${fadeOut} .2s linear
        `};
`;

• 그 다음으로는 display: none 속성을 삭제했다. 해당 속성을 적용하게 되면 애니메이션이 제대로 적용되지 않을 수 있기 때문이다. 그 대신에, visibility 속성과 z-index 속성을 적용해서 안보이게끔 처리를 진행한 다음, 애니메이션이 진행됨의 여부에 따라서 변화를 주기로 생각했다.
• 애니메이션은 @keyframes 를 적용하고자 노력하였고, open prop의 boolean 속성 여부에 따라 fadeIn 애니메이션을 부여할 지, fadeOut 애니메이션을 부여할 지에 대한 여부를 판단할 수 있도록 했다.

const fadeIn = keyframes`
  0% {
    opacity: 0;
    display: block;
  } 
  100% { 
    opacity: 1;
  }
`;

const fadeOut = keyframes`
  0% {
    opacity: 1;
    display: block;
  } 
  100% { 
    opacity: 0;
  }
`;

• 마지막으로 fadeIn 옵션과 fadeOut 옵션을 살펴보면, 다음과 같이 @keyframes 를 적용해서 나타내기로 했다.

이 부분에 대한 기능 구현은 ‘상세모달창 제목 애니메이션 변경’과 흡사하게 **useRef()**를 사용해서 구현하였다.

...

const searchBarWidthRef = useRef<HTMLInputElement>(null);
const [searchBarWidth, setSearchBarWidth] = useState(0);

...

useEffect(() => {
    const checkSearchBarWidth = () => {
      if (searchBarWidthRef && searchBarWidthRef.current!.clientWidth <= 439) {
        setSearchBarWidth(searchBarWidthRef.current!.clientWidth);
      }
    };

    window.addEventListener('resize', checkSearchBarWidth);

    return () => {
      window.removeEventListener('resize', checkSearchBarWidth);
    };
  }, []);

...

return (
    <FlexBoxStyle>
      <SearchBar
        placeholder='검색'
        onChange={onChangeSearchBar}
        value={searchAreaName}
        ref={searchBarWidthRef}
      />
      <MyButton
        onClick={onClickMyButton}
        dangerouslySetInnerHTML={{
          __html: createMyButtonSvg()
        }}></MyButton>
      <RelatedAreaList
        searchAreaName={searchAreaName}
        relatedAreaInfo={relatedAreaInfo}
        widthValue={searchBarWidth}
      />
    </FlexBoxStyle>
  );

• searchBarWidthRef를 구현하였다. 이 ref는 SearchBar 내부에서 사용되어지는 ref로, 너비를 측정하기 위해서 만들었다. 이 ref 값을 SearchBar의 ref로 등록하게 되면, searchBarWidthRef를 사용해서 값을 구할 수 있다.
• **useEffect()**를 사용해서 이전과 비슷하게 이를 구현하였다. window.addEventListener를 이용해서 ‘resize’ 이벤트를 걸면, checkSearchBarWidth 함수가 실행된다. 검색바의 최댓값이 439픽셀이기 때문에 이 범위 내에 있는 경우에만 setSearchBarWidth() 함수를 실행시키고 상태값을 바꾼다. 이 때, 값을 바꾸는 기준은 바로 'ref’를 건 대상의 width 값이다.
• RelatedAreaList 엘리먼트에 widthValue 속성값을 내려준다. searchBarWidth는 setSearchBarWidth() 함수로 인하여 바뀌어지는 값이다.

...

const RelatedAreaListStyle = styled.ul<{ width: number }>`
  width: ${props => props.width}px;
  max-width: 439px;
  max-height: 15rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 3.5rem;
  background-color: white;
  border-radius: 10px;
  border: none;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
  list-style: none;
`;

...

return (
    <>
      {isRelatedAreaListOpen && (
        <RelatedAreaListStyle
          onClick={onClickRelatedAreaList}
          width={widthValue}>
          {isEmptyRelatedList ? (
            <RelatedAreaItem
              searchAreaName={searchAreaName}
              areaInfo={emptyAreaInfo}
            />
          ) : (

• RelatedAreaListStyle 엘리먼트에서 받아온 widthValue를 width로 내여주면, styled-components에서 width 값을 검색창 바와 동일하게 사용할 수 있게 된다.

• 현재 **상세모달(1단계)**에서 보여주고 있는 제목 관련 부분이 화면이 작은 모바일에서는 잘려져서 나오기 때문에, 이를 애니메이션화해서 보여주어야 합니다. 어떤 방식으로 애니메이션화를 진행하면 좋을 지 찾던 중에 다음의 링크를 통해 margin-left, margin-right 속성을 부여해서 보여주면 될 것 같다는 생각이 들었다.
• animation: 12s autoplay3 infinite linear
  • infinite: 애니메이션을 무한히 반복할 수 있도록 설정한다.
  • linear: 선형적으로 움직일 수 있게끔 설정한다. linear 속성을 적용하면 항상 일정하게 움직일 수 있게 된다.
• offsetWidth, clientWidth, scrollWidth
  • 일단, **vw(viewport-width)**와 현재 제목의 width 속성을 동시에 구한 다음, 이들 간의 길이를 비교해서 경우에 따라 다른 효과를 적용해야 한다. 만약에 vw가 더 큰 경우에는 굳이 overflow가 발생하지 않기 때문에 애니메이션을 구현하지 않아도 된다. 그러나, 만약에 제목의 width가 더 큰 경우에는 제목이 잘려서 보여지기 때문에 애니메이션 효과를 구현해야 한다.
  • 이 세가지 width 속성이 모두 다르고, 이들 중에 어떤 width 속성을 적용해야 할 지 고민되었다.
    • 일반적으로 엘리먼트의 전체 크기를 알고 싶다면, offsetWidth와 offsetHeight 속성
    • 실제로 보여지고 있는 컨텐츠가 얼마만큼의 공간을 차지하고 있는지 확인하고 싶다면, clientWidth와 clientHeight 속성
    • 보이는 것과 상관 없이 실제 컨텐츠 영역이 얼마만큼의 크기를 갖고 있는지 확인하고 싶다면, scrollWidth와 scrollHeight 속성
• useLayoutEffect
  • useEffect와 여러 모로 비슷해 보이지만, 둘 간의 차이는 분명히 존재한다.
    • useEffect는 렌더링을 진행하고 페인트된 이후에 실행된다. 그리고 이 작업이 비동기적으로 실행된다는 특징을 가지고 있다. 그러나, useLayoutEffect는 렌더링과 페인팅 사이에 실행되며 이 작업은 동기적으로 실행된다는 특징을 가지고 있다.