- 성실 온도
-
+ 성실 온도
+
+
+ }
/>
{
+ const selectedItems = useMemo(() => {
const set = new Set(selected);
- return options.filter((o) => set.has(o.value)).map((o) => o.label);
+ return options.filter((o) => set.has(o.value));
}, [options, selected]);
const remainingOptions = useMemo(() => {
@@ -99,20 +99,20 @@ export default function MultiDropdown({
)}
- {selectedLabels.map((label, idx) => (
+ {selectedItems.map((item) => (
- {label}
+ {item.label}
diff --git a/src/shared/ui/tooltip/index.tsx b/src/shared/ui/tooltip/index.tsx
new file mode 100644
index 00000000..63a933c5
--- /dev/null
+++ b/src/shared/ui/tooltip/index.tsx
@@ -0,0 +1,58 @@
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import * as React from 'react';
+import { cn } from '@/shared/shadcn/lib/utils';
+
+interface TooltipProps {
+ trigger: React.ReactElement;
+ value: React.ReactNode;
+ side?: 'top' | 'right' | 'bottom' | 'left';
+ align?: 'start' | 'center' | 'end';
+ sideOffset?: number;
+ open?: boolean;
+ defaultOpen?: boolean;
+ onOpenChange?: (open: boolean) => void;
+ contentClassName?: string;
+ arrowClassName?: string;
+}
+
+const Tooltip: React.FC = ({
+ trigger,
+ value,
+ side = 'top',
+ align = 'center',
+ sideOffset = 5,
+ open,
+ defaultOpen,
+ onOpenChange,
+ contentClassName = 'font-designer-16m rounded-100',
+ arrowClassName,
+}) => {
+ return (
+
+
+ {trigger}
+
+
+
+ {value}
+
+
+
+
+
+ );
+};
+
+export default Tooltip;
diff --git a/yarn.lock b/yarn.lock
index 2f43b386..fb80f80e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2469,6 +2469,13 @@ __metadata:
languageName: node
linkType: hard
+"@radix-ui/primitive@npm:1.1.3":
+ version: 1.1.3
+ resolution: "@radix-ui/primitive@npm:1.1.3"
+ checksum: 10c0/88860165ee7066fa2c179f32ffcd3ee6d527d9dcdc0e8be85e9cb0e2c84834be8e3c1a976c74ba44b193f709544e12f54455d892b28e32f0708d89deda6b9f1d
+ languageName: node
+ linkType: hard
+
"@radix-ui/react-arrow@npm:1.1.7":
version: 1.1.7
resolution: "@radix-ui/react-arrow@npm:1.1.7"
@@ -2627,6 +2634,29 @@ __metadata:
languageName: node
linkType: hard
+"@radix-ui/react-dismissable-layer@npm:1.1.11":
+ version: 1.1.11
+ resolution: "@radix-ui/react-dismissable-layer@npm:1.1.11"
+ dependencies:
+ "@radix-ui/primitive": "npm:1.1.3"
+ "@radix-ui/react-compose-refs": "npm:1.1.2"
+ "@radix-ui/react-primitive": "npm:2.1.3"
+ "@radix-ui/react-use-callback-ref": "npm:1.1.1"
+ "@radix-ui/react-use-escape-keydown": "npm:1.1.1"
+ peerDependencies:
+ "@types/react": "*"
+ "@types/react-dom": "*"
+ react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+ react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+ peerDependenciesMeta:
+ "@types/react":
+ optional: true
+ "@types/react-dom":
+ optional: true
+ checksum: 10c0/c825572a64073c4d3853702029979f6658770ffd6a98eabc4984e1dee1b226b4078a2a4dc7003f96475b438985e9b21a58e75f51db74dd06848dcae1f2d395dc
+ languageName: node
+ linkType: hard
+
"@radix-ui/react-dismissable-layer@npm:1.1.7":
version: 1.1.7
resolution: "@radix-ui/react-dismissable-layer@npm:1.1.7"
@@ -2809,6 +2839,34 @@ __metadata:
languageName: node
linkType: hard
+"@radix-ui/react-popper@npm:1.2.8":
+ version: 1.2.8
+ resolution: "@radix-ui/react-popper@npm:1.2.8"
+ dependencies:
+ "@floating-ui/react-dom": "npm:^2.0.0"
+ "@radix-ui/react-arrow": "npm:1.1.7"
+ "@radix-ui/react-compose-refs": "npm:1.1.2"
+ "@radix-ui/react-context": "npm:1.1.2"
+ "@radix-ui/react-primitive": "npm:2.1.3"
+ "@radix-ui/react-use-callback-ref": "npm:1.1.1"
+ "@radix-ui/react-use-layout-effect": "npm:1.1.1"
+ "@radix-ui/react-use-rect": "npm:1.1.1"
+ "@radix-ui/react-use-size": "npm:1.1.1"
+ "@radix-ui/rect": "npm:1.1.1"
+ peerDependencies:
+ "@types/react": "*"
+ "@types/react-dom": "*"
+ react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+ react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+ peerDependenciesMeta:
+ "@types/react":
+ optional: true
+ "@types/react-dom":
+ optional: true
+ checksum: 10c0/48e3f13eac3b8c13aca8ded37d74db17e1bb294da8d69f142ab6b8719a06c3f90051668bed64520bf9f3abdd77b382ce7ce209d056bb56137cecc949b69b421c
+ languageName: node
+ linkType: hard
+
"@radix-ui/react-portal@npm:1.1.6":
version: 1.1.6
resolution: "@radix-ui/react-portal@npm:1.1.6"
@@ -2869,6 +2927,26 @@ __metadata:
languageName: node
linkType: hard
+"@radix-ui/react-presence@npm:1.1.5":
+ version: 1.1.5
+ resolution: "@radix-ui/react-presence@npm:1.1.5"
+ dependencies:
+ "@radix-ui/react-compose-refs": "npm:1.1.2"
+ "@radix-ui/react-use-layout-effect": "npm:1.1.1"
+ peerDependencies:
+ "@types/react": "*"
+ "@types/react-dom": "*"
+ react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+ react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+ peerDependenciesMeta:
+ "@types/react":
+ optional: true
+ "@types/react-dom":
+ optional: true
+ checksum: 10c0/d0e61d314250eeaef5369983cb790701d667f51734bafd98cf759072755562018052c594e6cdc5389789f4543cb0a4d98f03ff4e8f37338d6b5bf51a1700c1d1
+ languageName: node
+ linkType: hard
+
"@radix-ui/react-primitive@npm:2.1.0":
version: 2.1.0
resolution: "@radix-ui/react-primitive@npm:2.1.0"
@@ -3064,6 +3142,36 @@ __metadata:
languageName: node
linkType: hard
+"@radix-ui/react-tooltip@npm:^1.2.8":
+ version: 1.2.8
+ resolution: "@radix-ui/react-tooltip@npm:1.2.8"
+ dependencies:
+ "@radix-ui/primitive": "npm:1.1.3"
+ "@radix-ui/react-compose-refs": "npm:1.1.2"
+ "@radix-ui/react-context": "npm:1.1.2"
+ "@radix-ui/react-dismissable-layer": "npm:1.1.11"
+ "@radix-ui/react-id": "npm:1.1.1"
+ "@radix-ui/react-popper": "npm:1.2.8"
+ "@radix-ui/react-portal": "npm:1.1.9"
+ "@radix-ui/react-presence": "npm:1.1.5"
+ "@radix-ui/react-primitive": "npm:2.1.3"
+ "@radix-ui/react-slot": "npm:1.2.3"
+ "@radix-ui/react-use-controllable-state": "npm:1.2.2"
+ "@radix-ui/react-visually-hidden": "npm:1.2.3"
+ peerDependencies:
+ "@types/react": "*"
+ "@types/react-dom": "*"
+ react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+ react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+ peerDependenciesMeta:
+ "@types/react":
+ optional: true
+ "@types/react-dom":
+ optional: true
+ checksum: 10c0/de0cbae9c571a00671f160928d819e59502f59be8749f536ab4b180181d9d70aee3925a5b2555f8f32d0bea622bc35f65b70ca7ff0449e4844f891302310cc48
+ languageName: node
+ linkType: hard
+
"@radix-ui/react-use-callback-ref@npm:1.1.1":
version: 1.1.1
resolution: "@radix-ui/react-use-callback-ref@npm:1.1.1"
@@ -3194,6 +3302,25 @@ __metadata:
languageName: node
linkType: hard
+"@radix-ui/react-visually-hidden@npm:1.2.3":
+ version: 1.2.3
+ resolution: "@radix-ui/react-visually-hidden@npm:1.2.3"
+ dependencies:
+ "@radix-ui/react-primitive": "npm:2.1.3"
+ peerDependencies:
+ "@types/react": "*"
+ "@types/react-dom": "*"
+ react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+ react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+ peerDependenciesMeta:
+ "@types/react":
+ optional: true
+ "@types/react-dom":
+ optional: true
+ checksum: 10c0/cf86a37f1cbee50a964056f3dc4f6bb1ee79c76daa321f913aa20ff3e1ccdfafbf2b114d7bb616aeefc7c4b895e6ca898523fdb67710d89bd5d8edb739a0d9b6
+ languageName: node
+ linkType: hard
+
"@radix-ui/rect@npm:1.1.1":
version: 1.1.1
resolution: "@radix-ui/rect@npm:1.1.1"
@@ -10629,6 +10756,7 @@ __metadata:
"@radix-ui/react-slot": "npm:^1.2.2"
"@radix-ui/react-switch": "npm:^1.2.4"
"@radix-ui/react-toggle": "npm:^1.1.9"
+ "@radix-ui/react-tooltip": "npm:^1.2.8"
"@rushstack/eslint-config": "npm:^4.1.1"
"@storybook/addon-essentials": "npm:^8.6.12"
"@storybook/addon-onboarding": "npm:^8.6.12"