Release: v0.2 릴리즈 #237

Feature(#173, #35, #22): 강의 정보 조회, 발표자가 강의 종료 시 참여코드 무효화, 강의코드 검증

로컬 서버로 주소 변경 및 디버기용 버튼을 추가했습니다.

canvas의 JSON 데이터를 실시간으로 생성하는 프로토 타입 함수를 구현했습니다.

fabric canvas에서 강의자가 줌인 한 정도와 마우스로 움직인 정도를 저장하고 불러오게 했습니다.

- 원인: 지우개의 selection:created 이벤트가 등록된 상태로 선택 툴에서 같은 이벤트가 발생해 그래픽 요소 삭제 - 해결: 툴이 바뀔 때마다 이벤트를 지워주는 코드가 있는데 selection:created도 지우도록 했습니다.

- 원인: 메모지에 공백을 입력시 텍스트를 디폴트 값으로 바꿔주게 구현이 되어있습니다. 개행만 하고 다른 텍스트를 입력하지 않았을 때를 체크하기 위해 모든 개행문자를 제거하고 글자 수를 체크합니다. 이 개행문자가 제거된 텍스트가 편집후 메모지의 텍스트 내용으로 갱신되기 때문에 문제가 발생했습니다. - 해결: 개행만하고 다른 문자를 입력하지 않는가를 체크하기 위해 개행을 제거하는 동작을 조건문 안에서만 실행되게 수정했습니다.

소켓 연결 실패할 경우 에러 toast를 띄우고, 서버 연결이 완료된 경우에만 안내 toast를 띄우고 타이머를 작동시키도록 했습니다.

발표자의 음성 또는 영상을 프레임 단위로 받고, 해당 데이터를 버퍼에 저장한다. 이후 강의가 종료되면 버퍼에 저장되어 있던 데이터를 ffmpeg 모듈을 이용하여 mp4 파일로 추출한다.

onframe에 renderAll 메서드로 계속해서 화면을 갱신하여 참여자가 입장과 함께 화면을 바로 보기 좋도록 개선해보았습니다.

발표자의 영상 프레임과 음성 샘플을 저장해둔 임시파일을 병합 후 삭제해야 하는데 이때 비동기로 처리하도록 변경한다.

추후 확장성을 고려하여 영상 및 음성 녹화에 필요한 정보를 클래스 단위로 모듈화했습니다.

미디어 파일 절대 경로 지정 및 임시 파일 삭제 기능 모듈화 적용

…file Feature(#180): 발표자의 영상과 음성 스트림을 파일로 저장

디버깅 용도의 버튼을 삭제하고, 미디어 서버의 주소를 원래대로 변경했습니다.

오류 해결 과정에서 사용하기위해 import한 내용을 제거했습니다.

Fix(#177, #178): 화이트보드(지우개, 메모지) 관련 버그 수정

…t-connect-test

Fix(#183) 강의 참여시 곧바로 발표자의 화이트보드가 보이도록 개선

- API 연동을 위한 axios 라이브러리를 설치하였습니다.

음성 입출력 관련 state 파일을 src/stores로 이동했습니다.

Feature(#187): Swagger 설정

Feature(#188): Axios 라이브러리 설치

강의 생성(또는 입장) 소켓과 강의 기능 제공 소켓이 다른 소켓으로 연결되어, access token으로 클라이언트를 구분한다. 클라이언트의 접속이 끊겨서 새로운 socket으로 요청하더라도 쉽게 클라이언트를 판별할 수 있다.

클라이언트에서 미디어 서버로 socket 요청을 보낼 때 auth 필드에 access token을 추가하여 요청한다.

Fix(#182): 미디어 서버에서 access token으로 사용자를 판별하도록 재구성

…231204-socket-connect-test

변경된 미디어 서버에 맞춰서 강의자와 참여자 페이지의 연결 과정을 수정했습니다.

발표자에서 서버로 소켓 emit 이벤트를 실행시킨 후, 참여자에게 보이는 것을 확인했습니다.

- 에러 페이지 라우팅 작업을 완료하였습니다. - 에러 페이지의 UI 작업을 완료하였습니다. - 모바일을 고려하여 반응형 작업을 완료하였습니다.

- 홈 화면으로 돌아가기 버튼 클릭 시에 Home으로 이동하도록 navigate를 추가하였습니다.

- 강의 종료 페이지 UI를 구성하였습니다.

참여자 페이지에서 발표자 페이지로 소켓 통신을 테스트하고, 참여자 페이지에 서버 연결 실패를 알리는 toast를 추가했습니다.

- 접근성을 위해 input에 label을 연결해야 하는데, 이 label의 텍스트를 디자인을 위해 숨기기만 하기위한 스타일입니다

- 채팅 사이드바 UI 작업 - 채팅 공백시 버튼 비활성화 기능 구현

canvas의 내용을 미디어 스트림이 아닌 json형태로 전송하는 프로토타입을 구현했습니다.

- Error 페이지의 이름을 명시적으로 변경하였습니다.

Feature(#24): Error 페이지, 강의 종료 페이지 구현

서버에 메세지를 보내고 받는 socket 객체를 recoil로 관리할 수 있도록 개선했습니다.

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

…231204-socket-connect-test

질문 내용을 입력 후 버튼을 누르면 서버를 통해 강의자에게 질문 내용을 전달합니다.

미디어 서버 주소를 로컬에서 배포 서버로 변경했습니다.

참여자 페이지에서 다른 페이지로 navigate 할 때 발생하는 오류를 수정했습니다. Co-authored-by: Byeonjin <[email protected]> Co-authored-by: LellowMellow <[email protected]>

삭제했습니다

state를 불러오는 경로를 @을 이용한 절대경로로 수정했습니다.

Feature(#40)

강의자가 서버에 연결을 성공한 시점을 보다 정확한 시점으로 변경해서 해당 시점에서 서버 연결 완료 toast를 띄우고 socket2 연결을 하도록 개선했습니다.

…time Feature(#196): 참여자가 강의실 입장 시 강의 시작시간 전달

roomid를 주소값의 쿼리스트링으로 받아 올 수 있게 개선했습니다.

…231205-roomnum-and-starttime

참여자 페이지에서 강의 진행 시간을 확인할 수 있습니다.

주소 뒤에 쿼리스트링으로 (?123456) 강의 코드를 입력하면 해당 코드를 방 번호로 해서 같은 코드를 가진 사람에게만 강의를 제공하도록 했습니다.

LogContainer에 추가했습니다

- 미디어 서버 관련 주소를 env로 분리하였습니다.

…r-env-setting Refactor: API 요청 관련 URL env 처리

…231205-roomnum-and-starttime

미디어 서버 주소를 env를 사용하도록 개선했습니다.

Feature(#69) 참여자 페이지 강의 시간 확인, 강의 코드에 맞춰서 강의실 생성/입장 구현

비디오 스트리밍을 사용하지 않고 화이트보드를 공유하는 과정을 구현했습니다.

- 발표자의 질문 리스트가 새로운 질문이 발생할 때마다 업데이트 되도록 구현했습니다.(QuestionList 컴포넌트가 questionStateList 리코일 state에 따라 업데이트 되도록 하였습니다.) - 질문자가 질문 입력 후 엔터를 치면 해당 질문이 전송되도록 구현했습니다. - stateQuestionList를 selector를 이용해 파생된 상태로 만들어 관리하도록 변경했습니다.

Feature(#59, #161) 발표자 미디어 파일 Object Storage에 저장, DB에 강의 정보 업데이트

미디어 서버로부터 특정 강의의 화이트보드 변경내역을 받으면 DB에 저장한다.

Feature(#185): 질문이 들어오면 발표자에게도 반영하기(인디케이터, 질문리스트)

- 질문 채팅창 톨글 기능 추가

경과시간을 ms 단위로 저장하도록 개선했습니다.

경로만 보고 의미를 직관적으로 알 수 있도록 나타냈습니다.

Feature(#202): 화이트보드 변경내역 추가 API 구현

fabric canvas의 높이와 너비를 전달할 수 있도록 했습니다.

…chatting Feature(#204): 질문 채팅창을 버튼 토글을 이용해 숨기고 보여줄 수 있다.

참여자 페이지에서 발표자 화면 비율에 맞춰 화이트보드를 출력하고, 변경 내영 반영과정을 내용/viewport/size로 나누어 변경 내용만 반영하도록 해서 delay를 줄였습니다.

원본 화이트보드의 비율을 가로 기준으로 줄인 후, 해당 화이트보드의 높이가 브라우저 높이보다 클 때, 브라우저 높이에 맞춰 추가로 화이트보드의 크기를 조정합니다.

- review 페이지 추가

- 스크립트 데이터를 요청해 이를 프롬프트에 뿌려줄 수 있도록 구현(추후 API 주소만 바꿔주면 됩니다.)

참여자 페이지에서 화이트보드 데이터를 수신하기 전에 안내 문구를 추가했습니다. 추가로 화이트보드 높이를 변경된 헤더 높이에 맞췄습니다.

…231205-json-test

- 재생/정지 버튼 토글

- 원인: 한글이 조합 중에는 언더바가 생기는데 이를 엔터나 방향키 띄어쓰기 등의 커서 이동시 해제된다. 조합 중인 상태, 엔터를 눌러 조합이 끝난 후의 상태 둘 다 이벤트가 발생했기 때문이다. - 해결: 엔터를 누른 후 key가 up 되었을 때 전송하도록 해 문제를 해결했습니다.

…rols.tsx

Feature(#39, #43, #44, #207) socket 통신으로 화이트보드 공유 구현

‘종료하시겠습니까?’ 모달창을 표시하고 이를 클릭하여 발표자가 강의를 종료하고, 서버에 정보를 알립니다. 참여자는 서버로부터 정보를 받아 강의 종료를 확인 후 강의 종료 페이지로 이동시킵니다.

…231206-endpage-extra

newHeight가 newHeghit로 되어있던 문제를 해결했습니다.

…le-send fix: 한글 질문 중첩 전송 문제 해결 #211

Feat(#75, #80): 다시보기 페이지 UI 작업 및 스크립트 표시 기능 구현

참여자 페이지에서 캔버스의 요소를 클릭할 수 없도록 투명 div 태그를 위에 덧씌웠습니다.

- 기존: 5가지 색으로 인덱스에 따라 색 지정 - 개선: 리스트에 생성되는 메모지의 색을 노란색으로 고정해 화이트보드에 생성되는 메모지의 색과 일치시켰습니다.

modal의 z-index가 낮아서 참여자 페이지에서 모달을 클릭할 수 없던 문제를 개선했습니다.

…231206-endpage-extra

잘못 입력한 z-index를 수정했습니다.

Feature(#31, #36) 강의가 종료되면 강의자와 참여자 페이지 모두에게 강의 종료 페이지로 이동

Feature(#79): 클로바 API를 사용하여 음성을 글로 추출하고 자막으로 DB에 저장한다.

…hiteboard-data Feature(#220): 강의실 입장 시 현 시점 화이트보드 데이터 전달

강의 페이지의 쿼리스트링에 맞춰서 강의코드를 표시하고, 복사 내용에도 반영합니다.

play.svg 아이콘이 진상님 PR에서 덮어씌워져서 생긴 충돌을 복구했습니다.프로그래스바에서 사용하는 play아이콘에는 progress를 붙였습니다.

…류 해결 setLectureCode위치를 수정해서 오류를 해결했습니다.

볼륨바에 내용을 전달하는 과정을 recoil을 이용하여 단순화했습니다.

…231207-enter-room

화이트보드 변경 사항은 JSON 형태로 전달하도록 구성했기 때문에, 발표자의 화이트보드 영상과 음성을 참여자에게 전달하는 것이 아닌 발표자의 음성만 전달한다. 또한 강의 종료 시 음성 파일로 저장하도록 변경했다.

서버에 참여자가 처음 입장 했을 때, 강의자가 마지막으로 보낸 화이트보드 데이터를 받아서 화면에 그릴 수 있습니다.

…ream Fix(#222): 발표자의 음성만 참여자에게 전달하고, 강의 종료 시 음성 파일로 저장한다.

…231207-enter-room

…ream Fix: NCP에 파일 업로드 시 mp3 확장자로 저장될 수 있도록 확장자 변경

비디오 스트림 형태로 전송/수신하는 과정을 제거했습니다.

동령님이 수정하신 코드를 이용하여 toast를 같은 함수에서 여러 개 올릴 수 있게 했습니다. Co-authored-by: LellowMellow <[email protected]>

사용하지 않는 주석과 콘솔을 제거했습니다.

Refact/231207 new question focus

…231207-enter-room

오타를 수정했습니다..

제정신이 아니였나 봅니다. 오타가 무려 2개나..

Refector : 강의코드 강의자,참여자 페이지에 반영, 화이트보드 공유 과정 안정화

- 강의 생성과 강의 조회에 관련된 API 코드를 작성했습니다.

…-backspace Refactor(#217): 화이트보드-backspace로 그래픽 요소 지우기 구현

- set method만 사용하는 useToast에서 recoil method를 교체하였습니다.

- 발표자 페이지 접근을 막기 위해 Modernizr를 적용하였습니다.

- ts type 오류를 해결하였습니다.

- 강의 생성과 강의 조회에 관련된 API 코드를 작성했습니다.

- set method만 사용하는 useToast에서 recoil method를 교체하였습니다.

- 발표자 페이지 접근을 막기 위해 Modernizr를 적용하였습니다.

- 강의 생성과 강의 조회에 관련된 API 코드를 작성했습니다.

…ub.com/LellowMellow/web13_Boarlog into feature/231207-add-lecture-api-at-home

- API 요청과 관련하여 처리를 완료하였습니다.

해결했습니다.

- 배포를 위해 불필요한 코드를 제거하였습니다.

해결했습니다.

- var를 let으로 변경하였습니다.

Refact: 이미지 버튼 제거 및 메모지 회전, 크기 조절 기능 제거

…api-at-home Feature(#17, #19, #20, #21, #205): home 페이지 API 연동, modernizr 적용

…07-fix-leave-error

동령님의 부탁으로 수정합니다!

Fix: 참여자/강의자 페이지에서 나갈 때 연결 오류 메세지 나오는 문제 해결

오늘 데일리스크럼에서 나온 문제를 해결했습니다.

fix: 소켓 연결을 일찍 닫아버리는 문제 및 참여자 페이지 소켓 연결 순서 변경

- 데모를 위해 링크를 잠시 변경하였습니다.

chore: 강의 코드 링크 dev 추가

Refactor: 로그인 방식 변경

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Release: v0.2 릴리즈 #237

Release: v0.2 릴리즈 #237

Commits on Nov 30, 2023

Commits on Dec 1, 2023

Commits on Dec 2, 2023

Commits on Dec 3, 2023

Commits on Dec 4, 2023

Commits on Dec 5, 2023

Commits on Dec 6, 2023

Commits on Dec 7, 2023

Commits on Dec 8, 2023

Commits on Dec 9, 2023