From b62d6d50e69569536df9bc0cc0db3e01994d1b39 Mon Sep 17 00:00:00 2001
From: badahertz52 <badahertz52@gmail.com>
Date: Tue, 24 Dec 2024 17:23:12 +0900
Subject: [PATCH] =?UTF-8?q?feat=20:=20EmptyContent=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/assets/emptyContentIcon.svg      | 12 +++++++
 .../components/common/EmptyContent/index.tsx  | 28 ++++++++++++++++
 .../components/common/EmptyContent/styles.ts  | 32 +++++++++++++++++++
 frontend/src/components/common/index.tsx      |  2 +-
 frontend/src/styles/theme.ts                  |  3 +-
 5 files changed, 75 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/assets/emptyContentIcon.svg
 create mode 100644 frontend/src/components/common/EmptyContent/index.tsx
 create mode 100644 frontend/src/components/common/EmptyContent/styles.ts

diff --git a/frontend/src/assets/emptyContentIcon.svg b/frontend/src/assets/emptyContentIcon.svg
new file mode 100644
index 000000000..1c1d3e1d9
--- /dev/null
+++ b/frontend/src/assets/emptyContentIcon.svg
@@ -0,0 +1,12 @@
+<svg width="309" height="198" viewBox="0 0 309 198" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M162.55 171.599C145.287 187.794 122.244 197.683 96.9359 197.683C43.3997 197.683 0 153.43 0 98.8416C0 44.2529 43.3997 0 96.9359 0C150.472 0 193.872 44.2529 193.872 98.8416C193.872 117.097 189.018 134.197 180.555 148.872L204.622 166.748C211.086 171.55 211.876 180.218 206.387 186.11C200.898 192.001 191.208 192.885 184.743 188.083L162.55 171.599Z" fill="#C9D6DF"/>
+<path d="M174.485 98.8409C174.485 142.512 139.765 177.914 96.9361 177.914C54.1072 177.914 19.3875 142.512 19.3875 98.8409C19.3875 55.1699 54.1072 19.7676 96.9361 19.7676C139.765 19.7676 174.485 55.1699 174.485 98.8409Z" fill="#F3F3F3" fill-opacity="0.97"/>
+<ellipse cx="43.4075" cy="73.8217" rx="4.63357" ry="4.6332" fill="#C9D6DF"/>
+<ellipse cx="62.7949" cy="73.913" rx="4.63357" ry="4.72452" fill="#C9D6DF"/>
+<ellipse cx="121.17" cy="153.205" rx="4.84694" ry="4.94208" fill="#C9D6DF"/>
+<path d="M41.1709 89.209C49.5548 84.3037 61.7739 87.5408 64.0464 89.8095" stroke="#C9D6DF" stroke-width="5.35392" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M150.194 79.0742C158.326 96.126 158.135 125.483 135.71 138.379" stroke="#C9D6DF" stroke-width="8.2368" stroke-linecap="round"/>
+<circle cx="233.09" cy="187.329" r="10.01" fill="#C9D6DF"/>
+<circle cx="265.98" cy="187.329" r="10.01" fill="#C9D6DF"/>
+<circle cx="298.87" cy="187.329" r="10.01" fill="#C9D6DF"/>
+</svg>
diff --git a/frontend/src/components/common/EmptyContent/index.tsx b/frontend/src/components/common/EmptyContent/index.tsx
new file mode 100644
index 000000000..4bad95f0d
--- /dev/null
+++ b/frontend/src/components/common/EmptyContent/index.tsx
@@ -0,0 +1,28 @@
+import Icon from '@/assets/emptyContentIcon.svg';
+import { EssentialPropsWithChildren } from '@/types';
+
+import * as S from './styles';
+
+interface EmptyContentProps {
+  iconHeight?: string;
+  iconWidth?: string;
+  iconMessageGap?: string;
+  messageFontSize?: string;
+}
+
+const EmptyContent = ({
+  iconHeight,
+  iconWidth,
+  iconMessageGap,
+  messageFontSize,
+  children,
+}: EssentialPropsWithChildren<EmptyContentProps>) => {
+  return (
+    <S.EmptyContent $iconMessageGap={iconMessageGap}>
+      <S.Img $height={iconHeight} $width={iconWidth} alt="" src={Icon} />
+      <S.MessageContainer $messageFontSize={messageFontSize}>{children}</S.MessageContainer>
+    </S.EmptyContent>
+  );
+};
+
+export default EmptyContent;
diff --git a/frontend/src/components/common/EmptyContent/styles.ts b/frontend/src/components/common/EmptyContent/styles.ts
new file mode 100644
index 000000000..4037442e3
--- /dev/null
+++ b/frontend/src/components/common/EmptyContent/styles.ts
@@ -0,0 +1,32 @@
+import styled from '@emotion/styled';
+
+export const EmptyContent = styled.div<{ $iconMessageGap?: string }>`
+  display: flex;
+  flex-direction: column;
+  gap: ${(props) => props.$iconMessageGap ?? '3.2rem'};
+  align-items: center;
+`;
+interface ImgProps {
+  $height?: string;
+  $width?: string;
+}
+export const Img = styled.img<ImgProps>`
+  aspect-ratio: 39/25;
+  width: ${(props) => {
+    if (props.$width && props.$height) return props.$width;
+    if (props.$width) return props.$width;
+    return 'auto';
+  }};
+  height: ${(props) => {
+    if (props.$height && props.$width) return props.$height;
+    if (props.$height) return props.$height;
+    if (props.$width) return 'auto';
+    return '19.7rem';
+  }};
+`;
+
+export const MessageContainer = styled.div<{ $messageFontSize?: string }>`
+  font-size: ${(props) => props.$messageFontSize ?? props.theme.fontSize.medium};
+  font-weight: ${({ theme }) => theme.fontWeight.semibold};
+  color: ${({ theme }) => theme.colors.emptyContentText};
+`;
diff --git a/frontend/src/components/common/index.tsx b/frontend/src/components/common/index.tsx
index 2a15f749f..6dda8b053 100644
--- a/frontend/src/components/common/index.tsx
+++ b/frontend/src/components/common/index.tsx
@@ -10,7 +10,7 @@ export { default as Carousel } from './Carousel';
 export { default as Accordion } from './Accordion';
 export { default as Dropdown } from './Dropdown';
 export { default as Toast } from './Toast';
-
+export { default as EmptyContent } from './EmptyContent';
 export { default as OptionSwitch } from './OptionSwitch';
 export { default as ReviewEmptySection } from './ReviewEmptySection';
 export * from './modals';
diff --git a/frontend/src/styles/theme.ts b/frontend/src/styles/theme.ts
index d3370a64e..c12147f14 100644
--- a/frontend/src/styles/theme.ts
+++ b/frontend/src/styles/theme.ts
@@ -36,6 +36,7 @@ export const breakpoint = {
   medium: 1024,
   large: 1025,
 };
+
 // NOTE: 1rem = 10px
 export const fontSize: ThemeProperty<CSSProperties['fontSize']> = {
   small: '1.4rem',
@@ -45,7 +46,6 @@ export const fontSize: ThemeProperty<CSSProperties['fontSize']> = {
   large: '3.2rem',
   h2: '4.8rem',
 };
-
 export const borderRadius: ThemeProperty<CSSProperties['borderRadius']> = {
   basic: '0.8rem',
 };
@@ -72,6 +72,7 @@ export const colors: ThemeProperty<CSSProperties['color']> = {
   sidebarBackground: `rgba(0, 0, 0, 0.25)`,
   disabled: '#D8D8D8',
   disabledText: '#7F7F7F',
+  emptyContentText: '#CBD6DE',
   red: '#FF0000',
 };