> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/learning-react-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/learning-react-app/mission/design-react-component.md).
# Design ▸ React Component
쿠팡 ▸ 로그인 폼 컨트롤 컴포넌트
## 🎩 Coupang SignIn Page
[쿠팡 로그인 페이지](https://www.figma.com/file/QNttUlYVQ1wMHo2E2ndD7J/Coupang?node-id=8%3A151) 디자인 시안입니다. 하지만 이번 미션은 페이지를 구현하는 것이 아닙니다.
{% embed url="" %}
## 🎩 SignIn Components
**컴포넌트**가 이번 미션의 "**핵심 주제**" 입니다. 로그인 페이지를 구성하는 컴포넌트를 분석해 React 컴포넌트화 해봅니다.
{% embed url="" %}
## 🍩 UI / Logo
로고는 서비스를 대표하는 심볼(상징)입니다. 서비스 여기저기에서 재사용 할 수 있도록 컴포넌트로 만들어 봅니다.
{% hint style="success" %}
로고 컴포넌트는 컬러(colorful), 모노(mono), 블랙(black) 이렇게 3가지 타입을 지원해야 합니다.
{% endhint %}
## 🍩 UI / Icon
아이콘은 텍스트 없이 모양만으로 정보를 전달하는 픽토그램(그림 문자)입니다. 로그인 페이지에서 직접 활용되지 않지만, 로그인 폼 컨트롤 내부에서 활용됩니다. 하지만 아이콘 활용도를 높이려면 폼 컨트롤 내부에 포함하지 않는 것이 좋습니다.
아이콘 컴포넌트는 단순히 아이콘을 렌더링 하는 역할만 가지는 것이 좋습니다. 서비스 여기저기에서 재사용 할 수 있도록 아이콘 컴포넌트를 만들어 봅니다.
{% hint style="success" %}
아이콘 컴포넌트는 편지(letter), 자물쇠(lock), 눈 보임(show)/감춤(hide) 4가지 모양을 지원해야 합니다.
{% endhint %}
## 🍩 Form / Button
버튼은 이벤트를 트리거 하는 방식으로 사용자와 상호작용(interaction) 하여 제어(contorl) 하는 그래픽 컨트롤입니다. 모든 페이지에서 빈번하게 활용되는 컴포넌트인 버튼을 만들어 보세요.
{% hint style="success" %}
버튼 컴포넌트는 모드(mode), 상태(state)에 따라 모양이 달라져야 합니다.
{% endhint %}
## 🍩 Form / Checkbox
체크박스는 GUI 요소(또는 위젯) 중 하나로 사용자로부터 하나 이상 입력을 받을 수 있습니다. 로그인 페이지에서는 자동 로그인 컴포넌트에 포함되어 활용됩니다. 재사용 가능한 기본적인 체크박스 컴포넌트를 만들어 보세요.
{% hint style="success" %}
체크박스 컴포넌트는 체크 상태(state)에 따라 모양이 변경됩니다.
{% endhint %}