feat-fe: 범용 Tooltip 컴포넌트 구현, 대시보드 사이드바 버그 수정 및 리팩토링 #986

github-actions · 2025-01-12T10:56:03Z

Original issue description

목적

현재 툴팁 요소는 공고 대시보드 사이드바 영역이 접혀있는 경우에 한해 각 아이콘 버튼에만 적용되어 있는 상태입니다.
이 툴팁은 최종 데모데이를 하루 앞두고 HTML+CSS 만으로 급조되었습니다. 독립된 컴포넌트로 구현되지 못했을 뿐만 아니라 재사용성 또한 거의 없는 상태입니다.
아울러 한 번 렌더링 완료된 상태의 부모 요소 위치에 종속된 position을 가지고 있어, 스크롤 또는 화면 resizing 등의 변화에 대응하지 못하는 문제도 가지고 있습니다.
이에 독립된 형태의, 재사용성 높은 범용 Tooltip 컴포넌트를 구현하여 위의 문제들을 해결하고자 합니다.

작업 세부사항

범용 Tooltip 컴포넌트 구현
- 선호 위치, 원 요소와의 거리, maxWidth, zIndex 등 커스텀 가능한 요소 적용
- 화면 리사이징 혹은 스크롤에 대응
- 툴팁 위치가 화면 viewport를 벗어날 경우 처음 선호 위치의 반대 방향으로 표시되도록 구현

참고 사항

본 작업은 아래 이슈에 대한 해결을 함께 겸합니다.
- fix-fe: 사이드바 태그 버그 수정 #948

아래의 별표줄 밑에 요구사항 ID만 작성해주세요. Prefix 금지!

COMM_TOOLTIP_01

크루루 팀의 일원으로서 올려드리는 마지막 PR입니다.
본래는 아래의 3개로 분리되었어야 할 작업이나, 과업 진행 여건을 고려하여 PR 리뷰의 편의를 돕고자 하나로 합쳤습니다.

범용 Tooltip 컴포넌트 구현
대시보드 사이드바 화면에서 스크롤 동작 시 Tooltip 요소가 어긋나는 문제 수정
대시보드 사이드바 영역의 컴포넌트 구조 전면 리팩토링

마지막까지 잘 부탁드립니다.

목적

서비스 화면 어디에서나 Wrapper 형태로 가져다 쓸 수 있는 범용 Tooltip 컴포넌트를 새롭게 구현합니다.
새로 구현한 Tooltip 컴포넌트를 대시보드 사이드바에 적용합니다.
대시보드 사이드바 코드 구조를 전면 리팩토링합니다.

작업 세부사항

범용 Tooltip 컴포넌트 구현

Tooltip 컴포넌트 구현
- 화면상 툴팁 렌더링은 리액트의 createPortal을 이용한 DOM 삽입 방법을 이용했습니다. (TooltipPortal.tsx 참고)
- 렌더링된 툴팁의 위치는 Element.getBoundingClientRect와 window.scrollX/Y, document.documentElement.scrollLeft/Top를 활용해 실시간 계산하여 Ref로 삽입하는 구조를 가집니다.
8방향 Tooltip 배치 유형 구현
- top, topRight, right, bottomRight, bottom, bottomLeft, left, topLeft의 8방향을 placement prop으로 받습니다.
- 기본값은 top입니다.
기타 Tooltip 배치에 필요한 커스터마이징 요소 구현
- zIndex : zIndex값을 부여합니다. 기본값은 9999입니다.
- distanceFromTarget : 툴팁을 표시할 타겟 요소와의 거리를 정합니다. 기본값은 8(px)입니다.
- maxWidth : 툴팁의 최대 너비를 정합니다. 정해질 경우 내부 텍스트는 줄바꿈이 이루어집니다.
Tooltip UI 테스트용 스토리보드 구현
- 다양한 시나리오에 따라 직접 테스트 해보실 수 있도록 준비했습니다.

대시보드 사이드바 화면에서 스크롤 동작 시 Tooltip 요소가 어긋나는 문제 수정

Tooltip 배치 시 브라우저 뷰포트 영역 대응
- 만약 설정된 placement 값대로 배치한 Tooltip이 브라우저의 뷰포트 바깥 영역으로 나갈 경우, Tooltip은 placement 설정값의 반대 방향으로 자동 배치됩니다. (예: right의 경우 left 방향으로 전환 배치)
- 만약 양쪽 중 어느 방향에 Tooltip을 배치하더라도 뷰포트에서 벗어나는 경우, Tooltip은 원래 설정값대로 배치됩니다. (물론 이럴 경우는 거의 없을 것으로 생각됩니다)
화면 스크롤, 리사이징 상태에 모두 대응
- 아래 이슈에 따른 툴팁 버그를 함께 해결했습니다. 이제 타겟 요소의 위치 변경, 스크롤, 리사이징에 모두 유연하게 대응 가능합니다.
- fix-fe: 사이드바 태그 버그 수정 #948

대시보드 사이드바 영역의 컴포넌트 구조 전면 리팩토링

사이드바 구조 리팩토링
- 아래 이미지와 같은 구조로 재구성했습니다.

구현 화면

사이드바 툴팁 적용 화면

Jan-22-2025.20-49-39.mp4

배치 방향별 툴팁 표시 화면

Jan-22-2025.20-50-60.mp4

스크롤 시 동작 테스트 화면

Jan-22-2025.20-52-37.mp4

참고사항

Tooltip 컴포넌트는 Molecule로 구분하여 두었습니다. Content, Portal 등 여러 요소를 결합하여 구성하였기에 이 분류가 적절하다고 판단했습니다. 혹시 다른 의견이 있으시다면 편히 말씀 주세요.

관련 이슈

closes feat-fe: 범용 Tooltip 컴포넌트 구현 #985, fix-fe: 사이드바 태그 버그 수정 #948

…LTIP_01

github-actions · 2025-01-22T11:57:04Z

1737547023.635199

lurgi

넘 깔끔하게 코로케이션 해주시고, 역할에 따라 컴포넌트 구성해주셔서 너무 보기 편했씁니다 ㅎㅎ 너무 깔끔합니다!
스토리북도 너무 자세하게 적어주셔서 놀랍네요 ㅋㅋㅋㅋ 너무 고생하셨습니다!

툴팁이 적용된 건 아니고 컴포넌트 수정만 이루어진 것으로 보이네요!
'버그 수정'이라고 되어있어서 적용까지 고려하셨는지 여쭤봅니다!

lurgi · 2025-01-27T12:09:38Z

frontend/src/components/_common/molecules/Tooltip/TooltipContent.tsx

+    useEffect(() => {
+      const tooltipObj = ref as RefObject<HTMLDivElement>;
+      if (!tooltipObj.current) return;
+
+      tooltipObj.current.style.left = `${positionX}px`;
+      tooltipObj.current.style.top = `${positionY}px`;
+
+      if (maxWidth) {
+        tooltipObj.current.style.maxWidth = `${maxWidth}px`;
+      }
+    }, [maxWidth, positionX, positionY, ref]);
+
+    return (
+      <S.ContentContainer
+        ref={ref}
+        placement={placement}
+        zIndex={zIndex}
+        data-visible={isVisible}
+      >
+        {content}
+      </S.ContentContainer>
+    );
+  },


useEffect를 사용하신 이유가 따로 있으실까요? S.ContentContainer 내부에 style을 바로 적용해도 될 것 같단 생각이 들었습니다!

리사이징이나 스크롤 상황에서의 위치 변화에 대응하려면 DOM 요소에 스타일을 직접 주입하는 것이 퍼포먼스 측면에서 더 나을 거라 생각해서 이렇게 구현했었어요. 그런데 실제로 실험해보니, style prop으로 위치를 내려주는 것과 useEffect를 사용하는 것 사이의 유의미한 차이가 없었네요 😅

따라서 스타일의 선언적 관리, 그리고 코드의 가독성을 고려하여 러기 의견대로 스타일 적용 구조를 바꾸었습니다. 피드백 감사해요 👍

refactor: TooltipContent의 컨테이너 스타일을 useEffect 대신 prop 방식으로 주입

아 그리고 툴팁은 사이드바 영역에 전부 새로 적용되어 있습니다. 버그도 모두 고쳐진 상태입니다 :)

llqqssttyy

안녕하세요, 아르! 드디어 마지막 작업이었네요.
사이드바 리팩토링, Tooltip 컴포넌트 생성 확인했습니다. 제 환경에서는 버그도 없었어요.
아키텍처가 탄탄하고 변수명도 직관적이어서 술술 읽히는 코드였습니다.
이것이 아르 코어?

마지막 작업 고생 많으셨습니다. 출국하시기 전에 한번 뵙죠!
가족분들과 함께 따뜻하고 즐거운 설 연휴 보내시길 바랍니다. 새해 복 많이 받으세용.

…LTIP_01

lurgi · 2025-01-31T00:10:32Z

frontend/src/components/_common/molecules/Tooltip/TooltipContent.tsx

+    const style: React.CSSProperties = {
+      left: `${positionX}px`,
+      top: `${positionY}px`,
+      maxWidth: maxWidth ? `${maxWidth}px` : undefined,
+    };


선언적으로 사용하셨군요 👍

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Seongjin Hong <[email protected]>

Create draft PR for #985

ff23813

github-actions bot added feature 새로운 기능 frontend 프론트엔드 labels Jan 12, 2025

github-actions bot assigned seongjinme Jan 12, 2025

github-actions bot added this to the 스프린트 7.0 milestone Jan 12, 2025

seongjinme added 14 commits January 14, 2025 22:49

Merge remote-tracking branch 'origin/fe/develop' into 985-fe-COMM_TOO…

b193813

…LTIP_01

Merge remote-tracking branch 'origin/fe/develop' into 985-fe-COMM_TOO…

272a5e2

…LTIP_01

chore: eslint 규칙 변경 (no-use-before-define)

fba4da8

feat: 툴팁 컴포넌트에 대한 8방향 위치 좌표 계산 구현

5ea6b40

feat: 툴팁 컴포넌트 공통 타입 지정

28b9e92

refactor: 공통 타입 분리 및 import 처리

5bc6584

feat: 툴팁 컴포넌트 및 구성요소, 스타일 구현

61f5a46

fix: 스크롤 상태에서 툴팁 위치가 어긋나는 문제 수정

de8a34c

fix: 툴팁 내부에 텍스트만 허용되도록 수정

b0d418d

fix: 툴팁 내부 텍스트에 줄바꿈 허용

e679346

test: UI 테스트용 Storybook 코드 구현

80e45b0

fix: 툴팁 컴포넌트 사이드바 적용 및 스크롤 위치에 따른 툴팁 위치 버그 수정

fa039a5

refactor: 공고 대시보드 Sidebar를 여러 컴포넌트로 분리 및 재구축

ce0df62

Merge remote-tracking branch 'origin/fe/develop' into 985-fe-COMM_TOO…

0a9723e

…LTIP_01

seongjinme changed the title ~~feat-fe: 범용 Tooltip 컴포넌트 구현~~ feat-fe: 범용 Tooltip 컴포넌트 구현, 대시보드 사이드바 버그 수정 및 리팩토링 Jan 22, 2025

seongjinme marked this pull request as ready for review January 22, 2025 11:56

seongjinme requested review from llqqssttyy and lurgi January 22, 2025 11:57

lurgi reviewed Jan 27, 2025

View reviewed changes

llqqssttyy approved these changes Jan 27, 2025

View reviewed changes

seongjinme added 2 commits January 28, 2025 19:33

refactor: TooltipContent의 컨테이너 스타일을 useEffect 대신 prop 방식으로 주입

56d9ca8

Merge remote-tracking branch 'origin/fe/develop' into 985-fe-COMM_TOO…

76a3528

…LTIP_01

seongjinme requested a review from lurgi January 28, 2025 10:46

lurgi approved these changes Jan 31, 2025

View reviewed changes

seongjinme merged commit 8259f61 into fe/develop Jan 31, 2025
35 of 36 checks passed

seongjinme deleted the 985-fe-COMM_TOOLTIP_01 branch January 31, 2025 00:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat-fe: 범용 Tooltip 컴포넌트 구현, 대시보드 사이드바 버그 수정 및 리팩토링 #986

feat-fe: 범용 Tooltip 컴포넌트 구현, 대시보드 사이드바 버그 수정 및 리팩토링 #986

github-actions bot commented Jan 12, 2025 •

edited by seongjinme

Loading

github-actions bot commented Jan 22, 2025

lurgi left a comment

lurgi Jan 27, 2025

seongjinme Jan 28, 2025

seongjinme Jan 28, 2025 •

edited

Loading

llqqssttyy left a comment

lurgi Jan 31, 2025 •

edited

Loading

feat-fe: 범용 Tooltip 컴포넌트 구현, 대시보드 사이드바 버그 수정 및 리팩토링 #986

feat-fe: 범용 Tooltip 컴포넌트 구현, 대시보드 사이드바 버그 수정 및 리팩토링 #986

Conversation

github-actions bot commented Jan 12, 2025 • edited by seongjinme Loading

목적

작업 세부사항

참고 사항

목적

작업 세부사항

범용 Tooltip 컴포넌트 구현

대시보드 사이드바 화면에서 스크롤 동작 시 Tooltip 요소가 어긋나는 문제 수정

대시보드 사이드바 영역의 컴포넌트 구조 전면 리팩토링

구현 화면

사이드바 툴팁 적용 화면

배치 방향별 툴팁 표시 화면

스크롤 시 동작 테스트 화면

참고사항

관련 이슈

github-actions bot commented Jan 22, 2025

lurgi left a comment

Choose a reason for hiding this comment

lurgi Jan 27, 2025

Choose a reason for hiding this comment

seongjinme Jan 28, 2025

Choose a reason for hiding this comment

seongjinme Jan 28, 2025 • edited Loading

Choose a reason for hiding this comment

llqqssttyy left a comment

Choose a reason for hiding this comment

lurgi Jan 31, 2025 • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Jan 12, 2025 •

edited by seongjinme

Loading

seongjinme Jan 28, 2025 •

edited

Loading

lurgi Jan 31, 2025 •

edited

Loading