[Fix/BAR-258] 끄적이는 페이지에서 내용 입력 후 엔터 클릭시 제출 처리 (#82)

* fix: 엔터 클릭시 제출

* fix: input zIndex 추가

* fix: 입력된 내용 없는 경우 제출 방지

.eslintrc.json

@@ -25,6 +25,7 @@
     ],
     "unused-imports/no-unused-imports": "error",
     "no-else-return": ["error", { "allowElseIf": false }],
+    "jsx-a11y/label-has-associated-control": "off",
     "@typescript-eslint/consistent-type-imports": [
       "error",
       { "fixStyle": "inline-type-imports" }

src/components/Input/WriteInput/index.tsx

@@ -23,7 +23,7 @@ const WriteInput = ({
   maxLength = MAIN_INPUT_MAX_LENGTH,
   onSubmit,
 }: WriteInputProps) => {
-  const { id, value } = inputProps;
+  const { id, value, onChange } = inputProps;
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
 
   const [textareaHeight, setTextareaHeight] = useState<{
@@ -62,12 +62,15 @@ const WriteInput = ({
   };
 
   const handleKeydownEnter = (e: KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.code === 'Enter') {
-      setTextareaHeight((prev) => ({
-        row: prev.row + 1,
-        lineBreak: { ...prev.lineBreak, [value.length]: true },
-      }));
-      return;
+    if (e.nativeEvent.isComposing) return;
+
+    if (e.code === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      setTextareaHeight({
+        row: 1,
+        lineBreak: {},
+      });
+      value.trim() && onSubmit();
     }
   };
 
@@ -81,13 +84,15 @@ const WriteInput = ({
       >
         <label htmlFor={id} className={style.label}>
           <textarea
-            {...inputProps}
+            id={id}
+            value={value}
             ref={inputRef}
             autoComplete="off"
             rows={textareaHeight.row}
             className={style.input}
             placeholder={placeholder}
             maxLength={maxLength}
+            onChange={onChange}
             onInput={handleResize}
             onKeyDown={handleKeydownEnter}
           />

src/domain/끄적이는/style.css.ts

@@ -25,7 +25,7 @@ export const inputWrapper = style({
   width: '100%',
   transform: 'translateX(-50%)',
   maxWidth: '1120px',
-
+  zIndex: 10,
   '@media': {
     'screen and (max-width: 1200px)': {
       padding: '0 40px',