물 재이용 현황, 물 재이용 사례 페이지 여백, 자간 수정

apps/dm/app/(with-layout)/example/_components/GlobalCaseSection.tsx

@@ -133,7 +133,7 @@ function ContentBlocks({
   if (!blocks?.length) return null;
 
   return (
-    <div className="mt-10 space-y-9">
+    <div className="mt-10 space-y-9 px-10">
       {blocks.map((block, index) => (
         <div key={`${block.title}-${index}`}>
           <BlockTitle>{block.title}</BlockTitle>
@@ -181,7 +181,7 @@ function DataTable({ table }: { table?: TableData }) {
   if (!table) return null;
 
   return (
-    <div className="mt-8 overflow-x-auto">
+    <div className="mt-8 px-[120px]">
       <table className="w-full min-w-[860px] border border-[#D8DDE3] text-center">
         <thead>
           <tr>
@@ -276,7 +276,7 @@ function WaterBullet() {
 
 function OverviewNoticeBox() {
   return (
-    <div className="mx-auto mt-5 max-w-[1040px] rounded-[20px] bg-[#EAF7F8] px-8 py-7">
+    <div className="mx-auto mt-5 max-w-[1000px] rounded-[20px] bg-[#EAF7F8] px-8 py-7">
       <div className="flex items-start gap-2">
         <WaterBullet />
         <div>
@@ -301,7 +301,7 @@ function OverviewNoticeBox() {
 
 function OverviewCompareTable() {
   return (
-    <div className="mx-auto mt-5 max-w-[1040px] overflow-x-auto">
+    <div className="mx-auto mt-5 max-w-[1000px] overflow-x-auto">
       <table className="w-full min-w-[760px] text-center">
         <thead>
           <tr>
@@ -357,7 +357,7 @@ function OverviewCompareTable() {
 
 function OverviewDescriptionBox() {
   return (
-    <div className="mx-auto mt-5 max-w-[1040px] rounded-[20px] bg-[#EAF7F8] px-7 py-6">
+    <div className="mx-auto mt-5 max-w-[1000px] rounded-[20px] bg-[#EAF7F8] px-7 py-6">
       <ul className="list-disc space-y-2 pl-5 text-[16px] leading-[1.7] text-[#555]">
         <li>
           전 세계적으로 물 재이용은 호주, 유럽, 아프리카, 미국 등 가뭄이 잦거나 심각한 가뭄이 발생한 국가에서 많이 이루어짐
@@ -372,7 +372,7 @@ function OverviewDescriptionBox() {
 
 function OverviewReuseRateTable() {
   return (
-    <div className="mx-auto mt-5 max-w-[1040px] overflow-x-auto">
+    <div className="mx-auto mt-5 max-w-[1000px] overflow-x-auto">
       <table className="w-full min-w-[960px] text-center">
         <thead>
           <tr>
@@ -422,7 +422,7 @@ function OverviewReuseRateTable() {
 
 function OverviewSection() {
   return (
-    <div className="mt-10">
+    <div className="mt-10 px-10">
       <div>
         <BlockTitle>주요 국가 물 재이용 계획</BlockTitle>
         <OverviewNoticeBox />

apps/dm/app/(with-layout)/example/_components/GreywaterExampleSection.tsx

@@ -31,7 +31,7 @@ type SupplyRow = {
 
 function SupplyTable({ rows }: { rows: SupplyRow[] }) {
   return (
-    <div className="mt-8 overflow-x-auto">
+    <div className="mt-8 px-10">
       <table className="w-full min-w-[860px] border border-[#D8DDE3] text-center">
         <thead>
           <tr>
@@ -78,7 +78,7 @@ function InfoList({
   treatment: string;
 }) {
   return (
-    <div className="mt-10 space-y-10">
+    <div className="mt-10 space-y-10 px-10">
       <div>
         <BlockTitle>사업명</BlockTitle>
         <ul className="mt-4 list-disc pl-8 text-16px] leading-[1.8] text-[#4F4F4F]">

apps/dm/app/(with-layout)/example/_components/RainExampleSection.tsx

@@ -37,7 +37,7 @@ function InfoList({
   details: string[];
 }) {
   return (
-    <div className="mt-10 space-y-9">
+    <div className="mt-10 space-y-9 px-10">
       <div>
         <BlockTitle>사업명</BlockTitle>
         <ul className="mt-4 list-disc pl-8 text-[16px] leading-[1.8] text-[#4F4F4F]">
@@ -159,7 +159,7 @@ export default function RainExampleSection() {
             ]}
           />
 
-          <div className="mt-9">
+          <div className="mt-9 px-10">
             <BlockTitle>사업량</BlockTitle>
 
             <RainTable

apps/dm/app/(with-layout)/example/_components/SewageExampleSection.tsx

@@ -64,7 +64,7 @@ function InfoBlock({
 
 function InfoList({ item }: { item: SewageCase }) {
   return (
-    <div className="mt-10 space-y-9">
+    <div className="mt-10 space-y-9 px-10">
       <InfoBlock title="사업명" items={[item.projectName]} />
       <InfoBlock title="사업목적" items={item.purpose} />
       <InfoBlock title="사업방식" items={item.method} />

apps/dm/app/(with-layout)/status/_components/GreywaterStatusSection.tsx

@@ -35,25 +35,43 @@ function GreywaterIntroSummary() {
     {
       icon: "/images/landing/icon_recycle.png",
       title: "지속적인 인프라 확산",
-      desc: "전국 중수도 설치 시설은 2018년 대비 약 45% 증가하여, 현재 1,000여 개소에서 물 재이용이 활발히 이뤄지고 있습니다.",
+      desc: (
+          <>
+          전국 중수도 설치 시설은 2018년 대비 약 45% 증가하여,
+          <br />
+          현재 1,000여 개소에서 물 재이용이 활발히 이뤄지고 있습니다.)
+          </>
+      ),
     },
     {
       icon: "/images/landing/icon_factory.png",
       title: "조경용수의 핵심 자원",
-      desc: "전체 중수도 이용량의 약 96%가 공업용수로 활용되어, 산업 현장에서의 상수도 의존도를 낮추는 데 크게 기여하고 있습니다.",
+      desc: (
+          <>
+          전체 중수도 이용량의 약 96%가 공업용수로 활용되어,
+          <br />
+          산업 현장에서의 상수도 의존도를 낮추는 데 크게 기여하고 있습니다.
+          </>
+      ),
     },
     {
       icon: "/images/landing/icon_faucet.png",
       title: "민간·공공의 협력",
-      desc: "공업용 외에도 청소·화장실용수로 꾸준히 사용되며 우리 생활 곳곳에서 물 자원 낭비를 막고 있습니다.",
+      desc: (
+          <>
+          공업용 외에도 청소·화장실용수로 꾸준히 사용되며
+          <br />
+          우리 생활 곳곳에서 물 자원 낭비를 막고 있습니다.
+          </>
+      ),
     },
   ];
 
   return (
-    <div className="mb-[70px] px-[60px]">
-      <div className="grid grid-cols-[1fr_400px] items-center gap-[136px]">
+    <div className="mb-[70px] px-[160px]">
+      <div className="grid grid-cols-[1fr_400px] items-center gap-[60px]">
         <div>
-          <h3 className="text-[40px] font-extrabold leading-[1.35] tracking-[-0.1em] text-neutral-900">
+          <h3 className="text-[40px] font-extrabold leading-[1.35] tracking-[-0.06em] text-neutral-900">
             건물 안에서 흐르는 또 하나의 자원,
             <br />
             <span className="inline-block bg-gradient-to-b from-[#6DBB4F] to-[#01ACE5] bg-clip-text text-transparent">
@@ -70,7 +88,7 @@ function GreywaterIntroSummary() {
 
           <div className="mt-10 space-y-8">
             {items.map((item) => (
-              <div key={item.title} className="flex gap-3">
+              <div key={item.title} className="flex gap-3 items-center">
                 <div className="mt-1 flex h-12 w-12 shrink-0 items-center justify-center">
                   <Image src={item.icon} alt="" width={48} height={48} />
                 </div>

apps/dm/app/(with-layout)/status/_components/RainStatusSection.tsx

@@ -49,11 +49,11 @@ function RainIntroSummary() {
   ];
 
   return (
-    <div className="mb-[70px] px-[60px]">
-      <div className="grid grid-cols-[1fr_400px] items-center gap-[136px]">
+    <div className="mb-[70px] px-[160px]">
+      <div className="grid grid-cols-[1fr_400px] items-center gap-[60px]">
         {/* 좌측 */}
         <div>
-          <h3 className="text-[40px] font-extrabold leading-[1.35] tracking-[-0.03em] text-neutral-900">
+          <h3 className="text-[40px] font-extrabold leading-[1.35] tracking-[-0.04em] text-neutral-900">
             기후위기 시대의 수자원 확보,
             <br />
             <span className="inline-block bg-gradient-to-b from-[#6DBB4F] to-[#01ACE5] bg-clip-text text-transparent">
@@ -62,7 +62,7 @@ function RainIntroSummary() {
             이 앞장섭니다.
           </h3>
 
-          <p className="mt-5 text-[16px] leading-[1.8] text-neutral-600">
+          <p className="mt-5 text-[16px] leading-[1.8] tracking-[-0.04em] text-neutral-600">
             2023년 기준 전국 3,500여 개 시설에서
             <br />
             연간 약 1,394만m³의 빗물을 소중한 자원으로 다시 활용하고 있습니다.
@@ -70,8 +70,8 @@ function RainIntroSummary() {
 
           <div className="mt-10 space-y-8">
             {items.map((item) => (
-              <div key={item.title} className="flex gap-3">
-                <div className="mt-1 flex h-12 w-12 shrink-0 items-center justify-center">
+              <div key={item.title} className="flex gap-3 items-center">
+                <div className="flex h-12 w-12 shrink-0 items-center justify-center">
                   <Image
                     src={item.icon}
                     alt=""

apps/dm/app/(with-layout)/status/_components/SewageStatusSection.tsx

@@ -35,26 +35,48 @@ function SewageIntroSummary() {
     {
       icon: "/images/landing/icon_cycle_water.png",
       title: "안정적인 재이용률 유지",
-      desc: "연간 약 1,136백만m³의 하수처리수가 재이용되고 있으며, 약 15%에 달하는 높은 재이용률을 통해 수자원 선순환 체계를 구축하고 있습니다.",
+      desc: (
+          <>
+          연간 약 1,136백만m³의 하수처리수가 재이용되고 있으며,
+          <br/>
+          약 15%에 달하는 높은 재이용률을 통해
+          <br/>
+          수자원 선순환 체계를 구축하고 있습니다.
+          </>
+      ),
     },
     {
       icon: "/images/landing/icon_water_flow.png",
       title: "메마른 하천을 살리는 물",
-      desc: "재이용되는 물의 가장 많은 부분이 하천유지용수로 사용되어 도심 속 하천의 생태계를 보호하고 쾌적한 수변 환경을 조성합니다.",
+      desc: (
+          <>
+          재이용되는 물의 가장 많은 부분이 하천유지용수로 사용되어
+          <br/>
+          도심 속 하천의 생태계를 보호하고 쾌적한 수변 환경을 조성합니다.
+          </>
+      ),
     },
     {
       icon: "/images/landing/icon_location.png",
       title: "지역별 균형 있는 활용",
-      desc: "전국적으로 고르게 시설이 확충되고 있으며, 특히 경기 지역을 중심으로 대규모 공업용수 공급망을 구축하여 지역 경제와 환경 보호를 동시에 실현하고 있습니다.",
+      desc: (
+          <>
+          전국적으로 고르게 시설이 확충되고 있으며, 특히 경기 지역을 중심으로
+          <br/>
+          대규모 공업용수 공급망을 구축하여
+          <br/>
+          지역 경제와 환경 보호를 동시에 실현하고 있습니다.
+          </>
+      ),
     },
   ];
 
   return (
-    <div className="mb-[70px] px-[60px]">
-      <div className="grid grid-cols-[1fr_400px] items-center gap-[136px]">
+    <div className="mb-[70px] px-[160px]">
+      <div className="grid grid-cols-[1fr_400px] items-center gap-0">
         {/* 좌측 */}
         <div>
-          <h3 className="text-[40px] font-extrabold leading-[1.35] tracking-[-0.1em] text-neutral-900">
+          <h3 className="text-[40px] font-extrabold leading-[1.35] tracking-[-0.14em] text-neutral-900">
             버려지는 하수에서 찾는 새로운 가치,
             <br />
             <span className="inline-block bg-gradient-to-b from-[#6DBB4F] to-[#01ACE5] bg-clip-text text-transparent">
@@ -71,7 +93,7 @@ function SewageIntroSummary() {
 
           <div className="mt-10 space-y-8">
             {items.map((item) => (
-              <div key={item.title} className="flex gap-4">
+              <div key={item.title} className="flex gap-4 items-center">
                 <div className="mt-1 flex h-12 w-12 shrink-0 items-center justify-center">
                   <Image
                     src={item.icon}

apps/dm/components/CaseImageSlider.tsx

@@ -113,7 +113,7 @@ export default function CaseImageSlider({
               return (
                 <div
                   key={pageIndex}
-                  className="grid min-w-full grid-cols-2 gap-3"
+                  className="grid min-w-full grid-cols-2 gap-5"
                 >
                   {pageSlides.map((slide, i) => (
                     <div