베타 서비스를 열고, 디자인 수정이 들어와서 그걸로 글을 써보겠다.
이걸 보면 저렇게 글씨가 겹쳐 나오는 경우가 있다. 아마 ChatResponse
컴포넌트에서 글씨 크기 기준이 아닌 각 칸의 폭 기준으로 나열하기 때문에 생긴 문제였다.
그렇게 했던 것이 변수 나오는 것이 통일 돼서 심미성을 좀 높인 것이었는데 저렇게 돼버렸다. 고쳐보자.
다양한 해결법을 모색해보자.
whitespace-normal
, break-words
속성같은 걸 넣어서 줄바꿈 하게 만들었다. 심미적으로 큰 고통이 느껴지지만 직관적으론 좋다.
핵심인 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>
));
기존 방식과의 차이점은 부모 div
에 overflow-hidden
속성을 붙였고, 삼항연산자를 붙여 15개가 넘어갈 시 ...이 붙도록 만들었다.
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)
라는 오류가 뜨고, 다른 생성된 컴포넌트를 통해 적용해봐도 되지가 않는다;; 검색해봐도 툴팁 라이브러리를 쓴 사람이 별로 없어서 해결법을 도무지 찾을 수가 없었다. 차라리 내가 따로 구현해야겠다 마음 먹었다.
마우스오버 이벤트도 넣고 그래도 되지만, hover
와 after
를 섞어 마우스를 올릴 시 after
인 요소가 생기도록 할 것이다.
이 부분이 제일 어려웠다. 핵심은 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>
));
.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)
를 써서 span
의 title={vari}
를 가져왔고, 나머지는 요소 크기, 배치 등을 나뒀다.
가장 헤맨 데는 바로 배치다.
처음에는 마우스 오버를 하면 그 변수 기준으로 딱 중앙에 있게 하고 싶어서 absolute
를 써서 했는데 되질 않았다. 그니까 다시 말하자면
relative
)absolute
를 쓴다.이러한 기준이 있어야 각 변수 기준으로 내용이 나오는 것이다. 약간 이해가 안될텐데 나도 아직 안됐다. ㅋㅋㅋㅋ 일단 그렇게 해서 h2
안의 relative
와 span
의 variable-tooltip
안의 absolute
가 그래서 쓰인 것이다.
쨋든 그렇게 해서 아래의 결과가 나왔다!
짜잔! 잘됐다! 근데 이상한 점이 보이지 않는가? 웹 내장의 마우스 오버가 내가 생성했던 툴팁과 겹쳐서 2개가 보인다.. 왜이렇지!? 싶었는데 아마 span
을 써서 웹이 내용을 잡아주고 툴팁으로 보여주는 것 같았다.. 개열받는다. 그러면 왜 이걸 1시간동안 구현한거지? 싶었다.. 그래서 고민이다. 이걸 없앨지 말지.. 댓글로 알려주세용^^
또 문제점 하나가 저거 툴팁이 중간에 딱 오고 싶은데 absolute
를 쓰고 left
, right
로 위치 조절을 했는데 각 단어의 길이가 다르다보니 통일이 안된다;; 이건 어쩔 수 없는 부분이다..
다음 기능은 저걸 클릭 했을 때 클립보드에 복사하는 기능을 구현해 보겠다. span
분리한 김에 복사하는 기능을 가진 button
도 넣어 보겠다.
와우 진짜 수고하셨어요 !