qcast3/onsitesurvey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: update layout structure by adding header, footer, and float button components; implement member information popup; enhance popup controller for better state management

Browse Source
This commit is contained in:
yoosangwook 2025-05-02 12:43:34 +09:00
parent 933eeb5f2e
commit 1f102a5054
16 changed files with 125 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
README.md
View File

@ -17,3 +17,23 @@ generate 를 진행해야 로컬에 연결 파일들이 생성이되고 pull pus
const cache = useQueryClient() const cache = useQueryClient()
const data = cache.getQueryData(['user', 'info']) as UserState const data = cache.getQueryData(['user', 'info']) as UserState
``` ```
# 팝업 컨트롤러 제어
### open
```
const popupController = usePopupController()
onClick={() => popupController.setMemberInfomationPopup(true)}
onClick={() => popupController.setZipCodePopup(true)}
```
### close
```
const popupController = usePopupController()
onClick={() => popupController.setMemberInfomationPopup(false)}
onClick={() => popupController.setZipCodePopup(false)}
```

20
package-lock.json generated
View File

@ -19,6 +19,7 @@
"react-dom": "^19.0.0", "react-dom": "^19.0.0",
"react-to-pdf": "^2.0.0", "react-to-pdf": "^2.0.0",
"sass": "^1.87.0", "sass": "^1.87.0",
"swiper": "^11.2.6",
"zustand": "^5.0.3" "zustand": "^5.0.3"
}, },
"devDependencies": { "devDependencies": {
@ -3947,6 +3948,25 @@
"node": ">=12.0.0" "node": ">=12.0.0"
} }
}, },
"node_modules/swiper": {
"version": "11.2.6",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.6.tgz",
"integrity": "sha512-8aXpYKtjy3DjcbzZfz+/OX/GhcU5h+looA6PbAzHMZT6ESSycSp9nAjPCenczgJyslV+rUGse64LMGpWE3PX9Q==",
"funding": [
{
"type": "patreon",
"url": "https://www.patreon.com/swiperjs"
},
{
"type": "open_collective",
"url": "http://opencollective.com/swiper"
}
],
"license": "MIT",
"engines": {
"node": ">= 4.7.0"
}
},
"node_modules/tailwindcss": { "node_modules/tailwindcss": {
"version": "4.0.17", "version": "4.0.17",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.17.tgz", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.17.tgz",

5
src/app/@floatBtn/default.tsx Normal file
View File

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

5
src/app/@footer/default.tsx Normal file
View File

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

5
src/app/@header/default.tsx Normal file
View File

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

34
src/app/layout.tsx
View File

@ -2,23 +2,35 @@ import type { Metadata } from 'next'
import ReactQueryProviders from '@/providers/ReactQueryProvider' import ReactQueryProviders from '@/providers/ReactQueryProvider'
import PopupController from '@/components/ui/PopupController' import PopupController from '@/components/ui/PopupController'
import '@/styles/style.scss' import '@/styles/style.scss'
import { headers } from 'next/headers'
import type { ReactNode } from 'react'
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'Create Next App', title: 'Create Next App',
description: 'Generated by create next app', description: 'Generated by create next app',
} }
export default function RootLayout({ interface RootLayoutProps {
children, children: ReactNode
}: Readonly<{ header: ReactNode
children: React.ReactNode footer: ReactNode
}>) { floatBtn: ReactNode
}
export default async function RootLayout({ children, header, footer, floatBtn }: RootLayoutProps): Promise<ReactNode> {
return ( return (
<html lang="en"> <ReactQueryProviders>
<body> <html lang="en">
<ReactQueryProviders>{children}</ReactQueryProviders> <body>
<PopupController /> <div className="wrap">
</body> {header}
</html> {children}
{footer}
{floatBtn}
</div>
<PopupController />
</body>
</html>
</ReactQueryProviders>
) )
} }

12
src/app/login/page.tsx
View File

@ -1,17 +1,13 @@
import Login from '@/components/Login' import Login from '@/components/Login'
import Footer from '@/components/ui/common/Footer'
export default function page() { export default function page() {
return ( return (
<> <>
<div className="wrap"> <div className="container">
<div className="container"> <div className="login-contents">
<div className="login-contents"> <h1 className="login-logo">Hanasys 現地調査</h1>
<h1 className="login-logo">Hanasys 現地調査</h1> <Login />
<Login />
</div>
</div> </div>
<Footer />
</div> </div>
</> </>
) )

10
src/app/page.tsx
View File

@ -1,16 +1,10 @@
import Footer from '@/components/ui/common/Footer'
import Header from '@/components/ui/common/Header'
import Main from '@/components/ui/Main' import Main from '@/components/ui/Main'
export default async function Home() { export default async function Home() {
return ( return (
<> <>
<div className="wrap"> <div className="container">
<Header name={'Hanasys 現地調査'} backBtn={false} /> <Main />
<div className="container">
<Main />
</div>
<Footer />
</div> </div>
</> </>
) )

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

@ -6,24 +6,19 @@ import Header from '@/components/ui/common/Header'
export default function page() { export default function page() {
return ( return (
<> <>
<div className="wrap"> <div className="container">
<Header name={'調査物件一覧'} backBtn={true} /> <div className="sale-contents">
<div className="container"> <div className="sale-detail-tab-relative">
<div className="sale-contents"> <div className="sale-detail-tab-wrap">
<div className="sale-detail-tab-relative"> <div className="sale-detail-tab-inner">
<div className="sale-detail-tab-wrap"> <button className="sale-detail-tab act">基本情報</button>
<div className="sale-detail-tab-inner"> <button className="sale-detail-tab">電気 / 屋根情報</button>
<button className="sale-detail-tab act">基本情報</button>
<button className="sale-detail-tab">電気 / 屋根情報</button>
</div>
</div> </div>
</div> </div>
<DataTable />
<DetailForm />
</div> </div>
<DataTable />
<DetailForm />
</div> </div>
<Footer />
<button className="top-btn"></button>
</div> </div>
</> </>
) )

15
src/app/survey-sale/page.tsx
View File

@ -1,21 +1,14 @@
import ListTable from '@/components/survey-sale/list/ListTable' import ListTable from '@/components/survey-sale/list/ListTable'
import SearchForm from '@/components/survey-sale/list/SearchForm' import SearchForm from '@/components/survey-sale/list/SearchForm'
import Footer from '@/components/ui/common/Footer'
import Header from '@/components/ui/common/Header'
export default function page() { export default function page() {
return ( return (
<> <>
<div className="wrap"> <div className="container">
<Header name={'調査物件一覧'} backBtn={true} /> <div className="sale-contents">
<div className="container"> <SearchForm />
<div className="sale-contents"> <ListTable />
<SearchForm />
<ListTable />
</div>
</div> </div>
<Footer />
<button className="top-btn"></button>
</div> </div>
</> </>
) )

4
src/components/popup/MemberInfomationPopup.tsx → src/components/popup/MemberInformationPopup.tsx
View File

@ -2,7 +2,7 @@
import { usePopupController } from '@/store/popupController' import { usePopupController } from '@/store/popupController'
export default function MemberInfomationPopup() { export default function MemberInformationPopup() {
const popupController = usePopupController() const popupController = usePopupController()
return ( return (
@ -17,7 +17,7 @@ export default function MemberInfomationPopup() {
</div> </div>
<div className="modal-name">会員情報</div> <div className="modal-name">会員情報</div>
</div> </div>
<button className="modal-close" onClick={() => popupController.setMemberInfomationPopup({ memberInfomationPopup: false })}></button> <button className="modal-close" onClick={() => popupController.setMemberInfomationPopup(false)}></button>
</div> </div>
</div> </div>
<div className="modal-body"> <div className="modal-body">

8
src/components/survey-sale/detail/DetailForm.tsx
View File

@ -1,10 +1,6 @@
'use client' 'use client'
import { usePopupController } from '@/store/popupController'
export default function DetailForm() { export default function DetailForm() {
const popupController = usePopupController()
return ( return (
<> <>
<div className="sale-frame"> <div className="sale-frame">
@ -51,12 +47,12 @@ export default function DetailForm() {
</button> </button>
</div> </div>
<div className="btn-bx"> <div className="btn-bx">
<button className="btn-frame n-blue icon" onClick={() => popupController.setMemberInfomationPopup({ memberInfomationPopup: true })}> <button className="btn-frame n-blue icon">
修正<i className="btn-arr"></i> 修正<i className="btn-arr"></i>
</button> </button>
</div> </div>
<div className="btn-bx"> <div className="btn-bx">
<button className="btn-frame n-blue icon" onClick={() => popupController.setZipCodePopup({ zipCodePopup: true })}> <button className="btn-frame n-blue icon">
削除<i className="btn-arr"></i> 削除<i className="btn-arr"></i>
</button> </button>
</div> </div>

2
src/components/ui/PopupController.tsx
View File

@ -1,7 +1,7 @@
'use client' 'use client'
import { usePopupController } from '@/store/popupController' import { usePopupController } from '@/store/popupController'
import MemberInfomationPopup from '../popup/MemberInfomationPopup' import MemberInfomationPopup from '../popup/MemberInformationPopup'
import ZipCodePopup from '../popup/ZipCodePopup' import ZipCodePopup from '../popup/ZipCodePopup'
export default function PopupController() { export default function PopupController() {

13
src/components/ui/common/FloatBtn.tsx Normal file
View File

@ -0,0 +1,13 @@
'use client'
import { usePathname } from 'next/navigation'
export default function FloatBtn() {
const pathname = usePathname()
if (pathname === '/login' || pathname === '/') {
return null
}
return <button className="top-btn"></button>
}

6
src/components/ui/common/Header.tsx
View File

@ -7,6 +7,7 @@ import { Swiper, SwiperSlide } from 'swiper/react'
import type { HeaderProps } from '@/types/Header' import type { HeaderProps } from '@/types/Header'
import 'swiper/css' import 'swiper/css'
import { usePathname } from 'next/navigation'
// type HeaderProps = { // type HeaderProps = {
// name: string //header 이름 // name: string //header 이름
@ -14,8 +15,13 @@ import 'swiper/css'
// } // }
export default function Header({ name, backBtn }: HeaderProps) { export default function Header({ name, backBtn }: HeaderProps) {
const pathname = usePathname()
const [headerAct, setHeaderAct] = useState<boolean>(false) const [headerAct, setHeaderAct] = useState<boolean>(false)
if (pathname === '/login') {
return null
}
return ( return (
<> <>
<div className="header-warp"> <div className="header-warp">

16
src/store/popupController.ts
View File

@ -1,18 +1,10 @@
import { create } from 'zustand' import { create } from 'zustand'
type MemberInfomationPopupState = {
memberInfomationPopup: boolean
}
type ZipCodePopupState = {
zipCodePopup: boolean
}
type PoupControllerState = { type PoupControllerState = {
memberInfomationPopup: boolean memberInfomationPopup: boolean
zipCodePopup: boolean zipCodePopup: boolean
setMemberInfomationPopup: (MemberInfomationPopupState: MemberInfomationPopupState) => void setMemberInfomationPopup: (value: boolean) => void
setZipCodePopup: (ZipCodePopupState: ZipCodePopupState) => void setZipCodePopup: (value: boolean) => void
} }
type InitialState = { type InitialState = {
@ -27,7 +19,7 @@ const initialState: InitialState = {
export const usePopupController = create<PoupControllerState>((set) => ({ export const usePopupController = create<PoupControllerState>((set) => ({
...initialState, ...initialState,
setMemberInfomationPopup: ({ memberInfomationPopup }) => set((state) => ({ ...state, memberInfomationPopup })), setMemberInfomationPopup: (value: boolean) => set((state) => ({ ...state, memberInfomationPopup: value })),
setZipCodePopup: ({ zipCodePopup }) => set((state) => ({ ...state, zipCodePopup })), setZipCodePopup: (value: boolean) => set((state) => ({ ...state, zipCodePopup: value })),
reset: () => set(initialState), reset: () => set(initialState),
})) }))