Merge pull request 'refactor: implement state management for survey sale pages; add effect hooks to set selected tab state and enhance navigation functionality' (#18) from feature/pub-yoo into dev

Reviewed-on: #18

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

@@ -1,6 +1,16 @@
+'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,6 +1,16 @@
+'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/common/NavTab.tsx

@@ -1,21 +1,44 @@
 'use client'
 
-import { usePathname } from 'next/navigation'
+import { useSurveySaleTabState } from '@/store/surveySaleTabState'
+import { usePathname, useRouter } from 'next/navigation'
+import { useEffect } from 'react'
 
 export default function NavTab() {
+  const router = useRouter()
   const pathname = usePathname()
 
   if (pathname === '/survey-sale') {
     return null
   }
 
+  const { basicInfoSelected, roofInfoSelected, reset } = useSurveySaleTabState()
+
+  useEffect(() => {
+    return () => {
+      reset()
+    }
+  }, [])
+
+  const handleBasicInfoClick = () => {
+    router.push('/survey-sale/basic-info')
+  }
+
+  const handleRoofInfoClick = () => {
+    router.push('/survey-sale/roof-info')
+  }
+
   return (
     <>
       <div className="sale-detail-tab-relative">
         <div className="sale-detail-tab-wrap">
           <div className="sale-detail-tab-inner">
-            <button className="sale-detail-tab">基本情報</button>
-            <button className="sale-detail-tab">電気 / 屋根情報</button>
+            <button className={`sale-detail-tab ${basicInfoSelected ? 'act' : ''}`} onClick={handleBasicInfoClick}>
+              基本情報
+            </button>
+            <button className={`sale-detail-tab ${roofInfoSelected ? 'act' : ''}`} onClick={handleRoofInfoClick}>
+              電気 / 屋根情報
+            </button>
           </div>
         </div>
       </div>

src/components/ui/common/Header.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from 'react'
 
 import Link from 'next/link'
-import { usePathname } from 'next/navigation'
+import { usePathname, useRouter } from 'next/navigation'
 
 import { Swiper, SwiperSlide } from 'swiper/react'
 
@@ -17,6 +17,7 @@ import 'swiper/css'
 // }
 
 export default function Header({ name }: HeaderProps) {
+  const router = useRouter()
   const pathname = usePathname()
   const [headerAct, setHeaderAct] = useState<boolean>(false)
   const [isShowBackBtn, setIsShowBackBtn] = useState<boolean>(false)
@@ -38,7 +39,7 @@ export default function Header({ name }: HeaderProps) {
           <div className="header-inner">
             {isShowBackBtn && (
               <div className="back-button-wrap">
-                <button className="back-button"></button>
+                <button className="back-button" onClick={() => router.back()}></button>
               </div>
             )}
             <h2 className="logo">

src/store/surveySaleTabState.ts

@@ -0,0 +1,26 @@
+import { create } from 'zustand'
+
+type SurveySaleTabState = {
+  basicInfoSelected: boolean
+  roofInfoSelected: boolean
+  setBasicInfoSelected: () => void
+  setRoofInfoSelected: () => void
+  reset: () => void
+}
+
+type InitialState = {
+  basicInfoSelected: boolean
+  roofInfoSelected: boolean
+}
+
+const initialState: InitialState = {
+  basicInfoSelected: true,
+  roofInfoSelected: false,
+}
+
+export const useSurveySaleTabState = create<SurveySaleTabState>((set) => ({
+  ...initialState,
+  setBasicInfoSelected: () => set((state) => ({ ...state, basicInfoSelected: true, roofInfoSelected: false })),
+  setRoofInfoSelected: () => set((state) => ({ ...state, basicInfoSelected: false, roofInfoSelected: true })),
+  reset: () => set(initialState),
+}))