People 기능 나머지 구현 및 WorkSpace 회사 데이터 받아오기 및 생성하기 수정

src/apis/people/useDeletePeople.ts

@@ -1,8 +1,8 @@
 import { axiosClient } from '@finnect/apis/AxiosClient';
 
-export const useDeletePeople = async () => {
+export const deletePeople = async (personId: string) => {
   try {
-    const response = await axiosClient.delete(`/workspaces/people`);
+    const response = await axiosClient.delete(`/workspaces/people/${personId}`);
     return response.data;
   } catch (error) {
     console.error(error);

src/apis/people/useGetPeople.ts

@@ -4,7 +4,7 @@ import { IPeopleAxiosProps } from '@finnect/interface/PeopleInterface';
 
 export const useGetPeople = async (): Promise<IPeopleAxiosProps> => {
   try {
-    const response = await axiosClient.get(`/workspaces/people`);
+    const response = await axiosClient.get(`/workspaces/people/all`);
     return response.data;
   } catch (error) {
     console.error(error);

src/apis/people/usePatchPeople.ts

@@ -1,18 +1,18 @@
 import { axiosClient } from '@finnect/apis/AxiosClient';
 
-import { IPeopleProps } from '@finnect/interface/PeopleInterface';
-
 export const patchPeople = async (
   personName: string,
   personRole: string,
   personEmail: string,
+  companyId: number,
   personPhone: string
-): Promise<IPeopleProps> => {
+) => {
   try {
     const response = await axiosClient.patch(`/workspaces/people`, {
       personName,
       personRole,
       personEmail,
+      companyId,
       personPhone,
     });
     return response.data;

src/apis/people/usePostPeople.ts

@@ -1,18 +1,18 @@
 import { axiosClient } from '@finnect/apis/AxiosClient';
 
-import { IPeopleProps } from '@finnect/interface/PeopleInterface';
-
 export const postPeople = async (
   personName: string,
   personRole: string,
   personEmail: string,
+  companyId: number,
   personPhone: string
-): Promise<IPeopleProps> => {
+) => {
   try {
     const response = await axiosClient.post(`/workspaces/people`, {
       personName,
       personRole,
       personEmail,
+      companyId,
       personPhone,
     });
     return response.data;

src/atoms/company/useSelectCompany.ts

@@ -0,0 +1,12 @@
+import { atom } from 'recoil';
+import { ICompanyAxiosProps } from '@finnect/interface/PeopleInterface';
+
+export const companiesState = atom<ICompanyAxiosProps[]>({
+  key: 'companiesState',
+  default: [],
+});
+
+export const isCompanySelectedState = atom<boolean>({
+  key: 'isCompanySelectedState',
+  default: false,
+});

src/atoms/people/usePeople.ts

@@ -1,9 +1,9 @@
 import { ColDef } from 'ag-grid-community';
 import { atom } from 'recoil';
 
-import { IPeopleProps } from '@finnect/interface/PeopleInterface';
+import { IPeopleAxiosProps } from '@finnect/interface/PeopleInterface';
 
-export const rowPeopleDataState = atom<IPeopleProps[]>({
+export const rowPeopleDataState = atom<IPeopleAxiosProps[]>({
   key: 'rowPeopleDataState',
   default: [],
 });
@@ -16,12 +16,18 @@ export const columnDefsPeopleState = atom<ColDef[]>({
       field: 'personName',
       checkboxSelection: true,
     },
+    { headerName: 'Company', field: 'companyName' },
     { headerName: 'Role', field: 'personRole' },
     { headerName: 'Email', field: 'personEmail' },
     { headerName: 'Phone', field: 'personPhone' },
   ],
 });
 
+export const selectedPersonState = atom<IPeopleAxiosProps | null>({
+  key: 'selectedPersonState',
+  default: null,
+});
+
 export const peopleModalVisibleState = atom<boolean>({
   key: 'peopleModalVisibleState',
   default: false,

src/components/common/modal/people/PeopleForm.tsx

@@ -1,4 +1,6 @@
-import { Form, Input, Button } from 'antd';
+import { Form, Input, Button, Select } from 'antd';
+
+import { useSelectCompany } from '@finnect/hooks/custom-hooks/people/useSelectCompany';
 
 import { IPeopleProps } from '@finnect/interface/PeopleInterface';
 
@@ -8,49 +10,65 @@ interface PeopleFormProps {
 
 const PeopleForm = ({ onCreatePeople }: PeopleFormProps) => {
   const [formPeople] = Form.useForm();
+  const { companies, isCompanySelected, setIsCompanySelected } =
+    useSelectCompany();
 
-  const handleFinish = ({
-    personName,
-    personRole,
-    personEmail,
-    personPhone,
-  }: IPeopleProps) => {
-    onCreatePeople({ personName, personRole, personEmail, personPhone });
+  const handleFinish = (values: IPeopleProps) => {
+    const companyId = formPeople.getFieldValue('companyId');
+    onCreatePeople({ ...values, companyId });
     formPeople.resetFields();
+    setIsCompanySelected(false);
+  };
+
+  const handleCompanyChange = (value: string) => {
+    setIsCompanySelected(!!value);
   };
 
   return (
     <Form form={formPeople} onFinish={handleFinish}>
+      <Form.Item
+        name='companyId'
+        label='Company'
+        rules={[{ required: true, message: 'Please select a company!' }]}
+      >
+        <Select placeholder='Select a company' onChange={handleCompanyChange}>
+          {companies.map((company) => (
+            <Select.Option key={company.companyId} value={company.companyId}>
+              {company.companyName}
+            </Select.Option>
+          ))}
+        </Select>
+      </Form.Item>
       <Form.Item
         name='personName'
         label='Nickname'
         rules={[{ required: true, message: 'Please input the nickname!' }]}
       >
-        <Input />
+        <Input disabled={!isCompanySelected} />
       </Form.Item>
       <Form.Item
         name='personRole'
         label='Role'
         rules={[{ required: true, message: 'Please select the role!' }]}
       >
-        <Input />
+        <Input disabled={!isCompanySelected} />
       </Form.Item>
       <Form.Item
         name='personEmail'
         label='Email'
         rules={[{ required: true, message: 'Please input the email!' }]}
       >
-        <Input />
+        <Input disabled={!isCompanySelected} />
       </Form.Item>
       <Form.Item
         name='personPhone'
         label='Phone'
         rules={[{ required: true, message: 'Please input the phone!' }]}
       >
-        <Input />
+        <Input disabled={!isCompanySelected} />
       </Form.Item>
       <Form.Item>
-        <Button type='primary' htmlType='submit'>
+        <Button type='primary' htmlType='submit' disabled={!isCompanySelected}>
           Add
         </Button>
       </Form.Item>

src/hooks/custom-hooks/people/usePeopleData.ts

@@ -0,0 +1,88 @@
+import { useEffect } from 'react';
+
+import { useRecoilState } from 'recoil';
+
+import {
+  columnDefsPeopleState,
+  rowPeopleDataState,
+  selectedPersonState,
+} from '@finnect/atoms/people/usePeople';
+
+import { IPeopleAxiosProps } from '@finnect/interface/PeopleInterface';
+
+import { usePostPeopleQuery } from '@finnect/hooks/queries/people/usePostPeopleQuery';
+import { useGetPeopleQuery } from '@finnect/hooks/queries/people/useGetPeopleQuery';
+import { useDeletePeopleQuery } from '@finnect/hooks/queries/people/useDeletePeopleQuery';
+
+export const usePeopleData = () => {
+  const [rowData, setRowData] = useRecoilState(rowPeopleDataState);
+  const [columnDefs] = useRecoilState(columnDefsPeopleState);
+  const { mutate } = usePostPeopleQuery();
+  const { mutate: deletePerson } = useDeletePeopleQuery();
+  const { data, isPending, isError, error } = useGetPeopleQuery();
+  const [selectedPerson, setSelectedPerson] =
+    useRecoilState(selectedPersonState);
+
+  useEffect(() => {
+    if (data) {
+      setRowData(data.result.people);
+    }
+  }, [data, setRowData]);
+
+  const addPerson = ({
+    personName,
+    personRole,
+    personEmail,
+    personPhone,
+    companyId,
+  }: {
+    personName: string;
+    personRole: string;
+    personEmail: string;
+    personPhone: string;
+    companyId: number;
+  }) => {
+    mutate(
+      { personName, personRole, personEmail, personPhone, companyId },
+      {
+        onSuccess: () => {
+          setRowData(
+            (prevData) =>
+              [
+                ...prevData,
+                { personName, personRole, personEmail, personPhone, companyId },
+              ] as IPeopleAxiosProps[]
+          );
+        },
+      }
+    );
+  };
+
+  const handleDeletePerson = () => {
+    console.log(selectedPerson);
+    if (selectedPerson) {
+      deletePerson(selectedPerson.personId, {
+        onSuccess: () => {
+          setRowData((prevData) =>
+            prevData.filter(
+              (person) => person.personId !== selectedPerson.personId
+            )
+          );
+          setSelectedPerson(null);
+        },
+      });
+    }
+  };
+
+  return {
+    rowData,
+    columnDefs,
+    handleDeletePerson,
+    selectedPerson,
+    setSelectedPerson,
+    addPerson,
+    isPending,
+    isError,
+    error,
+  };
+};

src/hooks/custom-hooks/people/useSelectCompany.ts

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+
+import { useRecoilState } from 'recoil';
+
+import {
+  companiesState,
+  isCompanySelectedState,
+} from '@finnect/atoms/company/useSelectCompany';
+
+import { useGetWC } from '@finnect/hooks/queries/company/useGetWC';
+
+export const useSelectCompany = () => {
+  const [companies, setCompanies] = useRecoilState(companiesState);
+  const [isCompanySelected, setIsCompanySelected] = useRecoilState(
+    isCompanySelectedState
+  );
+  const { data: CompanyData } = useGetWC();
+
+  useEffect(() => {
+    if (CompanyData) {
+      setCompanies(CompanyData.result.companies);
+    }
+  }, [CompanyData, setCompanies]);
+
+  return {
+    companies,
+    isCompanySelected,
+    setIsCompanySelected,
+  };
+};

src/hooks/queries/people/useDeletePeopleQuery.ts

@@ -1,13 +1,16 @@
-import { useDeletePeople } from '@finnect/apis/people/useDeletePeople';
+import { useMutation } from '@tanstack/react-query';
 
-import { useQuery } from '@tanstack/react-query';
+import { deletePeople } from '@finnect/apis/people/useDeletePeople';
+
+import { queryClient } from '@finnect/hooks/queries/Http';
 
 export const useDeletePeopleQuery = () => {
-  const { data, isPending, isError, error, refetch } = useQuery({
-    queryKey: ['getPeople'],
-    queryFn: useDeletePeople,
-    refetchOnMount: true,
+  const { mutate, isPending, isError, error } = useMutation({
+    mutationFn: (personId: string) => deletePeople(personId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['deletePeople'] });
+    },
   });
 
-  return { data, isPending, isError, error, refetch };
+  return { mutate, isPending, isError, error };
 };