[#67] 대회 생성 페이지 구현 #100

dev2820 · 2023-11-23T02:06:04Z

한 일

대회 생성 페이지로의 라우터를 추가한다.
문제를 선택할 수 있는 문제 리스트를 구현한다.
문제 선택 여부는 토글할 수 있다.
문제 이름, 시작 시간, 종료 시간을 입력할 수 있는 form이 있다.
- 입력을 검증한다. (필요한데 없거나 잘못된 입력을 검사하고 대회 생성을 막는다.)
대회 생성에 성공하면 리스트 페이지로 라우팅한다.

검증 로직

대회 이름은 1글자 이상
대회 최대 참여 인원은 1명 이상
시작 시간은 현재 시간보다 5분 늦게 설정 가능
종료 시간은 시작 시간보다 늦어야함
문제 수는 1개 이상이어야함

스크린 샷

/contest/create 페이지에서 확인할 수 있습니다.

form 검증 로직,
마지막에 contest/detail/id 화면으로 이동하도록 해두었는데, 아직 해당 페이지가 없어서 그렇게 나옴

- 문제를 선택할 수 있도록 기능을 추가함 - 대회 생성시 detail 페이지로 이동하도록 기능 추가

- 지정된 서버만 참조하는 api 인스턴스를 util로 분리함 - Response 타입과 데이터 타입을 분리해 정리

- CompetitionCreatePage -> CreateCompetitionPage (영문법에 맞춰 수정함)

- 시작 시작이 옳게 설정되면 에러가 나도록 하고 있었음 - 종료 시간도 마찬가지

dev2820 · 2023-11-23T02:07:19Z

frontend/src/components/Common/Input.tsx

+}
+
+export function Input({ id, label, children, ...props }: Props) {
+  const child = Children.only(children);


입력된 Children이 1개 뿐임을 검증하는 로직입니다

dev2820 · 2023-11-23T02:07:59Z

frontend/src/components/Common/Input.tsx

+
+Input.TextField = forwardRef(
+  ({ className, ...props }: TextFieldProps, ref: ForwardedRef<HTMLInputElement>) => {
+    return <input className={cx(inputStyle, className)} type="text" ref={ref} {...props}></input>;


cx는 두 클래스 이름을 합성한다고 보시면 됩니다.

cx('a','b') // 'a b'

dev2820 · 2023-11-23T02:08:42Z

frontend/src/hooks/competition/useCompetitionForm.ts

+  const [startsAt, setStartsAt] = useState<string>(initialForm.startsAt ?? currentDateStr);
+  const [endsAt, setEndsAt] = useState<string>(initialForm.endsAt ?? currentDateStr);


기본적으로 현재 시간으로 form이 셋업되도록 합니다.

dev2820 · 2023-11-23T02:18:48Z

frontend/src/components/Problem/SelectableProblemList.tsx

+    const $target = e.target as HTMLElement;
+    if ($target.tagName !== 'BUTTON') return;
+
+    const $li = $target.closest('li');
+    if (!$li) return;
+
+    const problemId = Number($li.dataset['problemId']);


여긴 이벤트 델리게이션 로직입니다.
이벤트 델리게이션이란?

리액트도 자체 델리게이션 로직이 있는걸로 아는데 잘 몰라서 일단 구현 했어요

dmdmdkdkr · 2023-11-23T03:11:58Z

frontend/src/components/Problem/SelectableProblemList.tsx

+          </span>
+          {getSelectButton({ isPicked: pickedProblemIds.includes(id) })}
+        </li>


이렇게 분리한 거 정말 보기 좋네요, 배워갑니다!

아이고 여기 좀 변경했는데 깜빡하고 안올렸네요

dmdmdkdkr · 2023-11-23T03:13:02Z

frontend/src/hooks/competition/useCompetitionForm.ts

+  message?: string;
+};
+
+const FIVE_MIN_BY_MS = 5 * 60 * 1000;


여기서 300000 대신 5 * 60 * 1000 을 쓰신 이유가 있나요?

어떤 값인지 구분하기 편하게 하려고요. 1000 = 1초

1000 = 1초
1000 * 60 = 1분
1000 * 60 * 5 = 5분

이렇게 가독성을 높이는 겁니다 그리고 이렇게 해두면 나중에 분을 변경할 때도 편해서요

dmdmdkdkr · 2023-11-23T03:14:17Z

frontend/src/hooks/competition/useCompetitionForm.ts

+const VALIDATION_MESSAGE = {
+  needLongName: '이름은 1글자 이상이어야합니다',
+  needMoreParticipants: '최대 참여 인원은 1명 이상이어야 합니다',
+  tooEarlyStartTime: '대회 시작 시간은 현재보다 5분 늦은 시간부터 가능합니다',
+  tooEarlyEndTime: '대회 종료 시간은 대회 시작시간보다 늦게 끝나야합니다',
+  needMoreProblems: '대회 문제는 1개 이상이어야합니다',
+};


이렇게 묶는 것도 정말 좋은 것 같네요, 덕분에 배워갑니다!

dmdmdkdkr · 2023-11-23T03:18:56Z

frontend/src/apis/problems/index.ts

아직 api배포가 되진 않았지만, 대회 전체 조회api응답을 받도록 작성할 예정인데, 그것도 이런 식으로 분리할 수 있겠다는 생각이 드네요!
기조님은 대회 전체 조회 도 이런 식으로 분리하는 게 좋다고 생각하시나요?

네 그렇게 생각합니다. 외부 데이터를 받아오는 영역은 분리해서 관리해주는게 좋아요. Model로직과 ViewModel 로직이 섞이지 않게 분리하는거죠

…web12-algo-with-me into 67-대회-생성-페이지-구현

dmdmdkdkr

Lgtm🧸

mahwin · 2023-11-23T03:32:50Z

frontend/src/utils/api/index.ts

+const api = axios.create({
+  baseURL: import.meta.env.VITE_API_URL,
+});


이렇게도 할 수 있네요 👍🏻

mahwin · 2023-11-23T03:33:17Z

frontend/src/utils/date/index.ts

+const ONE_SEC_BY_MS = 1_000;
+const ONE_MIN_BY_MS = 60 * ONE_SEC_BY_MS;


변수 네이밍 좋네요.

mahwin · 2023-11-23T03:36:25Z

frontend/src/utils/type/index.ts

+export const isNil = (type: unknown): type is Nil => {
+  if (Object.is(type, null)) return true;
+  if (Object.is(type, undefined)) return true;


type이 unknown은 알겠는데, return이 boolean이 아니라 type is Nil로 타이핑하신 이유가 있나요? ts playground에선 오류가 없어 보이는데 궁금합니다.

타입가드를 작성한거에요

저렇게 하면 type으로 들어온 값이 Nil이 거나 Nil이 아님을 보장할 수 있습니다.

const value:number|undefined = ...; // undefined이거나 number임 if(isNil(value)) { // 여기서 value는 Nil이 된다. } else { // 여기서 value는 number가 된다. }

mahwin · 2023-11-23T03:38:42Z

frontend/src/apis/competitions/index.ts

+
+import type { CompetitionForm, CompetitionInfo, CreateCompetitionResponse } from './types';
+
+export * from './types';


추가적인 타입이 없어도 이렇게 export 하시나요?
다른 곳에서 타입이 필요하다면, api/competitions/types에서 직접 가져오는 게 더 명확해 보이는데, 궁금합니다

추가적인 타입이 없다는 말이 무슨말인지 이해 못했어요.

아 아닙니다!! 제가 착각했습니다.

mahwin · 2023-11-23T03:41:52Z

frontend/src/apis/competitions/types.ts

+export type CompetitionInfo = {
+  id: CompetitionId;
+  name: string;
+  detail: string;
+  maxParticipants: number;
+  startsAt: string;
+  endsAt: string;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type CreateCompetitionResponse = CompetitionInfo;


타입 구조가 완전 같아도 네이밍을 정확히 해주는게 정말 좋아보입니다.

mahwin · 2023-11-23T03:42:48Z

frontend/src/apis/problems/types.ts

+  title: string;
+};
+
+export type FetchProblemListResponse = ProblemInfo[];


서버 응답 데이터 타입에는 항상 Response를 붙이시네요👍🏻

네 좀 구분하는 편이에요. Response로 들어오는 데이터는 지금은 그냥 데이터이지만 규칙을 정하기에 따라 message나 statusCode를 같이 반환하는 경우도 생기는데 그 때 개념을 분리하기 위함입니다.

mahwin · 2023-11-23T03:45:25Z

frontend/src/components/Common/Input.tsx

+interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  error?: boolean;
+}


이해포기 🥲

ㅋㅋㅋㅋㅋㅋ

Omit = 특정 타입을 제외
InputHTMLAttributes = Input 태그가 가질 수 있는 컴포넌트 attributes 타입입니다.
즉 type을 제외한 모든 Input에 넣을 수 있는 속성을 가리키는 인터페이스에요.

error는 잘못 넣은겁니다. 없다고 봐주세요.

이 부분은 음...시간 되면 잠깐 설명드릴게요

mahwin · 2023-11-23T03:48:28Z

frontend/src/components/Common/Input.tsx

주말에 천천히 읽어보겠습니다. 좋은 코드 너무 감사합니다. 아직은 이해하기 어렵네요.

mahwin · 2023-11-23T03:52:39Z

frontend/src/hooks/competition/useCompetitionForm.ts

+
+  function togglePickedProblem(problemId: ProblemId) {
+    if (problems.includes(problemId)) {
+      setProblems((ids) => ids.filter((id) => id !== problemId).sort());


좋은 코드 감사합니다.

mahwin

좋은 코드 감사합니다. LGTM 😎

dev2820 added 21 commits November 22, 2023 19:26

feat: 대회 생성 페이지 생성

b68ab55

feat: 문제 선택 기능 & 대회 생성시 이동 기능

d8a3cb6

- 문제를 선택할 수 있도록 기능을 추가함 - 대회 생성시 detail 페이지로 이동하도록 기능 추가

refactor: 문제 리스트 패치로직을 분리

93d3a8c

refactor: Competition 생성 로직 분리

2d8fc47

refactor: api 인스턴스 분리 & 타입 정리

f36bd9d

- 지정된 서버만 참조하는 api 인스턴스를 util로 분리함 - Response 타입과 데이터 타입을 분리해 정리

fix: 문제 선택 버튼이 아닌 영역을 클릭해도 문제가 선택되는 버그 수정

d829a0e

refactor: Input 관련 Common 분리

ffacc86

update: 선택된 문제에서 list 제거 & 정렬되도록함

f7b4e47

refactor: 불필요한 아이디 제거

dd56f76

refactor: 페이지 이름 변경

2560541

- CompetitionCreatePage -> CreateCompetitionPage (영문법에 맞춰 수정함)

refactor: 대회 문제 선택 리스트 분리

db0bb63

refactor: useProblemList 훅 분리

3b319a1

refactor: CompetitionForm을 훅으로 분리

abf11be

refactor: pickedProblem을 CompetitionForm으로 로직을 이동

14793f1

chore: gitignore 마지막에 eol 추가

18eb4af

update: 대회 입력 검증 로직 추가

8a14d99

update: competition/create -> contest/create 라우팅 경로 변경

c06bf5d

refactor: 불필요한 할당 코드 제거

9f3961b

update: 대회 생성하기 제목 추가

e1c0a16

fix: 잘못된 대회 생성 검증 로직 수정

0880c55

- 시작 시작이 옳게 설정되면 에러가 나도록 하고 있었음 - 종료 시간도 마찬가지

update: 대회 생성에 대한 안내 문구 추가

804d8e9

dev2820 self-assigned this Nov 23, 2023

dev2820 commented Nov 23, 2023

View reviewed changes

dev2820 added 2 commits November 23, 2023 11:11

refactor: DetailPage로 가는 경로 상수화

01df1d2

refactor: selectableProblemList 컴포넌트로 분리:

da285b0

dev2820 commented Nov 23, 2023

View reviewed changes

refactor: 불필요한 함수 제거

8e0e628

dev2820 marked this pull request as ready for review November 23, 2023 02:22

dev2820 requested review from dmdmdkdkr and mahwin November 23, 2023 02:22

Merge branch 'fe-dev' into 67-대회-생성-페이지-구현

0169fb6

dmdmdkdkr reviewed Nov 23, 2023

View reviewed changes

Merge branch '67-대회-생성-페이지-구현' of https://github.com/boostcampwm2023/…

d653950

…web12-algo-with-me into 67-대회-생성-페이지-구현

dev2820 requested a review from dmdmdkdkr November 23, 2023 03:27

dmdmdkdkr approved these changes Nov 23, 2023

View reviewed changes

mahwin reviewed Nov 23, 2023

View reviewed changes

mahwin approved these changes Nov 23, 2023

View reviewed changes

dev2820 merged commit 7ed363f into fe-dev Nov 23, 2023

dev2820 deleted the 67-대회-생성-페이지-구현 branch November 23, 2023 05:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[#67] 대회 생성 페이지 구현 #100

[#67] 대회 생성 페이지 구현 #100

dev2820 commented Nov 23, 2023

dev2820 Nov 23, 2023

dev2820 Nov 23, 2023

dev2820 Nov 23, 2023

dev2820 Nov 23, 2023

dmdmdkdkr Nov 23, 2023

dev2820 Nov 23, 2023

dmdmdkdkr Nov 23, 2023

dev2820 Nov 23, 2023

dmdmdkdkr Nov 23, 2023

dmdmdkdkr Nov 23, 2023

dev2820 Nov 23, 2023

dmdmdkdkr left a comment

mahwin Nov 23, 2023

mahwin Nov 23, 2023

mahwin Nov 23, 2023

dev2820 Nov 23, 2023

dev2820 Nov 23, 2023

mahwin Nov 23, 2023

dev2820 Nov 23, 2023

mahwin Nov 23, 2023

mahwin Nov 23, 2023

mahwin Nov 23, 2023

dev2820 Nov 23, 2023

mahwin Nov 23, 2023

dev2820 Nov 23, 2023

mahwin Nov 23, 2023

mahwin Nov 23, 2023

mahwin left a comment

		const [startsAt, setStartsAt] = useState<string>(initialForm.startsAt ?? currentDateStr);
		const [endsAt, setEndsAt] = useState<string>(initialForm.endsAt ?? currentDateStr);

		const ONE_SEC_BY_MS = 1_000;
		const ONE_MIN_BY_MS = 60 * ONE_SEC_BY_MS;


		import type { CompetitionForm, CompetitionInfo, CreateCompetitionResponse } from './types';

		export * from './types';

[#67] 대회 생성 페이지 구현 #100

[#67] 대회 생성 페이지 구현 #100

Conversation

dev2820 commented Nov 23, 2023

한 일

검증 로직

스크린 샷

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 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

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 left a comment

Choose a reason for hiding this comment