dpot-frontend/app/(main)/(forum)/comment/_component/EditForm.tsx

'use client';

import '../style.scss';
import { useState, useRef, useEffect, useCallback } from 'react';
import useErrorAlert from '@/hooks/useErrorAlert';
import Editor, { type Handle as EditorHandle } from '@/app/(main)/(forum)/post/_component/Editor';
import { BoardResponse } from '@/types/response/forum/board';
import { PostResponse } from '@/types/response/forum/post';
import { CommentUpdateRequest } from '@/types/request/forum/comment';
import { CommentUpdateResponse } from '@/types/response/forum/comment';
import { type CommentItem } from '@/types/forum/comment';
import EmojiPicker from '@/app/component/EmojiPicker';
import { CommentConst } from '@/constants/forum';
import { fetchApi } from '@/lib/utils/client';
import useAuth from '@/hooks/useAuth';
import Loading from '@/app/component/Loading';

type Props = {
	_board: BoardResponse,
	_post: PostResponse,
	_comment: CommentItem,
	onSuccess: (comment?: CommentItem) => void;
	onCancel?: () => void;
};

export default function EditForm({ _board, _post, _comment, onSuccess, onCancel }: Props)
{
	const { loginCheck } = useAuth();
	const boardMeta = _board.boardMeta;

	const { setError } = useErrorAlert();
	const [loading, setLoading] = useState<boolean>(false);

	const [form, setForm] = useState<CommentUpdateRequest>({
		postID: _post.id,
		commentID: _comment.id,
		mention: _comment.mention?.rawHandle ?? '',
		content: _comment.content,
		isSecret: _comment.isSecret
	});

	const textareaRef = useRef<HTMLTextAreaElement>(null);
	const editorRef = useRef<EditorHandle>(null);

	// 입력 창 높이 조절
	const resizeTextarea = useCallback(() => {
		const textarea = textareaRef.current;
		if (textarea) {
			textarea.style.height = 'auto';
			textarea.style.height = `${textarea.scrollHeight}px`;
		}
	}, []);

	useEffect(() => {
		resizeTextarea();
	}, [form.content, resizeTextarea]);

	const handleSecretChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
		setForm(prev => ({ ...prev, isSecret: e.target.checked }));
	}, []);

	const handleEmoji = useCallback((emoji: string) => {
		setForm(prev => ({ ...prev, content: prev.content + emoji }));
	}, []);

	const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLTextAreaElement>) => {
		if (e.ctrlKey && e.key === 'Enter') {
			e.preventDefault();
			handleSubmit();
		}
	}, []);

	// 입력 내용 초기화
	const resetForm = useCallback(() => {
		setForm({
			postID: _post.id,
			commentID: _comment.id,
			mention: '',
			content: '',
			isSecret: false
		});

		resizeTextarea();
	}, [_post.id, _comment.id, resizeTextarea]);

	// 댓글+답글 수정
	const handleSubmit = useCallback(async () => {
		if (!loginCheck()) {
			return;
		}

		if (!form.content.trim()) {
			if (boardMeta.comment.enableEditor) {
				editorRef.current?.editorInstance?.editing.view.focus();
			} else {
				textareaRef.current?.focus();
			}
			setError('내용을 입력해주세요.');
			return;
		}

		setLoading(true);

		try {
			{
				const trimmedContent = form.content.trim();
				const maxLen = boardMeta.comment.maxContentLength || CommentConst.MaxAllowedContentLength;
				const minLen = boardMeta.comment.minContentLength;

				if (minLen > 0 && trimmedContent.length < minLen) {
					if (boardMeta.comment.enableEditor) {
						editorRef.current?.editorInstance?.editing.view.focus();
					} else {
						textareaRef.current?.focus();
					}
					throw new Error(`내용은 ${minLen}자 이상 작성해주세요.`);
				}

				if (trimmedContent.length > maxLen) {
					if (boardMeta.comment.enableEditor) {
						editorRef.current?.editorInstance?.editing.view.focus();
					} else {
						textareaRef.current?.focus();
					}
					throw new Error(`내용은 ${maxLen}자 이내로 작성해주세요.`);
				}
			}

			const formData = new FormData();
			formData.append('postID', String(form.postID));
			formData.append('commentID', String(form.commentID));
			formData.append('isSecret', String(form.isSecret));

			let content = form.content;

			const escapeRegExp = (s: string) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
			if (form.mention) {
				content = content.replace(new RegExp('^\\s*' + escapeRegExp(form.mention) + '\\s*', 'i') , '');
				formData.append('mention', form.mention.trim());
			}

			// QnA 처리
			if (boardMeta.comment.enableEditor) {
				if (content) {
					const doc = new DOMParser().parseFromString(content, 'text/html');
					doc.querySelectorAll('img[src]').forEach(img => {
						img.setAttribute('src', 'data:image/');
					});

					content = doc.body.innerHTML;
				}

				// 이미지 정보
				editorRef.current?.getImageStore().forEach((i) => {
					if (i.image?.size > 0 && i.name) {
						formData.append('images', i.image, i.name);
					}
				});

				// 미디어 정보
				editorRef.current?.getMediaStore().forEach((m) => {
					if (m.url) {
						formData.append('medias', m.url);
					}
				});

				// 첨부 파일
				editorRef.current?.getFileStore().forEach((f) => {
					if (f?.size > 0 && f.name) {
						formData.append('files', f.file, f.name);
					}
				});
			}

			formData.append('content', content);

			const res = await fetchApi<CommentUpdateResponse>('/api/forum/comments/' + _comment.id, {
				method: 'PUT',
				body: formData
			});

			const updatedComment: CommentItem = {
				..._comment,
				content: content,
				mention: form.mention ? { id: _comment.mention?.id ?? 0, rawHandle: form.mention } : undefined,
				isSecret: form.isSecret
			};

			onSuccess(updatedComment);

		} catch (err) {
			if (err instanceof Error) {
				setError(err.message);
			}
		} finally {
			setLoading(false);
			resetForm();
		}
	}, [form, boardMeta, _comment, loginCheck, onSuccess, setError, resetForm]);

	const handleCancel = useCallback(() => {
		if (onCancel) {
			onCancel();
		} else {
			resetForm();
		}
	}, [onCancel, resetForm]);

	const handleContentChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
		setForm(prev => ({ ...prev, content: e.target.value }));
	}, []);

	const handleEditorChange = useCallback((data: string) => {
		setForm(prev => ({ ...prev, content: data }));
	}, []);

	return (
		<>
			{loading ? (
				<article>
					<Loading type={2} />
				</article>
			) : (
				<article className='edit-form'>
					<div>
						{boardMeta.comment.enableEditor ? (
							<Editor
								ref={editorRef}
								editorKey={`comment-edit-${_comment.id}`}
								data={form.content}
								onChange={handleEditorChange}
								boardMeta={boardMeta}
							/>
						) : (
							<textarea
								name='_comment'
								rows={1}
								value={form.content}
								title='댓글 입력 창'
								placeholder={boardMeta.comment.contentPlaceholder ?? ''}
								ref={textareaRef}
								onChange={handleContentChange}
								onKeyDown={handleKeyDown}
								disabled={loading}
							/>
						)}
					</div>
					<div>
						<EmojiPicker onEmojiSelect={handleEmoji} />
						{boardMeta.comment.allowSecret && (
							<label className='ps-2'>
								<input type="checkbox" checked={form.isSecret} onChange={handleSecretChange} />
								<span className='ps-1'>비밀글</span>
							</label>
						)}
					</div>
					<div>
						<button type='button' className='btn btn-default' onClick={handleCancel}>취소</button>
						<button type='button' className='btn btn-submit' onClick={handleSubmit}>확인</button>
					</div>
				</article>
			)}
		</>
	)
};