행정지원 리스트 디자인 cs 와 통일

apps/as/src/pages/design-cnstn/model/columns.tsx

@@ -90,6 +90,12 @@ function getBadgeStateText(state: BadgeState) {
   }
 }
 
+/** 단계명을 2줄로 분리: "설치인가 신청" → ["설치인가", "신청"], "기술검토" → ["기술검토", ""] */
+function splitStepLabel(label: string) {
+  const [title = "", ...rest] = label.split(" ");
+  return { title, detail: rest.join(" ") };
+}
+
 function formatOptional(value: string | null | undefined) {
   return value?.trim() ? value : "-";
 }
@@ -106,8 +112,16 @@ function ProgressStepBadge({ prgrsSttsComCd }: ProgressStepBadgeProps) {
       {badges.map((badge, index) => (
         <Fragment key={`${badge.label}-${index}`}>
           {index > 0 && <span className="mx-2">&gt;</span>}
-          <Badge color={getBadgeColor(badge.state)}>
-            {badge.label}({getBadgeStateText(badge.state)})
+          {/* 1줄: 단계명 / 2줄: 세부단계 + 상태 (예: 설치인가 / 신청완료, 기술검토 / 완료) */}
+          <Badge
+            color={getBadgeColor(badge.state)}
+            className="flex-col justify-center !px-[20px] py-1 text-center leading-tight"
+          >
+            <span>{splitStepLabel(badge.label).title}</span>
+            <span>
+              {splitStepLabel(badge.label).detail}
+              {getBadgeStateText(badge.state)}
+            </span>
           </Badge>
         </Fragment>
       ))}

apps/as/src/pages/design-cnstn/ui/design-list-page.tsx

@@ -77,8 +77,8 @@ function DesignListPage() {
   };
 
   return (
-    <div className="space-y-4 px-[1.8rem] pb-6">
-      <section className="card card-border mx-0 bg-background">
+    <div className="card card-border !mt-6">
+      <div className="card card-border">
         <form className="flex flex-wrap items-center gap-4 p-2" onSubmit={handleSearch}>
           <div className="flex items-center gap-2">
             <Label htmlFor="sidoComCd" className="whitespace-nowrap">
@@ -145,7 +145,7 @@ function DesignListPage() {
           </div>
           <Button type="submit">조회</Button>
         </form>
-      </section>
+      </div>
 
       <DesignList
         searchParams={searchParams}

apps/as/src/pages/design-cnstn/ui/design-list.tsx

@@ -78,15 +78,15 @@ function DesignList({ searchParams, pagination, onPaginationChange }: DesignList
 
   return (
     <>
-      <section className="card card-border mx-0 bg-background pb-8 pt-0">
+      <div className="card card-border pt-0">
         <div className="card-header flex items-center justify-between">
-          <h3 className="text-2xl font-semibold">설계자문 목록</h3>
+          <h3 className="text-2xl font-medium text-label">설계자문 목록</h3>
           <Button type="button" color="green" onClick={() => setIsTaskSeDialogOpen(true)}>
             신청
           </Button>
         </div>
-        {tableComponent}
-      </section>
+        <div className="card !m-[1.2rem] !p-0">{tableComponent}</div>
+      </div>
       <PbadmsTaskApplyDialog
         open={isTaskSeDialogOpen}
         onOpenChange={setIsTaskSeDialogOpen}

apps/as/src/pages/esntl-atch-file-mng/ui/esntl-atch-file-list.tsx

@@ -136,14 +136,14 @@ function EsntlAtchFileList({
   };
 
   return (
-    <section className="card card-border mx-0 bg-background pt-0">
+    <div className="card card-border pt-0">
       <div className="card-header flex items-center justify-between">
-        <h3 className="text-2xl font-semibold">필수첨부파일 목록</h3>
+        <h3 className="text-2xl font-medium text-label">필수첨부파일 목록</h3>
         <Button type="button" color="green" onClick={handleOpenCreate}>
           등록
         </Button>
       </div>
-      {tableComponent}
+      <div className="card !m-[1.2rem] !p-0">{tableComponent}</div>
       {dialogMode ? (
         <EsntlAtchFileFormDialog
           mode={dialogMode}
@@ -159,7 +159,7 @@ function EsntlAtchFileList({
           onSubmit={handleFormSubmit}
         />
       ) : null}
-    </section>
+    </div>
   );
 }
 

apps/as/src/pages/esntl-atch-file-mng/ui/esntl-atch-file-mng-page.tsx

@@ -52,8 +52,8 @@ function EsntlAtchFileMngPage() {
   };
 
   return (
-    <div className="space-y-6 px-[1.8rem] pb-6">
-      <section className="card card-border mx-0 bg-background">
+    <div className="card card-border !mt-6">
+      <div className="card card-border">
         <form className="flex flex-wrap items-end gap-4 p-4" onSubmit={handleSearch}>
           <div className="flex flex-wrap items-center gap-3">
             <Label htmlFor="docSeComCd">문서구분</Label>
@@ -79,7 +79,7 @@ function EsntlAtchFileMngPage() {
             <Button type="submit">조회</Button>
           </div>
         </form>
-      </section>
+      </div>
 
       <EsntlAtchFileList
         searchParams={searchParams}

apps/as/src/pages/fnrs-cnsltn/model/columns.tsx

@@ -131,6 +131,12 @@ function getBadgeStateText(state: BadgeState) {
   }
 }
 
+/** 단계명을 2줄로 분리: "설치인가 신청" → ["설치인가", "신청"], "기술검토" → ["기술검토", ""] */
+function splitStepLabel(label: string) {
+  const [title = "", ...rest] = label.split(" ");
+  return { title, detail: rest.join(" ") };
+}
+
 function formatOptional(value: string | null | undefined) {
   return value?.trim() ? value : "-";
 }
@@ -148,8 +154,16 @@ function ProgressStepBadge({ prgrsSttsComCd, techRplyHstryYn }: ProgressStepBadg
       {badges.map((badge, index) => (
         <Fragment key={badge.label}>
           {index > 0 && <span className="mx-2">&gt;</span>}
-          <Badge color={getBadgeColor(badge.state)}>
-            {badge.label}({getBadgeStateText(badge.state)})
+          {/* 1줄: 단계명 / 2줄: 세부단계 + 상태 (예: 설치인가 / 신청완료, 기술검토 / 완료) */}
+          <Badge
+            color={getBadgeColor(badge.state)}
+            className="flex-col justify-center !px-[20px] py-1 text-center leading-tight"
+          >
+            <span>{splitStepLabel(badge.label).title}</span>
+            <span>
+              {splitStepLabel(badge.label).detail}
+              {getBadgeStateText(badge.state)}
+            </span>
           </Badge>
         </Fragment>
       ))}

apps/as/src/pages/fnrs-cnsltn/ui/fnrs-list-page.tsx

@@ -77,8 +77,8 @@ function FnrsListPage() {
   };
 
   return (
-    <div className="space-y-4 px-[1.8rem] pb-6">
-      <section className="card card-border mx-0 bg-background">
+    <div className="card card-border !mt-6">
+      <div className="card card-border">
         <form className="flex flex-wrap items-center gap-4 p-2" onSubmit={handleSearch}>
           <div className="flex items-center gap-2">
             <Label htmlFor="sidoComCd" className="whitespace-nowrap">
@@ -145,7 +145,7 @@ function FnrsListPage() {
           </div>
           <Button type="submit">조회</Button>
         </form>
-      </section>
+      </div>
 
       <FnrsList
         searchParams={searchParams}

apps/as/src/pages/fnrs-cnsltn/ui/fnrs-list.tsx

@@ -78,15 +78,15 @@ function FnrsList({ searchParams, pagination, onPaginationChange }: FnrsListProp
 
   return (
     <>
-      <section className="card card-border mx-0 bg-background pb-8 pt-0">
+      <div className="card card-border pt-0">
         <div className="card-header flex items-center justify-between">
-          <h3 className="text-2xl font-semibold">재원협의 목록</h3>
+          <h3 className="text-2xl font-medium text-label">재원협의 목록</h3>
           <Button type="button" color="green" onClick={() => setIsTaskSeDialogOpen(true)}>
             신청
           </Button>
         </div>
-        {tableComponent}
-      </section>
+        <div className="card !m-[1.2rem] !p-0">{tableComponent}</div>
+      </div>
       <PbadmsTaskApplyDialog
         open={isTaskSeDialogOpen}
         onOpenChange={setIsTaskSeDialogOpen}

apps/as/src/pages/instl-sncn/model/columns.tsx

@@ -132,6 +132,12 @@ function getBadgeStateText(state: BadgeState) {
   }
 }
 
+/** 단계명을 2줄로 분리: "설치인가 신청" → ["설치인가", "신청"], "기술검토" → ["기술검토", ""] */
+function splitStepLabel(label: string) {
+  const [title = "", ...rest] = label.split(" ");
+  return { title, detail: rest.join(" ") };
+}
+
 function formatOptional(value: string | null | undefined) {
   return value?.trim() ? value : "-";
 }
@@ -149,8 +155,16 @@ function ProgressStepBadge({ prgrsSttsComCd, techRplyHstryYn }: ProgressStepBadg
       {badges.map((badge, index) => (
         <Fragment key={badge.label}>
           {index > 0 && <span className="mx-2">&gt;</span>}
-          <Badge color={getBadgeColor(badge.state)}>
-            {badge.label}({getBadgeStateText(badge.state)})
+          {/* 1줄: 단계명 / 2줄: 세부단계 + 상태 (예: 설치인가 / 신청완료, 기술검토 / 완료) */}
+          <Badge
+            color={getBadgeColor(badge.state)}
+            className="flex-col justify-center !px-[20px] py-1 text-center leading-tight"
+          >
+            <span>{splitStepLabel(badge.label).title}</span>
+            <span>
+              {splitStepLabel(badge.label).detail}
+              {getBadgeStateText(badge.state)}
+            </span>
           </Badge>
         </Fragment>
       ))}

apps/as/src/pages/instl-sncn/ui/instl-list-page.tsx

@@ -77,8 +77,8 @@ function InstlListPage() {
   };
 
   return (
-    <div className="space-y-4 px-[1.8rem] pb-6">
-      <section className="card card-border mx-0 bg-background">
+    <div className="card card-border !mt-6">
+      <div className="card card-border">
         <form className="flex flex-wrap items-center gap-4 p-2" onSubmit={handleSearch}>
           <div className="flex items-center gap-2">
             <Label htmlFor="sidoComCd" className="whitespace-nowrap">
@@ -145,7 +145,7 @@ function InstlListPage() {
           </div>
           <Button type="submit">조회</Button>
         </form>
-      </section>
+      </div>
 
       <InstlList
         searchParams={searchParams}

apps/as/src/pages/instl-sncn/ui/instl-list.tsx

@@ -82,15 +82,15 @@ function InstlList({ searchParams, pagination, onPaginationChange }: InstlListPr
 
   return (
     <>
-      <section className="card card-border mx-0 bg-background pb-8 pt-0">
+      <div className="card card-border pt-0">
         <div className="card-header flex items-center justify-between">
-          <h3 className="text-2xl font-semibold">설치인가 목록</h3>
+          <h3 className="text-2xl font-medium text-label">설치인가 목록</h3>
           <Button type="button" color="green" onClick={handleRegisterClick}>
             신청
           </Button>
         </div>
-        {tableComponent}
-      </section>
+        <div className="card !m-[1.2rem] !p-0">{tableComponent}</div>
+      </div>
       <PbadmsTaskApplyDialog
         open={isTaskSeDialogOpen}
         onOpenChange={setIsTaskSeDialogOpen}

apps/as/src/pages/my-pbadms-sprt/ui/my-pbadms-sprt-list-page.tsx

@@ -89,8 +89,8 @@ function MyPbadmsSprtListPage() {
   };
 
   return (
-    <div className="space-y-4 px-[1.8rem] pb-6">
-      <section className="card card-border mx-0 bg-background">
+    <div className="card card-border !mt-6">
+      <div className="card card-border">
         <form className="flex flex-wrap items-center gap-4 p-2" onSubmit={handleSearch}>
           <div className="flex items-center gap-2">
             <Label className="whitespace-nowrap">기간</Label>
@@ -157,7 +157,7 @@ function MyPbadmsSprtListPage() {
 
           <Button type="submit">검색</Button>
         </form>
-      </section>
+      </div>
 
       <MyPbadmsSprtList
         searchParams={searchParams}

apps/as/src/pages/my-pbadms-sprt/ui/my-pbadms-sprt-list.tsx

@@ -77,12 +77,12 @@ function MyPbadmsSprtList({ searchParams, pagination, onPaginationChange }: MyPb
   });
 
   return (
-    <section className="card card-border mx-0 bg-background pb-8 pt-0">
+    <div className="card card-border pt-0">
       <div className="card-header flex items-center justify-between">
-        <h3 className="text-2xl font-semibold">내 신청 목록</h3>
+        <h3 className="text-2xl font-medium text-label">내 신청 목록</h3>
       </div>
-      {tableComponent}
-    </section>
+      <div className="card !m-[1.2rem] !p-0">{tableComponent}</div>
+    </div>
   );
 }
 

apps/as/src/pages/nti-hstry/ui/nti-hstry-list-page.tsx

@@ -71,8 +71,8 @@ function NtiHstryListPage() {
   };
 
   return (
-    <div className="space-y-4 px-[1.8rem] pb-6">
-      <section className="card card-border mx-0 bg-background">
+    <div className="card card-border !mt-6">
+      <div className="card card-border">
         <form className="flex flex-wrap items-center gap-4 p-2" onSubmit={handleSearch}>
           <div className="flex items-center gap-2">
             <Label className="whitespace-nowrap">기간</Label>
@@ -114,7 +114,7 @@ function NtiHstryListPage() {
 
           <Button type="submit">검색</Button>
         </form>
-      </section>
+      </div>
 
       <NtiHstryList
         searchParams={searchParams}

apps/as/src/pages/nti-hstry/ui/nti-hstry-list.tsx

@@ -103,12 +103,12 @@ function NtiHstryList({ searchParams, pagination, onPaginationChange }: NtiHstry
   });
 
   return (
-    <section className="card card-border mx-0 bg-background pb-8 pt-0">
+    <div className="card card-border pt-0">
       <div className="card-header flex items-center justify-between">
-        <h3 className="text-2xl font-semibold">알림 이력 목록</h3>
+        <h3 className="text-2xl font-medium text-label">알림 이력 목록</h3>
       </div>
-      {tableComponent}
-    </section>
+      <div className="card !m-[1.2rem] !p-0">{tableComponent}</div>
+    </div>
   );
 }
 

apps/as/src/pages/sewer-bsc-plan/model/columns.tsx

@@ -130,6 +130,12 @@ function getBadgeStateText(state: BadgeState) {
   }
 }
 
+/** 단계명을 2줄로 분리: "설치인가 신청" → ["설치인가", "신청"], "기술검토" → ["기술검토", ""] */
+function splitStepLabel(label: string) {
+  const [title = "", ...rest] = label.split(" ");
+  return { title, detail: rest.join(" ") };
+}
+
 function formatOptional(value: string | undefined) {
   return value?.trim() ? value : "-";
 }
@@ -147,8 +153,16 @@ function ProgressStepBadge({ prgrsSttsComCd, techRplyHstryYn }: ProgressStepBadg
       {badges.map((badge, index) => (
         <Fragment key={`${badge.label}-${index}`}>
           {index > 0 && <span className="mx-2">&gt;</span>}
-          <Badge color={getBadgeColor(badge.state)}>
-            {badge.label}({getBadgeStateText(badge.state)})
+          {/* 1줄: 단계명 / 2줄: 세부단계 + 상태 (예: 설치인가 / 신청완료, 기술검토 / 완료) */}
+          <Badge
+            color={getBadgeColor(badge.state)}
+            className="flex-col justify-center !px-[20px] py-1 text-center leading-tight"
+          >
+            <span>{splitStepLabel(badge.label).title}</span>
+            <span>
+              {splitStepLabel(badge.label).detail}
+              {getBadgeStateText(badge.state)}
+            </span>
           </Badge>
         </Fragment>
       ))}

apps/as/src/pages/sewer-bsc-plan/ui/sewer-bsc-plan-list-page.tsx

@@ -81,8 +81,8 @@ function SewerBscPlanListPage() {
   };
 
   return (
-    <div className="space-y-4 px-[1.8rem] pb-6">
-      <section className="card card-border mx-0 bg-background">
+    <div className="card card-border !mt-6">
+      <div className="card card-border">
         <form className="flex flex-wrap items-center gap-4 p-2" onSubmit={handleSearch}>
           <div className="flex items-center gap-2">
             <Label htmlFor="sidoComCd" className="whitespace-nowrap">
@@ -165,7 +165,7 @@ function SewerBscPlanListPage() {
           </div>
           <Button type="submit">조회</Button>
         </form>
-      </section>
+      </div>
 
       <SewerBscPlanList
         searchParams={searchParams}

apps/as/src/pages/sewer-bsc-plan/ui/sewer-bsc-plan-list.tsx

@@ -85,15 +85,15 @@ function SewerBscPlanList({ searchParams, pagination, onPaginationChange }: Sewe
 
   return (
     <>
-      <section className="card card-border mx-0 bg-background pb-8 pt-0">
+      <div className="card card-border pt-0">
         <div className="card-header flex items-center justify-between">
-          <h3 className="text-2xl font-semibold">하수도기본계획 목록</h3>
+          <h3 className="text-2xl font-medium text-label">하수도기본계획 목록</h3>
           <Button type="button" color="green" onClick={() => setIsApplyDialogOpen(true)}>
             신청
           </Button>
         </div>
-        {tableComponent}
-      </section>
+        <div className="card !m-[1.2rem] !p-0">{tableComponent}</div>
+      </div>
       <SewerBscPlanApplyDialog
         open={isApplyDialogOpen}
         onOpenChange={setIsApplyDialogOpen}