69 lines
2.5 KiB
JavaScript
69 lines
2.5 KiB
JavaScript
'use client'
|
|
|
|
import { useContext, useEffect, useState } from 'react'
|
|
import { useRecoilState, useRecoilValue } from 'recoil'
|
|
import CanvasFrame from './CanvasFrame'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import { useSwal } from '@/hooks/useSwal'
|
|
import { usePlan } from '@/hooks/usePlan'
|
|
import { modifiedPlansState } from '@/store/canvasAtom'
|
|
import { globalLocaleStore } from '@/store/localeAtom'
|
|
import { SessionContext } from '@/app/SessionProvider'
|
|
import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
|
|
|
|
export default function CanvasLayout({ children }) {
|
|
// const { menuNumber } = props
|
|
const { menuNumber } = useCanvasMenu()
|
|
const { session } = useContext(SessionContext)
|
|
const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요
|
|
const [modifiedPlans, setModifiedPlans] = useRecoilState(modifiedPlansState) // 변경된 canvas plan
|
|
const globalLocaleState = useRecoilValue(globalLocaleStore)
|
|
|
|
const { getMessage } = useMessage()
|
|
const { swalFire } = useSwal()
|
|
const { plans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan()
|
|
|
|
useEffect(() => {
|
|
loadCanvasPlanData(session.userId, objectNo)
|
|
}, [])
|
|
|
|
return (
|
|
<div className="canvas-layout">
|
|
<div className={`canvas-page-list ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
|
|
<div className="canvas-plane-wrap">
|
|
{plans.map((plan) => (
|
|
<button
|
|
key={`plan-${plan.id}`}
|
|
className={`canvas-page-box ${plan.isCurrent === true ? 'on' : ''}`}
|
|
onClick={() => handleCurrentPlan(session.userId, plan.id)}
|
|
>
|
|
<span>
|
|
{plan.name}
|
|
{modifiedPlans.some((modifiedPlan) => modifiedPlan === plan.id) && ' [ M ]'}
|
|
</span>
|
|
<i
|
|
className="close"
|
|
onClick={(e) =>
|
|
swalFire({
|
|
text: `${plan.name} ` + getMessage('plan.message.confirm.delete'),
|
|
type: 'confirm',
|
|
confirmFn: () => {
|
|
handleDeletePlan(e, plan.id)
|
|
},
|
|
})
|
|
}
|
|
></i>
|
|
</button>
|
|
))}
|
|
</div>
|
|
{plans.length < 10 && (
|
|
<button className="plane-add" onClick={() => handleAddPlan(session.userId, objectNo)}>
|
|
<span></span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|