Admin Dashboard

Vue 3 기반의 사용자 관리 어드민 대시보드입니다. 사용자 목록 조회, 검색/필터, 정렬, 페이지네이션, 사용자 상세 편집 등의 기능을 제공합니다.

기술 스택

분류	기술
프레임워크	Vue 3.5 + TypeScript 5
빌드 도구	Vite 7
상태 관리	Pinia 3
라우팅	Vue Router 4
유틸리티	VueUse 14
런타임	Node.js ^20.19.0 || >=22.12.0

주요 기능

• 사용자 관리: 목록 조회, 생성, 수정, 삭제
• 검색 및 필터: 키워드 검색 + 상태(active / inactive) 필터
• 정렬: 가입일 / 이름 / 상태 기준, 오름차순·내림차순 전환
• 페이지네이션: 페이지당 10 / 20 / 50개 선택
• URL 쿼리 동기화: 필터·정렬·페이지 상태가 URL에 반영되어 북마크 및 뒤로가기 지원
• 테마 전환: 라이트 / 다크 모드 (localStorage 저장)
• 인증: 라우트 가드 기반 로그인/로그아웃

테스트 계정

항목	값
아이디	admin
비밀번호	1234

프로젝트 구조

src/
├── components/
│   ├── ui/          # 범용 UI 컴포넌트
│   ├── users/       # 사용자 목록 관련 컴포넌트
│   └── user-detail/ # 사용자 상세 관련 컴포넌트
├── views/           # 페이지 컴포넌트
├── stores/          # 사용자 상태 관리 (Pinia)
├── composables/     # 재사용 가능한 로직
├── router/          # Vue Router 설정
├── types/           # TypeScript 타입 정의
├── constants/       # 상수 및 더미 데이터
├── utils/           # 유틸리티 함수
└── styles/          # 전역 스타일 및 CSS 변수

아키텍처

상태 관리 (Pinia)

src/stores/users.ts에서 사용자 데이터와 UI 상태를 통합 관리합니다. 필터·정렬·페이지 조건은 computed로 순차 적용되어 최종 목록을 파생합니다.

users (원본) → filtered (검색+상태) → sorted (정렬) → paged (페이지네이션)

URL 동기화 (useUsersQuerySync)

src/composables/useUsersQuerySync.ts가 Pinia 상태와 URL 쿼리 파라미터를 양방향으로 동기화합니다. 필터·정렬·페이지 변경 시 URL이 자동 갱신되어 브라우저 뒤로가기 및 링크 공유가 지원됩니다.

Composables

관심사 분리를 위해 재사용 가능한 로직을 composable로 추출합니다.

파일	역할
useTheme.ts	테마 전환 및 시스템 설정 감지
usePageSizeSetting.ts	페이지 사이즈 localStorage 저장
useUserDetailForm.ts	편집 폼 상태 및 유효성 검사
useUsersQuerySync.ts	URL ↔ Pinia 양방향 동기화