feat: 화상회의 단계 1 — LiveKit 기반 인프라 토대

LiveKit(SFU)에 미디어 전송을 위임하고, 앱은 입장 토큰 발급 + 회의 화면만
담당하는 구조로 단계 1(기본 연결)을 구현한다.

백엔드
- meeting 모듈: POST /api/meetings/token (JWT 인증)
  livekit-server-sdk 로 입장 JWT 발급(identity=userId, name, grants:
  roomJoin/publish/subscribe/publishData, TTL 1h). 단계 2에서 역할별 분기 예정.

프론트
- useMeeting(토큰 발급), useLiveKitRoom(연결/참여자/컨트롤 상태)
- ParticipantTile(카메라/마이크 트랙 attach, 본인 거울·음소거, 이니셜 플레이스홀더)
- MeetingPage(로비 + 영상 그리드), 라우트 /meeting/:room?, 사이드바 네비 추가
- VITE_LIVEKIT_URL 주입(build arg + dev 런타임 env)

인프라/설정
- 개발 미디어 서버는 LiveKit Cloud 사용(로컬 self-host 는 WSL2/Docker Desktop
  WebRTC 네트워킹 제약으로 제외). env 만으로 운영 전환 가능.
- livekit/livekit.yaml 은 단계 6 셀프호스팅 참고용으로 보관.
- 화상회의_화면명세.md: 현재 화면 기능/구조/데이터 계약 문서(UI 개편 참고).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/components/meeting/ParticipantTile.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+// 참여자 1명의 영상 타일 — 카메라 트랙을 <video>, (원격) 마이크 트랙을 <audio> 에 연결한다.
+// 로컬 참여자 오디오는 에코 방지를 위해 재생하지 않는다.
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { Track, ParticipantEvent, type Participant } from 'livekit-client'
+
+const props = defineProps<{ participant: Participant; isLocal?: boolean }>()
+
+const videoEl = ref<HTMLVideoElement | null>(null)
+const audioEl = ref<HTMLAudioElement | null>(null)
+const hasVideo = ref(false)
+const micOn = ref(false)
+
+// 표시 이름 — 토큰에 담은 name, 없으면 식별자
+const displayName = ref(props.participant.name || props.participant.identity)
+
+// 현재 트랙 상태를 DOM 에 반영
+function sync() {
+  const p = props.participant
+  displayName.value = p.name || p.identity
+  micOn.value = p.isMicrophoneEnabled
+
+  const camPub = p.getTrackPublication(Track.Source.Camera)
+  if (camPub?.track && videoEl.value) {
+    camPub.track.attach(videoEl.value)
+    hasVideo.value = !camPub.isMuted
+  } else {
+    hasVideo.value = false
+  }
+
+  if (!props.isLocal) {
+    const micPub = p.getTrackPublication(Track.Source.Microphone)
+    if (micPub?.track && audioEl.value) micPub.track.attach(audioEl.value)
+  }
+}
+
+onMounted(() => {
+  sync()
+  const p = props.participant
+  p.on(ParticipantEvent.TrackSubscribed, sync)
+  p.on(ParticipantEvent.TrackUnsubscribed, sync)
+  p.on(ParticipantEvent.LocalTrackPublished, sync)
+  p.on(ParticipantEvent.LocalTrackUnpublished, sync)
+  p.on(ParticipantEvent.TrackMuted, sync)
+  p.on(ParticipantEvent.TrackUnmuted, sync)
+})
+
+onBeforeUnmount(() => {
+  const p = props.participant
+  p.off(ParticipantEvent.TrackSubscribed, sync)
+  p.off(ParticipantEvent.TrackUnsubscribed, sync)
+  p.off(ParticipantEvent.LocalTrackPublished, sync)
+  p.off(ParticipantEvent.LocalTrackUnpublished, sync)
+  p.off(ParticipantEvent.TrackMuted, sync)
+  p.off(ParticipantEvent.TrackUnmuted, sync)
+})
+</script>
+
+<template>
+  <div class="tile">
+    <!-- 영상: 로컬은 좌우 반전(거울)으로 표시 -->
+    <video
+      ref="videoEl"
+      class="vid"
+      :class="{ mirror: props.isLocal, hidden: !hasVideo }"
+      autoplay
+      playsinline
+      :muted="props.isLocal"
+    />
+    <!-- 영상이 없을 때 이름 이니셜 표시 -->
+    <div
+      v-if="!hasVideo"
+      class="placeholder"
+    >
+      <span class="initial">{{ displayName.charAt(0) }}</span>
+    </div>
+    <!-- 원격 오디오 -->
+    <audio
+      v-if="!props.isLocal"
+      ref="audioEl"
+      autoplay
+    />
+    <!-- 하단 정보 -->
+    <div class="meta">
+      <span
+        class="mic"
+        :class="{ off: !micOn }"
+        :title="micOn ? '마이크 켜짐' : '마이크 꺼짐'"
+      >{{ micOn ? '🎙' : '🔇' }}</span>
+      <span class="name">{{ displayName }}{{ props.isLocal ? ' (나)' : '' }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tile {
+  position: relative;
+  aspect-ratio: 16 / 9;
+  background: #1b1d23;
+  border-radius: 0.625rem;
+  overflow: hidden;
+  border: 1px solid var(--border);
+}
+.vid {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.vid.mirror {
+  transform: scaleX(-1);
+}
+.vid.hidden {
+  display: none;
+}
+.placeholder {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #1b1d23;
+}
+.initial {
+  width: 3.5rem;
+  height: 3.5rem;
+  border-radius: 50%;
+  background: var(--accent);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+.meta {
+  position: absolute;
+  left: 0.5rem;
+  bottom: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.1875rem 0.5rem;
+  background: rgba(0, 0, 0, 0.55);
+  border-radius: 0.375rem;
+  max-width: calc(100% - 1rem);
+}
+.meta .name {
+  color: #fff;
+  font-size: 0.75rem;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.meta .mic {
+  font-size: 0.75rem;
+  line-height: 1;
+}
+.meta .mic.off {
+  opacity: 0.6;
+}
+</style>