[Fix/BAR-283] 끄적이는 입력창 스타일 수정 (#102)

* style(WriteInput): 입력창 padding 수정 * refactor(WriteInput): maxLength 상수명 변경 및 기본 placeholder 설정
YAPP-Github · Apr 2, 2024 · 1806ca9 · 1806ca9
1 parent d44bcb0
commit 1806ca9
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 8 deletions.
diff --git a/src/components/Input/WriteInput/index.tsx b/src/components/Input/WriteInput/index.tsx
@@ -3,7 +3,7 @@ import { useMemo, useRef } from 'react';
 
 import Button from '@components/Button';
 import Icon from '@components/Icon';
-import { MAIN_INPUT_MAX_LENGTH } from '@constants/config';
+import { WRITE_INPUT_MAX_LENGTH } from '@constants/config';
 import type { UseInputReturn } from '@hooks/useInput';
 import { COLORS } from '@styles/tokens';
 
@@ -18,8 +18,8 @@ interface WriteInputProps extends HTMLAttributes<HTMLTextAreaElement> {
 
 const WriteInput = ({
   inputProps,
-  placeholder,
-  maxLength = MAIN_INPUT_MAX_LENGTH,
+  placeholder = '메모를 끄적여보세요',
+  maxLength = WRITE_INPUT_MAX_LENGTH,
   onSubmit,
 }: WriteInputProps) => {
   const { id, value, onChange } = inputProps;

diff --git a/src/components/Input/WriteInput/style.css.ts b/src/components/Input/WriteInput/style.css.ts
@@ -7,7 +7,7 @@ export const conatiner = style({
   justifyContent: 'space-between',
   borderRadius: '16px',
   width: '100%',
-  padding: '22px 12px 22px 24px',
+  padding: '12px 12px 12px 24px',
   border: `2px solid ${COLORS['Blue/Default']}`,
   backgroundColor: 'white',
 });

diff --git a/src/constants/config.ts b/src/constants/config.ts
@@ -1,7 +1,7 @@
 /**
- * "끄적이는" 최대 입력 글자 수
+ * "끄적이는" 입력창 최대 입력 글자 수
  */
-export const MAIN_INPUT_MAX_LENGTH = 500;
+export const WRITE_INPUT_MAX_LENGTH = 500;
 
 /**
  * 카테고리별 색상

diff --git a/src/domain/끄적이는/components/EditInput.tsx b/src/domain/끄적이는/components/EditInput.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
 
-import { MAIN_INPUT_MAX_LENGTH } from '@constants/config';
+import { WRITE_INPUT_MAX_LENGTH } from '@constants/config';
 import { type UseInputReturn } from '@hooks/useInput';
 
 import * as styles from './editInput.css';
@@ -33,7 +33,7 @@ const EditInput = ({ inputProps }: EditInputProps) => {
         ref={inputRef}
         className={styles.editInput}
         autoComplete="off"
-        maxLength={MAIN_INPUT_MAX_LENGTH}
+        maxLength={WRITE_INPUT_MAX_LENGTH}
         onInput={handleResize}
       />
       <p className={styles.editInputTextCount}>