refactor: move state management and effect hooks for selected tab into respective form components for better encapsulation

src/app/survey-sale/basic-info/page.tsx

@@ -1,16 +1,6 @@
-'use client'
-
-import { useEffect } from 'react'
-import { useSurveySaleTabState } from '@/store/surveySaleTabState'
 import BasicForm from '@/components/survey-sale/detail/BasicForm'
 
 export default function page() {
-  const { setBasicInfoSelected } = useSurveySaleTabState()
-
-  useEffect(() => {
-    setBasicInfoSelected()
-  }, [])
-
   return (
     <>
       <BasicForm />

src/app/survey-sale/roof-info/page.tsx

@@ -1,16 +1,6 @@
-'use client'
-
-import { useEffect } from 'react'
-import { useSurveySaleTabState } from '@/store/surveySaleTabState'
 import RoofInfoForm from '@/components/survey-sale/detail/RoofInfoForm'
 
 export default function page() {
-  const { setRoofInfoSelected } = useSurveySaleTabState()
-
-  useEffect(() => {
-    setRoofInfoSelected()
-  }, [])
-
   return (
     <>
       <RoofInfoForm />

src/components/survey-sale/detail/BasicForm.tsx

@@ -1,6 +1,15 @@
 'use client'
 
+import { useEffect } from 'react'
+import { useSurveySaleTabState } from '@/store/surveySaleTabState'
+
 export default function BasicForm() {
+  const { setBasicInfoSelected } = useSurveySaleTabState()
+
+  useEffect(() => {
+    setBasicInfoSelected()
+  }, [])
+
   return (
     <>
       <div className="sale-frame">

src/components/survey-sale/detail/RoofInfoForm.tsx

@@ -1,6 +1,15 @@
 'use client'
 
+import { useEffect } from 'react'
+import { useSurveySaleTabState } from '@/store/surveySaleTabState'
+
 export default function RoofInfoForm() {
+  const { setRoofInfoSelected } = useSurveySaleTabState()
+
+  useEffect(() => {
+    setRoofInfoSelected()
+  }, [])
+
   return (
     <>
       <div className="sale-frame">