[3/100] modal

세 번째는 확인 및 경고에 많이 쓰이는 모달 창입니다. 용도는 중요한 결정 및 삭제할 때 사용되며, 그렇기 때문에 사용자가 집중할 필요가 있습니다. 그래서 모달을 제외한 배경을 어둡게 처리해서 대비를 강하게 하는 게 기본입니다. 모달 창이 나올 때 빠르게 애니메이션을 적용하는 것도 방법입니다. 단순 확인만 하는 모달 창이라면 버튼이 하나만 있으면 되며, 경우에 따라서는 간단한 인풋도 들어가는 경우가 있지만 지금은 가장 기본 형태만 작업을 하였습니다.

 

 

하위 컴포넌트 목록 및 상태

• button/item - 기본 버튼 형태
• button/container - 버튼 컨테이너이며, single, vertical, horizontal로 구분
• contents - 모달의 타이틀, 이미지(옵션), 내용을 포함
• modal - contents,button/container를 수직으로 배치

사용된 이미지 출처는 icons8 입니다