feat(fe): implement contest code editor page (#1423)

feat(fe): contest code editor page

frontend-client/app/(main)/contest/[id]/@tabs/announcement/page.tsx → frontend-client/app/(main)/contest/[contestId]/@tabs/announcement/page.tsx

@@ -4,17 +4,17 @@ import type { ContestAnnouncement } from '@/types/type'
 import { columns } from './_components/Columns'
 
 interface ContestAnnouncementProps {
-  params: { id: string }
+  params: { contestId: string }
 }
 
 export default async function ContestAnnouncement({
   params
 }: ContestAnnouncementProps) {
-  const { id } = params
+  const { contestId } = params
   const contestAnnouncements: ContestAnnouncement[] = await fetcher
     .get('announcement', {
       searchParams: {
-        contestId: id
+        contestId
       }
     })
     .json()
@@ -28,7 +28,6 @@ export default async function ContestAnnouncement({
         content: 'w-[70%]',
         updateTime: 'w-[18%]'
       }}
-      name=""
     />
   )
 }

frontend-client/app/(main)/contest/[id]/@tabs/page.tsx → frontend-client/app/(main)/contest/[contestId]/@tabs/page.tsx

@@ -10,14 +10,14 @@ interface ContestTop {
 
 interface ContestTopProps {
   params: {
-    id: string
+    contestId: string
   }
 }
 
 export default async function ContestTop({ params }: ContestTopProps) {
   const session = await auth()
-  const { id } = params
-  const data: ContestTop = await fetcher.get(`contest/${id}`).json()
+  const { contestId } = params
+  const data: ContestTop = await fetcher.get(`contest/${contestId}`).json()
   const startTime = new Date(data.startTime)
   const currentTime = new Date()
 
@@ -29,7 +29,7 @@ export default async function ContestTop({ params }: ContestTopProps) {
       />
       {session && currentTime < startTime && (
         <div className="mt-10 flex justify-center">
-          <ParticipateButton id={id} />
+          <ParticipateButton id={contestId} />
         </div>
       )}
     </>

frontend-client/app/(main)/contest/[id]/@tabs/problem/page.tsx → frontend-client/app/(main)/contest/[contestId]/@tabs/problem/page.tsx

@@ -4,24 +4,20 @@ import type { ContestProblem } from '@/types/type'
 import { columns } from './_components/Columns'
 
 interface ContestProblemProps {
-  params: { id: string }
+  params: { contestId: string }
 }
 
 export default async function ContestProblem({ params }: ContestProblemProps) {
-  const { id } = params
+  const { contestId } = params
   const { problems }: { problems: ContestProblem[] } = await fetcher
     .get('problem', {
       searchParams: {
         take: 10,
-        contestId: id
+        contestId
       }
     })
     .json()
 
-  problems.forEach((problem) => {
-    problem.id = problem.problemId
-  })
-
   return (
     <DataTable
       data={problems}
@@ -33,7 +29,7 @@ export default async function ContestProblem({ params }: ContestProblemProps) {
         submissionCount: 'w-[14%]',
         acceptedRate: 'w-[14%]'
       }}
-      name="problem"
+      linked
     />
   )
 }

frontend-client/app/(main)/contest/[id]/layout.tsx → frontend-client/app/(main)/contest/[contestId]/layout.tsx

@@ -8,7 +8,7 @@ import ContestTabs from '../_components/ContestTabs'
 
 interface ContestDetailProps {
   params: {
-    id: string
+    contestId: string
   }
 }
 
@@ -24,8 +24,8 @@ export default async function Layout({
   params: ContestDetailProps['params']
   tabs: React.ReactNode
 }) {
-  const { id } = params
-  const res = await fetcher.get(`contest/${id}`)
+  const { contestId } = params
+  const res = await fetcher.get(`contest/${contestId}`)
   if (res.ok) {
     const data: Contest = await res.json()
     const currentTime = new Date()
@@ -74,7 +74,7 @@ export default async function Layout({
             </div>
           )}
         </header>
-        <ContestTabs contestId={id} />
+        <ContestTabs contestId={contestId} />
         {tabs}
       </article>
     )

frontend-client/app/(main)/contest/[id]/page.tsx → frontend-client/app/(main)/contest/[contestId]/page.tsx

@@ -4,14 +4,14 @@ import { sanitize } from 'isomorphic-dompurify'
 
 interface ContestDetailProps {
   params: {
-    id: string
+    contestId: string
   }
 }
 
 export default async function ContestDetail({ params }: ContestDetailProps) {
-  const { id } = params
+  const { contestId } = params
   const { title, startTime, endTime, description } = await fetch(
-    baseUrl + `/contest/${id}`
+    baseUrl + `/contest/${contestId}`
   ).then((res) => res.json())
   return (
     <article>

frontend-client/app/(main)/contest/_components/FinishedContestTable.tsx

@@ -26,7 +26,7 @@ export default async function FinishedContestTable() {
           participants: 'w-1/5 md:w-1/6',
           status: 'w-1/4 md:w-1/6'
         }}
-        name="contest"
+        linked
       />
     </>
   )

frontend-client/app/(main)/notice/_components/NoticeTable.tsx

@@ -42,7 +42,7 @@ export default async function NoticeTable({ search }: Props) {
         createdBy: 'w-1/4 md:w-1/6',
         createTime: 'w-1/4 md:w-1/6'
       }}
-      name="notice"
+      linked
     />
   )
 }

frontend-client/app/(main)/problem/_components/ProblemTable.tsx

@@ -30,7 +30,7 @@ export default async function ProblemTable({ search, order }: Props) {
         acceptedRate: 'w-2/12',
         info: 'w-1/12'
       }}
-      name="problem"
+      linked
     />
   )
 }

frontend-client/app/contest/[contestId]/problem/[problemId]/layout.tsx

@@ -0,0 +1,17 @@
+import EditorLayout from '@/components/EditorLayout'
+
+export default async function layout({
+  params,
+  children
+}: {
+  params: { problemId: string; contestId: string }
+  children: React.ReactNode
+}) {
+  const { problemId, contestId } = params
+
+  return (
+    <EditorLayout problemId={problemId} contestId={contestId}>
+      {children}
+    </EditorLayout>
+  )
+}

frontend-client/app/contest/[contestId]/problem/[problemId]/page.tsx

@@ -0,0 +1,14 @@
+import { EditorDescription } from '@/components/EditorDescription'
+import { fetcher } from '@/lib/utils'
+import type { ProblemDetail } from '@/types/type'
+
+export default async function DescriptionPage({
+  params
+}: {
+  params: { problemId: number }
+}) {
+  const { problemId } = params
+  const problem: ProblemDetail = await fetcher(`problem/${problemId}`).json()
+
+  return <EditorDescription problem={problem} />
+}