Merge pull request #132 from boostcampwm-2022/131-textfield-컴포넌트-구현

TextField 컴포넌트 구현

Author: seyoung8239

frontend/src/components/@shared/TextField/TextField.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+import TextField, { TextFieldPropType } from './TextField';
+
+export default {
+	component: TextField,
+	title: '@shared/TextField',
+};
+
+const Template: Story<TextFieldPropType> = (args) => <TextField {...args}></TextField>;
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const HelperText = Template.bind({});
+HelperText.args = { helperText: 'this is helper text' };
+
+export const Disabled = Template.bind({});
+Disabled.args = { disabled: true };
+
+export const Error = Template.bind({});
+Error.args = { error: true, helperText: 'this is helper text' };

frontend/src/components/@shared/TextField/TextField.style.ts

@@ -0,0 +1,23 @@
+import { css } from '@emotion/react';
+
+export const TextFieldStyle = (theme, width, error, disabled) => css`
+	width: ${width};
+	background-color: ${disabled ? theme.colors.gray3 : theme.colors.secondary};
+	color: ${error ? theme.colors.red : disabled ? theme.colors.gray2 : theme.colors.black};
+	padding: 12px;
+
+	font-size: ${theme.fontSize.small};
+
+	border: 1px solid ${!disabled && error ? theme.colors.red : theme.colors.gray2};
+	border-radius: ${theme.borderRaduis};
+
+	&::placeholder {
+		color: ${theme.colors.gray2};
+	}
+`;
+
+export const TextFieldHelperTextStyle = (theme, error) => css`
+	color: ${error ? theme.colors.red : theme.colors.gray2};
+
+	font-size: ${theme.fontSize.xSmall};
+`;

frontend/src/components/@shared/TextField/TextField.tsx

@@ -0,0 +1,45 @@
+import { css } from '@emotion/react';
+import { flexColumn } from '@styles/globalStyle';
+import React from 'react';
+import { TextFieldHelperTextStyle, TextFieldStyle } from './TextField.style';
+
+export interface TextFieldPropType {
+	width?: string;
+	placeholder?: string;
+	disabled?: boolean;
+	readOnly?: boolean;
+	error?: boolean;
+	helperText?: string;
+	onChange?: React.ChangeEventHandler<HTMLInputElement>;
+	value?: string;
+}
+
+const TextField = ({
+	width,
+	placeholder,
+	disabled = false,
+	readOnly = false,
+	error = false,
+	helperText,
+	onChange,
+	value,
+}: TextFieldPropType) => {
+	return (
+		<div css={flexColumn({ gap: '4px' })}>
+			<input
+				css={(theme) => TextFieldStyle(theme, width, error, disabled)}
+				type="text"
+				placeholder={placeholder}
+				disabled={disabled}
+				readOnly={readOnly}
+				onChange={onChange}
+				value={value}
+			/>
+			{!disabled && helperText?.trim().length > 0 ? (
+				<span css={(theme) => TextFieldHelperTextStyle(theme, error)}>{helperText}</span>
+			) : null}
+		</div>
+	);
+};
+
+export default TextField;

frontend/src/styles/globalStyle.ts

@@ -41,15 +41,33 @@ const globalStyle = css`
 	}
 `;
 
-export const flexRow = ({ gap }) => css`
+interface flexPropType {
+	gap?: string;
+	justifyContent?: 'center' | 'space-between';
+	alignItems?: 'center';
+}
+
+export const flexRow = ({
+	gap = '0px',
+	justifyContent = 'center',
+	alignItems = 'center',
+}: flexPropType) => css`
 	display: flex;
 	flex-direction: row;
+	justify-content: ${justifyContent};
+	align-items: ${alignItems};
 	gap: ${gap};
 `;
 
-export const flexColumn = ({ gap }) => css`
+export const flexColumn = ({
+	gap = '0px',
+	justifyContent = 'center',
+	alignItems = 'center',
+}: flexPropType) => css`
 	display: flex;
 	flex-direction: column;
+	justify-content: ${justifyContent};
+	align-items: ${alignItems};
 	gap: ${gap};
 `;
 

frontend/src/styles/theme.ts

@@ -7,10 +7,16 @@ const theme = {
 		black: '#222222',
 		gray1: '#888888',
 		gray2: '#BBBBBB',
-		gray3: '#D7D7D7',
-		white: '#ffffff',
-		blue1: '#1F7CD2',
+		gray3: '#EEECEC',
+		white: '#F5F5F5',
 	},
+	fontSize: {
+		xSmall: '12px',
+		small: '16px',
+		medium: '20px',
+		laege: '24px',
+	},
+	borderRaduis: '8px',
 };
 
 export default theme;