fix(infra): turn keep-alive off for caddy backend (#1437)

* fix(infra): turn keep-alive off for caddy backend

* chore: resolve type error

Caddyfile

@@ -25,6 +25,12 @@ dev.codedang.com {
 	handle /api/* {
 		reverse_proxy 127.0.0.1:4000 {
 			header_down -Access-Control-Allow-Origin *
+			# Keep-Alive timeout of Caddy must be longer than of the backend
+			# To prevent error, let's just turn keepalive off (performance is not a big deal)
+			# https://stackoverflow.com/questions/66911457/my-nodejs-app-show-502-error-for-no-reason
+			transport http {
+				keepalive off
+			}
 		}
 
 		# 캐시 설정
@@ -33,19 +39,25 @@ dev.codedang.com {
 			defer
 		}
 
-		# import <pattern> [<args...>]
-		# cors 허용할 도메인 설정
+		# cors 허용할 도메인
 		import cors http://localhost:5173 # frontend server (Vue)
 		import cors http://localhost:5525 # frontend server (Next.js)
-		import cors http://localhost:5555 # api docs server
 	}
 
 	handle /logs/* {
 		reverse_proxy 127.0.0.1:9999
 	}
 
 	handle /graphql {
-		reverse_proxy 127.0.0.1:3000
+		reverse_proxy 127.0.0.1:3000 {
+			transport http {
+				keepalive off
+			}
+		}
+
+		# cors 허용할 도메인
+		import cors http://localhost:5173 # frontend server (Vue)
+		import cors http://localhost:5525 # frontend server (Next.js)
 	}
 
 	handle {

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

@@ -201,12 +201,12 @@ export default function Page({ params }: { params: { id: string } }) {
   const fetchedTags =
     problemData?.getProblem.tag.map(({ tag }) => +tag.id) ?? []
 
-  const fetchedTemplateLanguage =
-    problemData?.getProblem.template?.map(
-      (template: string) => JSON.parse(template)[0]?.language
-    ) ?? []
-
   useEffect(() => {
+    const fetchedTemplateLanguage =
+      problemData?.getProblem.template?.map(
+        (template: string) => JSON.parse(template)[0]?.language
+      ) ?? []
+
     setLanguages(
       problemData?.getProblem.languages?.map((language: Language) => ({
         language,