[Feat] 나의 과제 페이지 Tooltip, Popover 컴포넌트 구현

[SeieunYoo]

🎉 변경 사항

• 나의 과제 페이지 피그마 상에 나와있는 Tooltip 과 Popover 를 구현합니다.
  • 피그마 상에는 Tooltip 으로 되어있긴 한데 아래의 컴포넌트가 Tooltip 으로 담기에는 정보양이 많고 클릭을 통해 트리거 되는 컴포넌트 라서 Popover 라는 컴포넌트로 분리해서 구현합니다.
    

🚩 관련 이슈

🙏 여기는 꼭 봐주세요!

이슈❗

• 위치 확인 불가 팝업 컴포넌트 같은 경우에는 크기가 박스를 넘어서 짤려 보이고 있습니다. 현재 Box 리스트쪽에 Box 가 많아졌을 때 가로 스크롤 을 위한 overflow-x: auto 속성 때문인 거 같아요
• Box 리스트를 기준으로 팝오버 컴포넌트의 위치를 absolute 로 잡으면 해결은 되는데 팝오버 컴포넌트의 위치를 아이콘 아래로 잡아주기 위해선 스크롤이 될 때마다 위치를 계속 계산해줘야되는데 올바른 액션은 아닌 거 같아서 노운 이슈로 가져갑니다.. 좋은 해결 방법이나 구현 방법 있다면 알려주시면 감사하겠습니더,,

[SeieunYoo]

client 에서 밖에 안쓰이는 것 같아서 우선 client component 쪽에 위치 시켰습니다

[hamo-o]

수고하셨습니다!!
++ 올려 주신 이슈는 디자이너 분들이 z-index(Elevation)를 정리해서 넘겨주시면 저희도 거기에 맞춰서 z-index를 설정하면 어떨까요?

[ghdtjgus76]

이런 에러가 발생해서.. key 값 확인 한 번 부탁드립니다!

그리고 Popover 안 보이는 이슈는 일단 다른 방법은 생각이 안 나서 계산해서 써야 할 거 같습니다...

[ghdtjgus76]

p4;
해당 페이지 코드 보다가 든 생각인데, section 태그는 컴포넌트 내부에 숨기고 가장 외부 태그로 사용하면 더 좋을 거 같아요

<>
      <header>
        <Flex gap="sm" textStyle="h1">
          <styled.h1 color="textBlack">나의 과제</styled.h1>
          <Image alt="dot" height={6} src="/images/dot.svg" width={6} />
          <styled.h1 color="primary">기초 웹 스터디</styled.h1>
        </Flex>
      </header>
      <Space height={8} />
      <AssignmentDescription />
      <Space height={48} />
      <section>
        <AssignmentContent />
      </section>
      <Space height={64} />
      <section>
        <AssignmentHistory />
      </section>
    </>

[ghdtjgus76]

헤더 부분도 컴포넌트로 빼면 어떨까...하는 생각이 듭니다

[SeieunYoo]

생각해보니 Header 부분에서도 스터디 기본 정보 api를 호출해서 title 을 얻어와야 해서 Header 컴포넌트로 분리해씁니다!

[ghdtjgus76]

이거 반영해주셨는데 페이지 부분에 section 태그가 남아있어서 그 부분만 반영 부탁드려요!

[SeieunYoo]

요거 스크롤 할 때 위치 계산하도록 옵저버 달아서 구현 시도하고 있는데.. 팝오버가 완전히 아이콘 아래를 따라가지 못해서 어색한 동작이 될 것 같아요.. ㅜ

우선 이슈로 남겨두고 구현 방안을 더 고민해봐도 될까요..?!
차선책으로는 스크롤에선 지원되지 않는 것을 감수하거나 아래 이미지처럼 Box container 의 height 를 고정시켜서 팝오버의 높이까지 포함해버리는 방식이 있을 거 같아요..🥺

[ghdtjgus76]

이거 반영해주셨는데 페이지 부분에 section 태그가 남아있어서 그 부분만 반영 부탁드려요!

[ghdtjgus76]

요거 스크롤 할 때 위치 계산하도록 옵저버 달아서 구현 시도하고 있는데.. 팝오버가 완전히 아이콘 아래를 따라가지 못해서 어색한 동작이 될 것 같아요.. ㅜ

우선 이슈로 남겨두고 구현 방안을 더 고민해봐도 될까요..?! 차선책으로는 스크롤에선 지원되지 않는 것을 감수하거나 아래 이미지처럼 Box container 의 height 를 고정시켜서 팝오버의 높이까지 포함해버리는 방식이 있을 거 같아요..🥺

저는 일단 다 보이긴 해야 할 거 같아서 아래 방식이 나은 거 같기는 합니다..
일단 아래처럼 해놓고 추후 더 좋은 방식이 생각나면 반영하는 거 어때요?

[SeieunYoo]

• 우선 높이값 고정으로 해결해봅니다..🙏

[github-actions]

🚀 storybook: https://66af2a2e127e648606c08a4a-nzzwmhxyxt.chromatic.com/