📌 fix: Add sample reducer

src/components/Playground.jsx

@@ -25,6 +25,7 @@ import QPagination from './common/pagination/QPagination'
 
 import { trestleRequestModels, constructionRequestModels, trestleDetailRequestModels } from '@/models/apiModels'
 import QSelectBox from './common/select/QSelectBox'
+import SampleReducer from './sample/SampleReducer'
 
 export default function Playground() {
   const [useCadFile, setUseCadFile] = useRecoilState(useCadFileState)
@@ -504,6 +505,9 @@ export default function Playground() {
         <div className="my-2">
           <Button onClick={handleChangeMyData}>QSelectBox value change!!</Button>
         </div>
+        <div className="my-2">
+          <SampleReducer />
+        </div>
       </div>
     </>
   )

src/components/sample/SampleReducer.jsx

@@ -0,0 +1,115 @@
+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({ ...sampleState, 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>
+    </>
+  )
+}