boostcampwm2023/web13_boarlog

🙂 기록으로 남기는 실시간 화이트보드 강의, Boarlog

노션   |   백로그   |   피그마   |   위키

시연 영상   |   서비스 링크

Boarlog의 주요 기능

🧑‍🏫 강의 생성 및 진행

강의자가 강의를 생성하고, 음성으로 강의하며 화이트보드를 실시간으로 편집할 수 있습니다. 또한, 참여자의 질문을 받아 화이트보드에 포스트잇 형태로 추가할 수 있습니다.

1.mp4	2.mp4
강의 생성 및 마이크 설정	화이트보드 편집 및 질문 확인

🧑‍🎓 강의 참여 및 피드백

강의자가 공유한 강의번호를 입력하여 강의에 참여하고, 강의자의 음성과 화이트보드 내용을 실시간으로 볼 수 있습니다. 강의자에게 질문을 보낼 수도 있습니다.

3.mp4	4.mp4
강의실 입장 및 강의 내용 확인	스피커 설정 및 질문하기

🎥 강의 다시보기

강의 종료 후에는 서버에서 화이트보드와 음성, AI를 이용한 음성 스크립트를 저장하여 언제든지 다시볼 수 있습니다.

5.mp4	6.mp4
참여한 강의 내역 확인	강의 다시보기

클라이언트 요청 흐름도

Boarlog의 기술 스택

category	stack
Common
Frontend
Backend
CI/CD
Deployment
Collaboration

핵심 개발 일지

🔗 프로젝트 진행 과정에서 고민하고 도전한 과정이 담긴 핵심 개발 일지입니다.

• 변진상 : 프로그래스 바 구현과 성능 개선을 위한 트러블 슈팅
• 이동령 : 반응형 UX를 위한 Modernizr 적용기
• 정주완 : 실시간 화이트보드 공유 구현 과정
• 이승연 : DB 해킹 당한 뒤 VPC와 Subnet 활용한 재구축
• 이현종 : 미디어 서버 메모리 누수 원인 찾고 해결하기

팀 소개: TEAM_528

const camperIdArray = ["J063", "J095", "J105", "J124", "J141"];

const teamName = camperIdArray.reduce((team, camperId) => {
  return (team += parseInt(camperId.replace(/[^0-9]/g, "")));
}, 0);

5명이 모여 하나의 개발자처럼 : J063 + J095 + J105 + J124 + J141

528은 팀원 5명의 캠퍼 번호를 더한 숫자입니다. 5명의 캠퍼가 하나의 번호를 가지고 서로 다른 기술, 경험, 및 아이디어를 결합하여 시너지를 발휘하겠다는 의미입니다.

변진상 (FE)	이동령 (FE)	이승연 (BE)	이현종 (BE)	정주완 (FE)
@Byeonjin	@LellowMellow	@tmddus2	@platinouss	@Jw705
깊이있게 고민하고 기록하기	괜한 걱정 하지 않고 차근차근 쌓아올리기	두려워하지 않고 문제 해결하기	모든 선택에 나만의 근거 만들기	작성한 코드에 대한 의도를 잘 기록하기

바로가기

• 그라운드 룰
• branch/conmmit 컨벤션
• 기획/디자인
• 위키
• 노션
• 백로그
• 데모 링크

web13_boarlog's Issues

Feature: CI/CD 파이프라인을 구축한다.

Feature Description

애플리케이션 개발 단계 자동화를 위한 CI/CD 파이프라인 구축

To-Do

• Backend CI/CD 파이프라인 구축

추가 사항

Feature: 유효하지 않은 코드라면 페이지를 이동하지 않고 안내 문구를 표시한다.

Feature Description

유효하지 않은 코드라면 페이지를 이동하지 않고 안내 문구를 표시한다.

To-Do

• 유효하지 않은 코드일 경우, Toast를 표시하도록 처리

추가 사항

2023-12-07.20-57-26.mp4

Feature: 잘못된 주소로 접근할 경우, 서버에서 404 상태코드를 반환한다.

Feature Description

여기에 작성하세요

To-Do

• Todo1
• Todo2
• Todo3

추가 사항

여기에 작성하세요

Feature: 닉네임이 닉네임 규칙에 맞는지 확인한다.

Feature Description

닉네임이 닉네임 규칙에 맞는지 확인한다 #10

To-Do

• 초기 정보 입력 페이지 UI 작업
• 닉네임 규칙 확인 정규표현식 작성
• 닉네임 규칙 여부에 따라 분기 처리
• 추가: 로그인 페이지 UI 수정
• 추가: 로그인 페이지와 메인 페이지 연결

추가 사항

로그인 페이지, 초기 정보 입력 페이지 UI 구성

메인 페이지와 더불어 초기 정보 입력 페이지의 UI를 구성하였습니다. 반응형을 고려하여 특정 너비를 기준으로 크기가 조절되도록 하였습니다. 또한 일부 UI와의 통일성을 고려하여 글자 크기를 수정하였습니다.

닉네임 규칙 확인

정규표현식을 작성하여 입력한 닉네임이 올바른지를 판단하였습니다. 닉네임의 규칙은 아래와 같습니다.

• 최소 1자리, 최대 10자리
• 영문, 한글, 숫자, -, _, . 사용 가능
• 숫자나 특수 문자만 단독으로 사용 불가능
• 영문 혹은 한글은 단독으로 사용 가능

const NICKNAME_REGEXP = /^(?![0-9-_.]+$)[가-힣A-Za-z0-9-_.]{1,10}$/;

• (?![0-9-_.]+$) : 숫자, -, _, .만으로 이루어진 문자열을 제외합니다.
• [가-힣A-Za-z0-9-_.] : 한글, 영문 대소문자, 숫자, -, _, . 중 하나를 의미합니다.
• {1,10} : 앞의 문자 집합이 최소 1번, 최대 10번 반복됨을 의미합니다.

해당 정규표현식을 기준으로 버튼이 활성화되도록 처리하였습니다.

로그인 페이지, 초기 정보 입력 페이지 UI 구성

2023-11-28.18-05-33.mp4

닉네임 규칙 확인

2023-11-28.18-05-53.mp4

페이지 이동

2023-11-28.18-06-49.mp4

Feature: 강의 참여자는 서버로부터 화면의 정보를 받아 화이트보드를 구성한다.

Feature Description

여기에 작성하세요

To-Do

• Todo1
• Todo2
• Todo3

추가 사항

여기에 작성하세요

Chore: node-webrtc 모듈 Typescript 언어로 빌드하기

Feature Description

현재 node-webrtc 모듈이 타입스크립트 언어를 지원하지 않아, 타입 정의 파일을 필요로 했습니다.
node-webrtc의 repository issue들을 참고하여 타입 정의 파일을 만들었습니다.

To-Do

다음 타입 정의 파일을 node_modules/wrtc/lib/index.d.ts에 추가한다.

export interface RTCAnswerOptions extends RTCOfferAnswerOptions {
}

export interface RTCCertificateExpiration {
  expires?: number;
}

export interface RTCConfiguration {
  bundlePolicy?: RTCBundlePolicy;
  certificates?: RTCCertificate[];
  iceCandidatePoolSize?: number;
  iceServers?: RTCIceServer[];
  iceTransportPolicy?: RTCIceTransportPolicy;
  rtcpMuxPolicy?: RTCRtcpMuxPolicy;
}

export interface RTCDTMFToneChangeEventInit extends EventInit {
  tone?: string;
}

export interface RTCDataChannelEventInit extends EventInit {
  channel: RTCDataChannel;
}

export interface RTCDataChannelInit {
  id?: number;
  maxPacketLifeTime?: number;
  maxRetransmits?: number;
  negotiated?: boolean;
  ordered?: boolean;
  protocol?: string;
}

export interface RTCDtlsFingerprint {
  algorithm?: string;
  value?: string;
}

export interface RTCEncodedAudioFrameMetadata {
  contributingSources?: number[];
  synchronizationSource?: number;
}

export interface RTCEncodedVideoFrameMetadata {
  contributingSources?: number[];
  dependencies?: number[];
  frameId?: number;
  height?: number;
  spatialIndex?: number;
  synchronizationSource?: number;
  temporalIndex?: number;
  width?: number;
}

export interface RTCErrorEventInit extends EventInit {
  error: RTCError;
}

export interface RTCErrorInit {
  errorDetail: RTCErrorDetailType;
  httpRequestStatusCode?: number;
  receivedAlert?: number;
  sctpCauseCode?: number;
  sdpLineNumber?: number;
  sentAlert?: number;
}

export interface RTCIceCandidateInit {
  candidate?: string;
  sdpMLineIndex?: number | null;
  sdpMid?: string | null;
  usernameFragment?: string | null;
}

export interface RTCIceCandidatePairStats extends RTCStats {
  availableIncomingBitrate?: number;
  availableOutgoingBitrate?: number;
  bytesReceived?: number;
  bytesSent?: number;
  currentRoundTripTime?: number;
  localCandidateId: string;
  nominated?: boolean;
  remoteCandidateId: string;
  requestsReceived?: number;
  requestsSent?: number;
  responsesReceived?: number;
  responsesSent?: number;
  state: RTCStatsIceCandidatePairState;
  totalRoundTripTime?: number;
  transportId: string;
}

export interface RTCIceServer {
  credential?: string;
  credentialType?: RTCIceCredentialType;
  urls: string | string[];
  username?: string;
}

export interface RTCInboundRtpStreamStats extends RTCReceivedRtpStreamStats {
  firCount?: number;
  framesDecoded?: number;
  nackCount?: number;
  pliCount?: number;
  qpSum?: number;
  remoteId?: string;
}

export interface RTCLocalSessionDescriptionInit {
  sdp?: string;
  type?: RTCSdpType;
}

export interface RTCOfferAnswerOptions {
}

export interface RTCOfferOptions extends RTCOfferAnswerOptions {
  iceRestart?: boolean;
  offerToReceiveAudio?: boolean;
  offerToReceiveVideo?: boolean;
}

export interface RTCOutboundRtpStreamStats extends RTCSentRtpStreamStats {
  firCount?: number;
  framesEncoded?: number;
  nackCount?: number;
  pliCount?: number;
  qpSum?: number;
  remoteId?: string;
}

export interface RTCPeerConnectionIceErrorEventInit extends EventInit {
  address?: string | null;
  errorCode: number;
  errorText?: string;
  port?: number | null;
  url?: string;
}

export interface RTCPeerConnectionIceEventInit extends EventInit {
  candidate?: RTCIceCandidate | null;
  url?: string | null;
}

export interface RTCReceivedRtpStreamStats extends RTCRtpStreamStats {
  jitter?: number;
  packetsDiscarded?: number;
  packetsLost?: number;
  packetsReceived?: number;
}

export interface RTCRtcpParameters {
  cname?: string;
  reducedSize?: boolean;
}

export interface RTCRtpCapabilities {
  codecs: RTCRtpCodecCapability[];
  headerExtensions: RTCRtpHeaderExtensionCapability[];
}

export interface RTCRtpCodecCapability {
  channels?: number;
  clockRate: number;
  mimeType: string;
  sdpFmtpLine?: string;
}

export interface RTCRtpCodecParameters {
  channels?: number;
  clockRate: number;
  mimeType: string;
  payloadType: number;
  sdpFmtpLine?: string;
}

export interface RTCRtpCodingParameters {
  rid?: string;
}

export interface RTCRtpContributingSource {
  audioLevel?: number;
  rtpTimestamp: number;
  source: number;
  timestamp: DOMHighResTimeStamp;
}

export interface RTCRtpEncodingParameters extends RTCRtpCodingParameters {
  active?: boolean;
  maxBitrate?: number;
  priority?: RTCPriorityType;
  scaleResolutionDownBy?: number;
}

export interface RTCRtpHeaderExtensionCapability {
  uri?: string;
}

export interface RTCRtpHeaderExtensionParameters {
  encrypted?: boolean;
  id: number;
  uri: string;
}

export interface RTCRtpParameters {
  codecs: RTCRtpCodecParameters[];
  headerExtensions: RTCRtpHeaderExtensionParameters[];
  rtcp: RTCRtcpParameters;
}

export interface RTCRtpReceiveParameters extends RTCRtpParameters {
}

export interface RTCRtpSendParameters extends RTCRtpParameters {
  degradationPreference?: RTCDegradationPreference;
  encodings: RTCRtpEncodingParameters[];
  transactionId: string;
}

export interface RTCRtpStreamStats extends RTCStats {
  codecId?: string;
  kind: string;
  ssrc: number;
  transportId?: string;
}

export interface RTCRtpSynchronizationSource extends RTCRtpContributingSource {
}

export interface RTCRtpTransceiverInit {
  direction?: RTCRtpTransceiverDirection;
  sendEncodings?: RTCRtpEncodingParameters[];
  streams?: MediaStream[];
}

export interface RTCSentRtpStreamStats extends RTCRtpStreamStats {
  bytesSent?: number;
  packetsSent?: number;
}

export interface RTCSessionDescriptionInit {
  sdp?: string;
  type: RTCSdpType;
}

export interface RTCStats {
  id: string;
  timestamp: DOMHighResTimeStamp;
  type: RTCStatsType;
}

export interface RTCTrackEventInit extends EventInit {
  receiver: RTCRtpReceiver;
  streams?: MediaStream[];
  track: MediaStreamTrack;
  transceiver: RTCRtpTransceiver;
}

export interface RTCTransportStats extends RTCStats {
  bytesReceived?: number;
  bytesSent?: number;
  dtlsCipher?: string;
  dtlsState: RTCDtlsTransportState;
  localCertificateId?: string;
  remoteCertificateId?: string;
  rtcpTransportStatsId?: string;
  selectedCandidatePairId?: string;
  srtpCipher?: string;
  tlsVersion?: string;
}
export interface RTCCertificate {
  readonly expires: EpochTimeStamp;
  getFingerprints(): RTCDtlsFingerprint[];
}

declare var RTCCertificate: {
  prototype: RTCCertificate;
  new(): RTCCertificate;
};

export interface RTCDTMFSenderEventMap {
  "tonechange": RTCDTMFToneChangeEvent;
}

export interface RTCDTMFSender extends EventTarget {
  readonly canInsertDTMF: boolean;
  ontonechange: ((this: RTCDTMFSender, ev: RTCDTMFToneChangeEvent) => any) | null;
  readonly toneBuffer: string;
  insertDTMF(tones: string, duration?: number, interToneGap?: number): void;
  addEventListener<K extends keyof RTCDTMFSenderEventMap>(type: K, listener: (this: RTCDTMFSender, ev: RTCDTMFSenderEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof RTCDTMFSenderEventMap>(type: K, listener: (this: RTCDTMFSender, ev: RTCDTMFSenderEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

declare var RTCDTMFSender: {
  prototype: RTCDTMFSender;
  new(): RTCDTMFSender;
};

/** Events sent to indicate that DTMF tones have started or finished playing. This interface is used by the tonechange event. */
export interface RTCDTMFToneChangeEvent extends Event {
  readonly tone: string;
}

declare var RTCDTMFToneChangeEvent: {
  prototype: RTCDTMFToneChangeEvent;
  new(type: string, eventInitDict?: RTCDTMFToneChangeEventInit): RTCDTMFToneChangeEvent;
};

export interface RTCDataChannelEventMap {
  "bufferedamountlow": Event;
  "close": Event;
  "closing": Event;
  "error": Event;
  "message": MessageEvent;
  "open": Event;
}

export interface RTCDataChannel extends EventTarget {
  binaryType: BinaryType;
  readonly bufferedAmount: number;
  bufferedAmountLowThreshold: number;
  readonly id: number | null;
  readonly label: string;
  readonly maxPacketLifeTime: number | null;
  readonly maxRetransmits: number | null;
  readonly negotiated: boolean;
  onbufferedamountlow: ((this: RTCDataChannel, ev: Event) => any) | null;
  onclose: ((this: RTCDataChannel, ev: Event) => any) | null;
  onclosing: ((this: RTCDataChannel, ev: Event) => any) | null;
  onerror: ((this: RTCDataChannel, ev: Event) => any) | null;
  onmessage: ((this: RTCDataChannel, ev: MessageEvent) => any) | null;
  onopen: ((this: RTCDataChannel, ev: Event) => any) | null;
  readonly ordered: boolean;
  readonly protocol: string;
  readonly readyState: RTCDataChannelState;
  close(): void;
  send(data: string): void;
  send(data: Blob): void;
  send(data: ArrayBuffer): void;
  send(data: ArrayBufferView): void;
  addEventListener<K extends keyof RTCDataChannelEventMap>(type: K, listener: (this: RTCDataChannel, ev: RTCDataChannelEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof RTCDataChannelEventMap>(type: K, listener: (this: RTCDataChannel, ev: RTCDataChannelEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

declare var RTCDataChannel: {
  prototype: RTCDataChannel;
  new(): RTCDataChannel;
};

export interface RTCDataChannelEvent extends Event {
  readonly channel: RTCDataChannel;
}

declare var RTCDataChannelEvent: {
  prototype: RTCDataChannelEvent;
  new(type: string, eventInitDict: RTCDataChannelEventInit): RTCDataChannelEvent;
};

export interface RTCDtlsTransportEventMap {
  "error": Event;
  "statechange": Event;
}

export interface RTCDtlsTransport extends EventTarget {
  readonly iceTransport: RTCIceTransport;
  onerror: ((this: RTCDtlsTransport, ev: Event) => any) | null;
  onstatechange: ((this: RTCDtlsTransport, ev: Event) => any) | null;
  readonly state: RTCDtlsTransportState;
  getRemoteCertificates(): ArrayBuffer[];
  addEventListener<K extends keyof RTCDtlsTransportEventMap>(type: K, listener: (this: RTCDtlsTransport, ev: RTCDtlsTransportEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof RTCDtlsTransportEventMap>(type: K, listener: (this: RTCDtlsTransport, ev: RTCDtlsTransportEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

declare var RTCDtlsTransport: {
  prototype: RTCDtlsTransport;
  new(): RTCDtlsTransport;
};

export interface RTCEncodedAudioFrame {
  data: ArrayBuffer;
  readonly timestamp: number;
  getMetadata(): RTCEncodedAudioFrameMetadata;
}

declare var RTCEncodedAudioFrame: {
  prototype: RTCEncodedAudioFrame;
  new(): RTCEncodedAudioFrame;
};

export interface RTCEncodedVideoFrame {
  data: ArrayBuffer;
  readonly timestamp: number;
  readonly type: RTCEncodedVideoFrameType;
  getMetadata(): RTCEncodedVideoFrameMetadata;
}

declare var RTCEncodedVideoFrame: {
  prototype: RTCEncodedVideoFrame;
  new(): RTCEncodedVideoFrame;
};

export interface RTCError extends DOMException {
  readonly errorDetail: RTCErrorDetailType;
  readonly receivedAlert: number | null;
  readonly sctpCauseCode: number | null;
  readonly sdpLineNumber: number | null;
  readonly sentAlert: number | null;
}

declare var RTCError: {
  prototype: RTCError;
  new(init: RTCErrorInit, message?: string): RTCError;
};

export interface RTCErrorEvent extends Event {
  readonly error: RTCError;
}

declare var RTCErrorEvent: {
  prototype: RTCErrorEvent;
  new(type: string, eventInitDict: RTCErrorEventInit): RTCErrorEvent;
};

/** The RTCIceCandidate interface—part of the WebRTC API—represents a candidate Internet Connectivity Establishment (ICE) configuration which may be used to establish an RTCPeerConnection. */
export interface RTCIceCandidate {
  readonly address: string | null;
  readonly candidate: string;
  readonly component: RTCIceComponent | null;
  readonly foundation: string | null;
  readonly port: number | null;
  readonly priority: number | null;
  readonly protocol: RTCIceProtocol | null;
  readonly relatedAddress: string | null;
  readonly relatedPort: number | null;
  readonly sdpMLineIndex: number | null;
  readonly sdpMid: string | null;
  readonly tcpType: RTCIceTcpCandidateType | null;
  readonly type: RTCIceCandidateType | null;
  readonly usernameFragment: string | null;
  toJSON(): RTCIceCandidateInit;
}

declare var RTCIceCandidate: {
  prototype: RTCIceCandidate;
  new(candidateInitDict?: RTCIceCandidateInit): RTCIceCandidate;
};

export interface RTCIceTransportEventMap {
  "gatheringstatechange": Event;
  "statechange": Event;
}

/** Provides access to information about the ICE transport layer over which the data is being sent and received. */
export interface RTCIceTransport extends EventTarget {
  readonly gatheringState: RTCIceGathererState;
  ongatheringstatechange: ((this: RTCIceTransport, ev: Event) => any) | null;
  onstatechange: ((this: RTCIceTransport, ev: Event) => any) | null;
  readonly state: RTCIceTransportState;
  addEventListener<K extends keyof RTCIceTransportEventMap>(type: K, listener: (this: RTCIceTransport, ev: RTCIceTransportEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof RTCIceTransportEventMap>(type: K, listener: (this: RTCIceTransport, ev: RTCIceTransportEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

declare var RTCIceTransport: {
  prototype: RTCIceTransport;
  new(): RTCIceTransport;
};

export interface RTCPeerConnectionEventMap {
  "connectionstatechange": Event;
  "datachannel": RTCDataChannelEvent;
  "icecandidate": RTCPeerConnectionIceEvent;
  "icecandidateerror": Event;
  "iceconnectionstatechange": Event;
  "icegatheringstatechange": Event;
  "negotiationneeded": Event;
  "signalingstatechange": Event;
  "track": RTCTrackEvent;
}

/** A WebRTC connection between the local computer and a remote peer. It provides methods to connect to a remote peer, maintain and monitor the connection, and close the connection once it's no longer needed. */
export interface RTCPeerConnection extends EventTarget {
  readonly canTrickleIceCandidates: boolean | null;
  readonly connectionState: RTCPeerConnectionState;
  readonly currentLocalDescription: RTCSessionDescription | null;
  readonly currentRemoteDescription: RTCSessionDescription | null;
  readonly iceConnectionState: RTCIceConnectionState;
  readonly iceGatheringState: RTCIceGatheringState;
  readonly localDescription: RTCSessionDescription | null;
  onconnectionstatechange: ((this: RTCPeerConnection, ev: Event) => any) | null;
  ondatachannel: ((this: RTCPeerConnection, ev: RTCDataChannelEvent) => any) | null;
  onicecandidate: ((this: RTCPeerConnection, ev: RTCPeerConnectionIceEvent) => any) | null;
  onicecandidateerror: ((this: RTCPeerConnection, ev: Event) => any) | null;
  oniceconnectionstatechange: ((this: RTCPeerConnection, ev: Event) => any) | null;
  onicegatheringstatechange: ((this: RTCPeerConnection, ev: Event) => any) | null;
  onnegotiationneeded: ((this: RTCPeerConnection, ev: Event) => any) | null;
  onsignalingstatechange: ((this: RTCPeerConnection, ev: Event) => any) | null;
  ontrack: ((this: RTCPeerConnection, ev: RTCTrackEvent) => any) | null;
  readonly pendingLocalDescription: RTCSessionDescription | null;
  readonly pendingRemoteDescription: RTCSessionDescription | null;
  readonly remoteDescription: RTCSessionDescription | null;
  readonly sctp: RTCSctpTransport | null;
  readonly signalingState: RTCSignalingState;
  addIceCandidate(candidate?: RTCIceCandidateInit): Promise<void>;
  /** @deprecated */
  addIceCandidate(candidate: RTCIceCandidateInit, successCallback: VoidFunction, failureCallback: RTCPeerConnectionErrorCallback): Promise<void>;
  addTrack(track: MediaStreamTrack, ...streams: MediaStream[]): RTCRtpSender;
  addTransceiver(trackOrKind: MediaStreamTrack | string, init?: RTCRtpTransceiverInit): RTCRtpTransceiver;
  close(): void;
  createAnswer(options?: RTCAnswerOptions): Promise<RTCSessionDescriptionInit>;
  /** @deprecated */
  createAnswer(successCallback: RTCSessionDescriptionCallback, failureCallback: RTCPeerConnectionErrorCallback): Promise<void>;
  createDataChannel(label: string, dataChannelDict?: RTCDataChannelInit): RTCDataChannel;
  createOffer(options?: RTCOfferOptions): Promise<RTCSessionDescriptionInit>;
  /** @deprecated */
  createOffer(successCallback: RTCSessionDescriptionCallback, failureCallback: RTCPeerConnectionErrorCallback, options?: RTCOfferOptions): Promise<void>;
  getConfiguration(): RTCConfiguration;
  getReceivers(): RTCRtpReceiver[];
  getSenders(): RTCRtpSender[];
  getStats(selector?: MediaStreamTrack | null): Promise<RTCStatsReport>;
  getTransceivers(): RTCRtpTransceiver[];
  removeTrack(sender: RTCRtpSender): void;
  restartIce(): void;
  setConfiguration(configuration?: RTCConfiguration): void;
  setLocalDescription(description?: RTCLocalSessionDescriptionInit): Promise<void>;
  /** @deprecated */
  setLocalDescription(description: RTCLocalSessionDescriptionInit, successCallback: VoidFunction, failureCallback: RTCPeerConnectionErrorCallback): Promise<void>;
  setRemoteDescription(description: RTCSessionDescriptionInit): Promise<void>;
  /** @deprecated */
  setRemoteDescription(description: RTCSessionDescriptionInit, successCallback: VoidFunction, failureCallback: RTCPeerConnectionErrorCallback): Promise<void>;
  addEventListener<K extends keyof RTCPeerConnectionEventMap>(type: K, listener: (this: RTCPeerConnection, ev: RTCPeerConnectionEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof RTCPeerConnectionEventMap>(type: K, listener: (this: RTCPeerConnection, ev: RTCPeerConnectionEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

declare var RTCPeerConnection: {
  prototype: RTCPeerConnection;
  new(configuration?: RTCConfiguration): RTCPeerConnection;
  generateCertificate(keygenAlgorithm: AlgorithmIdentifier): Promise<RTCCertificate>;
};

export interface RTCPeerConnectionIceErrorEvent extends Event {
  readonly address: string | null;
  readonly errorCode: number;
  readonly errorText: string;
  readonly port: number | null;
  readonly url: string;
}

declare var RTCPeerConnectionIceErrorEvent: {
  prototype: RTCPeerConnectionIceErrorEvent;
  new(type: string, eventInitDict: RTCPeerConnectionIceErrorEventInit): RTCPeerConnectionIceErrorEvent;
};

/** Events that occurs in relation to ICE candidates with the target, usually an RTCPeerConnection. Only one event is of this type: icecandidate. */
export interface RTCPeerConnectionIceEvent extends Event {
  readonly candidate: RTCIceCandidate | null;
}

declare var RTCPeerConnectionIceEvent: {
  prototype: RTCPeerConnectionIceEvent;
  new(type: string, eventInitDict?: RTCPeerConnectionIceEventInit): RTCPeerConnectionIceEvent;
};

/** This WebRTC API interface manages the reception and decoding of data for a MediaStreamTrack on an RTCPeerConnection. */
export interface RTCRtpReceiver {
  readonly track: MediaStreamTrack;
  readonly transport: RTCDtlsTransport | null;
  getContributingSources(): RTCRtpContributingSource[];
  getParameters(): RTCRtpReceiveParameters;
  getStats(): Promise<RTCStatsReport>;
  getSynchronizationSources(): RTCRtpSynchronizationSource[];
}

declare var RTCRtpReceiver: {
  prototype: RTCRtpReceiver;
  new(): RTCRtpReceiver;
  getCapabilities(kind: string): RTCRtpCapabilities | null;
};

/** Provides the ability to control and obtain details about how a particular MediaStreamTrack is encoded and sent to a remote peer. */
export interface RTCRtpSender {
  readonly dtmf: RTCDTMFSender | null;
  readonly track: MediaStreamTrack | null;
  readonly transport: RTCDtlsTransport | null;
  getParameters(): RTCRtpSendParameters;
  getStats(): Promise<RTCStatsReport>;
  replaceTrack(withTrack: MediaStreamTrack | null): Promise<void>;
  setParameters(parameters: RTCRtpSendParameters): Promise<void>;
  setStreams(...streams: MediaStream[]): void;
}

declare var RTCRtpSender: {
  prototype: RTCRtpSender;
  new(): RTCRtpSender;
  getCapabilities(kind: string): RTCRtpCapabilities | null;
};

export interface RTCRtpTransceiver {
  readonly currentDirection: RTCRtpTransceiverDirection | null;
  direction: RTCRtpTransceiverDirection;
  readonly mid: string | null;
  readonly receiver: RTCRtpReceiver;
  readonly sender: RTCRtpSender;
  setCodecPreferences(codecs: RTCRtpCodecCapability[]): void;
  stop(): void;
}

declare var RTCRtpTransceiver: {
  prototype: RTCRtpTransceiver;
  new(): RTCRtpTransceiver;
};

export interface RTCSctpTransportEventMap {
  "statechange": Event;
}

export interface RTCSctpTransport extends EventTarget {
  readonly maxChannels: number | null;
  readonly maxMessageSize: number;
  onstatechange: ((this: RTCSctpTransport, ev: Event) => any) | null;
  readonly state: RTCSctpTransportState;
  readonly transport: RTCDtlsTransport;
  addEventListener<K extends keyof RTCSctpTransportEventMap>(type: K, listener: (this: RTCSctpTransport, ev: RTCSctpTransportEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
  removeEventListener<K extends keyof RTCSctpTransportEventMap>(type: K, listener: (this: RTCSctpTransport, ev: RTCSctpTransportEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

declare var RTCSctpTransport: {
  prototype: RTCSctpTransport;
  new(): RTCSctpTransport;
};

/** One end of a connection—or potential connection—and how it's configured. Each RTCSessionDescription consists of a description type indicating which part of the offer/answer negotiation process it describes and of the SDP descriptor of the session. */
export interface RTCSessionDescription {
  readonly sdp: string;
  readonly type: RTCSdpType;
  toJSON(): any;
}

declare var RTCSessionDescription: {
  prototype: RTCSessionDescription;
  new(descriptionInitDict: RTCSessionDescriptionInit): RTCSessionDescription;
};

export interface RTCStatsReport {
  forEach(callbackfn: (value: any, key: string, parent: RTCStatsReport) => void, thisArg?: any): void;
}

declare var RTCStatsReport: {
  prototype: RTCStatsReport;
  new(): RTCStatsReport;
};

export interface RTCTrackEvent extends Event {
  readonly receiver: RTCRtpReceiver;
  readonly streams: ReadonlyArray<MediaStream>;
  readonly track: MediaStreamTrack;
  readonly transceiver: RTCRtpTransceiver;
}

declare var RTCTrackEvent: {
  prototype: RTCTrackEvent;
  new(type: string, eventInitDict: RTCTrackEventInit): RTCTrackEvent;
};

export interface RTCPeerConnectionErrorCallback {
  (error: DOMException): void;
}

export interface RTCSessionDescriptionCallback {
  (description: RTCSessionDescriptionInit): void;
}

type RTCBundlePolicy = "balanced" | "max-bundle" | "max-compat";
type RTCDataChannelState = "closed" | "closing" | "connecting" | "open";
type RTCDegradationPreference = "balanced" | "maintain-framerate" | "maintain-resolution";
type RTCDtlsTransportState = "closed" | "connected" | "connecting" | "failed" | "new";
type RTCEncodedVideoFrameType = "delta" | "empty" | "key";
type RTCErrorDetailType = "data-channel-failure" | "dtls-failure" | "fingerprint-failure" | "hardware-encoder-error" | "hardware-encoder-not-available" | "sctp-failure" | "sdp-syntax-error";
type RTCIceCandidateType = "host" | "prflx" | "relay" | "srflx";
type RTCIceComponent = "rtcp" | "rtp";
type RTCIceConnectionState = "checking" | "closed" | "completed" | "connected" | "disconnected" | "failed" | "new";
type RTCIceCredentialType = "password";
type RTCIceGathererState = "complete" | "gathering" | "new";
type RTCIceGatheringState = "complete" | "gathering" | "new";
type RTCIceProtocol = "tcp" | "udp";
type RTCIceTcpCandidateType = "active" | "passive" | "so";
type RTCIceTransportPolicy = "all" | "relay";
type RTCIceTransportState = "checking" | "closed" | "completed" | "connected" | "disconnected" | "failed" | "new";
type RTCPeerConnectionState = "closed" | "connected" | "connecting" | "disconnected" | "failed" | "new";
type RTCPriorityType = "high" | "low" | "medium" | "very-low";
type RTCRtcpMuxPolicy = "require";
type RTCRtpTransceiverDirection = "inactive" | "recvonly" | "sendonly" | "sendrecv" | "stopped";
type RTCSctpTransportState = "closed" | "connected" | "connecting";
type RTCSdpType = "answer" | "offer" | "pranswer" | "rollback";
type RTCSignalingState = "closed" | "have-local-offer" | "have-local-pranswer" | "have-remote-offer" | "have-remote-pranswer" | "stable";
type RTCStatsIceCandidatePairState = "failed" | "frozen" | "in-progress" | "inprogress" | "succeeded" | "waiting";
type RTCStatsType = "candidate-pair" | "certificate" | "codec" | "csrc" | "data-channel" | "inbound-rtp" | "local-candidate" | "media-source" | "outbound-rtp" | "peer-connection" | "remote-candidate" | "remote-inbound-rtp" | "remote-outbound-rtp" | "track" | "transport";


// nonstandard
export declare var nonstandard: {
  RTCAudioSource: {
    prototype: RTCAudioSource,
    new(): RTCAudioSource
  },
  RTCAudioSink: {
    prototype: RTCAudioSink,
    new(track: MediaStreamTrack): RTCAudioSink
  },
  RTCVideoSource: {
    prototype: RTCVideoSource,
    new(init?: RTCVideoSourceInit): RTCVideoSource
  },
  RTCVideoSink: {
    prototype: RTCVideoSink,
    new(track: MediaStreamTrack): RTCVideoSink
  },
  i420ToRgba(
    i420Frame: { width: number, height: number, data: Uint8ClampedArray },
    rgbaFrame: { width: number, height: number, data: Uint8ClampedArray },
  ): void,
  rgbaToI420(
    i420Frame: { width: number, height: number, data: Uint8ClampedArray },
    rgbaFrame: { width: number, height: number, data: Uint8ClampedArray },
  ): void,
}

export interface RTCAudioSource {
  createTrack(): MediaStreamTrack;
  onData(data: RTCAudioData): void;
}

export interface RTCAudioData {
  samples: Int16Array;
  sampleRate: number;
  bitsPerSample?: 16;
  channelCount?: 1;
  numberOfFrames?: number;
}

export interface RTCAudioSink extends EventTarget {
  stop(): void;
  readonly stopped: boolean;
  ondata: ((this: RTCAudioSink, ev: RTCAudioDataEvent) => any) | null;
  addEventListener(type: "data", listener: DataEventListener | DataEventListenerObject | null, options?: boolean | AddEventListenerOptions): void;
  removeEventListener(type: "data", callback: DataEventListener | DataEventListenerObject | null, options?: EventListenerOptions | boolean): void;
}

export interface RTCAudioDataEvent extends RTCAudioData, Event {
  type: 'data';
}

interface DataEventListener extends EventListener {
  (data: RTCAudioDataEvent): void
}

interface DataEventListenerObject extends EventListenerObject {
  handleEvent(evt: RTCAudioDataEvent): void;
}

export interface RTCVideoSourceInit {
  isScreencast?: boolean;
  needsDenoising?: boolean;
}

export interface RTCVideoSource {
  readonly isScreencast: boolean;
  readonly needsDenoising?: boolean;
  createTrack(): MediaStreamTrack;
  onFrame(frame: RTCVideoFrame): void;
}

export interface RTCVideoFrame {
  width: number;
  height: number;
  data: Uint8ClampedArray;
  rotation?: number;
}

export interface RTCVideoSink {
  stop(): void;
  readonly stopped: boolean;
  onframe: ((this: RTCVideoSink, ev: RTCVideoFrameEvent) => any) | null;
  addEventListener(type: "data", listener: FrameEventListener | FrameEventListenerObject | null, options?: boolean | AddEventListenerOptions): void;
  removeEventListener(type: "data", callback: FrameEventListener | FrameEventListenerObject | null, options?: EventListenerOptions | boolean): void;
}

export interface RTCVideoFrameEvent extends Event {
  type: 'frame';
  frame: RTCVideoFrame;
}

interface FrameEventListener extends EventListener {
  (data: RTCVideoFrameEvent): void
}

interface FrameEventListenerObject extends EventListenerObject {
  handleEvent(evt: RTCVideoFrameEvent): void;
}

Feature: 클라이언트와 미디어 서버가 양방향 통신 할 수 있도록 구성한다.

Feature Description

• 양방향 통신 기능 구현

To-Do

• socket.io를 활용한 양방향 통신 기능 구현

추가 사항

Feature: 서버는 적절한 입장코드를 반환하고 DB에 저장한다.

Feature Description

사용 중인 입장 코드 반환을 방지하기 위해, 현재 사용 중인 입장 코드를 DB에서 관리한다.

To-Do

• 강의 참여 코드 생성 시, DB에서 사용 중인 참여 코드인지 확인
• 강의 생성 후, 참여 코드를 DB에 추가

추가 사항

Feature: 사용자가 입력한 코드가 유효한 코드인지 확인한다.

Feature Description

사용자가 입력한 코드가 유효한 코드인지 확인한다.

To-Do

• 강의 참여 API, 강의 조회 API에서 code 값에 해당하는 강의가 있는지 확인
• 강의가 없다면 404 Not Found 에러 반환

Feature: 발표자의 화이트보드 수정사항을 강의실 참여자에게 브로드캐스팅한다.

Feature Description

초기에는 변경 로그 전달이였으나, 현재는 화이트보드의 영상을 전달하는 방식으로 변경되었습니다.
추후 화이트보드 변경 로그로 변경 가능성 있습니다.

To-Do

• 미디어 서버에서 발표자의 화이트보드 영상을 참여자에게 전달한다.

추가 사항

Feature: 서버로부터 받은 프로필 이미지와 닉네임을 표시한다.

Feature Description

여기에 작성하세요

To-Do

• Todo1
• Todo2
• Todo3

추가 사항

여기에 작성하세요

Feature: 404 페이지를 확인할 수 있고, 버튼을 클릭하여 메인 페이지로 이동할 수 있다.(UI 작업 포함)

Feature Description

404 Error 페이지 작업 #24

To-Do

• Error 페이지 UI 작업 (반응형)
• Error 페이지 Redirect 작업
• Error 페이지 바탕으로 강의 종료 페이지 UI 작업

추가 사항

Feature: 잘못된 주소로 접근 시에 404 페이지로 리다이렉트한다.

Feature Description

여기에 작성하세요

To-Do

• Todo1
• Todo2
• Todo3

추가 사항

여기에 작성하세요

Feature: 강의 참여 페이지 채팅 사이드바를 사용자가 확인할 수 있다 (UI 작업)

Feature Description

여기에 작성하세요

To-Do

• Todo1
• Todo2
• Todo3

추가 사항

여기에 작성하세요

Feature: 유효한 코드라면 강의 정보와 강의 참여 버튼이 있는 페이지를 보여주고, 강의 참여 버튼을 눌러 강의실에 입장할 수 있다.

Feature Description

유효한 코드라면 강의 정보와 강의 참여 버튼이 있는 페이지를 보여주고, 강의 참여 버튼을 눌러 강의실에 입장할 수 있다.

To-Do

• API 요청 결과에 따라 state로 title과 description을 표시
• 강의 참여 버튼 클릭 시, 올바른 강의 참여 URL로 이동

추가 사항

2023-12-07.20-57-26.mp4

Feature: 포스트잇을 더블클릭했을 때 글자를 편집할 수 있다.

Feature Description

• 더블클릭하여 메모의 텍스트를 수정 가능하다

To-Do

• 설계
• 구현

추가 사항

�글자가 늘어남에 따라 메모지가 늘어나도록 구현을 해야한다.

Feature: 선택한 요소를 화이트보드 안에서 드래그하여 이동시킬 수 있다.

Feature Description

여기에 작성하세요

To-Do

• Todo1
• Todo2
• Todo3

추가 사항

여기에 작성하세요

Feature: 발표자가 강의 종료 시 강의종료 여부를 데이터베이스에 업데이트한다.

Feature Description

여기에 작성하세요

To-Do

• Todo1
• Todo2
• Todo3

추가 사항

여기에 작성하세요

Feature: 포스트잇을 드래그 앤 드롭으로 움직여 재배치 할 수 있다(최종 좌표 서버로 보내기).

해당 이슈는 중복되거나 다른 기능 구현 과정에서 해결된 이슈이기 때문에 닫습니다.

Feature: 서버에서 강의 종료 알림을 받으면 메인 페이지로 이동하고, 강의 종료 메세지를 표시한다.

Feature Description

여기에 작성하세요

To-Do

• Todo1
• Todo2
• Todo3

추가 사항

여기에 작성하세요

Feature: 질문 내용을 입력하여 버튼을 클릭하면, 서버에 질문 내용을 전달한다.

Feature Description

여기에 작성하세요

To-Do

• Todo1
• Todo2
• Todo3

추가 사항

여기에 작성하세요

Feature: 닉네임이 중복되었으면 경고 모달을 표시한다. (모달 구현)

Feature Description

여기에 작성하세요

To-Do

• Todo1
• Todo2
• Todo3

추가 사항

여기에 작성하세요

Feature: 포스트잇의 색상, 글꼴 등을 편집할 수 있다.

Feature Description

포스트잇 색, 글꼴 편집 기능 close #49

To-Do

• 기존 메모지가 그냥 사각형이기 때문에 텍스트를 입력할 수 있도록 구현(일단 수정은 불가)
• 편집 패널 UI 작업
  
  • 메모 편집 패널 UI 작업
  • 메모지 색상 변경 패널 UI작업
  • 각 버튼 선택 기능 구현
  • 색상 팔레트 토글기능구현
  • 추가: 접근성을 위해 aria-pressed, aria-expanded 추가
• 포스트잇 색 변경 기능 구현

default.mov

• 글꼴(폰트 사이즈, 폰트 정렬 기능)관련 기능 구현

default.mov

• 포스트잇 삭제 기능 구현

default.mov

추가 사항

Feature: 강의 참여 페이지 헤더를 사용자가 확인할 수 있다 (UI 작업)

Feature Description

여기에 작성하세요

To-Do

• Todo1
• Todo2
• Todo3

추가 사항

여기에 작성하세요

Feature: ‘메모지’버튼을 누른 후 사용자가 클릭한 위치에 메모지가 생성된다.

Feature Description

메모지 버튼을 누른후 클릭한 위치에 메모지가 생성된다.

To-Do

• 메모지 버튼을 누른후 클릭한 위치에 메모지가 생성된다.
• 메모지 생성 후 모드를 바꾼다.(일단은 선택 모드)
• 기존 메모지가 생성되어 있는 위치에서 새 메모지를 생성시 기존 메모지가 선택되던 버그 해결
• 추가: 메모 버튼을 클릭시 커서를 변경해 UI에 사용자가 메모 버튼이 눌려있음을 확인할 수 있게 한다.

추가 사항

여기에 작성하세요

Feature: 발표자가 강의 종료 시 참여코드를 무효화한다.

Feature Description

강의가 종료되었을 때 참여코드를 DB에서 삭제한다.

To-Do

• 강의 종료 시 강의코드 삭제

Feature: 마우스로 화이트보드에 선을 그릴 수 있다.

Feature Description

여기에 작성하세요

To-Do

• Fabric.js로 화이드보드를 생성할 수 있다.
• 화이트보드가 사용자의 브라우저 창 크기에 맞춰 재조정 된다.
• 화이트보드 왼쪽 상단에 툴바를 띄워 놓을 수 있다.
• 펜 버튼을 눌러 그리기모드로 전환, 펜 기능을 사용 할 수 있다.
• 그려진 펜의 내용들을 선택 후 delete 키를 눌러 삭제할 수 있다.

추가 사항

여기에 작성하세요

Feature: 화면의 정보들을 주기적으로 서버로 보낸다.

Feature Description

여기에 작성하세요

To-Do

• Todo1
• Todo2
• Todo3

추가 사항

여기에 작성하세요

Feature: 메인 페이지 헤더를 사용자가 확인할 수 있다 (UI 작업)

Feature Description

여기에 작성하세요

To-Do

• Todo1
• Todo2
• Todo3

추가 사항

여기에 작성하세요

Feature: 선택한 요소의 크기를 조절할 수 있다. (메모지, 이미지 한정)

Feature Description

여기에 작성하세요

To-Do

• Todo1
• Todo2
• Todo3

추가 사항

여기에 작성하세요

Feature: 규칙에 맞는 제목과 설명을 입력하면 버튼을 활성화하고, 활성화된 버튼을 클릭시 입력값을 서버로 전달한다.

Feature Description

규칙에 맞는 제목과 설명을 입력하면 버튼을 활성화하고, 활성화된 버튼을 클릭시 입력값을 서버로 전달한다.

To-Do

• 제목과 설명 입력 state 연결
• 버튼 클릭 시에 API 연동 (페이지 이동)

추가 사항

2023-12-07.20-57-26.mp4

Feature: 발표자의 음성을 미디어 서버로 전달한다.

Feature Description

여기에 작성하세요

To-Do

• 발표자가 미디어 서버와 연결한다.
• 발표자의 음성을 미디어 서버에 전달한다.
• 잘 전달되었는지 확인한다.
• 헤더 컴포넌트에서 해당 역할을 수행하도록 한다.

추가 사항

여기에 작성하세요

Feature: 닉네임을 검증하여 올바른 경우 시작하기 버튼을 활성화 하고, 올바르지 않은 경우 경고 문구를 표시한다.

Feature Description

여기에 작성하세요

To-Do

• Todo1
• Todo2
• Todo3

추가 사항

여기에 작성하세요

Feature: recoil과 tailwind 라이브러리 설정을 완료한다.

Feature Description

recoil과 tailwind 설치

To-Do

• tailwind 설치
• recoil 설치

추가 사항

Feature: HTTPS 프로토콜 적용한다.

Feature Description

배포된 프로젝트에 HTTPS 적용을 진행했습니다. webRTC 사용하는 과정에서 HTTPS 적용이 필요하다고 판단해 먼저 해당 작업을 수행했습니다.

To-Do

• 백엔드 서버가 실행 중인 클라우드 서버 내에서 Nginx 설치
• SSL 인증서 발급
• Nginx로 HTTP 접근은 HTTPS로 redirect

추가 사항

클라우드 서버에서 작업해준 내용이라 코드 상 특별한 업데이트는 없습니다. 이대로 issue close 하겠습니다!

Feature: 강의 종료 시 해당 강의실 정보와 발표자와 참여자의 소켓 정보를 제거한다.

Feature Description

강의 종료 시 해당 강의실 정보와 발표자와 참여자의 소켓 정보를 제거한다

To-Do

• 미디어 서버에서 해당 강의실 정보를 제거한다.

추가 사항

Feature: 강의실 생성 요청을 받으면, 강의 정보를 DB에 저장하고 참여코드를 반환한다.

Feature Description

강의실 정보와 함께 강의실 생성 요청을 받으면 DB에 강의실 정보를 저장하고, 강의실 id와 강의 참여 코드를 반환한다.

To-Do

• 강의실 정보(강의 제목, 강의 내용, 발표자)를 DB에 저장한다.
• 강의 참여 코드를 생성하고 반환한다.

추가 사항

여기에 작성하세요

Feature: eslint와 prettier 설정을 완료한다.

Feature Description

협업을 위해 코드 컨벤션을 설정했습니다.

To-Do

• eslint 적용
• prettier 적용

추가 사항

Feature: 선의 색상을 변경할 수 있다.

Feature Description

여기에 작성하세요

To-Do

• CanvasSection 컴포넌트에서 툴바 컴포넌트의 state와 사이드이펙트 분리
• 펜 색 선택 컬러패널 UI 구현
• recoil로 fabric.Canvas 인스턴스 전역 state로 관리
• 체크 UI 구현
• 펜 색 선택 기능 구현

추가 사항

CanvasSection 컴포넌트에서 툴바 컴포넌트의 state와 사이드이펙트 분리를 진행했습니다.

컴포넌트에서 컴포넌트와의 props drilling을 해결하고 state 결합도 분리를 위해 해당 작업을 진행했습니다. 아래 사진과 같이 CanvasSection 컴포넌트에서는 activeTool이라는 state를 가지고는 있지만 실질적으로 상태를 set, get하고 있지는 않았습니다. 그래서 추후 진행할 툴들의 기능(메모지 생성, 펜 모드 활성화 등등)의 함수화 또는 모듈화를 통한 관심사의 분리와 props drilling을 방지하기 위해 state의 분리를 진행했습니다.

펜 색 선택 모달 UI 구현

Feature: 메인 페이지 강의 생성/참여하기 카드를 사용자가 확인할 수 있다 (UI 작업)

Feature Description

메인 페이지 기본 UI 작업 close #16

To-Do

• 메인 페이지 기본 UI 구성
• 메인 페이지 카드 flip 애니메이션 구현
• 메인 페이지 새로운 강의 카드 뒷면 구현
• 메인 페이지 강의 참여하기 카드 뒷면 구현

추가 사항

카드 flip 애니메이션 구현

메인 페이지에서 카드를 뒤집는 애니메이션을 구현하기 위해 다음과 같은 방법을 사용하였습니다.

<div id="wrapper">
  <div id="card">
    <div id="front"/>
    <div id="back"/>
  </div>
</div>

• wrapper : 카드의 사이즈를 결정합니다. 해당 요소의 크기를 기준으로 카드 크기를 결정합니다. 추가적으로 해당 요소를 hover시에 하위의 card를 뒤집도록 할 수 있습니다. (card 요소를 hover시에 뒤집도록 할 경우, 뒤집하는 과정에서 해당 요소의 hover가 정상적으로 작동하지 않을 가능성이 있음)
• card : 해당 요소 내부에 front와 back이 겹쳐 존재하여 이를 뒤집는 것으로 카드를 뒤집는 애니메이션을 구현할 수 있습니다.

각 id별로 필요한 css 속성은 아래와 같습니다.

.wrapper {
  // 요소의 크기를 여기서 결정
  perspective: 1000px;
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transition: all 0.5s;
  perspective-origin: center;
  transform-style: preserve-3d;
}

.front {
  width: 100%;
  height: 100%;
  z-index: 2;
  position: absolute;
  backface-visibility: hidden;
}

.back {
  width: 100%;
  height: 100%;
  z-index: 1;
  transform: rotateY(180deg);
}

• 상위에 relative를 지정하고 하위 요소 2개에 absolute를 지정하는 것으로 카드가 겹치도록 하였습니다.
• back은 transform: rotateY(180deg);를 적용하여 뒤집힌 상태로 겹쳐지도록 하였으며, 카드가 뒤집혔을 때 정상적으로 보이기 위해 해당 속성을 추가하였습니다.
• front가 back에 비해 앞에 위치해야 하기 때문에 z-index를 달리하여 front가 더 높은 값을 가지도록 하였습니다.
• front에 backface-visibility: hidden;속성을 지정하여 뒤집었을 때, 뒷면이 front의 뒷면이 보이지 않도록 하여 back이 정상적으로 표시될 수 있도록 하였습니다.
• 카드가 뒤집히는 애니메이션을 사실적으로 표현하기 위해 transform-style: preserve-3d;를 card에 추가하였습니다. 해당 속성은 해당 컨테이너를 3D 공간에서 렌더링하도록 지정합니다.
• 관련하여 원근감을 줄 수 있는 perspective: 1000px;를 지정하였습니다. perspective의 값이 높을 수록 더욱 멀리서 보는 효과를 줄 수 있습니다.
• perspective와 같이 사용되는 perspective-origin: center;는 perspective의 기준점을 설정해줍니다. 중앙을 기준으로 효과를 줄 수 있도록 추가하였습니다.

여기서 요소 내부의 특정 버튼을 클릭하거나 요소를 hover할 경우에 card에 아래 속성을 추가하는 것으로 카드를 뒤집을 수 있습니다.

// wrapper hover 시나 특정 이벤트 발생 시 카드 뒤집기
transform: rotateY(180deg);

해당 구조를 시각화하면 아래와 같습니다.

메인 페이지에는 카드가 2개 존재하며, 각 카드별로 state를 두어 뒤집혔는지를 판단하였습니다. 한 쪽이 뒤집힌다면, 다른 한 쪽은 다시 앞면을 보이도록 하며, 관련된 state들을 초기화하도록 하였습니다.

강의 코드 입력창 구현

총 6자리의 숫자로 구성된 강의 코드를 입력받기 위해 총 6개의 input을 추가하여 이를 구현하였습니다. type을 number로 지정할 경우, 기본값이 0으로 지정될 뿐더러 각 input마다의 입력 자릿수를 제한할 수 없기 때문에 이를 위해 string으로 지정하였습니다.

<div className="w-full h-16 flex flex-row justify-between gap-2 mt-2">
      {inputs.map((value, index) => (
        <input
          key={index}
          type="string"
          maxLength={1}
          value={value}
          onChange={handleChange(index)}
          onKeyDown={handleBackspace(index)}
          ref={(element) => (inputRefs.current[index] = element)}
          className="border-black flex-grow w-full rounded-xl text-center align-middle medium-32"
        />
      ))}
    </div>

각 자리별로 숫자를 입력했을 경우에 다음 input으로 넘어가도록 처리하기 위해 index를 활용하였습니다.

const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
const [inputs, setInputs] = useState<string[]>(Array(6).fill(""));

 const handleChange = (index: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;

    if (value === "" || /^[0-9]$/i.test(value)) {
      const newInputs = [...inputs];
      newInputs[index] = value;
      setInputs(newInputs);

      if (value && index < inputs.length - 1) {
        inputRefs.current[index + 1]?.focus();
      }
    }
  };

  const handleBackspace = (index: number) => (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Backspace" && !inputs[index] && index > 0) {
      inputRefs.current[index - 1]?.focus();
    }
  };

배열의 형태로 state를 관리하여 각 자리에 입력된 값을 반영하였습니다. 입력되었을 경우, 다음 index에 위치하는 input에 focus되도록 처리하였습니다. 반대로 Backspace가 입력된 경우, 이전 index에 focus되도록 처리하였습니다.

focus 시에 input박스 테두리 변경

tailwind의 동일한 속성과 관련하여 중복해서 지정할 경우, 정상적으로 작동하지 않는 경우가 있었습니다. 이를 해결하기 위해 아래와 같은 방식으로 해결하였습니다.

<input
            type="text"
            className="rounded-xl border-black w-full flex-grow medium-12 p-3 focus:outline-none focus:ring-1 focus:ring-boarlog-100 focus:border-transparent"
            placeholder="강의 제목을 입력해주세요"
            maxLength={50}
          />

• border-black으로 기본 border의 색상을 지정합니다.
• focus되었을 경우, 아래 속성이 적용됩니다.
• outline-none : focus시의 브라우저의 기본 outline을 제거합니다.
• ring-1, ring-boarlog-100 : focus 시에 ring을 추가하고 색상을 지정합니다.
• border-transparent : 요소가 focus될 때 테두리를 투명하게 처리합니다.

border 대신에 ring만 표시하는 것으로 focus시에 border 색상이 변경되는 것처럼 처리하였습니다.

카드 flip 애니메이션

2023-11-28.11-53-54.mp4

강의 코드 입력

2023-11-28.11-54-09.mp4

input창 focus

2023-11-28.11-54-27.mp4

Feature: 버튼을 클릭하여 구글 소셜 로그인을 진행할 수 있다.

Feature Description

여기에 작성하세요

To-Do

• 로그인 페이지 UI 작업
• Todo2
• Todo3

추가 사항

여기에 작성하세요

Feature: ‘종료하시겠습니까?’ 모달창을 표시하고 이를 클릭하여 발표자가 강의를 종료하고, 서버에 정보를 알린다.

Feature Description

여기에 작성하세요

To-Do

• Todo1
• Todo2
• Todo3

추가 사항

여기에 작성하세요

Feature: 서버로부터 진행자의 화이트보드를 받아 화면에 렌더링한다.

Feature Description

여기에 작성하세요

To-Do

• Todo1
• Todo2
• Todo3

추가 사항

여기에 작성하세요

Feature: 사용자가 코드를 입력(6자리)하면 강의 조회하기 버튼을 활성화하고, 이를 클릭하면 해당 코드로 서버에 강의 정보 요청을 보낸다.

Feature Description

사용자가 코드를 입력(6자리)하면 강의 조회하기 버튼을 활성화하고, 이를 클릭하면 해당 코드로 서버에 강의 정보 요청을 보낸다.

To-Do

• 입력받은 강의코드 바탕으로 API 요청

추가 사항

2023-12-07.20-57-26.mp4

Feature: 활성화된 시작하기 버튼을 클릭하면 메인 페이지로 이동한다. (검증, 분기 처리)

Feature Description

여기에 작성하세요

To-Do

• Todo1
• Todo2
• Todo3

추가 사항

여기에 작성하세요

Feature: 서버는 구글 계정 정보를 활용하여 구글 프로필 이미지와 닉네임을 전달한다.

Feature Description

OAuth를 활용한 구글 로그인 구현을 위해서 구글 사용자 정보를 가져오는 기능을 구현했습니다. 사용자가 최초 로그인 한 회원이라면 회원가입을 진행시키기 위해 회원가입 기능도 작성했습니다.

To-Do

• 구글 로그인을 통한 사용자 정보 가져오기
• 최초 로그인 한 유저를 위한 회원가입 기능
• 회원가입을 위한 DB 연결 및 User 스키마 생성

Feature: 마우스로 화이트보드 요소(메모지 우선)를 클릭하여 선택해서 편집할 수 있다. (수정/삭제 옵션 표시)

Feature Description

여기에 작성하세요

To-Do

• Todo1
• Todo2
• Todo3

추가 사항

여기에 작성하세요

Feature: React 개발 환경을 Vite로 구성한다.

Feature Description

vite 초기 환경 설정

To-Do

• npm 설치
• git ignore 설치
• vite 설치

추가 사항

Feature: WebRTC 연결 수립을 위한 시그널링 기능을 추가한다.

Feature Description

미디어서버에서 클라이언트와 WebRTC 연결을 위해 시그널링 기능을 추가한다.

To-Do

• 미디어 서버 시그널링 기능 지원

추가 사항

Feature: eslint와 prettier 설정을 완료한다.

Feature Description

여기에 작성하세요

To-Do

• Todo1
• Todo2
• Todo3

추가 사항

여기에 작성하세요