MOCA React API

사용 예

import { MocaReactCalendar, mdate } from '@teammoca/react-input-calendar'

// 공휴일·휴무는 화면이 조회해 넘긴다(달을 옮기면 onViewChange 에서 다시 조회)
const [dayInfo, setDayInfo] = useState({})

<MocaReactCalendar ref={cal} dateType="yyyyMMdd"
  dayInfo={dayInfo}        // { '20260815': { holi: '광복절', off: true, badge: '휴' } }
  weekendOff legend
  onSelect={(v) => console.log(v, cal.current.getDayInfo(v))}
  onViewChange={(ym, view) => { if (view === 'day') loadHoli(ym) }} />

// 예약 가능일처럼 구간이 런타임에 정해지는 화면
cal.current.setDateRange(mdate.getToday(), mdate.addDay(mdate.getToday(), 30))복사

Props

dayInfo={{ '20260815': { holi: '광복절', off: true } }}복사

이벤트 (콜백 props)

onSelect={(v) => say(v)}복사

onViewChange={(ym, view) => { if (view === "day") loadHoli(ym) }}복사

메서드 (ref API)

cal.current.setValue("20260815")복사

if (cal.current.getDayInfo(v).off) alert("휴무일입니다")복사

cal.current.setDateRange(today, mdate.addDay(today, 30))복사

사용 예

import { MocaReactEchart } from '@teammoca/react-echart'

const option = { xAxis: {...}, yAxis: {...}, series: [{ type: 'bar', data: [...] }] }
<MocaReactEchart option={option} />   {/* 부모(레이아웃 pane)를 100% 채운다 */}

// 제품 API 직접 사용 — ref 로 실제 echarts 인스턴스를 받는다
chartRef.current?.getChart((c) => c.dispatchAction({ type: 'highlight', dataIndex: 0 }))복사

Props

메서드 (ref API)

ref.current?.getChart((c) => c.on("click", fn))복사

사용 예

import { MocaReactFloatingButton } from '@teammoca/react-floating-button'

<MocaReactFloatingButton onClick={fnNew} title="신규" />              {/* plus 원형 */}
<MocaReactFloatingButton label="저장" icon="💾" onClick={fnSave} />   {/* 알약형 */}
<MocaReactFloatingButton absolute position="rt" icon="✏️" bgColor="#b4493e" onClick={fnEdit} />복사

Props

icon="✏️"복사

레이아웃의 mrl-debug-fab복사

이벤트 (콜백 props)

사용 예

import { MocaReactGrid } from '@teammoca/react-grid'

<MocaReactGrid
  label="사원 목록"
  columns={[{ key: 'name', title: '이름', width: 120 }, { key: 'dept', title: '부서' }]}
  data={rows}
  onRowSelected={(row, idx) => setSelected(row)}
  search rowHeightSelect
/>복사

Props

columns={[{ key: "name", title: "이름", width: 120 }]}복사

{ key: "SALE_AMT", title: "판매금액", align: "right" }복사

{ key: "SALE_AMT", format: (v) => Number(v).toLocaleString() }복사

data={rows}복사

label="사원 목록"복사

rowHeightSelect={[20, 26, 36]}복사

sortable복사

{ key: "MEMO", title: "비고", sortable: false }복사

filterable복사

{ key: "EMP_NO", title: "사번", filterable: false }복사

filterDistinctLimit={3000}복사

subtotal="REGION_NM"복사

total="top"복사

subtotalLabel="평균/최저/최대"복사

MocaReactGrid · aggColumn

{ key: "SALE_QTY", title: "수량", calc: "sum", align: "right", format: comma }복사

{ key: "REGION_NM", title: "지역", merge: true }복사

MocaReactGrid · treeColumn

{ key: "TREE", title: "메뉴", cellType: "tree", levelKey: "DEPTH", labelKey: "MENU_NM", treeKey: "MENU_ID", width: 240 }복사

이벤트 (콜백 props)

onRowSelected={(row, idx) => setSelected(row)}복사

사용 예

import { MocaReactInputCalendar, mdate } from '@teammoca/react-input-calendar'

// 기본(일자) — 오늘로 시작, 값 확정 시 콜백
<MocaReactInputCalendar displayFormat="####-##-##" defaultValue="오늘"
  onDateSelected={(v) => console.log(v)} />   {/* v = '20260815' */}

// 연월 · 연 · 일시
<MocaReactInputCalendar dateType="yyyyMM" defaultValue="오늘" />        {/* 값 6자리 */}
<MocaReactInputCalendar dateType="yyyy" defaultValue="3년전" />          {/* 값 4자리 */}
<MocaReactInputCalendar dateType="yyyyMMdd hh:mm:ss" defaultValue="오늘" />

// 범위 제한 + ref API
const cal = useRef(null)
<MocaReactInputCalendar ref={cal} dateMin="20260710" dateMax="20260820" />
cal.current.setValue(mdate.addDay(cal.current.getValue(), 1))복사

Props

defaultValue="7일전"복사

displayFormat="####/##/##"복사

이벤트 (콜백 props)

onDateSelected={(v) => fnSearch(v)}복사

메서드 (ref API)

const v = cal.current.getValue()복사

cal.current.setValue("20260815")복사

mdate.addDay(mdate.getToday(), -7)복사

사용 예

import { MocaReactLayout } from '@teammoca/react-layout'

// 가장 흔한 골격 — 검색영역(fit) + 본문(auto), 본문은 h3:7 중첩
<MocaReactLayout layout="vfit:auto">
  <div>검색영역</div>
  <MocaReactLayout layout="h3:7" ref={bodyRef}>
    <MocaReactGrid ... />   {/* 목록 3 */}
    <MocaReactGrid ... />   {/* 상세 7 */}
  </MocaReactLayout>
</MocaReactLayout>

bodyRef.current?.setRatio('h0:10')  // 런타임 변경 — 좌측 접기복사

Props

layout="vfit:auto:fit"복사

mobileHeights={[null, 360]}복사

MocaReactLayout · tokens

layout="h3:7"복사

layout="h240px:auto"복사

MocaReactLayout · markers

<div className="myBox mrl-fill">복사

메서드 (ref API)

ref.current?.setRatio("7:3") — 방향 유지 / setRatio("v5:5") — 세로 전환복사

사용 예

import { MocaReactMdi } from '@teammoca/react-mdi'

const mdiRef = useRef(null)
<MocaReactMdi
  ref={mdiRef}
  tabs={tabs}
  onTabClose={(key) => setTabs((ts) => ts.filter((t) => t.key !== key))}
  emptyHint="좌측 메뉴에서 화면을 선택하세요"
/>
mdiRef.current?.activate('userlist')  // 이미 열린 탭 활성화복사

Props

setTabs((ts) => [...ts, { key, title, content: <Screen /> }])복사

이벤트 (콜백 props)

onTabClose={(key) => setTabs((ts) => ts.filter((t) => t.key !== key))}복사

onActiveChange={setActiveKeys}복사

메서드 (ref API)

mdiRef.current?.activate("userlist")복사

사용 예

import { MocaReactMultiCalendar, mdate } from '@teammoca/react-input-calendar'

// 기본 — 당월(1일~말일)로 시작
<MocaReactMultiCalendar displayFormat="####-##-##" defaultValue="당월"
  onTermSelected={({ from, to }) => fnSearch(from, to)} />

// 빠른선택 + 최대 31일
<MocaReactMultiCalendar defaultValue="금주" quickItems="오늘,금주,당월,전월,당분기,당년"
  maxTermByDay={31} />

// 연월·연·일시 기간 (단일 달력과 같은 dateType)
<MocaReactMultiCalendar dateType="yyyyMM" defaultValue="당년" />

// ref API
term.current.setMultiCalendar({ from: '20260801', to: '20260831' })
term.current.getTerm()   // { from, to }복사

Props

defaultValue="당월"복사

이벤트 (콜백 props)

onTermSelected={({from,to}) => fnSearch(from,to)}복사

메서드 (ref API)

const { from, to } = ref.current.getTerm()복사

ref.current.setMultiCalendar({ from: mdate.getFirstDayOfMonth(t), to: mdate.getLastDayOfMonth(t) })복사

사용 예

import { MocaReactScheduleCalendar } from '@teammoca/react-schedule-calendar'

<MocaReactScheduleCalendar ref={scc}
  schedules={schedules}      // [{ start, end, title, ico, done, crucial, bg, fg, mark, time, seq, data }]
  dayInfo={dayInfo}          // { '20260815': { holi: '광복절', wthr: '☀️', badges: ['휴'] } }
  hideOutside todayFlag menuButton
  onMonthChange={(ym) => loadMonth(ym)}   // 초기 조회는 화면이 getYm() 으로 직접
  onDayClick={(day) => setPicked({ ymd: day.ymd, items: scc.current.getDayItems(day.ymd) })}
  dayRenderer={(day) => day.dow === 0 ? <span>휴일</span> : null} />복사

Props

schedules={rows.map(toItem)}복사

dayRenderer={(day) => day.dow === 0 ? <span>휴일</span> : null}복사

이벤트 (콜백 props)

onMonthChange={(ym) => loadMonth(ym)}복사

메서드 (ref API)

const items = scc.current.getDayItems(day.ymd)복사

loadMonth(scc.current.getYm())복사

사용 예

import { MocaReactSearchCombo } from '@teammoca/react-search-combo'

<MocaReactSearchCombo list={areas} value={area} onChange={(v) => setArea(v)} />

{/* 코드까지 검색되게 — 필터는 표시문구 기준이다 */}
<MocaReactSearchCombo list={codes} displayFormat="[value] · [label]" width={220} />

{/* 검색창 용법 — 고르고 나면 입력칸을 비운다(헤더 메뉴 검색) */}
<MocaReactSearchCombo list={menuList} clearOnSelect placeholder="메뉴 검색" onChange={openScreen} />복사

Props

list={areas}복사

cdKey="DEPT_CD"복사

nmKey="DEPT_NM"복사

displayFormat="[value] · [label]"복사

clearOnSelect복사

데모 앱 헤더의 mdi-menu-search 가 입력칸만 반투명으로 덮는다복사

이벤트 (콜백 props)

onChange={(v, row) => setArea(v)}복사

메서드 (ref API)

사용 예

import { msgbox, MocaReactMsgHost } from '@teammoca/react-msgbox'

<MocaReactMsgHost />                      // 앱 루트에 한 번(App.jsx)

msgbox.alert('저장되었습니다.')             // MOCA 와 같은 호출
msgbox.alert('완료', () => reload())       // 콜백(MOCA 호환)
if (await msgbox.confirm('저장하시겠습니까?')) save()      // 답을 그 자리에서
const mode = await msgbox.confirm('어디에 추가할까요?', { radios: [...] })

if (!name) return msgbox.requiredFail('사용자명', () => ref.current.focus())복사

Props

msgbox.alert(<>성공 <b>12건</b></>)복사

메서드 (ref API)

msgbox.alert("저장되었습니다.")복사

msgbox.error("삭제할 수 없는 데이터입니다.")복사

const mode = await msgbox.confirm("어디에 추가할까요?", { radios: [{ value: "child", label: "하위로" }] })복사

if (!name) return msgbox.requiredFail("사용자명", () => ref.current.focus())복사

msgbox.showProgress("조회중입니다", 0)복사

msgbox.setProgressMsg("데이터 처리중 2/3")복사

사용 예

import { popup, MocaReactPopupHost } from '@teammoca/react-popup'
import PopItemSearch from './pop/PopItemSearch'

<MocaReactPopupHost />                    // 앱 루트에 한 번(App.jsx)

// await 로 받기(권장 — 답에 따라 다음 줄이 갈린다)
const row = await popup.open(PopItemSearch, { title: '품목 검색', width: 640, data: { keyword } })
if (row) setItem(row)                     // 취소면 undefined

// 콜백(MOCA openPop 호환) — 취소면 콜백이 아예 불리지 않는다
popup.open(PopItemSearch, { title: '품목 검색', callback: (row) => setItem(row) })

// 팝업 화면 — 업무 화면과 똑같이 만들고 결과를 close 로 넘긴다
function PopItemSearch({ data, close }) {
  return <button onClick={() => close(row)}>선택</button>   // close() 는 취소
}복사

Props

width: 640복사

height: 520복사

modal: false복사

data: { keyword: "마우스" }복사

메서드 (ref API)

const row = await popup.open(PopItemSearch, { title: "품목 검색", width: 640 })복사

사용 예

import { tran, useSelect, configureTran } from '@teammoca/react-tran'

// 화면 — 선언적 조회(조건이 바뀌면 자동 재조회)
const { rows, loading, error, reload } = useSelect('selectTdemoSaleDtlList', { REGION_NM })

// 명령형 호출
const rows = await tran.select('selectDemoUserList', { USER_NM: '김' })
await tran.save({ insertQueryId: 'insertDemoUser', list: rows })

// 앱 부팅 1회 — 인증 실패 시 로그인 화면 전환 통로
configureTran({ onAuthFail: () => setAuth('out') })복사

메서드 (ref API)

const rows = await tran.select("selectDemoUserList", { DEPT_NM: "개발" })복사

const { list1, list2 } = await tran.selectMulti(["selectDashSalesMonthly", "selectDashDeptMember"])복사

const { ok } = await tran.login("moca", "moca")복사

const { rows, reload } = useSelect("selectDemoUserList", { USER_NM })복사

사용 예

// src/screens/registry.jsx — lazy 선언 한 줄 + 그룹의 children 에 한 줄
const UserList = lazy(() => import('./UserList'))
{
  key: 'work', title: '업무', icon: '🗂️',
  children: [
    { key: 'userlist', title: '사원 목록', icon: '👥', component: UserList },
  ],
}복사