Feat: 코멘트 글자수 초과시 입력 제한 기능 추가 및 타이틀 에러시 플레이스홀더 색상 변경 기능 추가

8-Sprinters · Feb 2, 2024 · df0c95a · df0c95a
1 parent 9b1b3be
commit df0c95a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git 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
@@ -102,16 +102,18 @@ 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)}
                           />
                         }
                         commentTextArea={
                           <textarea
                             className={styles.comment}
                             placeholder={itemPlaceholder.comment}
+                            maxLength={100}
                             {...register(`items.${index}.comment`, itemCommentRules)}
                           />
                         }