From 39a777f552ad33ee8525810e4b0edd1b41205009 Mon Sep 17 00:00:00 2001
From: Jeon Eonseok <jseokeon@gmail.com>
Date: Tue, 30 Jul 2024 21:55:44 +0900
Subject: [PATCH 1/4] =?UTF-8?q?fix:=20=EA=B8=80=EC=9E=90=EC=88=98=200?=
 =?UTF-8?q?=EC=9D=BC=20=EB=95=8C=20textarea=20=EB=9C=A8=EB=8A=94=20?=
 =?UTF-8?q?=EC=97=90=EB=9F=AC=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ApplyPage/components/PartSection/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/ApplyPage/components/PartSection/index.tsx b/src/views/ApplyPage/components/PartSection/index.tsx
index 5203fdf9..5ab81f38 100644
--- a/src/views/ApplyPage/components/PartSection/index.tsx
+++ b/src/views/ApplyPage/components/PartSection/index.tsx
@@ -64,8 +64,8 @@ const PartSection = ({
 
         return (
           <div key={value}>
-            {charLimit == null && <Info value={value} />}
-            {charLimit != null && (
+            {!charLimit && <Info value={value} />}
+            {!!charLimit && (
               <Textarea
                 name={`part${id}`}
                 defaultValue={defaultValue}

From d58eae0a33f48fb4c1d0e9d64875c6227c25bb33 Mon Sep 17 00:00:00 2001
From: Jeon Eonseok <jseokeon@gmail.com>
Date: Tue, 30 Jul 2024 21:59:11 +0900
Subject: [PATCH 2/4] =?UTF-8?q?fix:=20max=20count=20=EC=9C=84=EC=B9=98=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Textarea/components/Label/index.tsx       | 42 +++++++++++++++----
 src/common/components/Textarea/index.tsx      |  2 +-
 2 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/src/common/components/Textarea/components/Label/index.tsx b/src/common/components/Textarea/components/Label/index.tsx
index c6ab25a9..c47383ea 100644
--- a/src/common/components/Textarea/components/Label/index.tsx
+++ b/src/common/components/Textarea/components/Label/index.tsx
@@ -1,24 +1,50 @@
-import { requireDot, labelStyle } from './style.css';
+import { Fragment, useId, type HTMLAttributes } from 'react';
 
-import type { HTMLAttributes } from 'react';
+import { requireDot, labelStyle } from './style.css';
 
 interface LabelProps extends HTMLAttributes<HTMLHeadingElement> {
-  children: string | number;
+  children: string;
   maxCount: number;
   required: boolean;
   label: string;
 }
 
 const Label = ({ children, maxCount, required, label, ...headerElementProps }: LabelProps) => {
+  const keyId = useId();
+  const questionArray = children.split('\n');
+  const firstEmptyIndex = questionArray.indexOf('');
+
+  const renderQuestions = (questions: string[], limit: number) =>
+    questions.slice(0, limit).map((item, idx) => (
+      <Fragment key={`${item}-${idx}`}>
+        {item}
+        {idx !== limit - 1 && '\n'}
+      </Fragment>
+    ));
+
+  const renderRestQuestions = (questions: string[]) =>
+    questions.slice(firstEmptyIndex).map((item, idx) => {
+      if (item === '') return <br key={`${keyId}-${idx}`} />;
+      return <Fragment key={`${item}-${idx}`}>{item}</Fragment>;
+    });
+
   return (
     <h4 className={labelStyle} {...headerElementProps}>
       <label style={{ cursor: 'pointer' }} htmlFor={label}>
-        <span>{children}</span>
-        <span style={{ position: 'relative' }}>
-          {' '}
-          ({maxCount}자)
-          {required && <i className={requireDot} />}
+        <span>
+          {firstEmptyIndex === -1 ? children : renderQuestions(questionArray, firstEmptyIndex)}
+          <span style={{ position: 'relative' }}>
+            {' '}
+            ({maxCount}자)
+            {required && <i className={requireDot} />}
+          </span>
         </span>
+        {firstEmptyIndex !== -1 && (
+          <>
+            <br />
+            <span>{renderRestQuestions(questionArray)}</span>
+          </>
+        )}
       </label>
     </h4>
   );
diff --git a/src/common/components/Textarea/index.tsx b/src/common/components/Textarea/index.tsx
index ed7a85eb..7e6dbde8 100644
--- a/src/common/components/Textarea/index.tsx
+++ b/src/common/components/Textarea/index.tsx
@@ -9,7 +9,7 @@ import type { FieldValues, Path } from 'react-hook-form';
 interface TextareaProps<T extends FieldValues> extends TextareaHTMLAttributes<HTMLTextAreaElement> {
   name: Path<T>;
   maxCount: number;
-  children: string | number;
+  children: string;
   extraInput?: ReactNode;
 }
 

From 32958db76cbdfe1188cf88cbf2c057fa08511e32 Mon Sep 17 00:00:00 2001
From: Jeon Eonseok <jseokeon@gmail.com>
Date: Tue, 30 Jul 2024 22:04:40 +0900
Subject: [PATCH 3/4] =?UTF-8?q?fix:=20=EC=A4=91=EB=B3=B5=EB=90=9C=20key=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ApplyPage/components/Info/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/ApplyPage/components/Info/index.tsx b/src/views/ApplyPage/components/Info/index.tsx
index 1b4c23ef..ef550e32 100644
--- a/src/views/ApplyPage/components/Info/index.tsx
+++ b/src/views/ApplyPage/components/Info/index.tsx
@@ -3,8 +3,8 @@ import { container, info } from './style.css';
 const Info = ({ value }: { value: string }) => {
   return (
     <article className={container}>
-      {value.split('\n').map((text) => (
-        <p className={info} key={text}>
+      {value.split('\n').map((text, idx) => (
+        <p className={info} key={`${text}+${idx}`}>
           {text && <>&#183;</>} {text}
         </p>
       ))}

From 5420b7252913de71d5411e28babbd5891cbf075f Mon Sep 17 00:00:00 2001
From: Jeon Eonseok <jseokeon@gmail.com>
Date: Tue, 30 Jul 2024 22:39:46 +0900
Subject: [PATCH 4/4] =?UTF-8?q?fix:=20\n=20=EC=95=88=EB=90=98=EB=8A=94=20?=
 =?UTF-8?q?=EC=97=90=EB=9F=AC=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Textarea/components/Label/index.tsx   | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/common/components/Textarea/components/Label/index.tsx b/src/common/components/Textarea/components/Label/index.tsx
index c47383ea..a3e79d3b 100644
--- a/src/common/components/Textarea/components/Label/index.tsx
+++ b/src/common/components/Textarea/components/Label/index.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useId, type HTMLAttributes } from 'react';
+import { Fragment, type HTMLAttributes } from 'react';
 
 import { requireDot, labelStyle } from './style.css';
 
@@ -10,7 +10,6 @@ interface LabelProps extends HTMLAttributes<HTMLHeadingElement> {
 }
 
 const Label = ({ children, maxCount, required, label, ...headerElementProps }: LabelProps) => {
-  const keyId = useId();
   const questionArray = children.split('\n');
   const firstEmptyIndex = questionArray.indexOf('');
 
@@ -23,10 +22,11 @@ const Label = ({ children, maxCount, required, label, ...headerElementProps }: L
     ));
 
   const renderRestQuestions = (questions: string[]) =>
-    questions.slice(firstEmptyIndex).map((item, idx) => {
-      if (item === '') return <br key={`${keyId}-${idx}`} />;
-      return <Fragment key={`${item}-${idx}`}>{item}</Fragment>;
-    });
+    questions.slice(firstEmptyIndex).map((item, idx) => (
+      <Fragment key={`${item}-${idx}`}>
+        {item} {`\n`}
+      </Fragment>
+    ));
 
   return (
     <h4 className={labelStyle} {...headerElementProps}>