feat(fe): make container and file upload component for TCManage page

apps/frontend/app/(client)/(main)/(create)/problem/create/_components/FileUpload.tsx

@@ -0,0 +1,76 @@
+'use client'
+
+import { cn } from '@/libs/utils'
+import InfoIconGray from '@/public/icons/info-icon-gray.svg'
+import { useRef, useState } from 'react'
+
+interface FileUploadProps {
+  primaryText: string
+  secondaryText: string
+  multiple?: boolean
+  onFilesChange: (files: File[]) => void
+  className?: string
+}
+
+export function FileUpload({
+  primaryText,
+  secondaryText,
+  multiple = false,
+  onFilesChange,
+  className
+}: FileUploadProps) {
+  const [files, setFiles] = useState<File[]>([])
+  const inputRef = useRef<HTMLInputElement | null>(null)
+
+  const handleFiles = (incoming: FileList | null) => {
+    if (!incoming) {
+      return
+    }
+    const next = Array.from(incoming)
+    setFiles(next)
+    onFilesChange(next)
+  }
+
+  return (
+    <div
+      onClick={() => inputRef.current?.click()}
+      onDragOver={(e) => e.preventDefault()}
+      onDrop={(e) => {
+        e.preventDefault()
+        handleFiles(e.dataTransfer.files)
+      }}
+      className={cn(
+        'border-color-cool-neutral-80 bg-color-neutral-99 flex cursor-pointer flex-col items-center justify-center rounded-[12px] py-20',
+        className
+      )}
+    >
+      <input
+        ref={inputRef}
+        type="file"
+        multiple={multiple}
+        className="hidden"
+        onChange={(e) => handleFiles(e.target.files)}
+      />
+      {files.length === 0 ? (
+        <div className="flex flex-col items-center gap-[10px]">
+          <InfoIconGray className="mb-2" height={24} width={24} />
+          <div className="text-body1_m_16 text-color-cool-neutral-50 whitespace-pre-wrap text-center">
+            <p>{primaryText}</p>
+            <p>{secondaryText}</p>
+          </div>
+        </div>
+      ) : (
+        <ul className="flex flex-col items-center gap-1">
+          {files.map((f) => (
+            <li
+              key={f.name}
+              className="text-sub4_sb_14 text-color-cool-neutral-30"
+            >
+              {f.name}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}

apps/frontend/app/(client)/(main)/(create)/problem/create/_components/ProblemCreateContainer.tsx

@@ -5,24 +5,19 @@ import { Button } from '@/components/shadcn/button'
 import { cn } from '@/libs/utils'
 import ArrowRightNarrowIcon from '@/public/icons/arrow-right-narrow.svg'
 import CheckCircleIcon from '@/public/icons/check-circle.svg'
-import PenIcon from '@/public/icons/pen.svg'
 import { ErrorBoundary, Suspense } from '@suspensive/react'
 import { useSuspenseQuery } from '@tanstack/react-query'
 import { useState } from 'react'
 import { AiFillFile } from 'react-icons/ai'
 import { BsPeopleFill } from 'react-icons/bs'
 import { FaBook } from 'react-icons/fa'
-import { FaSquareCheck } from 'react-icons/fa6'
-import { PiMagnifyingGlassFill, PiWrenchFill } from 'react-icons/pi'
-import { CheckerPage } from './CheckerPage'
+import { PiWrenchFill } from 'react-icons/pi'
 import { CollaborationPage } from './CollaborationPage'
-import { GeneratorPage } from './GeneratorPage'
 import { ProblemCreateContentSkeleton } from './ProblemCreateSkeletons'
-import { SolutionPage } from './SolutionPage'
 import { StatementPage } from './StatementPage'
+import { TcManagePage } from './TcManagePage'
 import { TestsPage } from './TestsPage'
 import { UploadButton } from './UploadButton'
-import { ValidatorPage } from './ValidatorPage'
 
 export function ProblemCreateContainer() {
   // 스켈레톤 확인을 위한 더미코드
@@ -53,33 +48,12 @@ export function ProblemCreateContainer() {
       subText: '입력 및 정답 (Input & Output)',
       Component: TestsPage
     },
-    {
-      Icon: PenIcon,
-      label: 'Solution',
-      text: '솔루션',
-      subText: '솔루션 업로드 및 테스트 검증',
-      Component: SolutionPage
-    },
     {
       Icon: PiWrenchFill,
-      label: 'Generator',
-      text: '테스트 생성',
-      subText: '테스트 입력 생성',
-      Component: GeneratorPage
-    },
-    {
-      Icon: PiMagnifyingGlassFill,
-      label: 'Validator',
-      text: '입력 검증',
-      subText: '입력 및 검증',
-      Component: ValidatorPage
-    },
-    {
-      Icon: FaSquareCheck,
-      label: 'Checker',
-      text: '특수 채점',
-      subText: '특수 채점 기능',
-      Component: CheckerPage
+      label: 'TcManage',
+      text: '테스트 케이스 관리',
+      subText: '생성 및 입력 검증, 특수 채점',
+      Component: TcManagePage
     },
     {
       Icon: BsPeopleFill,
@@ -179,7 +153,7 @@ export function ProblemCreateContainer() {
                       height={15}
                       className={cn({
                         'scale-x-[-1]':
-                          label === 'Generator' || label === 'Collaboration',
+                          label === 'TcManage' || label === 'Collaboration',
                         'text-color-cool-neutral-40': curTab,
                         'text-color-cool-neutral-70': !curTab
                       })}