페이지 디자인 변경

apps/sn/app/ii/baseinfo/observe/page.tsx

@@ -3,9 +3,8 @@
 import { z } from "zod"
 import { useForm, useFieldArray } from "react-hook-form"
 import { zodResolver } from "@hookform/resolvers/zod"
-import { FileUpload, Form, FormControl, FormField, FormItem, FormLabel, FormMessage, FormUi, SearchDiv, SearchFormLeft, SearchFormRight, SearchInput, SelectBox } from "@common/business_components/ui"
-import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Input, Button, DatePicker, Label } from "@common/components/ui"
-import { UiTable } from "@common/business_components/ui"
+import { FormField, SelectBox } from "@common/business_components/ui"
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Input, DatePicker } from "@common/components/ui"
 import React, { useState } from "react"
 import BaseLayout from "@/ii/BaseLayout"
 
@@ -15,7 +14,7 @@ const formSchema = z.object({
     inputdate: z.coerce.date(),
     rtkSource: z.string(),
 })
-
+const region:{text:string,val:number}[] = [{text:'양평', val:1},{text:'강남',val:2},{text:'test',val:3}]
 export default function RTKForm() {
     const form = useForm<z.infer<typeof formSchema>>({
         resolver: zodResolver(formSchema),
@@ -26,9 +25,6 @@ export default function RTKForm() {
         }
     })
     const [selectedDate, setSelectedDate] = useState(new Date())
-    const onSubmit = (data: z.infer<typeof formSchema>) => {
-        console.log("✅ 제출 데이터:", data)
-    }
     // TODO: 임시 데이터 
     const rtxNmHeadlist = [
         { id: 'no', title: '번호' },
@@ -54,16 +50,7 @@ export default function RTKForm() {
                                         control={form.control}
                                         name="region"
                                         render={({ field }) => (
-                                            <Select onValueChange={field.onChange} value={field.value}>
-                                                <SelectTrigger className="w-[150px]">
-                                                    <SelectValue placeholder="선택하세요" />
-                                                </SelectTrigger>
-                                                <SelectContent>
-                                                    <SelectItem value="양평">양평</SelectItem>
-                                                    <SelectItem value="강남">강남</SelectItem>
-                                                    <SelectItem value="마포">마포</SelectItem>
-                                                </SelectContent>
-                                            </Select>
+                                            <SelectBox label='' selectArray={region} onSelectValue={()=>{}} selectClass="" className="w-[150px]"/>
                                         )}
                                     />
                                 </div>

apps/sn/app/ii/ir/irsetting/page.tsx

@@ -40,7 +40,7 @@ const IrSetting = () => {
     const [selectedDate, setSelectedDate] = useState(new Date())
     return (
         <BaseLayout titleName={{ mainTitle: '침입수 산정', firstCardTitle: '침입수산정 기초자료 설정', secondCardTitle: '침입수 산정결과 현황' }} form={form} onSubmitEvent={() => { }} graphBtn={true} tableInfoData={{ headList: rtxNmHeadlist, tableData: rtxNmDataList, cellClickFunc: () => { }, onPageChangeFunc: () => { } }}>
-            <div className="space-y-[1.2rem]">
+            <div className="grid grid-cols-2 gap-4">
                 <div className="grid grid-cols-[120px_1fr] items-center">
                     <div className="text-xl font-medium">○ 처리구역</div>
                     <FormField
@@ -51,30 +51,6 @@ const IrSetting = () => {
                         )}
                     />
                 </div>
-                <div className="grid grid-cols-[120px_1fr] items-center">
-                    <div className="text-xl font-medium">○ 수용가 수</div>
-                    <FormField
-                        control={form.control}
-                        name="suyeonga"
-                        render={({ field }) => (
-                            <SelectBox label='' selectArray={[]} onSelectValue={() => { }} selectClass={undefined} className='w-[150px]' />
-                        )}
-                    />
-                </div>
-                <div className="grid grid-cols-[120px_1fr] items-center">
-                    <div className="text-xl font-medium">○ 상수사용량 정보</div>
-                    <FormField
-                        control={form.control}
-                        name="inputdate"
-                        render={({ field }) => (
-                            <DatePicker
-                                selected={selectedDate}
-                                onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }}
-                                mode={"single"} className='w-[150px]'
-                            />
-                        )}
-                    />
-                </div>
                 <div className="grid grid-cols-[120px_1fr] items-center">
                     <div className="text-xl font-medium">○ 오수 전환율</div>
                     <FormField
@@ -90,7 +66,43 @@ const IrSetting = () => {
                     />
                 </div>
                 <div className="grid grid-cols-[120px_1fr] items-center">
-                    <div className="text-xl font-medium">○ 파일위치</div>
+                    <div className="text-xl font-medium">○ 수용가 수</div>
+                    <FormField
+                        control={form.control}
+                        name="suyeonga"
+                        render={({ field }) => (
+                            <SelectBox label='' selectArray={[]} onSelectValue={() => { }} selectClass={undefined} className='w-[150px]' />
+                        )}
+                    />
+                </div>
+                <div className="grid grid-cols-[120px_1fr] items-center">
+                    <div className="text-xl font-medium">○ 수용가-맨홀 매칭</div>
+                    <FormField
+                        control={form.control}
+                        name="rtkSource"
+                        render={({ field }) => (
+                            <div className="w-[150px]">
+                                <Input id="picture" type="file" />
+                            </div>
+                        )}
+                    />
+                </div>
+                <div className="grid grid-cols-[120px_1fr] items-center">
+                    <div className="text-xl font-medium">○ 상수사용량 정보</div>
+                    <FormField
+                        control={form.control}
+                        name="inputdate"
+                        render={({ field }) => (
+                            <DatePicker
+                                selected={selectedDate}
+                                onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }}
+                                mode={"single"} className='w-[150px]'
+                            />
+                        )}
+                    />
+                </div>
+                <div className="grid grid-cols-[120px_1fr] items-center">
+                    <div className="text-xl font-medium">○ 관망도 자료</div>
                     <FormField
                         control={form.control}
                         name="rtkSource"

apps/sn/app/ii/rdii/rdiisetting/page.tsx

@@ -44,7 +44,7 @@ const RdiiSetting = () => {
     const [selectedDate, setSelectedDate] = useState(new Date())
   return (
     <BaseLayout titleName={{ mainTitle: '침입수 산정', firstCardTitle: '침입수산정 기초자료 설정', secondCardTitle: '침입수 산정결과 현황' }} form={form} onSubmitEvent={() => { }} graphBtn={true} tableInfoData={{ headList: rtxNmHeadlist, tableData: rtxNmDataList, cellClickFunc: () => { }, onPageChangeFunc: () => { } }}>
-    <div className="space-y-[1.2rem]">
+    <div className="grid grid-cols-3 gap-4">
         <div className="grid grid-cols-[120px_1fr] items-center">
             <div className="text-xl font-medium">○ 처리구역</div>
             <FormField
@@ -55,30 +55,6 @@ const RdiiSetting = () => {
                 )}
             />
         </div>
-        <div className="grid grid-cols-[120px_1fr] items-center">
-            <div className="text-xl font-medium">○ RDII 기여면적(ha)</div>
-            <FormField
-                control={form.control}
-                name="meter"
-                render={({ field }) => (
-                    <Input
-                    className="h-[3.2rem] text-center text-xl w-[150px]"
-                    placeholder=""
-                    {...field}
-                />
-                )}
-            />
-        </div>
-        <div className="grid grid-cols-[120px_1fr] items-center">
-            <div className="text-xl font-medium">○ 수용가 수</div>
-            <FormField
-                control={form.control}
-                name="suyeonga"
-                render={({ field }) => (
-                    <SelectBox label='' selectArray={[]} onSelectValue={() => { }} selectClass={undefined} className='w-[150px] h-[3.2rem]' />
-                )}
-            />
-        </div>
         <div className="grid grid-cols-[120px_1fr] items-center">
             <div className="text-xl font-medium">○ 상수사용량 정보</div>
             <FormField
@@ -93,6 +69,32 @@ const RdiiSetting = () => {
                 )}
             />
         </div>
+        <div className="grid grid-cols-[120px_1fr] items-center">
+            <div className="text-xl font-medium">○ 관망도자료</div>
+            <FormField
+                control={form.control}
+                name="rtkSource"
+                render={({ field }) => (
+                    <div className="w-[150px]">
+                        <Input id="picture" type="file" />
+                    </div>
+                )}
+            />
+        </div>
+        <div className="grid grid-cols-[120px_1fr] items-center">
+            <div className="text-xl font-medium">○ RDII 기여면적(ha)</div>
+            <FormField
+                control={form.control}
+                name="meter"
+                render={({ field }) => (
+                    <Input
+                    className="h-[3.2rem] text-center text-xl w-[150px]"
+                    placeholder=""
+                    {...field}
+                />
+                )}
+            />
+        </div>
         <div className="grid grid-cols-[120px_1fr] items-center">
             <div className="text-xl font-medium">○ 오수 전환율</div>
             <FormField
@@ -107,28 +109,6 @@ const RdiiSetting = () => {
                 )}
             />
         </div>
-        <div className="grid grid-cols-[120px_1fr] items-center">
-            <div className="text-xl font-medium">○ 오수 전환율</div>
-            <FormField
-                control={form.control}
-                name="inpSource"
-                render={({ field }) => (
-                    <SelectBox label='' selectArray={[{'text':'매칭(양평).shp','val':'1'}]} onSelectValue={() => { }} selectClass={undefined} className='h-[3.2rem] w-[150px]' />
-                )}
-            />
-        </div>
-        <div className="grid grid-cols-[120px_1fr] items-center">
-            <div className="text-xl font-medium">○ 관망도자료</div>
-            <FormField
-                control={form.control}
-                name="rtkSource"
-                render={({ field }) => (
-                    <div className="w-[150px]">
-                        <Input id="picture" type="file" />
-                    </div>
-                )}
-            />
-        </div>
         <div className="grid grid-cols-[120px_1fr] items-center">
             <div className="text-xl font-medium">○ 강우자료</div>
             <FormField
@@ -141,6 +121,26 @@ const RdiiSetting = () => {
                 )}
             />
         </div>
+        <div className="grid grid-cols-[120px_1fr] items-center">
+            <div className="text-xl font-medium">○ 수용가 수</div>
+            <FormField
+                control={form.control}
+                name="suyeonga"
+                render={({ field }) => (
+                    <SelectBox label='' selectArray={[]} onSelectValue={() => { }} selectClass={undefined} className='w-[150px] h-[3.2rem]' />
+                )}
+            />
+        </div>
+        <div className="grid grid-cols-[120px_1fr] items-center">
+            <div className="text-xl font-medium">○ 수용가-맨홀 매칭</div>
+            <FormField
+                control={form.control}
+                name="inpSource"
+                render={({ field }) => (
+                    <SelectBox label='' selectArray={[{'text':'매칭(양평).shp','val':'1'}]} onSelectValue={() => { }} selectClass={undefined} className='h-[3.2rem] w-[150px]' />
+                )}
+            />
+        </div>
     </div>
 </BaseLayout>
   )