AB테스트 기능 구현

src/App.tsx

@@ -19,7 +19,10 @@ import OwnerList from 'pages/UserManage/Owner/OwnerList';
 import OwnerRequestList from 'pages/UserManage/OwnerRequest/OwnerRequestList';
 import OwnerRequestDetail from 'pages/UserManage/OwnerRequest/OwnerRequestDetail';
 import OwnerDetail from 'pages/UserManage/Owner/OwnerDetail';
+import ABTest from 'pages/ABTest';
+import ABTestDetail from 'pages/ABTest/components/ABTestDetail';
 import ReviewList from 'pages/Services/Review/ReviewList';
+import ABTestTest from 'pages/ABTest/test/test';
 
 function RequireAuth() {
   const location = useLocation();
@@ -57,6 +60,9 @@ function App() {
         <Route path="/owner-request/:id" element={<OwnerRequestDetail />} />
         <Route path="/member" element={<MemberList />} />
         <Route path="/member/:id" element={<MemberDetail />} />
+        <Route path="/abtest" element={<ABTest />} />
+        <Route path="/abtest/:id" element={<ABTestDetail />} />
+        <Route path="/abtest/test" element={<ABTestTest />} />
         <Route path="/review" element={<ReviewList />} />
         <Route path="*" element={<h1>404</h1>} />
       </Route>

src/components/common/CustomTable/index.tsx

@@ -1,4 +1,5 @@
-import { Empty, Table } from 'antd';
+import { CheckCircleOutlined, CloseCircleOutlined, SyncOutlined } from '@ant-design/icons';
+import { Empty, Table, Tag } from 'antd';
 import Pagination from 'antd/es/pagination';
 import type { ColumnsType } from 'antd/es/table';
 import { TITLE_MAPPER } from 'constant';
@@ -43,44 +44,67 @@ interface Props<TableData> {
     onChange: (idx: number) => void;
   };
   columnSize?: number[];
+  hiddenColumns?: string[];
 }
 
-function CustomTable<TableData extends DefaultTableData>(
-  { data, pagination, columnSize }: Props<TableData>,
-) {
+function CustomTable<TableData extends DefaultTableData>({
+  data, pagination, columnSize, hiddenColumns = [],
+}: Props<TableData>) {
   const navigate = useNavigate();
 
   const getColumns = (): ColumnsType<TableData> => {
     const columnKeys = Object.keys(data[0]);
 
-    return columnKeys.map((key, idx) => ({
-      title: TITLE_MAPPER[key] || key.toUpperCase(),
-      dataIndex: key,
-      key,
-      width: columnSize && columnSize[idx] ? `${columnSize[idx]}%` : 'auto',
-      render: (value: string | number | boolean) => {
-        if (typeof value === 'boolean') {
-          return value ? 'True' : 'False';
-        }
-
-        if (typeof value === 'number') {
-          return value || '-';
-        }
+    return columnKeys
+      .filter((key) => !hiddenColumns.includes(key))
+      .map((key, idx) => ({
+        title: TITLE_MAPPER[key] || key.toUpperCase(),
+        dataIndex: key,
+        key,
+        width: columnSize && columnSize[idx] ? `${columnSize[idx]}%` : 'auto',
+        render: (value: string | number | boolean) => {
+          if (typeof value === 'boolean') {
+            return value ? 'True' : 'False';
+          }
 
-        if (typeof value === 'string') {
-          if (value.startsWith('https://')) {
-            return <TableItemImage src={value} alt="icon" />;
+          if (typeof value === 'number') {
+            return value || '-';
           }
 
-          if (longDateRegExp.test(value)) {
-            return toDateStringFormat(value);
+          if (typeof value === 'string') {
+            if (value.startsWith('https://')) {
+              return <TableItemImage src={value} alt="icon" />;
+            }
+
+            if (longDateRegExp.test(value)) {
+              return toDateStringFormat(value);
+            }
           }
-        }
-        return value;
-      },
-    }));
+          if (key === 'status') {
+            if (value === 'IN_PROGRESS') {
+              return (
+                <Tag icon={<SyncOutlined spin />} color="processing">
+                  {value}
+                </Tag>
+              );
+            } if (value === 'COMPLETED') {
+              return (
+                <Tag icon={<CheckCircleOutlined />} color="success">
+                  {value}
+                </Tag>
+              );
+            }
+            return (
+              <Tag icon={<CloseCircleOutlined />} color="error">
+                {value}
+              </Tag>
+            );
+          }
+
+          return value;
+        },
+      }));
   };
-  // const hasData = data.length > 0;
 
   return (
     <TableContainer>

src/components/common/SideNav/index.tsx

@@ -2,7 +2,7 @@ import {
   AppstoreOutlined, UserOutlined, CarOutlined, ShopOutlined,
   HomeOutlined, UserSwitchOutlined,
   UsergroupDeleteOutlined, FolderOpenOutlined, ControlOutlined,
-  UserAddOutlined, BoldOutlined, SnippetsOutlined,
+  UserAddOutlined, BoldOutlined, ApartmentOutlined, SnippetsOutlined,
 } from '@ant-design/icons';
 import { Menu, MenuProps } from 'antd';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
@@ -43,6 +43,11 @@ const items: MenuProps['items'] = [
     getItem('사장님 권한 요청', '/owner-request', <UserAddOutlined />),
     getItem('BCSD Lab', '/member', <BoldOutlined />),
   ]),
+
+  getItem('테스트', 'test', <ControlOutlined />, [
+    getItem('AB 테스트', '/abtest', <ApartmentOutlined />),
+    getItem('AB 테스트의 테스트 페이지', '/abtest/test', <ApartmentOutlined />),
+  ]),
 ];
 
 const SideNavConatiner = styled.nav`

src/model/abTest.model.ts

@@ -0,0 +1,94 @@
+export interface Test {
+  id: number;
+  status: 'IN_PROGRESS' | 'COMPLETED' | string;
+  winner_name: string;
+  creator: string;
+  team: string;
+  display_title: string;
+  title: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface ABTestResponse {
+  tests: Test[];
+  total_count: number;
+  current_count: number;
+  total_page: number;
+  current_page: number;
+}
+
+export interface ABTest {
+  display_title: string;
+  creator: string;
+  team: string;
+  title: string;
+  description: string;
+  variables: {
+    rate: number;
+    display_name: string;
+    name: string;
+  }[]
+}
+
+export interface NewABTestResponse {
+  id: number;
+  display_title: string;
+  creator: string;
+  team: string;
+  status: 'IN_PROGRESS' | 'COMPLETED' | string;
+  winner_name: string | null;
+  title: string;
+  description: string;
+  variables: {
+    rate: number;
+    display_name: string;
+    name: string;
+  }[]
+  created_at: string;
+  updated_at: string;
+}
+
+export interface ModifyABTest {
+  id: string | number;
+  data: Partial<ABTest>;
+}
+
+export interface ABTestUser {
+  id: string;
+  name: string;
+  detail: string;
+}
+
+export interface ABTestUsersResponse {
+  users: ABTestUser[]
+}
+export interface ABTestUserUserID {
+  id: string | number;
+  type: string;
+  model: string;
+  last_accessed_at: string;
+}
+
+export interface ABTestUserUserIDResponse {
+  devices: ABTestUserUserID[]
+}
+
+export interface ABTestUserMoveRequest {
+  id: string | number;
+  data: {
+    device_id: string | number;
+    variable_name: string | number;
+  }
+}
+
+// 테스트
+export interface ABTestAssignRequest {
+  title: string;
+  access_history_id: number | string | null ;
+}
+
+export interface ABTestAssignResponse {
+  variable_name: string,
+  access_history_id: number
+}

src/pages/ABTest/ABTest.style.tsx

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const Container = styled.div``;
+
+export const Heading = styled.h1`
+  font-size: 30px;
+  font-weight: 700;
+  color: #404040;
+  padding: 12px 0 0 12px;
+`;