Daily UI #080 Date Picker

Daily UI Challenge

#080 Date Picker

 

이번 과제는 날짜 선택 ui 요소 만들기.

어려운 주제는 아니었기 때문에 이번엔 프로토파이 연습을 해야겠다고 생각하며 작업했다.

 

차례로 state에 따라 나누어 default, select, focus의 경우를 나누어 컴포넌트를 만들었고, 달력의 경우에는 해당 월에 해당하지 않는 날짜, '오늘'인 날짜, 선택된 날짜, default 날짜로 스타일을 나누어 작업했다.

 

 

이건 프로토타입 화면으로 녹화한것. 프로토파이는 간단한건 쉬운데 변수 할당하고 함수를 쓰는 것까지 들어가면 좀 어려운 것 같아서 틈틈히 연습하고 있다.

 

간단한 요소인데도 이렇게 많은 트리거와 리스폰스를 써야한다니... 내가 아직 익숙치 않아서도 있는 것 같다.