Sample Admin

SolidJS 기반의 어드민 대시보드 애플리케이션입니다.

기술 스택

• Runtime: Bun
• Build: Vite 7 (Rolldown)
• Framework: SolidJS
• Routing: @solidjs/router
• Data Fetching: @tanstack/solid-query + ky
• API Mocking: MSW (Mock Service Worker)
• UI: shadcn 스타일 컴포넌트 (New York 테마)
• Styling: Tailwind CSS 4 + tailwind-variants

기능

• 대시보드: 전체 통계 요약
• 회원관리: 회원 목록 조회, 검색, 수정, 삭제
• 관리자관리: 관리자 목록 조회, 권한 수정
• 공지사항: 공지 작성, 수정, 삭제
• 상단알림배너: 배너 등록, 수정, 삭제, 활성화/비활성화
• 다크모드: 시스템/라이트/다크 테마 지원

시작하기

# 의존성 설치
bun install

# 개발 서버 실행
bun dev

# 빌드
bun run build

# 프로덕션 미리보기
bun run preview

프로젝트 구조 (FSD Architecture)

Feature-Sliced Design 아키텍처를 따릅니다.

src/
├── app/                      # 앱 초기화 레이어
│   ├── providers/            # 전역 프로바이더 (QueryClient, Theme)
│   ├── router/               # 라우터 설정
│   └── index.tsx             # 앱 엔트리
│
├── pages/                    # 페이지 레이어
│   ├── dashboard/
│   ├── users/
│   ├── admins/
│   ├── notices/
│   └── banners/
│
├── widgets/                  # 독립적인 UI 블록
│   ├── sidebar/              # 사이드바 네비게이션
│   ├── header/               # 헤더 + 테마 토글
│   └── layout/               # 메인 레이아웃
│
├── entities/                 # 비즈니스 엔티티
│   ├── user/
│   │   ├── api/              # API 호출 (queryOptions)
│   │   └── model/            # 타입 정의
│   ├── admin/
│   ├── notice/
│   └── banner/
│
├── shared/                   # 공유 리소스
│   ├── api/                  # API 클라이언트 (ky)
│   ├── lib/                  # 유틸리티, 훅
│   └── ui/                   # UI 컴포넌트 (shadcn 스타일)
│
└── mocks/                    # MSW 모킹
    ├── data/                 # Mock 데이터
    ├── handlers.ts           # API 핸들러
    └── browser.ts            # 브라우저 워커

FSD 레이어 설명

레이어	설명
app	앱 초기화, 프로바이더, 라우터
pages	라우트별 페이지 컴포넌트
widgets	독립적인 UI 블록 (헤더, 사이드바 등)
entities	비즈니스 엔티티 (타입, API)
shared	공유 UI, 유틸리티, API 클라이언트

API 패턴

queryOptions 패턴을 사용하여 API 호출을 구조화합니다:

// entities/user/api/userApi.ts
export const userApi = {
  list: (params?: PaginationParams) =>
    queryOptions({
      queryKey: ['users', 'list', params],
      queryFn: () => api.get('users', { searchParams: params }).json(),
    }),
  
  at: (id: string) =>
    queryOptions({
      queryKey: ['users', 'detail', id],
      queryFn: () => api.get(`users/${id}`).json(),
    }),
};

// pages/users/ui/UsersPage.tsx
const query = createQuery(() => userApi.list({ page: 1, limit: 10 }));

License

MIT