[#327] Implement CommentContext

ui/src/context/comment/comment-context.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import type { Dispatch, ReactNode, SetStateAction } from 'react';
+import { createContext, useContext, useRef, useState } from 'react';
+
+import { useToast } from '@/context/common/toast-context';
+
+import type { Comment } from '@/lib/definitions/comment';
+import { validateCommentFields } from '@/lib/utils/comment/validate-comment-fields';
+
+interface ContextShape {
+  prepopulated?: Comment;
+  content: string;
+  setContent: Dispatch<SetStateAction<string>>;
+  contentRef: React.RefObject<HTMLTextAreaElement>;
+  movieName: string;
+  setMovieName: Dispatch<SetStateAction<string>>;
+  movieNameRef: React.RefObject<HTMLTextAreaElement>;
+  disabled: boolean;
+  setDisabled: Dispatch<SetStateAction<boolean>>;
+  validateAndGetData: () =>
+    | {
+        content: string;
+        movieName: string;
+      }
+    | undefined;
+  isEditing: boolean;
+  setIsEditing: Dispatch<SetStateAction<boolean>>;
+}
+
+const CommentCotext = createContext<ContextShape | null>(null);
+
+export function CommentProvider({
+  children,
+  prepopulated,
+}: {
+  children: ReactNode;
+  prepopulated?: Comment;
+}) {
+  const [movieName, setMovieName] = useState(prepopulated?.movieName ?? '');
+  const [content, setContent] = useState(prepopulated?.content ?? '');
+
+  const [disabled, setDisabled] = useState(false);
+
+  const movieNameRef = useRef<HTMLTextAreaElement>(null);
+  const contentRef = useRef<HTMLTextAreaElement>(null);
+
+  const { emitToast } = useToast();
+
+  const validateAndGetData = () => {
+    const validatedFields = validateCommentFields({ movieName, content });
+
+    if (!validatedFields.success) {
+      if (validatedFields.errors.movieName) {
+        movieNameRef.current?.focus();
+        emitToast(validatedFields.errors.movieName, 'error');
+      } else if (validatedFields.errors.content) {
+        contentRef.current?.focus();
+        emitToast(validatedFields.errors.content, 'error');
+      }
+
+      setDisabled(false);
+      return;
+    }
+
+    return validatedFields.data;
+  };
+
+  const [isEditing, setIsEditing] = useState(prepopulated === undefined);
+
+  return (
+    <CommentCotext.Provider
+      value={{
+        prepopulated,
+        content,
+        setContent,
+        contentRef,
+        movieName,
+        setMovieName,
+        movieNameRef,
+        disabled,
+        setDisabled,
+        validateAndGetData,
+        isEditing,
+        setIsEditing,
+      }}
+    >
+      {children}
+    </CommentCotext.Provider>
+  );
+}
+
+export function useComment() {
+  const context = useContext(CommentCotext);
+  if (!context) {
+    throw new Error('useComment must be used within an CommentProvider');
+  }
+
+  return context;
+}

ui/src/lib/definitions/comment.ts

@@ -1,6 +1,6 @@
 import type { Pagination } from '@/lib/definitions/common';
 
-interface Comment {
+export interface Comment {
   id: number; //123,
   userId: string; //"{UUID v4}",
   nickname: string; // "신비로운 평론가 붉은 여우",

ui/src/lib/utils/comment/validate-comment-fields.ts

@@ -0,0 +1,49 @@
+interface RawCommentField {
+  movieName: string;
+  content: string;
+}
+
+interface OnSuccess {
+  success: true;
+  data: {
+    movieName: string;
+    content: string;
+  };
+}
+
+interface OnFail {
+  success: false;
+  errors: Partial<{
+    movieName: string;
+    content: string;
+  }>;
+}
+
+export function validateCommentFields(rawData: RawCommentField): OnSuccess | OnFail {
+  const errors = new Map<string, string>();
+
+  const { movieName, content } = rawData;
+
+  if (movieName.length < 1) {
+    errors.set('movieName', '영화제목을 입력해주세요.');
+  }
+
+  if (content.length < 1) {
+    errors.set('content', '코멘트를 입력해주세요.');
+  }
+
+  if (errors.size > 0) {
+    return {
+      success: false,
+      errors: Object.fromEntries(errors),
+    };
+  }
+
+  return {
+    success: true,
+    data: {
+      movieName,
+      content,
+    },
+  };
+}