Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Tooltip 컴포넌트 제작 #7

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

feat: Tooltip 컴포넌트 제작 #7

wants to merge 5 commits into from

Conversation

ssolfa
Copy link
Contributor

@ssolfa ssolfa commented Feb 2, 2025

1️⃣ 어떤 작업을 했나요? (Summary)

2025-02-02.5.15.47.mov

Tooltip 컴포넌트를 제작했습니다.

Tooltip props 설명

position: 'top' | 'bottom' | 'left' | 'right' // 툴팁 위치 상하좌우
offset: number // 툴팁 거리 조절
  • offset prop으로 거리 조절 가능 (기본값: 10px)
  • 기본적으로 상단에 표시되며 position prop으로 위치 변경 가능
스크린샷 2025-02-02 오후 5 26 21 스크린샷 2025-02-02 오후 5 26 45

이런식으로 위치 변경 가능합니당

기존 코드에 영향을 미치는 변경사항

dialog 컴포넌트의 css도 Handy에 정의된 상수 값을 사용하는 걸로 수정했습니다!
리뷰 감사합니당

2️⃣ 알아두시면 좋아요!

Table 컴포넌트의 편집 아이콘에 Tooltip 적용하려면 이렇게 수정하면 됩니다

기존 코드

{
  !specialCols.includes(cell.column.id) &&
  <StyledEditIcon>
      <IcEditLine width={20} height={20}/>
  </StyledEditIcon>
}

Tooltip 사용 코드

{!specialCols.includes(cell.column.id) && (
  <StyledEditIcon>
    <Tooltip
      content={`${cell.row.original.name} 정보 수정`}
    >
      <IcEditLine width={20} height={20} />
    </Tooltip>
  </StyledEditIcon>
)}

이렇게 각 행의 이름과 연동해서 "[이름] 정보 수정" 텍스트를 표시해주면 돼욤

3️⃣ 추후 작업

4️⃣ 체크리스트 (Checklist)

  • main 브랜치의 최신 코드를 pull 받았나요?

@ssolfa ssolfa requested a review from owl1753 February 2, 2025 08:29
@ssolfa ssolfa self-assigned this Feb 2, 2025
@ssolfa ssolfa linked an issue Feb 2, 2025 that may be closed by this pull request
2 tasks
Copy link
Collaborator

@owl1753 owl1753 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

깔끔하네유 이 이슈랑은 상관 없는거긴 한데 테이블에 행이 굉장히 적을 때 StateButton이 테이블 뒤로 숨어버리는 문제가 있어요... css 수정 해가지고는 해결이 안되어서 ref로 Dialog가 Button을 따라가게? 해야할 거 같아요

@ssolfa
Copy link
Contributor Author

ssolfa commented Feb 4, 2025

그게 아마 여기에서 말했던 문제 중에 하나일 것 같은데 흠ㅎ 흠 흠 일단 고쳐보고 여기에 커밋해볼게욤

@owl1753
Copy link
Collaborator

owl1753 commented Feb 4, 2025

이 글의 내용과 제가 조사한 바에 따르면 GenericDialog가 position: relative고 그 안에 Dialog가 position: absolute라 이런 문제가 발생하는 거 같아요. 그래서 Dialog를 usePortal을 이용해서 body 밑으로 보내버리는 방식으로 해결하면 될 것 같아요.

@ssolfa
Copy link
Contributor Author

ssolfa commented Feb 8, 2025

일단 늦은 수정 ㅠㅠ 죄송함다

제롬 말대로

  • GenericDialog가 position: relative를 가지고 있고
  • 그 내부의 Dialog가 position: absolute를 사용하고 있어서
  • Dialog가 항상 GenericDialog를 기준으로 위치가 잡히는 문제였습니당

컴포넌트가 테이블 내부에 갇히는 문제를 해결하기 위해 렌더링 위치를 DOM 계층구조 상 document.body 직접 하위로 이동해야 했고 이를 위해 createPortal을 사용했습니ㄷㅏ

fix: Dialog 컴포넌트 최상단 고정 배치를 위해 createPortal을 사용한 버그 수정

주요 변경사항

  1. Portal 구현 추가

    • 기존: Dialog가 테이블 내부에 렌더링
    • 변경: createPortal을 사용하여 Dialog를 document.body 직접 하위에 렌더링
    return createPortal(
      <DialogContainer {...props}>{children}</DialogContainer>, // 기존과 동일
      document.body
    );
  2. Position 속성 변경

스크린샷 2025-02-08 오후 3 44 55
  • 기존: position: absolute
  • 변경: position: fixed
    • Portal로 이동된 요소의 위치를 뷰포트 기준으로 지정하기 위함
    • 스크롤 시에도 앵커 요소(버튼)와의 상대적 위치 유지 가능
  1. 위치 계산 로직 개선

    const updatePosition = () => {
      const buttonRect = anchorEl.getBoundingClientRect();
      const dialogHeight = dialogRef.current?.offsetHeight ?? 0;
      const bottomSpace = window.innerHeight - buttonRect.bottom;
      const shouldShowOnTop = bottomSpace < dialogHeight + 10;
      // ... 위치 계산
    };
    • 제롬이 첨부해준 블로그를 보니 getBoundingClientRect()로 정확한 위치 계산을 하는 방법이 좋아보여서 이걸 사용했습니당
  2. 추가로 cloneElement 코드를 리팩토링 했습니다.
    refactor: 랩핑 컴포넌트에 cloneElement대신 render props 패턴 사용
    여기에서 언급했던 cloneElement 대신 render props 패턴을 사용했습니다.
    이 블로그 참고했습니당

코드 동작 흐름

  • createPortal로 Dialog를 body 직접 하위에 렌더링
  • Dialog position을 fixed로 설정하여 뷰포트 기준 위치 지정
  • ref로 버튼(앵커) 위치를 추적하여 Dialog 위치를 동적으로 계산

입니다

적용 후 영상

2025-02-08.3.23.20.mov

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

feat: tooltip 컴포넌트 제작
2 participants