From e1a4ccaa08050d8776ac98fdebf94460d8298c42 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Fri, 18 Oct 2024 17:28:42 +0900
Subject: [PATCH] =?UTF-8?q?=EC=BA=94=EB=B2=84=EC=8A=A4=20=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95=20hooks=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modal/setting01/FirstOption.jsx           |  3 ++-
 src/hooks/option/useFirstOption.js            | 23 +++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 src/hooks/option/useFirstOption.js

diff --git a/src/components/floor-plan/modal/setting01/FirstOption.jsx b/src/components/floor-plan/modal/setting01/FirstOption.jsx
index c4e75ea4..bd24d738 100644
--- a/src/components/floor-plan/modal/setting01/FirstOption.jsx
+++ b/src/components/floor-plan/modal/setting01/FirstOption.jsx
@@ -5,10 +5,11 @@ import React, { useEffect, useState } from 'react'
 import { useAxios } from '@/hooks/useAxios'
 import { useSwal } from '@/hooks/useSwal'
 import { adsorptionPointAddModeState } from '@/store/canvasAtom'
+import { useFirstOption } from '@/hooks/option/useFirstOption'
 
 export default function FirstOption() {
   const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
-  const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
+  const { settingModalFirstOptions, setSettingModalFirstOptions } = useFirstOption()
   const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
   const { option1, option2, dimensionDisplay } = settingModalFirstOptions
   const { option3, option4 } = settingModalSecondOptions
diff --git a/src/hooks/option/useFirstOption.js b/src/hooks/option/useFirstOption.js
new file mode 100644
index 00000000..4010b69e
--- /dev/null
+++ b/src/hooks/option/useFirstOption.js
@@ -0,0 +1,23 @@
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { canvasState } from '@/store/canvasAtom'
+import { useEffect } from 'react'
+import { settingModalFirstOptionsState } from '@/store/settingAtom'
+
+export function useFirstOption() {
+  const canvas = useRecoilValue(canvasState)
+
+  const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
+
+  useEffect(() => {
+    const option1 = settingModalFirstOptions.option1
+
+    canvas
+      .getObjects()
+      .filter((obj) => obj.name === '')
+      .forEach((obj) => {
+        obj.set({ visible: !obj.visible })
+      })
+  }, [settingModalFirstOptions])
+
+  return { settingModalFirstOptions, setSettingModalFirstOptions }
+}