🚇 지하철 더워추워

같은 열차를 타는 사람들과 실시간으로 소통하는 웹 앱입니다.

주요 기능

1. 🌡️ 실시간 투표

• 온도: 더워요 / 추워요
• 혼잡도: 여유로움 / 보통 / 혼잡함
• 냄새: 심함 / 괜찮음
• 청결도: 1~5점 평가
• 소음: 1~5점 평가
• Socket.io를 통한 실시간 투표 결과 업데이트

2. 💬 커뮤니티 게시판

• 일반 채팅
• 자리 양보 요청
• 분실물 찾기/신고
• 10분 후 자동 삭제 (TTL)

3. 🚨 비상 알림

• 성추행/위험 상황
• 의료 응급 상황
• 이상한 냄새
• 실시간 알림 전파

기술 스택

• Frontend: Next.js 14 (App Router), TypeScript, Tailwind CSS
• UI Library: shadcn/ui
• Backend: Next.js API Routes
• Database: MongoDB (Mongoose)
• Real-time: Socket.io
• State Management: Zustand

설치 및 실행

1. 환경 변수 설정

.env.local 파일을 생성하고 다음 내용을 추가하세요:

# MongoDB Connection String
MONGODB_URI=mongodb://localhost:27017/trainmate
# 또는 MongoDB Atlas 사용 시
# MONGODB_URI=mongodb+srv://<username>:<password>@cluster.mongodb.net/trainmate

# Socket.io Server URL
NEXT_PUBLIC_SOCKET_URL=http://localhost:3001

2. 의존성 설치

npm install

3. 개발 서버 실행

npm run dev

이 명령어는 다음 두 서버를 동시에 실행합니다:

• Next.js 개발 서버: http://localhost:3000
• Socket.io 서버: http://localhost:3001

4. 별도로 실행하기

필요한 경우 각 서버를 별도로 실행할 수 있습니다:

# Next.js만 실행
npm run dev:next

# Socket.io 서버만 실행
npm run dev:socket

프로젝트 구조

trainmate/
├── src/
│   ├── app/
│   │   ├── page.tsx              # 메인 페이지 (열차 번호 입력)
│   │   ├── train/[id]/
│   │   │   └── page.tsx          # 열차 상세 페이지
│   │   └── api/
│   │       ├── trains/[id]/      # 열차 정보 API
│   │       └── posts/            # 게시글 API
│   ├── components/
│   │   ├── ui/                   # shadcn/ui 컴포넌트
│   │   ├── VotingPanel.tsx       # 투표 패널
│   │   ├── CommunityBoard.tsx    # 커뮤니티 게시판
│   │   └── EmergencyAlert.tsx    # 비상 알림
│   ├── lib/
│   │   ├── mongodb.ts            # MongoDB 연결
│   │   ├── models.ts             # Mongoose 스키마
│   │   └── socket.ts             # Socket.io 클라이언트
│   └── types/
│       └── index.ts              # TypeScript 타입 정의
├── socket-server.js              # Socket.io 서버
├── Dockerfile                    # Docker 이미지 빌드 설정
├── docker-compose.yml            # Docker Compose 설정
└── package.json

데이터베이스 스키마

trains 컬렉션

{
  trainNumber: string;      // 열차 번호 (예: "2호선-2234")
  line: string;             // 호선 (예: "2호선")
  votes: VoteCount;         // 투표 데이터
  lastUpdated: Date;        // 마지막 업데이트 시간
}

posts 컬렉션

{
  trainNumber: string;      // 열차 번호
  type: PostType;           // 'community' | 'emergency' | 'seat' | 'lost'
  content: string;          // 내용
  imageUrl?: string;        // 이미지 URL (선택)
  createdAt: Date;          // 작성 시간
  expiresAt: Date;          // 만료 시간 (TTL)
}

실시간 통신 흐름

1. 사용자가 열차 번호로 접속
2. Socket.io로 해당 열차 room에 join
3. 투표/게시글 작성 시 서버로 전송
4. 서버에서 MongoDB 업데이트
5. 같은 room의 모든 사용자에게 broadcast

배포

🐳 Docker로 배포하기 (권장)

로컬에서 테스트

# 이미지 빌드
docker build -t trainmate .

# Docker Compose로 실행 (MongoDB 포함)
docker-compose up -d

# 로그 확인
docker-compose logs -f

# 접속
# http://localhost:3000

프로덕션 서버에 배포

1. 서버 준비 (Ubuntu 기준)

   # Docker 설치
   curl -fsSL https://get.docker.com | sh
   sudo usermod -aG docker $USER
   
   # Docker Compose 설치
   sudo curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
   sudo chmod +x /usr/local/bin/docker-compose

2. 코드 배포

   # 프로젝트 클론
   git clone https://github.com/YOUR_USERNAME/trainmate.git
   cd trainmate
   
   # 환경 변수 설정
   cp .env.example .env.production
   nano .env.production  # MONGODB_URI, NEXT_PUBLIC_SOCKET_URL 등 수정
   
   # 빌드 및 실행
   docker build -t trainmate .
   docker-compose --env-file .env.production up -d

3. 포트 열기

   • 3000 (Next.js)
   • 3001 (Socket.io)

환경 변수

.env.production 예시:

MongoDB Atlas 사용 시 (권장):

MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/trainmate?retryWrites=true&w=majority
NEXT_PUBLIC_SOCKET_URL=http://YOUR_SERVER_IP:3001
CORS_ORIGIN=http://YOUR_SERVER_IP:3000
NODE_ENV=production

로컬 MongoDB 사용 시 (Docker Compose 기준):

MONGODB_URI=mongodb://mongodb:27017/trainmate
NEXT_PUBLIC_SOCKET_URL=http://YOUR_SERVER_IP:3001
CORS_ORIGIN=http://YOUR_SERVER_IP:3000
NODE_ENV=production

유용한 명령어

# 로그 확인
docker-compose logs -f

# 재시작
docker-compose restart

# 중지
docker-compose down

# 업데이트
git pull
docker build -t trainmate .
docker-compose up -d

주의사항

• 익명 사용자 방식으로 별도의 인증이 없습니다.
• 게시글은 10분 후 자동 삭제됩니다.
• 비상 알림은 실제 긴급 상황에만 사용해주세요.
• MongoDB TTL 인덱스가 제대로 작동하는지 확인하세요.

개발 참고사항

shadcn/ui 컴포넌트 추가

npx shadcn@latest add [component-name]

새로운 API 라우트 추가

src/app/api/ 디렉토리에 route.ts 파일을 생성하세요.

Socket.io 이벤트 추가

1. src/types/index.ts에 이벤트 타입 정의
2. socket-server.js에 서버 측 핸들러 추가
3. 클라이언트에서 getSocket()으로 이벤트 송수신