서비스 페이지 API 연동

src/apis/index.ts

@@ -1,6 +1,8 @@
+import { createAxiosHTTPClient } from '@/utils/httpClient';
+
 import AuthApi from './authApi';
+import ServiceApi from './serviceApi';
 import UserApi from './userApi';
-import { createAxiosHTTPClient } from '@/utils/httpClient';
 
 const getApiBaseURL = (): string => {
   return process.env.APP_API_URL ?? '/';
@@ -11,3 +13,4 @@ const client = createAxiosHTTPClient({ baseURL, withCredentials: true });
 
 export const authApi = new AuthApi(client, '/api/auth');
 export const userApi = new UserApi(client, '/api/users');
+export const serviceApi = new ServiceApi(client, '/api/projects');

src/apis/serviceApi/index.ts

@@ -0,0 +1,17 @@
+import { ServiceListAndCountResponseBody } from '@/types';
+
+import Api from '../api';
+
+class ServiceApi extends Api {
+  async getListAndCount(): Promise<ServiceListAndCountResponseBody> {
+    const response = await this.get<ServiceListAndCountResponseBody>();
+
+    return response.data;
+  }
+
+  async deleteItem(id: string): Promise<void> {
+    await this.delete({ additionalUri: `/${id}` });
+  }
+}
+
+export default ServiceApi;

src/components/common/Loader/index.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
+import Loader from '.';
+
+it('Loader rendering test', () => {
+  render(<Loader />);
+});

src/components/common/Loader/index.tsx

@@ -0,0 +1,13 @@
+import React, { FC } from 'react';
+
+import { loaderWrapperStyle, spinnerStyle } from './style';
+
+const Loader: FC = () => {
+  return (
+    <div css={loaderWrapperStyle}>
+      <div css={spinnerStyle} />
+    </div>
+  );
+};
+
+export default Loader;

src/components/common/Loader/style.ts

@@ -0,0 +1,30 @@
+import { SerializedStyles, Theme, css } from '@emotion/react';
+import zIndexes from '@/styles/zIndexes';
+
+export const loaderWrapperStyle = css`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.2);
+  z-index: ${zIndexes.loader};
+`;
+
+export const spinnerStyle = (theme: Theme): SerializedStyles => css`
+  @keyframes spinner {
+    0% {
+      transform: rotate(360deg);
+    }
+  }
+  margin: 0 auto;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  border: 6px solid ${theme.colorPrimaryLight};
+  border-top-color: ${theme.colorPrimary};
+  animation: spinner 600ms linear infinite;
+`;

src/components/common/Navbar/index.tsx

@@ -2,17 +2,17 @@ import React, { FC } from 'react';
 import { Link } from 'react-router-dom';
 
 import { useUserState } from '@/atoms/userState';
-import useConfirmModal from '@/hooks/useConfirmModal';
-import Uri from '@/constants/uri';
+import Logo from '@/components/common/Logo';
 import PrivateNavbar from '@/components/nav/PrivateNavbar';
 import PublicNavbar from '@/components/nav/PublicNavbar';
-import Logo from '@/components/common/Logo';
+import Uri from '@/constants/uri';
+import useConfirmModal from '@/hooks/useConfirmModal';
 
 import { navStyle } from './style';
 
 const Navbar: FC = () => {
   const [user, setUser] = useUserState();
-  const [open] = useConfirmModal();
+  const { open } = useConfirmModal();
 
   const logoutHandler = () => {
     const logout = () => setUser(null);

src/components/service/ServiceItem/index.test.tsx

@@ -1,24 +1,32 @@
 import React from 'react';
+import { RecoilRoot } from 'recoil';
 
 import { render, screen } from '@testing-library/react';
 
 import ServiceItem from '.';
 
 describe('<ServiceItem/> component test', () => {
+  const id = 1;
   const name = 'serviceName';
   const domain = 'serviceDomain';
   const clientId = 'serviceClientId';
 
-  it('서비스 아이템 정보를 렌더링해야 합니다.', () => {
-    render(<ServiceItem name={name} domain={domain} clientId={clientId} />);
+  it('서비스 아이템 정보 및 삭제 아이콘을 렌더링해야 합니다.', () => {
+    render(
+      <RecoilRoot>
+        <ServiceItem
+          id={id}
+          name={name}
+          domain={domain}
+          clientId={clientId}
+          onDeleteServiceItem={() => {}}
+        />
+      </RecoilRoot>,
+    );
 
     expect(screen.queryByRole('heading', { level: 3 })).toHaveTextContent(name);
     expect(screen.queryByText(domain)).toBeInTheDocument();
     expect(screen.queryByText(`Client ID : ${clientId}`)).toBeInTheDocument();
-  });
-
-  it('서비스 아이템 삭제 아이콘을 렌더링해야 합니다.', () => {
-    render(<ServiceItem name={name} domain={domain} clientId={clientId} />);
 
     expect(screen.getByRole('img', { name: 'remove' })).toBeInTheDocument();
   });

src/components/service/ServiceItem/index.tsx

@@ -12,15 +12,30 @@ import {
 } from './style';
 
 type ServiceItemProps = {
+  id: number;
   name: string;
   domain: string;
   clientId: string;
+  onDeleteServiceItem: (id: string) => void;
 };
 
-const ServiceItem: FC<ServiceItemProps> = ({ name, domain, clientId }) => {
-  const [open] = useConfirmModal();
+const ServiceItem: FC<ServiceItemProps> = ({
+  id,
+  name,
+  domain,
+  clientId,
+  onDeleteServiceItem,
+}) => {
+  const { open, setConfirmModal } = useConfirmModal();
 
   const openModal = () => {
+    setConfirmModal({
+      acceptHandler: () => {
+        onDeleteServiceItem(id.toString());
+        window.location.reload();
+      },
+    });
+
     open({ message: `Do you really want to delete ${name} service?` });
   };
 

src/components/service/ServiceList/index.test.tsx

@@ -10,18 +10,32 @@ describe('<ServiceList/> component test', () => {
     const domain = 'serviceDomain';
     const clientId = 'serviceClientId';
     const serviceList = [{ id: 1, name, domain, clientId }];
-    render(<ServiceList serviceList={serviceList} />);
+    const serviceCount = 1;
+
+    render(
+      <ServiceList
+        serviceCount={serviceCount}
+        serviceList={serviceList}
+        onDeleteServiceItem={() => {}}
+      />,
+    );
 
     expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent(
-      'Services',
+      `Services ${serviceCount}`,
     );
     expect(screen.queryByRole('heading', { level: 3 })).toHaveTextContent(name);
     expect(screen.queryByText(domain)).toBeInTheDocument();
     expect(screen.queryByText(`Client ID : ${clientId}`)).toBeInTheDocument();
   });
 
   it('serviceList가 빈 배열이면 서비스가 없다는 화면을 렌더링합니다.', () => {
-    render(<ServiceList serviceList={[]} />);
+    render(
+      <ServiceList
+        serviceCount={0}
+        serviceList={[]}
+        onDeleteServiceItem={() => {}}
+      />,
+    );
 
     expect(screen.getByRole('img', { name: 'empty' })).toBeInTheDocument();
     expect(screen.queryByText('There are no services')).toBeInTheDocument();

src/components/service/ServiceList/index.tsx

@@ -6,28 +6,38 @@ import ServiceItem from '../ServiceItem';
 import { emptyStyle, headerStyle, listStyle, wrapperStyle } from './style';
 
 type ServiceListProps = {
+  serviceCount: number;
   serviceList: {
     id: number;
     name: string;
     domain: string | null;
     clientId: string;
   }[];
+  onDeleteServiceItem: (id: string) => void;
 };
 
-const ServiceList: FC<ServiceListProps> = ({ serviceList }) => {
+const ServiceList: FC<ServiceListProps> = ({
+  serviceCount,
+  serviceList,
+  onDeleteServiceItem,
+}) => {
   return (
     <section css={wrapperStyle}>
       {serviceList && serviceList.length > 0 ? (
         <>
-          <h2 css={headerStyle}>Services</h2>
+          <h2 css={headerStyle}>
+            Services <span>{serviceCount}</span>
+          </h2>
           <div css={listStyle}>
             {serviceList.map((service) => {
               return (
                 <ServiceItem
                   key={service.id}
+                  id={service.id}
                   name={service.name}
                   domain={service.domain || ''}
                   clientId={service.clientId}
+                  onDeleteServiceItem={onDeleteServiceItem}
                 />
               );
             })}

src/components/service/ServiceList/style.ts

@@ -9,6 +9,10 @@ export const headerStyle = (theme: Theme): SerializedStyles => css`
   color: ${theme.colorPrimary};
   font-size: 26px;
   margin: 30px 0;
+
+  span {
+    font-size: 24px;
+  }
 `;
 
 export const listStyle = css`

src/hooks/useConfirmModal.ts

@@ -1,13 +1,13 @@
 import {
-  useSetConfirmModalState,
   ConfirmModalStateType,
+  useSetConfirmModalState,
 } from '@/atoms/confirmModalState';
 
-const useConfirmModal = (): readonly [
-  open: (next?: Partial<ConfirmModalStateType>) => void,
-  close: (next?: Partial<ConfirmModalStateType>) => void,
-  setConfirmModal: (next?: Partial<ConfirmModalStateType>) => void,
-] => {
+const useConfirmModal = (): {
+  open: (next?: Partial<ConfirmModalStateType>) => void;
+  close: (next?: Partial<ConfirmModalStateType>) => void;
+  setConfirmModal: (next?: Partial<ConfirmModalStateType>) => void;
+} => {
   const setConfirmModalState = useSetConfirmModalState();
 
   const setConfirmModal = (next?: Partial<ConfirmModalStateType>) =>
@@ -19,7 +19,7 @@ const useConfirmModal = (): readonly [
   const close = (next?: Partial<ConfirmModalStateType>) =>
     setConfirmModalState((prev) => ({ ...prev, next, isOpen: false }));
 
-  return [open, close, setConfirmModal];
+  return { open, close, setConfirmModal };
 };
 
 export default useConfirmModal;

src/hooks/useService.ts

@@ -0,0 +1,69 @@
+import { useEffect, useState } from 'react';
+
+import { serviceApi } from '@/apis';
+import { NETWORK_ERROR, UNEXPECTED_ERROR } from '@/constants/error';
+import { ServiceBasicInfo } from '@/types';
+
+const useService = (): {
+  isLoading: boolean;
+  error: string;
+  serviceInfo: { count: number; serviceList: ServiceBasicInfo[] };
+  deleteService: (id: string) => Promise<void>;
+} => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [serviceInfo, setServiceInfo] = useState({
+    count: 0,
+    serviceList: [],
+  });
+
+  const getServiceListAndCount = async () => {
+    try {
+      setIsLoading(true);
+
+      const { count, projectList } = await serviceApi.getListAndCount();
+      setServiceInfo({
+        count,
+        serviceList: projectList,
+      });
+    } catch (e) {
+      if (e.response) {
+        setError(UNEXPECTED_ERROR);
+      } else {
+        setError(NETWORK_ERROR);
+      }
+      throw e;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const deleteService = async (id: string) => {
+    try {
+      setIsLoading(true);
+
+      await serviceApi.deleteItem(id);
+    } catch (e) {
+      if (e.response) {
+        setError(UNEXPECTED_ERROR);
+      } else {
+        setError(NETWORK_ERROR);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    getServiceListAndCount();
+  }, []);
+
+  return {
+    isLoading,
+    error,
+    serviceInfo,
+    deleteService,
+  };
+};
+
+export default useService;