Assets ▸ React JSX

디자인 에셋 → React JSX 변환 실습

UploadButton 컴포넌트 마크업을 React JSX로 만드는 실습을 진행합니다.

🎩 Mission

1. 버튼 마크업에서 데이터를 추출해 JSON 객체를 구성하세요.

2. 각 버튼을 JSX를 활용해 React 요소로 만드세요.

3. React 요소를 App 컴포넌트의 자식(들)로 설정해 브라우저 뷰(View)에 렌더링해보세요.

예습해서 React 컴포넌트 제작이 가능한 분들은 React 요소 대신 컴포넌트를 만들어보세요.

🎩 Markup

React JSX로 만들어야 하는 구조는 다음 HTML 마크업을 참고합니다.

<button type="button" class="button button__upload button--idle">
  업로드
  <img src="./src/assets/up-arrow.svg" alt="" height="12" />
</button>

<button type="button" class="button button__upload button--pending">
  업로드 중
  <img src="./src/assets/spinner.svg" alt="" height="12" />
</button>

<button type="button" class="button button__upload button--resolved">
  완료
  <img src="./src/assets/check-mark.svg" alt="" height="12" />
</button>

<button type="button" class="button button__upload button--rejected">
  실패
  <img src="./src/assets/cross.svg" alt="" height="12" />
</button>

<button
  type="button"
  class="button button__upload button--disabled"
  disabled
>
  업로드
  <img src="./src/assets/not-allowed.svg" alt="" height="12" />
</button>

🎩 CSS

문서, 루트 요소, 버튼 요소 스타일 코드입니다.

body {
  margin: 0;
  background: #eeeffd;
}

#root {
  min-height: 80vh;
  margin-top: 10vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.button {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  min-width: 5.5625rem;
  border: 0;
  border-radius: 3rem;
  padding: 0.75em 1em;
  font: bold 0.75rem/1 SpoqaHanSans;
  background: #ffffff;
  color: #525577;
  transition: all 0.58s cubic-bezier(0.77, 0, 0.18, 1);
  box-shadow: 0 4px 4px #dbddf0;
}
.button:hover {
  transform: scale(1.2);
  box-shadow: 0 9px 6px #dbddf0;
}
.button:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(147, 153, 210, 0.56);
}
.button:focus:not(:focus-visible) {
  box-shadow: none;
}
.button[disabled] {
  cursor: not-allowed;
  color: #adaeb6;
}
.button[disabled]:hover {
  transform: none;
  box-shadow: 0 4px 4px #dbddf0;
}

🎩 Icons

버튼 아이콘 압축 파일입니다.

2KB

icons.zip

archive

icons.zip