[Fix] 쌓임맥락 고려하여 Tooltip 재배치

[namdaeun]

해당 이슈 번호

closed #313

---

체크리스트

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

---

📌 내가 알게 된 부분

---

쌓임 맥락이라는 개념에 대해 막연하게 듣기만 했는데 이걸 이제야 개념을 이해한 것 같습니다.

현재 Tooltip은 SideNavBar 컴포넌트 내부에 위치하고 있으며, SideNavBar 구조는 아래와 같습니다:

      <Login>
        <ModalContainer />

        <SideNavBar />

        <div css={layoutStyle}>
          <main css={outletStyle}>
            <Header />
            <Outlet />
          </main>
          <GlobalDrawer />
        </div>
      </Login>

Tooltip이 다른 컴포넌트에 의해 가려지는 문제의 원인은 부모 컴포넌트인 SideNavBar에 쌓임 맥락이 생성되어 있지 않기 때문입니다. 여기서 "쌓임 맥락이 생성된다"는 것은 z-index가 auto가 아닌 값으로 지정되어 있는 것을 의미합니다.

Tooltip 컴포넌트는 SideNavBar의 쌓임 맥락을 따르기 때문에, 단순히 z-index를 부여해도 부모의 쌓임 맥락에 가로막혀 contentBox에 의해 가려지는 문제가 발생한 것입니다.

따라서 SideNavBar의 스타일에 zIndex를 부여함으로써 해결할 수 있었어요.

아티클 참고하시면 좋을 것 같습니다

📌스크린샷 (선택)

2024-11-05.5.07.27.mov

[Bowoon1216]

굳굳 짱짱입니다 수고하셨습니다!

[wuzoo]

고생고생 하셧슴다 ~

[rtttr1]

LGTM!!!

[cindy-chaewon]

레전드 개발자 당니언니!!