개인프로젝트: VarGen(7)-건의 받은 문제 수정

윤뿔소·2023년 3월 31일
0

개인프로젝트: VarGen

목록 보기
14/15

베타 서비스를 열고, 디자인 수정이 들어와서 그걸로 글을 써보겠다.

문제 발생

이걸 보면 저렇게 글씨가 겹쳐 나오는 경우가 있다. 아마 ChatResponse 컴포넌트에서 글씨 크기 기준이 아닌 각 칸의 폭 기준으로 나열하기 때문에 생긴 문제였다.

그렇게 했던 것이 변수 나오는 것이 통일 돼서 심미성을 좀 높인 것이었는데 저렇게 돼버렸다. 고쳐보자.

해결법 탐색

다양한 해결법을 모색해보자.

줄바꿈

whitespace-normal, break-words 속성같은 걸 넣어서 줄바꿈 하게 만들었다. 심미적으로 큰 고통이 느껴지지만 직관적으론 좋다.

overflow-hidden

핵심인 overflow-hidden 속성을 붙여 가리고, 뒤에 ...을 붙여 심미적이면서도 잘렸다는 걸 보여줄 수 있는 방법이다.

코드

const variableList = variableArr?.map((vari) => (
  <div key={vari} className="lg:w-1/4 md:w-1/2 p-4 w-full overflow-hidden">
    <div className="mt-4">
      <h2 className="text-gray-900 font-sans text-3xl font-medium text-center">
        {vari.length > 15 ? vari.slice(0, 15) + "..." : vari}
      </h2>
    </div>
  </div>
));

기존 방식과의 차이점은 부모 divoverflow-hidden 속성을 붙였고, 삼항연산자를 붙여 15개가 넘어갈 시 ...이 붙도록 만들었다.

react-tooltip

hidden을 하는 와중에 리액트 툴팁 라이브러리를 따로 사용해서 마우스오버하면 그 변수의 풀네임 나타나도록 하는 것이다. 이런 식으로 말이다.

overflow-hidden에 더 나아가서 이 라이브러리를 넣으면 정말 좋을 것이다.


해결법을 모색했을 때 잘리는 게 낫다고 판단이 들었다. 잘려도 ... 앞에 그 단어 그대로 복사하면 원문 그대로 복사한 게 나오고, 툴팁까지 사용하면 이제 직관도 제대로 볼 수 있으니까 말이다. 이제 툴팁까지 적용해보겠다.

해결 적용

잘리고 ...을 적용하는 것은 아까 코드에서 봤듯이 아래처럼 적용하고,

const variableList = variableArr?.map((vari) => (
  <div key={vari} className="lg:w-1/4 md:w-1/2 p-4 w-full overflow-hidden">
    <div className="mt-4">
      <h2 className="text-gray-900 font-sans text-3xl font-medium text-center">
        {vari.length > 15 ? vari.slice(0, 15) + "..." : vari}
      </h2>
    </div>
  </div>
));

이제 툴팁을 적용하려고 했는데

JSX 요소 형식 'ReactTooltip'에 구문 또는 호출 시그니처가 없습니다.ts(2604)

라는 오류가 뜨고, 다른 생성된 컴포넌트를 통해 적용해봐도 되지가 않는다;; 검색해봐도 툴팁 라이브러리를 쓴 사람이 별로 없어서 해결법을 도무지 찾을 수가 없었다. 차라리 내가 따로 구현해야겠다 마음 먹었다.

툴팁 구현하기

마우스오버 이벤트도 넣고 그래도 되지만, hoverafter를 섞어 마우스를 올릴 시 after인 요소가 생기도록 할 것이다.

1. variableList

이 부분이 제일 어려웠다. 핵심은 15를 기준으로 마우스 오버가 되고 안되고를 나눴고, cursor-pointer하고, 부모인 h2엔 relative를 뒀다. 또 자식으로 span.variable-tooltip를 만들었는데, 이 이유는 다음에 기술 하겠다.

const variableList = variableArr?.map((vari) => (
  <div key={vari} className="lg:w-1/4 md:w-1/2 p-4 w-full">
    <div className="mt-4">
      {vari.length > 15 ? (
        <h2 className="text-gray-900 font-sans text-3xl font-medium text-center cursor-pointer relative">
          <span className="variable-tooltip" title={vari}>
            {vari.slice(0, 15) + "..."}
          </span>
        </h2>
      ) : (
        <h2 className="text-gray-900 font-sans text-3xl font-medium text-center">{vari}</h2>
      )}
    </div>
  </div>
));

2. variable-tooltip

.variable-tooltip:hover:after {
  content: attr(title);
  @apply absolute top-[-30px] right-1/3 bg-black dark:bg-white text-white dark:text-black px-3 rounded whitespace-nowrap text-lg;
}

:hover:after를 붙여 hover할 시 요소가 보이게 만들었다. content: attr(title)를 써서 spantitle={vari}를 가져왔고, 나머지는 요소 크기, 배치 등을 나뒀다.

가장 헤맨 데는 바로 배치다.

처음에는 마우스 오버를 하면 그 변수 기준으로 딱 중앙에 있게 하고 싶어서 absolute를 써서 했는데 되질 않았다. 그니까 다시 말하자면

  1. 자기자신을 기준으로 하는 요소 안에서 기준 잡고(relative)
  2. 이제 툴팁이 나오는 위치가 고정된 자식 요소에서 오버됐을 시 위치를 고정하기 위해 absolute를 쓴다.

이러한 기준이 있어야 각 변수 기준으로 내용이 나오는 것이다. 약간 이해가 안될텐데 나도 아직 안됐다. ㅋㅋㅋㅋ 일단 그렇게 해서 h2안의 relativespanvariable-tooltip안의 absolute가 그래서 쓰인 것이다.

쨋든 그렇게 해서 아래의 결과가 나왔다!

짜잔! 잘됐다! 근데 이상한 점이 보이지 않는가? 웹 내장의 마우스 오버가 내가 생성했던 툴팁과 겹쳐서 2개가 보인다.. 왜이렇지!? 싶었는데 아마 span을 써서 웹이 내용을 잡아주고 툴팁으로 보여주는 것 같았다.. 개열받는다. 그러면 왜 이걸 1시간동안 구현한거지? 싶었다.. 그래서 고민이다. 이걸 없앨지 말지.. 댓글로 알려주세용^^

또 문제점 하나가 저거 툴팁이 중간에 딱 오고 싶은데 absolute를 쓰고 left, right로 위치 조절을 했는데 각 단어의 길이가 다르다보니 통일이 안된다;; 이건 어쩔 수 없는 부분이다..

다음 기능은 저걸 클릭 했을 때 클립보드에 복사하는 기능을 구현해 보겠다. span 분리한 김에 복사하는 기능을 가진 button도 넣어 보겠다.

profile
코뿔소처럼 저돌적으로

6개의 댓글

comment-user-thumbnail
2023년 4월 2일

와우 진짜 수고하셨어요 !

답글 달기
comment-user-thumbnail
2023년 4월 2일

앗.. 웹에서 제공하는 기본 툴팁을 안보이게 하는 방법은 없는걸까요..

답글 달기
comment-user-thumbnail
2023년 4월 2일

진짜 너무 고생하셨습니다! 결과물 최고 ..👍🏻

답글 달기
comment-user-thumbnail
2023년 4월 2일

피드백 빠른 개발자님 👍

답글 달기
comment-user-thumbnail
2023년 4월 2일

피드백이 좋은 개발자! 참된 개발자!

답글 달기
comment-user-thumbnail
2023년 4월 3일

훨씬 깔끔하네요 ! 고생하셨습니다 !

답글 달기