참고할 만한 사이트
- astro
- 참고
- 디자인
사이트 디자인·UI를 고칠 때 참고할 사이트 모음. 새로 발견하면 여기에 계속 추가한다.
| 사이트 | 한 줄 요약 | 참고할 점 |
|---|---|---|
| daisyUI | Tailwind CSS 플러그인 형태의 UI 컴포넌트 모음 (v5) | 버튼·카드·토글 같은 기본 부품 디자인, 테마(라이트/다크 등) 구성 |
| Shadcnblocks Admin – Todo | shadcn/ui로 만든 관리자 대시보드 템플릿의 할 일(Todo) 화면 | 사이드바 구성, 목록·칸반·캘린더 보기 전환, 필터·정렬, 태그·우선순위 표시, 명령 팔레트(⌘K) |
daisyUI
- 무엇인가: Tailwind CSS 위에 얹어 쓰는 컴포넌트 모음.
btn,card처럼 의미 있는 클래스 이름 하나로 부품을 만든다. - Astro와의 관계: JavaScript 없이 CSS 클래스만 쓰는 방식이라 Astro를 포함해 어떤 프레임워크에서도 쓸 수 있다.
- 이 사이트에 쓰려면: 지금 이 사이트는 Tailwind를 쓰지 않는다(
src/styles/의 직접 쓴 CSS). 바로 가져다 쓰기보다는 색·간격·부품 모양을 눈으로 참고하는 용도가 현실적이다.
Shadcnblocks Admin (Todo)
- 무엇인가: shadcn/ui 컴포넌트로 만든 관리자 화면 키트의 데모. Todo 외에도 이커머스, 프로젝트 관리, AI 채팅 같은 예시 화면이 사이드바에 있다.
- 만든 기술: Next.js + React + shadcn/ui.
- Astro와의 관계: React 컴포넌트라 Astro에서 쓰려면 React 통합(
@astrojs/react)이 필요하다. 이 사이트는.astro컴포넌트만 쓰므로, 화면 구성 아이디어(사이드바, 보기 전환, 필터 바)를 참고하는 용도로 본다.