UIComponent
-
[shadcn/ui] Select Component -> Multiple Select Component 커스텀Front-End/React 2024. 6. 4. 00:17
🍀 목차새로운 prop 만들기Select Component의 메서드 활용하기작성한 스토리회고 개요 단일 선택만 가능한 shadcn/ui의 Select를 다중 선택이 가능하도록 Multiple Select로 커스텀해보자.새로운 prop 만들기 Anatomyimport * as Select from '@radix-ui/react-select';export default () => ( ..
-
[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가 필요할 것으로 예상할 수..
