feat(meeting): 회의 헤더 제목으로 초대 링크 복사 (#34)

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>

Author: yuchem2

apps/frontend/src/feature/meeting/components/MeetingScreen.spec.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 
 import type {
   RemoteMediaEntry,
@@ -119,6 +119,24 @@ describe('MeetingScreen View', () => {
     expect(screen.getByRole('status')).toHaveTextContent('연결 중');
   });
 
+  it('헤더 제목은 회의 링크를 복사하는 버튼이다', () => {
+    renderScreen();
+    expect(screen.getByRole('button', { name: /회의 링크 복사/ })).toBeInTheDocument();
+  });
+
+  it('제목을 누르면 회의 링크가 클립보드에 들어가고 복사됨을 알린다', async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, 'clipboard', { value: { writeText }, configurable: true });
+    renderScreen();
+
+    fireEvent.click(screen.getByRole('button', { name: /회의 링크 복사/ }));
+
+    await waitFor(() =>
+      expect(writeText).toHaveBeenCalledWith(expect.stringContaining('/meetings/abc12xyz')),
+    );
+    expect(await screen.findByText('링크 복사됨')).toBeInTheDocument();
+  });
+
   it('status="error" + errorMessage가 있으면 alert로 노출', () => {
     renderScreen({ status: 'error', errorMessage: 'handshake 실패' });
     expect(screen.getByRole('alert')).toHaveTextContent('handshake 실패');

apps/frontend/src/feature/meeting/components/MeetingScreen.tsx

@@ -1,11 +1,16 @@
 'use client';
 
+import { LinkIcon } from '@/feature/meeting/components/icons';
 import { MeetingControlBar } from '@/feature/meeting/components/MeetingControlBar';
 import { RemoteAudioPlayer } from '@/feature/meeting/components/MeetingMedia';
 import { VideoStage } from '@/feature/meeting/components/VideoStage';
 import type { UseMediasoupViewModel } from '@/feature/meeting/hooks/useMediasoupViewModel';
 import { useMeetingElapsedViewModel } from '@/feature/meeting/hooks/useMeetingElapsedViewModel';
 import type { MeetingLayoutVariant } from '@/feature/meeting/hooks/useMeetingLayoutViewModel';
+import {
+  type CopyLinkStatus,
+  useMeetingLinkViewModel,
+} from '@/feature/meeting/hooks/useMeetingLinkViewModel';
 import type {
   MeetingConnectionStatus,
   UseMeetingViewModel,
@@ -22,6 +27,46 @@ const STATUS_TONE_DEFAULT = { text: 'text-muted', dot: 'bg-pending' } as const;
 const statusLabel = (status: MeetingConnectionStatus): string =>
   status === 'joined' ? '연결됨' : status === 'reconnecting' ? '재접속 중…' : status;
 
+const COPY_FEEDBACK: Record<Exclude<CopyLinkStatus, 'idle'>, string> = {
+  copied: '링크 복사됨',
+  error: '복사하지 못했습니다',
+};
+
+function MeetingTitle({ code, title }: { readonly code: string; readonly title: string | null }) {
+  const { url, status, copy } = useMeetingLinkViewModel(code);
+  const label = title ?? `회의 ${code}`;
+  return (
+    <h1 className="text-title flex min-w-0 items-center gap-2.5 font-bold tracking-[-0.025em]">
+      <button
+        type="button"
+        onClick={copy}
+        title={url}
+        aria-label={`${label} — 회의 링크 복사`}
+        className="text-text hover:text-accent-on group flex min-w-0 items-center gap-2 transition-colors"
+      >
+        <span className="truncate">
+          {title ?? (
+            <>
+              회의 <span className="text-code font-mono font-medium">{code}</span>
+            </>
+          )}
+        </span>
+        <LinkIcon className="text-muted group-hover:text-accent-on h-4 w-4 shrink-0 transition-colors" />
+      </button>
+      {status !== 'idle' && (
+        <span
+          role="status"
+          className={`text-meta shrink-0 font-semibold ${
+            status === 'copied' ? 'text-positive' : 'text-danger-on'
+          }`}
+        >
+          {COPY_FEEDBACK[status]}
+        </span>
+      )}
+    </h1>
+  );
+}
+
 /**
  * 경과 시간은 1초마다 바뀐다. 헤더에 인라인으로 두면 그 틱이 회의 화면 전체를 —
  * 참가자 수만큼 깔린 비디오 타일까지 — 다시 그린다. 상태를 이 경계 안에 가둔다.
@@ -92,13 +137,10 @@ export function MeetingScreen({
     <section className="flex h-full min-w-0 flex-1 flex-col">
       <header className="border-border px-gutter py-gutter-sm flex items-center justify-between gap-3 border-b">
         <div className="min-w-0">
-          <h1 className="text-text text-title truncate font-bold tracking-[-0.025em]">
-            {title ?? (
-              <>
-                회의 <span className="text-code font-mono font-medium">{code}</span>
-              </>
-            )}
-          </h1>
+          <MeetingTitle
+            code={code}
+            title={title}
+          />
           <p className="text-muted text-meta mt-1 truncate font-medium">
             {title !== null && <span className="font-mono">{code} · </span>}내 닉네임:{' '}
             {nickname ?? '(미인증)'} · 참가자 {participantCount}명

apps/frontend/src/feature/meeting/components/icons.tsx

@@ -104,3 +104,12 @@ export function EndCallIcon({ className }: IconProps) {
     </svg>
   );
 }
+
+export function LinkIcon({ className }: IconProps) {
+  return (
+    <svg {...base(className)}>
+      <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+      <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+    </svg>
+  );
+}

apps/frontend/src/feature/meeting/hooks/useMeetingLinkViewModel.spec.tsx

@@ -0,0 +1,59 @@
+import { act, renderHook, waitFor } from '@testing-library/react';
+
+import { useMeetingLinkViewModel } from './useMeetingLinkViewModel';
+
+const writeText = vi.fn();
+
+const linkOf = (code: string): string => `${window.location.origin}/meetings/${code}`;
+
+describe('useMeetingLinkViewModel', () => {
+  beforeEach(() => {
+    writeText.mockReset();
+    writeText.mockResolvedValue(undefined);
+    Object.defineProperty(navigator, 'clipboard', {
+      value: { writeText },
+      configurable: true,
+    });
+  });
+
+  it('회의 링크는 현재 origin 기준의 회의 주소다', async () => {
+    const { result } = renderHook(() => useMeetingLinkViewModel('abc12xyz'));
+    await waitFor(() => expect(result.current.url).toBe(linkOf('abc12xyz')));
+  });
+
+  it('복사하면 회의 링크를 클립보드에 쓰고 copied가 된다', async () => {
+    const { result } = renderHook(() => useMeetingLinkViewModel('abc12xyz'));
+    await act(async () => {
+      result.current.copy();
+    });
+    expect(writeText).toHaveBeenCalledWith(linkOf('abc12xyz'));
+    expect(result.current.status).toBe('copied');
+  });
+
+  it('복사 피드백은 잠시 뒤 사라진다', async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    try {
+      const { result } = renderHook(() => useMeetingLinkViewModel('abc12xyz'));
+      await act(async () => {
+        result.current.copy();
+      });
+      expect(result.current.status).toBe('copied');
+
+      await act(async () => {
+        vi.advanceTimersByTime(3000);
+      });
+      expect(result.current.status).toBe('idle');
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('클립보드를 쓸 수 없으면 error로 알린다', async () => {
+    writeText.mockRejectedValueOnce(new Error('permission denied'));
+    const { result } = renderHook(() => useMeetingLinkViewModel('abc12xyz'));
+    await act(async () => {
+      result.current.copy();
+    });
+    expect(result.current.status).toBe('error');
+  });
+});

apps/frontend/src/feature/meeting/hooks/useMeetingLinkViewModel.ts

@@ -0,0 +1,37 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+
+export type CopyLinkStatus = 'idle' | 'copied' | 'error';
+
+export interface UseMeetingLinkViewModel {
+  readonly url: string;
+  readonly status: CopyLinkStatus;
+  readonly copy: () => void;
+}
+
+const FEEDBACK_MS = 1_800;
+
+export function useMeetingLinkViewModel(code: string): UseMeetingLinkViewModel {
+  const [url, setUrl] = useState('');
+  const [status, setStatus] = useState<CopyLinkStatus>('idle');
+
+  useEffect(() => {
+    setUrl(`${window.location.origin}/meetings/${code}`);
+  }, [code]);
+
+  useEffect(() => {
+    if (status === 'idle') return;
+    const timer = window.setTimeout(() => setStatus('idle'), FEEDBACK_MS);
+    return () => window.clearTimeout(timer);
+  }, [status]);
+
+  const copy = useCallback(() => {
+    void navigator.clipboard
+      .writeText(`${window.location.origin}/meetings/${code}`)
+      .then(() => setStatus('copied'))
+      .catch(() => setStatus('error'));
+  }, [code]);
+
+  return { url, status, copy };
+}