diff --git a/src/components/Card/style.css.ts b/src/components/Card/style.css.ts index d7fe30b..55fffe0 100644 --- a/src/components/Card/style.css.ts +++ b/src/components/Card/style.css.ts @@ -51,7 +51,6 @@ export const menu = style({ top: '16px', right: '16px', padding: '8px', - zIndex: 10, }); export const header = style([ diff --git a/src/components/Dropdown/style.css.ts b/src/components/Dropdown/style.css.ts index 363ca11..4cb5566 100644 --- a/src/components/Dropdown/style.css.ts +++ b/src/components/Dropdown/style.css.ts @@ -12,6 +12,8 @@ export const wrapper = style({ export const trigger = style({ width: 'fit-content', + position: 'relative', + zIndex: 1, }); export const top = createVar(); diff --git a/src/components/Input/WriteInput/index.tsx b/src/components/Input/WriteInput/index.tsx index d4f89b7..3db1b96 100644 --- a/src/components/Input/WriteInput/index.tsx +++ b/src/components/Input/WriteInput/index.tsx @@ -1,6 +1,5 @@ -import type { ChangeEvent, HTMLAttributes, KeyboardEvent } from 'react'; -import { useMemo, useRef, useState } from 'react'; -import { assignInlineVars } from '@vanilla-extract/dynamic'; +import type { HTMLAttributes, KeyboardEvent } from 'react'; +import { useMemo, useRef } from 'react'; import Button from '@components/Button'; import Icon from '@components/Icon'; @@ -8,7 +7,7 @@ import { MAIN_INPUT_MAX_LENGTH } from '@constants/config'; import type { UseInputReturn } from '@hooks/useInput'; import { COLORS } from '@styles/tokens'; -import * as style from './style.css'; +import * as styles from './style.css'; interface WriteInputProps extends HTMLAttributes { inputProps: Omit; @@ -26,70 +25,37 @@ const WriteInput = ({ const { id, value, onChange } = inputProps; const inputRef = useRef(null); - const [textareaHeight, setTextareaHeight] = useState<{ - row: number; - lineBreak: Record; - }>({ - row: 1, - lineBreak: {}, - }); - const isValid = useMemo(() => value.length > 0, [value.length]); - const handleResize = (e: ChangeEvent) => { - const { scrollHeight, clientHeight, value } = e.target; - - if (value.length === 0) { - setTextareaHeight((prev) => ({ - row: 1, - lineBreak: { ...prev.lineBreak, [e.target.value.length]: false }, - })); - } - - if (scrollHeight > clientHeight) { - setTextareaHeight((prev) => ({ - row: prev.row + 1, - lineBreak: { ...prev.lineBreak, [value.length - 1]: true }, - })); - } - - if (textareaHeight.lineBreak[value.length]) { - setTextareaHeight((prev) => ({ - row: prev.row - 1, - lineBreak: { ...prev.lineBreak, [value.length]: false }, - })); - } + const handleResize = () => { + if (!inputRef.current) return; + inputRef.current.setAttribute('style', 'height: 0px'); + inputRef.current.setAttribute( + 'style', + `height: ${inputRef.current.scrollHeight}px`, + ); }; const handleKeydownEnter = (e: KeyboardEvent) => { - if (e.nativeEvent.isComposing) return; + if (e.nativeEvent.isComposing || !inputRef.current) return; if (e.code === 'Enter' && !e.shiftKey) { e.preventDefault(); - setTextareaHeight({ - row: 1, - lineBreak: {}, - }); - value.trim() && onSubmit(); + inputRef.current.setAttribute('style', 'height: 27px'); + onSubmit(); } }; return ( -
-
-