feat: 최대 글자 제한을 UI에 표시한다(#124)

JNU-econovation · Mar 3, 2024 · 07a199a · 07a199a
2 parents 9bcd362 + 1874a05
commit 07a199a
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 13 deletions.
diff --git a/frontend/components/application/applicationLayout/BooleanTextarea.component.tsx b/frontend/components/application/applicationLayout/BooleanTextarea.component.tsx
@@ -2,11 +2,13 @@
 
 import RadioGroup from "@/components/common/Radio.component";
 import Txt from "@/components/common/Txt.component";
+import { MAX_TEXT_LENGTH } from "@/src/constants";
 import type {
   ApplicationBooleanTextarea,
   ApplicationQuestion,
 } from "@/src/constants/application/type";
 import { useLocalStorage } from "@/src/hooks/useLocalstorage.hook";
+import { FormEvent } from "react";
 
 interface TextAreaProps {
   node: {
@@ -21,6 +23,9 @@ interface TextAreaProps {
 
 const TextArea = ({ node }: TextAreaProps) => {
   const [textValue, setTextValue] = useLocalStorage(node.name, "");
+  const onInput = (e: FormEvent<HTMLTextAreaElement>) => {
+    setTextValue(e.currentTarget.value.slice(0, MAX_TEXT_LENGTH));
+  };
 
   return (
     <div className="flex gap-6">
@@ -32,15 +37,16 @@ const TextArea = ({ node }: TextAreaProps) => {
           <Txt className="pl-4 block break-keep">{node.subtitle}</Txt>
         </div>
       </div>
-      <div className="flex-1">
+      <div className="flex-1 relative">
         <textarea
-          className="my-2 border rounded-lg p-4 w-full resize-none"
+          className="border rounded-lg px-4 py-6 w-full resize-none"
           rows={20}
           maxLength={1000}
           name={node.name}
           value={textValue}
-          onInput={(e) => setTextValue(e.currentTarget.value)}
+          onInput={onInput}
         />
+        <div className="absolute bottom-3 right-4 bg-white text-sm">{`(${textValue.length}/${MAX_TEXT_LENGTH})`}</div>
       </div>
     </div>
   );

diff --git a/frontend/components/application/applicationNode/Textarea.component.tsx b/frontend/components/application/applicationNode/Textarea.component.tsx
@@ -1,11 +1,13 @@
 "use client";
 
 import Txt from "@/components/common/Txt.component";
+import { MAX_TEXT_LENGTH } from "@/src/constants";
 import {
   ApplicationNode,
   ApplicationTextarea,
 } from "@/src/constants/application/type";
 import { useLocalStorage } from "@/src/hooks/useLocalstorage.hook";
+import { FormEvent } from "react";
 
 interface ApplicationTextareaProps {
   data: ApplicationNode;
@@ -15,6 +17,10 @@ const ApplicationTexarea = ({ data }: ApplicationTextareaProps) => {
   const textData = data as ApplicationTextarea;
   const [value, setValue] = useLocalStorage(textData.name, "");
 
+  const onInput = (e: FormEvent<HTMLTextAreaElement>) => {
+    setValue(e.currentTarget.value.slice(0, MAX_TEXT_LENGTH));
+  };
+
   return (
     <>
       {textData.title && (
@@ -25,16 +31,17 @@ const ApplicationTexarea = ({ data }: ApplicationTextareaProps) => {
           {textData.subtitle && <Txt>{` ${textData.subtitle}`}</Txt>}
         </label>
       )}
-      <textarea
-        className="my-2 border rounded-lg p-4 w-full resize-none"
-        rows={20}
-        name={textData.name}
-        value={value}
-        maxLength={1000}
-        onInput={(e) => {
-          setValue(e.currentTarget.value);
-        }}
-      />
+      <div className="relative">
+        <textarea
+          className="border rounded-lg px-4 py-6 w-full resize-none"
+          rows={20}
+          name={textData.name}
+          value={value}
+          maxLength={1000}
+          onInput={onInput}
+        />
+        <div className="absolute bottom-3 right-4 bg-white text-sm">{`(${value.length}/${MAX_TEXT_LENGTH})`}</div>
+      </div>
     </>
   );
 };

diff --git a/frontend/src/constants/index.ts b/frontend/src/constants/index.ts
@@ -169,3 +169,5 @@ export const needValidatePath = [
   "/interview",
   "/kanban",
 ];
+
+export const MAX_TEXT_LENGTH = 1000;