Design ▸ React Component

쿠팡 ▸ 로그인 폼 컨트롤 컴포넌트

쿠팡 로그인 페이지 디자인 시안입니다. 하지만 이번 미션은 페이지를 구현하는 것이 아닙니다.

컴포넌트가 이번 미션의 "핵심 주제" 입니다. 로그인 페이지를 구성하는 컴포넌트를 분석해 React 컴포넌트화 해봅니다.

🍩 UI / Logo

로고는 서비스를 대표하는 심볼(상징)입니다. 서비스 여기저기에서 재사용 할 수 있도록 컴포넌트로 만들어 봅니다.

로고 컴포넌트는 컬러(colorful), 모노(mono), 블랙(black) 이렇게 3가지 타입을 지원해야 합니다.

아이콘은 텍스트 없이 모양만으로 정보를 전달하는 픽토그램(그림 문자)입니다. 로그인 페이지에서 직접 활용되지 않지만, 로그인 폼 컨트롤 내부에서 활용됩니다. 하지만 아이콘 활용도를 높이려면 폼 컨트롤 내부에 포함하지 않는 것이 좋습니다.

아이콘 컴포넌트는 단순히 아이콘을 렌더링 하는 역할만 가지는 것이 좋습니다. 서비스 여기저기에서 재사용 할 수 있도록 아이콘 컴포넌트를 만들어 봅니다.

아이콘 컴포넌트는 편지(letter), 자물쇠(lock), 눈 보임(show)/감춤(hide) 4가지 모양을 지원해야 합니다.

버튼은 이벤트를 트리거 하는 방식으로 사용자와 상호작용(interaction) 하여 제어(contorl) 하는 그래픽 컨트롤입니다. 모든 페이지에서 빈번하게 활용되는 컴포넌트인 버튼을 만들어 보세요.

버튼 컴포넌트는 모드(mode), 상태(state)에 따라 모양이 달라져야 합니다.

체크박스는 GUI 요소(또는 위젯) 중 하나로 사용자로부터 하나 이상 입력을 받을 수 있습니다. 로그인 페이지에서는 자동 로그인 컴포넌트에 포함되어 활용됩니다. 재사용 가능한 기본적인 체크박스 컴포넌트를 만들어 보세요.

체크박스 컴포넌트는 체크 상태(state)에 따라 모양이 변경됩니다.

Last updated 4 years ago

Was this helpful?