[Refactor] SideNavBar qa 해결

[rtttr1]

해당 이슈 번호

closed #447

---

체크리스트

• 🔀 PR 제목의 형식을 잘 작성했나요? e.g. [feat] PR을 등록한다.
• 💯 테스트는 잘 통과했나요?
• 🏗️ 빌드는 성공했나요?
• 🧹 불필요한 코드는 제거했나요?
• ✅ 컨벤션을 지켰나요?
• 💭 이슈는 등록했나요?
• 🏷️ 라벨은 등록했나요?
• 💻 git rebase를 사용했나요?
• 🙇‍♂️ 리뷰어를 지정했나요?

---

📌 내가 알게 된 부분

---

snb qa 해결했습니다!

💎 PR Point

---

✅ ToolTip 화살표 빈칸 해결

기존에 툴팁 컴포넌트는 화살표를 svg 파일로 사용해주었습니다. 즉 svg + div 태그의 조합으로 툴팁을 구현했는데 화면을 확대했을 때 소수점 단위의 px 계산의 오차로 1px씩 사이가 벌어지는 버그가 있었습니다.
이 오류를 어떻게 해결해야하나 구글을 떠돌다가 해당 자료에서의 Tooltip 구현 코드를 참고하여 문제를 해결해주었습니다!

'&::after': {
      content: '""', 
      position: 'absolute',

      right: '100%',
      transform: `translateY(-50%) translateX(calc(0 - 6px))`,

      borderWidth: '6px',
      borderStyle: 'solid',
      borderColor: `transparent ${theme.colors.gray_900} transparent transparent`,
},

after 선택자로 글씨가 담겨있는 툴팁의 몸통의 뒤에 가상요소를 만들어줍니다. 이때 content='""' 으로 빈값을 주어 내용이 없는 요소를 만들어줍니다. 이 요소에 border 값을 주면 다음과 같이 상하좌우로 4개의 삼각형이 만들어집니다. (한눈에 파악할 수 있게 각 border에 다른 색상을 주었습니다.)

만일 content가 있는 상태라면 사실 border는 이렇게 끝부분이 반 잘려있는 형태의 모습인거죠!

이 삼각형 모양의 border를 이용하여 저희는 툴팁의 화살표를 구현할 수 있습니다.
원하는 크기만큼 borderWidth 값을 줍니다. 그리고 원하는 방향의 삼각형을 제외하고는 borderColor에 transparent 속성을 주어 배경과 색이 같게 합니다. 이렇게 만들어진 화살표의 위치를 잘 조정해주면 다음과 같이 툴팁을 구현할 수 있습니다!

📌스크린샷 (선택)

[github-actions]

🚀 Storybook 확인하기 🚀

• Build
• Preview

[wuzoo]

고생하셨습니다 ~!! 요고 참고해서 제 PR 머지시킬게요 !

[wuzoo]

요고는 기디측의 요구사항이였나용 ?

[rtttr1]

넵 8개 이상이 되면 아이콘들이 겹치는 뷰가 나와서 마우스 스크롤 보다는 개수제한이 리소스적으로 나을것 같아서 일단 개수제한을 두기로 했습니다!