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

디자인조정

Browse Source
This commit is contained in:
ljpark
2025-07-01 09:30:43 +09:00
parent 5b9747b7b1
commit 29cf135892
3 changed files with 26 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/sn/app/(map-layout)/map/components/common/index.ts
+2 -1
View File
@@ -20,7 +20,8 @@ type LayerContentMap = {
// 레이어 선택시 변경되는 팝업 컨텐츠 동적으로 변경하도록 작업
const layerContentMap: LayerContentMap = {
// TODO: gis데이터 추가되면 추가 작업 필요
"하수처리시설": { component: SwtrmtFclt, },
//"하수처리시설": { component: SwtrmtFclt, },
"하수처리시설": { component: MsSwagePpl, },
"하수처리구역": {},
"우수토실": { component: Ssc, },
"중점우수토실": { component: Ssc, }, // 중점우수토실 여부 설정
apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
+14 -22
View File
@@ -13,15 +13,13 @@ type ModalOpenProp = {
btnTxt?: string,
}
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("0");
const [inftwtAnlss, setInftwtAnlss] = useState<TInftwtAnls[]>([]);
const [inftwtAnlsInfos, setInftwtAnlsInfos] = useState<any[]>([]); // 침입수분석정보 options
const [inftwtAnlsInfos, setInftwtAnlsInfos] = useState<any[]>([{ val: 0, text: '선택' }]); // 침입수분석정보 options
const [inftwtAnls, setInftwtAnls] = useState<TInftwtAnls | null>(null); // 침입수분석정보
const [inftwtAnlsSn, setInftwtAnlsSn] = useState<number>(0); // 침입수분석 정보 선택시 사용
const [chartData, setChartData] = useState<{ chartData1: { label: string; val: number }[]; chartData2: { label: string; val: number }[] }>({
@@ -32,12 +30,6 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
{ label: "3", val: 35 },
{ label: "5", val: 55 },],
});
// chartData1: [],chartData2: [],});
// API에서 데이터를 가져오지 못할 경우 더미 데이터 사용
// const aplcnYms = useAplcnYms().length > 0 ? useAplcnYms() : dummyAplcnYms;
//const [aplcnYms, setAplcnYms] = useState<{ text: string; val: string }[]>([]);
const aplcnYms = useAplcnYms('inftwtAnlsRslt'); // 상수사용월 데이터 가져오기
const openPopup = () => {
if (buttonRef.current) {
@@ -62,7 +54,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
setPopupOpen(true); // 모달이 닫힐 때 팝업은
setAplcnYm(""); // 상수사용월 초기화
setInftwtAnlss([]); // 침입수분석 초기화
setInftwtAnlsInfos([]); // 침입수분석정보 초기화
setInftwtAnlsInfos([{ val: 0, text: '선택' }]); // 침입수분석정보 초기화
setInftwtAnls(null); // 침입수분석정보 초기화
setInftwtAnlsSn(0); // 침입수분석 일련번호 초기화
setChartData({
@@ -153,7 +145,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
</div>
{popupOpen && (
<div
className="absolute bg-gray-100 border border-gray-300 w-[420px] shadow-lg p-6 rounded text-2xl"
className="absolute bg-gray-100 border border-gray-300 w-[440px] shadow-lg p-6 rounded text-2xl"
style={{
top: popupPosition.top,
left: popupPosition.left,
@@ -165,7 +157,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
<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]"
className="w-[220px] mr-8 z-[51] mb-2"
selectClass="rounded-lg bg-white"
label=''
selectArray={aplcnYms}
@@ -178,7 +170,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
<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]"
className="w-[220px] mr-8 z-[51] mb-2"
selectClass="rounded-lg bg-white"
label=''
selectArray={inftwtAnlsInfos}
@@ -191,8 +183,8 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
<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="입력"
className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
placeholder=""
value={inftwtAnls?.drtwSwtcRt ?? ""}
readOnly={true}
/>
@@ -200,8 +192,8 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
<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="입력"
className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
placeholder=""
value={inftwtAnls?.atflHrPttnNm ?? ""}
readOnly={true}
/>
@@ -209,8 +201,8 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
<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="입력"
className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
placeholder=""
value={inftwtAnls?.atflMpngNm ?? ""}
readOnly={true}
/>
@@ -218,8 +210,8 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
<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="입력"
className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
placeholder=""
value={inftwtAnls?.atflInpNm ?? ""}
readOnly={true}
/>
@@ -227,7 +219,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
<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"
className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
placeholder="입력"
value={inftwtAnls?.atflOilqNm ?? "없음"}
readOnly={true}
apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx
+10 -10
View File
@@ -20,7 +20,7 @@ const RdiiChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOpe
const [popupPosition, setPopupPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 }); // 팝업 위치
const [aplcnYm, setAplcnYm] = useState("");
const [rdiiAnlss, setRdiiAnlss] = useState<TRdiiAnls[]>([]);
const [rdiiAnlsInfos, setRdiiAnlsInfos] = useState<any[]>([]); // 강우유입수분석정보 options
const [rdiiAnlsInfos, setRdiiAnlsInfos] = useState<any[]>([{ val: 0, text: '선택' }]); // 강우유입수분석정보 options
const [rdiiAnls, setRdiiAnls] = useState<TRdiiAnls | null>(null); // 강우유입수분석정보
const [rainInfwtAnlsSn, setRainInfwtAnlsSn] = useState<number>(0); // 강우유입수분석 정보 선택시 사용
const [chartData, setChartData] = useState<{ chartData1: { label: string; val: number }[]; chartData2: { label: string; val: number }[] }>({
@@ -56,7 +56,7 @@ const RdiiChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOpe
setPopupOpen(true); // 모달이 닫힐 때 팝업은
setAplcnYm(""); // 상수사용월 초기화
setRdiiAnlss([]); // 강우유입수분석 초기화
setRdiiAnlsInfos([]); // 강우유입수분석정보 초기화
setRdiiAnlsInfos([{ val: 0, text: '선택' }]); // 강우유입수분석정보 초기화
setRdiiAnls(null); // 강우유입수분석정보 초기화
setRainInfwtAnlsSn(0); // 강우유입수분석 일련번호 초기화
setChartData({
@@ -147,7 +147,7 @@ const RdiiChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOpe
</div>
{popupOpen && (
<div
className="absolute bg-gray-100 border border-gray-300 w-[420px] shadow-lg p-6 rounded text-2xl"
className="absolute bg-gray-100 border border-gray-300 w-[440px] shadow-lg p-6 rounded text-2xl"
style={{
top: popupPosition.top,
left: popupPosition.left,
@@ -159,7 +159,7 @@ const RdiiChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOpe
<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]"
className="w-[220px] mr-8 z-[51] mb-2"
selectClass="rounded-lg bg-white"
label=''
selectArray={aplcnYms}
@@ -172,7 +172,7 @@ const RdiiChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOpe
<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]"
className="w-[220px] mr-8 z-[51] mb-2"
selectClass="rounded-lg bg-white"
label=''
selectArray={rdiiAnlsInfos}
@@ -185,7 +185,7 @@ const RdiiChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOpe
<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"
className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
placeholder=""
value={rdiiAnls?.drtwSwtcRt ?? ""}
readOnly={true}
@@ -194,7 +194,7 @@ const RdiiChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOpe
<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"
className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
placeholder=""
value={rdiiAnls?.atflMpngNm ?? ""}
readOnly={true}
@@ -203,7 +203,7 @@ const RdiiChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOpe
<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"
className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
placeholder=""
value={rdiiAnls?.atflInpNm ?? ""}
readOnly={true}
@@ -212,7 +212,7 @@ const RdiiChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOpe
<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"
className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
placeholder=""
value={rdiiAnls?.atflRainNm ?? ""}
readOnly={true}
@@ -221,7 +221,7 @@ const RdiiChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOpe
<div className='flex items-center justify-between'>
<Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">RTK계수 출처:</Label>
<Input
className="mr-8 w-[200px] !text-xl placeholder:text-center"
className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
placeholder=""
value={rdiiAnls?.srcNm ?? "없음"}
readOnly={true}