tailwindCSS
-
[shadcn/ui] Dialog, Alert Dialog Component 구현기Front-End/React 2024. 5. 14. 14:07
🍀 목차Shadcn/ui Dialog(+Alert Dialog) 뜯어보기 & 속성 설명UI 커스텀과 작성한 스토리회고 개요 Modal Component는 현재 제품에서 가장 많이 쓰이는 컴포넌트 중 하나다. Avatar Component처럼 처음부터 인터페이스 제작 -> UI 구현까지 하기에는 시간이 부족하여 shadcn/ui의 Dialog, Alert Dialog를 제품에 맞게 커스텀하기로 결정하였다.시작하기에 앞서 Modal, Confirm, Alert의 차이를 알아봤다.Modal : 주의가 필요하거나 추가 정보를 제공하는 팝업 콘텐츠. 텍스트, 양식 입력 같은 다른 대화형 요소를 포함할 수 있고 사용자가 Modal 외부를 클릭하거나 특정 버튼(닫기, 취소, 저장)을 클릭할 때까지 다른 인터페이..
-
[React] Avatar Component 구현기Front-End/React 2024. 5. 9. 19:52
🍀 목차 Avatar Component에는 어떤 속성이 필요할까? Interface 구현기 UI 구현기 회고 Avatar Component에는 어떤 속성이 필요할까? Avatar Component는 사용자 또는 개체를 대표하는 이미지를 표시하는 데 사용된다. 예를 들어 프로필 이미지, 쇼핑 사이트의 상점 프로필 등이 포함된다. 다른 디자인 라이브러리를 보며 컴포넌트에 어떤 속성들이 필요할지 참고해 보자. (필수) radius, size, imageUrl, altText 가장 익숙한 형태의 기본 Avatar를 구현하려면 Border Radius와 size, 그리고 img 태그의 src 속성에 전달할 image의 url과 alt 속성에 전달할 대체 텍스트인 altText가 필요할 것으로 예상할 수..
-
[WizSched] Calendar 컴포넌트 - 날짜 이동 기능Front-End/Project 2024. 2. 28. 14:40
🍀 목차목표date-fns기능 구현디자인 구현최종 완성 GIF 목표현재 월에 대한 캘린더를 보여준다.월을 이동할 수 있다.그 외 추가 디자인(오늘임을 확인할 수 있는 color 표시, 전월과 익월 날짜 스타일링)등 date-fns 아무런 라이브러리를 사용하지 않고 구현하고 싶었지만, 목표 기간이 있기에 Date 객체를 다루며 마주칠 에러들을 모두 방지하며 완성하기엔 무리가 있어 보여 라이브러리의 도움을 받기로 했다. 그중에서도 date-fns는 필요한 기능만 가져올 수 있고, TypeScript 지원, 날짜 변경 시 불변성을 지키며 새로운 객체를 반환해 주는 점, 필요로 했던 기능이 모두 있던 점 등을 매력적으로 느껴 선택하게 되었다. // 설치yarn add date-fns 사용한 메서드들은 아..
