layout 정리리

apps/cm/src/entities/post/api/post-service.ts

@@ -11,9 +11,11 @@ import {
   type MyPostList,
   type PostParams,
   type MyPostParams,
+  type NoticePostParams,
   type PostFormData,
   type PostUpdateFormData,
   type PostService,
+  type NoticePostList,
 } from "../model/post-interface";
 
 export class PostApiService implements PostService {
@@ -28,6 +30,17 @@ export class PostApiService implements PostService {
     return response.data;
   }
 
+  
+  public async getNoticePostList(
+    params?: NoticePostParams,
+  ): Promise<NoticePostList> {
+    const response = await client.get<MyPostList>(
+      `${ENDPOINT.BOARD_SERVICE.POSTS}/recentPosts`,
+      { params },
+    );
+    return response.data;
+  }
+
   public async getMyPostList(
     params?: MyPostParams,
   ): Promise<MyPostList> {

apps/cm/src/entities/post/index.ts

@@ -4,11 +4,13 @@ export {
   postUpdateFormSchema,
   type Post,
   type MyPost,
+  type NoticePost,
   type MovePost,
   type DeletePost,
   type PostList,
   type PostParams,
   type MyPostParams,
+  type NoticePostParams,
   type PostFormData,
   type PostUpdateFormData,
   type PostService,

apps/cm/src/entities/post/model/post-interface.ts

@@ -12,6 +12,20 @@ export interface PostParams extends PageableParams {
   ansUseYn?: string;
 }
 
+export interface NoticePostParams extends PageableParams {
+  keywordType?: string;
+  keyword?: string;
+  bbsId?: number | null;
+  delYn?: string;
+  frDateYmd?: string;
+  toDateYmd?: string;
+}
+
+export interface NoticePost extends Post {
+  bbsNm: string;
+  bbsTypeCd: string;
+}
+
 export interface MyPostParams extends PageableParams {
   keywordType?: string;
   keyword?: string;
@@ -99,6 +113,7 @@ export const postUpdateFormSchema = postFormSchema.omit({
 
 export type PostList = PageableList<Post>;
 export type MyPostList = PageableList<MyPost>;
+export type NoticePostList = PageableList<NoticePost>;
 export type PostFormData = z.infer<typeof postFormSchema>;
 export type PostUpdateFormData = z.infer<typeof postUpdateFormSchema>;
 

apps/cm/src/pages/dashboard/lib/korea-basin-map.tsx

@@ -353,11 +353,12 @@ export function KoreaBasinMap() {
       id="stage"
       style={
         {
+          aspectRatio: 0.72/1, 
           width: "100%",
-          height: "560px",
+          maxHeight: "100%",
           position: "relative",
-          zIndex: 20,
+          margin: "auto",      
-          "--map-inset": "0",
+          "--map-inset": "0%",
         } as React.CSSProperties
       }
     >

apps/cm/src/pages/dashboard/model/table-columns.tsx

@@ -1,9 +1,9 @@
 import dayjs from "dayjs";
 import type { ColumnDef } from "@tanstack/react-table";
 import { Badge } from "@common/components";
-import type { Post, MyPost } from "@/entities/post";
+import type { MyPost, NoticePost } from "@/entities/post";
 
-const noticePostTableColumns: ColumnDef<Post>[] = [
+const noticePostTableColumns: ColumnDef<NoticePost>[] = [
   {
     header: "번호",
     cell: ({ row, table }) => {

apps/cm/src/pages/dashboard/ui/dashboard-page.tsx

@@ -137,12 +137,14 @@ function DashboardPage() {
           </div>
 
           {/* 지도영역 */}
-          <div className="col-span-3 h-200 !p-0 relative z-10">
+          <div className="col-span-3 !p-0 relative z-10" style={{ height: "765px", background: "rgba(255, 255, 255, 0.6)" }}>
-            <div className="card card-border">
+            <div className="card card-border" style={{ height: "100%" }}>
               <div className="card-header text-foreground">
                 <h3 className="text-2xl font-medium">유역별 정보</h3>
               </div>
-              <KoreaBasinMap />
+              <div id="mapArea" style={{height: "calc(100% - 20px)"}}>  
+                <KoreaBasinMap />
+              </div>
             </div>
           </div>
 

apps/cm/src/pages/dashboard/ui/fo-fclt-cnt-rt.tsx

@@ -52,7 +52,7 @@ const FoFcltCntRt: React.FC = () => {
   }, [operFcltStatus, selectedBasin]);
 
   return (
-    <div className="card card-border">
+    <div className="card card-border" style={{ height: "250px" }}>
       <div className="card-header text-foreground">
         <h3 className="text-2xl font-medium">수계별 시설운영 개소수 및 가동률</h3>
         <BasinSelect selectedBasin={selectedBasin} onValueChange={setSelectedBasin} />

apps/cm/src/pages/dashboard/ui/fo-wqlt-Infl-effl.tsx

@@ -179,7 +179,7 @@ const FoWqltInflEffl: React.FC = () => {
   };
 
   return (
-    <div className="card card-border">
+    <div className="card card-border" style={{ height: "250px" }}>
       <div className="card-header text-foreground">
         <h3 className="text-2xl font-medium">수계별 유입ㆍ방류수질 분석</h3>
         <BasinSelect  selectedBasin={selectedBasin} onValueChange={setSelectedBasin}  />

apps/cm/src/pages/dashboard/ui/notice-list.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useQuery } from "@tanstack/react-query";
+import { getCoreRowModel } from "@tanstack/react-table";
+import { PostApi, type NoticePost } from "@/entities/post";
+import { ENDPOINT } from "@/shared/config";
+import { useDataTable } from "@/shared/lib";
+import {
+  noticePostTableColumns,
+} from "../model/table-columns";
+
+
+function NoticeList() {
+    const router = useRouter();
+    const noticePostQuery = useQuery({
+        queryKey: [ENDPOINT.BOARD_SERVICE.POSTS],
+        queryFn: () =>
+        PostApi.getNoticePostList({
+            page: 0,
+            size: 5,
+            keywordType: "bbsTypeCd",
+            keyword: "BBSNOTICE",
+        }),
+    });
+
+    const handleNoticePostRowClick = (row: NoticePost) => {
+        router.push(`/bbs/bbsnotice/${row.bbsId}/${row.pstNo}`);
+    };
+
+    const { tableComponent: noticePostTableComponent } = useDataTable({
+        query: noticePostQuery,
+        tableOptions: {
+        columns: noticePostTableColumns,
+        getCoreRowModel: getCoreRowModel(),
+        },
+        dataTableOptions: {
+        variant: "line",
+        onRowClick: handleNoticePostRowClick,
+        },
+    });
+
+  return (
+    <div className="card card-border !p-0">
+      <div className="card-header !m-0 !border-none text-foreground">
+        <h3 className="text-2xl font-medium">공지사항</h3>
+      </div>
+      {noticePostTableComponent}
+    </div>
+  );
+}

apps/cm/src/pages/dashboard/ui/reuse-chart.tsx

@@ -176,7 +176,7 @@ const ReuseChart: React.FC = () => {
   };
 
   return (
-    <div className="card card-border">
+    <div className="card card-border" style={{ height: "250px" }}>
       <div className="card-header text-foreground">
         <h3 className="text-2xl font-medium">{chartItems[activeIndex]?.title}</h3>
         <Button variant="outline" size="sm" className="text-white h-8 py-0 ml-auto">더보기</Button>

apps/cm/src/pages/dashboard/ui/reuse-status.tsx

@@ -27,7 +27,7 @@ const ReuseStatus: React.FC = () => {
   };
 
   return (
-    <div className="card card-border">
+    <div className="card card-border" style={{ height: "250px" }}>
       <div className="card-header text-foreground">
         <h3 className="text-2xl font-medium">물재이용 현황 (재이용량, m³)</h3>
         <Button variant="outline" size="sm" className="text-white h-8 py-0 ml-auto">더보기</Button>

apps/cm/src/pages/dashboard/ui/sn-old-ppl.tsx

@@ -165,7 +165,7 @@ export default function SnOldPpl() {
   };
 
   return (
-    <div className="card card-border">
+    <div className="card card-border" style={{ height: "250px" }}>
       <div className="card-header text-foreground">
         <h3 className="text-2xl font-medium">노후 하수관로 현황</h3>
         <Button variant="outline" size="sm" className="text-white h-8 py-0 ml-auto">더보기</Button>

apps/cm/src/pages/dashboard/ui/sn-ppl-status.tsx

@@ -187,7 +187,7 @@ export default function SnPplStatus() {
   //const data = { labels, datasets };
 
   return (
-    <div className="card card-border">
+    <div className="card card-border" style={{ height: "250px" }}>
       <div className="card-header text-foreground">
         <h3 className="text-2xl font-medium">오수관로 및 우수관로 현황</h3>
         <Button variant="outline" size="sm" className="text-white h-8 py-0 ml-auto">더보기</Button>