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

Merge pull request 'chore: update layout structure by adding header, footer, and float button components; implement member information popup; enhance popup controller for better state management' (#12) from feature/pub-yoo into dev

Browse Source 
Reviewed-on: #12
This commit is contained in:
swyoo 2025-05-02 12:44:13 +09:00
commit 6598dc9459
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 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-to-pdf": "^2.0.0",
"sass": "^1.87.0",
"swiper": "^11.2.6",
"zustand": "^5.0.3"
},
"devDependencies": {
@ -3947,6 +3948,25 @@
"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": {
"version": "4.0.17",
"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 PopupController from '@/components/ui/PopupController'
import '@/styles/style.scss'
import { headers } from 'next/headers'
import type { ReactNode } from 'react'
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode
}>) {
interface RootLayoutProps {
children: ReactNode
header: ReactNode
footer: ReactNode
floatBtn: ReactNode
}
export default async function RootLayout({ children, header, footer, floatBtn }: RootLayoutProps): Promise<ReactNode> {
return (
<html lang="en">
<body>
<ReactQueryProviders>{children}</ReactQueryProviders>
<PopupController />
</body>
</html>
<ReactQueryProviders>
<html lang="en">
<body>
<div className="wrap">
{header}
{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 Footer from '@/components/ui/common/Footer'
export default function page() {
return (
<>
<div className="wrap">
<div className="container">
<div className="login-contents">
<h1 className="login-logo">Hanasys 現地調査</h1>
<Login />
</div>
<div className="container">
<div className="login-contents">
<h1 className="login-logo">Hanasys 現地調査</h1>
<Login />
</div>
<Footer />
</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'
export default async function Home() {
return (
<>
<div className="wrap">
<Header name={'Hanasys 現地調査'} backBtn={false} />
<div className="container">
<Main />
</div>
<Footer />
<div className="container">
<Main />
</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() {
return (
<>
<div className="wrap">
<Header name={'調査物件一覧'} backBtn={true} />
<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 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>
<DataTable />
<DetailForm />
</div>
<DataTable />
<DetailForm />
</div>
<Footer />
<button className="top-btn"></button>
</div>
</>
)

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

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

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

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

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

@ -1,10 +1,6 @@
'use client'
import { usePopupController } from '@/store/popupController'
export default function DetailForm() {
const popupController = usePopupController()
return (
<>
<div className="sale-frame">
@ -51,12 +47,12 @@ export default function DetailForm() {
</button>
</div>
<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>
</button>
</div>
<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>
</button>
</div>

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

@ -1,7 +1,7 @@
'use client'
import { usePopupController } from '@/store/popupController'
import MemberInfomationPopup from '../popup/MemberInfomationPopup'
import MemberInfomationPopup from '../popup/MemberInformationPopup'
import ZipCodePopup from '../popup/ZipCodePopup'
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 'swiper/css'
import { usePathname } from 'next/navigation'
// type HeaderProps = {
// name: string //header 이름
@ -14,8 +15,13 @@ import 'swiper/css'
// }
export default function Header({ name, backBtn }: HeaderProps) {
const pathname = usePathname()
const [headerAct, setHeaderAct] = useState<boolean>(false)
if (pathname === '/login') {
return null
}
return (
<>
<div className="header-warp">

16
src/store/popupController.ts
View File

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