layout 정리리

2025-12-11 21:02:25 +09:00
parent ac7b5d2af2
commit 5ff12b9cbb
13 changed files with 98 additions and 14 deletions
@@ -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> {
@@ -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,
@@ -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>;

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

          {/* 지도영역 */}
-          <div className="col-span-3 h-200 !p-0 relative z-10">
-            <div className="card card-border">
+          <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" 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>

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