diff --git a/apps/dm/app/(with-layout)/intro/_components/LawIntroSection.tsx b/apps/dm/app/(with-layout)/intro/_components/LawIntroSection.tsx index e366c38ad..58efdd908 100644 --- a/apps/dm/app/(with-layout)/intro/_components/LawIntroSection.tsx +++ b/apps/dm/app/(with-layout)/intro/_components/LawIntroSection.tsx @@ -1,123 +1,93 @@ "use client"; -import React from "react"; -import Image, { type StaticImageData } from "next/image"; - -import lawPlan from "@/public/images/landing/intro/law_timeline.png"; -import planPerformance from "@/public/images/landing/intro/performance_left.png"; -import domesticChange from "@/public/images/landing/intro/domestic_textbox.png"; -import policyHistory from "@/public/images/landing/intro/policy_timeline.png"; -import lawRelation from "@/public/images/landing/intro/rel_note.png"; -import domesticLinkage from "@/public/images/landing/intro/linkage.png"; - -function SectionTitle({ children }: { children: React.ReactNode }) { - return ( -
- -

{children}

-
- ); -} - -function Hr({ className = "" }: { className?: string }) { - return
; -} - -function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) { - return ( -
- {alt} -
- ); -} - -function SectionShell({ - id, - title, - children, - className = "", -}: { - id: string; - title: string; - children: React.ReactNode; - className?: string; -}) { - return ( -
- {title} -
{children}
-
- ); -} - export default function LawIntroSection() { - const title = "물재이용법"; - - return ( -
-
-

- {title} - + const contentsHtml = ` +
+
+

+ 물재이용법 +

-
- - - +
+
+
+ +

법률 제·개정 및 기본계획 수립

+
+
+ 법률 제·개정 및 기본계획 수립 +
+
-
+
- - - +
+
+ +

제2차 계획 대비 실적 현황

+
+
+ 제2차 계획 대비 실적 현황 +
+
-
+
- - - +
+
+ +

우리나라의 수자원 현황 및 물이용 여건

+
+
+ 우리나라의 수자원 현황 및 물이용 여건 +
+
-
+
- - - +
+
+ +

물 재이용 정책 변화 추이

+
+
+ 물 재이용 정책 변화 추이 +
+
-
+
- - - +
+
+ +

타법령과의 관계 검토

+
+
+ 타법령과의 관계 검토 +
+
-
+
- - - +
+
+ +

주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요

+
+
+ 주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요 +
+
+ `; + + return ( +
); -} \ No newline at end of file +} diff --git a/apps/dm/app/contents-page.css b/apps/dm/app/contents-page.css new file mode 100644 index 000000000..ce14baf22 --- /dev/null +++ b/apps/dm/app/contents-page.css @@ -0,0 +1,87 @@ +.contents-page { + color: #0f172a; + font-size: 16px; + line-height: 1.5; +} + +.contents-page .page-title { + display: inline-block; +} + +.contents-page .page-title h2 { + position: relative; + display: inline-block; + padding: 0 0.5rem; + font-size: 28px; + font-weight: 800; + line-height: 1; + letter-spacing: -0.025em; + color: #0f172a; +} + +.contents-page .page-title .title-text { + position: relative; + z-index: 1; +} + +.contents-page .page-title .title-bg { + position: absolute; + left: 0; + bottom: -4px; + z-index: 0; + height: 12px; + width: 100%; + background: linear-gradient(to right, #7dd3fc, #86efac); +} + +.contents-page .sections { + margin-top: 2.5rem; +} + +.contents-page .section { + scroll-margin-top: 120px; +} + +.contents-page .section.first { + margin-top: 2.5rem; +} + +.contents-page .section-title { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.contents-page .section-bar { + height: 20px; + width: 3px; + flex-shrink: 0; + background: #0ea5e9; +} + +.contents-page .section-title h3 { + font-size: 24px; + font-weight: 700; + line-height: 1.2; + color: #171717; +} + +.contents-page .image-wrap { + margin-top: 2rem; + width: 100%; + overflow-x: auto; +} + +.contents-page .image-wrap img { + display: block; + margin: 0 auto; + max-width: none; + height: auto; +} + +.contents-page .divider { + height: 2px; + width: 100%; + margin: 2.75rem 0; + background: rgba(0, 0, 0, 0.1); +} diff --git a/apps/dm/app/globals.css b/apps/dm/app/globals.css index 2fee793a1..d3fa1c6e0 100644 --- a/apps/dm/app/globals.css +++ b/apps/dm/app/globals.css @@ -1,5 +1,6 @@ /* @import "../../../packages/common/components/src/base.css"; */ /* @import "../../../packages/common/components/src/base.css"; */ +@import "./contents-page.css"; @tailwind base; @tailwind components; diff --git a/apps/dm/components/ui/contents/contentsPageClient.tsx b/apps/dm/components/ui/contents/contentsPageClient.tsx index 97c62bb83..cf26b0343 100644 --- a/apps/dm/components/ui/contents/contentsPageClient.tsx +++ b/apps/dm/components/ui/contents/contentsPageClient.tsx @@ -1,6 +1,5 @@ "use client"; -import { useEffect, useRef } from "react"; import type { ContentsDetail } from "@/src/entities/content/model/contents-interface"; type ContentsPageClientProps = { @@ -8,28 +7,14 @@ type ContentsPageClientProps = { }; function ContentsPageClient({ initialContent }: ContentsPageClientProps) { - const shadowRootRef = useRef(null); - - useEffect(() => { - if (!shadowRootRef.current || !initialContent?.contsCn) return; - - const shadowRoot = - shadowRootRef.current.shadowRoot ?? - shadowRootRef.current.attachShadow({ mode: "open" }); - shadowRoot.innerHTML = ""; - - const styleElement = document.createElement("style"); - styleElement.textContent = `div { font-size: 16px; line-height: 1.5; }`; - shadowRoot.appendChild(styleElement); - - const contentElement = document.createElement("div"); - contentElement.innerHTML = initialContent.contsCn; - shadowRoot.appendChild(contentElement); - }, [initialContent]); - return (
-
+
); } diff --git a/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/htdflReg/page.tsx b/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/htdflReg/page.tsx index 7d6b28e2a..cc892b6d1 100644 --- a/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/htdflReg/page.tsx +++ b/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/htdflReg/page.tsx @@ -160,7 +160,7 @@ export default function Home() {
- +