UploadButton 컴포넌트 마크업을 React JSX로 만드는 실습을 진행합니다.
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>
문서, 루트 요소, 버튼 요소 스타일 코드입니다.
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;
}
버튼 아이콘 압축 파일입니다.
