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

css 수정

Browse Source
This commit is contained in:
jyha00
2025-05-21 09:12:34 +09:00
parent fb10e7483b
commit 686b97e29d
11 changed files with 167 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/wr/app/ruseFcltMng/fcltReg/htdflReg/page.tsx
+5 -5
View File
@@ -91,12 +91,12 @@ export default function Home() {
<ContentsDiv>
<div className="grid grid-cols-2 gap-4 ">
<div className="col-span-2">
<Title title={"온배수시설 등록 "} />
<Title title={"온배수시설 등록"} />
<SearchDiv>
<SearchFormLeft>
<SearchInput
className="col-span-3 my-7"
label="건물명:"
label="건물명"
textValue={searchTxt || ""}
setText={(e) => {
setSearchTxt(e);
@@ -126,14 +126,14 @@ export default function Home() {
headlist={htdfl.upHeadList}
pageSize={100}
total={10}
headName={"○건축물 목록"}
headName={"건축물 목록"}
cellClick={(val, headId) => { cellClick(val || undefined, headId); } }
onPageChange={setPageNation}
>
</UiTable>
</ListDiv>
</div>
<div className="col-span-2 max-h-full ovreflow-y-scroll">
<div className="col-span-2 max-h-full">
<ListDiv>
<ScrollArea>
<HtdflRegForm
@@ -146,7 +146,7 @@ export default function Home() {
</div>
<UiModal
body={<BdstReg moType="HTB"></BdstReg>}
bodyClass="w-[40vw] max-w-none"
bodyClass="w-[68vw] max-w-none h-[90vh]"
open={issNewReg}
onOpenChange={(open) => {
setIsNewReg(open);
apps/wr/app/ruseFcltMng/fcltReg/rainReg/page.tsx
+3 -3
View File
@@ -130,7 +130,7 @@ export default function Home() {
<div className="grid grid-cols-6 gap-4">
<div className="col-span-4 h-full min-h-0">
<ListDiv className="min-h-0">
<ScrollArea className="h-[60vh]">
{/* <ScrollArea className="h-[60vh]"> */}
<UiTable
tableData={bdstTable || []}
headlist={rain.upHeadList}
@@ -143,7 +143,7 @@ export default function Home() {
onPageChange={setPageNation}
>
</UiTable>
</ScrollArea>
{/* </ScrollArea> */}
</ListDiv>
</div>
<div className="col-span-2 max-h-full">
@@ -160,7 +160,7 @@ export default function Home() {
</div>
<UiModal
body={<BdstReg moType="RNB"></BdstReg>}
bodyClass="w-[30vw] max-w-none"
bodyClass="w-[68vw] max-w-none h-[90vh]"
open={issNewReg}
onOpenChange={(open) => {
setIsNewReg(open);
apps/wr/app/ruseFcltMng/fcltReg/rswtReg/page.tsx
+10 -10
View File
@@ -86,14 +86,14 @@ export default function Home() {
return (
<>
<ContentsDiv>
<div className="grid grid-cols-4 gap-4 ">
<div className="grid grid-cols-4 gap-4">
<div className="col-span-4">
<Title title={"중수도시설 등록 "} />
<Title title={"중수도시설 등록"} />
<SearchDiv>
<SearchFormLeft>
<SearchInput
className="col-span-3 my-7"
label="건물명:"
label="건물명"
textValue={searchTxt || ""}
setText={(e) => {
setSearchTxt(e);
@@ -124,24 +124,24 @@ export default function Home() {
</div>
</div>
<div className="grid grid-cols-6 gap-4 ">
<div className="col-span-4">
<ListDiv>
<div className="grid grid-cols-6 gap-4">
<div className="col-span-4 h-full min-h-0">
<ListDiv className="min-h-0">
<UiTable
tableData={bdstTable || []}
headlist={rswt.upHeadList}
pageSize={20}
total={10000}
headName={"○건축물 목록"}
headName={"건축물 목록"}
cellClick={cellClick}
onPageChange={setPageNation}
>
</UiTable>
</ListDiv>
</div>
<div className="col-span-2 max-h-full ovreflow-y-scroll">
<div className="col-span-2 max-h-full">
<ListDiv>
<ScrollArea>
<ScrollArea className="h-[60vh]">
<RswtrRegForm
rswtForm={rswtForm ?? ({} as customRswtBdst)}
isModal={false}
@@ -153,7 +153,7 @@ export default function Home() {
<UiModal
body={<BdstReg moType="RST"></BdstReg>}
bodyClass="w-[40vw] max-w-none"
bodyClass="w-[68vw] max-w-none h-[90vh]"
open={issNewReg}
onOpenChange={(open) => {
setIsNewReg(open);
apps/wr/app/store/ruseFcltMng/fcltReg/bdstReg/index.tsx
+3 -3
View File
@@ -17,9 +17,9 @@ type TableUpperProps = {
{ id: "daddr", title: "위치" },
{ id: "frstArchPrmsnDt", title: "최초건축허가일" },
{ id: "archArea", title: "건축면적", },
{ id: "archChgYn", title: "여부", upName: "upChangeRe", upSequnce: 1 },
{ id: "archChgPrmsnDt", title: "허가일", upName: "upChangeRe", upSequnce: 2 },
{ id: "archChgArea", title: "면적", upName: "upChangeRe", upSequnce: 3 },
// { id: "archChgYn", title: "여부", upName: "upChangeRe", upSequnce: 1 },
// { id: "archChgPrmsnDt", title: "허가일", upName: "upChangeRe", upSequnce: 2 },
// { id: "archChgArea", title: "면적", upName: "upChangeRe", upSequnce: 3 },
];
apps/wr/app/store/ruseFcltMng/fcltReg/rainReg/index.tsx
+2 -2
View File
@@ -137,7 +137,7 @@ export const rainFacStateExport: rainFacState = {
};
const initFetch = async (code:string|number) => {
const rainRes =await getFetch("wr", `/reuseFc/rainyInfoList/1/20/${code}`);
const rainRes =await getFetch("wr", `/reuseFc/rainyInfoList/1/10/${code}`);
return rainRes;
};
export const rainFacActionsExport: (set: any) => rainFacSActions = (
@@ -146,7 +146,7 @@ export const rainFacActionsExport: (set: any) => rainFacSActions = (
return {
getRainData: async(pageNation:number, code:string|number) =>{
try{
const rainRes =await getFetch("wr", `/reuseFc/rainyInfoList/${pageNation}/20/${code}`);
const rainRes =await getFetch("wr", `/reuseFc/rainyInfoList/${pageNation}/10/${code}`);
// 여기서 상태 업데이트
apps/wr/app/store/ruseFcltMng/fcltReg/rswtReg/index.tsx
+2 -2
View File
@@ -121,7 +121,7 @@ export const rswtFacStateExport: rswtFacState = {
const initFetch = async (code:string|number) => {
const rswtRes = await getFetch(
"wr",
`/reuseFc/waterreuseFc/1/20/${code}`)
`/reuseFc/waterreuseFc/1/10/${code}`)
return rswtRes;
};
@@ -151,7 +151,7 @@ export const rswtFacActionsExport: (set: any) => rswtFacSActions = (
try {
const rswtRes = await getFetch(
"wr",
`/reuseFc/waterreuseFc/${pageNation}/20/${code}`
`/reuseFc/waterreuseFc/${pageNation}/10/${code}`
);
console.log(pageNation)
// 여기서 상태 업데이트
apps/wr/components/lib/class/comClass.tsx
+1 -1
View File
@@ -1,2 +1,2 @@
export const formH1Class = "bg-[#eaf3fb] text-xl text-center border-2 p-2 mt-4 font-medium"
export const formH1Class = "bg-[#eaf3fb] text-xl text-center border-2 p-2 mt-4 font-medium text-gray-500"
export const formH2Class = "text-xl my-4 underline font-bold"
apps/wr/components/ui/form/fcltReg/bdstReg/bdstReg.tsx
+109 -74
View File
@@ -1,5 +1,6 @@
import { useWrStore } from "@/app/store";
import { selectClass } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
import { formH1Class } from "@/components/lib/class/comClass";
import {
formatCommaNumber,
getCity,
@@ -34,12 +35,25 @@ export default function BdstReg({ form }: { form: any }) {
bdstUsgCd: "",
});
};
// 잠깐 주석처리
// const removeLastItem = () => {
// if (fields.length > 0) {
// remove(fields.length - 1);
// }
// };
// 이건 삭제해도되는거
const removeSelected = () => {
// fields 배열에서 selectedIds 에 포함된 field.id 의 인덱스만 골라내기
const idxsToRemove = fields
.map((f, i) => selectedIds.includes(f.id) ? i : -1)
.filter(i => i > -1)
// 내림차순 정렬: 인덱스 뒤쪽부터 제거해야 안전합니다.
.sort((a,b) => b - a);
remove(idxsToRemove);
setSelectedIds([]);
};
const removeLastItem = () => {
if (fields.length > 0) {
remove(fields.length - 1);
}
};
const [selectSgg, setSelectSgg] = useState<SelectDataType[] | undefined>();
const [objSearch, setObjSearch] = useState<objSearchType>({
@@ -79,9 +93,20 @@ export default function BdstReg({ form }: { form: any }) {
return isNaN(date.getTime()) ? undefined : date;
};
// 여기서부터는 자유롭게 삭제 가능
const [selectedIds, setSelectedIds] = useState<string[]>([]);
const toggleSelect = (id: string) => {
setSelectedIds(prev =>
prev.includes(id)
? prev.filter(x => x !== id)
: [...prev, id]
);
};
return (
<>
<h1 className="bg-gray-400 text-xl text-center border-2 p-2 mt-4 pl-6">
<h1 className={formH1Class}>
건축물 시설 정보
</h1>
<div className="grid grid-cols-6 gap-2 mt-4">
@@ -92,7 +117,7 @@ export default function BdstReg({ form }: { form: any }) {
render={({ field }) => (
<FormUi label="시도">
<SelectBox
className="col-span-3 "
className="col-span-3"
label={""}
selectClass={selectClass}
selectArray={code.cityCd}
@@ -115,7 +140,7 @@ export default function BdstReg({ form }: { form: any }) {
<SelectBox
className="col-span-3"
label={""}
selectClass={selectClass}
selectClass={`w-full min-h-[2.9rem] ${selectClass}`}
selectArray={selectSgg ? selectSgg : code.sggCd || []}
onSelectValue={(val) => {
getSgg(val);
@@ -239,84 +264,94 @@ export default function BdstReg({ form }: { form: any }) {
/>
</div>
</div>
<h1 className="bg-gray-400 text-xl text-center border-2 p-2 mt-4">
<h1 className={formH1Class}>
중축, 개축, 재축
</h1>
<div className="flex justify-end gap-2">
<Button type="button" className="rounded-lg" onClick={plusHist}>
<div className="flex justify-end gap-2 mt-4">
<Button type="button" className="" size={"sm"} onClick={plusHist}>
이력추가
</Button>
<Button
type="button"
className="rounded-lg bg-red-500 text-white"
onClick={removeLastItem}
className="!bg-red-500 text-white"
size={"sm"}
onClick={removeSelected}
>
삭제
</Button>
</div>
{fields.map((field, index) => (
<div key={field.id} className="grid grid-cols-6 gap-2 mt-4">
<div className="col-span-2">
<FormField
control={form.control}
name={`chgBuilding.${index}.bdstChgNm`}
render={({ field }) => (
<FormUi label="구분">
<SelectBox
className={""}
selectClass={selectClass}
label={""}
selectArray={code.chBuCd}
onSelectValue={(val) => {
field.onChange(val);
}}
value={field.value ?? code.chBuCd[0]?.val}
/>
</FormUi>
)}
/>
</div>
<div className="col-span-2">
<FormField
control={form.control}
name={`chgBuilding.${index}.archChgPrmsnDt`}
render={({ field }) => (
<FormUi label="허가일">
<DatePicker
mode={"single"}
field={{
value: safeDate(field.value) || new Date(),
onChange: (date: Date | undefined) =>
field.onChange(date),
}}
selectClass={'w-full'}
></DatePicker>
</FormUi>
)}
/>
</div>
<div className="col-span-2">
<FormField
control={form.control}
name={`chgBuilding.${index}.archChgArea`}
render={({ field }) => (
<FormUi label="면적">
<Input
className={selectClass}
placeholder="-"
type="text"
onChange={(e) => {
handleCommaNumberChange(e, field.onChange);
}}
value={formatCommaNumber(field.value)}
/>
</FormUi>
)}
/>
</div>
//여기서부터 자유롭게 삭제 가능
<div key={field.id} className="grid grid-cols-[auto,1fr,1fr,1fr] gap-2 mt-4 items-center">
{/* 1) 체크박스 */}
<div className="col-span-1 flex justify-center mr-4">
<input
type="checkbox"
checked={selectedIds.includes(field.id)}
onChange={() => toggleSelect(field.id)}
className="h-6 w-6"
/>
</div>
))}
{/* 2) 구분 */}
<div className="">
<FormField
control={form.control}
name={`chgBuilding.${index}.bdstChgNm`}
render={({ field: f }) => (
<FormUi label="구분">
<SelectBox
selectClass={selectClass}
selectArray={code.chBuCd}
onSelectValue={val => f.onChange(val)}
value={f.value ?? code.chBuCd[0]?.val}
/>
</FormUi>
)}
/>
</div>
{/* 3) 허가일 */}
<div className="">
<FormField
control={form.control}
name={`chgBuilding.${index}.archChgPrmsnDt`}
render={({ field: f }) => (
<FormUi label="허가일">
<DatePicker
mode="single"
field={{
value: safeDate(f.value) || new Date(),
onChange: (date) => f.onChange(date),
}}
selectClass="w-full"
/>
</FormUi>
)}
/>
</div>
{/* 4) 면적 */}
<div className="">
<FormField
control={form.control}
name={`chgBuilding.${index}.archChgArea`}
render={({ field: f }) => (
<FormUi label="면적">
<Input
placeholder="-"
type="text"
onChange={e => handleCommaNumberChange(e, f.onChange)}
value={formatCommaNumber(f.value)}
className={selectClass}
/>
</FormUi>
)}
/>
</div>
</div>
))}
<div className="border-b border-gray-300 my-4"> </div>
</>
);
apps/wr/components/ui/form/fcltReg/rainReg/rainRegForm.tsx
+3 -3
View File
@@ -108,7 +108,7 @@ export default function RainRegForm({
const inputClass = "!text-lg";
return (
<div className=" !mx-[1.6rem] !p-0r">
<div className="!mx-[1.6rem] !p-0r">
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)}>
<div>
@@ -116,7 +116,7 @@ export default function RainRegForm({
<h1 className="text-2xl font-medium text-label col-span-10">
{isModal ? "건축물 운영정보" : "빗물이용시설 정보"}
</h1>
<Button type="submit" className="col-span-2 " size={"sm"}>
<Button type="submit" className="col-start-12 col-span-1" size={"sm"}>
저장
</Button>
</div>
@@ -124,7 +124,7 @@ export default function RainRegForm({
{isModal && rainForm != undefined ? <BdstReg form={form} /> : <></>}
{isModal ? (
<h1 className="pl-3 text-xl col-span-10 mt-4 ">
○ 빗물이용시설 정보{" "}
빗물이용시설 정보{" "}
</h1>
) : (
<></>
apps/wr/components/ui/form/fcltReg/rswtrReg/rswtrRegForm.tsx
+18 -17
View File
@@ -23,6 +23,7 @@ import {
formatCommaNumber,
handleCommaNumberChange,
} from "@/components/lib/func/commom";
import { formH1Class, formH2Class } from "@/components/lib/class/comClass";
export default function RswtrRegForm({
rswtForm,
@@ -95,17 +96,17 @@ export default function RswtrRegForm({
}, [rswtForm]);
return (
<div className="">
<div className="!mx-[1.6rem] !p-0r">
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)}>
{/* <div className="flex justify-between items-center mx-3"> */}
<div>
<div className="grid grid-cols-12">
<h1 className="pl-3 text-xl col-span-10">○ 중수도 시설 정보</h1>
<div className="grid grid-cols-12 flex items-center card-header">
<h1 className="text-2xl font-medium text-label col-span-10">건축물 운영정보</h1>
<Button
size={"sm"}
type="submit"
className="col-start-12 col-span-1"
className="col-start-12 col-span-1"
>
저장
</Button>
@@ -115,15 +116,15 @@ export default function RswtrRegForm({
{isModal && rswtForm != undefined ? <BdstReg form={form} /> : <></>}
{isModal ? (
<h1 className="pl-3 text-xl col-span-10 mt-4 ">
○ 중수도 시설 정보{" "}
중수도 시설 정보{" "}
</h1>
) : (
<></>
)}
<h1 className="bg-gray-400 text-xl text-center border-2 p-2 mt-4 ">
<h1 className={formH1Class}>
기본정보
</h1>
<div className="grid grid-cols-4 gap-2 mt-4 pl-6">
<div className="grid grid-cols-4 gap-2 mt-4">
<div className="col-span-2">
<FormField
control={form.control}
@@ -139,7 +140,7 @@ export default function RswtrRegForm({
: new Date(), // Provide a default Date value
onChange: (date) => field.onChange(date),
}}
selectClass={""}
selectClass={"w-full"}
/>
</FormUi>
)}
@@ -166,7 +167,7 @@ export default function RswtrRegForm({
/>
</div>
</div>
<div className="grid grid-cols-4 gap-2 mt-4 pl-6">
<div className="grid grid-cols-4 gap-2 mt-4">
<div className="col-span-2">
<FormField
control={form.control}
@@ -208,13 +209,13 @@ export default function RswtrRegForm({
</div>
</div>
<div className=" my-4">
<h1 className="bg-gray-400 text-xl text-center border-2 p-2 mt-4 pl-6">
<h1 className={formH1Class}>
중수도 시설 정보
</h1>
</div>
<div className="grid grid-cols-10 gap-1 mt-4">
<div className="col-span-5 pl-6">
<div className="col-span-5">
<FormField
control={form.control}
name="reuseBuilding.0.rswtrObj.orgwtKndCd"
@@ -252,15 +253,15 @@ export default function RswtrRegForm({
</div>
<div className=" my-2">
<h1 className="bg-gray-400 text-xl text-center border-2 p-2 mt-4 ">
<h1 className={formH1Class}>
인센티브 정보
</h1>
</div>
<div>
<h2 className="pl-3 text-xl">✓ 1. 설치비 지원</h2>
<h2 className={formH2Class}>설치비 지원</h2>
</div>
<div className="grid grid-cols-2 gap-2 mt-4">
<div className="col-span-1 pl-6">
<div className="col-span-1">
<FormField
control={form.control}
name="reuseBuilding.0.instlCstSprtYn"
@@ -301,10 +302,10 @@ export default function RswtrRegForm({
</div>
<div>
<h2 className="pl-3 text-xl">✓ 2. 녹색건축물 인증</h2>
<h2 className={formH2Class}>녹색건축물 인증</h2>
</div>
<div className="grid grid-cols-6 gap-2 mt-4">
<div className="col-span-3 pl-6">
<div className="col-span-3">
<FormField
control={form.control}
name="reuseBuilding.0.grntchBdstCertYn"
@@ -341,7 +342,7 @@ export default function RswtrRegForm({
)}
/>
</div>
<div className="col-span-3 pl-6">
<div className="col-span-3">
<FormField
control={form.control}
name="reuseBuilding.0.grntchBdstCertNo"
apps/wr/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal.tsx
+11 -11
View File
@@ -97,9 +97,9 @@ export function BdstReg<T extends MoType>({ moType }: BdstRegProps<T>) {
const nodeList = headMakeColSpan(bdst.moUpHeadList);
return (
<>
<div className="grid grid-cols-12 gap-4 mt-4">
<div className="grid grid-cols-12 gap-4 mt-4 items-center">
<SelectBox
className="col-span-3 "
className="col-span-3 h-full"
label={"시도"}
selectClass={selectClass}
selectArray={code.cityCd || []}
@@ -108,7 +108,7 @@ export function BdstReg<T extends MoType>({ moType }: BdstRegProps<T>) {
{""}
</SelectBox>
<SelectBox
className="col-span-3"
className="col-span-3 h-full"
label={"시군구"}
selectClass={selectClass}
selectArray={selectSgg || []}
@@ -116,14 +116,14 @@ export function BdstReg<T extends MoType>({ moType }: BdstRegProps<T>) {
>
{" "}
</SelectBox>
<Label className="w-20 text-base text-gray-600 mt-4 text-right">건축물명</Label>
<Input className="w-full h-full text-2xl col-span-2 col-start-8" type="text" value={searchTxt || ''} onChange={(e) => setSearchTxt(e.target.value)}/>
<Button className="rounded-lg" onClick={()=>{searchBdst(searchTxt)}}>조회</Button>
<Label className="w-full text-xl text-gray-600 text-right">건축물명</Label>
<Input className="w-full h-full !text-xl col-span-2 col-start-8" type="text" value={searchTxt || ''} onChange={(e) => setSearchTxt(e.target.value)}/>
<Button className="" size={"sm"} onClick={()=>{searchBdst(searchTxt)}}>조회</Button>
</div>
<div className="border-t border-gray-300 my-4"></div>
<div className="h-auto">
<ScrollArea className="h-[20vh]">
<h1 className="text-2xl font-medium text-label pl-8">건축물 목록</h1>
<ScrollArea className="h-[30vh]">
<div>
<UiTable
tableData={bdstTable || []}
@@ -134,13 +134,13 @@ export function BdstReg<T extends MoType>({ moType }: BdstRegProps<T>) {
cellClick={(idx, headId) => (tableClick(idx, headId || ""))}
onPageChange={function (page: number): void {
throw new Error("Function not implemented.");
} } >
}}>
{nodeList}
</UiTable>
</div>
</ScrollArea>
</ScrollArea>
<div className="border-t border-gray-300 my-4"></div>
<ScrollArea className="h-[60vh]">
<ScrollArea className="h-[40vh]">
<div>
{ moType === 'RNB'?
<RainRegForm rainForm={rainBdstForm as customRainBdst} isModal={true} />