[#65] refactor: NoService 컴포넌트 생성 및 분리

서비스가 없음을 표시하는 컴포넌트가 다른 곳에서도 쓰일 일이 있어서 분리

src/components/service/NoService/index.tsx

@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+
+import emptyImg from '@/assets/images/empty.png';
+
+import { emptyStyle } from './style';
+
+const NoService: FC = () => {
+  return (
+    <div css={emptyStyle}>
+      <img src={emptyImg} alt="empty" />
+      <p>There are no services</p>
+    </div>
+  );
+};
+
+export default NoService;

src/components/service/NoService/style.ts

@@ -0,0 +1,16 @@
+import { SerializedStyles, Theme, css } from '@emotion/react';
+
+export const emptyStyle = (theme: Theme): SerializedStyles => css`
+  text-align: center;
+
+  img {
+    width: 320px;
+  }
+
+  p {
+    font-family: ${theme.fontCoding};
+    font-size: 20px;
+    color: ${theme.colorPrimary};
+    margin-top: 5px;
+  }
+`;

src/components/service/ServiceList/index.tsx

@@ -1,9 +1,8 @@
 import React, { FC } from 'react';
 
-import emptyImg from '@/assets/images/empty.png';
-
+import NoService from '../NoService';
 import ServiceItem from '../ServiceItem';
-import { emptyStyle, headerStyle, listStyle, wrapperStyle } from './style';
+import { headerStyle, listStyle, wrapperStyle } from './style';
 
 type ServiceListProps = {
   serviceCount: number;
@@ -44,10 +43,7 @@ const ServiceList: FC<ServiceListProps> = ({
           </div>
         </>
       ) : (
-        <div css={emptyStyle}>
-          <img src={emptyImg} alt="empty" />
-          <p>There are no services</p>
-        </div>
+        <NoService />
       )}
     </section>
   );

src/components/service/ServiceList/style.ts

@@ -20,18 +20,3 @@ export const listStyle = css`
   flex-direction: column;
   align-items: center;
 `;
-
-export const emptyStyle = (theme: Theme): SerializedStyles => css`
-  text-align: center;
-
-  img {
-    width: 320px;
-  }
-
-  p {
-    font-family: ${theme.fontCoding};
-    font-size: 20px;
-    color: ${theme.colorPrimary};
-    margin-top: 5px;
-  }
-`;