Merge pull request #356 from MovieReviewComment/feature/issue-327/com…

…ment-card-header

[#327] Implement CommentCardHeader

ui/src/components/comment/client/comment-card-header.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import type { ChangeEventHandler } from 'react';
+
+import Title from '@/components/common/client/title';
+
+import { useComment } from '@/context/comment/comment-context';
+import { useToast } from '@/context/common/toast-context';
+
+import { useDebouncedCallback } from '@/hooks/common/use-debounced-callback';
+
+import { MAX_MOVIE_NAME_LENGTH } from '@/lib/constants/common';
+import { normalizeWhitespace } from '@/lib/utils/common/normalizeWhitespace';
+
+export function CommentCardHeader() {
+  const { movieName, isEditing, setMovieName, movieNameRef } = useComment();
+
+  const { emitToast } = useToast();
+  const debouncedEmitToast = useDebouncedCallback(emitToast, 1000);
+
+  const handleMovieNameChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {
+    let newText = e.target.value;
+
+    newText = normalizeWhitespace(newText);
+    if (newText.length > MAX_MOVIE_NAME_LENGTH) {
+      newText = newText.slice(0, MAX_MOVIE_NAME_LENGTH);
+      debouncedEmitToast(`영화제목은 ${MAX_MOVIE_NAME_LENGTH}자를 넘을 수 없습니다.`, 'error');
+    }
+
+    setMovieName(newText);
+  };
+
+  return (
+    <Title
+      value={movieName}
+      subtitle
+      placeholder="영화제목을 입력해 주세요..."
+      readOnly={!isEditing}
+      onChange={handleMovieNameChange}
+      ref={movieNameRef}
+    />
+  );
+}