(계정분리 관련) 게시물 작성자 고정 / CUD 구역 생성

package.json

@@ -15,9 +15,9 @@
     "@types/node": "^16.7.13",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "antd": "^5.11.2",
+    "antd": "^5.22.2",
     "axios": "^0.27.2",
-    "dayjs": "^1.11.7",
+    "dayjs": "^1.11.13",
     "eslint-plugin-jest": "^27.6.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/components/common/HistoryArea/HistoryArea.style.tsx

@@ -0,0 +1,18 @@
+import { Card } from 'antd';
+import styled from 'styled-components';
+
+// eslint-disable-next-line import/prefer-default-export
+export const HistoryArea = styled(Card)`
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  z-index: 5;
+  width: 300px;
+  height: 110px;
+  overflow: auto;
+  border: none;
+
+  .ant-card-body {
+    padding: 0;
+  }
+`;

src/components/common/HistoryArea/index.tsx

@@ -0,0 +1,25 @@
+import { List } from 'antd';
+import { CardProps } from 'antd/lib';
+import { HistoryInfo } from 'model/history.model';
+import * as S from './HistoryArea.style';
+
+interface HistoryAreaProps {
+  historys: HistoryInfo[],
+  creator?: string,
+  created_at?: string,
+}
+
+export default function HistoryArea({
+  historys, creator, created_at, ...args
+}: HistoryAreaProps & CardProps) {
+  return (
+    <S.HistoryArea {...args}>
+      <List
+        dataSource={historys}
+        renderItem={(item) => <List.Item style={{ padding: '0', border: 'none' }}>{`${item.created_at} ${item.request_method} (${item.name})`}</List.Item>}
+        locale={{ emptyText: ' ' }}
+      />
+      <div>{`${created_at} 생성 (${creator})`}</div>
+    </S.HistoryArea>
+  );
+}

src/model/auth.model.ts

@@ -29,3 +29,13 @@ export interface LoginRequest {
   email: string
   password: string
 }
+
+export interface AdminInfo {
+  id: number;
+  email: string;
+  name: string;
+  track_name: string;
+  team_name: string;
+  can_create_admin: boolean;
+  super_admin: boolean;
+}

src/model/history.model.ts

@@ -0,0 +1,25 @@
+export interface HistoryInfo {
+  id: number;
+  domain_id: number;
+  name: string;
+  domain_name: string;
+  request_method: string;
+  request_message: string;
+  created_at: string;
+}
+
+export interface HistorysRequest {
+  page: number;
+  limit?: number;
+  requestMethod?: string;
+  domainName?: string;
+  domainId?: number;
+}
+
+export interface HistorysResponse {
+  total_count: number;
+  current_count: number;
+  total_page: number;
+  current_page: number;
+  historys: HistoryInfo[];
+}

src/pages/ABTest/components/ABTestDetail.style.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export * from './DeleteWarning.style';
+
+export * from 'components/common/HistoryArea/HistoryArea.style';
+
+export const Container = styled.div`
+  position: relative;
+`;

src/pages/ABTest/components/ABTestDetail.tsx

@@ -8,11 +8,13 @@ import {
 } from '@ant-design/icons';
 import { useNavigate, useParams } from 'react-router-dom';
 import CustomForm from 'components/common/CustomForm';
+import HistoryArea from 'components/common/HistoryArea';
 import { useGetABTestQuery } from 'store/api/abtest';
+import { useGetHistorysQuery } from 'store/api/history';
 import { ABTest } from 'model/abTest.model';
 import useBooleanState from 'utils/hooks/useBoolean';
 import useABTestMutation from './hook/useABTestMutation';
-import * as S from './DeleteWarning.style';
+import * as S from './ABTestDetail.style';
 import UserManageModal from './UserManageModal';
 
 interface Variable {
@@ -31,6 +33,7 @@ export default function ABTestDetail() {
   const [variables, setVariables] = useState<Variable[]>([]);
   const [sliderValues, setSliderValues] = useState<number[]>([]);
   const [winner, setWinner] = useState<string>('');
+  const { data: historys } = useGetHistorysQuery({ page: 1, domainId: Number(id) });
 
   // eslint-disable-next-line max-len
   const { value: checkModal, setTrue: checkModalOpen, setFalse: checkModalClose } = useBooleanState();
@@ -135,14 +138,14 @@ export default function ABTestDetail() {
   };
 
   return (
-    <>
+    <S.Container>
       <CustomForm form={form} onFinish={onFinish}>
         <Divider orientation="left">세부사항</Divider>
         {renderStatusTag()}
         <br />
         <br />
         <CustomForm.Input label="id" name="id" disabled />
-        <CustomForm.Input label="작성자" name="creator" maxLength={50} />
+        <CustomForm.Input label="작성자" name="creator" maxLength={50} disabled />
         <CustomForm.Input label="소속팀" name="team" maxLength={50} />
         <CustomForm.Input label="AB테스트의 제목" name="display_title" maxLength={255} />
         <CustomForm.Input label="변수" name="title" disabled maxLength={255} />
@@ -220,6 +223,14 @@ export default function ABTestDetail() {
       >
         실험 인원 수동 추가, 수정 하기
       </Button>
+      {(historys && abTestData) && (
+        <HistoryArea
+          historys={historys.historys}
+          creator={abTestData.creator}
+          created_at={abTestData.created_at}
+        />
+      )}
+
       <Modal
         open={checkModal}
         onCancel={checkModalClose}
@@ -276,6 +287,6 @@ export default function ABTestDetail() {
           </S.Item>
         </S.AroundRow>
       </Modal>
-    </>
+    </S.Container>
   );
 }

src/pages/ABTest/components/AddABTestModal.tsx

@@ -12,11 +12,10 @@ import * as S from './AddABTestModal.style';
 import NewTest from './NewTest';
 import useABTestMutation from './hook/useABTestMutation';
 
-function AddABTestModal({ onCancel }: { onCancel: () => void }) {
+function AddABTestModal({ onCancel, creator }: { onCancel: () => void, creator: string }) {
   const [form] = CustomForm.useForm();
   const [step, setStep] = useState(1);
   const [title, setTitle] = useState('');
-  const [creator, setCreator] = useState('');
   const [team, setTeam] = useState('');
   const [displayTitle, setDisplayTitle] = useState('');
   const [description, setDescription] = useState('');
@@ -80,7 +79,6 @@ function AddABTestModal({ onCancel }: { onCancel: () => void }) {
       form.resetFields();
       setStep(1);
       setTitle('');
-      setCreator('');
       setTeam('');
       setDisplayTitle('');
       setDescription('');
@@ -126,7 +124,7 @@ function AddABTestModal({ onCancel }: { onCancel: () => void }) {
       {step === 1 && (
         <S.StepContainer>
           <S.Label>작성자</S.Label>
-          <S.Input onChange={(e) => setCreator(e.target.value)} maxLength={10} />
+          <S.Input value={creator} maxLength={10} disabled />
           <S.Label>소속팀</S.Label>
           <S.Input onChange={(e) => setTeam(e.target.value)} maxLength={10} />
           <S.Label>AB테스트의 제목</S.Label>

src/pages/ABTest/index.tsx

@@ -2,6 +2,7 @@ import CustomForm from 'components/common/CustomForm';
 import CustomTable from 'components/common/CustomTable';
 import { useState } from 'react';
 import { useGetABTestsQuery } from 'store/api/abtest';
+import { useGetAdminInfoQuery } from 'store/api/auth';
 import useBooleanState from 'utils/hooks/useBoolean';
 import * as S from './ABTest.style';
 import AddABTestModal from './components/AddABTestModal';
@@ -10,6 +11,7 @@ export default function ABTest() {
   const [page, setPage] = useState(1);
   const { data: abtestList } = useGetABTestsQuery({ page, limit: 10 });
   const { value: isModalOpen, setTrue: openModal, setFalse: closeModal } = useBooleanState();
+  const { data: adminInfo } = useGetAdminInfoQuery();
   return (
     <S.Container>
       <CustomForm.Modal
@@ -21,7 +23,7 @@ export default function ABTest() {
         onCancel={closeModal}
         onClick={openModal}
       >
-        <AddABTestModal onCancel={closeModal} />
+        <AddABTestModal onCancel={closeModal} creator={adminInfo?.name || ''} />
       </CustomForm.Modal>
       {abtestList && (
         <CustomTable

src/pages/Services/Notice/NoticeDetail.tsx

@@ -13,6 +13,8 @@ import {
 import { Editor } from '@toast-ui/react-editor';
 import { useUploadfileMutation } from 'store/api/upload';
 import { NoticeRequest, NoticeUpdateForm } from 'model/notice.model';
+import { useGetHistorysQuery } from 'store/api/history';
+import HistoryArea from 'components/common/HistoryArea';
 import useNoticeMutation from './useNoticeMutation';
 import * as S from './NoticeDetail.style';
 
@@ -27,6 +29,7 @@ export default function NoticeDetail() {
   const [uploadfile] = useUploadfileMutation();
   const { required } = CustomForm.useValidate();
   const [form] = CustomForm.useForm();
+  const { data: historys } = useGetHistorysQuery({ page: 1, domainId: Number(id) });
 
   const handleFinish = (values: NoticeRequest) => {
     const editorContent = editorRef.current?.getInstance().getHTML();
@@ -113,7 +116,14 @@ export default function NoticeDetail() {
               {isEditing ? '저장' : '수정'}
             </CustomForm.Button>
           </S.ButtonWrapper>
-
+          {historys && (
+            <HistoryArea
+              historys={historys.historys}
+              creator={notice.author}
+              created_at={notice.created_at}
+              style={{ left: '20px', bottom: '-70px' }}
+            />
+          )}
           <Modal
             title="공지사항 삭제 확인"
             open={isModalOpen}

src/store/api/auth/index.ts

@@ -1,7 +1,7 @@
 import {
   BaseQueryFn, createApi, FetchArgs, fetchBaseQuery, FetchBaseQueryError,
 } from '@reduxjs/toolkit/query/react';
-import { LoginRequest, LoginResponse } from 'model/auth.model';
+import { LoginRequest, LoginResponse, AdminInfo } from 'model/auth.model';
 import { RootState } from 'store';
 import { API_PATH } from 'constant';
 import { setCredentials } from 'store/slice/auth';
@@ -62,6 +62,8 @@ FetchBaseQueryError
 };
 
 export const authApi = createApi({
+  reducerPath: 'authApi',
+  tagTypes: ['admin'],
   baseQuery: baseQueryReauth,
   endpoints: (builder) => ({
     login: builder.mutation<LoginResponse, LoginRequest>({
@@ -78,7 +80,14 @@ export const authApi = createApi({
     protected: builder.mutation<{ message: string }, void>({
       query: () => 'protected',
     }),
+
+    getAdminInfo: builder.query<AdminInfo, void>({
+      query: () => ({
+        url: '',
+      }),
+      providesTags: [{ type: 'admin', id: 'ADMIN' }],
+    }),
   }),
 });
 
-export const { useLoginMutation, useProtectedMutation } = authApi;
+export const { useLoginMutation, useProtectedMutation, useGetAdminInfoQuery } = authApi;

src/store/api/history/index.ts

@@ -0,0 +1,24 @@
+import { createApi } from '@reduxjs/toolkit/query/react';
+import { HistorysRequest, HistorysResponse } from 'model/history.model';
+import baseQueryReauth from 'store/api/baseQueryReauth';
+
+export const historyApi = createApi({
+  reducerPath: 'historyApi',
+  tagTypes: ['historys'],
+
+  baseQuery: baseQueryReauth,
+
+  endpoints: (builder) => ({
+    getHistorys: builder.query<HistorysResponse, HistorysRequest>({
+      query: ({ page, domainId = null, limit = 30 }) => ({
+        url: `admin/historys?page=${page}&limit=${limit}${domainId ? `&domainId=${domainId}` : ''}`,
+      }),
+      providesTags: [{ type: 'historys', id: 'HISTORYS' }],
+    }),
+  }),
+  refetchOnMountOrArgChange: true,
+});
+
+export const {
+  useGetHistorysQuery,
+} = historyApi;

src/store/index.ts

@@ -17,6 +17,7 @@ import { abTestApi } from './api/abtest';
 import { benefitApi } from './api/benefit';
 import { forceUpdateApi } from './api/forceUpdate';
 import { updateListApi } from './api/updateList';
+import { historyApi } from './api/history';
 
 const apiList = [
   authApi,
@@ -36,6 +37,7 @@ const apiList = [
   benefitApi,
   forceUpdateApi,
   updateListApi,
+  historyApi,
 ];
 
 const apiMiddleware = apiList.map((api) => api.middleware);

src/styles/Detail.style.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 export const Container = styled.div`
   font-family: "Noto Sans KR", "Avenir", "Helvetica", "Arial", "sans-serif";
+  position: relative;
 `;
 
 export const BreadCrumb = styled.div`