Skip to content

Conversation

@chamny20
Copy link
Collaborator

@chamny20 chamny20 commented Jan 8, 2026

🎯 이슈 번호


✅ 작업 내용

  • 코드에디터 UI 구현
  • Yjs를 통한 실시간 협업 로직 구현
  • 자동완성 on/off 기능 구현
  • 발표자 되기/취소 기능 구현

🤔 리뷰 요구사항

  • 구현 과정 및 로직에 대한 설명은 팀노션 [공통 기술 문서]에 업로드하였습니다.
  • 우선적으로 [발표자 되기] / [발표자 취소] 워딩을 사용했는데, 더 좋은 UX라이팅이 있다면 자유롭게 의견주세요.
  • 컨트롤 버튼 부분을 임의로 상단에 배치시켰는데, 실제 화상통화 시 UI를 어떻게 두면 좋을까요?
  • 관심사 분리를 어떻게 더 개선할 수 있을까요?

메모

  • 추후 작업으로 사용자별 실시간 커서 UI 커스텀 필요
  • 나를 제외한 사용자들 커서 보기 및 끄기 기능 리서치 필요

📸 스크린샷 (선택)

2026-01-08.21.36.09.mov
2026-01-08.21.40.03.mov

- 모나코 에디터 UI 연결
- 실시간 동기화를 위해 Yjs 및 모나코 바인딩 구현
- 자동완성 상태 추가
- 자동완성 on/off 토글 핸들러 추가
- 발표자만 편집 가능한 로직 구현
- 발표자만 취소 버튼 클릭 가능하게 구현
- 발표자 1명으로 제한 등
@chamny20 chamny20 self-assigned this Jan 8, 2026
@chamny20 chamny20 linked an issue Jan 8, 2026 that may be closed by this pull request
@chamny20 chamny20 marked this pull request as ready for review January 8, 2026 13:06
Copy link
Collaborator

@tjsdn052 tjsdn052 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다. undo/redo 같은건 Y.undomanager 같은걸로 구현을 해줘야 한다고 봤는데 monaco editor 혹은 y-monaco에서 처리를 해주는지 관련 코드 없어도 동작하는게 신기하네요

먼저 명칭 부분은 단독 편집 추천드립니다.

또한 버튼위치의 경우 발표자 되기 버튼은 상단에 두고 자동 완성은 옵션 같은 부분이고 자주 사용할 기능 같지는 않아서 아래 이미지처럼 드롭다운 메뉴로 뺴는것도 괜찮아보여요

image

Comment on lines +101 to +105
if (hasPresenter) {
alert('이미 누가 발표중이라니까');
// TODO: toast message 띄워주기
return;
}
Copy link
Collaborator

@tjsdn052 tjsdn052 Jan 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

p4: alert 혹은 toast message 대신 hasPresenter 일 땐 버튼 비활성화하는 것도 좋아보입니다.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이게 더 나은 UX같아요. 반영하겠습니다 ~!

Copy link
Collaborator

@seorang42 seorang42 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

잘 봤습니다! 리뷰 요청하신 내용에 대해서 간단하게 의견 남겨놓겠습니다!

  1. 발표자 되기가 아무래도 어색하게 느껴지는건 사실인 것 같아요. 만약 저라면 발표 시작 / 발표 종료나 스포트라이트 / 스포트라이트 해제와 같은 단어를 사용했을 것 같기는 합니다.
  2. 메뉴의 경우 화이트보드에서 만들어지는 툴바를 재사용할 생각이었어요. 근데 코드 에디터는 툴바에 가려지면 화이트보드처럼 슬라이드로 가려진 부분을 표시하는게 불가능해지니까 차라리 별도의 상단 공간으로 두는 것도 괜찮을 것 같네요. 상단 공간에 기존 툴바의 버튼이나 드롭다운 등만 가져와서 사용하면 될 것 같습니다. (별도의 공간에 길게 펼쳐진 툴바 느낌이지 않을까 싶네요)
  3. 추가적으로 언어 설정 Dropdown이 있으면 좋겠어요. Monaco-Editor가 언어 설정 관련 플러그인을 너무 어렵지 않게 제공하고 있다면, 전 언어 설정도 추가되었으면 합니다. 대표적인 Java, JS, TS, Python, C++ 정도라도요!

@chamny20 chamny20 merged commit 729370b into dev Jan 12, 2026
3 checks passed
@chamny20 chamny20 deleted the feature/#99/code-editor branch January 16, 2026 02:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FE] 코드에디터 UI 구현

4 participants