fix(fe): hand over only changed field in problem edit

apps/frontend/app/admin/problem/[id]/edit/page.tsx

@@ -6,7 +6,12 @@ import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
 import { UPDATE_PROBLEM } from '@/graphql/problem/mutations'
 import { GET_PROBLEM } from '@/graphql/problem/queries'
 import { useMutation, useQuery } from '@apollo/client'
-import type { Template, Testcase, UpdateProblemInput } from '@generated/graphql'
+import type {
+  GetProblemQuery,
+  Template,
+  Testcase,
+  UpdateProblemInput
+} from '@generated/graphql'
 import { zodResolver } from '@hookform/resolvers/zod'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
@@ -38,17 +43,18 @@ export default function Page({ params }: { params: { id: string } }) {
 
   const methods = useForm<UpdateProblemInput>({
     resolver: zodResolver(editSchema),
-    defaultValues: {
-      template: []
-    }
+    defaultValues: { template: [] }
   })
 
   const { handleSubmit, setValue, getValues } = methods
 
+  const [blockEdit, setBlockEdit] = useState<boolean>(false)
   const [showHint, setShowHint] = useState<boolean>(false)
   const [showSource, setShowSource] = useState<boolean>(false)
   const [isDialogOpen, setDialogOpen] = useState<boolean>(false)
   const [dialogDescription, setDialogDescription] = useState<string>('')
+  const [initialData, setInitialData] =
+    useState<GetProblemQuery['getProblem']>()
 
   useQuery(GET_PROBLEM, {
     variables: {
@@ -57,6 +63,11 @@ export default function Page({ params }: { params: { id: string } }) {
     },
     onCompleted: (problemData) => {
       const data = problemData.getProblem
+
+      if (data.submissionCount > 0) setBlockEdit(true)
+
+      setInitialData(data)
+
       setValue('id', +id)
       setValue('title', data.title)
       setValue('isVisible', data.isVisible)
@@ -104,9 +115,57 @@ export default function Page({ params }: { params: { id: string } }) {
     }
   })
 
+  // TODO: refactor after discussing schema ProblemWithIsVisible and UpdateProblemInput
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const getChangedFields = (initial: any, current: any) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const changedFields: any = {}
+
+    // Define a map of fields that need to be renamed for comparison
+    const fieldMapping: Record<string, string> = {
+      testcases: 'testcase'
+    }
+
+    for (const key in current) {
+      const mappedKey = fieldMapping[key] || key
+      if (JSON.stringify(current[key]) !== JSON.stringify(initial[mappedKey])) {
+        changedFields[key] = current[key]
+      }
+    }
+    return changedFields
+  }
+
   const [updateProblem, { error }] = useMutation(UPDATE_PROBLEM)
 
   const onSubmit = async (input: UpdateProblemInput) => {
+    // TODO: need to check tags and templates from input
+    const currentValues = getValues()
+    const changedFields = getChangedFields(initialData, currentValues)
+
+    // remove id and __typename from testcases
+    if (changedFields.testcases) {
+      changedFields.testcases = changedFields.testcases.map(
+        ({
+          id,
+          __typename,
+          ...rest
+        }: {
+          id: number
+          __typename: string
+          input: string
+          output: string
+          isHidden: boolean
+          scoreWeight: number
+        }) => {
+          void id
+          void __typename
+          return rest
+        }
+      )
+    }
+
+    changedFields['id'] = Number(id)
+
     const testcases = getValues('testcases') as Testcase[]
     if (validateScoreWeight(testcases) === false) {
       setDialogDescription(
@@ -127,7 +186,7 @@ export default function Page({ params }: { params: { id: string } }) {
     await updateProblem({
       variables: {
         groupId: 1,
-        input
+        input: changedFields
       }
     })
     if (error) {
@@ -193,10 +252,10 @@ export default function Page({ params }: { params: { id: string } }) {
               </div>
             </div>
 
-            {getValues('testcases') && <TestcaseField />}
+            {getValues('testcases') && <TestcaseField blockEdit={blockEdit} />}
 
             <FormSection title="Limit">
-              <LimitForm />
+              <LimitForm blockEdit={blockEdit} />
             </FormSection>
             <TemplateField />
             <SwitchField

apps/frontend/app/admin/problem/_components/ExampleTextarea.tsx

@@ -10,13 +10,15 @@ interface ExampleTextareaProps {
   // TODO: any를 다른 type으로 대체
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   register: any
+  blockEdit?: boolean
 }
 export default function ExampleTextarea({
   onRemove,
   inputName,
   outputName,
   className,
-  register
+  register,
+  blockEdit
 }: ExampleTextareaProps) {
   return (
     <div
@@ -30,11 +32,13 @@ export default function ExampleTextarea({
         onClick={() => onRemove()}
       />
       <Textarea
+        disabled={blockEdit}
         placeholder="Input"
         className="resize-none border-0 px-4 py-0 shadow-none focus-visible:ring-0"
         {...register(inputName)}
       />
       <Textarea
+        disabled={blockEdit}
         placeholder="Output"
         className="min-h-[120px] rounded-none border-l border-transparent border-l-gray-200 px-4 py-0 shadow-none focus-visible:ring-0"
         {...register(outputName)}

apps/frontend/app/admin/problem/_components/LimitForm.tsx

@@ -4,7 +4,7 @@ import { useFormContext } from 'react-hook-form'
 import ErrorMessage from '../../_components/ErrorMessage'
 import { inputStyle } from '../../utils'
 
-export default function LimitForm() {
+export default function LimitForm({ blockEdit }: { blockEdit?: boolean }) {
   const {
     formState: { errors },
     register
@@ -15,6 +15,7 @@ export default function LimitForm() {
       <div className="flex flex-col gap-1">
         <div className="flex items-center gap-2">
           <Input
+            disabled={blockEdit}
             id="time"
             type="number"
             min={0}
@@ -32,6 +33,7 @@ export default function LimitForm() {
       <div className="flex flex-col gap-1">
         <div className="flex items-center gap-2">
           <Input
+            disabled={blockEdit}
             id="memory"
             type="number"
             min={0}

apps/frontend/app/admin/problem/_components/TestcaseField.tsx

@@ -18,7 +18,7 @@ import AddBadge from './AddBadge'
 import { CautionDialog } from './CautionDialog'
 import TestcaseItem from './TestcaseItem'
 
-export default function TestcaseField() {
+export default function TestcaseField({ blockEdit }: { blockEdit?: boolean }) {
   const {
     formState: { errors },
     getValues,
@@ -119,6 +119,7 @@ export default function TestcaseField() {
           (item, index) =>
             !item.isHidden && (
               <TestcaseItem
+                blockEdit={blockEdit}
                 key={index}
                 index={index}
                 itemError={itemErrors}
@@ -134,6 +135,7 @@ export default function TestcaseField() {
           (item, index) =>
             item.isHidden && (
               <TestcaseItem
+                blockEdit={blockEdit}
                 key={index}
                 index={index}
                 itemError={itemErrors}

apps/frontend/app/admin/problem/_components/TestcaseItem.tsx

@@ -9,12 +9,14 @@ import { isInvalid } from '../_libs/utils'
 import ExampleTextarea from './ExampleTextarea'
 
 interface TestcaseItemProps {
+  blockEdit?: boolean
   index: number
   itemError: FieldErrorsImpl | undefined
   onRemove: () => void
 }
 
 export default function TestcaseItem({
+  blockEdit,
   index,
   itemError,
   onRemove
@@ -77,6 +79,7 @@ export default function TestcaseItem({
 
         <div>
           <input
+            disabled={blockEdit}
             {...register(`testcases.${index}.scoreWeight`, {
               setValueAs: (value) => (isInvalid(value) ? null : Number(value))
             })}
@@ -94,6 +97,7 @@ export default function TestcaseItem({
         </div>
       </div>
       <ExampleTextarea
+        blockEdit={blockEdit}
         onRemove={onRemove}
         inputName={`testcases.${index}.input`}
         outputName={`testcases.${index}.output`}

apps/frontend/app/admin/problem/page.tsx

@@ -133,7 +133,7 @@ export default function Page({
             enableFilter={true}
             enableDelete={true}
             enablePagination={true}
-            defaultSortColumn={{ id: 'createTime', desc: true }}
+            defaultSortColumn={{ id: 'updateTime', desc: true }}
           />
         )}
       </div>

apps/frontend/graphql/problem/queries.ts

@@ -16,6 +16,7 @@ const GET_PROBLEM = gql(`
       description
       inputDescription
       outputDescription
+      submissionCount
       testcase {
         id
         input