Merge branch 'main' of https://www.onasys.co.kr:3000/ONAANDALL/frontend into iipbs_cs

README.md

@@ -110,15 +110,15 @@ const nextConfig: NextConfig = {
             {
               type: "header",
               key: "referer",
-              value: "(.*)/pst(.*)",
+              value: "(.*)/cms(.*)",
             },
           ],
         },
       ],
       afterFiles: [
         {
-          source: "/pst/:path*",
-          destination: `${subDomain}/pst/:path*`,
+          source: "/cms/:path*",
+          destination: `${subDomain}/cms/:path*`,
         },
       ],
       fallback: [],
@@ -127,6 +127,7 @@ const nextConfig: NextConfig = {
 };
 
 export default nextConfig;
+
 ```
 
 ### 6. globals.css(또는 전역 css) 수정
@@ -150,6 +151,26 @@ rm -rf node_modules pnpm-lock.yaml
 pnpm install
 ```
 
+### 8.  로그아웃 처리 가이드
+
+ * 참고 파일
+  - apps/cs/app/api/auth/logout/route.ts
+  - packages/common/components/src/ui/header/index.tsx (55-65 line)
+
+각 서비스 폴더에 ‘/app/api/auth/logout/route.ts’ 생성해야 합니다(코드는 cs에서 확인).
+
+** 로그아웃 처리되면 ‘/auth/login’ 페이지로 이동됩니다.
+
+### 9.  'SITE_ID’ 환경변수를 쿠키로 대체하는 가이드(공통 모듈 사용하기위한 필수 사항)
+
+  * 참고 파일: apps/cs/src/shared/api/client.ts  (쿠키 저장 처리)
+              apps/cs/src/shared/lib/cookie.ts  (쿠키 공통 모듈)
+
+   `SITE_ID` 환경변수를 처음 사용하는 파일 또는 최상단 클라이언트 컴포넌트에서 “site-id-key” 쿠키에 `SITE_ID` 저장
+   
+
+
+
 ## 기술 스택
 
 - React(^18)

apps/common/features/src/widgets/post/ui/post-action.tsx

@@ -1,8 +1,8 @@
 import { useRouter, usePathname } from "next/navigation";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import { Button } from "@common/components";
-import { useMenuStore, useUserStore } from "@/shared/lib";
 import { AuthorityButton } from "@/entities/menu-authority";
+import { useMenuStore, useUserStore } from "@/shared/lib";
 
 type PostActionProps = {
   registerId?: string;

apps/cs/app/(with-base-layout)/apilog/page.tsx

@@ -0,0 +1,2 @@
+import { ApiLogPage } from "@/pages/apilog";
+export default ApiLogPage;

apps/cs/app/(with-base-layout)/privacylog/page.tsx

@@ -0,0 +1,2 @@
+import { PrivacyLogPage } from "@/pages/privacylog";
+export default PrivacyLogPage;

apps/cs/middleware.ts

@@ -7,11 +7,16 @@ const serverApiUrl =
 export function middleware(req: NextRequest) {
   const pathname = req.nextUrl.pathname;
   const searchParams = req.nextUrl.searchParams;
+  
 
   if (pathname.startsWith("/server")) {
-    const queryParams = searchParams.toString();
+    
+    const decodedParams = Array.from(searchParams.entries())
+    .map(([key, value]) => `${key}=${decodeURIComponent(value)}`)
+    .join("&");
+
     const newUrl = `${serverApiUrl}${pathname.replace("/server", "")}${
-      queryParams ? `?${queryParams}` : ""
+      decodedParams ? `?${decodedParams}` : ""
     }`;
     return NextResponse.rewrite(new URL(newUrl));
   }

apps/cs/src/entities/apilog/api/apilog-service.ts

@@ -0,0 +1,20 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type {
+  ApiLogList,
+  ApiLogParams,
+  ApiLogService,
+} from "../model/apilog-interface";
+
+export class ApiLogApiService implements ApiLogService {
+  public async getApiLogList(params: ApiLogParams): Promise<ApiLogList> {
+    const response = await client.get<ApiLogList>(
+      `${ENDPOINT.USER_SERVICE.APILOG}`,
+      { params },
+    );
+    return response.data;
+  }
+
+}
+
+export const ApiLogApi = new ApiLogApiService();

apps/cs/src/entities/apilog/index.ts

@@ -0,0 +1,6 @@
+export { ApiLogApi } from "./api/apilog-service";
+export type {
+  ApiLog,
+  ApiLogParams,
+} from "./model/apilog-interface";
+

apps/cs/src/entities/apilog/model/apilog-interface.ts

@@ -0,0 +1,30 @@
+import type { PageableList, PageableParams } from "@/shared/model";
+
+export interface ApiLogParams extends PageableParams {
+  siteId?: string;
+  userId?: string;
+  userNm?: string;
+  apiHttpPmhd?: string;
+  dmndUrl?: string;
+  ipAddr?: string;
+  dmndDtStart?: string;
+  dmndDtEnd?: string;
+}
+
+export interface ApiLog {
+  logId: string;
+  siteId: string;
+  siteNm: string;
+  userId: string;
+  userNm: string;
+  apiHttpPmhd: string;
+  dmndUrl: string;
+  ipAddr: string;
+  dmndDt: string;
+}
+
+export type ApiLogList = PageableList<ApiLog>;
+
+export interface ApiLogService {
+  getApiLogList: (params: ApiLogParams) => Promise<ApiLogList>;
+}

apps/cs/src/entities/loginlog/api/loginlog-service.ts

@@ -1,7 +1,6 @@
 import { client } from "@/shared/api";
 import { ENDPOINT } from "@/shared/config";
 import type {
-  LoginlogInfo,
   LoginlogList,
   LoginlogParams,
   LoginlogService,
@@ -16,12 +15,6 @@ export class LoginlogApiService implements LoginlogService {
     return response.data;
   }
 
-  public async getLoginlogInfo(lgnSn: string): Promise<LoginlogInfo> {
-    const response = await client.get<LoginlogInfo>(
-      `${ENDPOINT.USER_SERVICE.LOGINLOG}/${lgnSn}`,
-    );
-    return response.data;
-  }
 }
 
 export const LoginlogApi = new LoginlogApiService();

apps/cs/src/entities/loginlog/index.ts

@@ -1,5 +1,6 @@
-export { LoginlogApiService } from "./api/loginlog-service";
+export { LoginlogApi } from "./api/loginlog-service";
 export type {
   Loginlog,
   LoginlogParams,
 } from "./model/loginlog-interface";
+

apps/cs/src/entities/loginlog/model/loginlog-interface.ts

@@ -1,37 +1,29 @@
 import type { PageableList, PageableParams } from "@/shared/model";
 
 export interface LoginlogParams extends PageableParams {
-  lgnSn?: string;
-  userId?: string;
   siteId?: string;
+  userId?: string;
+  errOcrnYn?: string;
+  remoteIp?: string;
+  lgnMthd?: string;
+  lgnErrCd?: string;
+  searchDateFrom?: string;
+  searchDateTo?: string;
 }
 
 export interface Loginlog {
-  lgnSn: string;
-  lgnDt: string;
-  userId: string;  
-  lgnIp: string;  
-  lgnMethodCd: string;  
-  errOcrnYn: string;  
-  lgnErrCd: string;  
+  id: string;
   siteId: string;
-}
-
-export interface LoginlogInfo {
-  lgnSn: string;
-  lgnDt: string;
   userId: string;  
-  lgnIp: string;  
-  lgnMethodCd: string;  
   errOcrnYn: string;  
+  remoteIp: string;  
+  lgnMthd: string;  
   lgnErrCd: string;  
-  siteId: string;
+  lgnDt: string;  
 }
 
 export type LoginlogList = PageableList<Loginlog>;
 
 export interface LoginlogService {
-  getLoginlogList: (params: LoginlogParams) => Promise<LoginlogList>;
-  getLoginlogInfo: (lgnSn: string) => Promise<LoginlogInfo>;
-  
+  getLoginlogList: (params: LoginlogParams) => Promise<LoginlogList>; 
 }

apps/cs/src/entities/privacylog/api/privacylog-service.ts

@@ -0,0 +1,20 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type {
+  PrivacyLogList,
+  PrivacyLogParams,
+  PrivacyLogService,
+} from "../model/privacylog-interface";
+
+export class PrivacyLogPrivacyService implements PrivacyLogService {
+  public async getPrivacyLogList(params: PrivacyLogParams): Promise<PrivacyLogList> {
+    const response = await client.get<PrivacyLogList>(
+      `${ENDPOINT.USER_SERVICE.PRIVACYLOG}`,
+      { params },
+    );
+    return response.data;
+  }
+
+}
+
+export const PrivacyLogPrivacy = new PrivacyLogPrivacyService();

apps/cs/src/entities/privacylog/index.ts

@@ -0,0 +1,6 @@
+export { PrivacyLogPrivacy } from "./api/privacylog-service";
+export type {
+  PrivacyLog,
+  PrivacyLogParams,
+} from "./model/privacylog-interface";
+

apps/cs/src/entities/privacylog/model/privacylog-interface.ts

@@ -0,0 +1,27 @@
+import type { PageableList, PageableParams } from "@/shared/model";
+
+export interface PrivacyLogParams extends PageableParams {
+  siteId?: string;
+  rqstrIp?: string;
+  inqInfoKeywordType?: string;
+  inqInfoKeyword?: string;
+  inqDtStart?: string;
+  inqDtEnd?: string;
+}
+
+export interface PrivacyLog {
+  inqSn: number;
+  siteId: string;
+  siteNm: string;  
+  inqDt: string;  
+  rqstrIp: string;  
+  rqstrId: string;  
+  rqstrNm: string;  
+  inqInfoSummary: string;  
+}
+
+export type PrivacyLogList = PageableList<PrivacyLog>;
+
+export interface PrivacyLogService {
+  getPrivacyLogList: (params: PrivacyLogParams) => Promise<PrivacyLogList>; 
+}

apps/cs/src/pages/apilog/index.ts

@@ -0,0 +1 @@
+export { ApiLogPage } from "./ui/apilog-page";

apps/cs/src/pages/apilog/model/table-columns.tsx

@@ -0,0 +1,59 @@
+import dayjs from "dayjs";
+import type { ColumnDef } from "@tanstack/react-table";
+import type { ApiLog } from "@/entities/apilog";
+
+
+export const columns: ColumnDef<ApiLog>[] = [
+  {
+    id: "no",
+    header: "NO",
+    cell: ({ row, table }) => {
+      const totalRows = table.getRowCount();
+      const { pageIndex, pageSize } = table.getState().pagination;
+      return totalRows - (pageIndex * pageSize + row.index);
+    },
+  },
+  {
+    accessorKey: "dmndDt",
+    header: "요청일시",
+    cell: ({ row }) => {
+      const date = dayjs(row.original.dmndDt);
+      return date.format("YYYY-MM-DD HH:mm:ss");
+    },
+  },  
+  {
+    accessorKey: "userId",
+    header: "사용자ID",
+  },
+  {
+    accessorKey: "ipAddr",
+    header: "요청IP",
+  },  
+  {
+    accessorKey: "apiHttpPmhd",
+    header: "요청방식",
+    cell: ({ row }) => {
+      const val = row.original.apiHttpPmhd;
+      if (val === "POST") {
+        return "저장";
+      } else if (val === "PUT") {
+        return "수정";
+      } else if (val === "DELETE") {
+        return "삭제";
+      } else if (val === "GET") {
+        return "조회";
+      } else  {
+        return "기타";
+      }
+    },
+  },
+  {
+    accessorKey: "dmndUrl",
+    header: "요청URL",
+  },
+  {
+    accessorKey: "siteId",
+    header: "사이트ID",
+  }
+];
+

apps/cs/src/pages/apilog/ui/apilog-page.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import dayjs from "dayjs";
+import { useState } from "react";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
+import {
+  Button,
+  DateRangePicker,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@common/components";
+import { ApiLogApi } from "@/entities/apilog";
+import { type ApiLogParams } from "@/entities/apilog/model/apilog-interface";
+import { useDataTable } from "@/shared/lib";
+import { ENDPOINT } from "@/shared/config";
+import { columns } from "@/pages/apilog/model/table-columns";
+
+type DateRange = {
+  from: Date | undefined;
+  to?: Date | undefined;
+};
+
+function ApiLogPage({}) {
+  // 1주일 전부터 오늘까지 기본 날짜 설정
+  const defaultDateRange: DateRange = {
+    from: dayjs().subtract(7, "day").toDate(),
+    to: dayjs().toDate(),
+  };
+
+  const [dateRange, setDateRange] = useState<DateRange>(defaultDateRange);
+
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+
+  const [loginlogPostQuery, setLoginlogPostQuery] = useState<ApiLogParams>({
+    userId: "",
+    siteId: "",
+    apiHttpPmhd: "",
+    dmndUrl: "",
+    ipAddr: "",
+    dmndDtStart: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
+    dmndDtEnd: dayjs().format("YYYY-MM-DD"),
+    sort: "lgnDt,asc",
+  });
+
+  const query = useQuery({
+    queryKey: [ENDPOINT.USER_SERVICE.LOGINLOG, pagination],
+    queryFn: () =>
+      ApiLogApi.getApiLogList({
+        ...loginlogPostQuery,
+        page: pagination.pageIndex,
+        size: pagination.pageSize,
+      }),
+    placeholderData: keepPreviousData,
+  });
+
+  const { tableComponent, tableInstance: table } = useDataTable({
+    query,
+    tableOptions: {
+      columns,
+      state: {
+        pagination,
+      },
+      manualPagination: true,
+      enableMultiRowSelection: true,
+      getCoreRowModel: getCoreRowModel(),
+      onPaginationChange: setPagination,
+    },
+    dataTableOptions: {
+      viewPagination: true,
+    },
+  });
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    query.refetch();
+  };
+
+  const handleLoginlogParamsChange =
+    (key: keyof ApiLogParams) => (value: unknown) => {
+      setLoginlogPostQuery({ ...loginlogPostQuery, [key]: value });
+    };
+
+  const handlePresetDateRange = (value: string) => {
+    let presetDateRange: DateRange | undefined;
+    switch (value) {
+      case "1W":
+        presetDateRange = {
+          from: dayjs().subtract(7, "day").toDate(),
+          to: dayjs().toDate(),
+        };
+        break;
+      case "1M":
+        presetDateRange = {
+          from: dayjs().subtract(30, "day").toDate(),
+          to: dayjs().toDate(),
+        };
+        break;
+      case "3M":
+        presetDateRange = {
+          from: dayjs().subtract(90, "day").toDate(),
+          to: dayjs().toDate(),
+        };
+        break;
+      default:
+        presetDateRange = undefined;
+    }
+    handleDateRangeChange(presetDateRange);
+  };
+
+  const handleDateRangeChange = (value: DateRange | undefined) => {
+    setDateRange(value || defaultDateRange);
+    setLoginlogPostQuery({
+      ...loginlogPostQuery,
+      dmndDtStart:
+        dayjs(value?.from).format("YYYY-MM-DD") ??
+        dayjs().subtract(7, "day").format("YYYY-MM-DD"),
+      dmndDtEnd:
+        dayjs(value?.to).format("YYYY-MM-DD") ?? dayjs().format("YYYY-MM-DD"),
+    });
+  };
+
+  return (
+    <div className="flex-1">
+      <div className="card card-border">
+        <form onSubmit={handleSubmit} className="flex items-center gap-2 p-2">
+          <Label className="mr-2">조회기간</Label>
+          <DateRangePicker
+            value={dateRange}
+            onValueChange={handleDateRangeChange}
+          >
+            <div className="card card-border flex items-center gap-2">
+              <Select onValueChange={handlePresetDateRange}>
+                <SelectTrigger>
+                  <SelectValue placeholder="기간 선택" className="w-[24rem]" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="1W">일주일</SelectItem>
+                  <SelectItem value="1M">1개월</SelectItem>
+                  <SelectItem value="3M">3개월</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </DateRangePicker>
+          <Label className="ml-4 mr-2 text-label">사용자ID</Label>
+          <Input
+            className="h-[3.2rem] w-[20rem] rounded-sm !text-[1.3rem]"
+            value={loginlogPostQuery.userId}
+            onChange={(e) =>
+              handleLoginlogParamsChange("userId")(e.target.value)
+            }
+          />
+          <Label className="ml-4 mr-2 text-label">상태</Label>
+          <Select onValueChange={handleLoginlogParamsChange("apiHttpPmhd")}>
+            <SelectTrigger className="w-[10rem]">
+              <SelectValue placeholder="선택" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="GET">조회</SelectItem>
+              <SelectItem value="POST">저장</SelectItem>
+              <SelectItem value="PUT">수정</SelectItem>
+              <SelectItem value="DELETE">삭제</SelectItem>
+            </SelectContent>
+          </Select>
+          <Button className="h-[3.2rem]" type="submit">
+            조회
+          </Button>
+        </form>
+      </div>
+      <div className="card card-border">
+        <div className="card-header">
+          <div className="flex w-full items-center justify-between">
+            <h3 className="text-2xl font-medium text-label">로그인로그 목록</h3>
+            <div className="flex gap-2">
+              <Select
+                value={table.getState().pagination.pageSize.toString()}
+                onValueChange={(value) => {
+                  table.setPageSize(parseInt(value));
+                }}
+              >
+                <SelectTrigger className="h-[3.2rem] w-[12rem]">
+                  <SelectValue placeholder="페이지 크기" />
+                </SelectTrigger>
+                <SelectContent>
+                  {[10, 20, 30, 40, 50].map((pageSize) => (
+                    <SelectItem key={pageSize} value={pageSize.toString()}>
+                      {pageSize}개씩 보기
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </div>
+        <div className="card !m-[1.2rem] !p-0">{tableComponent}</div>
+      </div>
+    </div>
+  );
+}
+
+export { ApiLogPage };

apps/cs/src/pages/image/ui/image-page.tsx

@@ -26,7 +26,10 @@ function ImagePage() {
 
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
   const [postingTargets, setPostingTargets] = useState<PostingTarget[]>([]);
-  const [imageQuery, setImageQuery] = useState<ImageParams>({ keyword: "" });
+  const [imageQuery, setImageQuery] = useState<ImageParams>({
+     keyword: "" ,
+     sort:"regDt,desc"
+  });
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
     pageSize: 5,

apps/cs/src/pages/loginlog/model/table-columns.tsx

@@ -18,7 +18,7 @@ export const columns: ColumnDef<Loginlog>[] = [
     header: "등록일",
     cell: ({ row }) => {
       const date = dayjs(row.original.lgnDt);
-      return date.format("YYYY-MM-DD HH24:mi:ss");
+      return date.format("YYYY-MM-DD HH:mm:ss");
     },
   },  
   {
@@ -26,24 +26,24 @@ export const columns: ColumnDef<Loginlog>[] = [
     header: "사용자ID",
   },
   {
-    accessorKey: "로그인IP",
-    header: "remoteIp",
+    accessorKey: "remoteIp",
+    header: "로그인IP",
   },  
   {
     accessorKey: "lgnMthd",
     header: "접속방식",
   },
   {
-    accessorKey: "오류여부",
-    header: "errOcrnYn",
+    accessorKey: "errOcrnYn",
+    header: "오류여부",
   },
   {
-    accessorKey: "오류코드",
-    header: "lgnErrCd",
+    accessorKey: "lgnErrCd",
+    header: "오류코드",
   },
   {
-    accessorKey: "사이트ID",
-    header: "siteId",
+    accessorKey: "siteId",
+    header: "사이트ID",
   }
 ];
 

apps/cs/src/pages/loginlog/ui/loginlog-page.tsx

@@ -1,88 +1,227 @@
 "use client";
 
+import dayjs from "dayjs";
 import { useState } from "react";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
 import {
-  getCoreRowModel,
-  useReactTable,
-  type PaginationState,
-} from "@tanstack/react-table";
-import { Button, DataTable, Input, Label } from "@common/components";
-import { LoginlogApi} from "../../../entities/loginlog/api/loginlog-service";
-import { type LoginlogParams} from "../../../entities/loginlog/model/loginlog-interface";
-  
+  Button,
+  DateRangePicker,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  LoadingWithImage,
+} from "@common/components";
+import { LoginlogApi } from "@/entities/loginlog";
+import { type LoginlogParams } from "@/entities/loginlog/model/loginlog-interface";
+import { useDataTable } from "@/shared/lib";
 import { ENDPOINT } from "@/shared/config";
-import { columns } from "../model/table-columns";
+import { columns } from "@/pages/loginlog/model/table-columns";
 
-type LoginlogPageProps = {
-  lgnSn?: string;
+type DateRange = {
+  from: Date | undefined;
+  to?: Date | undefined;
 };
 
-function LoginlogPage({  }: LoginlogPageProps) {
-  const [loginlogQuery, setLoginlogQuery] = useState<LoginlogParams>({
-    userId: "",
-    siteId: "",
-  });
+function LoginlogPage({}) {
+  // 1주일 전부터 오늘까지 기본 날짜 설정
+  const defaultDateRange: DateRange = {
+    from: dayjs().subtract(7, "day").toDate(),
+    to: dayjs().toDate(),
+  };
+
+  const [dateRange, setDateRange] = useState<DateRange>(defaultDateRange);
+  const [isManualLoading, setIsManualLoading] = useState(false);
+
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
     pageSize: 10,
   });
 
-  const { data: loginlogList, refetch } = useQuery({
-    queryKey: [ENDPOINT.USER_SERVICE.LOGINLOG, , pagination],
-    queryFn: () =>
-      LoginlogApi.getLoginlogList({
-        ...loginlogQuery,
-            page: pagination.pageIndex,
-        size: pagination.pageSize,
-      }),
-        placeholderData: keepPreviousData,
+  const [loginlogPostQuery, setLoginlogPostQuery] = useState<LoginlogParams>({
+    userId: "",
+    siteId: "",
+    errOcrnYn: "N",
+    remoteIp: "",
+    lgnMthd: "",
+    lgnErrCd: "",
+    searchDateFrom: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
+    searchDateTo: dayjs().format("YYYY-MM-DD"),
+    sort: "lgnDt,desc",
   });
 
-  const table = useReactTable({
-    data: loginlogList?.content ?? [],
-    columns,
-    rowCount: loginlogList?.totalElements ?? 0,
-    state: { pagination },
-    manualPagination: true,
-    enableMultiRowSelection: false,
-    getCoreRowModel: getCoreRowModel(),
-    onPaginationChange: setPagination,
+  const query = useQuery({
+    queryKey: [ENDPOINT.USER_SERVICE.LOGINLOG, pagination],
+    queryFn: () =>
+      LoginlogApi.getLoginlogList({
+        ...loginlogPostQuery,
+        page: pagination.pageIndex,
+        size: pagination.pageSize,
+      }),
+    placeholderData: keepPreviousData,
+  });
+
+  const { tableComponent, tableInstance: table } = useDataTable({
+    query,
+    tableOptions: {
+      columns,
+      state: {
+        pagination,
+      },
+      manualPagination: true,
+      enableMultiRowSelection: true,
+      getCoreRowModel: getCoreRowModel(),
+      onPaginationChange: setPagination,
+    },
+    dataTableOptions: {
+      viewPagination: true,
+    },
   });
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    refetch();
+    setIsManualLoading(true);
+    query.refetch().finally(() => {
+      setIsManualLoading(false);
+    });
+  };
+
+  const handleLoginlogParamsChange =
+    (key: keyof LoginlogParams) => (value: unknown) => {
+      setLoginlogPostQuery({ ...loginlogPostQuery, [key]: value });
+    };
+
+  const handlePresetDateRange = (value: string) => {
+    let presetDateRange: DateRange | undefined;
+    switch (value) {
+      case "1W":
+        presetDateRange = {
+          from: dayjs().subtract(7, "day").toDate(),
+          to: dayjs().toDate(),
+        };
+        break;
+      case "1M":
+        presetDateRange = {
+          from: dayjs().subtract(30, "day").toDate(),
+          to: dayjs().toDate(),
+        };
+        break;
+      case "3M":
+        presetDateRange = {
+          from: dayjs().subtract(90, "day").toDate(),
+          to: dayjs().toDate(),
+        };
+        break;
+      default:
+        presetDateRange = undefined;
+    }
+    handleDateRangeChange(presetDateRange);
+  };
+
+  const handleDateRangeChange = (value: DateRange | undefined) => {
+    setDateRange(value || defaultDateRange);
+    setLoginlogPostQuery({
+      ...loginlogPostQuery,
+      searchDateFrom:
+        dayjs(value?.from).format("YYYY-MM-DD") ??
+        dayjs().subtract(7, "day").format("YYYY-MM-DD"),
+      searchDateTo:
+        dayjs(value?.to).format("YYYY-MM-DD") ?? dayjs().format("YYYY-MM-DD"),
+    });
   };
 
   return (
     <div className="flex-1">
       <div className="card card-border">
         <form onSubmit={handleSubmit} className="flex items-center gap-2 p-2">
-          <Label htmlFor="" className="mr-2 text-label">
-            로그인로그
-          </Label>
+          <Label className="mr-2">조회기간</Label>
+          <DateRangePicker
+            value={dateRange}
+            onValueChange={handleDateRangeChange}
+          >
+            <div className="card card-border flex items-center gap-2">
+              <Select onValueChange={handlePresetDateRange}>
+                <SelectTrigger>
+                  <SelectValue placeholder="기간 선택" className="w-[24rem]" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="1W">일주일</SelectItem>
+                  <SelectItem value="1M">1개월</SelectItem>
+                  <SelectItem value="3M">3개월</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </DateRangePicker>
+          <Label className="ml-4 mr-2 text-label">사용자ID</Label>
           <Input
             className="h-[3.2rem] w-[20rem] rounded-sm !text-[1.3rem]"
-            value={loginlogQuery.userId}
+            value={loginlogPostQuery.userId}
             onChange={(e) =>
-              setLoginlogQuery({
-                ...loginlogQuery,
-                userId: e.target.value,
-              })
+              handleLoginlogParamsChange("userId")(e.target.value)
             }
           />
-          <Button className="h-[3.2rem]" type="submit">
-            조회
+          <Label className="ml-4 mr-2 text-label">상태</Label>
+          <Select onValueChange={handleLoginlogParamsChange("errOcrnYn")}>
+            <SelectTrigger className="w-[10rem]">
+              <SelectValue placeholder="선택" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="N">정상</SelectItem>
+              <SelectItem value="Y">오류</SelectItem>
+            </SelectContent>
+          </Select>
+          <Button
+            className="h-[3.2rem]"
+            type="submit"
+            disabled={query.isLoading || query.isPending || isManualLoading}
+          >
+            {query.isLoading || query.isPending || isManualLoading
+              ? "조회 중..."
+              : "조회"}
           </Button>
         </form>
       </div>
       <div className="card card-border">
         <div className="card-header">
-          <h3 className="text-2xl font-medium text-label">로그인로그 목록</h3>          
+          <div className="flex w-full items-center justify-between">
+            <h3 className="text-2xl font-medium text-label">로그인로그 목록</h3>
+            <div className="flex gap-2">
+              <Select
+                value={table.getState().pagination.pageSize.toString()}
+                onValueChange={(value) => {
+                  table.setPageSize(parseInt(value));
+                }}
+              >
+                <SelectTrigger className="h-[3.2rem] w-[12rem]">
+                  <SelectValue placeholder="페이지 크기" />
+                </SelectTrigger>
+                <SelectContent>
+                  {[10, 20, 30, 40, 50].map((pageSize) => (
+                    <SelectItem key={pageSize} value={pageSize.toString()}>
+                      {pageSize}개씩 보기
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
         </div>
-        <div className="card !m-4 h-[calc(100vh-35rem)] overflow-auto !p-0">
-          <DataTable table={table} viewPagination />
+        <div className="card relative !m-[1.2rem] !p-0">
+          {/* Debug: 로딩 상태 표시 */}
+          {(query.isLoading || query.isPending || isManualLoading) && (
+            <div className="absolute inset-0 z-10 flex items-center justify-center bg-white/80">
+              <div className="[data-theme='black']:bg-transparent flex h-[10rem] w-[10rem] items-center justify-center rounded-lg bg-secondary p-10">
+                <div className="relative size-[5rem]">
+                  <LoadingWithImage color="primary" />
+                </div>
+              </div>
+            </div>
+          )}
+          {tableComponent}
         </div>
       </div>
     </div>

apps/cs/src/pages/privacylog/index.ts

@@ -0,0 +1 @@
+export { PrivacyLogPage } from "./ui/privacylog-page";

apps/cs/src/pages/privacylog/model/table-columns.tsx

@@ -0,0 +1,41 @@
+import dayjs from "dayjs";
+import type { ColumnDef } from "@tanstack/react-table";
+import type { PrivacyLog } from "@/entities/privacylog";
+
+
+export const columns: ColumnDef<PrivacyLog>[] = [
+  {
+    id: "no",
+    header: "NO",
+    cell: ({ row, table }) => {
+      const totalRows = table.getRowCount();
+      const { pageIndex, pageSize } = table.getState().pagination;
+      return totalRows - (pageIndex * pageSize + row.index);
+    },
+  },
+  {
+    accessorKey: "inqDt",
+    header: "요청일시",
+    cell: ({ row }) => {
+      const date = dayjs(row.original.inqDt);
+      return date.format("YYYY-MM-DD HH:mm:ss");
+    },
+  },
+  {
+    accessorKey: "siteNm",
+    header: "사이트명",
+  },  
+  {
+    accessorKey: "rqstrNm",
+    header: "조회자명",
+  },
+  {
+    accessorKey: "rqstrIp",
+    header: "조회IP",
+  },  
+  {
+    accessorKey: "inqInfoSummary",
+    header: "조회정보",
+  }
+];
+

apps/cs/src/pages/privacylog/ui/privacylog-page.tsx

@@ -0,0 +1,206 @@
+"use client";
+
+import dayjs from "dayjs";
+import { useState } from "react";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import {
+  getCoreRowModel,
+  type PaginationState,
+} from "@tanstack/react-table";
+import { 
+  Button, 
+  DateRangePicker, 
+  Input, 
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+ } from "@common/components";
+import { PrivacyLogPrivacy } from "@/entities/privacylog";
+import { type PrivacyLogParams} from "@/entities/privacylog/model/privacylog-interface";
+import { useDataTable } from "@/shared/lib";  
+import { ENDPOINT } from "@/shared/config";
+import { columns } from "@/pages/privacylog/model/table-columns";
+
+
+
+type DateRange = {
+  from: Date | undefined;
+  to?: Date | undefined;
+};
+
+function PrivacyLogPage({  }) {
+   
+  // 1주일 전부터 오늘까지 기본 날짜 설정
+  const defaultDateRange: DateRange = {
+    from: dayjs().subtract(7, "day").toDate(),
+    to: dayjs().toDate(),
+  };
+  
+  const [dateRange, setDateRange] = useState<DateRange>(defaultDateRange);
+
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+  
+  const [privacylogPostQuery, setprivacylogPostQuery] = useState< PrivacyLogParams>({
+      siteId: "",
+      inqInfoKeywordType: "userName",
+      inqInfoKeyword: "",
+      rqstrIp: "",
+      inqDtStart: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
+      inqDtEnd: dayjs().format("YYYY-MM-DD"),
+      sort:"inqDt,asc"
+  });
+  
+  
+  const query = useQuery({
+    queryKey: [ENDPOINT.USER_SERVICE.PRIVACYLOG, pagination],
+    queryFn: () =>
+      PrivacyLogPrivacy.getPrivacyLogList({
+        ...privacylogPostQuery,
+        page: pagination.pageIndex,
+        size: pagination.pageSize,
+      }),
+    placeholderData: keepPreviousData,
+  });
+
+  const { tableComponent, tableInstance: table } = useDataTable({
+    query,
+    tableOptions: {
+      columns,
+      state: {
+        pagination,
+      },
+      manualPagination: true,
+      enableMultiRowSelection: true,
+      getCoreRowModel: getCoreRowModel(),
+      onPaginationChange: setPagination,
+    },
+    dataTableOptions: {
+      viewPagination: true,
+    },
+  });
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    query.refetch();
+  };
+
+  const handleprivacylogParamsChange =
+      (key: keyof PrivacyLogParams) => (value: unknown) => {
+     setprivacylogPostQuery({ ...privacylogPostQuery, [key]: value });
+  };
+  
+  const handlePresetDateRange = (value: string) => {
+    let presetDateRange: DateRange | undefined;
+    switch (value) {
+      case "1W":
+        presetDateRange = {
+          from: dayjs().subtract(7, "day").toDate(),
+          to: dayjs().toDate(),
+        };
+        break;
+      case "1M":
+        presetDateRange = {
+          from: dayjs().subtract(30, "day").toDate(),
+          to: dayjs().toDate(),
+        };
+        break;
+      case "3M":
+        presetDateRange = {
+          from: dayjs().subtract(90, "day").toDate(),
+          to: dayjs().toDate(),
+        };
+        break;
+      default:
+        presetDateRange = undefined;
+    }
+    handleDateRangeChange(presetDateRange);
+  };
+
+  
+      
+  const handleDateRangeChange = (value: DateRange | undefined) => {
+    setDateRange(value || defaultDateRange);
+    setprivacylogPostQuery({
+      ...privacylogPostQuery,
+      inqDtStart: dayjs(value?.from).format("YYYY-MM-DD") ?? dayjs().subtract(7, "day").format("YYYY-MM-DD"),
+      inqDtEnd: dayjs(value?.to).format("YYYY-MM-DD") ?? dayjs().format("YYYY-MM-DD"),
+    });
+  };
+
+
+
+
+  return (
+    <div className="flex-1">
+      <div className="card card-border">
+        <form onSubmit={handleSubmit} className="flex items-center gap-2 p-2">
+          <Label className="mr-2">조회기간</Label>
+          <DateRangePicker
+            value={dateRange}
+            onValueChange={handleDateRangeChange}
+          >
+            <div className="card card-border flex items-center gap-2">
+              <Select onValueChange={handlePresetDateRange}>
+                <SelectTrigger>
+                  <SelectValue placeholder="기간 선택" className="w-[24rem]" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="1W">일주일</SelectItem>
+                  <SelectItem value="1M">1개월</SelectItem>
+                  <SelectItem value="3M">3개월</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </DateRangePicker>
+          <Label className="ml-4 mr-2 text-label">조회자명</Label>
+          <Input
+            className="h-[3.2rem] w-[20rem] rounded-sm !text-[1.3rem]"
+             value={privacylogPostQuery.inqInfoKeyword}
+            onChange={(e) =>
+              handleprivacylogParamsChange("inqInfoKeyword")(e.target.value)
+            }
+          />
+          
+          <Button className="h-[3.2rem]" type="submit">
+            조회
+          </Button>
+        </form>
+      </div>
+      <div className="card card-border">
+        <div className="card-header">
+          <div className="flex w-full items-center justify-between">
+            <h3 className="text-2xl font-medium text-label">로그인로그 목록</h3>
+            <div className="flex gap-2">
+              <Select
+                value={table.getState().pagination.pageSize.toString()}
+                onValueChange={(value) => {
+                  table.setPageSize(parseInt(value));
+                }}
+              >
+                <SelectTrigger className="h-[3.2rem] w-[12rem]">
+                  <SelectValue placeholder="페이지 크기" />
+                </SelectTrigger>
+                <SelectContent>
+                  {[10, 20, 30, 40, 50].map((pageSize) => (
+                    <SelectItem key={pageSize} value={pageSize.toString()}>
+                      {pageSize}개씩 보기
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </div>  
+        <div className="card !m-[1.2rem] !p-0">{tableComponent}</div>
+      </div>
+    </div>
+  );
+}
+
+export { PrivacyLogPage };

apps/cs/src/pages/recent/ui/recent-page.tsx

@@ -62,6 +62,7 @@ function RecentPage() {
     delYn: "N",
     frDateYmd: "",
     toDateYmd: "",
+    sort:"regDt,desc"
   });
   const [isDeletePostData, setIsDeletePostData] = useState(false);
 

apps/cs/src/pages/site/ui/ip-management-dialog.tsx

@@ -46,7 +46,7 @@ function IPManagementDialog({
 
   const { data: ipList } = useQuery({
     queryKey: [ENDPOINT.CMS_SERVICE.IPS, props.open],
-    queryFn: () => IpApi.getIpList({ siteId, sort: [] }),
+    queryFn: () => IpApi.getIpList({ siteId, sort: "" }),
     select: (data) => {
       const ips = data.content.map((item) => ({
         ...item,

apps/cs/src/pages/site/ui/site-page.tsx

@@ -17,6 +17,7 @@ function SitePage() {
 
   const [siteQuery, setSiteQuery] = useState<SiteParams>({
     siteNm: "",
+    sort:"regDt,desc"
   });
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,

apps/cs/src/pages/template/ui/template-page.tsx

@@ -18,6 +18,7 @@ function TemplatePage() {
   const [templateQuery, setTemplateQuery] = useState<TemplateParams>({
     tmpltSeCd: "",
     keyword: "",
+    sort:"regDt,desc"
   });
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,

apps/cs/src/pages/terms/ui/terms-page.tsx

@@ -17,7 +17,8 @@ function TermsPage() {
 
   const [termsQuery, setTermsQuery] = useState<TermsParams>({
     trmsSeCd: "",
-    keyword: "",
+    keyword: "",  
+     sort:"regDt,desc"
   });
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,

apps/cs/src/pages/users/ui/users-page.tsx

@@ -51,7 +51,7 @@ function UsersPage() {
       grpId: "",
       frDateYmd: "",
       toDateYmd: "",
-      sort: ["aprvYmd,desc"],
+      sort: "regDt,desc"
     },
   });
 
@@ -288,9 +288,9 @@ function UsersPage() {
             <h3 className="text-2xl font-medium text-label">회원 목록</h3>
             <div className="flex gap-2">
               <Select
-                defaultValue="aprvYmd,desc"
+                defaultValue="regDt,desc"
                 onValueChange={(value) => {
-                  setValue("sort", [value]);
+                  setValue("sort", value);
                 }}
               >
                 <SelectTrigger>

apps/cs/src/shared/config/api.ts

@@ -19,7 +19,10 @@ export const ENDPOINT = {
     AUTHORIZATIONS: "/user-service/api/v1/authorizations",
     ROLE_AUTHORIZATIONS: "/user-service/api/v1/role-authorizations",
     ROLES: "/user-service/api/v1/roles",
-    LOGINLOG: "/user-service//api/v1/login-logs",
+    LOGINLOG: "/user-service/api/v1/login-logs",
+    APILOG: "/user-service/api/v1/api-logs",
+    PRIVACYLOG: "/user-service//api/v1/prvc-inq-logs",
+    
   },
   CMS_SERVICE: {
     SITES: "/cms-service/api/v1/sites",

apps/cs/src/shared/model/api-interface.ts

@@ -30,5 +30,5 @@ export interface PageableList<T> {
 export interface PageableParams {
   page?: number;
   size?: number;
-  sort?: string[];
+  sort?: string;
 }

pnpm-lock.yaml

@@ -2390,7 +2390,7 @@ packages:
       magic-string: 0.27.0
       react-docgen-typescript: 2.2.2(typescript@5.6.3)
       typescript: 5.6.3
-      vite: 6.2.0(@types/node@22.13.5)
+      vite: 6.2.0(@types/node@22.13.9)
     dev: true
 
   /@jridgewell/gen-mapping@0.3.8:
@@ -2482,7 +2482,7 @@ packages:
       dnd-multi-backend: 8.1.2(dnd-core@16.0.1)
       framer-motion: 11.18.2(react-dom@18.3.1)(react@18.3.1)
       react: 18.3.1
-      react-dnd: 16.0.1(@types/node@22.13.5)(@types/react@18.3.18)(react@18.3.1)
+      react-dnd: 16.0.1(@types/node@22.13.9)(@types/react@18.3.18)(react@18.3.1)
       react-dnd-html5-backend: 16.0.1
       react-dnd-touch-backend: 16.0.1
       react-dom: 18.3.1(react@18.3.1)
@@ -3983,7 +3983,7 @@ packages:
       browser-assert: 1.2.1
       storybook: 8.6.0(prettier@3.5.2)
       ts-dedent: 2.2.0
-      vite: 6.2.0(@types/node@22.13.5)
+      vite: 6.2.0(@types/node@22.13.9)
     dev: true
 
   /@storybook/components@8.6.0(storybook@8.6.0):
@@ -4115,7 +4115,7 @@ packages:
       resolve: 1.22.10
       storybook: 8.6.0(prettier@3.5.2)
       tsconfig-paths: 4.2.0
-      vite: 6.2.0(@types/node@22.13.5)
+      vite: 6.2.0(@types/node@22.13.9)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -4590,7 +4590,7 @@ packages:
       '@babel/plugin-transform-react-jsx-source': 7.25.9(@babel/core@7.26.9)
       '@types/babel__core': 7.20.5
       react-refresh: 0.14.2
-      vite: 6.2.0(@types/node@22.13.5)
+      vite: 6.2.0(@types/node@22.13.9)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -9878,7 +9878,7 @@ packages:
       debug: 4.4.0
       globrex: 0.1.2
       tsconfck: 3.1.5(typescript@5.6.3)
-      vite: 6.2.0(@types/node@22.13.5)
+      vite: 6.2.0(@types/node@22.13.9)
     transitivePeerDependencies:
       - supports-color
       - typescript