Merge pull request 'refactor: enhance layout structure by adding survey sale layout and navigation tab components; streamline page components for improved readability' (#17) from feature/pub-yoo into dev

Reviewed-on: #17

src/app/@header/default.tsx

@@ -1,5 +1,5 @@
 import Header from '@/components/ui/common/Header'
 
 export default function page() {
-  return <Header name={'調査物件一覧'} backBtn={true} />
+  return <Header name={'調査物件一覧'} />
 }

src/app/layout.tsx

@@ -1,7 +1,10 @@
 import type { Metadata } from 'next'
+
 import ReactQueryProviders from '@/providers/ReactQueryProvider'
 import PopupController from '@/components/ui/PopupController'
+
 import '@/styles/style.scss'
+
 import type { ReactNode } from 'react'
 
 export const metadata: Metadata = {

src/app/survey-sale/@navTab/default.tsx

@@ -0,0 +1,5 @@
+import NavTab from '@/components/survey-sale/common/NavTab'
+
+export default function page() {
+  return <NavTab />
+}

src/app/survey-sale/[id]/basic-info/page.tsx

@@ -1,21 +0,0 @@
-import BasicForm from '@/components/survey-sale/detail/BasicForm'
-
-export default function page() {
-  return (
-    <>
-      <div className="container">
-        <div className="sale-contents">
-          <div className="sale-detail-tab-relative">
-            <div className="sale-detail-tab-wrap">
-              <div className="sale-detail-tab-inner">
-                <button className="sale-detail-tab act">基本情報</button>
-                <button className="sale-detail-tab">電気 / 屋根情報</button>
-              </div>
-            </div>
-          </div>
-          <BasicForm />
-        </div>
-      </div>
-    </>
-  )
-}

src/app/survey-sale/[id]/page.tsx

@@ -4,20 +4,8 @@ import DetailForm from '@/components/survey-sale/detail/DetailForm'
 export default function page() {
   return (
     <>
-      <div className="container">
-        <div className="sale-contents">
-          <div className="sale-detail-tab-relative">
-            <div className="sale-detail-tab-wrap">
-              <div className="sale-detail-tab-inner">
-                <button className="sale-detail-tab act">基本情報</button>
-                <button className="sale-detail-tab">電気 / 屋根情報</button>
-              </div>
-            </div>
-          </div>
-          <DataTable />
-          <DetailForm />
-        </div>
-      </div>
+      <DataTable />
+      <DetailForm />
     </>
   )
 }

src/app/survey-sale/[id]/roof-info/page.tsx

@@ -1,21 +0,0 @@
-import RoofInfoForm from '@/components/survey-sale/detail/RoofInfoForm'
-
-export default function page() {
-  return (
-    <>
-      <div className="container">
-        <div className="sale-contents">
-          <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 act">電気 / 屋根情報</button>
-              </div>
-            </div>
-          </div>
-          <RoofInfoForm />
-        </div>
-      </div>
-    </>
-  )
-}

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

@@ -0,0 +1,9 @@
+import BasicForm from '@/components/survey-sale/detail/BasicForm'
+
+export default function page() {
+  return (
+    <>
+      <BasicForm />
+    </>
+  )
+}

src/app/survey-sale/layout.tsx

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react'
+
+interface SurveySaleLayoutProps {
+  children: ReactNode
+  navTab: ReactNode
+}
+
+export default function layout({ children, navTab }: SurveySaleLayoutProps) {
+  return (
+    <>
+      <div className="container">
+        <div className="sale-contents">
+          {navTab}
+          {children}
+        </div>
+      </div>
+    </>
+  )
+}

src/app/survey-sale/page.tsx

@@ -4,12 +4,8 @@ import SearchForm from '@/components/survey-sale/list/SearchForm'
 export default function page() {
   return (
     <>
-      <div className="container">
-        <div className="sale-contents">
-          <SearchForm />
-          <ListTable />
-        </div>
-      </div>
+      <SearchForm />
+      <ListTable />
     </>
   )
 }

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

@@ -0,0 +1,9 @@
+import RoofInfoForm from '@/components/survey-sale/detail/RoofInfoForm'
+
+export default function page() {
+  return (
+    <>
+      <RoofInfoForm />
+    </>
+  )
+}

src/components/survey-sale/common/NavTab.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import { usePathname } from 'next/navigation'
+
+export default function NavTab() {
+  const pathname = usePathname()
+
+  if (pathname === '/survey-sale') {
+    return null
+  }
+
+  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>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/ui/Main.tsx

@@ -1,4 +1,14 @@
+'use client'
+
+import { useHeaderStore } from '@/store/header'
+import { useEffect } from 'react'
+
 export default function Main() {
+  const { setBackBtn } = useHeaderStore()
+  useEffect(() => {
+    setBackBtn(false)
+  }, [])
+
   return (
     <>
       <div className="main-contens">

src/components/ui/common/Header.tsx

@@ -1,33 +1,42 @@
 'use client'
 
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
+
 import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+
 import { Swiper, SwiperSlide } from 'swiper/react'
 
 import type { HeaderProps } from '@/types/Header'
 
 import 'swiper/css'
-import { usePathname } from 'next/navigation'
 
 // type HeaderProps = {
 //   name: string //header 이름
 //   backBtn: boolean // 뒤로가기 버튼 유무
 // }
 
-export default function Header({ name, backBtn }: HeaderProps) {
+export default function Header({ name }: HeaderProps) {
   const pathname = usePathname()
   const [headerAct, setHeaderAct] = useState<boolean>(false)
+  const [isShowBackBtn, setIsShowBackBtn] = useState<boolean>(false)
 
   if (pathname === '/login') {
     return null
   }
 
+  useEffect(() => {
+    if (pathname !== '/') {
+      setIsShowBackBtn(true)
+    }
+  }, [pathname])
+
   return (
     <>
       <div className="header-warp">
         <header>
           <div className="header-inner">
-            {backBtn && (
+            {isShowBackBtn && (
               <div className="back-button-wrap">
                 <button className="back-button"></button>
               </div>

src/store/header.ts

@@ -0,0 +1,19 @@
+import { create } from 'zustand'
+
+type HeaderState = {
+  backBtn: boolean
+  setBackBtn: (backBtn: boolean) => void
+}
+
+type InitialState = {
+  backBtn: boolean
+}
+
+const initialState: InitialState = {
+  backBtn: true,
+}
+
+export const useHeaderStore = create<HeaderState>((set) => ({
+  ...initialState,
+  setBackBtn: (value: boolean) => set((state) => ({ ...state, backBtn: value })),
+}))

src/types/Header.ts

@@ -1,4 +1,4 @@
 export type HeaderProps = {
   name: string //header 이름
-  backBtn: boolean // 뒤로가기 버튼 유무
+  // backBtn: boolean // 뒤로가기 버튼 유무
 }