diff --git a/src/components/input/AccountInput.tsx b/src/components/input/AccountInput.tsx new file mode 100644 index 0000000..cf749e0 --- /dev/null +++ b/src/components/input/AccountInput.tsx @@ -0,0 +1,25 @@ +import Input from './Input'; +import { AccountInputProps } from './types/types'; +import styles from './styles/AccountInput.module.css'; + +/** + * 프로필 페이지용 계정 정보 표시 컴포넌트. + * 이메일과 비밀번호 모두 읽기 전용으로 표시한다. + * @param email 등록된 이메일 주소 + * @param children 하단 영역에 렌더링할 요소 (수정하기 버튼 등) + */ +export default function AccountInput({ email, children }: AccountInputProps) { + return ( +
+
+ + +
+
+ + +
+ {children &&
{children}
} +
+ ); +} diff --git a/src/components/input/ActionTextArea.tsx b/src/components/input/ActionTextArea.tsx new file mode 100644 index 0000000..a77ed8f --- /dev/null +++ b/src/components/input/ActionTextArea.tsx @@ -0,0 +1,61 @@ +'use client'; + +import { useCallback, useRef, useState } from 'react'; +import Image from 'next/image'; +import clsx from 'clsx'; +import TextArea from './TextArea'; +import { ActionTextAreaProps } from './types/types'; +import arrowActive from '@/assets/buttons/arrow/arrowUpActivedButton.svg'; +import arrowInactive from '@/assets/buttons/arrow/arrowUpNonActivedButton.svg'; +import styles from './styles/ActionTextArea.module.css'; + +/** + * 전송 버튼이 포함된 텍스트 입력 기본 컴포넌트. + * 입력값이 있으면 전송 버튼이 활성화된다. + * @param onSubmit 전송 버튼 클릭 시 호출되는 콜백 + * @param wrapperClassName wrapper div에 적용할 추가 CSS 클래스 + * @param className TextArea에 적용할 추가 CSS 클래스 + * @param props 네이티브 textarea의 모든 속성 + */ +export default function ActionTextArea({ + onSubmit, + wrapperClassName, + className, + onChange, + ...props +}: ActionTextAreaProps) { + const [hasValue, setHasValue] = useState(false); + const textareaRef = useRef(null); + + const autoResize = useCallback(() => { + const el = textareaRef.current; + if (!el) return; + el.style.height = 'auto'; + el.style.height = `${el.scrollHeight}px`; + }, []); + + return ( +
+