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

[FE] feat#46 선택한 퀴즈셋 서버로 전송 #209

Merged
merged 14 commits into from
Nov 19, 2024

Conversation

ijun17
Copy link
Collaborator

@ijun17 ijun17 commented Nov 18, 2024

➕ 이슈 번호


🔎 작업 내용

  • 선택한 퀴즈셋 서버로 전송
  • 퀴즈셋 검색 및 무한 스크롤 구현
  • 클라이언트와 서버 시간 동기화

🖼 참고 이미지

클라이언트 서버 시간 동기화
image


🎯 리뷰 요구사항 (선택)

  • 특별히 봐줬으면 하는 부분이 있다면 적어주세요

✅ Check List

  • merge할 브랜치의 위치를 확인했나요?
  • Label을 지정했나요?

Copy link
Collaborator

@DongHoonYu96 DongHoonYu96 left a comment

Choose a reason for hiding this comment

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

LGTM

Comment on lines +222 to +243
const clientMessage = await sendToClient(
client,
{
type: 'REQUEST',
payload: {
id: requestId,
url: request.url,
mode: request.mode,
method: request.method,
headers: Object.fromEntries(request.headers.entries()),
cache: request.cache,
credentials: request.credentials,
destination: request.destination,
integrity: request.integrity,
redirect: request.redirect,
referrer: request.referrer,
referrerPolicy: request.referrerPolicy,
body: requestBuffer,
keepalive: request.keepalive,
},
},
[requestBuffer],
Copy link
Collaborator

Choose a reason for hiding this comment

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

목장인..

Comment on lines +33 to +37
new URLSearchParams([
['search', search],
['offset', String(pageParam * SEARCH_COUNT)],
['size', String(SEARCH_COUNT)]
])
Copy link
Collaborator

Choose a reason for hiding this comment

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

이런 도구가 있었군요

Comment on lines +111 to +113
// Bypass all requests when there are no active clients.
// Prevents the self-unregistered worked from handling requests
// after it's been deleted (still remains active until the next reload).
Copy link
Collaborator

Choose a reason for hiding this comment

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

킹피티?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

ㅋㅋㅋㅋㅋㅋ 그 파일이 msw 패키지 설치하고 초기 실행하면 생기는 파일입니다

- 화면 크기 변경 시 플레이어 위치 재조정
- 퀴즈 카운트 다운에는 선택지 보여주지 않음
Copy link
Collaborator

@NewCodes7 NewCodes7 left a comment

Choose a reason for hiding this comment

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

준기님 어제도 수고많으셨습니다!!
시각 동기화 관련해서 코멘트 조금 남겨봤어요 😊

.then((res) => res.json())
.then((res) => {
const endClientTime = Date.now();
const clientTime = (startClientTime + endClientTime) / 2;
Copy link
Collaborator

Choose a reason for hiding this comment

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

P3: clientTime을 평균으로 잡으신 이유가 있나요?
const clientTime = startClientTime + (fetch 응답 오는 데까지 걸린 측정 시간)으로 두면 더 정확하지 않을까요?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

평균 시간에 서버에 요청이 도착하는 것으로 가정하고 있습니다

setOffset(clientTime - res.serverTime);
});
}, []);
const now = useCallback(() => Date.now() + offset, [offset]);
Copy link
Collaborator

Choose a reason for hiding this comment

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

P2: offset을 더하는 게 아니라 빼야 하는 거 아닐까요?

예시)
startClientTime = 1
endClientTime = 5
clientTIme = 3

serverTIme = 2

offset 1

보정해야 하는 클라이언트 시각 = clientTime - offset = 3 - 1 = 2 ( = serverTime과 동일)

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

엌 이런 실수를 ㅋㅋㅋㅋ

Copy link
Collaborator

@songbuild00 songbuild00 left a comment

Choose a reason for hiding this comment

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

클라이언트 서버 시간 동기화 부분이 인상적이네요!

Copy link
Collaborator

@always97 always97 left a comment

Choose a reason for hiding this comment

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

LGTM

return (
<div className="border border-default component-popup flex justify-center items-center h-[280px] w-[1000px] text-orange-300 font-bold text-7xl">
{Math.ceil((currentQuiz.startTime - Date.now()) / 1000)}
{Math.ceil((currentQuiz.startTime - serverNow()) / 1000)}
Copy link
Collaborator

Choose a reason for hiding this comment

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

p2: 1000은 매직넘버로 보입니다 ! 상수화해서 사용하면 좋을것같아요

@ijun17 ijun17 merged commit fbc3eba into boostcampwm-2024:dev-fe Nov 19, 2024
@ijun17 ijun17 deleted the feature-fe-#46 branch December 5, 2024 08:44
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.

5 participants