Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions next.config.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
// output: 'standalone',
/* config options here */
// 외부 이미지 도메인 허용 설정 추가
images: {
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
"@radix-ui/react-slot": "^1.2.2",
"@radix-ui/react-switch": "^1.2.4",
"@radix-ui/react-toggle": "^1.1.9",
"@radix-ui/react-tooltip": "^1.2.8",
"@tailwindcss/postcss": "^4.0.6",
"axios": "^1.9.0",
"class-variance-authority": "^0.7.1",
Expand Down
22 changes: 16 additions & 6 deletions src/features/my-page/ui/profile.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { cn } from '@/shared/shadcn/lib/utils';
import UserAvatar from '@/shared/ui/avatar';
import Badge from '@/shared/ui/badge';
import Progress from '@/shared/ui/progress';
import Tooltip from '@/shared/ui/tooltip';

interface ProfileProps {
memberId: number;
Expand Down Expand Up @@ -80,12 +81,21 @@ export default function Profile({
<div className="flex flex-col gap-100">
<div className="flex flex-row justify-between">
<div className="flex flex-row items-center gap-50">
<span>성실 온도</span>
<Image
src="/images/help_outline.png"
alt="성실온도 설명"
width={16}
height={16}
<span className="font-designer-14m text-text-default">
성실 온도
</span>
<Tooltip
value="성실 온도는 스터디에서 받은 만족도를 기반으로 만든 매너 지표예요."
side="right"
contentClassName="rounded-150 font-designer-14r"
trigger={
<Image
src="/images/help_outline.png"
alt="성실온도 설명"
width={16}
height={16}
/>
Comment on lines +92 to +97
Copy link
Contributor

Choose a reason for hiding this comment

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

혹시 아이콘을 클릭하면 value가 나타나는 걸로 이해했는데 맞을까요?!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

클릭하지 않아도 원래 띄워져야 하는데..ㅜㅜ 배포가 실패하며 반영되지 않은 것 같습니다

}
/>
</div>
<div
Expand Down
14 changes: 7 additions & 7 deletions src/shared/ui/dropdown/multi.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,10 @@ export default function MultiDropdown({
[value],
);

const selectedLabels = useMemo(() => {
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(() => {
Expand Down Expand Up @@ -99,20 +99,20 @@ export default function MultiDropdown({
</span>
)}

{selectedLabels.map((label, idx) => (
{selectedItems.map((item) => (
<span
key={`${label}-${idx}`}
key={item.value}
className="bg-fill-brand-default-default text-text-inverse font-designer-14m flex items-center gap-50 rounded-full px-150 py-75"
>
{label}
{item.label}
<button
type="button"
onClick={(e) => {
e.stopPropagation();
remove(selected[idx] as string);
remove(item.value);
}}
className="cursor-pointer"
aria-label={`${label} 제거`}
aria-label={`${item.label} 제거`}
>
<XIcon size={16} />
</button>
Expand Down
58 changes: 58 additions & 0 deletions src/shared/ui/tooltip/index.tsx
Original file line number Diff line number Diff line change
@@ -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<TooltipProps> = ({
trigger,
value,
side = 'top',
align = 'center',
sideOffset = 5,
open,
defaultOpen,
onOpenChange,
contentClassName = 'font-designer-16m rounded-100',
arrowClassName,
}) => {
return (
<RadixTooltip.Provider>
<RadixTooltip.Root
open={open}
defaultOpen={defaultOpen}
onOpenChange={onOpenChange}
>
<RadixTooltip.Trigger asChild>{trigger}</RadixTooltip.Trigger>

<RadixTooltip.Portal>
<RadixTooltip.Content
side={side}
align={align}
sideOffset={sideOffset}
className={cn(
'text-text-inverse bg-background-neutral-strong data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade px-150 py-100 leading-none select-none',
contentClassName,
)}
>
{value}
<RadixTooltip.Arrow className={arrowClassName} />
</RadixTooltip.Content>
</RadixTooltip.Portal>
</RadixTooltip.Root>
</RadixTooltip.Provider>
);
};

export default Tooltip;
128 changes: 128 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down