From 79bc10cdcea9cd83d42f7ec4a7ef4342767b2804 Mon Sep 17 00:00:00 2001 From: jyha00 Date: Thu, 24 Jul 2025 17:37:46 +0900 Subject: [PATCH] =?UTF-8?q?=EB=8C=80=EB=AF=BC=20=EB=94=94=EC=9E=90?= =?UTF-8?q?=EC=9D=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/dm/app/pages/wrAbout/page.tsx | 512 +++++++++--------- apps/dm/app/pages/wrExample/page.tsx | 128 ++--- apps/dm/app/pages/wrOverview/page.tsx | 62 +-- apps/dm/app/pages/wrStatus/page.tsx | 12 +- .../ui/sdmInfoInsertForm/component.tsx | 1 - .../components/ui/sdmLoginForm/component.tsx | 24 +- apps/dm/tailwind.config.ts | 123 +++-- 7 files changed, 444 insertions(+), 418 deletions(-) diff --git a/apps/dm/app/pages/wrAbout/page.tsx b/apps/dm/app/pages/wrAbout/page.tsx index e52549e66..8d5bdd0ba 100644 --- a/apps/dm/app/pages/wrAbout/page.tsx +++ b/apps/dm/app/pages/wrAbout/page.tsx @@ -16,7 +16,7 @@ export default function WrAboutPage() { const [activeIdx, setActiveIdx] = useState(0); const navRefs = useRef<(HTMLLIElement | null)[]>([]); const cardRefs = useRef<(HTMLElement | null)[]>([]); - + // 클릭 시 이동 const handleNavClick = (idx: number) => { setActiveIdx(idx); @@ -69,267 +69,269 @@ export default function WrAboutPage() { }, []); return ( -
- {/* 사이드바 */} - -
{ cardRefs.current[0] = el; }} className="card-wrap pl-[100px] mb-24 !pt-0" id="card1" aria-labelledby="card1-title"> -

- - 물재이용이란 -

-
-

물 재이용이 무엇인가요?

-

- 물 재이용은 빗물, 오수, 하수처리수, 폐수처리수 및 발전소 온배수를
- 물 재이용시설을 이용하여 처리하고, 그 처리된 물을 생활, 공업, 농업, 조경,
- 하천 유지 등의 용도로 이용하는 것을 말합니다. -

- 이 이미지는 물 재이용 시스템의 개요를 나타냅니다. 가정, 공공기관, 하수처리장 등에서 발생한 생활하수, 빗물, 하수처리수를 물 재이용 시설에서 처리한 후, 청소나 화장실, 농업, 살수차, 하천 유지, 공장, 공원 및 골프장 등 다양한 용도로 활용하는 과정을 도식화한 것입니다. -

- 환경부는 2011년에 '물의 재이용 촉진 및 지원에 관한 법률'을 제정하여
- 한국환경공단과 함께 물 재이용 확대 및 촉진을 위해 노력하고 있습니다. -

-
-
+
{ cardRefs.current[0] = el; }} className="card-wrap pl-[100px] mb-24 !pt-0" id="card1" aria-labelledby="card1-title"> +

+ + 물재이용이란 +

+
+

물 재이용이 무엇인가요?

+

+ 물 재이용은 빗물, 오수, 하수처리수, 폐수처리수 및 발전소 온배수를
+ 물 재이용시설을 이용하여 처리하고, 그 처리된 물을 생활, 공업, 농업, 조경,
+ 하천 유지 등의 용도로 이용하는 것을 말합니다. +

+ 이 이미지는 물 재이용 시스템의 개요를 나타냅니다. 가정, 공공기관, 하수처리장 등에서 발생한 생활하수, 빗물, 하수처리수를 물 재이용 시설에서 처리한 후, 청소나 화장실, 농업, 살수차, 하천 유지, 공장, 공원 및 골프장 등 다양한 용도로 활용하는 과정을 도식화한 것입니다. +

+ 환경부는 2011년에 '물의 재이용 촉진 및 지원에 관한 법률'을 제정하여
+ 한국환경공단과 함께 물 재이용 확대 및 촉진을 위해 노력하고 있습니다. +

+
+
- {/* 카드2 */} -
{ cardRefs.current[1] = el; }} className="card-wrap pl-[100px] mb-24" id="card2" aria-labelledby="card2-title"> -

- - 물재이용 필요성 -

-
-

물 재이용, 왜 필요한가요?

-

- 빗물, 중수, 하수처리수는 지속적으로 이용 가능한 순환자원입니다.
- 물 재이용을 통한 효율적인 수자원 활용은 물 스트레스국가인 우리나라에서
가뭄대응능력 향상 및 하천수질보전을 위해 반드시 필요한 일입니다. -

- 이 이미지는 기후변화로 인한 온도 상승 추이를 설명한다. 왼쪽에는 지구 그림과 온도계가 함께 표시되어 있으며, 지구 평균 기온은 지난 100년간 약 0.9℃ 상승했음을 나타낸다. 오른쪽에는 대한민국 지도와 함께 온도계가 있으며, 지난 100년간 약 1.8℃ 상승했음을 보여준다. 이는 지구 평균보다 2배 높은 수치이며, 자료 출처는 「기후변화 평가보고서 2020, 환경부·기상청」이다. -

- - 우리나라의 기후변화 진행속도는 세계 평균을 상회하고 있습니다.
- - 기후변화로 인한 국지적인 가뭄은 더욱 자주, 더욱 심하게 일어나고 있으며, 우리의 물 안보를 위협하고 있습니다. -

- 세계 평균 1인당 강수량은 15,044m³이며, 대한민국은 2,546m³로 약 1/6 수준입니다. 계절별 강수량은 봄 10%, 여름 70%, 가을 15%, 겨울 5%입니다. 이는 여름철에 강수량이 집중되는 문제를 나타냅니다. -

- - 우리나라의 1인당 강수량은 2,546㎥ 으로 세계 평균 15,044㎥의 약 1/6 수준입니다.
- - 우리나라 강수량의 70%는 여름철에 집중되어 있어 이용 가능한 수자원확보가 어렵습니다. -

- 물 재이용은 환경을 보호하며 지속 가능한 발전이 가능하게 하고, 안정적인 수자원 확보, 깨끗하고 경제적인 공업용수 공급, 하천 수질 개선을 통한 생태계 회복에 기여합니다. -
-
+ {/* 카드2 */} +
{ cardRefs.current[1] = el; }} className="card-wrap pl-[100px] mb-24" id="card2" aria-labelledby="card2-title"> +

+ + 물재이용 필요성 +

+
+

물 재이용, 왜 필요한가요?

+

+ 빗물, 중수, 하수처리수는 지속적으로 이용 가능한 순환자원입니다.
+ 물 재이용을 통한 효율적인 수자원 활용은 물 스트레스국가인 우리나라에서
가뭄대응능력 향상 및 하천수질보전을 위해 반드시 필요한 일입니다. +

+ 이 이미지는 기후변화로 인한 온도 상승 추이를 설명한다. 왼쪽에는 지구 그림과 온도계가 함께 표시되어 있으며, 지구 평균 기온은 지난 100년간 약 0.9℃ 상승했음을 나타낸다. 오른쪽에는 대한민국 지도와 함께 온도계가 있으며, 지난 100년간 약 1.8℃ 상승했음을 보여준다. 이는 지구 평균보다 2배 높은 수치이며, 자료 출처는 「기후변화 평가보고서 2020, 환경부·기상청」이다. +

+ - 우리나라의 기후변화 진행속도는 세계 평균을 상회하고 있습니다.
+ - 기후변화로 인한 국지적인 가뭄은 더욱 자주, 더욱 심하게 일어나고 있으며, 우리의 물 안보를 위협하고 있습니다. +

+ 세계 평균 1인당 강수량은 15,044m³이며, 대한민국은 2,546m³로 약 1/6 수준입니다. 계절별 강수량은 봄 10%, 여름 70%, 가을 15%, 겨울 5%입니다. 이는 여름철에 강수량이 집중되는 문제를 나타냅니다. +

+ - 우리나라의 1인당 강수량은 2,546㎥ 으로 세계 평균 15,044㎥의 약 1/6 수준입니다.
+ - 우리나라 강수량의 70%는 여름철에 집중되어 있어 이용 가능한 수자원확보가 어렵습니다. +

+ 물 재이용은 환경을 보호하며 지속 가능한 발전이 가능하게 하고, 안정적인 수자원 확보, 깨끗하고 경제적인 공업용수 공급, 하천 수질 개선을 통한 생태계 회복에 기여합니다. +
+
- {/* 카드3 */} -
{ cardRefs.current[2] = el; }} className="card-wrap pl-[100px] mb-24" id="card3" aria-labelledby="card3-title"> -

- - 빗물 재이용 -

-
-

친환경 수자원 빗물,
편리하게 사용할 수 있어요!

-

가뭄을 극복하고 홍수를 예방하기 위해
비가 내릴 때 빗물을 모아두었다가 사용합니다.

- 주택 지붕에 내린 빗물을 저장조에 모아 조경용수, 화장실용수, 세척·살수용수로 재활용하는 과정을 보여줍니다. - 빗물이용 -

- - 의무 설치대상: 지붕면적 1,000㎡ 이상의 운동장, 체육관, 공공업무시설 등
- - 설 치 기 준: 집수시설, 처리시설, 빗물 저류조(지붕 집수면적 x 0.05m 이상)
- - 활 용 용 도: 골프장 등의 조경용수, 화장실용수, 세척·살수용수 등 -

-
-
+ {/* 카드3 */} +
{ cardRefs.current[2] = el; }} className="card-wrap pl-[100px] mb-24" id="card3" aria-labelledby="card3-title"> +

+ + 빗물 재이용 +

+
+

친환경 수자원 빗물,
편리하게 사용할 수 있어요!

+

가뭄을 극복하고 홍수를 예방하기 위해
비가 내릴 때 빗물을 모아두었다가 사용합니다.

+ 주택 지붕에 내린 빗물을 저장조에 모아 조경용수, 화장실용수, 세척·살수용수로 재활용하는 과정을 보여줍니다. + 빗물이용 +

+ - 의무 설치대상: 지붕면적 1,000㎡ 이상의 운동장, 체육관, 공공업무시설 등
+ - 설 치 기 준: 집수시설, 처리시설, 빗물 저류조(지붕 집수면적 x 0.05m 이상)
+ - 활 용 용 도: 골프장 등의 조경용수, 화장실용수, 세척·살수용수 등 +

+
+
- {/* 카드4 */} -
{ cardRefs.current[3] = el; }} className="card-wrap pl-[100px] mb-24" id="card4" aria-labelledby="card4-title"> -

- - 중수 재이용 -

-
-

요모조모 쓸모 많은 중수,
알뜰하게 재이용할 수 있어요!

-

한번 사용한 물을 중수도 시설을 통해 재생하여
개별적 또는 지역적으로 재이용할 수 있습니다.

- 욕실, 세면대, 주방, 세탁기 등에서 발생한 생활용수를 중수도 시설에서 처리하여 화장실 변기용수와 조경용수로 재이용하는 시스템 흐름도입니다. - 중수재이용 -

- - 의무 설치대상: 일정규모 이상의 대규모점포, 숙박/목욕장, 공장, 각종 개발사업 등
- - 의무 재이용량: 물 사용량의 10% 이상
- - 활 용 용 도: 청소·화장실용수, 세척·살수용수, 조경용수, 공업용수 등 -

-
-
+ {/* 카드4 */} +
{ cardRefs.current[3] = el; }} className="card-wrap pl-[100px] mb-24" id="card4" aria-labelledby="card4-title"> +

+ + 중수 재이용 +

+
+

요모조모 쓸모 많은 중수,
알뜰하게 재이용할 수 있어요!

+

한번 사용한 물을 중수도 시설을 통해 재생하여
개별적 또는 지역적으로 재이용할 수 있습니다.

+ 욕실, 세면대, 주방, 세탁기 등에서 발생한 생활용수를 중수도 시설에서 처리하여 화장실 변기용수와 조경용수로 재이용하는 시스템 흐름도입니다. + 중수재이용 +

+ - 의무 설치대상: 일정규모 이상의 대규모점포, 숙박/목욕장, 공장, 각종 개발사업 등
+ - 의무 재이용량: 물 사용량의 10% 이상
+ - 활 용 용 도: 청소·화장실용수, 세척·살수용수, 조경용수, 공업용수 등 +

+
+
- {/* 카드5 */} -
{ cardRefs.current[4] = el; }} className="card-wrap pl-[100px] mb-24" id="card5" aria-labelledby="card5-title"> -

- - 하수 재이용 -

-
-

아직 할 일이 많은 하수처리수,
풍족하게 재이용할 수 있어요!

-

사용하고 버려져 공공하수처리장으로 모여든 물은
용도에 맞는 처리 후 재이용 할 수 있습니다.

- 주택과 건물에서 발생한 하수가 공공하수처리장을 거쳐 처리된 후, 물 재이용 시설에서 정화되어 공업용수, 하천유지용수, 농업용수, 세척·살수용수로 재활용됩니다. - 하수처리 재이용 -

- - 의무 이용대상: 공공하수처리장(시설용량 5,000㎥/일 이상)
- - 의무 재이용량: 일 하수처리량의 10% 이상
- - 활 용 용 도: 공업용수, 하천유지용수, 농업용수 등 -

-
-
+ {/* 카드5 */} +
{ cardRefs.current[4] = el; }} className="card-wrap pl-[100px] mb-24" id="card5" aria-labelledby="card5-title"> +

+ + 하수 재이용 +

+
+

아직 할 일이 많은 하수처리수,
풍족하게 재이용할 수 있어요!

+

사용하고 버려져 공공하수처리장으로 모여든 물은
용도에 맞는 처리 후 재이용 할 수 있습니다.

+ 주택과 건물에서 발생한 하수가 공공하수처리장을 거쳐 처리된 후, 물 재이용 시설에서 정화되어 공업용수, 하천유지용수, 농업용수, 세척·살수용수로 재활용됩니다. + 하수처리 재이용 +

+ - 의무 이용대상: 공공하수처리장(시설용량 5,000㎥/일 이상)
+ - 의무 재이용량: 일 하수처리량의 10% 이상
+ - 활 용 용 도: 공업용수, 하천유지용수, 농업용수 등 +

+
+
- {/* 카드6 */} -
{ cardRefs.current[5] = el; }} className="card-wrap pl-[100px] mb-24" id="card6" aria-labelledby="card6-title"> -

- - 물재이용 목표 -

-
-

2030년 물 재이용 목표를 위해
모두의 관심과 노력이 필요합니다.

-

- 환경부는 2030년까지의 제2차 물 재이용 기본계획을 수립하여
한국환경공단과 함께 물 재이용 확대 및 촉진을 위해 노력하고 있습니다. -

- 지속가능한 물 재이용 정착으로 건전한 물순환 확산 -
-
- -

도시 물 순환이용
체계로의 전환

-
    -
  • - 지속가능한 물 순환이용체계 구축
    • -
  • - 물 재이용시설 관리체계 강화
    • -
+ {/* 카드6 */} +
{ cardRefs.current[5] = el; }} className="card-wrap pl-[100px] mb-24" id="card6" aria-labelledby="card6-title"> +

+ + 물재이용 목표 +

+
+

2030년 물 재이용 목표를 위해
모두의 관심과 노력이 필요합니다.

+

+ 환경부는 2030년까지의 제2차 물 재이용 기본계획을 수립하여
한국환경공단과 함께 물 재이용 확대 및 촉진을 위해 노력하고 있습니다. +

+ 지속가능한 물 재이용 정착으로 건전한 물순환 확산 +
+
+ +

도시 물 순환이용
체계로의 전환

+
    +
  • - 지속가능한 물 순환이용체계 구축
    • +
  • - 물 재이용시설 관리체계 강화
    • +
+
+
+ +

유역기반 하수처리수 재이용
수요확대 및 공급체계 구축

+
    +
  • - 유역기반 통합물관리 연계 강화
    • +
  • - 하수처리수 재이용 공업용수 공급 활성화
    • +
  • - 하수처리수 재이용을 활용한 물순환 촉진
    • +
+
+
+ +

물 재이용 인식제고
및 산업발전 기반 마련

+
    +
  • - 물 재이용 교육 및 대국민 홍보 강화
    • +
  • - 핵심기술 육성 및 산업발전 지원 강화
    • +
+
-
- -

유역기반 하수처리수 재이용
수요확대 및 공급체계 구축

-
    -
  • - 유역기반 통합물관리 연계 강화
    • -
  • - 하수처리수 재이용 공업용수 공급 활성화
    • -
  • - 하수처리수 재이용을 활용한 물순환 촉진
    • -
-
-
- -

물 재이용 인식제고
및 산업발전 기반 마련

-
    -
  • - 물 재이용 교육 및 대국민 홍보 강화
    • -
  • - 핵심기술 육성 및 산업발전 지원 강화
    • -
-
-
- 물 재이용량은 2014년 13.3억톤에서 2030년 25.9억톤까지 증가할 것으로 예상됩니다. 그에 따른 기대 효과로는 연간 상수대체 17.9억톤, 물산업 시장성장 약 2조3,541억 원, 건천화된 73개 하천 해소, 약 20,550명의 고용 효과가 포함됩니다. -
-
-
+ 물 재이용량은 2014년 13.3억톤에서 2030년 25.9억톤까지 증가할 것으로 예상됩니다. 그에 따른 기대 효과로는 연간 상수대체 17.9억톤, 물산업 시장성장 약 2조3,541억 원, 건천화된 73개 하천 해소, 약 20,550명의 고용 효과가 포함됩니다. + + + + ); } diff --git a/apps/dm/app/pages/wrExample/page.tsx b/apps/dm/app/pages/wrExample/page.tsx index 066e0abe2..4849c02b0 100644 --- a/apps/dm/app/pages/wrExample/page.tsx +++ b/apps/dm/app/pages/wrExample/page.tsx @@ -2,49 +2,49 @@ export default function WrExamplePage() { return ( -
+
-

+

물 재이용사례

-
+
{/* 카드 1 */}
-

+

사업사례 1

{/* 사업명 */}
-

사업명

-

+

사업명

+

경기권역 반도체 사업장 물 재이용 사업
: 삼성전자 반도체 사업장 하수재이용수 공급(재이용시설 설치, 공급망 구축 등)

{/* 사업 배경 및 목적 */}
-

사업 배경 및 목적

-

+

사업 배경 및 목적

+

삼성전자는 환경경영전략 실현과 반도체 공장의 안정적 용수 공급을 위해 하수 재이용수를 공업용수로 도입하기로 결정

{/* 사업 주요 내용 */}
-

사업 주요 내용

-

+

사업 주요 내용

+

1단계 사업[화성·오산(12만㎥/일) → 삼성 화성·기흥(29년 공급)]
2단계 사업[수원(21만㎥/일) → 삼성 평택(30년 공급)]

{/* 특이사항 */}
-

특이사항

-

+

특이사항

+

본 사업은 광역 하수 재이용 공급망 구축의 첫 사업으로 초기 민관협의체를 구성·운영 후 관계기관(환경부, 경기도, 지자체, 공단, 수공, 삼성전자) 간 MOU 체결을 통해 사업을 추진하였으며, 반도체 사업장에 하수 재이용수를 공업용수로 공급하는 국내 첫 사업으로 위협부담 해소를 위해 사업을 단계별로 시행

@@ -63,15 +63,15 @@ export default function WrExamplePage() { {/* 카드2 */}
-

+

사업사례 2

{/* 사업명 */}
-

사업명

-

+

사업명

+

경기도 파주시 하수재이용
: 운정·금촌하수처리시설의 하수처리수를 막공법(U/F, R/O)으로 재처리하여 파주 LCD 산업단지내 3개 업체*에 공업용수 공급

*LG디스플레이(P10공장), 희성전자, 엔비텍 등 @@ -79,15 +79,15 @@ export default function WrExamplePage() {

{/* 사업 방식 */}
-

사업 방식

-

+

사업 방식

+

민간투자사업(시행사 : 파주그린허브(주), 운영사 : 테크로스)

{/* 사업 주요 내용 */}
-

사업 주요 내용

-

+

사업 주요 내용

+

처리공정 : 전처리분리막(U/F) + 역삼투서비(R/O)
공급량 : 4만m³/일
관로 : 13.6km
@@ -96,8 +96,8 @@ export default function WrExamplePage() {

{/* 특이사항 */}
-

특이사항

-

+

특이사항

+

하수처리수 재이용시설 자체 농축폐수 처리공정 개발 및 적용 성공사례

@@ -124,29 +124,29 @@ export default function WrExamplePage() { - 하수처리수 공급 + 하수처리수 공급 - 위치 - 금촌하수 - 운정하수 + 위치 + 금촌하수 + 운정하수 - 시설용량 - 44,000㎥/일 - 60,000㎥/일 + 시설용량 + 44,000㎥/일 + 60,000㎥/일 - 유입량 - 27,000㎥/일
자연유하 - 30,000㎥/일
이송펌프장 + 유입량 + 27,000㎥/일
자연유하 + 30,000㎥/일
이송펌프장 {/* 첫 화살표 (자연유하 / 관로이송) */}
- 자연유하: 161m + 자연유하: 161m 오른쪽 화살표 - 관로이송: 3.2km + 관로이송: 3.2km
@@ -177,26 +177,26 @@ export default function WrExamplePage() { - 물재이용 처리시설 + 물재이용 처리시설 - 유입유량 - 57,000㎥/일 + 유입유량 + 57,000㎥/일 - 재이용시설 - 40,000㎥/일 + 재이용시설 + 40,000㎥/일 - 농축폐수처리 - 17,000㎥/일 + 농축폐수처리 + 17,000㎥/일 {/* 두 번째 화살표 (공급관로) */}
- 공급관로 L=10.4km + 공급관로 L=10.4km 아래 화살표 - 수요처 공급 + 수요처 공급 - 수요처 - LG디스플레이 외 2개사 + 수요처 + LG디스플레이 외 2개사 - 수요량 - 40,000㎥/일 + 수요량 + 40,000㎥/일 @@ -238,30 +238,30 @@ export default function WrExamplePage() { {/* 카드3 */}
-

+

사업사례 3

{/* 사업명 */}
-

사업명

-

+

사업명

+

충남 보령 하수재이용
: 보령·신보령화력발전소에 하루 1만톤의 탈황용수 공급을 위해 보령하수처리시설의 하수처리수 재이용 사업 추진

{/* 사업 방식 */}
-

사업 방식

-

+

사업 방식

+

2017년 한국환경공단과 사업대행 위 · 수탁 협약 체결

{/* 사업 주요 내용 */}
-

사업 주요 내용

-

+

사업 주요 내용

+

처리공정 : 전처리분리막(U/F) + 역삼투서비(R/O)
공급량 : 1만m3/일
관로 : 8.7km
@@ -270,8 +270,8 @@ export default function WrExamplePage() {

{/* 특이사항 */}
-

특이사항

-

+

특이사항

+

국내 유일 하수재이용 공업용수 공급 재정사업으로 2016년 충남 서부권 가뭄 시 지역사회 기여 차원에서 기관간 MOU (환경부, 충청남도, 보령시, 한국중부발전㈜)를 바탕 으로 추진 되어 경제성보다 공익성을 바탕으로 국가전력 기반시설의 안정적 운영 도모

@@ -290,22 +290,22 @@ export default function WrExamplePage() { {/* 카드4 */}
-

+

사업사례 4

{/* 사업명 */}
-

사업명

-

+

사업명

+

경기도 수원시 빗물이용과 중수도

{/* 사업 내용 */}
-

사업 내용

-

+

사업 내용

+

(빗물) 월드컵경기장 등 4개소에 노면 빗물분사시스템 및 빗물 공급기를 설치하여 혹서기 도시 열섬효과 및 도로 비산먼지 저감
  ※ 시설 가동중 도로 노면 온도의 7.2 ~ 26.3℃ 감소 효과 확인(21.7월, 수원시청).
  다만, 가뭄기나 강우량이 적을 경우 빗물을 원활히 공급하기 다소 곤란

@@ -320,7 +320,7 @@ export default function WrExamplePage() { height={250} className="w-[100%] mx-auto" /> - ＜월드컵경기장 인근도로 노면 살수＞ + ＜월드컵경기장 인근도로 노면 살수＞

- ＜주유기 모양의 빗물 공급기＞ + ＜주유기 모양의 빗물 공급기＞
- ＜빗물주유기에서 살수용수 공급＞ + ＜빗물주유기에서 살수용수 공급＞
- ＜빗물 공급기 및 빗물분사장치 위치＞ + ＜빗물 공급기 및 빗물분사장치 위치＞
diff --git a/apps/dm/app/pages/wrOverview/page.tsx b/apps/dm/app/pages/wrOverview/page.tsx index f8aa3b933..3e5825899 100644 --- a/apps/dm/app/pages/wrOverview/page.tsx +++ b/apps/dm/app/pages/wrOverview/page.tsx @@ -2,15 +2,15 @@ export default function WrOverviewPage() { return ( -
+
{/* 카드 1 - 물재이용 사업 추진 절차 */}
-

+

물재이용 사업 추진 절차

-
+
@@ -22,55 +22,55 @@ export default function WrOverviewPage() { {/* 1단계 */} - - + + {/* 2단계 */} - - + + {/* 3단계 */} - - + + {/* 4단계 */} - - + + {/* 5단계 */} - - + + {/* 6단계 */} - - + + {/* 7단계 */} - - + + {/* 8단계 */} - - + + {/* 9단계 */} - +
물 재이용 추진 절차 상세 표
타당성 조사
↓
타당성 조사
↓
매칭시스템 신청사업계획(안) 수립
↓
매칭시스템 신청사업계획(안) 수립
↓
하수도정보시스템 신청국고지원 신청→기술검토
(한국환경공단)
↓
하수도정보시스템 신청국고지원 신청→기술검토(한국환경공단)
↓
국고지원 확정 통보
↓
국고지원 확정 통보
↓
사업계획 수립(실시설계)
↓
사업계획 수립(실시설계)
↓
(행정관) 기술검토 신청재원협의
(지방환경관서장)		→기술검토
(한국환경공단)
↓
(행정관) 기술검토 신청재원협의(지방환경관서장)→기술검토(한국환경공단)
↓
(행정관) 기술검토 신청설치승인
(시도지사)		→기술검토
(한국환경공단)
↓
(행정관) 기술검토 신청설치승인(시도지사)→기술검토(한국환경공단)
↓
공사시행
↓
공사시행
↓
(행정관) 기술검토 신청준공(국고정산)→기술검토
(한국환경공단)
(행정관) 기술검토 신청준공(국고정산)→기술검토(한국환경공단)
{/* 카드 2 - 물재이용 매칭 시스템 */} -
-

+
+

물재이용 매칭 시스템이란?

{/* 개요 */}
-

개요

-

+

개요

+

기후변화 및 지자체의 개발속도 차이에 따라 물 자원의 수요-공급 불균형이 발생하여 빗물, 중수도, 하수처리 재처리수 등의 공급 여유가 있는 지자체의 재이용수를 부족한 지자체 수요처에 공급하여 불균형 해소를 통한 수자원 절약 및 물 자원 순환

{/* 구성 */}
-

구성

-
    +

    구성

    +
    • 공급자: 하수처리장, 빗물이용시설, 중수도 등
    • 수요자: 산업체(냉각수), 공공시설(조경, 도로청소), 농민(농업용수) 등
    • 시스템: 수질, 수량, 거리 기반 매칭, 중개
      • @@ -80,16 +80,16 @@ export default function WrOverviewPage() { {/* 절차 */}
      -

      사업 주요 내용

      -

      +

      사업 주요 내용

      +

      ① 공급자 등록 → ② 수요자 조건 입력 → ③ 매칭 검토 → ④ 시스템 매칭 → ⑤ 계약·공급 이행

      {/* 기대효과 */}
      -

      기대효과

      -
        +

        기대효과

        +
        • 물 자원 수요-공급 조정을 통한 효율적 분배
        • 물 재이용시설 데이터 수집으로 체계적 관리
        • 지자체, 사업시행자 등 재이용 정보 획득 용이
          • @@ -102,7 +102,7 @@ export default function WrOverviewPage() { height={500} className="h-[500px] mx-auto mb-4 rounded" /> -

          (하수 재이용 시스템 개요도)

          +

          (하수 재이용 시스템 개요도)

diff --git a/apps/dm/app/pages/wrStatus/page.tsx b/apps/dm/app/pages/wrStatus/page.tsx index dd7ec5552..3fccefdb8 100644 --- a/apps/dm/app/pages/wrStatus/page.tsx +++ b/apps/dm/app/pages/wrStatus/page.tsx @@ -395,7 +395,7 @@ const WrStatusPage: React.FC = () => { }, [selectedRegion]); return ( -
+
{/* 우측 콘텐츠 영역 */}
{/* 상단 제목 */} @@ -455,19 +455,19 @@ const WrStatusPage: React.FC = () => {
- 하수재이용시설 (총 717건) + 하수재이용시설 (총 717개소수)
- 빗물이용시설 (총 3,730건) + 빗물이용시설 (총 3,730개소수)
- 중수도시설 (총 1,074건) + 중수도시설 (총 1,074개소수)
- 온배수시설 (총 201건) + 온배수시설 (총 201개소수)
@@ -522,7 +522,7 @@ const WrStatusPage: React.FC = () => {

재이용통계(2023)

-

항목별 통계 보기

+

행정구역별 재이용시설 현황 개소수 그래프

diff --git a/apps/dm/components/ui/sdmInfoInsertForm/component.tsx b/apps/dm/components/ui/sdmInfoInsertForm/component.tsx index 8c2273872..ddc666abe 100644 --- a/apps/dm/components/ui/sdmInfoInsertForm/component.tsx +++ b/apps/dm/components/ui/sdmInfoInsertForm/component.tsx @@ -420,7 +420,6 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo name: "rmrk", label: "비고", formIndex: 1, - required: true, component: (field) => ( state); const [isBznmTotNoDisabled, setIsBznmTotNoDisabled] = useState(false); + + const formatBusinessNumber = (value: string) => { + // 숫자만 추출 + const digitsOnly = value.replace(/\D/g, ""); + + // 10자리까지만 처리 + const limitedDigits = digitsOnly.slice(0, 10); + + // 3-2-5 형식으로 포맷팅 + if (limitedDigits.length <= 3) { + return limitedDigits; + } else if (limitedDigits.length <= 5) { + return `${limitedDigits.slice(0, 3)}-${limitedDigits.slice(3)}`; + } else { + return `${limitedDigits.slice(0, 3)}-${limitedDigits.slice(3, 5)}-${limitedDigits.slice(5)}`; + } + }; // 스키마를 useMemo로 최적화 const sdmLoginFormSchema = useMemo(() => z.object({ @@ -79,7 +96,12 @@ export function SdmLoginForm() { placeholder="사업자등록번호를 입력하세요" type="text" className="!mt-5 !mb-5 !text-xl text-gray-600" - {...field} + {...field} + value={formatBusinessNumber(field.value as string)} + onChange={(e) => { + const dmdId = e.target.value.replace(/\D/g, "").slice(0, 10); + field.onChange(dmdId); + }} /> ) }, diff --git a/apps/dm/tailwind.config.ts b/apps/dm/tailwind.config.ts index d3eabd953..42cfc69f5 100644 --- a/apps/dm/tailwind.config.ts +++ b/apps/dm/tailwind.config.ts @@ -3,64 +3,67 @@ import baseConfig from "../../packages/common/components/tailwind.config"; import type { Config } from "tailwindcss"; export default { - darkMode: ["class"], - presets: [baseConfig], - content: [ - "./app/**/*.{js,ts,jsx,tsx,mdx}", - "./components/**/*.{js,ts,jsx,tsx,mdx}", - "../../packages/common/components/src/ui/**/*.{js,ts,jsx,tsx,mdx}", - "../../packages/common/business_components/src/ui/**/*.{js,ts,jsx,tsx,mdx}", - ], - plugins: [require("tailwindcss-animate")], - theme: { - extend: { - borderRadius: { - lg: 'var(--radius)', - md: 'calc(var(--radius) - 2px)', - sm: 'calc(var(--radius) - 4px)' - }, - colors: { - background: 'hsl(var(--background))', - foreground: 'hsl(var(--foreground))', - card: { - DEFAULT: 'hsl(var(--card))', - foreground: 'hsl(var(--card-foreground))' - }, - popover: { - DEFAULT: 'hsl(var(--popover))', - foreground: 'hsl(var(--popover-foreground))' - }, - primary: { - DEFAULT: 'hsl(var(--primary))', - foreground: 'hsl(var(--primary-foreground))' - }, - secondary: { - DEFAULT: 'hsl(var(--secondary))', - foreground: 'hsl(var(--secondary-foreground))' - }, - muted: { - DEFAULT: 'hsl(var(--muted))', - foreground: 'hsl(var(--muted-foreground))' - }, - accent: { - DEFAULT: 'hsl(var(--accent))', - foreground: 'hsl(var(--accent-foreground))' - }, - destructive: { - DEFAULT: 'hsl(var(--destructive))', - foreground: 'hsl(var(--destructive-foreground))' - }, - border: 'hsl(var(--border))', - input: 'hsl(var(--input))', - ring: 'hsl(var(--ring))', - chart: { - '1': 'hsl(var(--chart-1))', - '2': 'hsl(var(--chart-2))', - '3': 'hsl(var(--chart-3))', - '4': 'hsl(var(--chart-4))', - '5': 'hsl(var(--chart-5))' - } - } - } - } + darkMode: ["class"], + presets: [baseConfig], + content: [ + "./app/**/*.{js,ts,jsx,tsx,mdx}", + "./components/**/*.{js,ts,jsx,tsx,mdx}", + "../../packages/common/components/src/ui/**/*.{js,ts,jsx,tsx,mdx}", + "../../packages/common/business_components/src/ui/**/*.{js,ts,jsx,tsx,mdx}", + ], + plugins: [require("tailwindcss-animate")], + theme: { + extend: { + fontFamily: { + NotoSansKR: ['NotoSansKR'], + }, + borderRadius: { + lg: 'var(--radius)', + md: 'calc(var(--radius) - 2px)', + sm: 'calc(var(--radius) - 4px)' + }, + colors: { + background: 'hsl(var(--background))', + foreground: 'hsl(var(--foreground))', + card: { + DEFAULT: 'hsl(var(--card))', + foreground: 'hsl(var(--card-foreground))' + }, + popover: { + DEFAULT: 'hsl(var(--popover))', + foreground: 'hsl(var(--popover-foreground))' + }, + primary: { + DEFAULT: 'hsl(var(--primary))', + foreground: 'hsl(var(--primary-foreground))' + }, + secondary: { + DEFAULT: 'hsl(var(--secondary))', + foreground: 'hsl(var(--secondary-foreground))' + }, + muted: { + DEFAULT: 'hsl(var(--muted))', + foreground: 'hsl(var(--muted-foreground))' + }, + accent: { + DEFAULT: 'hsl(var(--accent))', + foreground: 'hsl(var(--accent-foreground))' + }, + destructive: { + DEFAULT: 'hsl(var(--destructive))', + foreground: 'hsl(var(--destructive-foreground))' + }, + border: 'hsl(var(--border))', + input: 'hsl(var(--input))', + ring: 'hsl(var(--ring))', + chart: { + '1': 'hsl(var(--chart-1))', + '2': 'hsl(var(--chart-2))', + '3': 'hsl(var(--chart-3))', + '4': 'hsl(var(--chart-4))', + '5': 'hsl(var(--chart-5))' + } + } + } + } } satisfies Config;