[✨포트폴리오] Tooltip 추가하기

JiEun·2023년 11월 2일

포트폴리오

목록 보기

4/5

🤔 툴팁(Tooltip)이란?

툴팁은 사용자의 동선을 방해하지 않으면서 특정 기능이나 업데이트된 서비스를 가볍게 소개할 때 사용된다.
사용자가 익숙하지 않은 기능을 이해할 수 있게 도와주는 역할이다.

출처 : https://yozm.wishket.com/magazine/detail/1292/

네이버

구글 메일

주로 아이콘으로만 표현할 때 사용자가 알기 어렵기 때문에 자주 사용한다.

네이버, 구글 등의 플랫폼은 물론 여러 사이트에서도 Tooltip을 제공하는 곳이 많아졌다.

현재 포트폴리오에서 몇몇 버튼을 사용자가 알기 쉽도록 Tooltip을 추가하기로 했다.

tilwindCSS에서 라이브러리를 제공하지만 라이브러리 없이도 쉽게 만들 수 있어 직접 작업하기로 했다.

사실 소셜 링크 영역을 필요 없을 수도 있지만
velog라는 블로그 이름을 모르는 사람이 있을 수도 있다 생각하게 되었고
마우스 호버 시 한글로 '블로그'가 나오면 좀 더 직관적으로 표현 할 수 있지 않을까 싶었다.

물론 a태그에서 제공하는 title 속성을 사용해도 되지만
마우스를 오랫동안 가져다 대어야 하고 ~~예쁘지가 않다...~~

Tooltip을 재사용 할 수 있도록 컴포넌트를 따로 분리해서 값을 props로 내려줘 만들었다.

// Tootip.tsx
function DataToolTip({ children, dataTooltip, type }:
  {
    children: React.ReactNode,
    dataTooltip: string,
    type: string,
  }) {

  return (
    <PToolTip type={type} data-tooltip={dataTooltip}>
      {children}
      <CToolTip type={type}>
        <ToolTipText>
          {dataTooltip}
        </ToolTipText>
      </CToolTip>
    </PToolTip>
  )
}

또한 Tooltip 위치를 type이라는 props를 통해 위치를 지정할 수 있도록 스타일을 줬다.

// Tootip.tsx
import tw from 'tailwind-styled-components';

type StylePropsT = {
  type: string;
}

export const PToolTip = tw.div<StylePropsT>`
  relative
  flex  
  ${(props) => props.type === 'bottom' && 'justify-center'}
  ${(props) => props.type === 'top' && 'justify-center'}
  ${(props) => props.type === 'right' && 'items-center'}
  ${(props) => props.type === 'left' && 'items-center'} 
  group/tooltip
`;

export const CToolTip = tw.div<StylePropsT>`
  fixed
  flex
  items-center
  justify-center
  overflow-hidden
  rounded
  px-2
  py-1
  ${(props) => props.type === 'bottom' && 'translate-y-[140%]'}
  ${(props) => props.type === 'top' && 'translate-y-[-140%]'}
  ${(props) => props.type === 'right' && 'translate-x-[110%]'}
  ${(props) => props.type === 'left' && 'translate-x-[-110%]'} 
  invisible

  after:absolute
  after:flex
  after:left-0
  after:top-0
  after:right-0
  after:bottom-0
  after:w-full
  after:h-full
  after:bg-[#232323]
  after:opacity-80
  after:z-[-1]

  group-hover/tooltip:visible
`;

export const ToolTipText = tw.span`
  text-[12px]
  text-white
`;

transform으로 x, y축으로 왼쪽, 오른쪽, 위쪽, 아래쪽 위치를 지정하고 간격을 조절했다.

기존 코드에 Tooltip을 추가했다.

💻 이전 코드

// Nav.tsx
<SocialList>
  <SocialLink href='https://velog.io/@crg1050' title='바로가기(새창)' target='_blank'>Velog</SocialLink>
  <SocialLink href='https://github.com/jieun419' title='바로가기(새창)' target='_blank'>Github</SocialLink>
  <SocialLink href='https://overjoyed-process-2b8.notion.site/8716c49fa7ae4667b2694850020ec331?pvs=4' title='바로가기(새창)' target='_blank'>Resume</SocialLink>
</SocialList>

💻 작업 후 코드

// Nav.tsx
<DataToolTip dataTooltip='블로그' type='bottom'>
  <SocialLink href='https://velog.io/@crg1050' aria-label='Velog' target='_blank'>
    Velog
  </SocialLink>
</DataToolTip>

<DataToolTip dataTooltip='GitHub' type='bottom'>
  <SocialLink href='https://github.com/jieun419' aria-label='GitHub' target='_blank'>GitHub</SocialLink>
</DataToolTip>

<DataToolTip dataTooltip='이력서' type='bottom'>
  <SocialLink href='https://overjoyed-process-2b8.notion.site/8716c49fa7ae4667b2694850020ec331?pvs=4' aria-label='이력서' target='_blank'>Resume</SocialLink>
</DataToolTip>

4.리팩토링 하기

해당 코드에서 봤듯이 반복적인 코드가 많다.
프론트에서 이걸 보면 map() 메소드가 생각 날 것이다.~~(못 참지)~~
바로 리팩토링해 보자!

// constant.ts
export const socialLink = [
  {
    id: 1,
    datatooltip: '블로그',
    tooltiptype: 'bottom',
    href: 'https://velog.io/@crg1050',
    arialabel: 'Velog',
    target: '_blank',
  }, {
    id: 2,
    datatooltip: 'GitHub',
    tooltiptype: 'bottom',
    href: 'https://github.com/jieun419',
    arialabel: 'GitHub',
    target: '_blank',
  }, {
    id: 3,
    datatooltip: '이력서',
    tooltiptype: 'bottom',
    href: 'https://overjoyed-process-2b8.notion.site/8716c49fa7ae4667b2694850020ec331?pvs=4',
    arialabel: 'Resume',
    target: '_blank',
  },
]
.
.
.
// Nav.tsx
{socialLink.map((item) => (
  <DataToolTip key={item.id} dataTooltip={item.datatooltip} type={item.tooltiptype}>
    <SocialLink href={item.href} aria-label={item.arialabel} target={item.target}>
      {item.arialabel}
    </SocialLink>
  </DataToolTip>
))}

socialLink라는 데이터를 만들어 map()메소드를 사용해
10줄 이상이 였던 코드가 간결해 졌다.

또한 socialLink 데이터는 자주 값이 변경되지 않는다.
컴포넌트 내부에서 관리하기 보단 constant파일에 따로 관리하는게 좋다.

✨ 완성

<DataToolTip dataTooltip='피드백 주기' type='left'>
  <MailSentBtn />
</DataToolTip>

type에 따라 Tooltip 위치를 조절할 수 있고
컴포넌트를 따로 분리해 다른 영역에도 사용할 수 있게 되었다.

이로 인해 사용자에게 해당 기능에 대해 이해를 줄 수 있게 됐다.

🔗 변경된 포트폴리오 보기

🔗 GitHub 바로가기

🔗 포트폴리오 개선하기 회고

JiEun

💻 프론트엔드를 목표로 성장 중! (알아봤던 내용 등을 정리하기)

[✨포트폴리오] Tooltip 추가하기