From 2e77d12b5d92968af692a5b6ca9cb18f772cb5df Mon Sep 17 00:00:00 2001
From: Leejin Yang <ejin1996@gmail.com>
Date: Wed, 20 Sep 2023 15:34:47 +0900
Subject: [PATCH] =?UTF-8?q?[FE]=20feat:=20=EB=A1=9C=EB=94=A9=20=EC=8A=A4?=
 =?UTF-8?q?=ED=94=BC=EB=84=88=20=EC=B6=94=EA=B0=80=20(#590)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 로딩 컴포넌트에 접시 스피너 추가

* refactor: 스피너 애니메이션 수정
---
 .../src/components/Common/Loading/Loading.tsx | 48 ++++++++++++++++++-
 1 file changed, 46 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Common/Loading/Loading.tsx b/frontend/src/components/Common/Loading/Loading.tsx
index 17ce56a87..4ef7d374e 100644
--- a/frontend/src/components/Common/Loading/Loading.tsx
+++ b/frontend/src/components/Common/Loading/Loading.tsx
@@ -1,5 +1,49 @@
-const Loading = () => {
-  return <div>로딩중..</div>;
+import { Text } from '@fun-eat/design-system';
+import styled, { keyframes } from 'styled-components';
+
+import PlateImage from '@/assets/plate.svg';
+
+const DEFAULT_DESCRIPTION = '잠시만 기다려주세요 🥄';
+
+interface LoadingProps {
+  customHeight?: string;
+  description?: string;
+}
+
+const Loading = ({ customHeight = '100%', description = DEFAULT_DESCRIPTION }: LoadingProps) => {
+  return (
+    <LoadingContainer customHeight={customHeight}>
+      <PlateImageWrapper>
+        <PlateImage width={120} />
+      </PlateImageWrapper>
+      <Text align="center">{description}</Text>
+    </LoadingContainer>
+  );
 };
 
 export default Loading;
+
+type LoadingContainerStyleProps = Pick<LoadingProps, 'customHeight'>;
+
+const LoadingContainer = styled.div<LoadingContainerStyleProps>`
+  display: flex;
+  flex-direction: column;
+  row-gap: 36px;
+  justify-content: center;
+  align-items: center;
+  height: ${({ customHeight }) => customHeight};
+`;
+
+const rotate = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(-360deg);
+  }
+`;
+
+const PlateImageWrapper = styled.div`
+  animation: ${rotate} 1.5s ease-in-out infinite;
+`;