116 lines
2.9 KiB
JavaScript
116 lines
2.9 KiB
JavaScript
import { Card, CardBody, Input, Tab, Tabs } from '@nextui-org/react'
|
|
import { useEffect, useReducer } from 'react'
|
|
|
|
const reducer = (prevState, nextState) => {
|
|
return { ...prevState, ...nextState }
|
|
}
|
|
|
|
const defaultData = {
|
|
commonData: 'common',
|
|
tabs: [
|
|
{
|
|
id: 1,
|
|
name: 'tab1',
|
|
range: 10,
|
|
maker: 'maker1',
|
|
law: 'law1',
|
|
basis: 'basis1',
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'tab2',
|
|
range: 20,
|
|
maker: 'maker2',
|
|
law: 'law2',
|
|
basis: 'basis2',
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'tab3',
|
|
range: 30,
|
|
maker: 'maker3',
|
|
law: 'law3',
|
|
basis: 'basis3',
|
|
},
|
|
{
|
|
id: 4,
|
|
name: 'tab4',
|
|
range: 40,
|
|
maker: 'maker4',
|
|
law: 'law4',
|
|
basis: 'basis4',
|
|
},
|
|
],
|
|
}
|
|
|
|
export default function SampleReducer() {
|
|
const [sampleState, setSampleState] = useReducer(reducer, defaultData)
|
|
|
|
const handleChangeTabsData = (newTab) => {
|
|
const newTabs = sampleState.tabs.map((t) => {
|
|
if (t.id === newTab.id) {
|
|
return newTab
|
|
} else {
|
|
return t
|
|
}
|
|
})
|
|
setSampleState({ tabs: newTabs })
|
|
}
|
|
|
|
useEffect(() => {
|
|
console.log('🚀 ~ SampleReducer ~ sampleState:', sampleState)
|
|
}, [sampleState])
|
|
|
|
return (
|
|
<>
|
|
<div>공통: {sampleState.commonData}</div>
|
|
<div className="flex w-full flex-col">
|
|
<Tabs aria-label="Options">
|
|
{sampleState.tabs.map((s) => (
|
|
<Tab key={s.id} title={s.name}>
|
|
<Card>
|
|
<CardBody>
|
|
<div className="flex w-full flex-wrap md:flex-nowrap gap-4">
|
|
<Input
|
|
label="range"
|
|
type="text"
|
|
value={s.range}
|
|
onChange={(e) => {
|
|
handleChangeTabsData({ ...s, range: e.target.value })
|
|
}}
|
|
/>
|
|
<Input
|
|
label="maker"
|
|
type="text"
|
|
value={s.maker}
|
|
onChange={(e) => {
|
|
handleChangeTabsData({ ...s, maker: e.target.value })
|
|
}}
|
|
/>
|
|
<Input
|
|
label="law"
|
|
type="text"
|
|
value={s.law}
|
|
onChange={(e) => {
|
|
handleChangeTabsData({ ...s, law: e.target.value })
|
|
}}
|
|
/>
|
|
<Input
|
|
label="basis"
|
|
type="text"
|
|
value={s.basis}
|
|
onChange={(e) => {
|
|
handleChangeTabsData({ ...s, basis: e.target.value })
|
|
}}
|
|
/>
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
</Tab>
|
|
))}
|
|
</Tabs>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|