// 컴포넌트에 모든 것이 섞여 있음  
function VideoCall() {  
	const [peerConnection, setPeerConnection] = useState<RTCPeerConnection>();  
	const [dataChannel, setDataChannel] = useState<RTCDataChannel>();

	useEffect(() => {  
		// WebRTC 연결 로직이 컴포넌트 안에...  
		// MQTT 구독 로직도 컴포넌트 안에...  
		// 비즈니스 로직도 컴포넌트 안에...  
	}, []);

	return <div>{/* UI */}</div>;  
}  

// 구현 전 인터페이스부터 정의  
interface RemoteVSSDKContract {  
	joinRoom(): Promise<void>;  
	leaveRoom(): Promise<void>;  
	closeSession(): Promise<void>;  
	setVideoEnabled(enabled: boolean): void;  
	setAudioEnabled(enabled: boolean): void;  
	// ... 기타 메서드  
}  

interface RemoteVSSDKContract {  
	createRoom(): Promise<void>; // 상담원: 방 생성  
	joinRoom(): Promise<void>; // 고객: 방 입장  
	leaveRoom(): Promise<void>; // 방 나가기  
}  

// ❌ 의미가 모호함  
sdk.toggleVideo(); // 켜는 건가 끄는 건가?

// ✅ 의도가 명확함  
sdk.setVideoEnabled(true); // 비디오 켜기  
sdk.setVideoEnabled(false); // 비디오 끄기  

interface RemoteVSSDKContract {  
	leaveRoom(): Promise<void>; // 방에서 나가기 (재입장 가능)  
	closeSession(): Promise<void>; // 세션 완전 종료 (재입장 불가)  
}  

try {  
	await sdk.joinRoom();  
} catch (error) {  
	if (error instanceof NetworkError) {  
		// 네트워크 문제 처리  
	} else if (error instanceof PermissionError) {  
		// 권한 문제 처리  
	}  
}  

// 1. 외부에 노출할 에러 코드 정의  
export enum RVS_ERROR_CODE {  
	/** 카메라 또는 마이크 권한 거부 */  
	ERROR_PERMISSION_DENIED = 40250,

	/** 카메라 또는 마이크 장치를 찾을 수 없음 */  
	ERROR_DEVICE_NOT_FOUND = 40251,

	/** 존재하지 않는 방에 접근할 경우 */  
	ROOM_NOT_FOUND = 40992,

	/** 라이센스 초과 */  
	ERROR_OVER_LICENSE_COUNT = 49001,

	/** WebRTC 연결 실패 */  
	WEBRTC_CONNECTION_FAILED = 50001

	// ... 기타 에러 코드 추가  
}

// 2. 전역 에러 이벤트 에미터 생성  
export const rvsErrorEmitter = new EventEmitter<{  
	ERROR: (errorCode: RVS_ERROR_CODE) => void;  
}>();  

// SDK 내부: 미디어 권한 체크 중 에러 발생  
public async checkMediaPermissions() {  
	try {  
		const stream = await navigator.mediaDevices.getUserMedia({  
			video: true,  
			audio: true  
		});

		stream.getTracks().forEach(track => track.stop());  
		return true;  
	} catch (error) {  
		let errorCode = RVS_ERROR_CODE.ERROR_MEDIA_DEVICE_UNKNOWN;

		if (error instanceof DOMException) {  
			switch (error.name) {  
				case 'NotAllowedError':  
					errorCode = RVS_ERROR_CODE.ERROR_PERMISSION_DENIED;  
					break;  
				case 'NotFoundError':  
					errorCode = RVS_ERROR_CODE.ERROR_DEVICE_NOT_FOUND;  
					break;  
			}  
		}

		// 중앙 에러 이벤트 에미터로 전달  
		rvsErrorEmitter.emit('ERROR', errorCode);

		return false;  
	}  
}  

// 사용자 코드  
rvsErrorEmitter.on("ERROR", (errorCode) => {  
	switch (errorCode) {  
		case RVS_ERROR_CODE.ERROR_PERMISSION_DENIED:  
			alert("카메라 권한을 허용해주세요");  
			break;  
		case RVS_ERROR_CODE.ROOM_NOT_FOUND:  
			alert("존재하지 않는 상담방입니다");  
			break;  
		case RVS_ERROR_CODE.ERROR_OVER_LICENSE_COUNT:  
			alert("현재 상담원이 모두 사용 중입니다");  
			break;  
		// ... 기타 에러 처리  
	}  
});  

// 개선된 버전: 인스턴스별 에러 이벤트  
const sdk = new RemoteVSSDK(config);

sdk.on(RemoteVSSDK.Events.ERROR, (error) => {  
	console.error("에러 발생:", error.code, error.message);  
});  

// ❌ 나쁜 예: 하나의 클래스에 모든 책임  
class RemoteVSSDK {  
	private setupMedia() {  
		/* ... */  
	}

	private connectWebRTC() {  
		/* ... */  
	}

	private sendMessage() {  
		/* ... */  
	}

	private handleIncomingMessage() {  
		/* ... */  
	}

	// ... 수백 줄의 코드  
}  

// ✅ 좋은 예: 책임별 분리  
class MediaDeviceManager {  
	// 미디어 디바이스 관리만 담당  
}

class ProtocolManager {  
	// 프로토콜 처리만 담당  
}

class PushClientManager {  
	// Push 연결 관리만 담당  
}

class RemoteVSSDK extends EventEmitter {  
	private readonly mediaDeviceManager: MediaDeviceManager;  
	private readonly protocolManager: ProtocolManager;  
	private readonly pushClientManager: PushClientManager;

	constructor(config: RemoteVSSDKConfig) {  
		super();  
		this.mediaDeviceManager = new MediaDeviceManager();  
		this.protocolManager = new ProtocolManager();  
		this.pushClientManager = new PushClientManager();  
	}  
}  

// 초기 버전: Callback 방식  
class RemoteVSSDK {  
	private handleConnected?: () => void;  
	private handleDisconnected?: () => void;  
	private handleReceiveMessage?: (message: object) => void;  
	private handleRVSError?: (errorCode: number) => void;  
	// ... 10개 이상의 콜백

	set onConnected(handler: typeof this.handleConnected) {  
		this.handleConnected = handler;  
	}

	set onDisconnected(handler: typeof this.handleDisconnected) {  
		this.handleDisconnected = handler;  
	}

	// 내부에서 호출  
	private notifyDisconnected() {  
		if (this.handleDisconnected) {  
			this.handleDisconnected();  
		}  
	}  
}  

/**  
 * SDK 이벤트 이름 상수  
 *  
 * @description  
 * 네임스페이스 기반 이벤트 네이밍  
 * - local:* - 로컬(본인) 관련 이벤트  
 * - remote:* - 원격(상대방) 관련 이벤트  
 * - session:* - 세션 관련 이벤트  
 */  
export const SDKEvents = {  
	// Local (본인) 스트림  
	LOCAL_STREAM_READY: "local:stream:ready",  
	LOCAL_VIDEO_QUALITY_CHANGED: "local:video:quality:changed",  
	LOCAL_MEDIA_CHANGED: "local:media:changed",

	// Remote (상대방) 스트림 및 상태  
	REMOTE_STREAM_READY: "remote:stream:ready",  
	REMOTE_LEAVE: "remote:leave",  
	REMOTE_MEDIA_CHANGED: "remote:media:changed"

	// ... 기타 이벤트 추가  
} as const;

class RemoteVSSDK extends EventEmitter {  
	static readonly Events = SDKEvents;  
}

// 사용 예시  
sdk.on(RemoteVSSDK.Events.REMOTE_LEAVE, () => {  
	console.log("상대방이 나갔습니다");  
});  

// 추상 베이스 클래스  
abstract class BaseTransport {  
	public abstract send(message: unknown): void;  
	public abstract isConnected(): boolean;  
}

// 구현체 1: WebRTC DataChannel  
class DataChannelTransport extends BaseTransport {  
	public send(message: unknown) {  
		// DataChannel로 전송  
	}

	public isConnected() {  
		// DataChannel 연결 상태 확인  
	}  
}

// 구현체 2: MQTT  
class MQTTTransport extends BaseTransport {  
	public send(message: unknown) {  
		// MQTT로 전송  
	}

	public isConnected() {  
		// MQTT 연결 상태 확인  
	}  
}

// Hybrid: DataChannel 우선, 실패 시 MQTT로 fallback  
class HybridTransport extends BaseTransport {  
	constructor(  
		private dataChannelTransport: DataChannelTransport,  
		private mqttTransport: MQTTTransport  
	) {  
		super();  
	}

	public send(message: unknown) {  
		// DataChannel 우선, 실패 시 MQTT  
		if (this.dataChannelTransport.isConnected()) {  
			this.dataChannelTransport.send(message);  
		} else {  
			this.mqttTransport.send(message);  
		}  
	}

	public isConnected() {  
		return this.dataChannelTransport.isConnected() || this.mqttTransport.isConnected();  
	}  
}  

// 현재 구조의 한계  
if (clientType === "CLIENT_A") {  
	enableSecurityLog();  
	enableReconnection();  
}

if (clientType === "CLIENT_B") {  
	enableScreenCapture();  
	enableCustomAuth();  
}

// ... 계속 추가됨  

const sdk = new RemoteVSSDK({ accessCode: "123456" });

// 고객사 A: 필요한 기능만 조합  
sdk.use(SecurityLogPlugin);  
sdk.use(ScreenCapturePlugin);

// 고객사 B: 다른 조합  
sdk.use(CustomAuthPlugin);  
sdk.use(FileTransferPlugin);

await sdk.joinRoom();  

sdk.use(SecurityLogPlugin); // 보안 로그  
sdk.use(ScreenCapturePlugin); // 화면 캡처  
sdk.use(ReconnectionPlugin); // 재접속  

sdk.use(ClientAPlugin); // A사용 모든 기능  
sdk.use(ClientBPlugin); // B사용 모든 기능  

interface RemoteVSSDKPlugin {  
	name: string;  
	version: string;  
	install(sdk: RemoteVSSDK): void;  
}  

class RemoteVSSDK extends EventEmitter {  
	private plugins: RemoteVSSDKPlugin[] = [];

	public use(plugin: RemoteVSSDKPlugin) {  
		plugin.install(this);  
		this.plugins.push(plugin);  
		return this; // chaining 지원  
	}  
}  

// ❌ 구현 세부사항에 의존  
test("should call setupPeerConnection", () => {  
	sdk.setupPeerConnection(); // 내부 메서드  
	expect(peerConnection.createOffer).toHaveBeenCalled();  
});

// ✅ 사용자 행동 중심  
test("should connect when user calls joinRoom()", async () => {  
	await sdk.joinRoom();  
	await waitFor(() => {  
		expect(sdk.getConnectionState()).toBe("connected");  
	});  
});  

describe("연결 흐름", () => {  
	test("연결 요청 → 상태 업데이트 → 연결 완료", async () => {  
		// Given: SDK 초기화  
		const sdk = new RemoteVSSDK({ accessCode: "ABC123" });

		// When: 연결 시도  
		const promise = sdk.joinRoom();

		// Then: 상태가 순차적으로 변경됨  
		expect(sdk.getConnectionState()).toBe("connecting");  
		await promise;  
		expect(sdk.getConnectionState()).toBe("connected");  
	});

	test("연결 실패 시 재시도 로직 동작", async () => {  
		// Given: 네트워크가 불안정한 상태  
		mockNetwork.unstable();

		// When: 연결 시도  
		await sdk.joinRoom();

		// Then: 자동 재시도 후 연결됨  
		expect(retryAttempts).toBeGreaterThan(1);  
		expect(sdk.getConnectionState()).toBe("connected");  
	});  
});  

// ❌ CSS 선택자에 의존  
const button = screen.getByClassName("connect-button");

// ✅ Test ID 사용  
const button = screen.getByTestId("connect-button");  

import dayjs from "dayjs";  
import utc from "dayjs/plugin/utc";  
import timezone from "dayjs/plugin/timezone";

dayjs.extend(utc);  
dayjs.extend(timezone);  

# 현재 (수동)  
vim package.json  # version 수정  
git commit -m "chore: bump version to 1.1.0"  
git tag v1.1.0  
git push --tags

# 목표 (자동)  
git commit -m "feat: add screen capture"
# → CI/CD가 자동으로 1.1.0으로 버전 올리고 태그 생성  

/**  
 * RemoteVS SDK  
 *  
 * @example  
 * ```typescript  
 * const sdk = new RemoteVSSDK({ accessCode: 'ABC123' });  
 *  
 * sdk.on(RemoteVSSDK.Events.REMOTE_LEAVE, () => {  
 * 	console.log("상대방이 나갔습니다");  
 * });  
 *  
 * await sdk.joinRoom();  
 * ```  
 */  
export class RemoteVSSDK extends EventEmitter {  
	/**  
	 * 세션에 연결합니다  
	 *  
	 * @throws {NetworkError} 네트워크 연결 실패 시  
	 * @throws {PermissionError} 미디어 권한이 없을 때  
	 */  
	async joinRoom(): Promise<void> {  
		// ...  
	}  
}