diff --git a/ui/src/components/review/client/review-title.tsx b/ui/src/components/review/client/review-title.tsx new file mode 100644 index 00000000..6ef98248 --- /dev/null +++ b/ui/src/components/review/client/review-title.tsx @@ -0,0 +1,52 @@ +'use client'; + +import Title from '@/components/common/client/title'; +import { useReview } from '@/context/review/review-context'; +import { useToast } from '@/context/common/toast-context'; +import { useDebouncedCallback } from '@/hooks/common/use-debounced-callback'; +import { MAX_TITLE_LENGTH } from '@/lib/constants/review'; +import { MAX_MOVIE_NAME_LENGTH } from '@/lib/constants/common'; +import { normalizeWhitespace } from '@/lib/utils/common/normalizeWhitespace'; + +export default function ReviewTitle({ + placeholder, + isMovieName, +}: { + placeholder: string; + isMovieName?: boolean; +}) { + const { title, movieName, setTitle, setMovieName, titleRef, movieNameRef } = useReview(); + + const [value, setValue, ref, maxLength] = isMovieName + ? [movieName, setMovieName, movieNameRef, MAX_MOVIE_NAME_LENGTH] + : [title, setTitle, titleRef, MAX_TITLE_LENGTH]; + + const { emitToast } = useToast(); + const debouncedEmitToast = useDebouncedCallback(emitToast, 300); + + const onChange = (e: React.ChangeEvent) => { + let newText = normalizeWhitespace(e.target.value); + + // limit length + if (newText.length > maxLength) { + newText = newText.slice(0, maxLength); + + debouncedEmitToast( + `${isMovieName ? '영화 제목' : '제목'}은 ${maxLength}자 이하로 입력해주세요.`, + 'error' + ); + } + + setValue(newText); + }; + + return ( + + ); +} diff --git a/ui/src/lib/constants/common.ts b/ui/src/lib/constants/common.ts new file mode 100644 index 00000000..599d5bc5 --- /dev/null +++ b/ui/src/lib/constants/common.ts @@ -0,0 +1 @@ +export const MAX_MOVIE_NAME_LENGTH = 100; diff --git a/ui/src/lib/constants/review.ts b/ui/src/lib/constants/review.ts new file mode 100644 index 00000000..7e1a4ed6 --- /dev/null +++ b/ui/src/lib/constants/review.ts @@ -0,0 +1,2 @@ +export const MAX_TITLE_LENGTH = 100; +export const MAX_CONTENT_LENGTH = 2000;