From 1309767de9d0cc9cbc07f6beac3dab061b41a178 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Wed, 18 Jun 2025 14:42:56 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B7=B8=EB=A3=B9=20=EA=B4=80=EB=A6=AC?=
 =?UTF-8?q?=20>=20=EA=B7=B8=EB=A3=B9=20=EC=88=98=EC=A0=95=20=EC=9E=91?=
 =?UTF-8?q?=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cs/src/entities/site/ui/site-select.tsx  |  6 +---
 .../cs/src/pages/groups/api/groups-service.ts | 14 ++++----
 .../pages/groups/model/groups-interface.ts    | 23 +++++++------
 .../groups/model/groups-table-columns.tsx     | 12 ++++++-
 apps/cs/src/pages/groups/ui/groups-dialog.tsx | 34 ++++++++++++++-----
 .../cs/src/pages/groups/ui/groups-section.tsx |  6 ++--
 apps/cs/src/pages/groups/ui/role-select.tsx   | 11 +++---
 7 files changed, 66 insertions(+), 40 deletions(-)

diff --git a/apps/cs/src/entities/site/ui/site-select.tsx b/apps/cs/src/entities/site/ui/site-select.tsx
index 3d56a5658..715943740 100644
--- a/apps/cs/src/entities/site/ui/site-select.tsx
+++ b/apps/cs/src/entities/site/ui/site-select.tsx
@@ -17,7 +17,6 @@ type SiteSelectProps = {
 } & React.ComponentPropsWithoutRef<typeof Select>;
 
 function SiteSelect({
-  defaultValue,
   placeholder = "선택",
   enabledAllSite,
   className,
@@ -34,13 +33,10 @@ function SiteSelect({
     },
   });
 
-  const defaultValueText =
-    sites?.find((item) => item.siteId === defaultValue)?.siteNm ?? placeholder;
-
   return (
     <Select {...props}>
       <SelectTrigger className={cn("w-[12rem]", className)}>
-        <SelectValue placeholder={defaultValueText} />
+        <SelectValue placeholder={placeholder} />
       </SelectTrigger>
       <SelectContent>
         {sites?.map((item) => (
diff --git a/apps/cs/src/pages/groups/api/groups-service.ts b/apps/cs/src/pages/groups/api/groups-service.ts
index 1cc06e914..1ead02087 100644
--- a/apps/cs/src/pages/groups/api/groups-service.ts
+++ b/apps/cs/src/pages/groups/api/groups-service.ts
@@ -4,7 +4,7 @@ import type {
   GroupService,
   GroupSearchParams,
   GroupList,
-  GroupDetailResponse,
+  GroupResponseDto,
   GroupFormData,
 } from "../model/groups-interface";
 
@@ -19,16 +19,16 @@ export class GroupsApiService implements GroupService {
   }
 
   // 그룹 단건 조회
-  public async findById(groupId: string): Promise<GroupDetailResponse> {
-    const response = await client.get<GroupDetailResponse>(
+  public async findGroupById(groupId: string): Promise<GroupResponseDto> {
+    const response = await client.get<GroupResponseDto>(
       `${ENDPOINT.CMS_SERVICE.GROUPS}/${groupId}`,
     );
     return response.data;
   }
 
   // 그룹 저장
-  public async saveGroup(data: GroupFormData): Promise<GroupDetailResponse> {
-    const response = await client.post<GroupDetailResponse>(
+  public async saveGroup(data: GroupFormData): Promise<GroupResponseDto> {
+    const response = await client.post<GroupResponseDto>(
       `${ENDPOINT.CMS_SERVICE.GROUPS}`,
       data,
     );
@@ -39,8 +39,8 @@ export class GroupsApiService implements GroupService {
   public async updateGroup(
     groupId: string,
     data: GroupFormData,
-  ): Promise<GroupDetailResponse> {
-    const response = await client.put<GroupDetailResponse>(
+  ): Promise<GroupResponseDto> {
+    const response = await client.put<GroupResponseDto>(
       `${ENDPOINT.CMS_SERVICE.GROUPS}/${groupId}`,
       data,
     );
diff --git a/apps/cs/src/pages/groups/model/groups-interface.ts b/apps/cs/src/pages/groups/model/groups-interface.ts
index 06d4cd286..f8cc9883f 100644
--- a/apps/cs/src/pages/groups/model/groups-interface.ts
+++ b/apps/cs/src/pages/groups/model/groups-interface.ts
@@ -34,17 +34,20 @@ export interface GroupListResponseDto {
 }
 
 // 그룹 상세 응답 인터페이스
-export interface GroupDetailResponse {
-  grpSn: number;
-  grpNm: string;
-  grpExpln: string;
-  useYn: string;
+export interface GroupResponseDto {
+  groupId: string;
+  groupNm: string;
+  groupSeCd: string;
+  groupSeNm: string;
+  groupExpln: string;
+  delYn: string;
   regDt: string;
   rgtr: string;
   mdfcnDt: string;
   mdfr: string;
-  rgtrNm: string;
-  mdfrNm: string;
+  authrtId: string;
+  siteId: string;
+  mngrYn: string;
 }
 
 // 그룹 저장 데이터 스키마
@@ -68,16 +71,16 @@ export interface GroupService {
   findPageGroup: (params: GroupSearchParams) => Promise<GroupList>;
 
   // 그룹 단건 조회
-  findById: (groupId: string) => Promise<GroupDetailResponse>;
+  findGroupById: (groupId: string) => Promise<GroupResponseDto>;
 
   // 그룹 저장
-  saveGroup: (data: GroupFormData) => Promise<GroupDetailResponse>;
+  saveGroup: (data: GroupFormData) => Promise<GroupResponseDto>;
 
   // 그룹 수정
   updateGroup: (
     groupId: string,
     data: GroupFormData,
-  ) => Promise<GroupDetailResponse>;
+  ) => Promise<GroupResponseDto>;
 
   // 그룹 삭제
   deleteGroup: (groupId: string) => Promise<boolean>;
diff --git a/apps/cs/src/pages/groups/model/groups-table-columns.tsx b/apps/cs/src/pages/groups/model/groups-table-columns.tsx
index a70b3144d..40cd9042c 100644
--- a/apps/cs/src/pages/groups/model/groups-table-columns.tsx
+++ b/apps/cs/src/pages/groups/model/groups-table-columns.tsx
@@ -1,6 +1,8 @@
 import { type ColumnDef } from "@tanstack/react-table";
+import { Button } from "@common/components";
 import { type GroupListResponseDto } from "./groups-interface";
 import { MenuAuthorityDialog } from "../ui/menu-authority-dialog";
+import { GroupsDialog } from "../ui/groups-dialog";
 
 export const columns: ColumnDef<GroupListResponseDto>[] = [
   {
@@ -19,8 +21,16 @@ export const columns: ColumnDef<GroupListResponseDto>[] = [
     id: "actions",
     header: "관리",
     cell: ({ row }) => (
-      <div className="flex justify-center gap-2">
+      <div
+        onClick={(e) => e.stopPropagation()}
+        className="flex justify-center gap-2"
+      >
         <MenuAuthorityDialog groupId={row.original.groupId} />
+        <GroupsDialog groupId={row.original.groupId}>
+          <Button size="sm" color="white">
+            수정
+          </Button>
+        </GroupsDialog>
       </div>
     ),
   },
diff --git a/apps/cs/src/pages/groups/ui/groups-dialog.tsx b/apps/cs/src/pages/groups/ui/groups-dialog.tsx
index bd59f58ef..c2032eb79 100644
--- a/apps/cs/src/pages/groups/ui/groups-dialog.tsx
+++ b/apps/cs/src/pages/groups/ui/groups-dialog.tsx
@@ -4,6 +4,7 @@ import { memo, useState } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { useQuery } from "@tanstack/react-query";
 import {
   Button,
   Dialog,
@@ -15,6 +16,7 @@ import {
   DialogClose,
 } from "@common/components";
 import { Form } from "@/shared/ui/form";
+import { ENDPOINT } from "@/shared/config";
 import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import { GroupForm } from "./group-form";
 import { GroupsApi } from "../api/groups-service";
@@ -22,21 +24,23 @@ import { groupFormSchema, type GroupFormData } from "../model/groups-interface";
 
 type GroupsDialogProps = {
   groupId?: string;
+  children: React.ReactNode;
   onSuccess?: () => void;
 };
 
 const GroupsDialog = memo(
-  ({ groupId, onSuccess, ...props }: GroupsDialogProps) => {
+  ({ groupId, children, onSuccess, ...props }: GroupsDialogProps) => {
     const isRegistration = !groupId;
+
     const { confirm } = useConfirm();
     const alert = useAlertStore((state) => state.setMessage);
+
     const [open, setOpen] = useState(false);
 
-    const form = useForm<GroupFormData>({
-      resolver: zodResolver(groupFormSchema),
-      defaultValues: {
-        mngrYn: "N",
-      },
+    const { data: group } = useQuery({
+      queryKey: [ENDPOINT.CMS_SERVICE.GROUPS, groupId],
+      queryFn: () => GroupsApi.findGroupById(groupId!),
+      enabled: !!groupId,
     });
 
     const { mutateAsync: createGroup } = useMutationWrapper({
@@ -60,6 +64,20 @@ const GroupsDialog = memo(
       },
     });
 
+    const form = useForm<GroupFormData>({
+      resolver: zodResolver(groupFormSchema),
+      values: {
+        groupId: group?.groupId ?? "",
+        groupNm: group?.groupNm ?? "",
+        groupSeCd: group?.groupSeCd ?? "",
+        groupExpln: group?.groupExpln ?? "",
+        delYn: group?.delYn ?? "",
+        authrtId: group?.authrtId ?? "",
+        siteId: group?.siteId ?? "",
+        mngrYn: group?.mngrYn ?? "",
+      },
+    });
+
     const onSubmit =
       (callback: (data: GroupFormData) => void) =>
       async (data: GroupFormData) => {
@@ -72,9 +90,7 @@ const GroupsDialog = memo(
 
     return (
       <Dialog open={open} onOpenChange={setOpen} {...props}>
-        <DialogTrigger asChild>
-          <Button>등록</Button>
-        </DialogTrigger>
+        <DialogTrigger asChild>{children}</DialogTrigger>
         <DialogContent className="max-w-[60rem]" aria-describedby={undefined}>
           <DialogHeader>
             <DialogTitle>
diff --git a/apps/cs/src/pages/groups/ui/groups-section.tsx b/apps/cs/src/pages/groups/ui/groups-section.tsx
index 14bdc81ff..ffd3fc637 100644
--- a/apps/cs/src/pages/groups/ui/groups-section.tsx
+++ b/apps/cs/src/pages/groups/ui/groups-section.tsx
@@ -7,7 +7,7 @@ import {
   useReactTable,
   type PaginationState,
 } from "@tanstack/react-table";
-import { DataTable } from "@common/components";
+import { Button, DataTable } from "@common/components";
 import { ENDPOINT } from "@/shared/config";
 import { columns } from "../model/groups-table-columns";
 import { GroupsApi } from "../api/groups-service";
@@ -55,7 +55,9 @@ function GroupsSection({ handleSelectedGroup }: GroupsSectionProps) {
       <div className="card card-border">
         <div className="card-header">
           <h3 className="text-2xl font-medium text-label">그룹 목록</h3>
-          <GroupsDialog onSuccess={refetch} />
+          <GroupsDialog onSuccess={refetch}>
+            <Button>등록</Button>
+          </GroupsDialog>
         </div>
         <div className="card !m-4 h-[calc(100vh-25.5rem)] overflow-auto !p-0">
           <DataTable table={table} onRowClick={handleRowClick} viewPagination />
diff --git a/apps/cs/src/pages/groups/ui/role-select.tsx b/apps/cs/src/pages/groups/ui/role-select.tsx
index 56cd587c3..539888591 100644
--- a/apps/cs/src/pages/groups/ui/role-select.tsx
+++ b/apps/cs/src/pages/groups/ui/role-select.tsx
@@ -17,20 +17,19 @@ function RoleSelect({ mngrYn = "N", ...props }: RoleSelectProps) {
   const { data: roles } = useQuery({
     queryKey: [ENDPOINT.USER_SERVICE.ROLES],
     queryFn: () => RoleApi.getRoles(),
-    select: (data) => {
-      return data.content.filter((role) => role.mngrYn === mngrYn);
-    },
   });
 
+  const options = roles?.content.filter((role) => role.mngrYn === mngrYn);
+
   return (
     <Select {...props}>
       <SelectTrigger className="w-[24rem]">
         <SelectValue placeholder="선택" />
       </SelectTrigger>
       <SelectContent>
-        {roles?.map((role) => (
-          <SelectItem key={role.roleId} value={role.roleId}>
-            {role.roleName}
+        {options?.map((item) => (
+          <SelectItem key={item.roleId} value={item.roleId}>
+            {item.roleName}
           </SelectItem>
         ))}
       </SelectContent>