Commit @9194d072c4cb8c29308c7d91a4dcb0098eb64b53

임동욱 08-20

feat: 금융쇼츠 영상을 미들웨어 밖 스트리밍 라우트로 올린다

10MB 벽의 원인이 Server Action이 아니었다. **미들웨어(`proxy.ts`)를 지나는 요청은 본문이
10MiB에서 잘린다** — 30MB를 보내면 라우트에 10,485,472바이트만 도달하고, 같은 경로를 matcher에서
빼면 31,457,478바이트가 전부 도달한다(curl 측정). 잘려도 오류가 아니라 조용히 끝나서 업로드가
성공한 것처럼 실패한다. 그동안 `bodySizeLimit`을 올려도 낫지 않던 `Unexpected end of form`이
이것이었다.

그래서 영상은 Server Action(페이지 URL로 POST → 반드시 미들웨어 통과)을 쓰지 않고, matcher에서
제외한 `/contents/upload`로 브라우저가 직접 올린다. 라우트는 본문을 파싱하지 않고 백엔드로 그대로
흘려보낸다 — 여기서 버퍼링하면 같은 문제를 다시 만드는 셈이다. 토큰이 httpOnly 세션 안에만 있어
브라우저가 백엔드를 직접 부를 수 없으므로 이 중계가 필요하다.

인증은 느슨해지지 않는다. 미들웨어의 쿠키 확인은 원래 낙관적 체크이고 최종 판단은 DAL의
`verifySession()`이며, 이 라우트도 그것으로 시작한다(확인: 세션 없이 POST → 303 /login,
GET → 405로 라우트까지는 도달, 다른 경로는 그대로 307 /login).

상한은 백엔드 `multipartResolver.maxUploadSize`와 같은 100MB로 잡았다. 썸네일·게시판 첨부는
Server Action 경로 그대로라 10MB 가드를 유지한다.

확장자는 저장소 설정만으로 부족했다 — `Globals.fileUpload.Extensions`가 먼저 거른다.
`MODULE_VOD_CONTENT`가 mov·avi·mkv·webm·wmv를 허용해도 실제로 통과하는 것은 mp4뿐이라
두 목록의 교집합을 화면 accept와 사전 검증이 함께 본다(확인: 영상 칸 accept=".mp4").

Co-Authored-By: Claude Opus 5

@9194d072c4cb8c29308c7d91a4dcb0098eb64b53

24149bc

9194d07

app/(protected)/(basic)/contents/_actions.ts

--- app/(protected)/(basic)/contents/_actions.ts

+++ app/(protected)/(basic)/contents/_actions.ts


 const SAVE_FAILED_MESSAGE = '저장하지 못했습니다. 잠시 후 다시 시도해 주세요.';
 const DELETE_FAILED_MESSAGE = '삭제하지 못했습니다. 잠시 후 다시 시도해 주세요.';
 const UPLOAD_FAILED_MESSAGE = '파일을 업로드하지 못했습니다.';
+const VIDEO_UPLOADING_MESSAGE =
+  '영상을 올리는 중입니다. 업로드가 끝난 뒤 저장해 주세요.';
 const OVERSIZE_MESSAGE = `첨부파일은 ${Math.floor(MAX_ATTACHMENT_BYTES / (1024 * 1024))}MB까지 올릴 수 있습니다.`;
 
 function readString(formData: FormData, key: string): string {

 ): Promise<ContentFormState> {
   await verifySession();
 
+  if (readString(formData, 'videoUploading') === '1') {
+    return { status: 'error', message: VIDEO_UPLOADING_MESSAGE };
+  }
+
   const validation = validateShortsForm({
     schoolLevel: readString(formData, 'schoolLevel'),
     grades: readGrades(formData),

   try {
     const values = {
       ...validation.values,
-      videoFileId: await resolveFileId(
-        readFiles(formData, 'videoFile')[0] ?? null,
-        validation.values.videoFileId,
-        FILE_MODULE.vodContent
-      ),
       thumbnailFileId: await resolveFileId(
         readFiles(formData, 'thumbnailFile')[0] ?? null,
         validation.values.thumbnailFileId,

   await verifySession();
 
   const cntntsSn = readString(formData, 'cntntsSn');
+  if (readString(formData, 'videoUploading') === '1') {
+    return { status: 'error', message: VIDEO_UPLOADING_MESSAGE };
+  }
+
   const validation = validateShortsForm({
     schoolLevel: readString(formData, 'schoolLevel'),
     grades: readGrades(formData),

   try {
     const values = {
       ...validation.values,
-      videoFileId: await resolveFileId(
-        readFiles(formData, 'videoFile')[0] ?? null,
-        validation.values.videoFileId,
-        FILE_MODULE.vodContent
-      ),
       thumbnailFileId: await resolveFileId(
         readFiles(formData, 'thumbnailFile')[0] ?? null,
         validation.values.thumbnailFileId,

9194d07

app/(protected)/(basic)/contents/_components/content-video-field.tsx (added)

+++ app/(protected)/(basic)/contents/_components/content-video-field.tsx

...	...	@@ -0,0 +1,92 @@
	1	+'use client';
	2	+
	3	+import { useState } from 'react';
	4	+import { FoxFileUpload } from '@fox/core/components/fox-file-upload';
	5	+import { FoxHelperText } from '@fox/core/components/fox-helper-text';
	6	+import {
	7	+ FILE_MODULE,
	8	+ MAX_STREAM_UPLOAD_BYTES,
	9	+ allowedExtensions,
	10	+ fileModuleAccept,
	11	+ isAllowedFileExtension,
	12	+} from '@/lib/domain/file-module';
	13	+
	14	+const UPLOAD_ENDPOINT = `/contents/upload?module=${FILE_MODULE.vodContent.id}`;
	15	+
	16	+interface ContentVideoFieldProps {
	17	+ defaultFileId?: string \| null;
	18	+}
	19	+
	20	+/**
	21	+ * 영상 콘텐츠 — 고르는 즉시 스트리밍 라우트로 올리고 파일 ID만 폼에 싣는다.
	22	+ *
	23	+ * 영상은 Server Action의 multipart 한도(10MB)를 넘기 때문에 폼 제출에 파일을 실을 수 없다.
	24	+ * 업로드가 끝나기 전에 저장하면 영상 없이 저장되므로 그동안은 `videoUploading`을 실어 보내
	25	+ * Server Action이 막게 한다.
	26	+ */
	27	+export function ContentVideoField({ defaultFileId }: ContentVideoFieldProps) {
	28	+ const [fileId, setFileId] = useState(defaultFileId ?? '');
	29	+ const [isUploading, setIsUploading] = useState(false);
	30	+ const [error, setError] = useState('');
	31	+
	32	+ async function upload(picked: File[]) {
	33	+ const file = picked[0];
	34	+ if (!file) {
	35	+ return;
	36	+ }
	37	+
	38	+ setError('');
	39	+
	40	+ if (!isAllowedFileExtension(FILE_MODULE.vodContent, file.name)) {
	41	+ setError(
	42	+ `${allowedExtensions(FILE_MODULE.vodContent).join(', ')} 파일만 올릴 수 있습니다.`
	43	+ );
	44	+ return;
	45	+ }
	46	+ if (file.size > MAX_STREAM_UPLOAD_BYTES) {
	47	+ setError(
	48	+ `${Math.floor(MAX_STREAM_UPLOAD_BYTES / 1_000_000)}MB 이하만 올릴 수 있습니다.`
	49	+ );
	50	+ return;
	51	+ }
	52	+
	53	+ const body = new FormData();
	54	+ body.set('file', file);
	55	+
	56	+ setIsUploading(true);
	57	+ try {
	58	+ const response = await fetch(UPLOAD_ENDPOINT, { method: 'POST', body });
	59	+ const payload = (await response.json()) as { id?: string; message?: string };
	60	+ if (!response.ok \|\| !payload.id) {
	61	+ setError(payload.message ?? '영상을 업로드하지 못했습니다.');
	62	+ return;
	63	+ }
	64	+ setFileId(payload.id);
	65	+ } catch {
	66	+ setError('영상을 업로드하지 못했습니다.');
	67	+ } finally {
	68	+ setIsUploading(false);
	69	+ }
	70	+ }
	71	+
	72	+ return (
	73	+ <>
	74	+ <FoxFileUpload
	75	+ mode="default"
	76	+ accept={fileModuleAccept(FILE_MODULE.vodContent)}
	77	+ selectLabel="파일선택"
	78	+ placeholder="파일을 선택해 주세요."
	79	+ disabled={isUploading}
	80	+ onSelect={upload}
	81	+ onRemove={() => setFileId('')}
	82	+ />
	83	+ <input type="hidden" name="videoFileId" value={fileId} />
	84	+ {isUploading && <input type="hidden" name="videoUploading" value="1" />}
	85	+
	86	+ {isUploading && (
	87	+ <FoxHelperText type="information" message="영상을 올리는 중입니다…" />
	88	+ )}
	89	+ {error && <FoxHelperText type="danger" message={error} />}
	90	+ </>
	91	+ );
	92	+}

24149bc

9194d07

app/(protected)/(basic)/contents/shorts/_components/shorts-form.tsx

--- app/(protected)/(basic)/contents/shorts/_components/shorts-form.tsx

+++ app/(protected)/(basic)/contents/shorts/_components/shorts-form.tsx


 import { ContentFormRow } from '../../_components/content-form-row';
 import { ContentGradeField } from '../../_components/content-grade-field';
 import { ContentKeywordField } from '../../_components/content-keyword-field';
+import { ContentVideoField } from '../../_components/content-video-field';
 import { ContentVisibilityField } from '../../_components/content-visibility-field';
 import styles from '../../_components/content-form.module.scss';
 

         </ContentFormRow>
 
         <ContentFormRow label="영상 콘텐츠 ID">
-          <FoxFileUpload
-            mode="default"
-            name="videoFile"
-            accept={fileModuleAccept(FILE_MODULE.vodContent)}
-            selectLabel="파일선택"
-            placeholder="파일을 선택해 주세요."
-          />
-          <input
-            type="hidden"
-            name="videoFileId"
-            defaultValue={item?.attachmentId ?? ''}
-          />
+          <ContentVideoField defaultFileId={item?.attachmentId} />
         </ContentFormRow>
 
         <ContentFormRow label="썸네일">

9194d07

app/(protected)/(basic)/contents/upload/route.ts (added)

+++ app/(protected)/(basic)/contents/upload/route.ts

...	...	@@ -0,0 +1,68 @@
	1	+import { getSessionAccessToken, verifySession } from '@/lib/auth/dal';
	2	+import { backendFetchUpload } from '@/lib/http/backend-fetch';
	3	+import {
	4	+ MAX_STREAM_UPLOAD_BYTES,
	5	+ findFileModule,
	6	+} from '@/lib/domain/file-module';
	7	+
	8	+/**
	9	+ * 큰 파일 업로드 중계 — 브라우저 → 이 라우트 → 백엔드로 본문을 그대로 흘려보낸다.
	10	+ *
	11	+ * Server Action을 쓰지 않는 이유는 그 경로의 multipart가 10MB 부근에서 잘리기 때문이다
	12	+ * (`MAX_ATTACHMENT_BYTES` 주석). 브라우저가 백엔드를 직접 부를 수는 없다 — 토큰이 httpOnly
	13	+ * 세션 안에만 있어서 여기서 붙여 준다.
	14	+ */
	15	+
	16	+const UPLOAD_PATH = '/api/v1/common/file/upload';
	17	+
	18	+function fail(status: number, message: string): Response {
	19	+ return Response.json({ message }, { status });
	20	+}
	21	+
	22	+export async function POST(request: Request) {
	23	+ await verifySession();
	24	+
	25	+ const moduleId = new URL(request.url).searchParams.get('module') ?? '';
	26	+ const storage = findFileModule(moduleId);
	27	+ if (!storage) {
	28	+ return fail(400, '알 수 없는 저장소입니다.');
	29	+ }
	30	+
	31	+ const contentType = request.headers.get('content-type') ?? '';
	32	+ if (!contentType.startsWith('multipart/form-data')) {
	33	+ return fail(400, '요청 형식이 올바르지 않습니다.');
	34	+ }
	35	+
	36	+ const declaredLength = Number(request.headers.get('content-length') ?? '');
	37	+ if (Number.isFinite(declaredLength) && declaredLength > MAX_STREAM_UPLOAD_BYTES) {
	38	+ return fail(
	39	+ 413,
	40	+ `${Math.floor(MAX_STREAM_UPLOAD_BYTES / 1_000_000)}MB 이하만 올릴 수 있습니다.`
	41	+ );
	42	+ }
	43	+
	44	+ if (!request.body) {
	45	+ return fail(400, '파일이 없습니다.');
	46	+ }
	47	+
	48	+ const accessToken = await getSessionAccessToken();
	49	+
	50	+ const result = await backendFetchUpload<unknown>(
	51	+ `${UPLOAD_PATH}/${storage.id}`,
	52	+ {
	53	+ body: request.body,
	54	+ contentType,
	55	+ accessToken: accessToken ?? undefined,
	56	+ }
	57	+ );
	58	+
	59	+ if (!result.ok) {
	60	+ return fail(502, result.message);
	61	+ }
	62	+
	63	+ if (typeof result.data !== 'string' \|\| result.data === '') {
	64	+ return fail(502, '업로드 응답에 파일 식별자가 없습니다.');
	65	+ }
	66	+
	67	+ return Response.json({ id: result.data });
	68	+}

24149bc

9194d07

lib/domain/file-module.ts

--- lib/domain/file-module.ts

+++ lib/domain/file-module.ts


 // 기본 저장소로 폴백해 저장된다 — 백엔드에 모듈 추가를 요청하고 그 id로 교체한다.
 export const BOARD_ATTACHMENT_MODULE_ID = 'MODULE_BBS';
 
-/** 확장자 목록 → `<input accept>` 값. 화면이 백엔드 허용 목록을 직접 베끼지 않게 한다. */
-export function fileModuleAccept(module: FileModule): string {
-  return module.extensions.map((extension) => `.${extension}`).join(',');
+/**
+ * 업로드 전체에 걸린 확장자 화이트리스트 — 백엔드 `Globals.fileUpload.Extensions`.
+ * `EgovMultipartResolver`가 저장소 설정보다 **먼저** 이 목록으로 거른다.
+ *
+ * 이슈: 저장소 설정이 허용해도 여기 없으면 못 올린다. `MODULE_VOD_CONTENT`는 mov·avi·mkv·
+ *   webm·wmv를 허용하지만 실제로 통과하는 것은 mp4뿐이고, svg도 마찬가지로 막힌다.
+ *   백엔드에 이 목록 확장을 요청하면 그때 여기만 늘리면 된다.
+ */
+const GLOBAL_UPLOAD_EXTENSIONS: readonly string[] = [
+  'gif', 'jpg', 'jpeg', 'png',
+  'xls', 'xlsx', 'ppt', 'pptx', 'doc', 'docx', 'hwp', 'pdf',
+  'mp4', 'mp3', 'txt', 'html', 'htm',
+];
+
+/** 실제로 통과하는 확장자 — 저장소 설정과 전역 화이트리스트의 교집합이다. */
+export function allowedExtensions(module: FileModule): string[] {
+  return module.extensions.filter((extension) =>
+    GLOBAL_UPLOAD_EXTENSIONS.includes(extension)
+  );
 }
 
-/** 파일명의 확장자가 저장소 허용 목록에 있는지. 백엔드가 사유 없이 실패하기 전에 먼저 잡는다. */
+/** 확장자 목록 → `<input accept>` 값. 화면이 백엔드 허용 목록을 직접 베끼지 않게 한다. */
+export function fileModuleAccept(module: FileModule): string {
+  return allowedExtensions(module)
+    .map((extension) => `.${extension}`)
+    .join(',');
+}
+
+/** 파일명의 확장자가 허용 목록에 있는지. 백엔드가 사유 없이 실패하기 전에 먼저 잡는다. */
 export function isAllowedFileExtension(
   module: FileModule,
   fileName: string
 ): boolean {
   const extension = fileName.split('.').pop()?.toLowerCase() ?? '';
-  return module.extensions.includes(extension);
+  return allowedExtensions(module).includes(extension);
 }
 
-/** 첨부파일 상한. 화면(사전 차단)과 Server Action(재검증)이 같은 값을 본다. */
+export function findFileModule(id: string): FileModule | undefined {
+  return Object.values(FILE_MODULE).find((module) => module.id === id);
+}
+
+/**
+ * Server Action을 지나는 첨부파일의 상한.
+ *
+ * 이슈: 미들웨어(`proxy.ts`)를 지나는 요청은 본문이 10MiB에서 잘린다(측정치는 그 파일 주석
+ *   참조). Server Action은 페이지 URL로 POST되어 반드시 미들웨어를 지나므로 이 한도를 피할 수
+ *   없다. 더 큰 파일은 미들웨어에서 제외한 스트리밍 라우트(`/contents/upload`)로 보낸다.
+ */
 export const MAX_ATTACHMENT_BYTES = 10 * 1024 * 1024;
+
+/** 스트리밍 업로드 상한 — 백엔드 `multipartResolver`의 `maxUploadSize`(100,000,000)와 같은 값. */
+export const MAX_STREAM_UPLOAD_BYTES = 100_000_000;

24149bc

9194d07

lib/http/backend-fetch.ts

--- lib/http/backend-fetch.ts

+++ lib/http/backend-fetch.ts

...	...	@@ -20,6 +20,9 @@
20	20
21	21	const REQUEST_TIMEOUT_MS = 10_000;
22	22	export const COMMUNICATION_ERROR_CODE = -1;
	23	+
	24	+/** 큰 파일을 흘려보내는 동안 끊기지 않게 넉넉히 잡는다. */
	25	+const UPLOAD_STREAM_TIMEOUT_MS = 10 * 60_000;
23	26	const COMMUNICATION_ERROR_MESSAGE =
24	27	'서버와 통신할 수 없습니다. 잠시 후 다시 시도해 주세요.';
25	28
...	...	@@ -326,3 +329,61 @@
326	329	// 값이므로(그리고 그런 호출부는 보통 `backendFetch<null>(...)`로 T=null을 지정한다) 단언한다.
327	330	return { ok: true, data: envelope.data as T };
328	331	}
	332	+
	333	+/**
	334	+ * 스트리밍 업로드 — 브라우저가 보낸 multipart 본문을 읽지 않고 백엔드로 그대로 흘려보낸다.
	335	+ *
	336	+ * Server Action의 multipart는 10MB 부근에서 잘리므로(`MAX_ATTACHMENT_BYTES` 주석 참조) 큰 파일은
	337	+ * 이 경로로 보낸다. 여기서 본문을 버퍼링하면 같은 문제를 다시 만드는 셈이라 파싱하지 않는다.
	338	+ */
	339	+export async function backendFetchUpload<T>(
	340	+ path: string,
	341	+ init: {
	342	+ body: ReadableStream<Uint8Array>;
	343	+ /** 브라우저가 보낸 값 그대로여야 한다 — multipart 경계 문자열이 여기 들어 있다. */
	344	+ contentType: string;
	345	+ accessToken?: string;
	346	+ timeoutMs?: number;
	347	+ }
	348	+): Promise<BackendResult<T>> {
	349	+ let response: Response;
	350	+ try {
	351	+ response = await fetch(resolveUrl(path, undefined), {
	352	+ method: 'POST',
	353	+ headers: {
	354	+ 'Content-Type': init.contentType,
	355	+ ...(init.accessToken
	356	+ ? { Authorization: `Bearer ${init.accessToken}` }
	357	+ : {}),
	358	+ },
	359	+ body: init.body,
	360	+ // 스트림 본문은 본문을 다 보내기 전에 응답을 받을 수 있어야 한다(undici 요구사항).
	361	+ duplex: 'half',
	362	+ signal: AbortSignal.timeout(init.timeoutMs ?? UPLOAD_STREAM_TIMEOUT_MS),
	363	+ cache: 'no-store',
	364	+ } as RequestInit);
	365	+ } catch (error) {
	366	+ return communicationError('업로드 실패(네트워크·타임아웃)', error);
	367	+ }
	368	+
	369	+ const envelope = await readEnvelopeSafely(response);
	370	+
	371	+ if (!response.ok \|\| !envelope \|\| envelope.success !== true) {
	372	+ if (envelope && typeof envelope.code === 'number') {
	373	+ return {
	374	+ ok: false,
	375	+ code: envelope.code,
	376	+ message:
	377	+ typeof envelope.message === 'string' && envelope.message
	378	+ ? envelope.message
	379	+ : COMMUNICATION_ERROR_MESSAGE,
	380	+ };
	381	+ }
	382	+ return communicationError(
	383	+ `업로드 응답의 예상치 못한 HTTP 상태: ${response.status}`,
	384	+ undefined
	385	+ );
	386	+ }
	387	+
	388	+ return { ok: true, data: envelope.data as T };
	389	+}

24149bc

9194d07

proxy.ts

--- proxy.ts

+++ proxy.ts

...	...	@@ -55,8 +55,19 @@
55	55	* 빼면 세션 없는 방문자의 폰트 요청이 `/login`으로 리다이렉트돼 로그인 화면만 대체 서체로
56	56	* 그려진다.
57	57	*/
	58	+/**
	59	+ * `contents/upload`(큰 파일 스트리밍 업로드)는 이 목록에서 뺀다.
	60	+ *
	61	+ * 이슈: 미들웨어를 지나는 요청은 본문이 10MiB에서 잘린다(측정: 30MB 전송 → 라우트에
	62	+ * 10,485,472바이트만 도달, 미들웨어 제외 시 31,457,478바이트 전부 도달). 잘려도 오류가 아니라
	63	+ * 조용히 끝나서 업로드가 "성공한 것처럼" 실패한다. 그동안 Server Action의 한도로 보였던
	64	+ * `Unexpected end of form`도 같은 원인이다.
	65	+ *
	66	+ * 인증이 느슨해지지 않는다 — 이 파일의 쿠키 확인은 낙관적 체크일 뿐이고 최종 판단은 라우트
	67	+ * 핸들러의 `verifySession()`이 한다(파일 상단 주석과 같은 규칙).
	68	+ */
58	69	export const config = {
59	70	matcher: [
60		- '/((?!_next/static\|_next/image\|favicon\\.ico\|robots\\.txt\|.\\.(?:svg\|png\|jpg\|jpeg\|gif\|webp\|ico\|woff2\|woff\|ttf\|otf)$).)',
	71	+ '/((?!contents/upload\|_next/static\|_next/image\|favicon\\.ico\|robots\\.txt\|.\\.(?:svg\|png\|jpg\|jpeg\|gif\|webp\|ico\|woff2\|woff\|ttf\|otf)$).)',
61	72	],
62	73	};

Add a comment

Open 0
Closed 0

List

...	...	@@ -42,6 +42,8 @@
42	42	const SAVE_FAILED_MESSAGE = '저장하지 못했습니다. 잠시 후 다시 시도해 주세요.';
43	43	const DELETE_FAILED_MESSAGE = '삭제하지 못했습니다. 잠시 후 다시 시도해 주세요.';
44	44	const UPLOAD_FAILED_MESSAGE = '파일을 업로드하지 못했습니다.';
	45	+const VIDEO_UPLOADING_MESSAGE =
	46	+ '영상을 올리는 중입니다. 업로드가 끝난 뒤 저장해 주세요.';
45	47	const OVERSIZE_MESSAGE = `첨부파일은 ${Math.floor(MAX_ATTACHMENT_BYTES / (1024 * 1024))}MB까지 올릴 수 있습니다.`;
46	48
47	49	function readString(formData: FormData, key: string): string {
...	...	@@ -110,6 +112,10 @@
110	112	): Promise<ContentFormState> {
111	113	await verifySession();
112	114
	115	+ if (readString(formData, 'videoUploading') === '1') {
	116	+ return { status: 'error', message: VIDEO_UPLOADING_MESSAGE };
	117	+ }
	118	+
113	119	const validation = validateShortsForm({
114	120	schoolLevel: readString(formData, 'schoolLevel'),
115	121	grades: readGrades(formData),
...	...	@@ -128,11 +134,6 @@
128	134	try {
129	135	const values = {
130	136	...validation.values,
131		- videoFileId: await resolveFileId(
132		- readFiles(formData, 'videoFile')[0] ?? null,
133		- validation.values.videoFileId,
134		- FILE_MODULE.vodContent
135		- ),
136	137	thumbnailFileId: await resolveFileId(
137	138	readFiles(formData, 'thumbnailFile')[0] ?? null,
138	139	validation.values.thumbnailFileId,
...	...	@@ -159,6 +160,10 @@
159	160	await verifySession();
160	161
161	162	const cntntsSn = readString(formData, 'cntntsSn');
	163	+ if (readString(formData, 'videoUploading') === '1') {
	164	+ return { status: 'error', message: VIDEO_UPLOADING_MESSAGE };
	165	+ }
	166	+
162	167	const validation = validateShortsForm({
163	168	schoolLevel: readString(formData, 'schoolLevel'),
164	169	grades: readGrades(formData),
...	...	@@ -180,11 +185,6 @@
180	185	try {
181	186	const values = {
182	187	...validation.values,
183		- videoFileId: await resolveFileId(
184		- readFiles(formData, 'videoFile')[0] ?? null,
185		- validation.values.videoFileId,
186		- FILE_MODULE.vodContent
187		- ),
188	188	thumbnailFileId: await resolveFileId(
189	189	readFiles(formData, 'thumbnailFile')[0] ?? null,
190	190	validation.values.thumbnailFileId,

...	...	@@ -24,6 +24,7 @@
24	24	import { ContentFormRow } from '../../_components/content-form-row';
25	25	import { ContentGradeField } from '../../_components/content-grade-field';
26	26	import { ContentKeywordField } from '../../_components/content-keyword-field';
	27	+import { ContentVideoField } from '../../_components/content-video-field';
27	28	import { ContentVisibilityField } from '../../_components/content-visibility-field';
28	29	import styles from '../../_components/content-form.module.scss';
29	30
...	...	@@ -117,18 +118,7 @@
117	118	</ContentFormRow>
118	119
119	120	<ContentFormRow label="영상 콘텐츠 ID">
120		- <FoxFileUpload
121		- mode="default"
122		- name="videoFile"
123		- accept={fileModuleAccept(FILE_MODULE.vodContent)}
124		- selectLabel="파일선택"
125		- placeholder="파일을 선택해 주세요."
126		- />
127		- <input
128		- type="hidden"
129		- name="videoFileId"
130		- defaultValue={item?.attachmentId ?? ''}
131		- />
	121	+ <ContentVideoField defaultFileId={item?.attachmentId} />
132	122	</ContentFormRow>
133	123
134	124	<ContentFormRow label="썸네일">

...	...	@@ -70,19 +70,55 @@
70	70	// 기본 저장소로 폴백해 저장된다 — 백엔드에 모듈 추가를 요청하고 그 id로 교체한다.
71	71	export const BOARD_ATTACHMENT_MODULE_ID = 'MODULE_BBS';
72	72
73		-/** 확장자 목록 → `<input accept>` 값. 화면이 백엔드 허용 목록을 직접 베끼지 않게 한다. */
74		-export function fileModuleAccept(module: FileModule): string {
75		- return module.extensions.map((extension) => `.${extension}`).join(',');
	73	+/**
	74	+ * 업로드 전체에 걸린 확장자 화이트리스트 — 백엔드 `Globals.fileUpload.Extensions`.
	75	+ * `EgovMultipartResolver`가 저장소 설정보다 먼저 이 목록으로 거른다.
	76	+ *
	77	+ * 이슈: 저장소 설정이 허용해도 여기 없으면 못 올린다. `MODULE_VOD_CONTENT`는 mov·avi·mkv·
	78	+ * webm·wmv를 허용하지만 실제로 통과하는 것은 mp4뿐이고, svg도 마찬가지로 막힌다.
	79	+ * 백엔드에 이 목록 확장을 요청하면 그때 여기만 늘리면 된다.
	80	+ */
	81	+const GLOBAL_UPLOAD_EXTENSIONS: readonly string[] = [
	82	+ 'gif', 'jpg', 'jpeg', 'png',
	83	+ 'xls', 'xlsx', 'ppt', 'pptx', 'doc', 'docx', 'hwp', 'pdf',
	84	+ 'mp4', 'mp3', 'txt', 'html', 'htm',
	85	+];
	86	+
	87	+/** 실제로 통과하는 확장자 — 저장소 설정과 전역 화이트리스트의 교집합이다. */
	88	+export function allowedExtensions(module: FileModule): string[] {
	89	+ return module.extensions.filter((extension) =>
	90	+ GLOBAL_UPLOAD_EXTENSIONS.includes(extension)
	91	+ );
76	92	}
77	93
78		-/** 파일명의 확장자가 저장소 허용 목록에 있는지. 백엔드가 사유 없이 실패하기 전에 먼저 잡는다. */
	94	+/** 확장자 목록 → `<input accept>` 값. 화면이 백엔드 허용 목록을 직접 베끼지 않게 한다. */
	95	+export function fileModuleAccept(module: FileModule): string {
	96	+ return allowedExtensions(module)
	97	+ .map((extension) => `.${extension}`)
	98	+ .join(',');
	99	+}
	100	+
	101	+/** 파일명의 확장자가 허용 목록에 있는지. 백엔드가 사유 없이 실패하기 전에 먼저 잡는다. */
79	102	export function isAllowedFileExtension(
80	103	module: FileModule,
81	104	fileName: string
82	105	): boolean {
83	106	const extension = fileName.split('.').pop()?.toLowerCase() ?? '';
84		- return module.extensions.includes(extension);
	107	+ return allowedExtensions(module).includes(extension);
85	108	}
86	109
87		-/** 첨부파일 상한. 화면(사전 차단)과 Server Action(재검증)이 같은 값을 본다. */
	110	+export function findFileModule(id: string): FileModule \| undefined {
	111	+ return Object.values(FILE_MODULE).find((module) => module.id === id);
	112	+}
	113	+
	114	+/**
	115	+ * Server Action을 지나는 첨부파일의 상한.
	116	+ *
	117	+ * 이슈: 미들웨어(`proxy.ts`)를 지나는 요청은 본문이 10MiB에서 잘린다(측정치는 그 파일 주석
	118	+ * 참조). Server Action은 페이지 URL로 POST되어 반드시 미들웨어를 지나므로 이 한도를 피할 수
	119	+ * 없다. 더 큰 파일은 미들웨어에서 제외한 스트리밍 라우트(`/contents/upload`)로 보낸다.
	120	+ */
88	121	export const MAX_ATTACHMENT_BYTES = 10 * 1024 * 1024;
	122	+
	123	+/** 스트리밍 업로드 상한 — 백엔드 `multipartResolver`의 `maxUploadSize`(100,000,000)와 같은 값. */
	124	+export const MAX_STREAM_UPLOAD_BYTES = 100_000_000;

Delete comment