From 2a373dd7122b3be08ae4002666a18894ec0e4d3f Mon Sep 17 00:00:00 2001 From: yoosangwook Date: Fri, 2 May 2025 15:41:58 +0900 Subject: [PATCH] refactor: enhance layout structure by adding survey sale layout and navigation tab components; streamline page components for improved readability --- src/app/@header/default.tsx | 2 +- src/app/layout.tsx | 3 +++ src/app/survey-sale/@navTab/default.tsx | 5 ++++ src/app/survey-sale/[id]/basic-info/page.tsx | 21 ----------------- src/app/survey-sale/[id]/page.tsx | 16 ++----------- src/app/survey-sale/[id]/roof-info/page.tsx | 21 ----------------- src/app/survey-sale/basic-info/page.tsx | 9 ++++++++ src/app/survey-sale/layout.tsx | 19 ++++++++++++++++ src/app/survey-sale/page.tsx | 8 ++----- src/app/survey-sale/roof-info/page.tsx | 9 ++++++++ src/components/survey-sale/common/NavTab.tsx | 24 ++++++++++++++++++++ src/components/ui/Main.tsx | 10 ++++++++ src/components/ui/common/Header.tsx | 17 ++++++++++---- src/store/header.ts | 19 ++++++++++++++++ src/types/Header.ts | 2 +- 15 files changed, 117 insertions(+), 68 deletions(-) create mode 100644 src/app/survey-sale/@navTab/default.tsx delete mode 100644 src/app/survey-sale/[id]/basic-info/page.tsx delete mode 100644 src/app/survey-sale/[id]/roof-info/page.tsx create mode 100644 src/app/survey-sale/basic-info/page.tsx create mode 100644 src/app/survey-sale/layout.tsx create mode 100644 src/app/survey-sale/roof-info/page.tsx create mode 100644 src/components/survey-sale/common/NavTab.tsx create mode 100644 src/store/header.ts diff --git a/src/app/@header/default.tsx b/src/app/@header/default.tsx index b3c6110..33c708b 100644 --- a/src/app/@header/default.tsx +++ b/src/app/@header/default.tsx @@ -1,5 +1,5 @@ import Header from '@/components/ui/common/Header' export default function page() { - return
+ return
} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 8d8a263..4b043a8 100644 --- a/src/app/layout.tsx +++ b/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 = { diff --git a/src/app/survey-sale/@navTab/default.tsx b/src/app/survey-sale/@navTab/default.tsx new file mode 100644 index 0000000..6fefef5 --- /dev/null +++ b/src/app/survey-sale/@navTab/default.tsx @@ -0,0 +1,5 @@ +import NavTab from '@/components/survey-sale/common/NavTab' + +export default function page() { + return +} diff --git a/src/app/survey-sale/[id]/basic-info/page.tsx b/src/app/survey-sale/[id]/basic-info/page.tsx deleted file mode 100644 index 7cd4da9..0000000 --- a/src/app/survey-sale/[id]/basic-info/page.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import BasicForm from '@/components/survey-sale/detail/BasicForm' - -export default function page() { - return ( - <> -
-
-
-
-
- - -
-
-
- -
-
- - ) -} diff --git a/src/app/survey-sale/[id]/page.tsx b/src/app/survey-sale/[id]/page.tsx index e42f932..52202ca 100644 --- a/src/app/survey-sale/[id]/page.tsx +++ b/src/app/survey-sale/[id]/page.tsx @@ -4,20 +4,8 @@ import DetailForm from '@/components/survey-sale/detail/DetailForm' export default function page() { return ( <> -
-
-
-
-
- - -
-
-
- - -
-
+ + ) } diff --git a/src/app/survey-sale/[id]/roof-info/page.tsx b/src/app/survey-sale/[id]/roof-info/page.tsx deleted file mode 100644 index d959125..0000000 --- a/src/app/survey-sale/[id]/roof-info/page.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import RoofInfoForm from '@/components/survey-sale/detail/RoofInfoForm' - -export default function page() { - return ( - <> -
-
-
-
-
- - -
-
-
- -
-
- - ) -} diff --git a/src/app/survey-sale/basic-info/page.tsx b/src/app/survey-sale/basic-info/page.tsx new file mode 100644 index 0000000..20cbeb8 --- /dev/null +++ b/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 ( + <> + + + ) +} diff --git a/src/app/survey-sale/layout.tsx b/src/app/survey-sale/layout.tsx new file mode 100644 index 0000000..c4e7854 --- /dev/null +++ b/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 ( + <> +
+
+ {navTab} + {children} +
+
+ + ) +} diff --git a/src/app/survey-sale/page.tsx b/src/app/survey-sale/page.tsx index 185c543..fc6e6a3 100644 --- a/src/app/survey-sale/page.tsx +++ b/src/app/survey-sale/page.tsx @@ -4,12 +4,8 @@ import SearchForm from '@/components/survey-sale/list/SearchForm' export default function page() { return ( <> -
-
- - -
-
+ + ) } diff --git a/src/app/survey-sale/roof-info/page.tsx b/src/app/survey-sale/roof-info/page.tsx new file mode 100644 index 0000000..2bdfea5 --- /dev/null +++ b/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 ( + <> + + + ) +} diff --git a/src/components/survey-sale/common/NavTab.tsx b/src/components/survey-sale/common/NavTab.tsx new file mode 100644 index 0000000..7d763cc --- /dev/null +++ b/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 ( + <> +
+
+
+ + +
+
+
+ + ) +} diff --git a/src/components/ui/Main.tsx b/src/components/ui/Main.tsx index 3908e6d..2b20646 100644 --- a/src/components/ui/Main.tsx +++ b/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 ( <>
diff --git a/src/components/ui/common/Header.tsx b/src/components/ui/common/Header.tsx index d9a1268..4a6056f 100644 --- a/src/components/ui/common/Header.tsx +++ b/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(false) + const [isShowBackBtn, setIsShowBackBtn] = useState(false) if (pathname === '/login') { return null } + useEffect(() => { + if (pathname !== '/') { + setIsShowBackBtn(true) + } + }, [pathname]) + return ( <>
- {backBtn && ( + {isShowBackBtn && (
diff --git a/src/store/header.ts b/src/store/header.ts new file mode 100644 index 0000000..f385213 --- /dev/null +++ b/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((set) => ({ + ...initialState, + setBackBtn: (value: boolean) => set((state) => ({ ...state, backBtn: value })), +})) diff --git a/src/types/Header.ts b/src/types/Header.ts index a70a8c8..2631a88 100644 --- a/src/types/Header.ts +++ b/src/types/Header.ts @@ -1,4 +1,4 @@ export type HeaderProps = { name: string //header 이름 - backBtn: boolean // 뒤로가기 버튼 유무 + // backBtn: boolean // 뒤로가기 버튼 유무 }