-
Notifications
You must be signed in to change notification settings - Fork 0
/
textarea.tsx
67 lines (61 loc) · 1.54 KB
/
textarea.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import styled from "styled-components";
import { useRef } from "react";
import { PALETTE } from "../../styles/palette";
// 비밀번호 숫자만. 이모티콘 안돼. 글자 수 세는 거.
type TextareaProps = {
disabled?: boolean;
isSubmit: boolean;
width?: string;
height?: string;
placeholder: string;
value?: string;
handleDescription: (contents: string) => void;
};
/**
* Used to receive long sentences.
* 긴 문장을 입력받을 때 사용됩니다.
*/
export const Textarea = ({
disabled = false,
isSubmit,
width = "100%",
height = "100%",
placeholder,
handleDescription,
}: TextareaProps) => {
const textareaRef = useRef(null);
return (
<StyledTextarea
ref={textareaRef}
disabled={disabled}
width={width}
height={height}
placeholder={placeholder}
value={isSubmit ? "" : undefined}
onMouseOut={() => {
handleDescription((textareaRef.current as any).value);
}}
/>
);
};
/////////////////////////////
/// Styles
/////////////////////////////
const StyledTextarea = styled.textarea<{ width: string; height: string }>`
width: ${(props) => props.width};
height: ${(props) => props.height};
background: ${PALETTE.WHITE};
border: 3px solid ${PALETTE.LIGHT_GRAY_010};
border-radius: 20px;
padding: 18px 20px;
font-size: 1rem;
resize: none;
::placeholder {
font-family: "SBAggroM";
color: ${PALETTE.DARK_GRAY_04};
}
@media screen and (max-width: ${(props) => props.theme.media.sm}px) {
border-radius: 10px;
border-width: 2px;
}
`;