feat: I/I 분석 페이지에서 business component의 DatePicker로 교체

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

@@ -2,8 +2,8 @@
 import { postData } from '@/components/lib/api'
 import FileUploadForm from '@/components/ui/fileUploadForm'
 import FormSection from '@/components/ui/formSection'
-import { filePicked } from '@common/business_components/ui'
-import { Button, DatePicker, Input } from '@common/components/ui'
+import { filePicked, DatePicker } from '@common/business_components/ui'
+import { Button, Input } from '@common/components/ui'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
@@ -202,7 +202,7 @@ const IrSetting = () => {
                 sggCd: select3, // 시군구코드
                 swageTmplntCd: select4, // 하수처리장코드
                 swtrmtZoneCd: select5, // 하수처리구역코드
-                aplcnYmd: selectedDate.toISOString().substring(0, 7).replace("-", ""), // 적용연월
+                aplcnYmd: new Date(selectedDate).toISOString().substring(0, 7).replace("-", ""), // 적용연월
                 dtrwSwtcRt: parseFloat(input1) || null, // 오수전환율 (숫자로 변환)
                 anlsInfo: input2, // 분석정보
                 atflCd: file1?.atflCd, // 첨부파일CD (오수관망도)
@@ -268,11 +268,27 @@ const IrSetting = () => {
                         name='inputdate'
                         form={form}
                         titleNm='▷ 상수사용량 적용기간'>
-                        <DatePicker
+                        {/* <DatePicker
                             className="ml-5"
                             selected={selectedDate}
                             onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }}
-                            mode={"single"} />
+                            mode={"single"} /> */}
+                        <DatePicker
+                            mode={"single"} // mode는 DayPickerSingleProps에서 오므로 그대로 사용 가능
+                            field={{
+                                value: selectedDate, // 현재 페이지의 selectedDate 상태 사용
+                                onChange: (date: Date | undefined) => {
+                                    if (date) {
+                                        setSelectedDate(date);
+                                        // react-hook-form의 inputdate 필드도 업데이트 (선택 사항)
+                                        form.setValue('inputdate', date, { shouldValidate: true });
+                                    }
+                                }
+                            }}
+                            // className을 직접 사용하거나, DatePicker 내부에서 selectClass를 처리하도록 수정 필요
+                            // 여기서는 DatePicker의 selectClass prop을 사용한다고 가정
+                            selectClass="ml-5 date-picker-trigger" // date-picker.css의 스타일 적용
+                        />
                     </FormSection>
                     <FormSection
                         name='rtkSource'

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

@@ -4,8 +4,8 @@ import { postData } from '@/components/lib/api'
 import FileUploadForm from "@/components/ui/fileUploadForm"
 import FormSection from "@/components/ui/formSection"
 import BaseLayout from "@/ii/BaseLayout"
-import { filePicked } from "@common/business_components/ui"
-import { Button, DatePicker, Input } from "@common/components/ui"
+import { filePicked, DatePicker } from "@common/business_components/ui"
+import { Button, Input } from "@common/components/ui"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { Label } from '@radix-ui/react-label'
 import { useState } from "react"
@@ -206,7 +206,7 @@ export default function RTKForm() {
             // 새로운 JSON 데이터 생성
             const combinedAnalysisData = {
                 enoCd: "", // 환경청코드
-                aplcnYm: formData.date.toISOString().substring(0, 7).replace("-", ""), // 적용연월 (YYYYMM 형식)
+                aplcnYm: new Date(formData.date).toISOString().substring(0, 7).replace("-", ""), // 적용연월 (YYYYMM 형식)
                 ctpvCd: "", // 시도코드
                 sggCd: "", // 시군구코드
                 swageTmplntCd: "", // 하수처리장코드
@@ -361,7 +361,7 @@ export default function RTKForm() {
                         <Input {...form.register("rate")} className="h-12 text-center text-xl w-[225px] ml-5" />
                     </FormSection>
                     <FormSection name='date' form={form} titleNm='○ 상수사용량 적용기간'>
-                        <DatePicker
+                        {/* <DatePicker
                             selected={form.watch("date")}
                             onSelect={(date: Date | undefined) => {
                                 if (date) {
@@ -370,6 +370,20 @@ export default function RTKForm() {
                             }}
                             mode={"single"}
                             className="ml-5"
+                        /> */}
+                        <DatePicker
+                            mode={"single"} // mode는 DayPickerSingleProps에서 오므로 그대로 사용 가능
+                            field={{
+                                value: form.watch("date"), // react-hook-form의 "date" 필드 값 사용
+                                onChange: (date: Date | undefined) => {
+                                    if (date) {
+                                        form.setValue("date", date, { shouldValidate: true });
+                                    }
+                                }
+                            }}
+                            // className을 직접 사용하거나, DatePicker 내부에서 selectClass를 처리하도록 수정 필요
+                            // 여기서는 DatePicker의 selectClass prop을 사용하고, date-picker.css의 스타일을 적용
+                            selectClass="ml-5 date-picker-trigger" 
                         />
                     </FormSection>
                     <FormSection name='rate' form={form} titleNm='○ 분석 정보'>