From 7899a0613cda6c8911ffa810d389b48a6ad53aa5 Mon Sep 17 00:00:00 2001
From: Seogeurim <geulims@naver.com>
Date: Tue, 28 Dec 2021 23:14:09 +0900
Subject: [PATCH] =?UTF-8?q?[#65]=20refactor:=20NoService=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1=20=EB=B0=8F=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

서비스가 없음을 표시하는 컴포넌트가 다른 곳에서도 쓰일 일이 있어서 분리
---
 src/components/service/NoService/index.tsx   | 16 ++++++++++++++++
 src/components/service/NoService/style.ts    | 16 ++++++++++++++++
 src/components/service/ServiceList/index.tsx | 10 +++-------
 src/components/service/ServiceList/style.ts  | 15 ---------------
 4 files changed, 35 insertions(+), 22 deletions(-)
 create mode 100644 src/components/service/NoService/index.tsx
 create mode 100644 src/components/service/NoService/style.ts

diff --git a/src/components/service/NoService/index.tsx b/src/components/service/NoService/index.tsx
new file mode 100644
index 0000000..da1d791
--- /dev/null
+++ b/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;
diff --git a/src/components/service/NoService/style.ts b/src/components/service/NoService/style.ts
new file mode 100644
index 0000000..f35bc36
--- /dev/null
+++ b/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;
+  }
+`;
diff --git a/src/components/service/ServiceList/index.tsx b/src/components/service/ServiceList/index.tsx
index d0306b1..5de8cc1 100644
--- a/src/components/service/ServiceList/index.tsx
+++ b/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>
   );
diff --git a/src/components/service/ServiceList/style.ts b/src/components/service/ServiceList/style.ts
index 563caeb..4cf54c1 100644
--- a/src/components/service/ServiceList/style.ts
+++ b/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;
-  }
-`;