interface-v0.0.3 webRTC 적용

backend/socket/@types/woowa-babble.d.ts

@@ -0,0 +1 @@
+declare module '@woowa-babble/random-nickname';

backend/socket/src/room/service/interview/interview.service.ts

@@ -33,7 +33,7 @@ export class InterviewService {
 		this.roomRepository.updateRoomPhase({ roomUUID, phase: ROOM_PHASE.INTERVIEW });
 		this.updateUsersRoleAtStartInterview({ emitter: user, users: usersInRoom });
 
-		server.to(roomUUID).emit(EVENT.JOIN_INTERVIEW);
+		client.to(roomUUID).emit(EVENT.JOIN_INTERVIEW, { user });
 
 		return {};
 	}

frontend/.storybook/main.js

@@ -28,14 +28,16 @@ module.exports = {
 			...config.resolve.alias,
 			'@assets': path.resolve(__dirname, '../src/assets'),
 			'@components': path.resolve(__dirname, '../src/components'),
+			'@constants': path.resolve(__dirname, '../src/constants'),
+			'@customType': path.resolve(__dirname, '../src/customType'),
 			'@hooks': path.resolve(__dirname, '../src/hooks'),
 			'@layout': path.resolve(__dirname, '../src/layout'),
 			'@pages': path.resolve(__dirname, '../src/pages'),
-			'@customType': path.resolve(__dirname, '../src/customType'),
+			'@routes': path.resolve(__dirname, '../src/routes'),
+			'@service': path.resolve(__dirname, '../src/service'),
 			'@store': path.resolve(__dirname, '../src/store'),
+			'@styles': path.resolve(__dirname, '../src/styles'),
 			'@utils': path.resolve(__dirname, '../src/utils'),
-			'@routes': path.resolve(__dirname, '../src/routes'),
-			'@constants': path.resolve(__dirname, '../src/constants'),
 		};
 
 		return config;

frontend/.storybook/preview.js

@@ -1,4 +1,7 @@
+import { Global, ThemeProvider, css } from '@emotion/react';
 import { RecoilRoot } from 'recoil';
+import globalStyle from '../src/styles/globalStyle';
+import theme from '../src/styles/theme';
 
 export const parameters = {
 	actions: { argTypesRegex: '^on[A-Z].*' },
@@ -13,7 +16,10 @@ export const parameters = {
 export const decorators = [
 	(Story) => (
 		<RecoilRoot>
-			<Story />
+			<ThemeProvider theme={theme}>
+				<Global styles={globalStyle} />
+				<Story />
+			</ThemeProvider>
 		</RecoilRoot>
 	),
 ];

frontend/src/App.tsx

@@ -4,8 +4,8 @@ import { Global, ThemeProvider } from '@emotion/react';
 import { BrowserRouter } from 'react-router-dom';
 
 import RootRoutes from '@routes/RootRoutes';
-import globalStyle from './styles/globalStyle';
-import theme from './styles/theme';
+import globalStyle from '@styles/globalStyle';
+import theme from '@styles/theme';
 
 function App() {
 	return (

frontend/src/api/socket.api.ts

@@ -0,0 +1,24 @@
+import { socket } from '@service/socket';
+
+interface socketResponseType<T> {
+	success: boolean;
+	data?: T;
+	message?: string;
+}
+
+export const socketEmit = <T>(event, data?: T) => {
+	return new Promise<T>((resolve) => {
+		socket.emit(event, data, ({ success, data, message }: socketResponseType<T>) => {
+			console.log('socket.api', success, data, message);
+			if (!success) {
+				//TODO 여기서 에러 처리
+				//모달을 띄우던 -> useModal
+				//NOT Found 같은 에러 페이지로 이동 하던. -> throw Error -> React Error Boundary
+				alert(message);
+				return;
+			}
+
+			resolve(data);
+		});
+	});
+};