ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

첫페이지 관련 store 처리

Browse Source
This commit is contained in:
truthwing
2025-03-05 15:44:17 +09:00
parent c6dea2e397
commit bf8dbffd15
5 changed files with 185 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/wr/app/page.tsx
+3 -3
View File
@@ -1,12 +1,12 @@
import PublicReuseFaciltyInsert from './publicReuseFaciltyInsert/page';
import { StoreProvider } from './store';
export default function Home() {
return (
<StoreProvider>
<PublicReuseFaciltyInsert />
</StoreProvider>
);
}
apps/wr/app/publicReuseFaciltyInsert/page.tsx
+27 -111
View File
@@ -1,115 +1,20 @@
import {UiTable} from '@common/business_components';
import { TableRow } from '@common/components';
import { TableHead } from '@common/components';
"use client";
import { UiTable } from '@common/business_components';
import { Button, TableHead, TableRow } from '@common/components';
import { useEffect } from 'react';
import { useWrStore } from '../store';
import type { TableUpperProps } from '../store/publicReuseFaciltyInsert';
interface TableUpperProps {
id: string;
title: string;
upName : string;
upSequnce: number;
}
const publicReuseFacility = [
{
sido: "서울",
sigungo: "강남구",
facilityName: "난지",
location: "경기도 고양시 덕양구 대차로 4가",
locationgubun: "500",
facilityCapacity: "800,000",
reuse: "Y",
register: "Y"
},
{
sido: "서울",
sigungo: "강남구",
facilityName: "난지",
location: "경기도 고양시 덕양구 대차로 4가",
locationgubun: "500",
facilityCapacity: "800,000",
reuse: "Y",
register: "Y"
},
{
sido: "서울",
sigungo: "강남구",
facilityName: "난지",
location: "경기도 고양시 덕양구 대차로 4가",
locationgubun: "500",
facilityCapacity: "800,000",
reuse: "Y",
register: "Y"
},
]
const publicReuseFacilityUper = [
{
sido: "서울",
sigungo: "강남구",
facilityName: "난지",
location: "경기도 고양시 덕양구 대차로 4가",
locationgubun: "500",
facilityCapacity: "800,000",
reuse: "Y",
register: "Y"
},
{
sido: "서울",
sigungo: "강남구",
facilityName: "난지",
location: "경기도 고양시 덕양구 대차로 4가",
locationgubun: "500",
facilityCapacity: "800,000",
reuse: "Y",
register: "Y"
},
{
sido: "서울",
sigungo: "강남구",
facilityName: "난지",
location: "경기도 고양시 덕양구 대차로 4가",
locationgubun: "500",
facilityCapacity: "800,000",
yn: "Y",
authoDay: "2012",
area:"123"
},
]
const headList = [
{ id: "sido", title: "시도" },
{ id: "sigungo", title: "시군구" },
{ id: "facilityName", title: "시설명" },
{ id: "location", title: "위치" },
{ id: "locationgubun", title: "지역구분" },
{ id: "facilityCapacity", title: "시설용량" },
{ id: "reuse", title: '재이용여부' },
{ id: "register", title: '등록여부' }];
const upHeadList = [
{ id: "sido", title: "시도" },
{ id: "sigungo", title: "시군구" },
{ id: "facilityName", title: "시설명" },
{ id: "location", title: "위치" },
{ id: "locationgubun", title: "지역구분" },
{ id: "facilityCapacity", title: "시설용량" },
{ id: "yn", title: '여부', upName:'upChangeRe' , upSequnce:1 },
{ id: "authoDay", title: '허가일',upName:'upChangeRe', upSequnce:2 },
{ id: "area", title: '면적' ,upName:'upChangeRe',upSequnce:3 }];
const headMakeColSpan = (upHeadList: any) => {
return ( <>
<TableRow>{
upHeadList.map((head: TableUpperProps) =>
(head.upName === 'upChangeRe'&& head.upSequnce=== 1?<TableHead rowSpan={1} colSpan={3}>{'중축 개축 증축 '}</TableHead>:
head.upSequnce> 1?null:<TableHead rowSpan={2}key={head.id}>{head.title}</TableHead>))}
(!head.upSequnce?null:
head.upName === 'upChangeRe'&& head.upSequnce=== 1?<TableHead key={head.id} rowSpan={1} colSpan={3}>{'중축 개축 증축 '}</TableHead>:
head.upSequnce > 1?null:<TableHead rowSpan={2}key={head.id}>{head.title}</TableHead>))}
</TableRow>
<TableRow>
{upHeadList.map((head: TableUpperProps) =>
@@ -118,15 +23,26 @@ const headList = [
</>)
}
export default function PublicReuseFaciltyInsert() {
export default function PublicReuseFaciltyInsert() {
const { isInit, upHeadList, publicReuseFacilityUper, decrementList} = useWrStore((state) => state);
const nodeList= headMakeColSpan(upHeadList);
const total = 100;
return ( <div>
<UiTable publicReuseFacility={publicReuseFacilityUper} headlist={upHeadList} pageSize={100} total={total} children={nodeList} headName={'test'} />
</div>
//sample
useEffect(() => {
if(!isInit)
decrementList();
}, [isInit]);
return (
<>
<UiTable publicReuseFacility={publicReuseFacilityUper} headlist={upHeadList} pageSize={100} total={total} children={nodeList} headName={'test'} />
<div>
{/* sample store */}
<Button type="button" onClick={decrementList}>
decrement_list
</Button>
</div>
</>
);
}
apps/wr/app/store/index.tsx
+46
View File
@@ -0,0 +1,46 @@
'use client'
import { type ReactNode, createContext, useContext, useRef } from 'react'
import { useStore } from 'zustand'
import { type WrStore, StoreZus } from './store'
export type StoreApi = ReturnType<typeof StoreZus>
export const StoreContext = createContext<StoreApi | undefined>(
undefined,
)
export interface StoreProviderProps {
children: ReactNode
}
export const StoreProvider = ({
children,
}: StoreProviderProps) => {
const storeRef = useRef<StoreApi>(null)
console.log("StoreProvider");
if (!storeRef.current) {
storeRef.current = StoreZus()
}
return (
<StoreContext.Provider value={storeRef.current}>
{children}
</StoreContext.Provider>
)
}
export const useWrStore = <T,>(
selector: (store: WrStore) => T,
): T => {
const storeContext = useContext(StoreContext)
console.log("useStore", storeContext);
if (!storeContext) {
throw new Error(`useStore must be used within StoreProvider`)
}
return useStore(storeContext, selector)
}
apps/wr/app/store/publicReuseFaciltyInsert/index.tsx
+97
View File
@@ -0,0 +1,97 @@
export type TableUpperProps = {
id: string;
title: string;
upName?: string;
upSequnce?: number;
}
type PublicReuseFacility = {
sido: string,
sigungo: string,
facilityName: string,
location: string,
locationgubun: string,
facilityCapacity: string,
yn?: string,
authoDay?: string,
area?: string,
reuse?: string,
register?: string
}
const upHeadList:TableUpperProps[] = [
{ id: "sido", title: "시도"},
{ id: "sigungo", title: "시군구"},
{ id: "facilityName", title: "시설명"},
{ id: "location", title: "위치"},
{ id: "locationgubun", title: "지역구분"},
{ id: "facilityCapacity", title: "시설용량"},
{ id: "yn", title: '여부', upName:'upChangeRe' , upSequnce:1 },
{ id: "authoDay", title: '허가일',upName:'upChangeRe', upSequnce:2 },
{ id: "area", title: '면적' ,upName:'upChangeRe',upSequnce:3 }];
const publicReuseFacilityUper:PublicReuseFacility[] = [
{
sido: "서울",
sigungo: "강남구",
facilityName: "난지",
location: "경기도 고양시 덕양구 대차로 4가",
locationgubun: "500",
facilityCapacity: "800,000",
reuse: "Y",
register: "Y"
},
{
sido: "서울",
sigungo: "강남구",
facilityName: "난지",
location: "경기도 고양시 덕양구 대차로 4가",
locationgubun: "500",
facilityCapacity: "800,000",
reuse: "Y",
register: "Y"
},
{
sido: "서울",
sigungo: "강남구",
facilityName: "난지",
location: "경기도 고양시 덕양구 대차로 4가",
locationgubun: "500",
facilityCapacity: "800,000",
yn: "Y",
authoDay: "2012",
area:"123"
},
]
export type tableState = {
isInit: boolean;
upHeadList: TableUpperProps[];
publicReuseFacilityUper: PublicReuseFacility[];
}
type tableActions = {
decrementList: () => void
}
export type tableType = tableState & tableActions;
export const tableStateExport:tableState= {
isInit:false,
upHeadList: upHeadList,
publicReuseFacilityUper: publicReuseFacilityUper,
}
export const tableActionsExport:(set:any)=>tableActions=(set: any) => {
console.log("tableActionsExport");
return {
decrementList:()=>set(
(state:tableState) => {
console.log("tableActionsExport", state);
return (
{
upHeadList: state.upHeadList,
publicReuseFacilityUper:
state.publicReuseFacilityUper.slice(0, state.publicReuseFacilityUper.length - 1)
})}
)
}
}
apps/wr/app/store/store.tsx
+12
View File
@@ -0,0 +1,12 @@
import { createStore } from 'zustand/vanilla';
import { tableActionsExport, tableStateExport, type tableState, type tableType } from './publicReuseFaciltyInsert/index';
export type WrStore = tableType;
export const StoreZus = (initState: tableState = tableStateExport) => {
return createStore<WrStore>()((set) => {
return {
...initState,
...tableActionsExport(set)
}
})
}
//store 등록하는 부분