[Release] Preview v0.1.0

.github/workflows/deploy.yml

@@ -0,0 +1,23 @@
+name: Deploy to Ncloud Server
+on:
+  push:
+    branches:
+      - main
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3.3.0 # workflow 내에서 repo의 최신 코드를 checkout
+      - name: Deploy to Ncloud via SSH
+        uses: appleboy/ssh-action@master # GitHub Actions에서 SSH로 서버에 접근
+        with:
+          host: ${{ secrets.REMOTE_SSH_HOST }}
+          username: ${{ secrets.REMOTE_SSH_USERNAME }}
+          key: ${{ secrets.REMOTE_SSH_KEY }}
+          passphrase: ${{ secrets.REMOTE_SSH_PASSPHRASE }}
+          password: ${{ secrets.REMOTE_SSH_PASSWORD }}
+          port: ${{ secrets.REMOTE_SSH_PORT }}
+          script: |
+            echo ${{ secrets.REMOTE_SSH_PASSWORD }} | sudo -S echo deploy start!
+            ./deploy.sh # 배포 스크립트 실행

README.md

@@ -1,9 +1,15 @@
-# web27-Preview
+# ✨ Preview
+<img width="100%" src="https://github.com/user-attachments/assets/4894268d-c31d-44d6-9e6c-9c37b86a4a99" />
 
-실시간 화상회의 기반 면접 스터디 플랫폼
+<br/>
+
+<div align="center">면접 연습을 하고 싶은데.. 🧐</div>
+<div align="center">다른 사람과 함께 할 수 없을까? 👥</div>
+
+<h3 align="center">✨ Preview에서 면접 연습 시작하자! ✨</h3>
 
 ### 배포
-[배포 링크](https://boostcamp-preview.kro.kr/)
+[**Preview 바로가기**](https://boostcamp-preview.kro.kr)
 
 ## 👋 팀원 소개
 
@@ -95,6 +101,7 @@
 <br>   
 
 ## 📁 문서
+
 ### 팀 노션 워크스페이스
 - [노션 링크](https://alpine-tiglon-9f0.notion.site/PREVIEW-HOME-12d696f85d1f805b9787e26374b3d209?pvs=4)
 
@@ -114,5 +121,4 @@
 
 ### 개발 일지
 - [공통 개발 일지](https://alpine-tiglon-9f0.notion.site/12d696f85d1f80c89569dcfe55b62b44?v=12f696f85d1f802db6af000cf32dfa28&pvs=4)
-- [문제 해결 일지](https://alpine-tiglon-9f0.notion.site/87b7f1ce19564eda8127eca29d567d0f?v=f2df7d634605464d876ccf43c9197db4&pvs=4)
-- 
+- [문제 해결 일지](https://alpine-tiglon-9f0.notion.site/87b7f1ce19564eda8127eca29d567d0f?v=f2df7d634605464d876ccf43c9197db4&pvs=4)

backend/package.json

@@ -23,8 +23,11 @@
     "@nestjs/common": "^10.0.0",
     "@nestjs/core": "^10.0.0",
     "@nestjs/platform-express": "^10.0.0",
+    "@nestjs/platform-socket.io": "^10.4.6",
+    "@nestjs/websockets": "^10.4.6",
     "reflect-metadata": "^0.2.0",
-    "rxjs": "^7.8.1"
+    "rxjs": "^7.8.1",
+    "socket.io": "^4.8.1"
   },
   "devDependencies": {
     "@nestjs/cli": "^10.0.0",

backend/src/app.controller.spec.ts

@@ -1,22 +1,22 @@
-import { Test, TestingModule } from '@nestjs/testing';
-import { AppController } from './app.controller';
-import { AppService } from './app.service';
+import { Test, TestingModule } from "@nestjs/testing";
+import { AppController } from "./app.controller";
+import { AppService } from "./app.service";
 
-describe('AppController', () => {
-  let appController: AppController;
+describe("AppController", () => {
+    let appController: AppController;
 
-  beforeEach(async () => {
-    const app: TestingModule = await Test.createTestingModule({
-      controllers: [AppController],
-      providers: [AppService],
-    }).compile();
+    beforeEach(async () => {
+        const app: TestingModule = await Test.createTestingModule({
+            controllers: [AppController],
+            providers: [AppService],
+        }).compile();
 
-    appController = app.get<AppController>(AppController);
-  });
+        appController = app.get<AppController>(AppController);
+    });
 
-  describe('root', () => {
-    it('should return "Hello World!"', () => {
-      expect(appController.getHello()).toBe('Hello World!');
+    describe("root", () => {
+        it('should return "Hello World!"', () => {
+            expect(appController.getHello()).toBe("Hello World!");
+        });
     });
-  });
 });

backend/src/app.controller.ts

@@ -1,12 +1,12 @@
-import { Controller, Get } from '@nestjs/common';
-import { AppService } from './app.service';
+import { Controller, Get } from "@nestjs/common";
+import { AppService } from "./app.service";
 
 @Controller()
 export class AppController {
-  constructor(private readonly appService: AppService) {}
+    constructor(private readonly appService: AppService) {}
 
-  @Get()
-  getHello(): string {
-    return this.appService.getHello();
-  }
+    @Get()
+    getHello(): string {
+        return this.appService.getHello();
+    }
 }

backend/src/app.module.ts

@@ -1,10 +1,11 @@
-import { Module } from '@nestjs/common';
-import { AppController } from './app.controller';
-import { AppService } from './app.service';
+import { Module } from "@nestjs/common";
+import { AppController } from "./app.controller";
+import { AppService } from "./app.service";
+import { SocketModule } from "./socket/socket.module";
 
 @Module({
-  imports: [],
-  controllers: [AppController],
-  providers: [AppService],
+    imports: [SocketModule],
+    controllers: [AppController],
+    providers: [AppService],
 })
 export class AppModule {}

backend/src/app.service.ts

@@ -1,8 +1,8 @@
-import { Injectable } from '@nestjs/common';
+import { Injectable } from "@nestjs/common";
 
 @Injectable()
 export class AppService {
-  getHello(): string {
-    return 'Hello World!';
-  }
+    getHello(): string {
+        return "Hello World!";
+    }
 }

backend/src/main.ts

@@ -1,8 +1,8 @@
-import { NestFactory } from '@nestjs/core';
-import { AppModule } from './app.module';
+import { NestFactory } from "@nestjs/core";
+import { AppModule } from "./app.module";
 
 async function bootstrap() {
-  const app = await NestFactory.create(AppModule);
-  await app.listen(process.env.PORT ?? 3000);
+    const app = await NestFactory.create(AppModule);
+    await app.listen(process.env.PORT ?? 3000);
 }
 bootstrap();

backend/src/socket/socket.gateway.ts

@@ -0,0 +1,124 @@
+import {
+    WebSocketGateway,
+    WebSocketServer,
+    OnGatewayConnection,
+    OnGatewayDisconnect,
+    SubscribeMessage,
+    MessageBody,
+} from "@nestjs/websockets";
+import { Server } from "socket.io";
+
+interface User {
+    id: string;
+    nickname: string;
+}
+
+@WebSocketGateway({
+    cors: {
+        origin: "*", // CORS 설정
+    },
+})
+export class SocketGateway implements OnGatewayConnection, OnGatewayDisconnect {
+    @WebSocketServer()
+    server: Server;
+
+    private users: { [key: string]: User[] } = {};
+    private socketToRoom: { [key: string]: string } = {};
+    private maximum = 5;
+
+    handleConnection(socket: any) {
+        console.log(`Client connected: ${socket.id}`);
+    }
+
+    handleDisconnect(socket: any) {
+        console.log(`Client disconnected: ${socket.id}`);
+        const roomID = this.socketToRoom[socket.id];
+        if (roomID) {
+            const room = this.users[roomID];
+            if (room) {
+                this.users[roomID] = room.filter(
+                    (user) => user.id !== socket.id
+                );
+                if (this.users[roomID].length === 0) {
+                    delete this.users[roomID];
+                } else {
+                    this.server.to(roomID).emit("user_exit", { id: socket.id });
+                }
+            }
+        }
+    }
+
+    @SubscribeMessage("join_room")
+    handleJoinRoom(socket: any, data: { room: string; nickname: string }) {
+        if (this.users[data.room]) {
+            if (this.users[data.room].length === this.maximum) {
+                socket.emit("room_full");
+                return;
+            }
+            this.users[data.room].push({
+                id: socket.id,
+                nickname: data.nickname,
+            });
+        } else {
+            this.users[data.room] = [
+                { id: socket.id, nickname: data.nickname },
+            ];
+        }
+
+        this.socketToRoom[socket.id] = data.room;
+        socket.join(data.room);
+        console.log(`[${data.room}]: ${socket.id} enter`);
+
+        const usersInThisRoom = this.users[data.room].filter(
+            (user) => user.id !== socket.id
+        );
+        socket.emit("all_users", usersInThisRoom);
+    }
+
+    @SubscribeMessage("offer")
+    handleOffer(
+        @MessageBody()
+        data: {
+            offerReceiveID: string;
+            sdp: any;
+            offerSendID: string;
+            offerSendNickname: string;
+        }
+    ) {
+        this.server.to(data.offerReceiveID).emit("getOffer", {
+            sdp: data.sdp,
+            offerSendID: data.offerSendID,
+            offerSendNickname: data.offerSendNickname,
+        });
+    }
+
+    @SubscribeMessage("answer")
+    handleAnswer(
+        @MessageBody()
+        data: {
+            answerReceiveID: string;
+            sdp: any;
+            answerSendID: string;
+        }
+    ) {
+        this.server.to(data.answerReceiveID).emit("getAnswer", {
+            sdp: data.sdp,
+            answerSendID: data.answerSendID,
+        });
+    }
+
+    @SubscribeMessage("candidate")
+    handleCandidate(
+        @MessageBody()
+        data: {
+            candidateReceiveID: string;
+            candidate: any;
+            candidateSendID: string;
+        }
+    ) {
+        this.server.to(data.candidateReceiveID).emit("getCandidate", {
+            candidate: data.candidate,
+            candidateSendID: data.candidateSendID,
+        });
+    }
+}

backend/src/socket/socket.module.ts

@@ -0,0 +1,7 @@
+import { Module } from "@nestjs/common";
+import { SocketGateway } from "./socket.gateway";
+
+@Module({
+    providers: [SocketGateway],
+})
+export class SocketModule {}

commitlint.config.js

@@ -1,12 +1,11 @@
 module.exports = {
-    extends: ['@commitlint/config-conventional'],
-    rules: {
-      'type-enum': [
-        2,
-        'always',
-        ['feat', 'fix', 'docs', 'style', 'refactor', 'test', 'chore'],
-      ],
-      'subject-case': [2, 'always', 'sentence-case'],
-      'subject-max-length': [2, 'always', 70],
-    },
-  };
+  extends: ["@commitlint/config-conventional"],
+  rules: {
+    "type-enum": [
+      2,
+      "always",
+      ["feat", "fix", "docs", "style", "refactor", "test", "chore"],
+    ],
+    "subject-max-length": [2, "always", 70],
+  },
+};

frontend/.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env

frontend/package.json

@@ -8,11 +8,16 @@
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "format": "prettier --write \"**/*.{ts,tsx}\"",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
+    "@types/socket.io-client": "^3.0.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
+    "react-router-dom": "^6.27.0",
+    "socket.io-client": "^4.8.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
@@ -28,6 +33,7 @@
     "tailwindcss": "^3.4.14",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.11.0",
-    "vite": "^5.4.10"
+    "vite": "^5.4.10",
+    "vite-plugin-remove-console": "^2.2.0"
   }
 }