);
function renderItem(it) {
const subIds = it.hasSub ? ALL_SUB_IDS[it.subKey] : null;
const active = it.hasSub ? subIds.includes(page) : page === it.id;
const showPop = it.hasSub && hoverId === it.id;
const subs = it.hasSub ? SUB_MAP[it.subKey] : null;
const isBottom = it.anchor === 'bottom';
return (
);
}
}
// ============ 헤더 (한 줄) ============
function C_TopHeader({ onOpenCustomerRegister, onOpenGuestSales, onOpenClosing } = {}) {
return (
);
}
// ============ 서브헤더 (예약현황 + 날짜 + 뷰전환 + 필터 + 예약추가 + 페이지네이션) ============
function C_SubHeader({ view, setView, tab, setTab, pageInfo, statusFilter, setStatusFilter, selDate, setSelDate }) {
const { offset, setOffset, visibleCount, totalCount, showPager } = pageInfo;
const step = Math.max(1, visibleCount);
const canPrev = offset > 0;
const canNext = offset + visibleCount < totalCount;
const from = totalCount === 0 ? 0 : offset + 1;
const to = Math.min(offset + visibleCount, totalCount);
const [calOpen, setCalOpen] = React.useState(false);
const calRef = React.useRef(null);
React.useEffect(() => {
if (!calOpen) return;
const onDoc = (e) => {
if (calRef.current && !calRef.current.contains(e.target)) setCalOpen(false);
};
document.addEventListener('mousedown', onDoc);
return () => document.removeEventListener('mousedown', onDoc);
}, [calOpen]);
const dowKr = (y, m, d) => ['일','월','화','수','목','금','토'][new Date(y, m-1, d).getDay()];
const stepDate = (delta) => {
const dt = new Date(selDate.y, selDate.m-1, selDate.d);
const unitDays = view === 'day' ? 1 : view === 'week' ? 7 : 0;
if (view === 'month') {
let m = selDate.m + delta, y = selDate.y;
if (m < 1) { m = 12; y -= 1; }
if (m > 12) { m = 1; y += 1; }
setSelDate(prev => ({ ...prev, y, m }));
return;
}
dt.setDate(dt.getDate() + unitDays * delta);
setSelDate({ y: dt.getFullYear(), m: dt.getMonth()+1, d: dt.getDate() });
};
const goToday = () => setSelDate({ y: 2026, m: 9, d: 21 });
return (
{/* 날짜 네비 */}
{calOpen && (
{ setSelDate(d); setCalOpen(false); }}
/>
)}
{/* 뷰 전환 */}
{['day','week','month'].map(v => (
))}
{/* 디자이너 페이지 (일 뷰만, 10명 단위) */}
{showPager && view === 'day' && (() => {
const pages = Math.ceil(totalCount / visibleCount);
const page = Math.floor(offset / visibleCount) + 1;
return (
{page} / {pages}
);
})()}
{/* 액션 (우측): 필터 · 예약추가 */}
);
}
// ============ 날짜 드롭다운 캘린더 ============
function C_DateDropdownCal({ selDate, onSelect }) {
const [year, setYear] = React.useState(selDate.y);
const [month, setMonth] = React.useState(selDate.m);
const today = { y: 2026, m: 9, d: 21 };
const daysInMonth = new Date(year, month, 0).getDate();
const firstDow = new Date(year, month - 1, 1).getDay();
const cells = [];
for (let i = 0; i < firstDow; i++) cells.push(null);
for (let d = 1; d <= daysInMonth; d++) cells.push(d);
const prev = () => {
if (month === 1) { setYear(y => y - 1); setMonth(12); } else setMonth(m => m - 1);
};
const next = () => {
if (month === 12) { setYear(y => y + 1); setMonth(1); } else setMonth(m => m + 1);
};
return (
{/* 년월 네비 */}
{year}년 {String(month).padStart(2,'0')}월
{/* 요일 */}
{['일','월','화','수','목','금','토'].map((w, i) => (
{w}
))}
{/* 날짜 */}
{cells.map((d, i) => {
if (!d) return
;
const on = selDate.y === year && selDate.m === month && selDate.d === d;
const isToday = today.y === year && today.m === month && today.d === d;
const dow = i % 7;
return (
);
})}
);
}
// ============ 예약 상태 필터 버튼 + 팝오버 ============
const STATUS_OPTIONS = [
{ id:'confirmed', label:'예약 확정', color: C_BLUE },
{ id:'visited', label:'방문 완료', color:'#059669' },
{ id:'pending', label:'담당 미지정', color:'#7C3AED' },
{ id:'noshow', label:'노쇼', color:'#DC2626' },
{ id:'block', label:'예약불가', color:'#EF4444' },
];
function C_StatusFilterButton({ statusFilter, setStatusFilter }) {
const [open, setOpen] = React.useState(false);
const anchorRef = React.useRef(null);
React.useEffect(() => {
if (!open) return;
const onDoc = (e) => {
if (anchorRef.current && !anchorRef.current.contains(e.target)) setOpen(false);
};
document.addEventListener('mousedown', onDoc);
return () => document.removeEventListener('mousedown', onDoc);
}, [open]);
const activeCount = Object.values(statusFilter).filter(Boolean).length;
const isAllOn = activeCount === STATUS_OPTIONS.length;
const hasFilter = !isAllOn && activeCount > 0;
const noneOn = activeCount === 0;
const toggle = (id) => {
setStatusFilter(prev => ({ ...prev, [id]: !prev[id] }));
};
const toggleAll = () => {
if (isAllOn) {
// 전체 해제
const off = {};
STATUS_OPTIONS.forEach(o => { off[o.id] = false; });
setStatusFilter(off);
} else {
const on = {};
STATUS_OPTIONS.forEach(o => { on[o.id] = true; });
setStatusFilter(on);
}
};
return (
{open && (
예약 상태
{STATUS_OPTIONS.map(opt => {
const on = !!statusFilter[opt.id];
return (
);
})}
)}
);
}
// ============ 대기 스트립 (상단바에 인라인, 클릭시 팝오버) ============
function C_WaitingWidget() {
const [expanded, setExpanded] = React.useState(false);
const anchorRef = React.useRef(null);
// 바깥 클릭시 닫힘
React.useEffect(() => {
if (!expanded) return;
const onDoc = (e) => {
if (anchorRef.current && !anchorRef.current.contains(e.target)) setExpanded(false);
};
document.addEventListener('mousedown', onDoc);
return () => document.removeEventListener('mousedown', onDoc);
}, [expanded]);
return (
{/* 트리거: 상단바 알약 버튼 */}
{/* 펼침 팝오버 */}
{expanded && (
{/* 대기 섹션 */}
대기 · {WAITING_LIST.length}명
{WAITING_LIST.map((w, i) => (
{w.service} · 선호 {w.preferred}
))}
{/* 시술 중 섹션 */}
시술 중 · {RESERVATIONS.filter(r => r.status==='visited').length}명
{RESERVATIONS.filter(r => r.status==='visited').slice(0, 5).map(r => {
const d = DESIGNERS.find(x => x.id === r.designer);
return (
{r.customer}
{r.menu}
{d.name}
);
})}
)}
);
}
// ============ 타임 그리드 (가로스크롤 X, 페이지네이션) ============
function C_TimeGrid({ visibleDesigners, colWidth, statusFilter }) {
const slots = [];
for (let m = DAY_START; m < DAY_END; m += SLOT_MIN) slots.push(m);
const now = 14 * 60 + 22;
const totalWidth = C_TIME_COL_W + visibleDesigners.length * colWidth;
return (
{visibleDesigners.map((d, i) => (
))}
{slots.map((m) => {
const isHour = m % 60 === 0;
return (
{minToTime(m)}
{visibleDesigners.map((d, i) => (
))}
);
})}
);
}
function C_ReservationLayer({ visibleDesigners, colWidth, statusFilter }) {
const totalCols = visibleDesigners.length;
// 각 디자이너 셀은 좌측 경계선(1px)이 콘텐츠를 안쪽으로 밀어냄.
// 카드는 슬롯의 내부 콘텐츠 영역에 정확히 들어맞도록 배치:
// - left = 시간컬럼(56) + (idx * colWidth) + 좌측 border(1) + 좌측 인셋(2)
// - width = colWidth - 좌측 border(1) - 좌우 인셋(2*2)
// - top = (분오프셋 / 30 * 슬롯높이) + 슬롯 상단 border(1) + 상단 인셋(1)
// - height= duration/30 * 슬롯높이 - 상단 border(1) - 상하 인셋(2)
const BORDER = 1;
const INSET_X = 2;
const INSET_Y = 1;
return (
{RESERVATIONS.map(r => {
// 취소된 예약은 러너석에서 숨김
if (r.status === 'cancelled') return null;
// 상태 필터 적용
if (statusFilter) {
if (r.type === 'block') {
if (!statusFilter.block) return null;
} else if (r.status && !statusFilter[r.status]) {
return null;
}
}
const designerIdx = visibleDesigners.findIndex(d => d.id === r.designer);
if (designerIdx < 0) return null;
const top = (timeToMin(r.start) - DAY_START) / SLOT_MIN * C_SLOT_HEIGHT + BORDER + INSET_Y;
const height = r.duration / SLOT_MIN * C_SLOT_HEIGHT - BORDER - INSET_Y * 2;
const left = C_TIME_COL_W + designerIdx * colWidth + BORDER + INSET_X;
const width = colWidth - BORDER - INSET_X * 2;
if (r.type === 'block') {
const isDayoff = r.blockType === 'dayoff';
const isUnavail = r.blockType === 'unavailable';
// 종일 휴무 → 무거운 대각 스트라이프 + 회색 톤
if (isDayoff) {
return (
);
}
// 예약불가 (사유 포함) → 붉은톤 스트라이프 + 사유 표시
if (isUnavail) {
return (
);
}
// 기본 블록 (점심/청소 등)
return (
{r.label}
);
}
const st = C_STATUS[r.status];
return (
window.__openSales && window.__openSales({ customer: r.customer, menu: r.menu, designer: r.designer, start: r.start, memo: r.memo })} style={{
position:'absolute', top, left, height, width,
background: st.bg, color: st.text, borderRadius:6,
padding:'6px 8px', pointerEvents:'auto',
cursor:'pointer', overflow:'hidden',
boxShadow:'0 1px 2px rgba(11,20,37,0.06)',
boxSizing:'border-box',
}}>
{r.start}
{window.BOOKING_DEPOSITS && window.BOOKING_DEPOSITS[r.customer] && (
₩
)}
{r.memo && ●}
{r.customer}
{height > 40 && (
{r.menu}
)}
);
})}
);
}
function C_NowLine({ now, totalCols }) {
const top = (now - DAY_START) / SLOT_MIN * C_SLOT_HEIGHT;
return (
);
}
const c_iconBtn = {
width:34, height:34, display:'flex', alignItems:'center', justifyContent:'center',
border:`1px solid ${C_BORDER}`, borderRadius:8, background:C_SURFACE,
color:C_INK, cursor:'pointer',
};
const c_iconBtnSm = {
width:28, height:28, display:'flex', alignItems:'center', justifyContent:'center',
border:`1px solid ${C_BORDER}`, borderRadius:6, background:C_SURFACE,
color:C_INK, cursor:'pointer',
};
const c_ghostBtn = {
padding:'8px 12px', border:`1px solid ${C_BORDER}`, borderRadius:8,
background:C_SURFACE, color:C_INK, fontSize:12.5, fontWeight:500, cursor:'pointer',
};
const c_ghostBtnSm = {
padding:'6px 10px', border:`1px solid ${C_BORDER}`, borderRadius:6,
background:C_SURFACE, color:C_INK, fontSize:12, fontWeight:500, cursor:'pointer',
};
const c_pagerBtn = {
width:26, height:26, display:'flex', alignItems:'center', justifyContent:'center',
border:`1px solid ${C_BORDER}`, borderRadius:5, background:C_SURFACE,
color:C_INK, fontFamily:'inherit',
};
// ============ 예약 페이지 ============
function C_BookingPage() {
const [view, setView] = React.useState('day');
const [tab, setTab] = React.useState('booking');
// 현재 선택 날짜 (기본: 2026-09-08 화)
const [selDate, setSelDate] = React.useState({ y: 2026, m: 9, d: 8 });
// 주간 뷰 담당자 필터 (한 명 or null=전체)
const [weekDesigner, setWeekDesigner] = React.useState(null);
// 예약 상태 필터 (기본: 모두 활성)
const [statusFilter, setStatusFilter] = React.useState({
confirmed: true, visited: true, pending: true, noshow: true, block: true,
});
// 디자이너 8명 전부 화면에 표시 (페이지네이션은 뷰포트가 매우 좁을 때만 발동)
const [offset, setOffset] = React.useState(0);
const totalCount = DESIGNERS.length;
// 한 페이지에 무조건 10명씩
const PAGE_SIZE = 10;
const visibleCount = Math.min(PAGE_SIZE, totalCount);
// 페이지 단위(10명) offset 유지 — 마지막 페이지는 남은 인원만
React.useEffect(() => {
const maxOffset = Math.max(0, (Math.ceil(totalCount / visibleCount) - 1) * visibleCount);
if (offset > maxOffset) setOffset(maxOffset);
}, [visibleCount, totalCount, offset]);
// 마지막 페이지가 10명 미만이어도 컬럼 폭 유지 (빈 컬럼으로 채움)
const visibleDesigners = (() => {
const arr = DESIGNERS.slice(offset, offset + visibleCount);
while (arr.length < visibleCount) {
arr.push({ id:`__empty_${arr.length}`, name:'', role:'', color:'transparent', empty:true });
}
return arr;
})();
const showPager = totalCount > visibleCount;
// 페이지 전체 폭 = 10명 컬럼(88px) + 시간(56) + 스크롤바(11) + border(1) = 948
// 페이지 폭은 고정(948) — 인원이 늘면 컬럼 폭이 자동 축소
const SCROLLBAR_W = 11;
const PAGE_W = 948;
const GRID_CLIENT_W = PAGE_W - SCROLLBAR_W - 1;
const colWidth = (GRID_CLIENT_W - C_TIME_COL_W) / visibleCount;
const SidePanel = window.C_ReservationSidePanel;
return (
{view === 'day' && (
)}
{view === 'week' && window.C_BookingWeekView && (
React.createElement(window.C_BookingWeekView, {
selDate, setSelDate, setView,
statusFilter,
designerFilter: weekDesigner, setDesignerFilter: setWeekDesigner,
})
)}
{view === 'month' && window.C_BookingMonthView && (
React.createElement(window.C_BookingMonthView, {
selDate, setSelDate, setView,
statusFilter,
})
)}
{/* 사이드 패널: 기존 페이지 영역 침범 안 하도록 오른쪽 별도 부착 */}
{SidePanel && (
)}
);
}
// 아직 시안이 없는 페이지 안내
function C_ComingSoon({ title }) {
return (
{title.toUpperCase()}
시안 준비 중
이 화면의 시안은 아직 작업되지 않았습니다.
);
}
// ============ 매장 일정 페이지 ============
function C_SchedulePage() {
const [year, setYear] = React.useState(SCHEDULE_MONTH.year);
const [month, setMonth] = React.useState(SCHEDULE_MONTH.month);
const [view, setView] = React.useState('month'); // month | week
const [tab, setTab] = React.useState('salon'); // salon | event
const [layout, setLayout] = React.useState('grid'); // grid | matrix | list (Tweaks)
const [modalDate, setModalDate] = React.useState(null);
const [tooltip, setTooltip] = React.useState(null); // {x, y, ev}
const [designerFilter, setDesignerFilter] = React.useState(null); // null=all
const prevMonth = () => {
if (month === 1) { setYear(y => y - 1); setMonth(12); } else setMonth(m => m - 1);
};
const nextMonth = () => {
if (month === 12) { setYear(y => y + 1); setMonth(1); } else setMonth(m => m + 1);
};
const today = { year: 2026, month: 9, day: 11 };
// 이번달 이벤트 (필터)
const events = SCHEDULE_EVENTS.filter(ev => {
const [y, m] = ev.date.split('-').map(Number);
if (y !== year || m !== month) return false;
if (designerFilter && ev.designerId && ev.designerId !== designerFilter) return false;
return true;
});
const eventsByDay = {};
events.forEach(ev => {
const [, , d] = ev.date.split('-').map(Number);
if (!eventsByDay[d]) eventsByDay[d] = [];
eventsByDay[d].push(ev);
});
const PAGE_W = 948;
return (
{ setYear(2026); setMonth(9); }}
view={view} setView={setView} tab={tab} setTab={setTab}
layout={layout} setLayout={setLayout}
designerFilter={designerFilter} setDesignerFilter={setDesignerFilter}
onAddNew={() => setModalDate({year, month, day: today.day})}
/>
{view === 'week' && window.C_ScheduleWeek ? (
React.createElement(window.C_ScheduleWeek, {
year, month, today,
layout, events,
onDayClick: (day, mo, yr) => setModalDate({year: yr || year, month: mo || month, day}),
onCellClick: (day, designerId, mo, yr) => setModalDate({year: yr || year, month: mo || month, day, designerId}),
onEventHover: setTooltip,
})
) : (
<>
{layout === 'grid' && (
setModalDate({year, month, day})}
onEventHover={setTooltip}
/>
)}
{layout === 'matrix' && (
setModalDate({year, month, day, designerId})}
/>
)}
{layout === 'list' && (
setModalDate({year, month, day})}
/>
)}
)}
{modalDate &&
setModalDate(null)}/>}
{tooltip && setTooltip(null)}/>}
{window.C_ReservationSidePanel &&
}
);
}
// ── 서브헤더 ──
function C_ScheduleSubHeader({ year, month, onPrev, onNext, onToday, view, setView, tab, setTab, layout, setLayout, designerFilter, setDesignerFilter, onAddNew }) {
return (
{/* 년월 네비게이션 */}
{formatMonthLabel(year, month)}
{/* 일정 추가 */}
);
}
// ── 월간 그리드 (기본) ──
function C_ScheduleMonthGrid({ year, month, today, eventsByDay, onDayClick, onEventHover }) {
const cells = buildCalendarGrid(year, month);
const weekdays = ['일','월','화','수','목','금','토'];
const isToday = (d, inMonth) => inMonth && year === today.year && month === today.month && d === today.day;
return (
{/* 요일 헤더 */}
{weekdays.map((w, i) => (
{w}
))}
{/* 날짜 그리드 */}
{cells.map((c, i) => {
const dateStr = c.inMonth ? `${year}-${String(month).padStart(2,'0')}-${String(c.day).padStart(2,'0')}` : null;
const holiday = dateStr && HOLIDAYS[dateStr];
const dow = i % 7;
const dayEvents = c.inMonth ? (eventsByDay[c.day] || []) : [];
const dayoffs = dayEvents.filter(e => e.type === 'dayoff');
const t = isToday(c.day, c.inMonth);
return (
c.inMonth && onDayClick(c.day)}
className={c.inMonth ? 'c-schedule-cell' : ''}
style={{
padding:'8px 8px 6px',
borderRight: dow < 6 ? `1px solid ${C_BORDER}` : 'none',
borderBottom: i < 35 ? `1px solid ${C_BORDER}` : 'none',
background: !c.inMonth ? '#FAFBFD' : holiday ? '#FEF2F2' : t ? '#EFF6FF' : C_SURFACE,
cursor: c.inMonth ? 'pointer' : 'default',
position:'relative',
display:'flex', flexDirection:'column', gap:4,
minHeight:0, overflow:'hidden',
transition:'background 0.12s',
}}>
{/* 날짜 번호 */}
{c.day}
{holiday && c.inMonth && (
{holiday}
)}
{/* 이벤트 배지 */}
{c.inMonth && (
{dayoffs.slice(0, 3).map(ev => {
const d = DESIGNERS.find(x => x.id === ev.designerId);
if (!d) return null;
return (
{
const r = e.currentTarget.getBoundingClientRect();
onEventHover({ x: r.left, y: r.bottom + 4, ev, designer: d });
}}
onMouseLeave={() => onEventHover(null)}
onClick={(e) => e.stopPropagation()}
style={{
display:'flex', alignItems:'center', gap:5,
padding:'2px 6px', borderRadius:4,
background:'#F1F5F9',
fontSize:10.5, fontWeight:500, color:C_INK,
whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis',
cursor:'pointer',
}}>
{d.name} 휴무
);
})}
{dayoffs.length > 3 && (
+ {dayoffs.length - 3}명 더보기
)}
)}
{/* hover + 아이콘 */}
{c.inMonth && (
+
)}
);
})}
);
}
// ── 매트릭스 뷰 (디자이너 × 날짜) ──
function C_ScheduleMatrix({ year, month, today, events, onCellClick }) {
const daysInMonth = new Date(year, month, 0).getDate();
const days = Array.from({length: daysInMonth}, (_, i) => i + 1);
const designers = DESIGNERS.filter(d => d.id !== 'unassigned');
const eventMap = {};
events.forEach(ev => {
if (!ev.designerId) return;
eventMap[`${ev.designerId}-${ev.date.split('-')[2]}`] = ev;
});
const CELL_W = 24;
const NAME_W = 100;
const HEADER_H = 32;
const ROW_H = 28;
return (
{/* 헤더: 요일/일자 */}
디자이너 · 날짜
{days.map(d => {
const dow = new Date(year, month - 1, d).getDay();
const dateStr = `${year}-${String(month).padStart(2,'0')}-${String(d).padStart(2,'0')}`;
const holiday = HOLIDAYS[dateStr];
const t = year === today.year && month === today.month && d === today.day;
return (
{d}
{['일','월','화','수','목','금','토'][dow]}
);
})}
{/* 각 디자이너 행 */}
{designers.map((d, ri) => (
{days.map(day => {
const key = `${d.id}-${String(day).padStart(2,'0')}`;
const ev = eventMap[key];
const dateStr = `${year}-${String(month).padStart(2,'0')}-${String(day).padStart(2,'0')}`;
const holiday = HOLIDAYS[dateStr];
const dow = new Date(year, month - 1, day).getDay();
return (
onCellClick(d.id, day)}
title={ev ? `${d.name} — 휴무` : holiday ? holiday : `${d.name} · ${day}일 근무`}
style={{
height:ROW_H, borderRight:`1px solid ${C_BORDER}`,
background: ev
? `repeating-linear-gradient(-45deg, ${d.color}dd 0, ${d.color}dd 4px, ${d.color}99 4px, ${d.color}99 8px)`
: holiday ? '#FEF2F2'
: dow === 0 || dow === 6 ? '#FAFBFD'
: C_SURFACE,
cursor:'pointer',
}}/>
);
})}
))}
);
}
// ── 리스트 뷰 ──
function C_ScheduleList({ year, month, today, events, onDayClick }) {
const daysInMonth = new Date(year, month, 0).getDate();
const days = Array.from({length: daysInMonth}, (_, i) => i + 1);
const eventsByDay = {};
events.forEach(ev => {
const d = Number(ev.date.split('-')[2]);
if (!eventsByDay[d]) eventsByDay[d] = [];
eventsByDay[d].push(ev);
});
return (
{days.map(day => {
const dow = new Date(year, month - 1, day).getDay();
const dateStr = `${year}-${String(month).padStart(2,'0')}-${String(day).padStart(2,'0')}`;
const holiday = HOLIDAYS[dateStr];
const t = year === today.year && month === today.month && day === today.day;
const dayEvents = eventsByDay[day] || [];
const dayoffs = dayEvents.filter(e => e.type === 'dayoff');
if (dayoffs.length === 0 && !holiday) return null;
return (
onDayClick(day)}
style={{
display:'grid', gridTemplateColumns:'80px 1fr',
padding:'12px 16px', borderBottom:`1px solid ${C_BORDER}`,
background: t ? '#EFF6FF' : holiday ? '#FEF2F2' : C_SURFACE,
cursor:'pointer', gap:14,
}}>
{day}
{['일','월','화','수','목','금','토'][dow]}{holiday ? ` · ${holiday}` : ''}
{dayoffs.map(ev => {
const d = DESIGNERS.find(x => x.id === ev.designerId);
if (!d) return null;
return (
{d.name} 휴무
);
})}
{dayoffs.length === 0 && holiday && (
공휴일
)}
);
})}
);
}
// ── 이벤트 툴팁 ──
function C_EventTooltip({ x, y, ev, designer }) {
const [yr, mo, da] = ev.date.split('-');
return (
{designer.name}
· {designer.role}
{Number(yr)}년 {Number(mo)}월 {Number(da)}일 · 종일 휴무
);
}
// ── 일정 추가 모달 ──
function C_ScheduleAddModal({ date, onClose }) {
const [selectedDesigners, setSelectedDesigners] = React.useState(
date.designerId ? [date.designerId] : []
);
const [repeat, setRepeat] = React.useState('weekly'); // weekly | biweekly
const [weekStart, setWeekStart] = React.useState('this'); // this | next (격주만)
const [days, setDays] = React.useState([]); // ['mon','tue',...]
const [endless, setEndless] = React.useState(true);
const [startDate, setStartDate] = React.useState(
`${date.year}-${String(date.month).padStart(2,'0')}-${String(date.day).padStart(2,'0')}`
);
const [endDate, setEndDate] = React.useState('');
const [memo, setMemo] = React.useState('');
const toggleDesigner = (id) => {
setSelectedDesigners(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);
};
const toggleDay = (id) => {
setDays(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);
};
const DAY_OPTS = [
{ id:'sun', label:'일', color:'#EF4444' },
{ id:'mon', label:'월' },
{ id:'tue', label:'화' },
{ id:'wed', label:'수' },
{ id:'thu', label:'목' },
{ id:'fri', label:'금' },
{ id:'sat', label:'토', color:C_BLUE },
];
return (
e.stopPropagation()} style={{
width:480, maxHeight:'92vh', background:C_SURFACE, borderRadius:14,
boxShadow:'0 20px 56px rgba(11,20,37,0.28)',
display:'flex', flexDirection:'column', overflow:'hidden',
}}>
{/* 헤더 */}
휴무 등록
{date.year}년 {date.month}월 {date.day}일 시작
{/* 본문 */}
{/* 대상 디자이너 */}
대상 디자이너
{selectedDesigners.length}명 선택
{DESIGNERS.filter(d => d.id !== 'unassigned').map(d => {
const sel = selectedDesigners.includes(d.id);
return (
);
})}
{/* 반복 (매주/격주) */}
반복
{[
{ id:'weekly', label:'매주' },
{ id:'biweekly', label:'격주' },
].map(r => (
))}
{/* 요일 (중복선택) */}
요일
중복 선택 가능
{DAY_OPTS.map(d => {
const on = days.includes(d.id);
const dayColor = d.color || C_INK;
return (
);
})}
{/* 격주만 이번주/다음주 선택 (요일 아래) */}
{repeat === 'biweekly' && (() => {
const DOW_MAP = { sun:0, mon:1, tue:2, wed:3, thu:4, fri:5, sat:6 };
const base = new Date(date.year, date.month - 1, date.day);
// 이번주 월요일
const baseMon = new Date(base);
baseMon.setDate(base.getDate() - ((base.getDay() + 6) % 7));
// 선택된 요일 중 가장 이른 요일 (월=1, 일=0을 7로 취급)
const dayOrder = (id) => id === 'sun' ? 7 : DOW_MAP[id];
const sortedDays = [...days].sort((a,b) => dayOrder(a) - dayOrder(b));
const firstDayId = sortedDays[0];
const fmt = (d) => `${d.getMonth()+1}월 ${d.getDate()}일`;
const dowKr = (d) => ['일','월','화','수','목','금','토'][d.getDay()];
// 이번주 / 다음주의 "첫 선택 요일" 실제 날짜
const dateOfWeek = (mon, dayId) => {
const d = new Date(mon);
d.setDate(mon.getDate() + (dayOrder(dayId) - 1));
return d;
};
const thisDate = firstDayId ? dateOfWeek(baseMon, firstDayId) : baseMon;
const nextMon = new Date(baseMon); nextMon.setDate(baseMon.getDate() + 7);
const nextDate = firstDayId ? dateOfWeek(nextMon, firstDayId) : nextMon;
const noDaysYet = days.length === 0;
return (
시작 주
{noDaysYet ? (
요일을 먼저 선택하세요
) : (
<>
{[
{ id:'this', label:'이번주부터', d: thisDate },
{ id:'next', label:'다음주부터', d: nextDate },
].map(w => {
const on = weekStart === w.id;
return (
);
})}
{fmt(weekStart === 'this' ? thisDate : nextDate)}
부터 격주로 반복됩니다.
)}
);
})()}
{/* 기간 */}
기간
시작일
setStartDate(e.target.value)} style={{
width:'100%', height:36, padding:'0 10px',
border:`1px solid ${C_BORDER}`, borderRadius:7,
fontSize:12.5, background:C_SURFACE, outline:'none',
fontFamily:'inherit', boxSizing:'border-box',
fontVariantNumeric:'tabular-nums',
}}/>
종료일
setEndDate(e.target.value)}
disabled={endless}
style={{
width:'100%', height:36, padding:'0 10px',
border:`1px solid ${C_BORDER}`, borderRadius:7,
fontSize:12.5, background: endless ? '#F5F7FB' : C_SURFACE,
color: endless ? '#CBD5E1' : C_INK,
outline:'none', fontFamily:'inherit', boxSizing:'border-box',
fontVariantNumeric:'tabular-nums',
}}/>
{/* 종료 없이 계속 */}
{/* 메모 */}
메모 선택
setMemo(e.target.value)}
placeholder="사유나 특이사항을 입력하세요"
style={{
width:'100%', height:36, padding:'0 12px',
border:`1px solid ${C_BORDER}`, borderRadius:7,
fontSize:12.5, background:C_SURFACE, fontFamily:'inherit', outline:'none',
boxSizing:'border-box',
}}/>
{/* 푸터 */}
);
}
// ============ 대시보드 페이지 ============
function C_DashboardPage() {
const revChange = ((SUMMARY.todayRevenue - SUMMARY.yesterdayRevenue) / SUMMARY.yesterdayRevenue * 100).toFixed(1);
const kpis = [
{ label:'오늘 매출', value:'₩ 2,840,000', change:`+${revChange}% 어제 대비`, changeColor:'#059669', icon:
, tint:'#EFF3FC', iconColor:C_BLUE },
{ label:'오늘 예약', value:`${SUMMARY.totalBookings}건`, change:`완료 ${SUMMARY.completed} · 예정 ${SUMMARY.upcoming}`, changeColor:C_MUTED, icon:
, tint:'#F0FDF4', iconColor:'#059669' },
{ label:'대기 중', value:`${SUMMARY.waiting}명`, change:'평균 대기 5.5분', changeColor:C_MUTED, icon:
, tint:'#FFFBEB', iconColor:'#D97706', pulse:true },
{ label:'노쇼 / 취소', value:`${SUMMARY.noshow} / ${SUMMARY.cancelled}`, change:'노쇼율 3.7%', changeColor:C_MUTED, icon:
, tint:'#FEF2F2', iconColor:'#EF4444' },
];
// 시술 단가표 (매장에서 관리)
const MENU_PRICES = {
'커트': 25000, '남성컷': 20000, '앞머리컷': 5000, '드라이': 15000,
'뿌리염색': 80000, '전체염색': 130000, '루트터치업': 70000,
'펌': 120000, '디지털펌': 180000, '다운펌': 60000, '매직스트레이트': 200000, '볼륨매직': 150000,
'클리닉': 55000, '헤어스파': 70000, '헤드스파': 65000, '세팅': 20000,
'상담': 0,
};
const priceOf = (menu) => {
// "커트 + 클리닉" 같은 조합 지원
return menu.split(/[+·]/).map(s => {
const k = s.trim().split(' ')[0];
// 완전 매칭 우선, 아니면 부분매칭
if (MENU_PRICES[k]) return MENU_PRICES[k];
const hit = Object.keys(MENU_PRICES).find(mk => s.includes(mk));
return hit ? MENU_PRICES[hit] : 50000;
}).reduce((a,b) => a+b, 0);
};
// 디자이너별 예약 상세
const designerLoad = DESIGNERS.filter(d => d.id !== 'unassigned').map(d => {
const bookings = RESERVATIONS.filter(r => r.designer === d.id && !r.type);
const completed = bookings.filter(r => r.status === 'visited');
const upcoming = bookings.filter(r => r.status === 'confirmed');
const noshow = bookings.filter(r => r.status === 'noshow' || r.status === 'cancelled');
const revenue = completed.reduce((a, r) => a + priceOf(r.menu), 0);
const expectedRevenue = upcoming.reduce((a, r) => a + priceOf(r.menu), 0);
return {
...d, bookings, completed, upcoming, noshow,
count: bookings.length, revenue, expectedRevenue, priceOf,
};
}).sort((a, b) => b.revenue - a.revenue);
const maxRev = Math.max(...designerLoad.map(x => x.revenue + x.expectedRevenue), 1);
// 매장 종합 (마감 요약)
const storeCompleted = designerLoad.reduce((a, d) => a + d.completed.length, 0);
const storeUpcoming = designerLoad.reduce((a, d) => a + d.upcoming.length, 0);
const storeRevenue = designerLoad.reduce((a, d) => a + d.revenue, 0);
const storeExpected = designerLoad.reduce((a, d) => a + d.expectedRevenue, 0);
const storeNoshow = designerLoad.reduce((a, d) => a + d.noshow.length, 0);
const storeAvgTicket = storeCompleted > 0 ? Math.round(storeRevenue / storeCompleted) : 0;
// 결제수단 목업 (완료 건에 균등 분배)
const paymentMix = {
'카드': Math.round(storeRevenue * 0.68),
'현금': Math.round(storeRevenue * 0.14),
'계좌이체': Math.round(storeRevenue * 0.11),
'포인트/쿠폰': Math.round(storeRevenue * 0.07),
};
return (
{/* 페이지 타이틀 */}
대시보드
2026.09.08 화요일 · 실시간
{['오늘','이번주','이번달'].map((v, i) => (
))}
{/* KPI 스트립 */}
{kpis.map((k, i) => (
{k.label}
{React.cloneElement(k.icon, { size:16 })}
{k.pulse && }
{k.value}
{k.change}
))}
{/* 매장 종합 마감 */}
{/* 디자이너별 성과 (확장형) */}
);
}
// 매장 종합 마감 카드
function C_StoreSummary({ storeCompleted, storeUpcoming, storeRevenue, storeExpected, storeNoshow, storeAvgTicket, paymentMix, designerLoad }) {
const totalPay = Object.values(paymentMix).reduce((a,b) => a+b, 0);
const payColors = { '카드': C_BLUE, '현금': '#059669', '계좌이체': '#7C3AED', '포인트/쿠폰': '#F59E0B' };
return (
부평본점 · 완료 {storeCompleted}건 · 예정 {storeUpcoming}건 · 노쇼/취소 {storeNoshow}건
{/* 매출 요약 5분할 */}
{/* 하단: 결제수단 도넛 + 디자이너 매출 랭킹 */}
{/* 결제수단 */}
결제 수단
{/* 도넛 SVG */}
총 결제
₩{Math.round(totalPay/10000)}만
{Object.entries(paymentMix).map(([name, val]) => (
{name}
{Math.round(val/totalPay*100)}%
₩{new Intl.NumberFormat('ko-KR').format(val)}
))}
{/* 디자이너별 매출 스택 바 (한줄로 보는 종합) */}
디자이너별 매출 비중 (확정)
{designerLoad.filter(d => d.revenue > 0).map(d => {
const pct = d.revenue / storeRevenue * 100;
return (
{pct > 8 ? d.name.slice(-2) : ''}
);
})}
{designerLoad.filter(d => d.revenue > 0).map(d => (
{d.name}
₩{new Intl.NumberFormat('ko-KR').format(d.revenue)}
))}
);
}
function C_SummaryCell({ label, value, sub, accent, last }) {
return (
);
}
// 디자이너 성과 - 클릭시 개인별 내역 확장
function C_DesignerPerformance({ designerLoad, maxRev }) {
const [expandedId, setExpandedId] = React.useState(designerLoad[0]?.id);
return (
디자이너별 성과
행을 클릭하면 예약 내역이 열립니다
확정 매출
예상 매출
{/* 테이블 헤더 */}
디자이너
완료
예정
노쇼
매출 비교
확정 매출
예상 매출
{/* 행 */}
{designerLoad.map((d, idx) => {
const isOpen = expandedId === d.id;
const revPct = (d.revenue / maxRev) * 100;
const expPct = (d.expectedRevenue / maxRev) * 100;
return (
setExpandedId(isOpen ? null : d.id)} style={{
display:'grid', gridTemplateColumns:'32px 100px 60px 60px 60px 1fr 130px 130px 20px',
gap:12, padding:'12px', alignItems:'center',
cursor:'pointer',
background: isOpen ? C_BLUE_SOFT : 'transparent',
transition:'background 0.15s',
}}>
{d.completed.length}
{d.upcoming.length}
0 ? '#EF4444' : C_MUTED, fontWeight:500, textAlign:'right', fontVariantNumeric:'tabular-nums'}}>{d.noshow.length}
₩{new Intl.NumberFormat('ko-KR').format(d.revenue)}
+{new Intl.NumberFormat('ko-KR').format(d.expectedRevenue)}
{/* 확장 상세 */}
{isOpen && (
{d.bookings.length === 0 ? (
오늘 예약 없음
) : (
d.bookings.map((r, i) => {
const st = C_STATUS[r.status];
const price = d.priceOf(r.menu);
return (
0 ? `1px solid ${C_BORDER}` : 'none',
}}>
{r.start}
{r.customer}
{r.menu}
{st.label}
₩{new Intl.NumberFormat('ko-KR').format(price)}
);
})
)}
{/* 소계 */}
{d.bookings.length > 0 && (
합계
완료 {d.completed.length}건 · 예정 {d.upcoming.length}건
확정
₩{new Intl.NumberFormat('ko-KR').format(d.revenue)}
)}
)}
);
})}
);
}
// ============ 메인 ============
function VariantC() {
const [page, setPage] = React.useState(() => localStorage.getItem('crm-c-page') || 'booking');
React.useEffect(() => { localStorage.setItem('crm-c-page', page); }, [page]);
const [modal, setModal] = React.useState(null); // 'customer-register' | 'guest-sales' | 'booking-add' | null
const [bookingSeed, setBookingSeed] = React.useState(null);
const CustomerRegModal = window.C_CustomerRegisterModal;
const GuestSalesModal = window.C_GuestSalesModal;
const BookingAddModal = window.C_BookingAddModal;
const [salesTarget, setSalesTarget] = React.useState(null);
const [gToast, setGToast] = React.useState(null);
React.useEffect(() => { if (!gToast) return; const t = setTimeout(() => setGToast(null), 2600); return () => clearTimeout(t); }, [gToast]);
const SalesPage = window.C_SalesPage;
// 하위 페이지에서 모달을 열 수 있게 window로 노출
React.useEffect(() => {
window.__openBookingModal = (customer) => { setBookingSeed(customer || null); setModal('booking-add'); };
window.__openSales = (t) => setSalesTarget(t);
window.__openCustomerRegister = () => setModal('customer-register');
window.__goPage = (pg) => { setSalesTarget(null); setPage(pg); };
window.__toast = (msg) => setGToast({ msg, key: Date.now() });
return () => { delete window.__openBookingModal; delete window.__openSales; };
}, []);
// 총 폭 = 사이드바(64) + 페이지(946) = 1010
return (
{/* 최상단 헤더 (예약/매장일정에서는 사이드 패널 폭 260 추가) */}
setModal('customer-register')}
onOpenGuestSales={() => setSalesTarget({ guest:true, key: Date.now() })}
onOpenClosing={() => { setSalesTarget(null); setPage('closing'); }}
/>
{/* 아래: 좌 사이드바(아이콘) + 우 페이지 콘텐츠 (+ 예약/매장일정 페이지는 우측 사이드 패널 260) */}
{ setSalesTarget(null); setPage(pg); }}/>
{(() => {
const StatsCmp = window.C_StatsPage;
const ClosingCmp = window.C_ClosingPage;
const SettingsMenu = window.C_SettingsMenuPage;
const StaffCmp = window.C_StaffPage;
const StubPage = window.C_StubPage;
if (salesTarget && SalesPage) {
const Wing = window.C_ReservationSidePanel;
return (
setSalesTarget(null)}/>
{Wing &&
}
);
}
if (page === 'mkt-bulk' && window.C_MktBulkPage) return ;
if (page === 'mkt-auto' && window.C_MktAutoPage) return ;
if (page === 'mkt-charge' && window.C_MktChargePage) return ;
if (page === 'mkt-report' && window.C_MktReportPage) return ;
if (page === 'mkt-revisit' && window.C_MktRevisitPage) return ;
if (page === 'dashboard') return ;
if (page === 'schedule') return ;
if (page === 'stats' && StatsCmp) return ;
if (page === 'closing' && ClosingCmp) return ;
if (page === 'staff-sub' && window.C_StaffSubPage) return ;
if (page === 'analytics-ledger' && window.C_SalesLedgerPage) return ;
if (page === 'analytics-term-log' && window.C_TermLogPage) return ;
if (page === 'analytics-dashboard' && window.C_DashPage) return ;
if (page === 'analytics-sales' && window.C_SettlePage) return ;
if (page === 'analytics-prepaid' && window.C_PrepaidPage) return ;
if (page === 'analytics-customer' && window.C_CustomerPage) return ;
const OpsCmp = window.C_OpsPage;
const SmsCmp = window.C_SmsPage;
if (page === 'settings-menu' && SettingsMenu) return ;
if (page === 'settings-staff' && StaffCmp) return ;
if (page === 'settings-ops' && OpsCmp) return ;
if (page === 'settings-sms' && SmsCmp) return ;
const PhoneCmp = window.C_PhonePage;
if (page === 'settings-phone' && PhoneCmp) return ;
if (page === 'settings-group' && window.C_CustomerGroupPage) return ;
if (STUB_PAGES[page] && StubPage) return ;
return ;
})()}
{gToast && (
{gToast.msg}
)}
{/* 전역 모달들 */}
{modal === 'customer-register' && CustomerRegModal && (
setModal(null)}/>
)}
{modal === 'guest-sales' && GuestSalesModal && (
setModal(null)}/>
)}
{modal === 'booking-add' && BookingAddModal && (
{ setModal(null); setBookingSeed(null); }}/>
)}
);
}
window.VariantC = VariantC;
// 하위 페이지 파일에서 참조하는 상수/스타일들
Object.assign(window, {
C_BLUE, C_BLUE_SOFT, C_CORAL, C_INK, C_MUTED, C_BORDER, C_BG, C_SURFACE,
C_STATUS, C_SLOT_HEIGHT, C_HEADER_H, C_TIME_COL_W,
c_iconBtn, c_iconBtnSm, c_ghostBtn, c_ghostBtnSm, c_pagerBtn,
});