feat: Empty View 컴포넌트 분리 (#1618)

* feat: EmptyView 컴포넌트 추가 * refactor: Empty View 컴포넌트로 변경
sopt-makers · Nov 4, 2024 · e505106 · e505106
1 parent 0a9d9bb
commit e505106
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 74 deletions.
diff --git a/src/components/common/EmptyView/index.tsx b/src/components/common/EmptyView/index.tsx
@@ -0,0 +1,53 @@
+import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
+import { fonts } from '@sopt-makers/fonts';
+
+import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
+
+const EmptyView = () => {
+  return (
+    <StyledEmpty>
+      <EmptyTitle>OMG... 검색 결과가 없어요.</EmptyTitle>
+      <EmptyDescription>검색어를 바르게 입력했는지 확인하거나, 필터를 변경해보세요.</EmptyDescription>
+    </StyledEmpty>
+  );
+};
+
+export default EmptyView;
+
+const StyledEmpty = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 24px;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 300px;
+  max-height: 100%;
+
+  & > span {
+    display: block;
+  }
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    gap: 12px;
+  }
+`;
+
+const EmptyTitle = styled.span`
+  ${fonts.HEADING_32_B};
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    ${fonts.HEADING_24_B};
+  }
+`;
+
+const EmptyDescription = styled.span`
+  color: ${colors.gray400};
+  ${fonts.BODY_16_M};
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    ${fonts.BODY_14_M};
+  }
+`;
diff --git a/src/components/members/main/MemberList/index.tsx b/src/components/members/main/MemberList/index.tsx
@@ -9,6 +9,7 @@ import { useRouter } from 'next/router';
 import React, { ChangeEvent, FC, ReactNode, useEffect, useMemo, useState } from 'react';
 
 import { Profile } from '@/api/endpoint_LEGACY/members/type';
+import EmptyView from '@/components/common/EmptyView';
 import Responsive from '@/components/common/Responsive';
 import Text from '@/components/common/Text';
 import useEventLogger from '@/components/eventLogger/hooks/useEventLogger';
@@ -366,12 +367,7 @@ const MemberList: FC<MemberListProps> = ({ banner }) => {
             ))}
           </StyledCardWrapper>
 
-          {isEmpty && (
-            <StyledEmpty>
-              <EmptyTitle>OMG... 검색 결과가 없어요.</EmptyTitle>
-              <EmptyDescription>검색어를 바르게 입력했는지 확인하거나, 필터를 변경해보세요.</EmptyDescription>
-            </StyledEmpty>
-          )}
+          {isEmpty && <EmptyView />}
           <Responsive only='desktop'>
             <StyledTopWrapper>
               <div
@@ -619,43 +615,6 @@ const StyledCardWrapper = styled.div`
   }
 `;
 
-const StyledEmpty = styled.div`
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: 24px;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  min-height: 300px;
-  max-height: 100%;
-
-  & > span {
-    display: block;
-  }
-
-  @media ${MOBILE_MEDIA_QUERY} {
-    gap: 12px;
-  }
-`;
-
-const EmptyTitle = styled.span`
-  ${textStyles.SUIT_32_B};
-
-  @media ${MOBILE_MEDIA_QUERY} {
-    ${textStyles.SUIT_24_B};
-  }
-`;
-
-const EmptyDescription = styled.span`
-  color: ${colors.gray400};
-  ${textStyles.SUIT_16_M};
-
-  @media ${MOBILE_MEDIA_QUERY} {
-    ${textStyles.SUIT_14_M}
-  }
-`;
-
 const HLine = styled.hr`
   position: absolute;
   bottom: 0;

diff --git a/src/components/projects/main/ProjectList.tsx b/src/components/projects/main/ProjectList.tsx
@@ -9,6 +9,7 @@ import Link from 'next/link';
 import React, { useMemo, useState } from 'react';
 import { BooleanParam, createEnumParam, StringParam, useQueryParams, withDefault } from 'use-query-params';
 
+import EmptyView from '@/components/common/EmptyView';
 import Loading from '@/components/common/Loading';
 import Responsive from '@/components/common/Responsive';
 import Text from '@/components/common/Text';
@@ -136,10 +137,7 @@ const ProjectList = () => {
         )}
 
         {totalCount === 0 ? (
-          <StyledEmpty>
-            <EmptyTitle>OMG... 검색 결과가 없어요.</EmptyTitle>
-            <EmptyDescription>검색어를 바르게 입력했는지 확인하거나, 필터를 변경해보세요.</EmptyDescription>
-          </StyledEmpty>
+          <EmptyView />
         ) : (
           <StyledGridContainer>
             {data?.pages.map((page) =>
@@ -311,33 +309,6 @@ const StyledGridContainer = styled.div`
   }
 `;
 
-const StyledEmpty = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  align-items: center;
-  justify-content: center;
-  margin-top: 240px;
-`;
-
-const EmptyTitle = styled.p`
-  color: ${colors.gray10};
-  ${fonts.TITLE_32_SB};
-
-  @media ${MOBILE_MEDIA_QUERY} {
-    ${fonts.TITLE_24_SB};
-  }
-`;
-
-const EmptyDescription = styled.span`
-  color: ${colors.gray400};
-  ${fonts.BODY_16_M};
-
-  @media ${MOBILE_MEDIA_QUERY} {
-    ${fonts.BODY_14_M};
-  }
-`;
-
 const LoadingContainer = styled.div`
   display: flex;
   flex-direction: column;