feat : EmptyContent 컴포넌트 생성

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;

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};
+`;

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';

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',
 };