- modal setting 수정

src/components/floor-plan/modal/settoing01/FirstOption.jsx

@@ -1,27 +1,21 @@
-import { useEffect, useState } from 'react'
+import { useRecoilState } from 'recoil'
-
+import { settingModalFirstOptionsState } from '@/store/settingAtom'
-export default function FirstOption(props) {
-  const { options1, options2 } = props
-  const { option1Selected, setOption1Selected } = useState()
-  const { option2Selected, setOption2Selected } = useState()
 
+export default function FirstOption() {
+  const [settingsModalOptions, setSettingModalOptions] = useRecoilState(settingModalFirstOptionsState)
+  const { option1, option2 } = settingsModalOptions
   const onClickOption = (option) => {
     option.selected = !option.selected
-    console.log('options1', options1)
-    console.log('option2', options2)
-  }
 
-  useEffect(() => {
+    setSettingModalOptions({ option1, option2 })
-    setOption1Selected(options1)
+  }
-    // setOption1Selected(props.options1)
-  }, [options1])
 
   return (
     <>
       <div className="modal-check-btn-wrap">
         <h3 className="check-wrap-title light">※図面に表示する項目をクリックすると適用されます。</h3>
         <div className="flex-check-box for2">
-          {options1.map((item) => (
+          {settingsModalOptions?.option1?.map((item) => (
             <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
               <span className="check-area"></span>
               <span className="title-area">{item.name}</span>
@@ -32,7 +26,7 @@ export default function FirstOption(props) {
       <div className="modal-check-btn-wrap">
         <h3 className="check-wrap-title">画面表示</h3>
         <div className="flex-check-box for-line">
-          {options2.map((item) => (
+          {settingsModalOptions?.option2?.map((item) => (
             <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
               <span className="check-area"></span>
               <span className="title-area">{item.name}</span>

src/components/floor-plan/modal/settoing01/SecondOption.jsx

@@ -1,11 +1,20 @@
-export default function SecondOption(props) {
+import { useRecoilState } from 'recoil'
-  const { options, onClick } = props
+import { settingModalSecondOptionsState } from '@/store/settingAtom'
+
+export default function SecondOption() {
+  const [settingsModalOptions, setSettingModalOptions] = useRecoilState(settingModalSecondOptionsState)
+  const { option1, option2 } = settingsModalOptions
+  const onClickOption = (option) => {
+    option.selected = !option.selected
+
+    setSettingModalOptions({ option1: option1, option2: option2 })
+  }
   return (
     <>
       <div className="modal-check-btn-wrap">
         <h3 className="check-wrap-title">フォントとサイズの変更</h3>
         <div className="flex-check-box for2">
-          {options.option1.map((item) => (
+          {settingsModalOptions.option1.map((item) => (
             <button className="arr-btn">
               <span>{item.name}</span>
             </button>
@@ -15,8 +24,8 @@ export default function SecondOption(props) {
       <div className="modal-check-btn-wrap">
         <h3 className="check-wrap-title">吸着範囲の設定</h3>
         <div className="flex-check-box for-line">
-          {options.option2.map((item) => (
+          {settingsModalOptions.option2.map((item) => (
-            <button key={item.id} className="check-btn" onClick={(e) => onClick(e)}>
+            <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={() => onClickOption(item)}>
               <span className="check-area"></span>
               <span className="title-area">{item.name}</span>
             </button>

src/components/floor-plan/modal/settoing01/SettingModal01.jsx

@@ -3,15 +3,7 @@
 import { useState } from 'react'
 import FirstOption from './FirstOption'
 import WithDraggable from '@/components/common/draggable/withDraggable'
-
+import SecondOption from '@/components/floor-plan/modal/settoing01/SecondOption'
-const HandleBtnClick = (e) => {
-  const button = e.target
-  if (!button.classList.contains('act')) {
-    button.classList.add('act')
-  } else {
-    button.classList.remove('act')
-  }
-}
 
 export default function SettingModal01({ modalOpen, setModalOpen }) {
   const [buttonAct, setButtonAct] = useState(1)
@@ -24,42 +16,6 @@ export default function SettingModal01({ modalOpen, setModalOpen }) {
     }, 180)
   }
 
-  const firstOptions = {
-    option1: [
-      { id: 1, name: '割り当て表示', selected: false },
-      { id: 2, name: '実寸表示', selected: false },
-      { id: 3, name: '図面表示', selected: false },
-      { id: 4, name: '寸法表示なし', selected: false },
-      { id: 5, name: 'グリッド表示', selected: false },
-      { id: 6, name: '架台表示', selected: false },
-      { id: 7, name: '文字表示', selected: false },
-      { id: 8, name: '座標表示', selected: false },
-      { id: 9, name: '流れ方向表示', selected: false },
-      { id: 10, name: '図面切替表示', selected: false },
-      { id: 11, name: 'ü廊下寸法表示', selected: false },
-    ],
-    option2: [
-      { id: 1, name: 'ボーダーのみ', selected: false },
-      { id: 2, name: 'ラインハッチ', selected: false },
-      { id: 3, name: 'All painted', selected: false },
-    ],
-  }
-
-  const secondOptions = {
-    option1: [
-      { id: 1, name: '文字フォントの変更' },
-      { id: 2, name: 'フロー方向フォントの変更' },
-      { id: 3, name: '寸法フォントの変更' },
-      { id: 4, name: '回路番号フォントの変更' },
-    ],
-    option2: [
-      { id: 1, name: '極小', selected: false },
-      { id: 2, name: '牛', selected: false },
-      { id: 3, name: '中', selected: false },
-      { id: 4, name: 'ティーン', selected: false },
-    ],
-  }
-
   return (
     <WithDraggable isShow={true}>
       <div className={`modal-pop-wrap sm ${modalOpen === 'option' && close === false ? 'mount' : ''}${close ? 'unmount' : ''} `}>
@@ -79,8 +35,8 @@ export default function SettingModal01({ modalOpen, setModalOpen }) {
               フォントと図面サイズの設定
             </button>
           </div>
-          {buttonAct === 1 && <FirstOption options1={firstOptions.option1} options2={firstOptions.option2} onClick={HandleBtnClick} />}
+          {buttonAct === 1 && <FirstOption />}
-          {/*{buttonAct === 2 && <SecondOption options={secondOptions} onClick={HandleBtnClick} />}*/}
+          {buttonAct === 2 && <SecondOption />}
         </div>
       </div>
     </WithDraggable>