From b68ab55edc9acda0233a8c5cb099adefd13d3c94 Mon Sep 17 00:00:00 2001
From: dev2820 <second28200@naver.com>
Date: Wed, 22 Nov 2023 19:26:48 +0900
Subject: [PATCH 01/24] =?UTF-8?q?feat:=20=EB=8C=80=ED=9A=8C=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/CompetitionCreatePage.tsx  | 167 ++++++++++++++++++
 frontend/src/router.tsx                       |   5 +
 .../utils/date/__tests__/formatDate.spec.ts   |  18 ++
 .../utils/date/__tests__/toLocalDate.spec.ts  |  19 ++
 frontend/src/utils/date/index.ts              |  17 ++
 5 files changed, 226 insertions(+)
 create mode 100644 frontend/src/pages/CompetitionCreatePage.tsx
 create mode 100644 frontend/src/utils/date/__tests__/formatDate.spec.ts
 create mode 100644 frontend/src/utils/date/__tests__/toLocalDate.spec.ts
 create mode 100644 frontend/src/utils/date/index.ts

diff --git a/frontend/src/pages/CompetitionCreatePage.tsx b/frontend/src/pages/CompetitionCreatePage.tsx
new file mode 100644
index 0000000..17b7356
--- /dev/null
+++ b/frontend/src/pages/CompetitionCreatePage.tsx
@@ -0,0 +1,167 @@
+import { css } from '@style/css';
+
+import type { ChangeEvent, HTMLAttributes } from 'react';
+import { useState } from 'react';
+
+import { formatDate, toLocalDate } from '@/utils/date';
+
+import axios from 'axios';
+
+export default function CompetitionCreatePage() {
+  const [name, setName] = useState<string>('');
+  const [detail, setDetail] = useState<string>('');
+  const [maxParticipants, setMaxParticipants] = useState<number>(0);
+
+  const currentDate = toLocalDate(new Date());
+  const currentDateStr = formatDate(currentDate, 'YYYY-MM-DDThh:mm');
+
+  const [startsAt, setStartsAt] = useState<string>(currentDateStr);
+  const [endsAt, setEndsAt] = useState<string>(currentDateStr);
+
+  function handleChangeName(e: ChangeEvent<HTMLInputElement>) {
+    const newName = e.target.value;
+    setName(newName);
+  }
+
+  function handleChangeDetail(e: ChangeEvent<HTMLTextAreaElement>) {
+    const newDetail = e.target.value;
+    setDetail(newDetail);
+  }
+
+  function handleChangeMaxParticipants(e: ChangeEvent<HTMLInputElement>) {
+    const newMaxParticipants = Number(e.target.value);
+    setMaxParticipants(newMaxParticipants);
+  }
+
+  function handleChangeStartsAt(e: ChangeEvent<HTMLInputElement>) {
+    const newStartsAt = e.target.value;
+    setStartsAt(newStartsAt);
+  }
+
+  function handleChangeEndsAt(e: ChangeEvent<HTMLInputElement>) {
+    const newEndsAt = e.target.value;
+    setEndsAt(newEndsAt);
+  }
+
+  const handleSubmitCompetition = async () => {
+    // TODO: problems추가하기
+    const data = {
+      name,
+      detail,
+      maxParticipants,
+      startsAt: new Date(startsAt).toISOString(),
+      endsAt: new Date(endsAt).toISOString(),
+    };
+    await axios.post('http://101.101.208.240:3000/competitions', data);
+  };
+
+  return (
+    <main>
+      <h1>대회 생성</h1>
+      <fieldset className={fieldSetStyle}>
+        <Label>
+          <Label.Text>대회 이름</Label.Text>
+          <input
+            name="name"
+            className={inputStyle}
+            value={name}
+            onChange={handleChangeName}
+            placeholder="대회 이름을 입력해주세요"
+            required
+          ></input>
+        </Label>
+        <Label>
+          <Label.Text>대회 설명</Label.Text>
+          <textarea
+            name="detail"
+            className={inputStyle}
+            value={detail}
+            onChange={handleChangeDetail}
+            placeholder="대회 설명을 입력해주세요"
+            required
+          ></textarea>
+        </Label>
+        <Label>
+          <Label.Text>최대 참여 인원</Label.Text>
+          <input
+            name="max-participants"
+            type="number"
+            min="0"
+            className={inputStyle}
+            value={maxParticipants}
+            onChange={handleChangeMaxParticipants}
+            required
+          ></input>
+        </Label>
+        <Label>
+          <Label.Text>대회 시작 시간</Label.Text>
+          <input
+            type="datetime-local"
+            name="starts-at"
+            className={inputStyle}
+            value={startsAt}
+            onChange={handleChangeStartsAt}
+            required
+          ></input>
+        </Label>
+        <Label>
+          <Label.Text>대회 종료 시간</Label.Text>
+          <input
+            name="ends-at"
+            type="datetime-local"
+            className={inputStyle}
+            value={endsAt}
+            onChange={handleChangeEndsAt}
+            required
+          ></input>
+        </Label>
+      </fieldset>
+      <button id="create-competition" onClick={handleSubmitCompetition}>
+        대회 생성
+      </button>
+    </main>
+  );
+}
+
+interface LabelProps extends HTMLAttributes<HTMLLabelElement> {}
+
+const Label = ({ className, children, ...rest }: LabelProps) => {
+  return (
+    <label {...rest} className={`${className} ${labelStyle}`}>
+      {children}
+    </label>
+  );
+};
+
+interface LabelTextProps extends HTMLAttributes<HTMLSpanElement> {}
+
+Label.Text = ({ className, children, ...rest }: LabelTextProps) => {
+  return (
+    <span {...rest} className={`${className} ${labelTextStyle}`}>
+      {children}
+    </span>
+  );
+};
+
+const fieldSetStyle = css({
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+const inputStyle = css({
+  border: '1px solid black',
+  width: '20rem',
+});
+
+const labelStyle = css({
+  display: 'flex',
+  flexDirection: 'row',
+  textAlign: 'center',
+  gap: '4',
+});
+
+const labelTextStyle = css({
+  margin: 'auto 0',
+  width: '8rem',
+  textAlign: 'left',
+});
diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
index ebd142c..5ce1d6e 100644
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -1,5 +1,6 @@
 import { createBrowserRouter } from 'react-router-dom';
 
+import CompetitionCreatePage from '@/pages/CompetitionCreatePage';
 import ContestPage from '@/pages/ContestPage';
 import ProblemPage from '@/pages/ProblemPage';
 
@@ -18,6 +19,10 @@ const router = createBrowserRouter([
         path: '/problem/:id', // TODO: api 연동 후 수정
         element: <ProblemPage />,
       },
+      {
+        path: '/competition/create',
+        element: <CompetitionCreatePage />,
+      },
     ],
   },
 ]);
diff --git a/frontend/src/utils/date/__tests__/formatDate.spec.ts b/frontend/src/utils/date/__tests__/formatDate.spec.ts
new file mode 100644
index 0000000..ee5c781
--- /dev/null
+++ b/frontend/src/utils/date/__tests__/formatDate.spec.ts
@@ -0,0 +1,18 @@
+import { formatDate } from '../index';
+import { describe, expect, it } from 'vitest';
+
+describe('formatDate', () => {
+  it('YYYY-MM-DDThh:mm 형식의 문자열을 반환한다.', () => {
+    const now = new Date(2000, 1, 1, 13, 1, 1);
+    const dateStr = formatDate(now, 'YYYY-MM-DDThh:mm');
+
+    expect(dateStr).toBe('2000-02-01T04:01');
+  });
+
+  it('일치하는 형식이 없으면 빈 문자열을 반환한다.', () => {
+    const now = new Date(2000, 1, 1, 13, 1, 1);
+    const dateStr = formatDate(now, '??');
+
+    expect(dateStr).toBe('');
+  });
+});
diff --git a/frontend/src/utils/date/__tests__/toLocalDate.spec.ts b/frontend/src/utils/date/__tests__/toLocalDate.spec.ts
new file mode 100644
index 0000000..d5b8f10
--- /dev/null
+++ b/frontend/src/utils/date/__tests__/toLocalDate.spec.ts
@@ -0,0 +1,19 @@
+import { toLocalDate } from '../index';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+describe('toLocalDate', () => {
+  beforeEach(() => {
+    const spyFn = vi.spyOn(Date.prototype, 'getTimezoneOffset');
+    spyFn.mockReturnValue(-9 * 60); // kr 시간 차이만큼 timezoneOffset 설정
+  });
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('입력받은 Date를 현재 지역 기준 Date로 변환한다.', () => {
+    const date = new Date(2000, 1, 1, 13, 1, 1); // 2000년 2월 1일 13시 1분 1초
+    const localDate = toLocalDate(date);
+    // ISOString이 9시간 차이나는 것이 아니라 설정한 시간으로 나오게 됨
+    expect(localDate.toISOString()).toBe('2000-02-01T13:01:01.000Z');
+  });
+});
diff --git a/frontend/src/utils/date/index.ts b/frontend/src/utils/date/index.ts
new file mode 100644
index 0000000..367eb7a
--- /dev/null
+++ b/frontend/src/utils/date/index.ts
@@ -0,0 +1,17 @@
+const ONE_SEC_BY_MS = 1_000;
+const ONE_MIN_BY_MS = 60 * ONE_SEC_BY_MS;
+
+export function toLocalDate(date: Date) {
+  const localTimeOffset = date.getTimezoneOffset() * ONE_MIN_BY_MS;
+  const localDate = new Date(date.getTime() - localTimeOffset);
+
+  return localDate;
+}
+
+export const formatDate = (date: Date, form: string) => {
+  if (form === 'YYYY-MM-DDThh:mm') {
+    return date.toISOString().slice(0, 'YYYY-MM-DDThh:mm'.length);
+  }
+
+  return '';
+};

From d8a3cb6714e785c2cd95d56463b92d7fd9746f70 Mon Sep 17 00:00:00 2001
From: dev2820 <second28200@naver.com>
Date: Wed, 22 Nov 2023 21:02:08 +0900
Subject: [PATCH 02/24] =?UTF-8?q?feat:=20=EB=AC=B8=EC=A0=9C=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=20=EA=B8=B0=EB=8A=A5=20&=20=EB=8C=80=ED=9A=8C=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1=EC=8B=9C=20=EC=9D=B4=EB=8F=99=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 문제를 선택할 수 있도록 기능을 추가함
- 대회 생성시 detail 페이지로 이동하도록 기능 추가
---
 frontend/src/pages/CompetitionCreatePage.tsx | 67 ++++++++++++++++++--
 1 file changed, 60 insertions(+), 7 deletions(-)

diff --git a/frontend/src/pages/CompetitionCreatePage.tsx b/frontend/src/pages/CompetitionCreatePage.tsx
index 17b7356..0eac81d 100644
--- a/frontend/src/pages/CompetitionCreatePage.tsx
+++ b/frontend/src/pages/CompetitionCreatePage.tsx
@@ -1,13 +1,21 @@
 import { css } from '@style/css';
 
-import type { ChangeEvent, HTMLAttributes } from 'react';
-import { useState } from 'react';
+import type { ChangeEvent, HTMLAttributes, MouseEvent } from 'react';
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import { formatDate, toLocalDate } from '@/utils/date';
 
 import axios from 'axios';
 
+type ProblemId = number;
+type ProblemInfo = {
+  id: ProblemId;
+  title: string;
+};
+
 export default function CompetitionCreatePage() {
+  const navigate = useNavigate();
   const [name, setName] = useState<string>('');
   const [detail, setDetail] = useState<string>('');
   const [maxParticipants, setMaxParticipants] = useState<number>(0);
@@ -17,6 +25,19 @@ export default function CompetitionCreatePage() {
 
   const [startsAt, setStartsAt] = useState<string>(currentDateStr);
   const [endsAt, setEndsAt] = useState<string>(currentDateStr);
+  const [pickedProblemIds, setPickedProblemIds] = useState<ProblemId[]>([]);
+  const [allProblems, setAllProblems] = useState<ProblemInfo[]>([]);
+
+  useEffect(() => {
+    async function fetchProblemList() {
+      const res = await axios.get('http://101.101.208.240:3000/problems');
+      const problems = res.data;
+
+      setAllProblems(problems);
+    }
+
+    fetchProblemList();
+  }, []);
 
   function handleChangeName(e: ChangeEvent<HTMLInputElement>) {
     const newName = e.target.value;
@@ -43,21 +64,36 @@ export default function CompetitionCreatePage() {
     setEndsAt(newEndsAt);
   }
 
-  const handleSubmitCompetition = async () => {
-    // TODO: problems추가하기
+  function handleSelectProblem(e: MouseEvent<HTMLUListElement>) {
+    const $target = (e.target as HTMLUListElement).closest('li');
+    if (!$target) return;
+
+    const problemId = Number($target.dataset['problemId']);
+
+    if (pickedProblemIds.includes(problemId)) {
+      setPickedProblemIds((ids) => ids.filter((id) => id !== problemId));
+    } else {
+      setPickedProblemIds((ids) => [...ids, problemId]);
+    }
+  }
+
+  async function handleSubmitCompetition() {
     const data = {
       name,
       detail,
       maxParticipants,
       startsAt: new Date(startsAt).toISOString(),
       endsAt: new Date(endsAt).toISOString(),
+      problems: pickedProblemIds,
     };
-    await axios.post('http://101.101.208.240:3000/competitions', data);
-  };
+    const res = await axios.post('http://101.101.208.240:3000/competitions', data);
+    const { id } = res.data;
+
+    navigate(`/contest/detail/${id}`);
+  }
 
   return (
     <main>
-      <h1>대회 생성</h1>
       <fieldset className={fieldSetStyle}>
         <Label>
           <Label.Text>대회 이름</Label.Text>
@@ -115,6 +151,23 @@ export default function CompetitionCreatePage() {
             required
           ></input>
         </Label>
+        <ul onClick={handleSelectProblem}>
+          {allProblems.map(({ id, title }) => (
+            <li key={id} data-problem-id={id}>
+              <span>
+                {id}: {title}
+              </span>
+              {pickedProblemIds.includes(id) ? <button>취소</button> : <button>선택</button>}
+            </li>
+          ))}
+        </ul>
+        <div>
+          <ul>
+            {pickedProblemIds.map((problemId) => (
+              <li key={problemId}>{problemId}</li>
+            ))}
+          </ul>
+        </div>
       </fieldset>
       <button id="create-competition" onClick={handleSubmitCompetition}>
         대회 생성

From 93d3a8c6643ca99036f86caf1cb91426a78e808a Mon Sep 17 00:00:00 2001
From: dev2820 <second28200@naver.com>
Date: Wed, 22 Nov 2023 21:15:34 +0900
Subject: [PATCH 03/24] =?UTF-8?q?refactor:=20=EB=AC=B8=EC=A0=9C=20?=
 =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=ED=8C=A8=EC=B9=98=EB=A1=9C?=
 =?UTF-8?q?=EC=A7=81=EC=9D=84=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/.gitignore                          | 51 +++++++++++---------
 frontend/src/apis/problems/index.ts          | 20 ++++++++
 frontend/src/apis/problems/types.ts          |  6 +++
 frontend/src/pages/CompetitionCreatePage.tsx | 21 +++-----
 4 files changed, 61 insertions(+), 37 deletions(-)
 create mode 100644 frontend/src/apis/problems/index.ts
 create mode 100644 frontend/src/apis/problems/types.ts

diff --git a/frontend/.gitignore b/frontend/.gitignore
index a547bf3..4c2885d 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -1,24 +1,27 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# environment
+.env
\ No newline at end of file
diff --git a/frontend/src/apis/problems/index.ts b/frontend/src/apis/problems/index.ts
new file mode 100644
index 0000000..d67e660
--- /dev/null
+++ b/frontend/src/apis/problems/index.ts
@@ -0,0 +1,20 @@
+import type { ProblemInfo } from './types';
+import axios from 'axios';
+
+const api = axios.create({
+  baseURL: import.meta.env.VITE_API_URL,
+});
+
+export * from './types';
+
+export async function fetchProblemList() {
+  try {
+    const { data } = await api.get<ProblemInfo[]>('/problems');
+
+    return data;
+  } catch (err) {
+    console.error(err);
+
+    return [];
+  }
+}
diff --git a/frontend/src/apis/problems/types.ts b/frontend/src/apis/problems/types.ts
new file mode 100644
index 0000000..56d5dee
--- /dev/null
+++ b/frontend/src/apis/problems/types.ts
@@ -0,0 +1,6 @@
+export type ProblemId = number;
+
+export type ProblemInfo = {
+  id: ProblemId;
+  title: string;
+};
diff --git a/frontend/src/pages/CompetitionCreatePage.tsx b/frontend/src/pages/CompetitionCreatePage.tsx
index 0eac81d..32ec246 100644
--- a/frontend/src/pages/CompetitionCreatePage.tsx
+++ b/frontend/src/pages/CompetitionCreatePage.tsx
@@ -4,16 +4,12 @@ import type { ChangeEvent, HTMLAttributes, MouseEvent } from 'react';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import type { ProblemId, ProblemInfo } from '@/apis/problems';
+import { fetchProblemList } from '@/apis/problems';
 import { formatDate, toLocalDate } from '@/utils/date';
 
 import axios from 'axios';
 
-type ProblemId = number;
-type ProblemInfo = {
-  id: ProblemId;
-  title: string;
-};
-
 export default function CompetitionCreatePage() {
   const navigate = useNavigate();
   const [name, setName] = useState<string>('');
@@ -28,15 +24,14 @@ export default function CompetitionCreatePage() {
   const [pickedProblemIds, setPickedProblemIds] = useState<ProblemId[]>([]);
   const [allProblems, setAllProblems] = useState<ProblemInfo[]>([]);
 
-  useEffect(() => {
-    async function fetchProblemList() {
-      const res = await axios.get('http://101.101.208.240:3000/problems');
-      const problems = res.data;
+  async function updateProblemList() {
+    const problems = await fetchProblemList();
 
-      setAllProblems(problems);
-    }
+    setAllProblems(problems);
+  }
 
-    fetchProblemList();
+  useEffect(() => {
+    updateProblemList();
   }, []);
 
   function handleChangeName(e: ChangeEvent<HTMLInputElement>) {

From 2d8fc4793b161c70a9f0b95d3ba3067d76d04af4 Mon Sep 17 00:00:00 2001
From: dev2820 <second28200@naver.com>
Date: Wed, 22 Nov 2023 21:42:24 +0900
Subject: [PATCH 04/24] =?UTF-8?q?refactor:=20Competition=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1=20=EB=A1=9C=EC=A7=81=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/apis/competitions/index.ts       | 30 +++++++++++++++++++
 frontend/src/apis/competitions/types.ts       | 23 ++++++++++++++
 frontend/src/pages/CompetitionCreatePage.tsx  | 14 +++++----
 .../src/utils/type/__tests__/isNil.spec.ts    | 16 ++++++++++
 frontend/src/utils/type/index.ts              |  8 +++++
 5 files changed, 85 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/apis/competitions/index.ts
 create mode 100644 frontend/src/apis/competitions/types.ts
 create mode 100644 frontend/src/utils/type/__tests__/isNil.spec.ts
 create mode 100644 frontend/src/utils/type/index.ts

diff --git a/frontend/src/apis/competitions/index.ts b/frontend/src/apis/competitions/index.ts
new file mode 100644
index 0000000..3cef02a
--- /dev/null
+++ b/frontend/src/apis/competitions/index.ts
@@ -0,0 +1,30 @@
+import type { CompetitionForm, CreateCompetitionResponse } from './types';
+import axios from 'axios';
+
+const api = axios.create({
+  baseURL: import.meta.env.VITE_API_URL,
+});
+
+export * from './types';
+
+export async function createCompetition(competitionForm: CompetitionForm) {
+  const { name, detail, maxParticipants, startsAt, endsAt, problems } = competitionForm;
+
+  try {
+    const form = {
+      name,
+      detail,
+      maxParticipants,
+      startsAt,
+      endsAt,
+      problems,
+    };
+    const { data } = await api.post<CreateCompetitionResponse>('/competitions', form);
+
+    return data;
+  } catch (err) {
+    console.error(err);
+
+    return null;
+  }
+}
diff --git a/frontend/src/apis/competitions/types.ts b/frontend/src/apis/competitions/types.ts
new file mode 100644
index 0000000..03ea5eb
--- /dev/null
+++ b/frontend/src/apis/competitions/types.ts
@@ -0,0 +1,23 @@
+import type { ProblemId } from '../problems';
+
+export type CompetitionId = number;
+
+export type CompetitionForm = {
+  name: string;
+  detail: string;
+  maxParticipants: number;
+  startsAt: string;
+  endsAt: string;
+  problems: ProblemId[];
+};
+
+export type CreateCompetitionResponse = {
+  id: CompetitionId;
+  name: string;
+  detail: string;
+  maxParticipants: number;
+  startsAt: string;
+  endsAt: string;
+  createdAt: string;
+  updatedAt: string;
+};
diff --git a/frontend/src/pages/CompetitionCreatePage.tsx b/frontend/src/pages/CompetitionCreatePage.tsx
index 32ec246..944e532 100644
--- a/frontend/src/pages/CompetitionCreatePage.tsx
+++ b/frontend/src/pages/CompetitionCreatePage.tsx
@@ -4,11 +4,11 @@ import type { ChangeEvent, HTMLAttributes, MouseEvent } from 'react';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { CompetitionForm, createCompetition } from '@/apis/competitions';
 import type { ProblemId, ProblemInfo } from '@/apis/problems';
 import { fetchProblemList } from '@/apis/problems';
 import { formatDate, toLocalDate } from '@/utils/date';
-
-import axios from 'axios';
+import { isNil } from '@/utils/type';
 
 export default function CompetitionCreatePage() {
   const navigate = useNavigate();
@@ -73,17 +73,19 @@ export default function CompetitionCreatePage() {
   }
 
   async function handleSubmitCompetition() {
-    const data = {
+    const competitionForm = {
       name,
       detail,
       maxParticipants,
       startsAt: new Date(startsAt).toISOString(),
       endsAt: new Date(endsAt).toISOString(),
       problems: pickedProblemIds,
-    };
-    const res = await axios.post('http://101.101.208.240:3000/competitions', data);
-    const { id } = res.data;
+    } satisfies CompetitionForm;
+
+    const competitionInfo = await createCompetition(competitionForm);
+    if (isNil(competitionInfo)) return;
 
+    const { id } = competitionInfo;
     navigate(`/contest/detail/${id}`);
   }
 
diff --git a/frontend/src/utils/type/__tests__/isNil.spec.ts b/frontend/src/utils/type/__tests__/isNil.spec.ts
new file mode 100644
index 0000000..7bbf615
--- /dev/null
+++ b/frontend/src/utils/type/__tests__/isNil.spec.ts
@@ -0,0 +1,16 @@
+import { isNil } from '../index';
+import { describe, expect, it } from 'vitest';
+
+describe('isNil', () => {
+  it('null 또는 undefined라면 true를 반환한다.', () => {
+    expect(isNil(null)).toBe(true);
+    expect(isNil(undefined)).toBe(true);
+  });
+
+  it.each([[''], ['a'], [+0], [-0], [0], [1], [Number(0)], [String('')], [true], [false], [{}]])(
+    'isNil(%s) -> false',
+    (input) => {
+      expect(isNil(input)).toBe(false);
+    },
+  );
+});
diff --git a/frontend/src/utils/type/index.ts b/frontend/src/utils/type/index.ts
new file mode 100644
index 0000000..7102b44
--- /dev/null
+++ b/frontend/src/utils/type/index.ts
@@ -0,0 +1,8 @@
+type Nil = undefined | null;
+
+export const isNil = (type: unknown): type is Nil => {
+  if (Object.is(type, null)) return true;
+  if (Object.is(type, undefined)) return true;
+
+  return false;
+};

From f36bd9d94c171bad2d5630c6c576da898285c8c0 Mon Sep 17 00:00:00 2001
From: dev2820 <second28200@naver.com>
Date: Wed, 22 Nov 2023 21:51:36 +0900
Subject: [PATCH 05/24] =?UTF-8?q?refactor:=20api=20=EC=9D=B8=EC=8A=A4?=
 =?UTF-8?q?=ED=84=B4=EC=8A=A4=20=EB=B6=84=EB=A6=AC=20&=20=ED=83=80?=
 =?UTF-8?q?=EC=9E=85=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 지정된 서버만 참조하는 api 인스턴스를 util로 분리함
- Response 타입과 데이터 타입을 분리해 정리
---
 frontend/src/apis/competitions/index.ts | 11 +++++------
 frontend/src/apis/competitions/types.ts |  4 +++-
 frontend/src/apis/problems/index.ts     | 11 ++++-------
 frontend/src/apis/problems/types.ts     |  2 ++
 frontend/src/utils/api/index.ts         |  7 +++++++
 5 files changed, 21 insertions(+), 14 deletions(-)
 create mode 100644 frontend/src/utils/api/index.ts

diff --git a/frontend/src/apis/competitions/index.ts b/frontend/src/apis/competitions/index.ts
index 3cef02a..aaf6a3a 100644
--- a/frontend/src/apis/competitions/index.ts
+++ b/frontend/src/apis/competitions/index.ts
@@ -1,13 +1,12 @@
-import type { CompetitionForm, CreateCompetitionResponse } from './types';
-import axios from 'axios';
+import api from '@/utils/api';
 
-const api = axios.create({
-  baseURL: import.meta.env.VITE_API_URL,
-});
+import type { CompetitionForm, CompetitionInfo, CreateCompetitionResponse } from './types';
 
 export * from './types';
 
-export async function createCompetition(competitionForm: CompetitionForm) {
+export async function createCompetition(
+  competitionForm: CompetitionForm,
+): Promise<CompetitionInfo | null> {
   const { name, detail, maxParticipants, startsAt, endsAt, problems } = competitionForm;
 
   try {
diff --git a/frontend/src/apis/competitions/types.ts b/frontend/src/apis/competitions/types.ts
index 03ea5eb..38fe5cb 100644
--- a/frontend/src/apis/competitions/types.ts
+++ b/frontend/src/apis/competitions/types.ts
@@ -11,7 +11,7 @@ export type CompetitionForm = {
   problems: ProblemId[];
 };
 
-export type CreateCompetitionResponse = {
+export type CompetitionInfo = {
   id: CompetitionId;
   name: string;
   detail: string;
@@ -21,3 +21,5 @@ export type CreateCompetitionResponse = {
   createdAt: string;
   updatedAt: string;
 };
+
+export type CreateCompetitionResponse = CompetitionInfo;
diff --git a/frontend/src/apis/problems/index.ts b/frontend/src/apis/problems/index.ts
index d67e660..dba4ecb 100644
--- a/frontend/src/apis/problems/index.ts
+++ b/frontend/src/apis/problems/index.ts
@@ -1,15 +1,12 @@
-import type { ProblemInfo } from './types';
-import axios from 'axios';
+import api from '@/utils/api';
 
-const api = axios.create({
-  baseURL: import.meta.env.VITE_API_URL,
-});
+import type { FetchProblemListResponse, ProblemInfo } from './types';
 
 export * from './types';
 
-export async function fetchProblemList() {
+export async function fetchProblemList(): Promise<ProblemInfo[]> {
   try {
-    const { data } = await api.get<ProblemInfo[]>('/problems');
+    const { data } = await api.get<FetchProblemListResponse>('/problems');
 
     return data;
   } catch (err) {
diff --git a/frontend/src/apis/problems/types.ts b/frontend/src/apis/problems/types.ts
index 56d5dee..7cd1a8c 100644
--- a/frontend/src/apis/problems/types.ts
+++ b/frontend/src/apis/problems/types.ts
@@ -4,3 +4,5 @@ export type ProblemInfo = {
   id: ProblemId;
   title: string;
 };
+
+export type FetchProblemListResponse = ProblemInfo[];
diff --git a/frontend/src/utils/api/index.ts b/frontend/src/utils/api/index.ts
new file mode 100644
index 0000000..a08c68e
--- /dev/null
+++ b/frontend/src/utils/api/index.ts
@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+const api = axios.create({
+  baseURL: import.meta.env.VITE_API_URL,
+});
+
+export default api;

From d829a0ea370c67fb8d73f9795d9391020804d15e Mon Sep 17 00:00:00 2001
From: dev2820 <second28200@naver.com>
Date: Wed, 22 Nov 2023 21:59:37 +0900
Subject: [PATCH 06/24] =?UTF-8?q?fix:=20=EB=AC=B8=EC=A0=9C=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=20=EB=B2=84=ED=8A=BC=EC=9D=B4=20=EC=95=84=EB=8B=8C=20?=
 =?UTF-8?q?=EC=98=81=EC=97=AD=EC=9D=84=20=ED=81=B4=EB=A6=AD=ED=95=B4?=
 =?UTF-8?q?=EB=8F=84=20=EB=AC=B8=EC=A0=9C=EA=B0=80=20=EC=84=A0=ED=83=9D?=
 =?UTF-8?q?=EB=90=98=EB=8A=94=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/CompetitionCreatePage.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/CompetitionCreatePage.tsx b/frontend/src/pages/CompetitionCreatePage.tsx
index 944e532..fb2928b 100644
--- a/frontend/src/pages/CompetitionCreatePage.tsx
+++ b/frontend/src/pages/CompetitionCreatePage.tsx
@@ -60,10 +60,13 @@ export default function CompetitionCreatePage() {
   }
 
   function handleSelectProblem(e: MouseEvent<HTMLUListElement>) {
-    const $target = (e.target as HTMLUListElement).closest('li');
-    if (!$target) return;
+    const $target = e.target as HTMLElement;
+    if ($target.tagName !== 'BUTTON') return;
 
-    const problemId = Number($target.dataset['problemId']);
+    const $li = $target.closest('li');
+    if (!$li) return;
+
+    const problemId = Number($li.dataset['problemId']);
 
     if (pickedProblemIds.includes(problemId)) {
       setPickedProblemIds((ids) => ids.filter((id) => id !== problemId));

From ffacc86a04391ea51a9c491e7fd53e4c65000863 Mon Sep 17 00:00:00 2001
From: dev2820 <second28200@naver.com>
Date: Wed, 22 Nov 2023 22:36:40 +0900
Subject: [PATCH 07/24] =?UTF-8?q?refactor:=20Input=20=EA=B4=80=EB=A0=A8=20?=
 =?UTF-8?q?Common=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Common/Input.tsx     | 76 ++++++++++++++++
 frontend/src/components/Common/index.ts      |  1 +
 frontend/src/pages/CompetitionCreatePage.tsx | 96 +++++---------------
 3 files changed, 100 insertions(+), 73 deletions(-)
 create mode 100644 frontend/src/components/Common/Input.tsx
 create mode 100644 frontend/src/components/Common/index.ts

diff --git a/frontend/src/components/Common/Input.tsx b/frontend/src/components/Common/Input.tsx
new file mode 100644
index 0000000..66aa6fa
--- /dev/null
+++ b/frontend/src/components/Common/Input.tsx
@@ -0,0 +1,76 @@
+import { css, cx } from '@style/css';
+
+import type {
+  ForwardedRef,
+  HTMLAttributes,
+  InputHTMLAttributes,
+  ReactElement,
+  ReactNode,
+  TextareaHTMLAttributes,
+} from 'react';
+import { Children, cloneElement, forwardRef } from 'react';
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  label?: ReactNode;
+  children: ReactElement;
+}
+
+export function Input({ id, label, children, ...props }: Props) {
+  const child = Children.only(children);
+
+  return (
+    <div {...props}>
+      <label htmlFor={id}>{label}</label>
+      {cloneElement(child, {
+        id,
+        ...child.props,
+      })}
+    </div>
+  );
+}
+
+interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  error?: boolean;
+}
+
+Input.TextField = forwardRef(
+  ({ className, ...props }: TextFieldProps, ref: ForwardedRef<HTMLInputElement>) => {
+    return <input className={cx(inputStyle, className)} type="text" ref={ref} {...props}></input>;
+  },
+);
+
+const inputStyle = css({
+  border: '1px solid black',
+  width: '20rem',
+});
+
+interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+Input.TextArea = forwardRef(
+  ({ className, ...props }: TextAreaProps, ref: ForwardedRef<HTMLTextAreaElement>) => {
+    return <textarea className={cx(inputStyle, className)} ref={ref} {...props}></textarea>;
+  },
+);
+
+interface NumberFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {}
+
+Input.NumberField = forwardRef(
+  ({ className, ...props }: NumberFieldProps, ref: ForwardedRef<HTMLInputElement>) => {
+    return <input className={cx(inputStyle, className)} type="number" ref={ref} {...props}></input>;
+  },
+);
+
+interface DateTimeFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {}
+
+Input.DateTimeField = forwardRef(
+  ({ className, ...props }: DateTimeFieldProps, ref: ForwardedRef<HTMLInputElement>) => {
+    return (
+      <input
+        className={cx(inputStyle, className)}
+        type="datetime-local"
+        ref={ref}
+        {...props}
+      ></input>
+    );
+  },
+);
diff --git a/frontend/src/components/Common/index.ts b/frontend/src/components/Common/index.ts
new file mode 100644
index 0000000..6322cf3
--- /dev/null
+++ b/frontend/src/components/Common/index.ts
@@ -0,0 +1 @@
+export { Input } from './Input';
diff --git a/frontend/src/pages/CompetitionCreatePage.tsx b/frontend/src/pages/CompetitionCreatePage.tsx
index fb2928b..b8647ac 100644
--- a/frontend/src/pages/CompetitionCreatePage.tsx
+++ b/frontend/src/pages/CompetitionCreatePage.tsx
@@ -1,12 +1,13 @@
 import { css } from '@style/css';
 
-import type { ChangeEvent, HTMLAttributes, MouseEvent } from 'react';
+import type { ChangeEvent, MouseEvent } from 'react';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { CompetitionForm, createCompetition } from '@/apis/competitions';
 import type { ProblemId, ProblemInfo } from '@/apis/problems';
 import { fetchProblemList } from '@/apis/problems';
+import { Input } from '@/components/Common';
 import { formatDate, toLocalDate } from '@/utils/date';
 import { isNil } from '@/utils/type';
 
@@ -95,62 +96,49 @@ export default function CompetitionCreatePage() {
   return (
     <main>
       <fieldset className={fieldSetStyle}>
-        <Label>
-          <Label.Text>대회 이름</Label.Text>
-          <input
+        <Input label="대회 이름">
+          <Input.TextField
             name="name"
-            className={inputStyle}
             value={name}
             onChange={handleChangeName}
             placeholder="대회 이름을 입력해주세요"
             required
-          ></input>
-        </Label>
-        <Label>
-          <Label.Text>대회 설명</Label.Text>
-          <textarea
+          ></Input.TextField>
+        </Input>
+        <Input label="대회 설명">
+          <Input.TextArea
             name="detail"
-            className={inputStyle}
             value={detail}
             onChange={handleChangeDetail}
             placeholder="대회 설명을 입력해주세요"
             required
-          ></textarea>
-        </Label>
-        <Label>
-          <Label.Text>최대 참여 인원</Label.Text>
-          <input
+          ></Input.TextArea>
+        </Input>
+        <Input label="최대 참여 인원">
+          <Input.NumberField
             name="max-participants"
-            type="number"
-            min="0"
-            className={inputStyle}
             value={maxParticipants}
+            min="0"
             onChange={handleChangeMaxParticipants}
             required
-          ></input>
-        </Label>
-        <Label>
-          <Label.Text>대회 시작 시간</Label.Text>
-          <input
-            type="datetime-local"
+          ></Input.NumberField>
+        </Input>
+        <Input label="대회 시작 시간">
+          <Input.DateTimeField
             name="starts-at"
-            className={inputStyle}
             value={startsAt}
             onChange={handleChangeStartsAt}
             required
-          ></input>
-        </Label>
-        <Label>
-          <Label.Text>대회 종료 시간</Label.Text>
-          <input
+          ></Input.DateTimeField>
+        </Input>
+        <Input label="대회 종료 시간">
+          <Input.DateTimeField
             name="ends-at"
-            type="datetime-local"
-            className={inputStyle}
             value={endsAt}
             onChange={handleChangeEndsAt}
             required
-          ></input>
-        </Label>
+          ></Input.DateTimeField>
+        </Input>
         <ul onClick={handleSelectProblem}>
           {allProblems.map(({ id, title }) => (
             <li key={id} data-problem-id={id}>
@@ -176,45 +164,7 @@ export default function CompetitionCreatePage() {
   );
 }
 
-interface LabelProps extends HTMLAttributes<HTMLLabelElement> {}
-
-const Label = ({ className, children, ...rest }: LabelProps) => {
-  return (
-    <label {...rest} className={`${className} ${labelStyle}`}>
-      {children}
-    </label>
-  );
-};
-
-interface LabelTextProps extends HTMLAttributes<HTMLSpanElement> {}
-
-Label.Text = ({ className, children, ...rest }: LabelTextProps) => {
-  return (
-    <span {...rest} className={`${className} ${labelTextStyle}`}>
-      {children}
-    </span>
-  );
-};
-
 const fieldSetStyle = css({
   display: 'flex',
   flexDirection: 'column',
 });
-
-const inputStyle = css({
-  border: '1px solid black',
-  width: '20rem',
-});
-
-const labelStyle = css({
-  display: 'flex',
-  flexDirection: 'row',
-  textAlign: 'center',
-  gap: '4',
-});
-
-const labelTextStyle = css({
-  margin: 'auto 0',
-  width: '8rem',
-  textAlign: 'left',
-});

From f7b4e472281e9160fbe029a773159319d1f63147 Mon Sep 17 00:00:00 2001
From: dev2820 <second28200@naver.com>
Date: Wed, 22 Nov 2023 22:39:43 +0900
Subject: [PATCH 08/24] =?UTF-8?q?update:=20=EC=84=A0=ED=83=9D=EB=90=9C=20?=
 =?UTF-8?q?=EB=AC=B8=EC=A0=9C=EC=97=90=EC=84=9C=20list=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0=20&=20=EC=A0=95=EB=A0=AC=EB=90=98=EB=8F=84=EB=A1=9D?=
 =?UTF-8?q?=ED=95=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/CompetitionCreatePage.tsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/frontend/src/pages/CompetitionCreatePage.tsx b/frontend/src/pages/CompetitionCreatePage.tsx
index b8647ac..82664e0 100644
--- a/frontend/src/pages/CompetitionCreatePage.tsx
+++ b/frontend/src/pages/CompetitionCreatePage.tsx
@@ -149,13 +149,7 @@ export default function CompetitionCreatePage() {
             </li>
           ))}
         </ul>
-        <div>
-          <ul>
-            {pickedProblemIds.map((problemId) => (
-              <li key={problemId}>{problemId}</li>
-            ))}
-          </ul>
-        </div>
+        <div>선택된 문제: {[...pickedProblemIds].sort().join(',')}</div>
       </fieldset>
       <button id="create-competition" onClick={handleSubmitCompetition}>
         대회 생성

From dd56f76bd74215442e90a502d5026c7e1b9002cd Mon Sep 17 00:00:00 2001
From: dev2820 <second28200@naver.com>
Date: Wed, 22 Nov 2023 22:40:03 +0900
Subject: [PATCH 09/24] =?UTF-8?q?refactor:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20=EC=95=84=EC=9D=B4=EB=94=94=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/CompetitionCreatePage.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/src/pages/CompetitionCreatePage.tsx b/frontend/src/pages/CompetitionCreatePage.tsx
index 82664e0..857de15 100644
--- a/frontend/src/pages/CompetitionCreatePage.tsx
+++ b/frontend/src/pages/CompetitionCreatePage.tsx
@@ -151,9 +151,7 @@ export default function CompetitionCreatePage() {
         </ul>
         <div>선택된 문제: {[...pickedProblemIds].sort().join(',')}</div>
       </fieldset>
-      <button id="create-competition" onClick={handleSubmitCompetition}>
-        대회 생성
-      </button>
+      <button onClick={handleSubmitCompetition}>대회 생성</button>
     </main>
   );
 }

From 2560541f86792f73a6903e88c9ba42876e9a1a7f Mon Sep 17 00:00:00 2001
From: dev2820 <second28200@naver.com>
Date: Wed, 22 Nov 2023 22:42:17 +0900
Subject: [PATCH 10/24] =?UTF-8?q?refactor:=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=20=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- CompetitionCreatePage -> CreateCompetitionPage (영문법에 맞춰 수정함)
---
 .../{CompetitionCreatePage.tsx => CreateCompetitionPage.tsx}  | 0
 frontend/src/router.tsx                                       | 4 ++--
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename frontend/src/pages/{CompetitionCreatePage.tsx => CreateCompetitionPage.tsx} (100%)

diff --git a/frontend/src/pages/CompetitionCreatePage.tsx b/frontend/src/pages/CreateCompetitionPage.tsx
similarity index 100%
rename from frontend/src/pages/CompetitionCreatePage.tsx
rename to frontend/src/pages/CreateCompetitionPage.tsx
diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
index 5ce1d6e..de0611f 100644
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -1,7 +1,7 @@
 import { createBrowserRouter } from 'react-router-dom';
 
-import CompetitionCreatePage from '@/pages/CompetitionCreatePage';
 import ContestPage from '@/pages/ContestPage';
+import CreateCompetitionPage from '@/pages/CreateCompetitionPage';
 import ProblemPage from '@/pages/ProblemPage';
 
 import App from './App';
@@ -21,7 +21,7 @@ const router = createBrowserRouter([
       },
       {
         path: '/competition/create',
-        element: <CompetitionCreatePage />,
+        element: <CreateCompetitionPage />,
       },
     ],
   },

From db0bb6323621c7b9acbd67466ca8cdea665b6597 Mon Sep 17 00:00:00 2001
From: dev2820 <second28200@naver.com>
Date: Wed, 22 Nov 2023 22:53:10 +0900
Subject: [PATCH 11/24] =?UTF-8?q?refactor:=20=EB=8C=80=ED=9A=8C=20?=
 =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=EC=84=A0=ED=83=9D=20=EB=A6=AC=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/CreateCompetitionPage.tsx | 57 +++++++++++++-------
 1 file changed, 38 insertions(+), 19 deletions(-)

diff --git a/frontend/src/pages/CreateCompetitionPage.tsx b/frontend/src/pages/CreateCompetitionPage.tsx
index 857de15..2205f9a 100644
--- a/frontend/src/pages/CreateCompetitionPage.tsx
+++ b/frontend/src/pages/CreateCompetitionPage.tsx
@@ -60,15 +60,7 @@ export default function CompetitionCreatePage() {
     setEndsAt(newEndsAt);
   }
 
-  function handleSelectProblem(e: MouseEvent<HTMLUListElement>) {
-    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']);
-
+  function handleSelectProblem(problemId: ProblemId) {
     if (pickedProblemIds.includes(problemId)) {
       setPickedProblemIds((ids) => ids.filter((id) => id !== problemId));
     } else {
@@ -139,16 +131,11 @@ export default function CompetitionCreatePage() {
             required
           ></Input.DateTimeField>
         </Input>
-        <ul onClick={handleSelectProblem}>
-          {allProblems.map(({ id, title }) => (
-            <li key={id} data-problem-id={id}>
-              <span>
-                {id}: {title}
-              </span>
-              {pickedProblemIds.includes(id) ? <button>취소</button> : <button>선택</button>}
-            </li>
-          ))}
-        </ul>
+        <ProblemList
+          allProblems={allProblems}
+          pickedProblemIds={pickedProblemIds}
+          onSelectProblem={handleSelectProblem}
+        ></ProblemList>
         <div>선택된 문제: {[...pickedProblemIds].sort().join(',')}</div>
       </fieldset>
       <button onClick={handleSubmitCompetition}>대회 생성</button>
@@ -156,6 +143,38 @@ export default function CompetitionCreatePage() {
   );
 }
 
+interface ProblemListProps {
+  allProblems: ProblemInfo[];
+  pickedProblemIds: ProblemId[];
+  onSelectProblem: (problemId: ProblemId) => void;
+}
+
+const ProblemList = ({ allProblems, pickedProblemIds, onSelectProblem }: ProblemListProps) => {
+  function handleSelectProblem(e: MouseEvent<HTMLUListElement>) {
+    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']);
+    onSelectProblem(problemId);
+  }
+
+  return (
+    <ul onClick={handleSelectProblem}>
+      {allProblems.map(({ id, title }) => (
+        <li key={id} data-problem-id={id}>
+          <span>
+            {id}: {title}
+          </span>
+          <button>{pickedProblemIds.includes(id) ? '취소' : '선택'}</button>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
 const fieldSetStyle = css({
   display: 'flex',
   flexDirection: 'column',

From 3b319a1dfc538b5df5437bc41ebb0684e3d10c68 Mon Sep 17 00:00:00 2001
From: dev2820 <second28200@naver.com>
Date: Wed, 22 Nov 2023 23:00:54 +0900
Subject: [PATCH 12/24] =?UTF-8?q?refactor:=20useProblemList=20=ED=9B=85=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/hooks/problem/useProblemList.ts | 33 ++++++++++++++++++++
 frontend/src/pages/CreateCompetitionPage.tsx | 25 +++------------
 2 files changed, 38 insertions(+), 20 deletions(-)
 create mode 100644 frontend/src/hooks/problem/useProblemList.ts

diff --git a/frontend/src/hooks/problem/useProblemList.ts b/frontend/src/hooks/problem/useProblemList.ts
new file mode 100644
index 0000000..e699387
--- /dev/null
+++ b/frontend/src/hooks/problem/useProblemList.ts
@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+
+import type { ProblemId, ProblemInfo } from '@/apis/problems';
+import { fetchProblemList } from '@/apis/problems';
+
+export function useProblemList() {
+  const [pickedProblemIds, setPickedProblemIds] = useState<ProblemId[]>([]);
+  const [allProblems, setAllProblems] = useState<ProblemInfo[]>([]);
+
+  async function updateProblemList() {
+    const problems = await fetchProblemList();
+
+    setAllProblems(problems);
+  }
+
+  function togglePickedProblem(problemId: ProblemId) {
+    if (pickedProblemIds.includes(problemId)) {
+      setPickedProblemIds((ids) => ids.filter((id) => id !== problemId).sort());
+    } else {
+      setPickedProblemIds((ids) => [...ids, problemId].sort());
+    }
+  }
+
+  useEffect(() => {
+    updateProblemList();
+  }, []);
+
+  return {
+    allProblems,
+    pickedProblemIds,
+    togglePickedProblem,
+  };
+}
diff --git a/frontend/src/pages/CreateCompetitionPage.tsx b/frontend/src/pages/CreateCompetitionPage.tsx
index 2205f9a..892fb29 100644
--- a/frontend/src/pages/CreateCompetitionPage.tsx
+++ b/frontend/src/pages/CreateCompetitionPage.tsx
@@ -1,13 +1,13 @@
 import { css } from '@style/css';
 
 import type { ChangeEvent, MouseEvent } from 'react';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { CompetitionForm, createCompetition } from '@/apis/competitions';
 import type { ProblemId, ProblemInfo } from '@/apis/problems';
-import { fetchProblemList } from '@/apis/problems';
 import { Input } from '@/components/Common';
+import { useProblemList } from '@/hooks/problem/useProblemList';
 import { formatDate, toLocalDate } from '@/utils/date';
 import { isNil } from '@/utils/type';
 
@@ -22,18 +22,7 @@ export default function CompetitionCreatePage() {
 
   const [startsAt, setStartsAt] = useState<string>(currentDateStr);
   const [endsAt, setEndsAt] = useState<string>(currentDateStr);
-  const [pickedProblemIds, setPickedProblemIds] = useState<ProblemId[]>([]);
-  const [allProblems, setAllProblems] = useState<ProblemInfo[]>([]);
-
-  async function updateProblemList() {
-    const problems = await fetchProblemList();
-
-    setAllProblems(problems);
-  }
-
-  useEffect(() => {
-    updateProblemList();
-  }, []);
+  const { pickedProblemIds, allProblems, togglePickedProblem } = useProblemList();
 
   function handleChangeName(e: ChangeEvent<HTMLInputElement>) {
     const newName = e.target.value;
@@ -61,11 +50,7 @@ export default function CompetitionCreatePage() {
   }
 
   function handleSelectProblem(problemId: ProblemId) {
-    if (pickedProblemIds.includes(problemId)) {
-      setPickedProblemIds((ids) => ids.filter((id) => id !== problemId));
-    } else {
-      setPickedProblemIds((ids) => [...ids, problemId]);
-    }
+    togglePickedProblem(problemId);
   }
 
   async function handleSubmitCompetition() {
@@ -136,7 +121,7 @@ export default function CompetitionCreatePage() {
           pickedProblemIds={pickedProblemIds}
           onSelectProblem={handleSelectProblem}
         ></ProblemList>
-        <div>선택된 문제: {[...pickedProblemIds].sort().join(',')}</div>
+        <div>선택된 문제: {[...pickedProblemIds].join(',')}</div>
       </fieldset>
       <button onClick={handleSubmitCompetition}>대회 생성</button>
     </main>

From abf11be03bd1bff6f27b78b0152a5002315440cd Mon Sep 17 00:00:00 2001
From: dev2820 <second28200@naver.com>
Date: Wed, 22 Nov 2023 23:10:53 +0900
Subject: [PATCH 13/24] =?UTF-8?q?refactor:=20CompetitionForm=EC=9D=84=20?=
 =?UTF-8?q?=ED=9B=85=EC=9C=BC=EB=A1=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../hooks/competition/useCompetitionForm.ts   | 42 +++++++++++++++++++
 frontend/src/pages/CreateCompetitionPage.tsx  | 38 ++++++-----------
 2 files changed, 55 insertions(+), 25 deletions(-)
 create mode 100644 frontend/src/hooks/competition/useCompetitionForm.ts

diff --git a/frontend/src/hooks/competition/useCompetitionForm.ts b/frontend/src/hooks/competition/useCompetitionForm.ts
new file mode 100644
index 0000000..0331b7e
--- /dev/null
+++ b/frontend/src/hooks/competition/useCompetitionForm.ts
@@ -0,0 +1,42 @@
+import { useState } from 'react';
+
+import type { CompetitionForm } from '@/apis/competitions';
+import { formatDate, toLocalDate } from '@/utils/date';
+
+export function useCompetitionForm(initialForm?: Partial<CompetitionForm>) {
+  initialForm = initialForm ?? {};
+
+  const [name, setName] = useState<string>(initialForm.name ?? '');
+  const [detail, setDetail] = useState<string>(initialForm.detail ?? '');
+  const [maxParticipants, setMaxParticipants] = useState<number>(initialForm.maxParticipants ?? 0);
+
+  const currentDate = toLocalDate(new Date());
+  const currentDateStr = formatDate(currentDate, 'YYYY-MM-DDThh:mm');
+
+  const [startsAt, setStartsAt] = useState<string>(initialForm.startsAt ?? currentDateStr);
+  const [endsAt, setEndsAt] = useState<string>(initialForm.endsAt ?? currentDateStr);
+
+  function getAllFormData() {
+    return {
+      name,
+      detail,
+      maxParticipants,
+      startsAt: new Date(startsAt).toISOString(),
+      endsAt: new Date(endsAt).toISOString(),
+    };
+  }
+
+  return {
+    name,
+    detail,
+    maxParticipants,
+    startsAt,
+    endsAt,
+    setName,
+    setDetail,
+    setMaxParticipants,
+    setStartsAt,
+    setEndsAt,
+    getAllFormData,
+  };
+}
diff --git a/frontend/src/pages/CreateCompetitionPage.tsx b/frontend/src/pages/CreateCompetitionPage.tsx
index 892fb29..67451f4 100644
--- a/frontend/src/pages/CreateCompetitionPage.tsx
+++ b/frontend/src/pages/CreateCompetitionPage.tsx
@@ -1,52 +1,44 @@
 import { css } from '@style/css';
 
 import type { ChangeEvent, MouseEvent } from 'react';
-import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { CompetitionForm, createCompetition } from '@/apis/competitions';
 import type { ProblemId, ProblemInfo } from '@/apis/problems';
 import { Input } from '@/components/Common';
+import { useCompetitionForm } from '@/hooks/competition/useCompetitionForm';
 import { useProblemList } from '@/hooks/problem/useProblemList';
-import { formatDate, toLocalDate } from '@/utils/date';
 import { isNil } from '@/utils/type';
 
 export default function CompetitionCreatePage() {
   const navigate = useNavigate();
-  const [name, setName] = useState<string>('');
-  const [detail, setDetail] = useState<string>('');
-  const [maxParticipants, setMaxParticipants] = useState<number>(0);
 
-  const currentDate = toLocalDate(new Date());
-  const currentDateStr = formatDate(currentDate, 'YYYY-MM-DDThh:mm');
-
-  const [startsAt, setStartsAt] = useState<string>(currentDateStr);
-  const [endsAt, setEndsAt] = useState<string>(currentDateStr);
+  const form = useCompetitionForm();
   const { pickedProblemIds, allProblems, togglePickedProblem } = useProblemList();
 
   function handleChangeName(e: ChangeEvent<HTMLInputElement>) {
     const newName = e.target.value;
-    setName(newName);
+    form.setName(newName);
   }
 
   function handleChangeDetail(e: ChangeEvent<HTMLTextAreaElement>) {
     const newDetail = e.target.value;
-    setDetail(newDetail);
+    form.setDetail(newDetail);
   }
 
   function handleChangeMaxParticipants(e: ChangeEvent<HTMLInputElement>) {
     const newMaxParticipants = Number(e.target.value);
-    setMaxParticipants(newMaxParticipants);
+    form.setMaxParticipants(newMaxParticipants);
   }
 
   function handleChangeStartsAt(e: ChangeEvent<HTMLInputElement>) {
     const newStartsAt = e.target.value;
-    setStartsAt(newStartsAt);
+    form.setStartsAt(newStartsAt);
   }
 
   function handleChangeEndsAt(e: ChangeEvent<HTMLInputElement>) {
     const newEndsAt = e.target.value;
-    setEndsAt(newEndsAt);
+    form.setEndsAt(newEndsAt);
   }
 
   function handleSelectProblem(problemId: ProblemId) {
@@ -55,11 +47,7 @@ export default function CompetitionCreatePage() {
 
   async function handleSubmitCompetition() {
     const competitionForm = {
-      name,
-      detail,
-      maxParticipants,
-      startsAt: new Date(startsAt).toISOString(),
-      endsAt: new Date(endsAt).toISOString(),
+      ...form.getAllFormData(),
       problems: pickedProblemIds,
     } satisfies CompetitionForm;
 
@@ -76,7 +64,7 @@ export default function CompetitionCreatePage() {
         <Input label="대회 이름">
           <Input.TextField
             name="name"
-            value={name}
+            value={form.name}
             onChange={handleChangeName}
             placeholder="대회 이름을 입력해주세요"
             required
@@ -85,7 +73,7 @@ export default function CompetitionCreatePage() {
         <Input label="대회 설명">
           <Input.TextArea
             name="detail"
-            value={detail}
+            value={form.detail}
             onChange={handleChangeDetail}
             placeholder="대회 설명을 입력해주세요"
             required
@@ -94,7 +82,7 @@ export default function CompetitionCreatePage() {
         <Input label="최대 참여 인원">
           <Input.NumberField
             name="max-participants"
-            value={maxParticipants}
+            value={form.maxParticipants}
             min="0"
             onChange={handleChangeMaxParticipants}
             required
@@ -103,7 +91,7 @@ export default function CompetitionCreatePage() {
         <Input label="대회 시작 시간">
           <Input.DateTimeField
             name="starts-at"
-            value={startsAt}
+            value={form.startsAt}
             onChange={handleChangeStartsAt}
             required
           ></Input.DateTimeField>
@@ -111,7 +99,7 @@ export default function CompetitionCreatePage() {
         <Input label="대회 종료 시간">
           <Input.DateTimeField
             name="ends-at"
-            value={endsAt}
+            value={form.endsAt}
             onChange={handleChangeEndsAt}
             required
           ></Input.DateTimeField>

From 14793f1313e311409156075c91062ac792a0df4b Mon Sep 17 00:00:00 2001
From: dev2820 <second28200@naver.com>
Date: Wed, 22 Nov 2023 23:15:09 +0900
Subject: [PATCH 14/24] =?UTF-8?q?refactor:=20pickedProblem=EC=9D=84=20Comp?=
 =?UTF-8?q?etitionForm=EC=9C=BC=EB=A1=9C=20=EB=A1=9C=EC=A7=81=EC=9D=84=20?=
 =?UTF-8?q?=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/hooks/competition/useCompetitionForm.ts     | 13 +++++++++++++
 frontend/src/hooks/problem/useProblemList.ts        | 13 +------------
 frontend/src/pages/CreateCompetitionPage.tsx        |  9 ++++-----
 3 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/frontend/src/hooks/competition/useCompetitionForm.ts b/frontend/src/hooks/competition/useCompetitionForm.ts
index 0331b7e..7affa25 100644
--- a/frontend/src/hooks/competition/useCompetitionForm.ts
+++ b/frontend/src/hooks/competition/useCompetitionForm.ts
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 
 import type { CompetitionForm } from '@/apis/competitions';
+import type { ProblemId } from '@/apis/problems';
 import { formatDate, toLocalDate } from '@/utils/date';
 
 export function useCompetitionForm(initialForm?: Partial<CompetitionForm>) {
@@ -15,6 +16,15 @@ export function useCompetitionForm(initialForm?: Partial<CompetitionForm>) {
 
   const [startsAt, setStartsAt] = useState<string>(initialForm.startsAt ?? currentDateStr);
   const [endsAt, setEndsAt] = useState<string>(initialForm.endsAt ?? currentDateStr);
+  const [problems, setProblems] = useState<ProblemId[]>([]);
+
+  function togglePickedProblem(problemId: ProblemId) {
+    if (problems.includes(problemId)) {
+      setProblems((ids) => ids.filter((id) => id !== problemId).sort());
+    } else {
+      setProblems((ids) => [...ids, problemId].sort());
+    }
+  }
 
   function getAllFormData() {
     return {
@@ -23,6 +33,7 @@ export function useCompetitionForm(initialForm?: Partial<CompetitionForm>) {
       maxParticipants,
       startsAt: new Date(startsAt).toISOString(),
       endsAt: new Date(endsAt).toISOString(),
+      problems,
     };
   }
 
@@ -32,11 +43,13 @@ export function useCompetitionForm(initialForm?: Partial<CompetitionForm>) {
     maxParticipants,
     startsAt,
     endsAt,
+    problems,
     setName,
     setDetail,
     setMaxParticipants,
     setStartsAt,
     setEndsAt,
+    togglePickedProblem,
     getAllFormData,
   };
 }
diff --git a/frontend/src/hooks/problem/useProblemList.ts b/frontend/src/hooks/problem/useProblemList.ts
index e699387..012079e 100644
--- a/frontend/src/hooks/problem/useProblemList.ts
+++ b/frontend/src/hooks/problem/useProblemList.ts
@@ -1,10 +1,9 @@
 import { useEffect, useState } from 'react';
 
-import type { ProblemId, ProblemInfo } from '@/apis/problems';
+import type { ProblemInfo } from '@/apis/problems';
 import { fetchProblemList } from '@/apis/problems';
 
 export function useProblemList() {
-  const [pickedProblemIds, setPickedProblemIds] = useState<ProblemId[]>([]);
   const [allProblems, setAllProblems] = useState<ProblemInfo[]>([]);
 
   async function updateProblemList() {
@@ -13,21 +12,11 @@ export function useProblemList() {
     setAllProblems(problems);
   }
 
-  function togglePickedProblem(problemId: ProblemId) {
-    if (pickedProblemIds.includes(problemId)) {
-      setPickedProblemIds((ids) => ids.filter((id) => id !== problemId).sort());
-    } else {
-      setPickedProblemIds((ids) => [...ids, problemId].sort());
-    }
-  }
-
   useEffect(() => {
     updateProblemList();
   }, []);
 
   return {
     allProblems,
-    pickedProblemIds,
-    togglePickedProblem,
   };
 }
diff --git a/frontend/src/pages/CreateCompetitionPage.tsx b/frontend/src/pages/CreateCompetitionPage.tsx
index 67451f4..871c5bb 100644
--- a/frontend/src/pages/CreateCompetitionPage.tsx
+++ b/frontend/src/pages/CreateCompetitionPage.tsx
@@ -14,7 +14,7 @@ export default function CompetitionCreatePage() {
   const navigate = useNavigate();
 
   const form = useCompetitionForm();
-  const { pickedProblemIds, allProblems, togglePickedProblem } = useProblemList();
+  const { allProblems } = useProblemList();
 
   function handleChangeName(e: ChangeEvent<HTMLInputElement>) {
     const newName = e.target.value;
@@ -42,13 +42,12 @@ export default function CompetitionCreatePage() {
   }
 
   function handleSelectProblem(problemId: ProblemId) {
-    togglePickedProblem(problemId);
+    form.togglePickedProblem(problemId);
   }
 
   async function handleSubmitCompetition() {
     const competitionForm = {
       ...form.getAllFormData(),
-      problems: pickedProblemIds,
     } satisfies CompetitionForm;
 
     const competitionInfo = await createCompetition(competitionForm);
@@ -106,10 +105,10 @@ export default function CompetitionCreatePage() {
         </Input>
         <ProblemList
           allProblems={allProblems}
-          pickedProblemIds={pickedProblemIds}
+          pickedProblemIds={form.problems}
           onSelectProblem={handleSelectProblem}
         ></ProblemList>
-        <div>선택된 문제: {[...pickedProblemIds].join(',')}</div>
+        <div>선택된 문제: {[...form.problems].join(',')}</div>
       </fieldset>
       <button onClick={handleSubmitCompetition}>대회 생성</button>
     </main>

From 18eb4af271cf96cdefc4da63987e684050e71d7f Mon Sep 17 00:00:00 2001
From: dev2820 <second28200@naver.com>
Date: Wed, 22 Nov 2023 23:22:49 +0900
Subject: [PATCH 15/24] =?UTF-8?q?chore:=20gitignore=20=EB=A7=88=EC=A7=80?=
 =?UTF-8?q?=EB=A7=89=EC=97=90=20eol=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/.gitignore | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/.gitignore b/frontend/.gitignore
index 4c2885d..4e09b47 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -24,4 +24,4 @@ dist-ssr
 *.sw?
 
 # environment
-.env
\ No newline at end of file
+.env

From 8a14d99260f37ff9d4ba12824a1c2bfb167d0cd7 Mon Sep 17 00:00:00 2001
From: dev2820 <second28200@naver.com>
Date: Thu, 23 Nov 2023 10:40:50 +0900
Subject: [PATCH 16/24] =?UTF-8?q?update:=20=EB=8C=80=ED=9A=8C=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=20=EA=B2=80=EC=A6=9D=20=EB=A1=9C=EC=A7=81=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../hooks/competition/useCompetitionForm.ts   | 67 ++++++++++++++++++-
 frontend/src/pages/CreateCompetitionPage.tsx  | 32 +++++----
 2 files changed, 84 insertions(+), 15 deletions(-)

diff --git a/frontend/src/hooks/competition/useCompetitionForm.ts b/frontend/src/hooks/competition/useCompetitionForm.ts
index 7affa25..92dde6d 100644
--- a/frontend/src/hooks/competition/useCompetitionForm.ts
+++ b/frontend/src/hooks/competition/useCompetitionForm.ts
@@ -1,15 +1,30 @@
 import { useState } from 'react';
 
 import type { CompetitionForm } from '@/apis/competitions';
+import { createCompetition } from '@/apis/competitions';
 import type { ProblemId } from '@/apis/problems';
 import { formatDate, toLocalDate } from '@/utils/date';
 
+type Valid = {
+  isValid: boolean;
+  message?: string;
+};
+
+const FIVE_MIN_BY_MS = 5 * 60 * 1000;
+const VALIDATION_MESSAGE = {
+  needLongName: '이름은 1글자 이상이어야합니다',
+  needMoreParticipants: '최대 참여 인원은 1명 이상이어야 합니다',
+  tooEarlyStartTime: '대회 시작 시간은 현재보다 5분 늦은 시간부터 가능합니다',
+  tooEarlyEndTime: '대회 종료 시간은 대회 시작시간보다 늦게 끝나야합니다',
+  needMoreProblems: '대회 문제는 1개 이상이어야합니다',
+};
+
 export function useCompetitionForm(initialForm?: Partial<CompetitionForm>) {
   initialForm = initialForm ?? {};
 
   const [name, setName] = useState<string>(initialForm.name ?? '');
   const [detail, setDetail] = useState<string>(initialForm.detail ?? '');
-  const [maxParticipants, setMaxParticipants] = useState<number>(initialForm.maxParticipants ?? 0);
+  const [maxParticipants, setMaxParticipants] = useState<number>(initialForm.maxParticipants ?? 1);
 
   const currentDate = toLocalDate(new Date());
   const currentDateStr = formatDate(currentDate, 'YYYY-MM-DDThh:mm');
@@ -26,7 +41,7 @@ export function useCompetitionForm(initialForm?: Partial<CompetitionForm>) {
     }
   }
 
-  function getAllFormData() {
+  function getAllFormData(): CompetitionForm {
     return {
       name,
       detail,
@@ -37,6 +52,52 @@ export function useCompetitionForm(initialForm?: Partial<CompetitionForm>) {
     };
   }
 
+  async function submitCompetition(formData: CompetitionForm) {
+    return await createCompetition(formData);
+  }
+
+  function validateForm(formData: CompetitionForm): Valid {
+    const { name, maxParticipants, startsAt, endsAt, problems } = formData;
+    if (name.length <= 0) {
+      return {
+        isValid: false,
+        message: VALIDATION_MESSAGE.needLongName,
+      };
+    }
+
+    if (maxParticipants <= 0) {
+      return {
+        isValid: false,
+        message: VALIDATION_MESSAGE.needMoreParticipants,
+      };
+    }
+
+    if (new Date(startsAt) > new Date(Date.now() + FIVE_MIN_BY_MS)) {
+      return {
+        isValid: false,
+        message: VALIDATION_MESSAGE.tooEarlyStartTime,
+      };
+    }
+
+    if (new Date(endsAt) > new Date(startsAt)) {
+      return {
+        isValid: false,
+        message: VALIDATION_MESSAGE.tooEarlyEndTime,
+      };
+    }
+
+    if (problems.length <= 0) {
+      return {
+        isValid: false,
+        message: VALIDATION_MESSAGE.needMoreProblems,
+      };
+    }
+
+    return {
+      isValid: true,
+    };
+  }
+
   return {
     name,
     detail,
@@ -51,5 +112,7 @@ export function useCompetitionForm(initialForm?: Partial<CompetitionForm>) {
     setEndsAt,
     togglePickedProblem,
     getAllFormData,
+    submitCompetition,
+    validateForm,
   };
 }
diff --git a/frontend/src/pages/CreateCompetitionPage.tsx b/frontend/src/pages/CreateCompetitionPage.tsx
index 871c5bb..5b3c77d 100644
--- a/frontend/src/pages/CreateCompetitionPage.tsx
+++ b/frontend/src/pages/CreateCompetitionPage.tsx
@@ -3,7 +3,6 @@ import { css } from '@style/css';
 import type { ChangeEvent, MouseEvent } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { CompetitionForm, createCompetition } from '@/apis/competitions';
 import type { ProblemId, ProblemInfo } from '@/apis/problems';
 import { Input } from '@/components/Common';
 import { useCompetitionForm } from '@/hooks/competition/useCompetitionForm';
@@ -45,16 +44,23 @@ export default function CompetitionCreatePage() {
     form.togglePickedProblem(problemId);
   }
 
-  async function handleSubmitCompetition() {
-    const competitionForm = {
-      ...form.getAllFormData(),
-    } satisfies CompetitionForm;
-
-    const competitionInfo = await createCompetition(competitionForm);
-    if (isNil(competitionInfo)) return;
-
-    const { id } = competitionInfo;
-    navigate(`/contest/detail/${id}`);
+  async function handleSumbitCompetition() {
+    const formData = form.getAllFormData();
+    const { isValid, message } = form.validateForm(formData);
+    if (!isValid) {
+      if (!isNil(message)) {
+        alert(message);
+      }
+      return;
+    }
+
+    const competition = await form.submitCompetition(formData);
+    if (isNil(competition)) {
+      alert('Oops... 대회 생성에 실패했습니다');
+      return;
+    }
+
+    navigate(`/contest/detail/${competition.id}`);
   }
 
   return (
@@ -82,7 +88,7 @@ export default function CompetitionCreatePage() {
           <Input.NumberField
             name="max-participants"
             value={form.maxParticipants}
-            min="0"
+            min="1"
             onChange={handleChangeMaxParticipants}
             required
           ></Input.NumberField>
@@ -110,7 +116,7 @@ export default function CompetitionCreatePage() {
         ></ProblemList>
         <div>선택된 문제: {[...form.problems].join(',')}</div>
       </fieldset>
-      <button onClick={handleSubmitCompetition}>대회 생성</button>
+      <button onClick={handleSumbitCompetition}>대회 생성</button>
     </main>
   );
 }

From c06bf5de2ef9b3809980a79624de12c08b5f7bc4 Mon Sep 17 00:00:00 2001
From: dev2820 <second28200@naver.com>
Date: Thu, 23 Nov 2023 10:43:10 +0900
Subject: [PATCH 17/24] =?UTF-8?q?update:=20competition/create=20->=20conte?=
 =?UTF-8?q?st/create=20=EB=9D=BC=EC=9A=B0=ED=8C=85=20=EA=B2=BD=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/router.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
index de0611f..78a06ed 100644
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -20,7 +20,7 @@ const router = createBrowserRouter([
         element: <ProblemPage />,
       },
       {
-        path: '/competition/create',
+        path: '/contest/create',
         element: <CreateCompetitionPage />,
       },
     ],

From 9f3961b767883e4fa6dfe2a623de6399c29fc90e Mon Sep 17 00:00:00 2001
From: dev2820 <second28200@naver.com>
Date: Thu, 23 Nov 2023 10:49:14 +0900
Subject: [PATCH 18/24] =?UTF-8?q?refactor:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20=ED=95=A0=EB=8B=B9=20=EC=BD=94=EB=93=9C=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/hooks/competition/useCompetitionForm.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/src/hooks/competition/useCompetitionForm.ts b/frontend/src/hooks/competition/useCompetitionForm.ts
index 92dde6d..f8f8a38 100644
--- a/frontend/src/hooks/competition/useCompetitionForm.ts
+++ b/frontend/src/hooks/competition/useCompetitionForm.ts
@@ -19,9 +19,7 @@ const VALIDATION_MESSAGE = {
   needMoreProblems: '대회 문제는 1개 이상이어야합니다',
 };
 
-export function useCompetitionForm(initialForm?: Partial<CompetitionForm>) {
-  initialForm = initialForm ?? {};
-
+export function useCompetitionForm(initialForm: Partial<CompetitionForm> = {}) {
   const [name, setName] = useState<string>(initialForm.name ?? '');
   const [detail, setDetail] = useState<string>(initialForm.detail ?? '');
   const [maxParticipants, setMaxParticipants] = useState<number>(initialForm.maxParticipants ?? 1);

From e1c0a16675957d56ae25ac48e6e69dbbcb6a2c00 Mon Sep 17 00:00:00 2001
From: dev2820 <second28200@naver.com>
Date: Thu, 23 Nov 2023 10:52:03 +0900
Subject: [PATCH 19/24] =?UTF-8?q?update:=20=EB=8C=80=ED=9A=8C=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1=ED=95=98=EA=B8=B0=20=EC=A0=9C=EB=AA=A9=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/CreateCompetitionPage.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/pages/CreateCompetitionPage.tsx b/frontend/src/pages/CreateCompetitionPage.tsx
index 5b3c77d..4a0eb5b 100644
--- a/frontend/src/pages/CreateCompetitionPage.tsx
+++ b/frontend/src/pages/CreateCompetitionPage.tsx
@@ -65,6 +65,7 @@ export default function CompetitionCreatePage() {
 
   return (
     <main>
+      <h1>대회 생성 하기</h1>
       <fieldset className={fieldSetStyle}>
         <Input label="대회 이름">
           <Input.TextField

From 0880c55696fab0c6c5563d3893b7d87301c2e0da Mon Sep 17 00:00:00 2001
From: dev2820 <second28200@naver.com>
Date: Thu, 23 Nov 2023 10:55:54 +0900
Subject: [PATCH 20/24] =?UTF-8?q?fix:=20=EC=9E=98=EB=AA=BB=EB=90=9C=20?=
 =?UTF-8?q?=EB=8C=80=ED=9A=8C=20=EC=83=9D=EC=84=B1=20=EA=B2=80=EC=A6=9D=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 시작 시작이 옳게 설정되면 에러가 나도록 하고 있었음
- 종료 시간도 마찬가지
---
 frontend/src/hooks/competition/useCompetitionForm.ts | 5 ++---
 frontend/src/pages/CreateCompetitionPage.tsx         | 1 +
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/hooks/competition/useCompetitionForm.ts b/frontend/src/hooks/competition/useCompetitionForm.ts
index f8f8a38..8f2c181 100644
--- a/frontend/src/hooks/competition/useCompetitionForm.ts
+++ b/frontend/src/hooks/competition/useCompetitionForm.ts
@@ -69,15 +69,14 @@ export function useCompetitionForm(initialForm: Partial<CompetitionForm> = {}) {
         message: VALIDATION_MESSAGE.needMoreParticipants,
       };
     }
-
-    if (new Date(startsAt) > new Date(Date.now() + FIVE_MIN_BY_MS)) {
+    if (new Date(startsAt) <= new Date(Date.now() + FIVE_MIN_BY_MS)) {
       return {
         isValid: false,
         message: VALIDATION_MESSAGE.tooEarlyStartTime,
       };
     }
 
-    if (new Date(endsAt) > new Date(startsAt)) {
+    if (new Date(endsAt) <= new Date(startsAt)) {
       return {
         isValid: false,
         message: VALIDATION_MESSAGE.tooEarlyEndTime,
diff --git a/frontend/src/pages/CreateCompetitionPage.tsx b/frontend/src/pages/CreateCompetitionPage.tsx
index 4a0eb5b..f0c011a 100644
--- a/frontend/src/pages/CreateCompetitionPage.tsx
+++ b/frontend/src/pages/CreateCompetitionPage.tsx
@@ -47,6 +47,7 @@ export default function CompetitionCreatePage() {
   async function handleSumbitCompetition() {
     const formData = form.getAllFormData();
     const { isValid, message } = form.validateForm(formData);
+
     if (!isValid) {
       if (!isNil(message)) {
         alert(message);

From 804d8e900256ac773db9f8f1a061c27e369547d8 Mon Sep 17 00:00:00 2001
From: dev2820 <second28200@naver.com>
Date: Thu, 23 Nov 2023 10:57:30 +0900
Subject: [PATCH 21/24] =?UTF-8?q?update:=20=EB=8C=80=ED=9A=8C=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1=EC=97=90=20=EB=8C=80=ED=95=9C=20=EC=95=88=EB=82=B4=20?=
 =?UTF-8?q?=EB=AC=B8=EA=B5=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/CreateCompetitionPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/CreateCompetitionPage.tsx b/frontend/src/pages/CreateCompetitionPage.tsx
index f0c011a..aaa217f 100644
--- a/frontend/src/pages/CreateCompetitionPage.tsx
+++ b/frontend/src/pages/CreateCompetitionPage.tsx
@@ -86,7 +86,7 @@ export default function CompetitionCreatePage() {
             required
           ></Input.TextArea>
         </Input>
-        <Input label="최대 참여 인원">
+        <Input label="최대 참여 인원 (1명 이상)">
           <Input.NumberField
             name="max-participants"
             value={form.maxParticipants}
@@ -95,7 +95,7 @@ export default function CompetitionCreatePage() {
             required
           ></Input.NumberField>
         </Input>
-        <Input label="대회 시작 시간">
+        <Input label="대회 시작 시간 (현재 시간보다 5분 늦은 시간부터 가능합니다)">
           <Input.DateTimeField
             name="starts-at"
             value={form.startsAt}

From 01df1d29ee33b3fc42c163fbb70b47bb444825f5 Mon Sep 17 00:00:00 2001
From: dev2820 <second28200@naver.com>
Date: Thu, 23 Nov 2023 11:11:48 +0900
Subject: [PATCH 22/24] =?UTF-8?q?refactor:=20DetailPage=EB=A1=9C=20?=
 =?UTF-8?q?=EA=B0=80=EB=8A=94=20=EA=B2=BD=EB=A1=9C=20=EC=83=81=EC=88=98?=
 =?UTF-8?q?=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/hooks/problem/useProblemList.ts | 6 +++---
 frontend/src/pages/CreateCompetitionPage.tsx | 7 ++++---
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/src/hooks/problem/useProblemList.ts b/frontend/src/hooks/problem/useProblemList.ts
index 012079e..31de0f6 100644
--- a/frontend/src/hooks/problem/useProblemList.ts
+++ b/frontend/src/hooks/problem/useProblemList.ts
@@ -4,12 +4,12 @@ import type { ProblemInfo } from '@/apis/problems';
 import { fetchProblemList } from '@/apis/problems';
 
 export function useProblemList() {
-  const [allProblems, setAllProblems] = useState<ProblemInfo[]>([]);
+  const [problemList, setProblemList] = useState<ProblemInfo[]>([]);
 
   async function updateProblemList() {
     const problems = await fetchProblemList();
 
-    setAllProblems(problems);
+    setProblemList(problems);
   }
 
   useEffect(() => {
@@ -17,6 +17,6 @@ export function useProblemList() {
   }, []);
 
   return {
-    allProblems,
+    problemList,
   };
 }
diff --git a/frontend/src/pages/CreateCompetitionPage.tsx b/frontend/src/pages/CreateCompetitionPage.tsx
index aaa217f..8f19d49 100644
--- a/frontend/src/pages/CreateCompetitionPage.tsx
+++ b/frontend/src/pages/CreateCompetitionPage.tsx
@@ -13,7 +13,7 @@ export default function CompetitionCreatePage() {
   const navigate = useNavigate();
 
   const form = useCompetitionForm();
-  const { allProblems } = useProblemList();
+  const { problemList } = useProblemList();
 
   function handleChangeName(e: ChangeEvent<HTMLInputElement>) {
     const newName = e.target.value;
@@ -61,7 +61,8 @@ export default function CompetitionCreatePage() {
       return;
     }
 
-    navigate(`/contest/detail/${competition.id}`);
+    const TO_DETAIL_PAGE = `/contest/detail/${competition.id}`;
+    navigate(TO_DETAIL_PAGE);
   }
 
   return (
@@ -112,7 +113,7 @@ export default function CompetitionCreatePage() {
           ></Input.DateTimeField>
         </Input>
         <ProblemList
-          allProblems={allProblems}
+          allProblems={problemList}
           pickedProblemIds={form.problems}
           onSelectProblem={handleSelectProblem}
         ></ProblemList>

From da285b0e3add82a93c8bdf4e68b05ee174ee0ac0 Mon Sep 17 00:00:00 2001
From: dev2820 <second28200@naver.com>
Date: Thu, 23 Nov 2023 11:16:58 +0900
Subject: [PATCH 23/24] =?UTF-8?q?refactor:=20selectableProblemList=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC:?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Problem/SelectableProblemList.tsx         | 48 +++++++++++++++++++
 frontend/src/pages/CreateCompetitionPage.tsx  | 43 +++--------------
 2 files changed, 54 insertions(+), 37 deletions(-)
 create mode 100644 frontend/src/components/Problem/SelectableProblemList.tsx

diff --git a/frontend/src/components/Problem/SelectableProblemList.tsx b/frontend/src/components/Problem/SelectableProblemList.tsx
new file mode 100644
index 0000000..db7bea5
--- /dev/null
+++ b/frontend/src/components/Problem/SelectableProblemList.tsx
@@ -0,0 +1,48 @@
+import type { MouseEvent } from 'react';
+
+import type { ProblemId, ProblemInfo } from '@/apis/problems';
+
+interface ProblemListProps {
+  problemList: ProblemInfo[];
+  pickedProblemIds: ProblemId[];
+  onSelectProblem: (problemId: ProblemId) => void;
+}
+
+const SelectableProblemList = ({
+  problemList,
+  pickedProblemIds,
+  onSelectProblem,
+}: ProblemListProps) => {
+  function handleSelectProblem(e: MouseEvent<HTMLUListElement>) {
+    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']);
+    onSelectProblem(problemId);
+  }
+
+  const getSelectButton = ({ isPicked }: { isPicked: boolean }) => {
+    if (isPicked) {
+      return <button>취소</button>;
+    }
+    return <button>선택</button>;
+  };
+
+  return (
+    <ul onClick={handleSelectProblem}>
+      {problemList.map(({ id, title }) => (
+        <li key={id} data-problem-id={id}>
+          <span>
+            {id}: {title}
+          </span>
+          {getSelectButton({ isPicked: pickedProblemIds.includes(id) })}
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export default SelectableProblemList;
diff --git a/frontend/src/pages/CreateCompetitionPage.tsx b/frontend/src/pages/CreateCompetitionPage.tsx
index 8f19d49..3de0724 100644
--- a/frontend/src/pages/CreateCompetitionPage.tsx
+++ b/frontend/src/pages/CreateCompetitionPage.tsx
@@ -1,10 +1,11 @@
 import { css } from '@style/css';
 
-import type { ChangeEvent, MouseEvent } from 'react';
+import type { ChangeEvent } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import type { ProblemId, ProblemInfo } from '@/apis/problems';
+import type { ProblemId } from '@/apis/problems';
 import { Input } from '@/components/Common';
+import SelectableProblemList from '@/components/Problem/SelectableProblemList';
 import { useCompetitionForm } from '@/hooks/competition/useCompetitionForm';
 import { useProblemList } from '@/hooks/problem/useProblemList';
 import { isNil } from '@/utils/type';
@@ -112,11 +113,11 @@ export default function CompetitionCreatePage() {
             required
           ></Input.DateTimeField>
         </Input>
-        <ProblemList
-          allProblems={problemList}
+        <SelectableProblemList
+          problemList={problemList}
           pickedProblemIds={form.problems}
           onSelectProblem={handleSelectProblem}
-        ></ProblemList>
+        ></SelectableProblemList>
         <div>선택된 문제: {[...form.problems].join(',')}</div>
       </fieldset>
       <button onClick={handleSumbitCompetition}>대회 생성</button>
@@ -124,38 +125,6 @@ export default function CompetitionCreatePage() {
   );
 }
 
-interface ProblemListProps {
-  allProblems: ProblemInfo[];
-  pickedProblemIds: ProblemId[];
-  onSelectProblem: (problemId: ProblemId) => void;
-}
-
-const ProblemList = ({ allProblems, pickedProblemIds, onSelectProblem }: ProblemListProps) => {
-  function handleSelectProblem(e: MouseEvent<HTMLUListElement>) {
-    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']);
-    onSelectProblem(problemId);
-  }
-
-  return (
-    <ul onClick={handleSelectProblem}>
-      {allProblems.map(({ id, title }) => (
-        <li key={id} data-problem-id={id}>
-          <span>
-            {id}: {title}
-          </span>
-          <button>{pickedProblemIds.includes(id) ? '취소' : '선택'}</button>
-        </li>
-      ))}
-    </ul>
-  );
-};
-
 const fieldSetStyle = css({
   display: 'flex',
   flexDirection: 'column',

From 8e0e6286696907ba5606978d8324d1f64096cb29 Mon Sep 17 00:00:00 2001
From: dev2820 <second28200@naver.com>
Date: Thu, 23 Nov 2023 11:20:01 +0900
Subject: [PATCH 24/24] =?UTF-8?q?refactor:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20=ED=95=A8=EC=88=98=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Problem/SelectableProblemList.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Problem/SelectableProblemList.tsx b/frontend/src/components/Problem/SelectableProblemList.tsx
index db7bea5..a5087cb 100644
--- a/frontend/src/components/Problem/SelectableProblemList.tsx
+++ b/frontend/src/components/Problem/SelectableProblemList.tsx
@@ -24,13 +24,6 @@ const SelectableProblemList = ({
     onSelectProblem(problemId);
   }
 
-  const getSelectButton = ({ isPicked }: { isPicked: boolean }) => {
-    if (isPicked) {
-      return <button>취소</button>;
-    }
-    return <button>선택</button>;
-  };
-
   return (
     <ul onClick={handleSelectProblem}>
       {problemList.map(({ id, title }) => (
@@ -38,7 +31,7 @@ const SelectableProblemList = ({
           <span>
             {id}: {title}
           </span>
-          {getSelectButton({ isPicked: pickedProblemIds.includes(id) })}
+          <SelectButton isPicked={pickedProblemIds.includes(id)}></SelectButton>
         </li>
       ))}
     </ul>
@@ -46,3 +39,10 @@ const SelectableProblemList = ({
 };
 
 export default SelectableProblemList;
+
+const SelectButton = ({ isPicked }: { isPicked: boolean }) => {
+  if (isPicked) {
+    return <button>취소</button>;
+  }
+  return <button>선택</button>;
+};