EFFI 프로젝트 #4 nav바 side바 디자인 적용(말풍선+textoverflow 체크)

추가적으로 디자인 시안이 나왔고 nav바와 side바를 맡아서 디자인시안을 적용하는데
디스코드 처럼 서버명에 따라 font-size가 달라야했고 마우스 hover시 말풍선이 나와야 했다

고려해야 할 점

1. 텍스트가 뒷배경을 넘으면 overflow:hidden을 주는데 hidden처리가 되었는지 여부를 판단하는 법
2. 마우스 호버 시 나오는 말풍선의 구현방법과 말풍선이 가리키는 방향이 항상 유지되도록 해야했다 글자 수에 따라 말풍선 width와 height가 달라져서 이에 대한 대응이 핵심이다

접근 방법

useEffect(() => {
// 뒷배경보다 텍스트 길이가 긴지 체크
const  checkOverflow  = () => {
    if (groupItemRef.current) {
        const  roomName  =  groupItemRef.current.querySelector('div');
        const  bgImg  =  groupItemRef.current.querySelector('img');
        if (roomName  &&  bgImg) {
            const  isOverflowing  =  roomName.scrollWidth  >  bgImg.scrollWidth;
            setIsOverFlowText(isOverflowing);
        }
    }
};
checkOverflow();
}, [room_name]);

위 방법대로 데이터가 렌더링 되고 나서 체크를 해야하기 때문에 useEffect에 넣어줬고 scrollWidth값들을 비교해서 넘쳤는지 여부를 체크해서 state값을 바꿔서 font-size를 변경해줬다

• scrollWidth: 숨겨진 영역을 포함
• clientWidth: border,scroll bar를 포함하지 않음(눈에 보이는 크기)

사진과 같이 overflow에 따라 크기가 달라졌다

 

말풍선은 hover할 요소 Trigger와 말풍선 Balloon으로 만들었고 fade효과를 위해 visibility를 사용했다(display none->block은 안됨)

  Trigger: styled.div`
    position: relative;

    &:hover > div {
      visibility: visible;
      opacity: 1;
    }
  `,

  Balloon: styled.div`
    visibility: hidden;
    opacity: 0;
    position: absolute;
    width: max-content;
    max-width: 200%;
    top: 50%;
    left: 130%;
    transform: translate3d(0, -50%, 0);
    background: var(--blue01);
    color: var(--white);
    font-size: 14px;
    border-radius: 10px;
    z-index: ${zIndex.balloon};
    padding: 8px;
    transition:
      opacity 0.2s ease-in-out,
      visibility 0.2s ease-in-out;

    &:after {
      /* border-bottom: 10px solid transparent;
      border-left: 10px solid transparent;
      border-right: 10px solid var(--blue01);
      border-top: 10px solid transparent; */
      content: '';
      width: 14px;
      height: 13px;
      background-image: url(${Polygon});
      background-size: cover;
      background-repeat: no-repeat;
      position: absolute;
      top: 50%;
      left: -4px;
      transform: translate3d(-50%, -50%, 0);
    }
  `,

주석 처리된 부분에서 알 수 있듯 원래 뾰족한 화살표로 되어 있었는데 디자이너의 요청으로 둥근 화살표를 받아서 backImg로 적용해줬다

어려웠던건 :after를 사용하기 때문에 위치잡는게 어려웠다 width에 따라 위치가 바뀌는 이슈도 있었고 글자에 따라 줄바뀜과 크기가 변해야 하는 조건이 있었는데 위에 css코드를 보면

    width: max-content;
    max-width: 200%;

이 두줄로 해결할 수 있었다 일정 크기를 넘어가면 줄넘김 처리해주고 그외는 요소를 따라가도록 해줬고 화살표 위치나 풍선의 위치는

left에 px과 %를 함께 써주며 해결하였다

이후 작업

이제 곧 api가 나와서 데이터 패칭로직을 추가하게 될 것 같다 이후 추가로 디자인시간이 나오는대로 작업하면서 병렬적으로 api작업까지 함께 이루어질 예정이다