dm: 컨텐츠1

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 (
-    <div className="flex items-center gap-3">
-      <span className="h-5 w-[3px] bg-sky-500" />
-      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
-    </div>
-  );
-}
-
-function Hr({ className = "" }: { className?: string }) {
-  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
-}
-
-function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) {
-  return (
-    <div className="w-full overflow-x-auto">
-      <Image
-        src={src}
-        alt={alt}
-        className="mx-auto block max-w-none"
-        style={{ width: "auto", height: "auto" }}
-      />
-    </div>
-  );
-}
-
-function SectionShell({
-  id,
-  title,
-  children,
-  className = "",
-}: {
-  id: string;
-  title: string;
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return (
-    <section id={id} className={`scroll-mt-[120px] ${className}`}>
-      <SectionTitle>{title}</SectionTitle>
-      <div className="mt-8">{children}</div>
-    </section>
-  );
-}
-
 export default function LawIntroSection() {
-  const title = "물재이용법";
-
-  return (
-    <div className="bg-white">
-      <div className="inline-block">
-        <h2 className="relative inline-block px-2 text-[28px] font-extrabold leading-none tracking-tight text-slate-900">
-          <span className="relative z-10">{title}</span>
-          <span className="absolute bottom-[-4px] left-0 z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
+  const contentsHtml = `
+    <div class="contents-page">
+      <div class="page-title">
+        <h2>
+          <span class="title-text">물재이용법</span>
+          <span class="title-bg"></span>
         </h2>
       </div>
 
-      <div className="mt-10">
-        <SectionShell
-          id="law-plan"
-          title="법률 제·개정 및 기본계획 수립"
-          className="mt-10"
-        >
-          <ImgCard src={lawPlan} alt="법률 제·개정 및 기본계획 수립" />
-        </SectionShell>
+      <div class="sections">
+        <section id="law-plan" class="section first">
+          <div class="section-title">
+            <span class="section-bar"></span>
+            <h3>법률 제·개정 및 기본계획 수립</h3>
+          </div>
+          <div class="image-wrap">
+            <img src="/images/landing/intro/law_timeline.png" alt="법률 제·개정 및 기본계획 수립" />
+          </div>
+        </section>
 
-        <Hr className="my-11" />
+        <div class="divider"></div>
 
-        <SectionShell
-          id="plan-performance"
-          title="제2차 계획 대비 실적 현황"
-        >
-          <ImgCard src={planPerformance} alt="제2차 계획 대비 실적 현황" />
-        </SectionShell>
+        <section id="plan-performance" class="section">
+          <div class="section-title">
+            <span class="section-bar"></span>
+            <h3>제2차 계획 대비 실적 현황</h3>
+          </div>
+          <div class="image-wrap">
+            <img src="/images/landing/intro/performance_left.png" alt="제2차 계획 대비 실적 현황" />
+          </div>
+        </section>
 
-        <Hr className="my-11" />
+        <div class="divider"></div>
 
-        <SectionShell id="domestic-change" title="우리나라의 수자원 현황 및 물이용 여건">
-          <ImgCard src={domesticChange} alt="우리나라의 수자원 현황 및 물이용 여건" />
-        </SectionShell>
+        <section id="domestic-change" class="section">
+          <div class="section-title">
+            <span class="section-bar"></span>
+            <h3>우리나라의 수자원 현황 및 물이용 여건</h3>
+          </div>
+          <div class="image-wrap">
+            <img src="/images/landing/intro/domestic_textbox.png" alt="우리나라의 수자원 현황 및 물이용 여건" />
+          </div>
+        </section>
 
-        <Hr className="my-11" />
+        <div class="divider"></div>
 
-        <SectionShell
-          id="policy-history"
-          title="물 재이용 정책 변화 추이"
-        >
-          <ImgCard src={policyHistory} alt="물 재이용 정책 변화 추이" />
-        </SectionShell>
+        <section id="policy-history" class="section">
+          <div class="section-title">
+            <span class="section-bar"></span>
+            <h3>물 재이용 정책 변화 추이</h3>
+          </div>
+          <div class="image-wrap">
+            <img src="/images/landing/intro/policy_timeline.png" alt="물 재이용 정책 변화 추이" />
+          </div>
+        </section>
 
-        <Hr className="my-11" />
+        <div class="divider"></div>
 
-        <SectionShell
-          id="law-relation"
-          title="타법령과의 관계 검토"
-        >
-          <ImgCard src={lawRelation} alt="타법령과의 관계 검토" />
-        </SectionShell>
+        <section id="law-relation" class="section">
+          <div class="section-title">
+            <span class="section-bar"></span>
+            <h3>타법령과의 관계 검토</h3>
+          </div>
+          <div class="image-wrap">
+            <img src="/images/landing/intro/rel_note.png" alt="타법령과의 관계 검토" />
+          </div>
+        </section>
 
-        <Hr className="my-11" />
+        <div class="divider"></div>
 
-        <SectionShell
-          id="domestic-linkage"
-          title="주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요"
-        >
-          <ImgCard src={domesticLinkage} alt="주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요" />
-        </SectionShell>
+        <section id="domestic-linkage" class="section">
+          <div class="section-title">
+            <span class="section-bar"></span>
+            <h3>주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요</h3>
+          </div>
+          <div class="image-wrap">
+            <img src="/images/landing/intro/linkage.png" alt="주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요" />
+          </div>
+        </section>
       </div>
     </div>
+  `;
+
+  return (
+    <div
+      className="bg-white"
+      dangerouslySetInnerHTML={{ __html: contentsHtml }}
+    />
   );
-}
+}

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);
+}

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;

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<HTMLDivElement>(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 (
     <div className="card card-border !mt-6 !p-6">
-      <div ref={shadowRootRef} />
+      <div
+        className="contents-page text-[16px] leading-[1.5]"
+        dangerouslySetInnerHTML={{
+          __html: initialContent?.contsCn ?? "",
+        }}
+      />
     </div>
   );
 }

apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/htdflReg/page.tsx

@@ -160,7 +160,7 @@ export default function Home() {
           </div>
           <div className="col-span-2 max-h-full">
             <ListDiv>
-              <ScrollArea className="h-[65vh]">
+              <ScrollArea className="h-[75vh]">
                 <HtdflRegForm
                   htdflForm={htdflForm ?? ({} as customHtdflBdst)}
                   isModal={false}