= {
+ weekly: 'WEEKLY',
+ monthly: 'MONTHLY',
+ yearly: 'YEARLY',
+}
+
+export function DashboardView() {
+ const chartMetric = useAdminStore(s => s.chartMetric)
+ const period = useAdminStore(s => s.period)
+ const setMetric = useAdminStore(s => s.setMetric)
+ const setPeriod = useAdminStore(s => s.setPeriod)
+ const selectMenu = useAdminStore(s => s.selectMenu)
+
+ const currentYear = new Date().getFullYear()
+ const { data: chartData } = useDashboardChart(PERIOD_MAP[period], currentYear)
+ const { data: weekly } = useWeeklySummary()
+
+ // Build chart geometry from API data or fall back to mock
+ const apiSeries = chartData
+ ? (chartMetric === 'members' ? chartData.memberChart : chartData.workspaceChart)
+ : null
+ const chart = buildChart(chartMetric, period, apiSeries ?? undefined)
+
+ const totalMembers = apiSeries && chartMetric === 'members'
+ ? (chartData?.memberChart.dataPoints.slice(-1)[0]?.value ?? 0)
+ : null
+ const totalWorkspaces = apiSeries && chartMetric === 'workspaces'
+ ? (chartData?.workspaceChart.dataPoints.slice(-1)[0]?.value ?? 0)
+ : null
+
+ const yoy = apiSeries
+ ? `${apiSeries.yearOverYearGrowthRate > 0 ? '+' : ''}${(apiSeries.yearOverYearGrowthRate * 100).toFixed(1)}%`
+ : chart.yoy
+
+ const kpis = [
+ {
+ label: '총 회원 수',
+ value: totalMembers !== null ? totalMembers.toLocaleString() : '—',
+ unit: '명',
+ dot: '#07c079',
+ delta: chartData ? `▲ ${(chartData.memberChart.yearOverYearGrowthRate * 100).toFixed(1)}%` : '—',
+ deltaNote: '전년 대비',
+ deltaColor: '#07c079',
+ on: () => selectMenu('members'),
+ },
+ {
+ label: '등록 업장 수',
+ value: totalWorkspaces !== null ? totalWorkspaces.toLocaleString() : '—',
+ unit: '개',
+ dot: '#003BDC',
+ delta: chartData ? `▲ ${(chartData.workspaceChart.yearOverYearGrowthRate * 100).toFixed(1)}%` : '—',
+ deltaNote: '전년 대비',
+ deltaColor: '#07c079',
+ on: () => selectMenu('workspaces'),
+ },
+ {
+ label: '주간 신고 접수',
+ value: weekly ? weekly.weeklyReportCount.toLocaleString() : '—',
+ unit: '건',
+ dot: '#e8920b',
+ delta: '',
+ deltaNote: '이번 주',
+ deltaColor: '#e8920b',
+ on: () => selectMenu('reports'),
+ },
+ {
+ label: '신규 매니저',
+ value: weekly ? weekly.weeklyNewWorkerCount.toLocaleString() : '—',
+ unit: '명',
+ dot: '#dc0000',
+ delta: '',
+ deltaNote: '이번 주',
+ deltaColor: '#828282',
+ on: () => selectMenu('members'),
+ },
+ ]
+
+ const metricItems: Seg[] = [
+ seg(chartMetric === 'members', '회원', () => setMetric('members' as Metric)),
+ seg(chartMetric === 'workspaces', '업장', () => setMetric('workspaces' as Metric)),
+ ]
+ const periodItems: Seg[] = [
+ seg(period === 'weekly', '주간', () => setPeriod('weekly' as Period)),
+ seg(period === 'monthly', '월간', () => setPeriod('monthly' as Period)),
+ seg(period === 'yearly', '연간', () => setPeriod('yearly' as Period)),
+ ]
+
+ return (
+ <>
+
+
대시보드
+ 기준 연도 {currentYear}
+
+
+
+ {kpis.map(k => (
+
+ ))}
+
+
+
+
+
+ 성장 추이
+
+
+ 전년 대비{' '}
+
+ {yoy}
+ {' '}
+ 증가
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {label}
+
+ {value}
+
+ {' '}
+ {unit}
+
+
+
+ )
+}
diff --git a/src/pages/admin/views/JobDetailView.tsx b/src/pages/admin/views/JobDetailView.tsx
new file mode 100644
index 0000000..100c8a0
--- /dev/null
+++ b/src/pages/admin/views/JobDetailView.tsx
@@ -0,0 +1,178 @@
+import { badge } from '@/shared/admin/data'
+import type { Job } from '@/shared/admin/data'
+import { useAdminStore } from '@/shared/stores/useAdminStore'
+import { Badge } from '@/shared/ui/Badge'
+import { BackButton, FieldGrid } from './detailParts'
+
+export function JobDetailView({ job }: { job: Job }) {
+ const openConfirm = useAdminStore(s => s.openConfirm)
+ const b = badge(job.tone)
+
+ const fields = [
+ { label: '지원자 수', value: `${job.applicants}명` },
+ { label: '등록일', value: job.createdAt },
+ { label: '근무 시급', value: '12,500원' },
+ { label: '모집 인원', value: '2명' },
+ ]
+
+ const content =
+ '주말 오전 시간대 홀서빙 근무자를 모집합니다. 친절하고 성실한 분을 우대하며, 경력자는 시급 협의 가능합니다. 근무 시간은 토·일 09:00~14:00 입니다.'
+
+ return (
+ <>
+
+
+
+
+
+
+ {job.workspace}
+
+
+
+ {job.title}
+
+
+
+
+
+ 공고 내용 (강제 수정 가능)
+
+
+
+
+
+
+
+
+
+ {config.title}
+
+ {config.isMock && (
+
+ 미연동 · 예시
+
+ )}
+
+ {config.subtitle && (
+
+ {config.subtitle}
+
+ )}
+
+ {config.hasPrimary && (
+
+ )}
+
+ {config.tabs.map(t => (
+
+ ))}
+
+ )}
+
+
+ {config.filters.map(f => (
+
+ ))}
+
+
+
+
+
+
+
+
+ {config.columns.map(col => (
+ |
+ {col.label}
+ |
+ ))}
+
+
+
+ {isLoading && (
+
+ |
+ 불러오는 중...
+ |
+
+ )}
+ {!isLoading && config.rows.length === 0 && (
+
+ |
+ 데이터가 없습니다
+ |
+
+ )}
+ {!isLoading && config.rows.map((row, ri) => (
+
+ {row.cells.map((cell, ci) => (
+ |
+
+ |
+ ))}
+
+ ))}
+
+
+
+
+ {config.pages.map(p => (
+
+ ))}
+
+
+
+ )
+}
diff --git a/src/pages/admin/views/MemberDetailView.tsx b/src/pages/admin/views/MemberDetailView.tsx
new file mode 100644
index 0000000..9726b5b
--- /dev/null
+++ b/src/pages/admin/views/MemberDetailView.tsx
@@ -0,0 +1,370 @@
+import { badge, repRows } from '@/shared/admin/data'
+import type { Member } from '@/shared/admin/data'
+import { userRoleTone, userStatusTone } from '@/shared/admin/enums'
+import { useMember, useUpdateMemberStatus } from '@/features/members/hooks/useMembers'
+import { useAdminStore } from '@/shared/stores/useAdminStore'
+import { Badge } from '@/shared/ui/Badge'
+import { BackButton, FieldGrid } from './detailParts'
+
+export function MemberDetailView({ member }: { member: Member }) {
+ const openConfirm = useAdminStore(s => s.openConfirm)
+ const openPasswordModal = useAdminStore(s => s.openPasswordModal)
+
+ // Re-fetch by ID for fresh data (contact/birthday/gender/reputationSummary etc.)
+ const { data: detail } = useMember(member.id)
+ const updateStatus = useUpdateMemberStatus(member.id)
+
+ // Use fetched detail if available, else fall back to row snapshot
+ const name = detail?.name ?? member.name
+ const email = detail?.email ?? member.email
+ const nickname = detail?.nickname ?? member.nickname
+ const roleLabel = detail?.role.description ?? member.role
+ const statusLabel = detail?.status.description ?? member.status
+ const roleTone = detail ? userRoleTone(detail.role.value) : member.roleTone
+ const statusTone = detail ? userStatusTone(detail.status.value) : member.statusTone
+ const contact = detail?.contact ?? member.contact
+ const birthday = detail?.birthday ?? member.birthday
+ const gender = detail?.gender.description ?? member.gender
+ const createdAt = detail?.createdAt ?? member.createdAt
+ const updatedAt = detail?.updatedAt ?? member.updatedAt
+ const topKeywords = detail?.reputationSummary?.topKeywords ?? []
+
+ const rb = badge(roleTone)
+ const sb = badge(statusTone)
+
+ const fields = [
+ { label: '닉네임', value: nickname },
+ { label: '연락처', value: contact },
+ { label: '생년월일', value: birthday },
+ { label: '성별', value: gender },
+ { label: '가입일', value: createdAt },
+ { label: '최종 수정', value: updatedAt },
+ ]
+
+ function handleStatusChange(status: 'ACTIVE' | 'SUSPENDED' | 'DELETED', title: string, desc: string, label: string, color: string) {
+ openConfirm({
+ title,
+ desc,
+ label,
+ color,
+ onConfirm: () => updateStatus.mutate({ status }),
+ })
+ }
+
+ return (
+ <>
+
+
+
+
+
+
+ {name.charAt(0)}
+
+
+
+
+ {name}
+
+
+
+
+
+ {email}
+
+
+
+
+
+
+
+ 평판 관리
+
+
+ 키워드는 실 데이터 · 개별 목록은 예시
+
+
+ {topKeywords.length > 0 && (
+
+ {topKeywords.map(r => (
+
+ {r.emoji && {r.emoji}}
+
+ {r.description}
+
+
+ {r.count}
+
+
+ ))}
+
+
+
+
+ {['구분', '내용', '상대'].map(h => (
+ |
+ {h}
+ |
+ ))}
+
+ 상태
+ |
+
+ 관리
+ |
+
+
+
+ {repRows.map((r, i) => {
+ const b = badge(r.tone)
+ return (
+
+ |
+ {r.kind}
+ |
+
+ {r.content}
+ |
+
+ {r.counterpart}
+ |
+
+
+ |
+
+
+ |
+
+ )
+ })}
+
+
+
+
+
+
+
+
+
+
+
+ {targetName}
+
+
+
+
+
+
+ 신고 사유
+
+
+ {reason}
+
+
+