[Frontend] TODO

[jirheee]

✅ : 작업 완료 🔥 : 작업중

ClassPage

1. Quit Button In Class ✅ (현철)
2. Class Live Chat 없애기 ✅ (현철)
3. 렉쳐 그리드
4. Left Menu - PlayList/Lectures 없애고 Participants -> Classmates ✅ (현철)
5. Live Status in Cards 🔥 (DB lectureList에서 live status 가져오는 것 까지 성공)
6. Lecture Card Date 🔥 (DB lectureList에서 date 가져오는 것 까지 성공)
7. Class Invite: Clip보드에 uuid받기 ✅ (현철)
8. 라이브 렉쳐 카드 크기 키우고, 다른 렉쳐들은 아래쪽에

🚨 Lecture Card 만드실 때 참고 : DB에서 fetch해오는 lectureList에는 다음 정보들이 있습니다. lectureId, lectureDate, lectureName, LiveStatus

---

Chatting

1. Input Change: time marker 없애고, 입력
2. Live Chat일 경우 x업애기

---

Lecture Page

1. Marker가 눈에 안띈다:
   1. 버튼 호버 지우기 ✅
   2. 버튼, 마커 크기 키우기 ✅
   3. 마커 -> 깃발 아이콘 ✅
   4. Question, Discussion에 깃발 추가 ✅
2. 유튜브
   1. 렉쳐에 Live 여부에 따라 컨트롤 ✅
   2. (볼륨은 유저가 조절할 수 있어야함)
   3. Start Live할 수 있어야함(Live On, Off Button) ✅
3. 채팅
   1. 채팅 헤더 색 Question, Discussion에 따라 변경 ✅
4. 비디오 인덱스에 따라 플레이리스트 하이라이트
5. Left Menu Lectures 없애기 ✅
   • ClassPage의 classmates는 현재 접속 여부 상관 없이 class에 등록되어있으면 모두, LecturePage의 participants는 현재 lecture에 들어온 사람들만
6. Quit Class -> Quit Lecture ✅ (그냥 둘 다 Quit room 으로 바꿈)

[hy2850]

이슈 정리

• [ ] youtube.tsx에서, 현재 비디오 시간을 계속 기록하는 videoCurrent state 때문에 youtube 컴포넌트가 계속 미친듯이 렌더링됨. → 어차피 re-rendering 필요 없으니까 videoCurrent를 useRef로 바꾸기?

• [ ] 매우 짧은 시간 안에 마커를 여러 번 찍을 수 있음. 마커가 막 겹침.

• [ ] (이런 상황이 있는지 모르겠지만) Lecture가 정상적인 방법으로 제거되지 않고, DB에서만 값을 제거하는 식으로 없애면 classroom은 여전히 제거된 Lecture 표시 (server에서 들고있는 class.ts Class 인스턴스의 lectures 변수에 담겨져있는 Lecture들을 보여주는거라서)

• [ ] lecture.ts의 participants는 join lecture 시점에만 업데이트 하는데, userA가 join 한 뒤 받은 lecture 객체에 있는 participant에는 그 뒤에 join하는 userB에 대한 데이터가 없지않나? 즉 실시간으로 lecture에 들어갔다 나가는 사람들의 리스트 업데이트가 안되는 것 같음 => OnJoinLecture에서 Broadcast로 현재 lecture에 접속중인 사람들에게 새로운 유저가 입장/퇴장 했음을 알리면 됨

• [ ] ClassPage의 classmates는 현재 접속 여부 상관 없이 class에 등록되어있으면 모두, LecturePage의 participants는 현재 lecture에 들어온 사람들만 → 실시간 업데이트 가능한가?

추가할 만한 기능

• 11 Instructor chat highlight

[jirheee]

채팅 메세지 컴포넌트의 시간 폰트 사이즈 조절이 필요할 것 같습니다!

[jirheee]

Safari Chattin not being aliigned

[jirheee]

Safari ChatInput not being aligned

[jirheee]

Empty Message 보내지는 버그

[jirheee]

1. (Needed) Audio Message를 보내는 UI
   • 의견: 기존에 채팅 인풋의 시계를 없애기로 했는데 그 자리에 녹음 버튼을 넣는 것은 어떨까요?
2. (Possible enhancement) 엔터로 채팅 보내기
   • 채팅에서 말풍선 버튼을 클릭하지 않고 엔터로 채팅 보낼 수 있게 하는 것은 어떨까요?

[jirheee]

Possible enhancement for usability Marker Create되어서 리스폰스 받으면, 바로 마커 챗으로 넘어가는건 어떨까요?

[hy2850]

(Possible enhancement) 엔터로 채팅 보내기 채팅에서 말풍선 버튼을 클릭하지 않고 엔터로 채팅 보낼 수 있게 하는 것은 어떨까요?

네. document.addEventListener로 아마 가능할 것 같습니다. 아래는 페이지에 Space, CTRL+R 이벤트 등록하는 Raw JS 예제코드입니다. 채팅 컴포넌트가 focus 되어있을때만 이벤트 작동하도록 할 수도 있을 것 같은데, 찾아봐야 할 것 같네요

useEffect(()=>{
    document.addEventListener('keydown', keydownEvents);
    return ()=>document.removeEventListener('keydown', keydownEvents);
});

const keydownEvents = (evt)=>{   
    if(evt.code === 'Space')
        setDidStart(didStart => !didStart);
    else if (evt.code === 'KeyR'){
        if(evt.ctrlKey){
            evt.preventDefault(); // remove 'Ctrl+R' reload page
            setBreak(false);
        }
        else
            reset();
    }
};

---

Possible enhancement for usability Marker Create되어서 리스폰스 받으면, 바로 마커 챗으로 넘어가는건 어떨까요?

이거 좋네요!

[hy2850]

Instructor가 컨트롤 할 수 있는 lecture 'Live 버튼'

1. Leftmenu 하단

톱니바퀴를 없애고, 맨 오른쪽에 instructor만 볼 수 있도록 'Go Live', Off Live' 토글 버튼을 만들기

2. Leftmenu 상단 NoticeTabSegment에

Material 아래에 instructor만 볼 수 있는 'Go/Off Live' 버튼 추가

일단 2번이 가시성과 접근성이 좋을 것 같아 그렇게 구현해볼게요