From df0c95a54b708473206ab0f4c1695002899e3a5e Mon Sep 17 00:00:00 2001
From: Seoyoung <seoyoungiyo@gmail.com>
Date: Sat, 3 Feb 2024 05:36:20 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20=EC=BD=94=EB=A9=98=ED=8A=B8=20=EA=B8=80?=
 =?UTF-8?q?=EC=9E=90=EC=88=98=20=EC=B4=88=EA=B3=BC=EC=8B=9C=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=20=EC=A0=9C=ED=95=9C=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=EB=B0=8F=20=ED=83=80=EC=9D=B4=ED=8B=80=20=EC=97=90?=
 =?UTF-8?q?=EB=9F=AC=EC=8B=9C=20=ED=94=8C=EB=A0=88=EC=9D=B4=EC=8A=A4?=
 =?UTF-8?q?=ED=99=80=EB=8D=94=20=EC=83=89=EC=83=81=20=EB=B3=80=EA=B2=BD=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/create/_components/Items.css.ts | 9 +++++++++
 src/app/create/_components/Items.tsx    | 4 +++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/app/create/_components/Items.css.ts b/src/app/create/_components/Items.css.ts
index f335d9f3..ef5a48a8 100644
--- a/src/app/create/_components/Items.css.ts
+++ b/src/app/create/_components/Items.css.ts
@@ -42,6 +42,15 @@ export const title = style({
   },
 });
 
+export const errorTitle = style([
+  title,
+  {
+    '::placeholder': {
+      color: '#FF5454',
+    },
+  },
+]);
+
 export const comment = style({
   width: '100%',
   resize: 'none',
diff --git a/src/app/create/_components/Items.tsx b/src/app/create/_components/Items.tsx
index 65aea68c..4792155a 100644
--- a/src/app/create/_components/Items.tsx
+++ b/src/app/create/_components/Items.tsx
@@ -102,9 +102,10 @@ export default function Items() {
                         itemLength={watchItems.length}
                         titleInput={
                           <input
-                            className={styles.title}
+                            className={titleError ? styles.errorTitle : styles.title}
                             placeholder={itemPlaceholder.title}
                             autoComplete="off"
+                            maxLength={100}
                             {...register(`items.${index}.title`, itemTitleRules)}
                           />
                         }
@@ -112,6 +113,7 @@ export default function Items() {
                           <textarea
                             className={styles.comment}
                             placeholder={itemPlaceholder.comment}
+                            maxLength={100}
                             {...register(`items.${index}.comment`, itemCommentRules)}
                           />
                         }