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

# Design ▸ React Component

## 🎩 Coupang SignIn Page <a href="#coupang-signin-page" id="coupang-signin-page"></a>

[쿠팡 로그인 페이지](https://www.figma.com/file/QNttUlYVQ1wMHo2E2ndD7J/Coupang?node-id=8%3A151) 디자인 시안입니다. 하지만 이번 미션은 페이지를 구현하는 것이 아닙니다.

{% embed url="https://www.figma.com/file/QNttUlYVQ1wMHo2E2ndD7J/Coupang?node-id=1%3A2" %}

## 🎩 SignIn Components <a href="#sign-in-components" id="sign-in-components"></a>

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

{% embed url="https://www.figma.com/file/QNttUlYVQ1wMHo2E2ndD7J/Coupang?node-id=0%3A1" %}

## 🍩 UI / Logo

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

![](https://597303073-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUfqhMWK9ILIx0SXJTa%2F-MVQHBvBCwHxfwaVRdA9%2F-MVRK13itwidNsjX3MtE%2Fimage.png?alt=media\&token=3a7ee811-2c2f-4d03-9e19-3f87733a60c6)

{% hint style="success" %}
로고 컴포넌트는 컬러(colorful), 모노(mono), 블랙(black) 이렇게 3가지 타입을 지원해야 합니다.
{% endhint %}

## 🍩 UI / Icon

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

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

![](https://597303073-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUfqhMWK9ILIx0SXJTa%2F-MVQHBvBCwHxfwaVRdA9%2F-MVRLaPE7B_aS1a_ZWJQ%2Fimage.png?alt=media\&token=2c5c9b2c-a02d-4958-a595-d183015e13b8)

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

## 🍩 Form / Button

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

![](https://597303073-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUfqhMWK9ILIx0SXJTa%2F-MVQHBvBCwHxfwaVRdA9%2F-MVRNtPXuvvavy5crP1T%2Fimage.png?alt=media\&token=9fb3418e-e841-4379-9604-7896f6d4324d)

{% hint style="success" %}
버튼 컴포넌트는 모드(mode), 상태(state)에 따라 모양이 달라져야 합니다.
{% endhint %}

## 🍩 Form / Checkbox

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

![](https://597303073-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUfqhMWK9ILIx0SXJTa%2F-MVROJ5rJEgLeP8NHp9K%2F-MVRVCWejFFNb2jZezKo%2Fimage.png?alt=media\&token=edcbe6b6-b3e7-42d5-8e2e-71fe4b74cdb3)

{% hint style="success" %}
체크박스 컴포넌트는 체크 상태(state)에 따라 모양이 변경됩니다.
{% endhint %}
