skkuding / codedang

Online Judge for SKKU
https://codedang.com
MIT License
45 stars 9 forks source link

feat(fe): refresh problems dropdown list after submit #2212

Closed jwoojin9 closed 4 days ago

jwoojin9 commented 1 week ago

Description

contest 코드 에디터에서 submit을 해도 새로고침을 하지 않으면 dropdown list에서 방금 제출한 문제에 체크 아이콘이 뜨지 않는 현상이 있었는데 (제 맘대로 바꿔도 되는지는 모르겠지만) 일단 EditorLayout을 클라이언트 컴포넌트로 바꾸고 useState로 문제 목록을 관리하도록 수정하여 submit 버튼을 눌렀을 때 problem list를 새로고침하도록 변경하였습니다.

노션 태스크에는 문제 간 이동에 따라 icon 노출 여부가 바뀐다는 2번째 버그도 적어주셨는데, 일단 저는 그 현상을 재현할 수 없어서 첫 번째 문제만 해결하였습니다.

closes TAS-1052 closes TAS-1067

Additional context


Before submitting the PR, please make sure you do the following

notion-workspace[bot] commented 1 week ago

24-2 2차 배포 QA) Contest Editor - Dropdown List QA 결과 공유 및 task 생성 논의

jimin9038 commented 1 week ago

EditorLayout를 Client Component로 바꾸는 것은 좋지 않다고 생각합니다! 아래는 coolify.codedang.com / 2212.coolify.codedang.com 에서 같은 페이지를 들어간 결과입니다. (3G Network로 Throttling 걸어서 테스트 해봤어요)

기존에는 처음 페이지 렌더링을 할때를 제외하고는 바로 페이지에 들어가지지만, EditorLayout을 클라이언트 컴포넌트로 변경하면 사용자는 언제나 하얀 페이지를 마주하게 됩니다. 제 생각에는 유저가 풀었는지를 표시해주는 드롭다운 쪽만 Client Component로 분리하는 것이 좋을 것 같습니다 :)

https://github.com/user-attachments/assets/fb444544-0d16-4a74-8e5e-9f8614481e89

https://github.com/user-attachments/assets/1f475ef7-d946-47d4-9dc1-79e995b564a9

eunnbi commented 1 week ago

Tanstack query를 사용하면 props drilling을 피할 수 있답니다!

queryKey 만을 이용해 data refetching이 가능합니다~

이참에 tanstack query를 공부해보는 것도 좋을 것 같아요ㅎㅎ

힌트 (최후의 수단) ```tsx // 드롭다운 컴포넌트 const { data } = useQuery({ queryKey: ['contest', contestId, 'problems'], queryFn: () => getContestProblems(contestId) }) ``` ```tsx // 제출 버튼 const queryClient = useQueryClient() await queryClient.refetchQueries({ queryKey: ['contest', contestId, 'problems' ] }) // 같은 키를 가진 query 데이터 업데이트 ```
notion-workspace[bot] commented 6 days ago

작업24-2 2차 배포 QA) Problem에서 코드를 submit하거나 맞추었을 때 바로 체크표시가 뜨지 않음.

Kohminchae commented 5 days ago

로컬 개발환경이 너무 느려서 coolfiy로 테스트 하려고 계속 커밋했었는데 이제 진짜 task 완료했습니다! 아무나 보시고 리뷰 해주시면 감사하겠습니다😉