✨ Feat: 로딩에러 컴포넌트 구현 (sprint6-part2#48)

* ✨ Feat: 로딩 에러 컴포넌트 UI 구현

* ✨ Feat: 버튼 클릭 시 새로고침

* ✨ Feat: 로딩에러 컴포넌트에 로고 추가

src/components/LoadingError/index.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import CustomButton from '../CustomButton';
+import Logo from '@/assets/icons/Logo';
+import PropTypes from 'prop-types';
+import style from './styles.module.scss';
+
+/**
+ * @param {string} errorMessage 에러메시지 문구
+ */
+const LoadingError = ({ errorMessage }) => {
+  const handleRefresh = () => {
+    window.location.reload();
+  };
+
+  return (
+    <div className={style.error}>
+      <Logo />
+      <h3>문제가 발생했습니다</h3>
+      <p>{errorMessage}</p>
+      <CustomButton rounded btnText="페이지 새로고침" onClick={handleRefresh} />
+    </div>
+  );
+};
+
+LoadingError.propTypes = {
+  errorMessage: PropTypes.string.isRequired,
+};
+
+export default LoadingError;

src/components/LoadingError/styles.module.scss

@@ -0,0 +1,24 @@
+@import '../../styles/';
+
+.error {
+  text-align: center;
+
+  margin: 0 auto;
+  padding-block: 10px;
+
+  white-space: pre-wrap;
+
+  h3 {
+    margin-top: 45px;
+    @include font-base($color-brand-orange, 600, 18px, 26px);
+  }
+
+  p {
+    margin-bottom: 15px;
+    @include font-base($color-white, 600, 14px, 26px);
+  }
+
+  button {
+    width: 120px;
+  }
+}

src/pages/ListPage/MonthlyChart/index.jsx

@@ -44,7 +44,7 @@ const MonthlyChart = () => {
         name: '추가 버튼 눌렀구나',
         totalVotes: 1000,
         profilePicture:
-        'https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/Fandom-K/idol/1714613892649/ive1.jpeg',
+          'https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/Fandom-K/idol/1714613892649/ive1.jpeg',
       },
     ];
     setIdolList(newArr);

src/pages/TestPage/index.jsx

@@ -9,6 +9,7 @@ import Modal from '@/components/Modal';
 import ModalHeader from '@/components/Modal/components/ModalHeader';
 // import ModalMobileHeader from '@/components/Modal/components/ModalMobileHeader';
 import Profile from '@/components/Profile';
+import LoadingError from '@/components/LoadingError';
 
 const TestPage = () => {
   const [isOpen, openModal, closeModal] = useModal();
@@ -18,8 +19,7 @@ const TestPage = () => {
       <Header />
       <div
         style={{ display: 'flex', justifyContent: 'center', padding: '24px' }}
-      >
-      </div>
+      ></div>
       <div style={{ display: 'flex', alignItems: 'center' }}>
         <Profile
           clicked
@@ -105,6 +105,12 @@ const TestPage = () => {
           )}
         </Carousel>
       </div>
+      <div>
+        <LoadingError errorMessage="후원 목록을 가져오지 못했습니다. 다시 시도해주세요" />
+        <LoadingError
+          errorMessage={`이렇게 작성하면 줄바꿈이 됩니다.\n다시 시도해주세요`}
+        />
+      </div>
     </div>
   );
 };