feat(fe): add hint section and darker background (#1279)

feat(fe): add Hint section and darker background

frontend-client/app/problem/[id]/_components/EditorHeader.tsx

@@ -13,10 +13,13 @@ interface ProblemEditorProps {
 
 export default function Editor({ data, langValue }: ProblemEditorProps) {
   return (
-    <div className="flex shrink-0 items-center justify-between border-b border-b-slate-600 px-5">
+    <div className="flex shrink-0 items-center justify-between border-b border-b-slate-700 bg-slate-800 px-5">
       <div className="cursor-pointer text-lg font-bold">Editor</div>
       <div className="flex items-center gap-3">
-        <Button size="icon" className="size-7 shrink-0 rounded-md bg-slate-500">
+        <Button
+          size="icon"
+          className="size-7 shrink-0 rounded-md bg-slate-600 hover:bg-slate-700"
+        >
           <TbReload className="size-4" />
         </Button>
         <Button

frontend-client/app/problem/[id]/_components/MainResizablePanel.tsx

@@ -33,13 +33,13 @@ export default function MainResizablePanel({
 }) {
   const editorTheme = createTheme({
     settings: {
-      background: '#1E293B',
+      background: '#0f172a',
       foreground: '#9cdcfe',
       caret: '#c6c6c6',
       selection: '#6199ff2f',
       selectionMatch: '#72a1ff59',
       lineHighlight: '#ffffff0f',
-      gutterBackground: '#1E293B',
+      gutterBackground: '#0f172a',
       gutterActiveForeground: '#fff'
     },
     styles: [
@@ -82,7 +82,7 @@ export default function MainResizablePanel({
   return (
     <ResizablePanelGroup
       direction="horizontal"
-      className="border border-slate-600"
+      className="border border-slate-700"
     >
       <ResizablePanel
         defaultSize={35}
@@ -95,9 +95,9 @@ export default function MainResizablePanel({
         </div>
       </ResizablePanel>
 
-      <ResizableHandle withHandle />
+      <ResizableHandle withHandle className="border border-slate-700" />
 
-      <ResizablePanel defaultSize={65} className="shrink-0 bg-slate-800">
+      <ResizablePanel defaultSize={65} className="bg-slate-900">
         <div className="grid-rows-editor grid h-full">
           <EditorHeader data={data} langValue={langValue} />
           <div className="h-full overflow-auto">

frontend-client/app/problem/[id]/_components/SelectScrollable.tsx

@@ -27,12 +27,12 @@ export default function SelectScrollable({
       }}
       value={language}
     >
-      <SelectTrigger className="h-7 w-fit shrink-0 rounded-md border-none bg-slate-500 px-2 focus:outline-none focus:ring-0 focus:ring-offset-0">
+      <SelectTrigger className="h-7 w-fit shrink-0 rounded-md border-none bg-slate-600 px-2 hover:bg-slate-700 focus:outline-none focus:ring-0 focus:ring-offset-0">
         <p className="pr-1">
           <SelectValue />
         </p>
       </SelectTrigger>
-      <SelectContent className="bg-slate-800">
+      <SelectContent className="border-slate-700 bg-slate-800">
         <SelectGroup className="text-white">
           {languages.map((language) => (
             <SelectItem

frontend-client/app/problem/[id]/_components/Tab.tsx

@@ -10,15 +10,15 @@ interface Props {
 export default function Tab({ id }: Props) {
   const pathname = usePathname()
   return (
-    <div className="flex h-full items-center border-b border-slate-600 px-6">
+    <div className="flex h-full items-center border-b border-slate-700 bg-slate-800 px-6">
       <Tabs
         value={
           pathname.startsWith(`/problem/${id}/submission`)
             ? 'Submission'
             : 'Description'
         }
       >
-        <TabsList className="bg-slate-800">
+        <TabsList className="bg-slate-900">
           <Link href={`/problem/${id}`}>
             <TabsTrigger
               value="Description"

frontend-client/app/problem/[id]/layout.tsx

@@ -1,6 +1,9 @@
-import HeaderEditor from '@/app/problem/[id]/_components/HeaderEditor'
+import icon from '@/app/favicon.ico'
 import { fetcher } from '@/lib/utils'
 import type { ProblemDetail } from '@/types/type'
+import Image from 'next/image'
+import Link from 'next/link'
+import { IoIosArrowForward } from 'react-icons/io'
 import MainResizablePanel from './_components/MainResizablePanel'
 
 export default async function layout({
@@ -14,8 +17,19 @@ export default async function layout({
   const data: ProblemDetail = await fetcher(`problem/${id}`).json()
 
   return (
-    <div className="grid-rows-editor grid h-dvh w-full min-w-[1000px] overflow-x-auto bg-slate-700 text-white">
-      <HeaderEditor id={data.id} title={data.title} />
+    <div className="grid-rows-editor grid h-dvh w-full min-w-[1000px] overflow-x-auto bg-slate-800 text-white">
+      <header className="flex justify-between bg-slate-900 px-4">
+        <div className="flex items-center justify-center gap-6 font-bold text-slate-500">
+          <Link href="/">
+            <Image src={icon} alt="코드당" width={33} />
+          </Link>
+          <div className="flex items-center gap-1">
+            <Link href="/problem">Problem</Link>
+            <IoIosArrowForward className="size-6" />
+            <h1 className="text-lg font-bold text-white">{`#${id}. ${data.title}`}</h1>
+          </div>
+        </div>
+      </header>
       <MainResizablePanel data={data}>{children}</MainResizablePanel>
     </div>
   )

frontend-client/app/problem/[id]/page.tsx

@@ -8,7 +8,7 @@ import { Badge } from '@/components/ui/badge'
 import { fetcher } from '@/lib/utils'
 import type { ProblemDetail } from '@/types/type'
 import { sanitize } from 'isomorphic-dompurify'
-import { LucideFileText, Tag } from 'lucide-react'
+import { Lightbulb, Tag } from 'lucide-react'
 
 export default async function DescriptionPage({
   params
@@ -19,62 +19,40 @@ export default async function DescriptionPage({
   const data: ProblemDetail = await fetcher(`problem/${id}`).json()
 
   return (
-    <div className="flex h-full flex-col gap-4 overflow-auto p-6 text-lg">
-      <h1 className="font-bold">{`#${data.id}. ${data.title}`}</h1>
-      <div
-        className="text-sm text-slate-300"
-        dangerouslySetInnerHTML={{ __html: sanitize(data.description) }}
-      />
+    <div className="flex h-full flex-col gap-8 overflow-auto p-6 text-lg">
       <div>
-        <h2 className="mb-3 ">Input</h2>
+        <h1 className="mb-3 text-xl font-bold">{`#${data.id}. ${data.title}`}</h1>
         <div
-          className="text-sm text-slate-300"
+          className="prose prose-invert max-w-full text-sm leading-relaxed text-slate-300"
+          dangerouslySetInnerHTML={{ __html: sanitize(data.description) }}
+        />
+      </div>
+      <div>
+        <h2 className="mb-3 font-bold">Input</h2>
+        <div
+          className="prose prose-invert max-w-full text-sm leading-relaxed text-slate-300"
           dangerouslySetInnerHTML={{
             __html: sanitize(data.inputDescription)
           }}
         />
       </div>
       <div>
-        <h2 className="mb-3 ">Output</h2>
+        <h2 className="mb-3 font-bold">Output</h2>
         <div
-          className="text-sm text-slate-300"
+          className="prose prose-invert max-w-full text-sm leading-relaxed text-slate-300"
           dangerouslySetInnerHTML={{
             __html: sanitize(data.outputDescription)
           }}
         />
       </div>
-      <div>
-        <div className="flex justify-between">
-          <h2 className="mb-2 mt-3 ">Sample Input 1</h2>
-          <div className="flex items-center justify-center">
-            {/* 임시 sample input */}
-            {/* <input value={text} onChange={(e) => setText(e.target.value)} /> */}
-          </div>
-        </div>
-        <div className="h-24 w-full rounded-md bg-slate-800 p-2 text-sm">
-          {/* 임시 Sample description -> use inputExamples later*/}
-          <p className="text-slate-300">A description of the Sample Input 1.</p>
-        </div>
-      </div>
-      <div>
-        <div className="flex justify-between">
-          <h2 className="mb-2 mt-3 ">Sample Output 1</h2>
-        </div>
-        <div className="h-24 w-full rounded-md bg-slate-800 p-2 text-sm">
-          {/* 임시 Sample description -> use outputExamples later*/}
-          <p className="text-slate-300">
-            A description of the Sample Output 1.
-          </p>
-        </div>
-      </div>
       <div className="flex items-center gap-3 text-base">
         <h2>Time Limit:</h2>
         <p className="text-slate-300">{data.timeLimit} ms</p>
         <h2>Memory Limit:</h2>
         <p className="text-slate-300">{data.memoryLimit} ms</p>
       </div>
-      <Accordion type="single" collapsible>
-        <AccordionItem value="item-1" className="border-b-slate-500">
+      <Accordion type="multiple">
+        <AccordionItem value="item-1" className="border-b-slate-700">
           <AccordionTrigger className="hover:no-underline">
             <div className="flex items-center gap-2 text-base">
               <Tag size={16} />
@@ -83,20 +61,39 @@ export default async function DescriptionPage({
           </AccordionTrigger>
           <AccordionContent>
             {data.tags.map((tag) => (
-              <Badge key={tag.id} className="bg-slate-300 text-slate-800">
+              <Badge
+                key={tag.id}
+                className="bg-slate-300 text-slate-800 hover:bg-slate-300"
+              >
                 {tag.name}
               </Badge>
             ))}
           </AccordionContent>
         </AccordionItem>
+        {data.hint && (
+          <AccordionItem value="item-2" className="border-b-slate-700">
+            <AccordionTrigger className="hover:no-underline">
+              <div className="flex items-center gap-2 text-base">
+                <Lightbulb size={16} />
+                Hint
+              </div>
+            </AccordionTrigger>
+            <AccordionContent>
+              <div
+                dangerouslySetInnerHTML={{ __html: sanitize(data.hint) }}
+                className="prose prose-invert max-w-full text-sm leading-relaxed text-slate-300"
+              />
+            </AccordionContent>
+          </AccordionItem>
+        )}
       </Accordion>
-      <div className="mt-8 flex gap-3">
-        {/* 임시 이모티콘 이용 -> 해당 이모티콘 찾는중 */}
+      {/* TODO: Add Compile Version Documentation 
+       <div className="mt-8 flex gap-3">
         <LucideFileText className="size-7" />
         <p className="text-xs">
           Compile Version <br /> Documentation
         </p>
-      </div>
+      </div> */}
     </div>
   )
 }

frontend-client/types/type.ts

@@ -79,54 +79,3 @@ export interface ProblemDetail {
   }[]
   hint: string
 }
-
-export interface SubmissionItem {
-  id: number
-  user: {
-    username: string
-  }
-  createTime: string
-  language: string
-  result: string
-  codeSize: number
-}
-
-export interface Submission {
-  id: number
-  userId: number
-  problemId: number
-  contestId: number | null
-  workbookId: number | null
-  code: { id: number; text: string; lockded: boolean }[]
-  language: string
-  result: string
-  createTime: string
-  updateTime: string
-}
-
-export interface SubmissionDetail {
-  problemId: number
-  username: string
-  code: string
-  language: string
-  createTime: string
-  result: string
-  testcaseResult: {
-    id: number
-    submissionId: number
-    problemTestCaseId: number
-    result: string
-    cpuTime: string
-    memoryUsage: number
-    createTime: string
-    updateTime: string
-  }[]
-}
-
-export interface ContestClarification {
-  id: number
-  content: string
-  problemId: number
-  createTime: string
-  updateTime: string
-}