[#131] 대회 종료시 대시보드로 이동 기능 #150

mahwin · 2023-11-28T13:14:29Z

한일

Timer componenet를 범용성 있게 사용하기 위해 여러 props를 받을 수 있게함.
대회 페이지의 competitionId를 Timer의 props로 넘겨줌
넘겨 받은 competitionId로 /contest/dashboard/competitionId로 이동하는 callback 함수를 만들고
useTimer에게 넘겨준 뒤에 useTimer에서 남은 시간이 0이되면 위의 대시보드로 이동하는 callback을 실행하게 함.

작동 화면

2023-11-28.10.02.11.mov

netlify · 2023-11-28T13:14:37Z

✅ Deploy Preview for algo-with-me ready!

Name	Link
🔨 Latest commit	`6294ffc`
🔍 Latest deploy log	https://app.netlify.com/sites/algo-with-me/deploys/6566d0b60577a700095ab9c8
😎 Deploy Preview	https://deploy-preview-150--algo-with-me.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

dmdmdkdkr · 2023-11-28T13:29:32Z

frontend/src/pages/ContestPage.tsx

+        <Timer
+          socket={socket.current}
+          isConnected={isConnected}
+          endsAt={new Date(endsAt)}


이런 식으로 new Date를 안에 작성해줄 수 있군요:D

넵 endsAt가 스웨거에선 string으로 오더라구요. 바뀔수도 있겠지만 string으로 온다고 생각해서 Date로 변경해서 사용하고 있습니다.

dmdmdkdkr · 2023-11-28T13:29:57Z

frontend/src/components/Timer/index.tsx

 }

+const DASHBOARD_URL = '/contest/dashboard';


이렇게 상수로 뺀 거 정말 좋은 것 같아요!

이런것들도 .env에서 관리하고 싶은데 어떻게 생각하시나요

저는 정말 좋은 방법이라고 생각해요! 기조님과 같이 한 번 얘기해보면 좋을 것 같네요:D

음...저는 반대.
.env는 환경 변수가 들어가는 영역인데, DASHBOARD_URL은 비지니스 로직인 것 같아요.

그리고 페이지가 추가되거나 삭제됨에 따라 .env를 갱신해줘야 하는데 .env는 깃허브에 올라가지 않기 때문에 직접 동기화를 해야해서 번거로울 것 같습니다.

다만 하나의 상수 파일로 관리하는 것은 좋아요.

그렇네요. 환경 변수로 관리하기 보다 상수 파일로 관리하는 게 더 낫겠습니다

dmdmdkdkr

LGTM:D!

dev2820 · 2023-11-28T14:46:04Z

frontend/src/components/Timer/index.tsx

+    navigate(`${DASHBOARD_URL}/${rest.competitionId}`);
+  };
+
+  const { remainMiliSeconds } = useTimer({ socket, endsAt, onTimeoutHandler });


onTimeoutHandler를 받지 말고, useTimer가 isTimeout을 반환하면 isTimeout을 useEffect에서 감지하고 onTimeoutHandler를 수행하는게 어떨까요?

좋습니다. 그렇게 하니 범용성 있어졌네요

dev2820 · 2023-11-28T14:49:09Z

frontend/src/hooks/timer/useTimer.ts

개인적인 의견인데 useTimer에서 socket을 받고 사용하는게 어색하게 느껴져요. 아무래도 이름이 범용적이라 그런 것 같네요. socket을 사용하는 로직을 분리할 수 있을까요?

Timer이름도 Timer인데 socket을 받는게 이상해서 SocketTimer로 변경했습니다.

dev2820 · 2023-11-28T14:50:37Z

frontend/src/components/Timer/index.tsx

@@ -8,14 +10,26 @@ import type { Socket } from '@/utils/socket';
 interface Props {
  socket: Socket;
  endsAt: Date;
-  isConnected?: boolean;
+  isConnected: boolean;
+  [key: string]: unknown;


이 property는 어떤 용도인가요?

isConnected 인가요 아니면 [key:string]인가요
isConnected는 소켓 연결상태를 나타내고,
[key: string]: unknown;는 자유롭게 프로퍼티 받아서 onTimeoutHandler를 구현할 때 사용할 수 있게 했습니다.

였지만, 지금은 없습니다.

dev2820 · 2023-11-28T14:51:49Z

frontend/src/components/Timer/index.tsx

+  const onTimeoutHandler = () => {
+    navigate(`${DASHBOARD_URL}/${rest.competitionId}`);
+  };


구지 rest로 사용하는 이유가 있나요?

있었지만, 지금은 없습니다

dev2820 · 2023-11-28T14:52:09Z

frontend/src/pages/ContestPage.tsx

+          socket={socket.current}
+          isConnected={isConnected}
+          endsAt={new Date(endsAt)}
+          competitionId={competitionId}


Timer는 competitionId를 받는 것은 다소 엉뚱해보여요. competitionId를 사용하는 로직을 분리할 수 있을까요?

맞습니다. 그냥 종료시에 어디로 이동할지가 필요해서 대회번호를 넘겨줬는데 타이머를 사용할 페이지에서 끝났을 시에 수행할 함수를 넘겨주는 쪽으로 바꿨습니다.

mahwin · 2023-11-29T05:43:29Z

1 useTimer => useSocketTimer로 변경

Timer 사용하는 페이지에서 타이머_끝났을_때_실행할_함수를 구현하고 Timer에게 내려줌.

Timer 구현부
Timer (소켓, 끝나는 시간,연결상태, 끝났을 때 실행항 함수){
const {남은 시간, 끝난 여부} = useSocketTimer(끝나는 시간, 소켓, 추적할 이벤트)
끝난 여부를 체크해서 Timer의 props로 내려받은 타이머_끝났을_때_실행할_함수를 실행함.
}

만약 socket말고 http로 시간을 받아온다면
const {남은_시간, 끝난_여부} = useHTTPTimer(끝나는 시간) 해서 비슷하게 사용가능.

프로퍼티로 받는 socket이 있냐 없냐에 따라 갖고오는 커스텀 훅 변경이 필요.
ex) socket이 있으면 useSocketTimer or useHTTPTimer 등등...

일단은 Timer도 SocketTImer로 바꿨습니다. Timer인데 소켓을 받는 게 이상해서

dev2820 · 2023-11-29T05:55:25Z

frontend/src/components/SocketTimer/index.tsx

-  const { remainMiliSeconds } = useTimer({ socket, endsAt });
+  // min 1 => 60초 동안 돌아갑니다. 변경해서 쓰세요 일단은..
+  const min = 120;
+  endsAt = new Date(new Date().getTime() + min * 60 * 1000);


2시간을 본다고 가정하는거죠?

네 정확합니다. 직접 데이터 받아오니 끝나는 시간이 항상 지금보다 전이라 대시보드로 바로 이동해서 개발용으로 열어뒀습니다.

dev2820 · 2023-11-29T05:56:08Z

frontend/src/components/SocketTimer/index.tsx

+  });
+
+  useEffect(() => {
+    if (isTimeout && typeof onTimeout === 'function') onTimeout();


여담인데 isFunction 같은 유틸을 하나 만들어야겠네요. 제쪽에서 할게요

dmdmdkdkr

👯

mahwin added 2 commits November 28, 2023 22:08

feat: 대회 페이지에서 남은 시간이 0초면 대쉬보드로 이동

04c5cf0

fix: 분기처리 반대로 했던 것 수정

055063e

dmdmdkdkr reviewed Nov 28, 2023

View reviewed changes

dmdmdkdkr approved these changes Nov 28, 2023

View reviewed changes

dmdmdkdkr requested a review from dev2820 November 28, 2023 14:30

dev2820 reviewed Nov 28, 2023

View reviewed changes

mahwin self-assigned this Nov 29, 2023

mahwin added the FE fe 개발 label Nov 29, 2023

refactor: 커스텀 훅 네이밍 변경, 전달하는 프로퍼티 수정

4470787

refactor: Timer => SocketTimer로 변경

6294ffc

mahwin requested review from dev2820 and dmdmdkdkr November 29, 2023 05:52

dev2820 reviewed Nov 29, 2023

View reviewed changes

dev2820 approved these changes Nov 29, 2023

View reviewed changes

dmdmdkdkr approved these changes Nov 29, 2023

View reviewed changes

mahwin merged commit 51ba82e into fe-dev Nov 29, 2023
4 checks passed

mahwin deleted the 131-대회-종료시-대시보드로-이동-기능 branch November 29, 2023 06:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[#131] 대회 종료시 대시보드로 이동 기능 #150

[#131] 대회 종료시 대시보드로 이동 기능 #150

mahwin commented Nov 28, 2023

netlify bot commented Nov 28, 2023 •

edited

Loading

dmdmdkdkr Nov 28, 2023

mahwin Nov 28, 2023

dmdmdkdkr Nov 28, 2023

mahwin Nov 28, 2023

dmdmdkdkr Nov 28, 2023

dev2820 Nov 28, 2023

dev2820 Nov 28, 2023

mahwin Nov 29, 2023

dmdmdkdkr left a comment

dev2820 Nov 28, 2023

mahwin Nov 29, 2023

dev2820 Nov 28, 2023

mahwin Nov 29, 2023

dev2820 Nov 28, 2023

mahwin Nov 29, 2023

mahwin Nov 29, 2023

dev2820 Nov 28, 2023

mahwin Nov 29, 2023

dev2820 Nov 28, 2023

mahwin Nov 29, 2023

mahwin commented Nov 29, 2023 •

edited

Loading

dev2820 Nov 29, 2023

mahwin Nov 29, 2023

dev2820 Nov 29, 2023

dmdmdkdkr left a comment

[#131] 대회 종료시 대시보드로 이동 기능 #150

[#131] 대회 종료시 대시보드로 이동 기능 #150

Conversation

mahwin commented Nov 28, 2023

한일

작동 화면

netlify bot commented Nov 28, 2023 • edited Loading

✅ Deploy Preview for algo-with-me ready!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dmdmdkdkr left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mahwin commented Nov 29, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dmdmdkdkr left a comment

Choose a reason for hiding this comment

netlify bot commented Nov 28, 2023 •

edited

Loading

mahwin commented Nov 29, 2023 •

edited

Loading