Skip to content

Commit 2d4e828

Browse files
dkpark10dkpark10
committed
refactor: 툴팁 라이브러리 적용
1 parent 819b990 commit 2d4e828

File tree

9 files changed

+204
-200
lines changed

9 files changed

+204
-200
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,6 @@
7979
"webpack-merge": "^5.10.0"
8080
},
8181
"dependencies": {
82-
"@toss/use-overlay": "^1.3.8",
8382
"clsx": "^2.1.0",
8483
"gh-pages": "^5.0.0",
8584
"lodash.isequal": "^4.5.0",
@@ -89,6 +88,7 @@
8988
"react-hot-toast": "^2.4.1",
9089
"react-icons": "^4.11.0",
9190
"react-tabs": "^6.0.2",
91+
"react-tooltip": "^5.28.0",
9292
"react-transition-group": "^4.4.5",
9393
"recoil": "^0.7.7"
9494
}

‎pnpm-lock.yaml‎

Lines changed: 36 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/tool-box-item/tool-tip.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Tooltip, type ITooltip } from 'react-tooltip';
2+
3+
export default function ToolTip({ id, place = 'right-start' }: ITooltip): JSX.Element {
4+
return (
5+
<Tooltip
6+
id={id}
7+
place={place}
8+
style={{
9+
padding: '0.25rem',
10+
backgroundColor: 'white',
11+
borderRadius: '0.125rem',
12+
fontSize: '0.875rem',
13+
color: '#292c39',
14+
}}
15+
border="1px solid #292c39"
16+
/>
17+
);
18+
}

‎src/components/tool-box-item/tool-auto-drawing.tsx‎

Lines changed: 57 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,65 @@
1-
/* eslint-disable @typescript-eslint/no-confusing-void-expression */
2-
import { createPortal } from 'react-dom';
3-
import { useEffect, useState } from 'react';
4-
import { MdAutoFixHigh } from 'react-icons/md';
5-
import { useRecoilState } from 'recoil';
6-
import { useOverlay } from '@toss/use-overlay';
7-
import clsx from 'clsx';
8-
import { currentToolAtom, type CurrentToolAtom } from '@/store';
1+
// /* eslint-disable @typescript-eslint/no-confusing-void-expression */
2+
// import { createPortal } from 'react-dom';
3+
// import { useEffect, useState } from 'react';
4+
// import { MdAutoFixHigh } from 'react-icons/md';
5+
// import { useRecoilState } from 'recoil';
6+
// import clsx from 'clsx';
7+
// import { currentToolAtom, type CurrentToolAtom } from '@/store';
98

10-
interface ModalProps {
11-
isOpen: boolean;
12-
close: () => void;
13-
}
9+
// interface ModalProps {
10+
// isOpen: boolean;
11+
// close: () => void;
12+
// }
1413

15-
function DescriptionModal({ isOpen, close }: ModalProps): JSX.Element {
16-
useEffect(() => {
17-
close();
18-
}, [isOpen, close]);
14+
// function DescriptionModal({ isOpen, close }: ModalProps): JSX.Element {
15+
// useEffect(() => {
16+
// close();
17+
// }, [isOpen, close]);
1918

20-
// eslint-disable-next-line react/jsx-no-useless-fragment
21-
if (!isOpen) return <></>;
19+
// // eslint-disable-next-line react/jsx-no-useless-fragment
20+
// if (!isOpen) return <></>;
2221

23-
return createPortal(
24-
<div className="absolute top-[213px] left-[90px]">
25-
<span className="p-1 bg-white rounded text-sm border border-solid border-[#292c39]">
26-
자동 그리기 모드를 활성화 합니다.
27-
</span>
28-
</div>,
29-
document.getElementById('portal') as Element,
30-
);
31-
}
22+
// return createPortal(
23+
// <div className="absolute top-[213px] left-[90px]">
24+
// <span className="p-1 bg-white rounded text-sm border border-solid border-[#292c39]">
25+
// 자동 그리기 모드를 활성화 합니다.
26+
// </span>
27+
// </div>,
28+
// document.getElementById('portal') as Element,
29+
// );
30+
// }
3231

33-
export default function ToolAutoDrawing(): JSX.Element {
34-
const [currentToolState, setCurrentToolState] = useRecoilState(currentToolAtom);
32+
// export default function ToolAutoDrawing(): JSX.Element {
33+
// const [currentToolState, setCurrentToolState] = useRecoilState(currentToolAtom);
3534

36-
const [hover, setHover] = useState(false);
37-
const overlay = useOverlay();
35+
// const [hover, setHover] = useState(false);
36+
// const overlay = useOverlay();
3837

39-
useEffect(() => {
40-
overlay.open(({ close }) => <DescriptionModal isOpen={hover} close={close} />);
41-
}, [hover, overlay]);
38+
// useEffect(() => {
39+
// overlay.open(({ close }) => <DescriptionModal isOpen={hover} close={close} />);
40+
// }, [hover, overlay]);
4241

43-
return (
44-
<button
45-
onClick={() => {
46-
setCurrentToolState(
47-
(prev): CurrentToolAtom => ({
48-
...prev,
49-
autoDrawing: !prev.autoDrawing,
50-
}),
51-
);
52-
}}
53-
type="button"
54-
onMouseOver={() => setHover(true)}
55-
onFocus={() => setHover(true)}
56-
onMouseOut={() => setHover(false)}
57-
onBlur={() => setHover(false)}
58-
className={clsx([
59-
currentToolState.autoDrawing && 'bg-[#e0e0e0]',
60-
'border border-solid border-[#292c39] flex items-center p-2 justify-center hover:bg-[#e0e0e0]',
61-
])}
62-
>
63-
<MdAutoFixHigh size={23} />
64-
</button>
65-
);
66-
}
42+
// return (
43+
// <button
44+
// onClick={() => {
45+
// setCurrentToolState(
46+
// (prev): CurrentToolAtom => ({
47+
// ...prev,
48+
// autoDrawing: !prev.autoDrawing,
49+
// }),
50+
// );
51+
// }}
52+
// type="button"
53+
// onMouseOver={() => setHover(true)}
54+
// onFocus={() => setHover(true)}
55+
// onMouseOut={() => setHover(false)}
56+
// onBlur={() => setHover(false)}
57+
// className={clsx([
58+
// currentToolState.autoDrawing && 'bg-[#e0e0e0]',
59+
// 'border border-solid border-[#292c39] flex items-center p-2 justify-center hover:bg-[#e0e0e0]',
60+
// ])}
61+
// >
62+
// <MdAutoFixHigh size={23} />
63+
// </button>
64+
// );
65+
// }

‎src/components/tool-box-item/tool-color.tsx‎

Lines changed: 16 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,28 @@
1-
/* eslint-disable @typescript-eslint/no-confusing-void-expression */
2-
import { createPortal } from 'react-dom';
31
import { type HexColor } from 'custom-type';
4-
import { useEffect, useRef, useState } from 'react';
2+
import { useRef } from 'react';
53
import { IoMdColorFill } from 'react-icons/io';
64
import { useRecoilState } from 'recoil';
7-
import { useOverlay } from '@toss/use-overlay';
5+
import { Tooltip } from 'react-tooltip';
86
import { currentToolAtom, type CurrentToolAtom } from '@/store';
97

10-
interface ModalProps {
11-
isOpen: boolean;
12-
close: () => void;
13-
}
14-
15-
function DescriptionModal({ isOpen, close }: ModalProps): JSX.Element {
16-
useEffect(() => {
17-
close();
18-
}, [isOpen, close]);
19-
20-
// eslint-disable-next-line react/jsx-no-useless-fragment
21-
if (!isOpen) return <></>;
22-
23-
return createPortal(
24-
<div className="absolute top-[167px] left-[90px]">
25-
<span className="p-1 bg-white rounded text-sm border border-solid border-[#292c39]">
26-
그려지는 영역의 색상을 조정합니다.
27-
</span>
28-
</div>,
29-
document.getElementById('portal') as Element,
30-
);
31-
}
32-
338
export default function ToolColor(): JSX.Element {
349
const [currentToolState, setCurrentToolState] = useRecoilState(currentToolAtom);
3510

3611
const colorElementRef = useRef<HTMLInputElement>(null);
3712

38-
const [hover, setHover] = useState(false);
39-
const overlay = useOverlay();
40-
4113
const onClickColorTool = (): void => {
4214
if (colorElementRef.current === null) return;
4315
colorElementRef.current.click();
4416
};
4517

46-
useEffect(() => {
47-
overlay.open(({ close }) => <DescriptionModal isOpen={hover} close={close} />);
48-
}, [hover, overlay]);
49-
5018
return (
5119
<button
5220
onClick={onClickColorTool}
5321
type="button"
5422
tabIndex={0}
23+
data-tooltip-id="tooltip-draw-color"
24+
data-tooltip-content="그려지는 영역의 색상을 조정합니다."
5525
onKeyDown={onClickColorTool}
56-
onMouseOver={() => setHover(true)}
57-
onFocus={() => setHover(true)}
58-
onMouseOut={() => setHover(false)}
59-
onBlur={() => setHover(false)}
6026
className="border border-solid border-[#292c39] flex items-center p-2 justify-center hover:bg-[#e0e0e0]"
6127
>
6228
<input
@@ -75,6 +41,18 @@ export default function ToolColor(): JSX.Element {
7541
}}
7642
/>
7743
<IoMdColorFill size={23} />
44+
<Tooltip
45+
id="tooltip-draw-color"
46+
place="right-start"
47+
style={{
48+
padding: '0.25rem',
49+
backgroundColor: 'white',
50+
borderRadius: '0.125rem',
51+
fontSize: '0.875rem',
52+
color: '#292c39',
53+
}}
54+
border="1px solid #292c39"
55+
/>
7856
</button>
7957
);
8058
}

‎src/components/tool-box-item/tool-draw-border.tsx‎

Lines changed: 15 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,12 @@
1-
/* eslint-disable @typescript-eslint/no-confusing-void-expression */
2-
import { createPortal } from 'react-dom';
3-
import { useEffect, useState } from 'react';
41
import { TbBoxAlignBottomRightFilled } from 'react-icons/tb';
52
import { useRecoilState } from 'recoil';
6-
import { useOverlay } from '@toss/use-overlay';
3+
import { Tooltip } from 'react-tooltip';
74
import clsx from 'clsx';
85
import { currentToolAtom, type CurrentToolAtom } from '@/store';
96

10-
interface ModalProps {
11-
isOpen: boolean;
12-
close: () => void;
13-
}
14-
15-
function DescriptionModal({ isOpen, close }: ModalProps): JSX.Element {
16-
useEffect(() => {
17-
close();
18-
}, [isOpen, close]);
19-
20-
// eslint-disable-next-line react/jsx-no-useless-fragment
21-
if (!isOpen) return <></>;
22-
23-
return createPortal(
24-
<div className="absolute top-[213px] left-[90px]">
25-
<span className="p-1 bg-white rounded text-sm border border-solid border-[#292c39]">
26-
그려지는 영역의 색상을 채웁니다.
27-
</span>
28-
</div>,
29-
document.getElementById('portal') as Element,
30-
);
31-
}
32-
337
export default function ToolDrawBorder(): JSX.Element {
348
const [currentToolState, setCurrentToolState] = useRecoilState(currentToolAtom);
359

36-
const [hover, setHover] = useState(false);
37-
const overlay = useOverlay();
38-
39-
useEffect(() => {
40-
overlay.open(({ close }) => <DescriptionModal isOpen={hover} close={close} />);
41-
}, [hover, overlay]);
42-
4310
return (
4411
<button
4512
onClick={() => {
@@ -50,17 +17,27 @@ export default function ToolDrawBorder(): JSX.Element {
5017
}),
5118
);
5219
}}
20+
data-tooltip-id="tooltip-draw-border"
21+
data-tooltip-content="그려지는 영역의 색상을 채웁니다."
5322
type="button"
54-
onMouseOver={() => setHover(true)}
55-
onFocus={() => setHover(true)}
56-
onMouseOut={() => setHover(false)}
57-
onBlur={() => setHover(false)}
5823
className={clsx([
5924
!currentToolState.drawBorder && 'bg-[#e0e0e0] hover:bg-[#e0e0e0]',
6025
'border border-solid border-[#292c39] flex items-center p-2 justify-center hover:bg-[#e0e0e0]',
6126
])}
6227
>
6328
<TbBoxAlignBottomRightFilled size={23} />
29+
<Tooltip
30+
id="tooltip-draw-border"
31+
place="right-start"
32+
style={{
33+
padding: '0.25rem',
34+
backgroundColor: 'white',
35+
borderRadius: '0.125rem',
36+
fontSize: '0.875rem',
37+
color: '#292c39',
38+
}}
39+
border="1px solid #292c39"
40+
/>
6441
</button>
6542
);
6643
}

0 commit comments

Comments
 (0)