서비스명: Baseball Live Chat (가칭) 핵심 가치: 야구 경기를 보며 실시간으로 소통할 수 있는 커뮤니티 플랫폼
- 오늘의 야구 경기 5개 리스트 표시
- 각 경기별 현재 채팅 참여자 수, 최근 채팅 미리보기
- 경기 상태 (경기 전/진행 중/종료) 표시
- 경기 기본 정보 (팀명, 시간, 스코어)
- 야구 중계 영상 영역 (iframe 또는 외부 링크)
- 실시간 채팅 영역
- 사용자 입력 창
- 익명 사용자: 닉네임만 입력하여 채팅 참여
- 회원 사용자: 회원가입/로그인 후 고정 닉네임으로 채팅
- WebSocket (STOMP) - 실시간 채팅
- Spring Security - 인증/인가
- Mybatis - 데이터 관리
- Redis - 채팅 캐싱 및 세션 관리
- MySQL - 사용자/경기 정보 저장
- Vue 3 + Composition API
- Pinia - 상태 관리
- Vue Router - 라우팅
- Socket.io-client - WebSocket 통신
- Tailwind CSS/Vuetify - UI 라이브러리
-- 경기 정보
games (id, home_team, away_team, game_date, status, stream_url)
-- 사용자 정보
users (id, username, password, nickname, created_at)
-- 채팅 메시지
chat_messages (id, game_id, user_id, nickname, message, timestamp, is_anonymous)
-- 익명 세션
anonymous_sessions (session_id, nickname, game_id, created_at)- 헤더: 로그인/회원가입 버튼
- 경기 리스트 카드형 레이아웃
- 각 카드: 팀 정보, 시간, 참여자 수, 최근 채팅 30개
pc
- 왼쪽 : 문자 중계
- 오른쪽 : 채팅 영역
모바일
- 상단: 중계 영상 (50% 화면)
- 하단: 채팅 영역 (50% 화면)
- 우측 사이드바: 참여자 목록 (옵션)
// Vue.js에서 WebSocket 연결
const socket = io('/game-' + gameId)
socket.on('newMessage', (message) => {
messages.value.push(message)
})@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
// STOMP 엔드포인트 설정
// 채팅 메시지 브로커 구성
}- 기본 경기 목록 표시
- 경기별 채팅방 구현
- 익명 채팅 기능
- 실시간 메시지 송수신
- 회원가입/로그인 기능
- 채팅 히스토리 저장
- 사용자별 닉네임 관리
- 중계 영상 연동
- 채팅 필터링/신고 기능
- 이모티콘/반응 기능