NoteButton.tsx 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. 'use client';
  2. import { useState } from 'react';
  3. import { Mail } from 'lucide-react';
  4. import { useMemberContext } from '@/contexts/memberProvider';
  5. import NoteComposeModal from './NoteComposeModal';
  6. import type { RecipientItem } from '@/types/response/note/searchRecipient';
  7. type Props = {
  8. target: {
  9. memberID: number;
  10. displayName: string;
  11. thumbnailUrl: string|null;
  12. };
  13. className?: string;
  14. label?: string;
  15. iconSize?: number;
  16. };
  17. export default function NoteButton({ target, className, label = '쪽지', iconSize = 14 }: Props)
  18. {
  19. const { member } = useMemberContext();
  20. const [open, setOpen] = useState(false);
  21. // 본인 또는 미로그인 시 버튼 미표시
  22. if (!member || member.id === target.memberID) {
  23. return null;
  24. }
  25. const recipient: RecipientItem = {
  26. memberID: target.memberID,
  27. displayName: target.displayName,
  28. displaySubtitle: null,
  29. thumbnailUrl: target.thumbnailUrl
  30. };
  31. return (
  32. <>
  33. <button
  34. type="button"
  35. onClick={() => setOpen(true)}
  36. className={className}
  37. aria-label="쪽지 보내기"
  38. title="쪽지 보내기"
  39. >
  40. <Mail size={iconSize} /> {label}
  41. </button>
  42. <NoteComposeModal
  43. open={open}
  44. onClose={() => setOpen(false)}
  45. initialReceiver={recipient}
  46. />
  47. </>
  48. );
  49. }