[FE] Input 컴포넌트 리팩터링

[dle234]

연관된 이슈

• closes: [FE] Input 리팩터링 #932

구현한 기능

#932

상세 설명

색깔이 생각보다 많이 변해서 일단

이렇게 했는데 나중에 맞춰봐요!

Input�이 내부에 속해있는 느낌이라 레이아웃을 Input 으로 네이밍 하는게 약간 어색하다고 생각해서 일단 InputGroup 으로 했습니다. 혹시 더 좋은 네이밍 있으면 말해주세요!!

export const InputGroup = Object.assign(Layout, {
  Label,
  Input,
  Message,
  Content,
});

대충 그렸는데 Content 는 display flex 하는 레이아웃 이고, Input 에 reset button 있으면 좋을 것 같아서 추가했어요(useInput 에도 resetValue 함수추가). resetValue props 에 함수 넣어주면 버튼 생겨요. 값 입력 시 버튼 생기고 나중에 IconButton 생기면 수정할예정입니다!

나머지 내용은 화요일에 가서 자세히 설명해드릴게요

[greetings1012]

수고하셨습니다!
수정 사항 남겨놓았으니, 시간날 때 확인해주세요~

[greetings1012]

Suggested change

	export const Form = styled.form`
	export const Layout = styled.form`

[greetings1012]

여기서 hex값보다는 theme.color를 받는 게 더 좋을 것 같아요!

[anttiey]

Suggested change

	status = 'DEFAULT',
	fontSize = theme.fontSize.sm,
	$css,
	children,
	$css,
	status = 'DEFAULT',
	fontSize = theme.fontSize.sm,
	children,

props 와 정렬 순서가 같았으면 좋겠어요!

[anttiey]

Suggested change

	status?: InputStatus;
	$css?: ReturnType<typeof css>;
	width?: string;
	height?: string;
	borderRadius?: string;
	focusColor?: string;
	onReset?: () => void;
	$css?: ReturnType<typeof css>;
	status?: InputStatus;
	width?: string;
	height?: string;
	borderRadius?: string;
	focusColor?: string;
	onReset?: () => void;

$css 가 가장 위로 올라갔으면 좋겠어요! (가독성 문제)

[anttiey]

저희 forwardRef 제거하기로 했으니 제거합시다!

[anttiey]

그냥 color 로 받아도 되지 않을까요?