diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
index 31c92d339..f96065a4e 100644
--- a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
@@ -1,13 +1,12 @@
 'use client'
 import React, { useState, useMemo, useEffect } from 'react'
 import { SelectBox } from '@common/business_components/ui'
-import { type ChartConfig, MainChart, CHART_FORM } from "@common/business_components";
-import Modal from '@/components/ui/modal';
-import { Button } from '@common/components/ui';
+import { type ChartConfig, MainChart, CHART_FORM, UiModal } from "@common/business_components";
+import { Button, Input, Label } from '@common/components';
 import { getData } from "@/components/lib/api";
 import type { TInftwtAnls, TInftwtAnlsRslt } from './aplcnYms';
-import { useAplcnYms, selectInftwtAnls, getOptionsInftwtAnlsInfo} from './aplcnYms';
-import { selectInftwtAnlsRslt, getChartDataInftwtAnlsRslt} from './aplcnYms';
+import { useAplcnYms, selectInftwtAnls, getOptionsInftwtAnlsInfo } from './aplcnYms';
+import { selectInftwtAnlsRslt, getChartDataInftwtAnlsRslt } from './aplcnYms';
 import { set } from 'react-hook-form';
 type ModalOpenProp = {
   isModalOpen: boolean,
@@ -16,26 +15,86 @@ type ModalOpenProp = {
   btnTxt?: string,
 }
 
-const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal}: ModalOpenProp) => {
+// 더미 데이터 리스트
+const rainDataList = [
+  { val: "R20240815.xlsx", text: "R20240815.xlsx" },
+  { val: "R20240701.xlsx", text: "R20240701.xlsx" },
+  { val: "R20240615.xlsx", text: "R20240615.xlsx" },
+  { val: "R20240531.xlsx", text: "R20240531.xlsx" },
+  { val: "R20240420.xlsx", text: "R20240420.xlsx" },
+];
+const rtxSourceList = [
+  { val: "2015년 하수도정비기본계획", text: "2015년 하수도정비기본계획" },
+  { val: "2018년 하수도정비기본계획", text: "2018년 하수도정비기본계획" },
+  { val: "2020년 하수도정비기본계획", text: "2020년 하수도정비기본계획" },
+  { val: "2022년 하수도정비기본계획", text: "2022년 하수도정비기본계획" },
+  { val: "2024년 하수도정비기본계획", text: "2024년 하수도정비기본계획" },
+];
+// 상수사용월 더미 데이터
+const dummyAplcnYms = [
+  { val: '0', text: '선택' },
+  { val: '202401', text: '2024-01' },
+  { val: '202402', text: '2024-02' },
+  { val: '202403', text: '2024-03' },
+  { val: '202404', text: '2024-04' },
+  { val: '202405', text: '2024-05' },
+  { val: '202406', text: '2024-06' },
+  { val: '202407', text: '2024-07' },
+  { val: '202408', text: '2024-08' },
+  { val: '202409', text: '2024-09' },
+  { val: '202410', text: '2024-10' },
+  { val: '202411', text: '2024-11' },
+  { val: '202412', text: '2024-12' },
+];
+// 침입수분석정보 더미 데이터
+const dummyInftwtAnlsInfos = [
+  { val: 0, text: '선택' },
+  { val: 1001, text: '서울시 강남구 침입수분석 1차' },
+  { val: 1002, text: '서울시 강남구 침입수분석 2차' },
+  { val: 1003, text: '서울시 서초구 침입수분석 1차' },
+  { val: 1004, text: '부산시 해운대구 침입수분석 1차' },
+  { val: 1005, text: '대구시 수성구 침입수분석 1차' },
+  { val: 1006, text: '인천시 연수구 침입수분석 1차' },
+  { val: 1007, text: '광주시 북구 침입수분석 1차' },
+  { val: 1008, text: '대전시 유성구 침입수분석 1차' },
+  { val: 1009, text: '울산시 남구 침입수분석 1차' },
+  { val: 1010, text: '경기도 성남시 침입수분석 1차' },
+];
+
+const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOpenProp) => {
   const [popupOpen, setPopupOpen] = React.useState(true);
   const buttonRef = React.useRef<HTMLButtonElement>(null); // 버튼 참조
   const [popupPosition, setPopupPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 }); // 팝업 위치
   const [aplcnYm, setAplcnYm] = useState("");
   const [inftwtAnlss, setInftwtAnlss] = useState<TInftwtAnls[]>([]);
-  const [inftwtAnlsInfos, setInftwtAnlsInfos] = useState<any[]>([]); // 침입수분석정보 options
-  const [inftwtAnls, setInftwtAnls] = useState<TInftwtAnls|null>(null); // 침입수분석정보
+  // const [inftwtAnlsInfos, setInftwtAnlsInfos] = useState<any[]>([]); // 침입수분석정보 options
+  const [inftwtAnls, setInftwtAnls] = useState<TInftwtAnls | null>(null); // 침입수분석정보
   const [inftwtAnlsSn, setInftwtAnlsSn] = useState<number>(0); // 침입수분석 정보 선택시 사용
+  const [drtwSwtcRt, setDrtwSwtcRt] = useState<number>(0); // 오수전환율
+  const [atflHrPttnNm, setAtflHrPttnNm] = useState<number>(0); // 시간패턴 파일명
+  const [atflMpng, setAtflMpng] = useState<number>(0); // 수용가-맨홀 매칭
+  const [atflInpNm, setAtflInpNm] = useState<number>(0); // 관망도 파일명
+  const [tbSnOilqData, setTbSnOilqData] = useState<number>(0); // 유량 파일명
   const [chartData, setChartData] = useState<{ chartData1: { label: string; val: number }[]; chartData2: { label: string; val: number }[] }>({
     chartData1: [{ label: "1", val: 20 },
-      { label: "3", val: 40 },
-      { label: "5", val: 60 },],
+    { label: "3", val: 40 },
+    { label: "5", val: 60 },],
     chartData2: [{ label: "1", val: 15 },
-      { label: "3", val: 35 },
-      { label: "5", val: 55 },],
+    { label: "3", val: 35 },
+    { label: "5", val: 55 },],
   });
 
+  // 상수사용월, 분석정보 더미 데이터로 초기화 (API 호출 실패 시 대비)
+  const [selectedAplcnYms, setSelectedAplcnYms] = useState<string>(dummyAplcnYms[0]?.val || "0");
+  const [selectedInftwtAnlsInfos, setSelectedInftwtAnlsInfos] = useState<number>(dummyInftwtAnlsInfos[0]?.val || 0);
+  // 선택된 값들을 위한 상태 추가
+  const [selectedRainData, setSelectedRainData] = useState<string>(rainDataList[0]?.val || "선택"); // 초기값으로 첫 번째 항목 선택
+  const [selectedRtxSource, setSelectedRtxSource] = useState<string>(rtxSourceList[0]?.val || "선택");
+  // API에서 데이터를 가져오지 못할 경우 더미 데이터 사용
+  // const aplcnYms = useAplcnYms().length > 0 ? useAplcnYms() : dummyAplcnYms;
+
   //const [aplcnYms, setAplcnYms] = useState<{ text: string; val: string }[]>([]);
-  const aplcnYms = useAplcnYms(); // 상수사용월 데이터 가져오기
+  // const aplcnYms = useAplcnYms(); // 상수사용월 데이터 가져오기
   const openPopup = () => {
     if (buttonRef.current) {
       const rect = buttonRef.current.getBoundingClientRect(); // 버튼 위치 계산
@@ -47,7 +106,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal}: ModalOpe
     setPopupOpen(true); // 팝업 열기
   };
   //console.log("btnTxt", btnTxt);
-  
+
   const chartForm = CHART_FORM.LINE;
   // const chartData = {
   //   chartData1: [
@@ -70,35 +129,38 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal}: ModalOpe
   }, {} as Record<string, { label: string; color: string }>) satisfies ChartConfig;
 
   const closePopup = () => {  // 팝업 닫기
-    selectInftwtAnlsRslt(inftwtAnlsSn,"L13101003").then((data) => {// 침입수분석 결과 조회
+    selectInftwtAnlsRslt(inftwtAnlsSn, "L13101003").then((data) => {// 침입수분석 결과 조회
       const rsltData = getChartDataInftwtAnlsRslt(data ?? []);
       setChartData({
         chartData1: rsltData,
         chartData2: rsltData, // 예시로 같은 데이터를 사용
       });
     });
-    setPopupOpen(false); 
+    setPopupOpen(false);
   };
-  const onChangeAplcnYm = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const selectedValue = e.target.value;
-    selectInftwtAnls(selectedValue).then((data) => {
-      setInftwtAnlss(data ?? []);
-      console.log("onChangeAplcnYm", selectedValue, inftwtAnlss);
-      setInftwtAnlsInfos(getOptionsInftwtAnlsInfo(data ?? []));
-    });
-    setAplcnYm(selectedValue);    
-  };
-  const onChangeInftwtAnlsInfo = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const selectedInfo = e.target.value;
-    setInftwtAnlsSn(Number(selectedInfo)); // 선택값 상태로 저장
-    // 선택된 침입수분석 정보에 대한 처리 로직 추가
-    const selectedAnls = inftwtAnlss.find(anls => anls.inftwtAnlsSn === Number(selectedInfo));
-    if (selectedAnls) {
-      setInftwtAnls(selectedAnls);
-    }
-  };
-  return (
-    <Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} closeModal={closeModal} >
+  // const onChangeAplcnYm = (e: React.ChangeEvent<HTMLSelectElement>) => {
+  //   const selectedValue = e.target.value;
+  //   selectInftwtAnls(selectedValue).then((data) => {
+  //     setInftwtAnlss(data ?? []);
+  //     console.log("onChangeAplcnYm", selectedValue, inftwtAnlss);
+  //     setInftwtAnlsInfos(getOptionsInftwtAnlsInfo(data ?? []));
+  //   });
+  //   setAplcnYm(selectedValue);
+  // };
+  // const onChangeInftwtAnlsInfo = (e: React.ChangeEvent<HTMLSelectElement>) => {
+  //   const selectedInfo = e.target.value;
+  //   setInftwtAnlsSn(Number(selectedInfo)); // 선택값 상태로 저장
+  //   // 선택된 침입수분석 정보에 대한 처리 로직 추가
+  //   const selectedAnls = inftwtAnlss.find(anls => anls.inftwtAnlsSn === Number(selectedInfo));
+  //   if (selectedAnls) {
+  //     setInftwtAnls(selectedAnls);
+  //   }
+  // };
+
+
+  const renderBody = () => (
+    <>
+      {/* <Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} closeModal={closeModal} > */}
       {/* 분석 입력현황 조회 */}
       <div className='grid grid-cols-4 gap-4'>
         <div className="grid grid-rows-4 gap-4 mb-4">
@@ -130,72 +192,142 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal}: ModalOpe
           }}
         >
           <div className="font-bold mb-6 text-3xl">침입수분석 입력현황</div>
-          <div className="grid grid-cols-[35%_65%] gap-2">
-            <div><label>상수사용월:</label></div>
-            <div>
-              <select className="border border-gray-300 rounded px-2 py-1"
-                  onChange={onChangeAplcnYm} value={aplcnYm}>
-                {aplcnYms.map(opt => (
-                  <option key={opt.val} value={opt.val}>{opt.text}</option>
-                ))}
-              </select>
+          <div className='flex flex-col'>
+            <div className='flex items-center justify-between'>
+              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">상수사용월:</Label>
+              <SelectBox
+                className="w-[200px] mr-8 z-[51]"
+                selectClass="rounded-lg bg-white"
+                label=''
+                selectArray={dummyAplcnYms}
+                value={selectedAplcnYms}
+                onSelectValue={(val) => {
+                  setSelectedAplcnYms(String(val));
+                }}
+              />
             </div>
-            <div><label>분석정보:</label></div>
-            <div>
-              <select className="border border-gray-300 rounded px-2 py-1"
-                  onChange={onChangeInftwtAnlsInfo} value={inftwtAnlsSn}>
-                {inftwtAnlsInfos.map(opt => (
-                  <option key={opt.val} value={opt.val}>{opt.text}</option>
-                ))}
-              </select>
+            <div className='flex items-center justify-between'>
+              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">분석정보:</Label>
+              <SelectBox
+                className="w-[200px] mr-8 z-[51]"
+                selectClass="rounded-lg bg-white"
+                label=''
+                selectArray={dummyInftwtAnlsInfos}
+                value={selectedInftwtAnlsInfos}
+                onSelectValue={(val) => {
+                  setSelectedInftwtAnlsInfos(Number(val));
+                }}
+              />
             </div>
-            <div>오수 전환율:</div>
-            <div>
-              <input type="text" value={inftwtAnls?.drtwSwtcRt ?? ""}
-                className="border border-gray-300 rounded px-2 py-1 w-full" />
+            <div className='flex items-center justify-between'>
+              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">오수전환율:</Label>
+              <Input
+                className="mr-8 w-[200px] !text-xl placeholder:text-center"
+                placeholder="입력"
+                value={drtwSwtcRt}
+                onChange={(e) => {
+                  setDrtwSwtcRt(Number(e.target.value));
+                }}
+              />
             </div>
-            <div>시간패턴 파일명:</div>
-            <div>
-              <input type="text" value={inftwtAnls?.atflHrPttnNm ?? ""}
-                className="border border-gray-300 rounded px-2 py-1 w-full" />
+            <div className='flex items-center justify-between'>
+              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">시간패턴 파일명:</Label>
+              <Input
+                className="mr-8 w-[200px] !text-xl placeholder:text-center"
+                placeholder="입력"
+                value={atflHrPttnNm}
+                onChange={(e) => {
+                  setAtflHrPttnNm(Number(e.target.value));
+                }}
+              />
             </div>
-            <div>수용가-맨홀 매칭:</div>
-            <div>
-              <input type="text" value={inftwtAnls?.atflMpngNm ?? ""}
-                className="border border-gray-300 rounded px-2 py-1 w-full" />
+            <div className='flex items-center justify-between'>
+              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">수용가-맨홀 매칭:</Label>
+              <Input
+                className="mr-8 w-[200px] !text-xl placeholder:text-center"
+                placeholder="입력"
+                value={atflMpng}
+                onChange={(e) => {
+                  setAtflMpng(Number(e.target.value));
+                }}
+              />
             </div>
-            <div>관망도 파일명:</div>
-            <div>
-              <input type="text" value={inftwtAnls?.atflInpNm ?? ""}
-                className="border border-gray-300 rounded px-2 py-1 w-full" />
+            <div className='flex items-center justify-between'>
+              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">관망도 파일명:</Label>
+              <Input
+                className="mr-8 w-[200px] !text-xl placeholder:text-center"
+                placeholder="입력"
+                value={atflInpNm}
+                onChange={(e) => {
+                  setAtflInpNm(Number(e.target.value));
+                }}
+              />
             </div>
-            <div>유량 파일명:</div>
-            <div>
-              <input type="text" value={inftwtAnls?.atflOilqNm ?? ""}
-                className="border border-gray-300 rounded px-2 py-1 w-full" />
+            <div className='flex items-center justify-between'>
+              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">유량 파일명:</Label>
+              <Input
+                className="mr-8 w-[200px] !text-xl placeholder:text-center"
+                placeholder="입력"
+                value={tbSnOilqData}
+                onChange={(e) => {
+                  setTbSnOilqData(Number(e.target.value));
+                }}
+              />
             </div>
-            {btnTxt === 'RDII' ? <><div>강우 자료:</div>
-              <div>
-                <select className="border border-gray-300 rounded px-2 py-1">
-                  <option>R20240815.xlsx</option>
-                </select>
-              </div>
-              <div>RTX 계수 출처:</div>
-              <div>
-                <select className="border border-gray-300 rounded px-2 py-1">
-                  <option>2015년 하수도정비기본계획</option>
-                </select>
-              </div>
-            </> : null}
+            {btnTxt === 'RDII' ?
+              <>
+                <div className='flex items-center justify-between'>
+                  <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">강우 자료:</Label>
+                  <SelectBox
+                    className="w-[150px] mr-8 z-[51]"
+                    selectClass="rounded-lg bg-white"
+                    label=''
+                    selectArray={rainDataList}
+                    value={selectedRainData}
+                    onSelectValue={(val) => {
+                      setSelectedRainData(String(val));
+                    }}
+                  />
+                </div>
+                <div className='flex items-center justify-between'>
+                  <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">RTX 계수 출처:</Label>
+                  <SelectBox
+                    className="w-[150px] mr-8 z-[51]"
+                    selectClass="rounded-lg bg-white"
+                    label=''
+                    selectArray={rtxSourceList}
+                    value={selectedRtxSource}
+                    onSelectValue={(val) => {
+                      setSelectedRtxSource(String(val));
+                    }}
+                  />
+                </div>
+              </> : null}
           </div>
           <div className="flex justify-end mt-4 space-x-2">
             <button className="px-4 py-2 bg-gray-600 text-white rounded" onClick={closePopup}>
               분석결과 도표
             </button>
           </div>
-        </div>
-      )}
-    </Modal>
+        </div>)}
+      {/* </Modal > */}
+    </>
+  )
+
+  return (
+    <UiModal
+      open={isModalOpen}
+      onOpenChange={setIsModalOpen}
+      bodyClass={`
+            h-[50vh]
+            w-[40vw]
+            max-w-none
+            max-h-none
+            overflow-visible
+            z-[50]
+          `}
+      body={renderBody()}
+    />
   )
 }