[#138] 대회 세부정보 페이지 생성 #149

dmdmdkdkr · 2023-11-28T12:33:08Z

한 일

대회 시작 전 페이지
- 대회 참여 버튼을 통해 참여가 가능합니다.
- 대회 입장 버튼을 클릭하면 alert창을 띄워주며 페이지를 새로고침합니다.
  - 대회 시작 시간 전에 들어와 대회 시작 시간 이후에 대회에 입장하려는 클라이언트를 위해 이렇게 작성했습니다.
  - 위 상황에 대하여, 페이지가 새로고침되면 대회 진행 중 페이지가 출력됩니다.
대회 진행 중 페이지
- 대회 입장 버튼을 클릭하면 대회 페이지로 이동합니다.
대회 종료 후 페이지
- 해당 대회의 문제 목록을 볼 수 있고, 문제 이름을 클릭하면 문제 상세 보기 페이지로 이동합니다.

스크린샷

대회 시작 전 페이지

-대회 진행 중 페이지

대회 종료 후 페이지

- 대회 세부정보 페이지 컴포넌트인 CompetitionDetailPage컴포넌트 작성 - 이에 대한 라우팅 router.tsx에 작성 - 대회 종료 후 페이지 작성중(문제 이름을 클릭하면 문제 세부 정보 페이지로 이동)

- 대회 종료 전 하나의 컴포넌트로 구현했던 것을 대회 시작 전후로 나누었습니다. - 대회 시작 전에 페이지에 접속해 대회 시작 시간이 지난 경우, 대회 입장 버튼을 누르면 페이지 리렌더링이 되게 코드 수정

…o-with-me into 138-대회-세부정보-페이지-생성

netlify · 2023-11-28T12:33:12Z

✅ Deploy Preview for algo-with-me ready!

Name	Link
🔨 Latest commit	`80981df`
🔍 Latest deploy log	https://app.netlify.com/sites/algo-with-me/deploys/6566d6c1405dd70008d47eb7
😎 Deploy Preview	https://deploy-preview-149--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.

mahwin · 2023-11-28T13:19:00Z

frontend/src/components/CompetitionDetail/AfterCompetitionEnd.tsx

AfterCompetitionEnd
BeforeCompetitionStart

AfterCompetition
BeforeCompetition

이렇게가 네이밍 짝이 맞는 것 같아요 저는 후자가 좋은 것 같습니다.

앗, 신경쓰지 못했네요 감사합니다!

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

frontend/src/components/CompetitionDetail/Buttons/EnterCompetitionButton.tsx

+    if (!isLoggedin) {
+      alert('로그인이 필요합니다.');
+      navigate('/login');
+    } else if (currentTime < startsAt) {
+      alert('아직 대회가 시작되지 않았습니다. 다시 시도해주세요');
+      window.location.reload();
+    } else {
+      navigate(competitionLink);
+    }


�끝난 대회는 입장 못 한다는 로직이 빠져있네요 !
대회가 시작하기 전에 들어와서 입장 버튼이 생긴 유저가 한참 뒤에 와서 누르면 입장될 것 같습니다.
물론 대회 페이지에서 Timer로 남은 시간이 0 이거나 음수면 해당 대회 대시 보드로 이동하는 로직이 있어 바로 대시보드로 갈 것 같긴 합니다.

아아 그렇네요, 감사합니다!
대회 페이지에서 대시 보드로 이동하는 로직이 있어도, 말씀하신 끝난 대회는 입장 못하는 로직이 없으면 대회 화면으로 갔다가 대시 보드로 가게 되어서 추가하겠습니다!

mahwin · 2023-11-28T13:37:34Z

frontend/src/pages/CompetitionDetailPage.tsx

+  const competitionSchedule = `시작: ${formattedStartsAt} 종료: ${formattedEndsAt}`;
+


취향이긴 한데,
이렇게 구현하면
오전 - 오후나
오후 - 오전이 나올 수 있을텐데,
2023.11.29 오후 11.30 ~ 2023.11.30 오전 3시.30분 보다
2023.11.29 23:30:00 ~ 2023.11.30 03:30:00 이게 알아보기 좋지 않을까요?

확실히 그렇네요, 감사합니다!

우찬님 변경하시고 어떻게 나오는지 스샷 하나만 첨부해주세요!

이제 netlify를 사용하기 때문에 이 링크로 확인할 수 있습니다

dev2820 · 2023-11-28T14:18:06Z

frontend/src/components/CompetitionDetail/CompetitionDetailContent.tsx

+  if (currentDate < startsAt) {
+    return (
+      <BeforeCompetition
+        {...{ competitionId, competition, startsAt, endsAt, competitionSchedule }}


생각 못해본 방법인데 좋네요

저도 이번에 하다가 써봤는데 되더라고요:D

dev2820 · 2023-11-28T14:33:17Z

frontend/src/utils/date/index.ts

+export const formatKoreanDateTime = (date: Date) => {
+  return date.toLocaleString('ko-KR', {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    hour12: false,
+  });
+};


약간은 개인적인 욕심인데, formatDate를 확장해서 'yyyy. mm. dd. hh:mm' 를 받으면 이 형식으로 반환하도록 할 수 있을까요?

넵, 알겠습니다!:D

dev2820 · 2023-11-29T05:47:45Z

frontend/src/utils/date/index.ts

+export const formatKoreanDateTime = (dateString: string | number | Date) => {
+  const date = new Date(dateString);
+  if (isNaN(date.getTime())) {
+    // Invalid date, handle error or return default value
+    return 'Invalid Date';
+  }
+
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+
+  return `${year}. ${month}. ${day}. ${hours}:${minutes}`;
+};


아 formatDate 함수를 확장해달라는 얘기였어요.

export const formatDate = (date: Date, form: string) => { if (form === 'YYYY-MM-DDThh:mm') { return date.toISOString().slice(0, 'YYYY-MM-DDThh:mm'.length); } if(form === 'YYYY. MM. DD. hh:mm') { ... } // 여기 return ''; };

이런식으로요

아, 제가 착각했네요:ㅇ
formatDate 함수는 유석님이 작성하신 함수긴 한데, 말씀하신 대로 확장해볼게요!

…o-with-me into 138-대회-세부정보-페이지-생성

dmdmdkdkr · 2023-11-29T06:18:52Z

formatKoreaTime이 아니라 formatDate를 확장하고 formatDate를 써달라는 요청이어서 이를 반영하는 commit이 [refactor: formatDate함수 확장] 입니다!

mahwin

LGTM

dmdmdkdkr added 8 commits November 28, 2023 14:59

refactor: 작성된 모듈을 사용하도록 수정, list대신 table을 사용하도록 수정

d53e611

feat: 대회 입장 버튼 컴포넌트 작성

09e7a43

feat: 시간에 따른 대회 세부정보 페이지 컴포넌트로 분리 및 구분 로직 페이지컴포넌트에 작성

f482971

refactor: 대회 세부정보 페이지에서 시간에 따른 페이지 분류 코드 컴포넌트화, 중복되는 코드 컴포넌트화

826df7b

Merge branch 'fe-dev' of https://github.com/boostcampwm2023/web12-alg…

fd3cbfc

…o-with-me into 138-대회-세부정보-페이지-생성

dmdmdkdkr added the FE fe 개발 label Nov 28, 2023

dmdmdkdkr requested review from dev2820 and mahwin November 28, 2023 12:33

dmdmdkdkr self-assigned this Nov 28, 2023

refactor: 사용되지 않는 css 코드 삭제

16e8c11

mahwin reviewed Nov 28, 2023

View reviewed changes

dmdmdkdkr added 4 commits November 28, 2023 22:54

refactor: 컴포넌트명 통일화

1e0f8b7

update: 끝난 대회는 입장 못 하게 하는 로직 추가작성

f8439ef

feat: 한국 시간 기준 24시 표기법으로 날짜를 반환하는 함수 작성

15235b8

refactor: 대회 시작 및 종료 시간을 12시 표기법에서 24시 표기법으로 변경

3c7f46f

dmdmdkdkr requested a review from mahwin November 28, 2023 13:59

dev2820 reviewed Nov 28, 2023

View reviewed changes

feat: formatKoreanDateTime이 'yyyy.mm.dd. hh:mm'을 받아도 반환할 수 있도록 코드 추가

7dc0fb3

dmdmdkdkr requested a review from dev2820 November 29, 2023 05:44

dev2820 reviewed Nov 29, 2023

View reviewed changes

refactor: formatDate함수 확장

a9243a3

dmdmdkdkr requested a review from dev2820 November 29, 2023 06:03

refactor: formatDate함수 확장

82231ee

Merge branch 'fe-dev' of https://github.com/boostcampwm2023/web12-alg…

80981df

…o-with-me into 138-대회-세부정보-페이지-생성

dev2820 approved these changes Nov 29, 2023

View reviewed changes

mahwin approved these changes Nov 29, 2023

View reviewed changes

dmdmdkdkr merged commit 71602ed into fe-dev Nov 29, 2023
4 checks passed

dmdmdkdkr deleted the 138-대회-세부정보-페이지-생성 branch November 29, 2023 06:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[#138] 대회 세부정보 페이지 생성 #149

[#138] 대회 세부정보 페이지 생성 #149

dmdmdkdkr commented Nov 28, 2023

netlify bot commented Nov 28, 2023 •

edited

Loading

mahwin Nov 28, 2023

dmdmdkdkr Nov 28, 2023

mahwin Nov 28, 2023

dmdmdkdkr Nov 28, 2023

mahwin Nov 28, 2023

dmdmdkdkr Nov 28, 2023

mahwin Nov 29, 2023

dev2820 Nov 29, 2023

dev2820 Nov 28, 2023

dmdmdkdkr Nov 28, 2023

dev2820 Nov 28, 2023

dmdmdkdkr Nov 29, 2023

dev2820 Nov 29, 2023

dmdmdkdkr Nov 29, 2023

dmdmdkdkr commented Nov 29, 2023

mahwin left a comment

		const competitionSchedule = `시작: ${formattedStartsAt} 종료: ${formattedEndsAt}`;

[#138] 대회 세부정보 페이지 생성 #149

[#138] 대회 세부정보 페이지 생성 #149

Conversation

dmdmdkdkr 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

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 commented Nov 29, 2023

mahwin left a comment

Choose a reason for hiding this comment

netlify bot commented Nov 28, 2023 •

edited

Loading