Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

404 페이지, 존재하지 않는 스페이스 페이지 핸들링 #166

Merged
merged 9 commits into from
Nov 28, 2024

Conversation

hoqn
Copy link
Collaborator

@hoqn hoqn commented Nov 28, 2024

✏️ 한 줄 설명

이 PR의 주요 변경 사항이나 구현된 내용을 간략히 설명해 주세요.

데모 공개에 앞서, 자연스러운 사용자 경험을 위해 에러 페이지와 로딩 상태를 구현하고자 했어요.

✅ 작업 내용

  • Error Section 컴포넌트를 만들어, 404나 존재하지 않는 스페이스 접속 시와 같은 경우 핸들링합니다.
  • 스페이스 websocket 연결 로딩 중에 스켈레톤 UI를 구현합니다.

🏷️ 관련 이슈

📸 스크린샷/영상

이번 PR에서 변경되거나 추가된 뷰가 있는 경우 이미지나 동작 영상을 첨부해 주세요.

404 페이지와 존재하지 않는 스페이스 접속 시에 이렇게 뜹니다.

스크린샷 2024-11-28 오후 4 03 40 스크린샷 2024-11-28 오후 4 03 30

로딩할 떄 하얀 화면이 뜨는 게 좀 그래서.. 로딩 바를 넣을까 하다가 그냥 스켈레톤처럼 처리해봤습니다

화면 기록 2024-11-28 오후 4 05 05

📌 리뷰 진행 시 참고 사항

리뷰 코멘트 작성 시 특정 사실에 대해 짚는 것이 아니라 코드에 대한 의견을 제안할 경우, 강도를 함께 제시해주세요! (1점: 가볍게 참고해봐도 좋을듯 ↔ 5점: 꼭 바꾸는 게 좋을 것 같음!)

이건 같이 기여해서 수정해도 좋을 것 같아요 -> 데모 공개 전에 조금 매끄럽지 않은 부분..

@hoqn hoqn requested a review from a team as a code owner November 28, 2024 07:10
@hoqn hoqn requested review from parkblo and CatyJazzy and removed request for a team November 28, 2024 07:10
Copy link
Collaborator

@parkblo parkblo left a comment

Choose a reason for hiding this comment

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

호균님 고생하셨습니다! 에러 그림이 넘 귀엽네요

(1점)
로딩 시에 헤드 노드 스켈레톤과 동시에 '불러오는 중' 같은 문구가 표시되면 알아보기 쉽지 않을까 싶어서 제안드려봅니다 ㅎㅎ

Comment on lines +21 to +26
{RestoreActions && (
<div className="mt-12">
<RestoreActions />
</div>
)}
</div>
Copy link
Collaborator

Choose a reason for hiding this comment

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

RestoreAction을 따로 받아서 더욱 재사용성이 높아진 것 같습니다 !

Comment on lines +41 to +47
provider.once("connection-close", (event: CloseEvent) => {
if (event.code === 1008) {
provider.shouldConnect = false;
setError(new Error("찾을 수 없거나 접근할 수 없는 스페이스예요."));
}
});

Copy link
Collaborator

Choose a reason for hiding this comment

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

(0.3점) 1008 코드 이외의 코드가 발생할 시의 대응을 추가해볼 수도 있을 것 같습니다!

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

넵! 현재 백엔드에서 존재하지 않는 스페이스는 1008 코드 주면서 연결을 끊고 있는데, 다른 경우엔 "알 수 없는 오류"처럼 처리해야 할 것 같아요.

대신 이렇게 shouldConnect = false를 해줘도 될지 모르겠네요. 기본적으로 계속 연결 재시도를 하더라고요. 1008번의 경우 확실히 재연결이 필요가 없어서 이렇게 했습니다

@hoqn
Copy link
Collaborator Author

hoqn commented Nov 28, 2024

호균님 고생하셨습니다! 에러 그림이 넘 귀엽네요

(1점) 로딩 시에 헤드 노드 스켈레톤과 동시에 '불러오는 중' 같은 문구가 표시되면 알아보기 쉽지 않을까 싶어서 제안드려봅니다 ㅎㅎ

헤드 노드 스켈레톤을 아예 뺄까 생각 중입니다. 로딩바나 안내 문구 넣기엔 너무 짧은 시간이라 스켈레톤이 낫지 않을까 했는데 그러기조차도 너무 짧은 시간이네요.

화면 기록 2024-11-28 오후 4 52 10

대신 이렇게 로더를 헤드노드 크기에 맞춰서 해놓는 건 어떨까 고민 중입니다. (이게 아예 회전하는 건데 gif로 하다보니까 뭔가 프레임이 이상하네요)

Copy link
Collaborator

@CatyJazzy CatyJazzy left a comment

Choose a reason for hiding this comment

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

ㅋㅋㅋㅋㅋ 흔들흔들거리는 프레임이 조금 낯설긴 하지만, 슬랙에서 얘기나눈 것처럼 스켈레톤보다 첨부해주신 효과가 더 좋을 것 같습니다 👍

@hoqn hoqn merged commit e0f5b98 into dev Nov 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants