[FE] feat: 에러, 로딩 페이지 구현 및 적용

frontend/src/components/ReviewPreviewCard/styles.ts

@@ -53,6 +53,7 @@ export const Visibility = styled.div`
   display: flex;
   gap: 0.6rem;
   align-items: center;
+
   font-size: 1.6rem;
   font-weight: 700;
 

frontend/src/components/common/Button/index.tsx

@@ -5,10 +5,16 @@ import * as S from './styles';
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   buttonType: ButtonType;
   text: string;
+  icon?: string;
 }
 
-const Button = ({ buttonType, text }: ButtonProps) => {
-  return <S.Button buttonType={buttonType}>{text}</S.Button>;
+const Button = ({ buttonType, text, icon, onClick }: ButtonProps) => {
+  return (
+    <S.Button buttonType={buttonType} onClick={onClick}>
+      {icon && <S.Icon src={icon} alt="아이콘" />}
+      {text}
+    </S.Button>
+  );
 };
 
 export default Button;

frontend/src/components/common/Button/styles.ts

@@ -60,3 +60,7 @@ export const Button = styled.button<{ buttonType: ButtonType }>`
 
   ${({ buttonType, theme }) => getButtonStyle(buttonType, theme)};
 `;
+
+export const Icon = styled.img`
+  margin-right: 8px;
+`;

frontend/src/index.tsx

@@ -6,6 +6,7 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import App from '@/App';
 
 import DetailedReviewPage from './pages/DetailedReviewPage';
+import ErrorPage from './pages/ErrorPage';
 import ReviewPreviewListPage from './pages/ReviewPreviewListPage';
 import ReviewWritingPage from './pages/ReviewWriting';
 import globalStyles from './styles/globalStyles';
@@ -15,6 +16,7 @@ const router = createBrowserRouter([
   {
     path: '/',
     element: <App />,
+    errorElement: <ErrorPage />,
     children: [
       {
         path: 'user',

frontend/src/pages/DetailedReviewPage/index.tsx

@@ -5,6 +5,7 @@ import { ReviewComment } from '@/components';
 import { DetailReviewData } from '@/types';
 
 import { getDetailedReviewApi } from '../../apis/review';
+import LoadingPage from '../LoadingPage';
 
 import KeywordSection from './components/KeywordSection';
 import ReviewDescription from './components/ReviewDescription';
@@ -18,14 +19,15 @@ const DetailedReviewPage = () => {
   const memberId = queryParams.get('memberId');
 
   const [detailedReview, setDetailReview] = useState<DetailReviewData>();
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
   const [errorMessage, setErrorMessage] = useState<string>('');
 
   useEffect(() => {
     const fetchReview = async () => {
       try {
-        const result = await getDetailedReviewApi({ reviewId: Number(id), memberId: Number(memberId) });
+        setIsLoading(true);
 
+        const result = await getDetailedReviewApi({ reviewId: Number(id), memberId: Number(memberId) });
         setDetailReview(result);
         setErrorMessage('');
       } catch (error) {
@@ -38,7 +40,7 @@ const DetailedReviewPage = () => {
     fetchReview();
   }, [id]);
 
-  if (isLoading) return <div>Loading...</div>;
+  if (isLoading) return <LoadingPage />;
 
   if (errorMessage) return <div>Error: {errorMessage}</div>;
   if (!detailedReview) return <div>Error: 상세보기 리뷰 데이터를 가져올 수 없어요.</div>;

frontend/src/pages/ErrorPage/components/ErrorSection/index.tsx

@@ -0,0 +1,33 @@
+import AlertTriangle from '@/assets/alertTriangle.svg';
+import Home from '@/assets/home.svg';
+import ReLoad from '@/assets/reload.svg';
+import { Button } from '@/components';
+
+import * as S from './styles';
+
+interface ErrorSectionProps {
+  errorMessage: string;
+  handleReLoad: () => void;
+  handleGoHome: () => void;
+}
+
+const ErrorSection = ({ errorMessage, handleReLoad, handleGoHome }: ErrorSectionProps) => {
+  return (
+    <S.Layout>
+      <S.ErrorLogoWrapper>
+        <img src={AlertTriangle} alt="에러 로고" />
+      </S.ErrorLogoWrapper>
+      <S.ErrorMessage>{errorMessage}</S.ErrorMessage>
+      <S.Container>
+        <S.ButtonContainer>
+          <Button buttonType="primary" text="새로고침하기" icon={ReLoad} onClick={handleReLoad} />
+        </S.ButtonContainer>
+        <S.ButtonContainer>
+          <Button buttonType="secondary" text="홈으로 이동하기" icon={Home} onClick={handleGoHome} />
+        </S.ButtonContainer>
+      </S.Container>
+    </S.Layout>
+  );
+};
+
+export default ErrorSection;

frontend/src/pages/ErrorPage/components/ErrorSection/styles.ts

@@ -0,0 +1,42 @@
+import styled from '@emotion/styled';
+
+export const Layout = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+  align-items: center;
+  justify-content: center;
+
+  height: calc(100vh - 21rem);
+`;
+
+export const ErrorLogoWrapper = styled.div`
+  & > img {
+    width: 15rem;
+    height: 15rem;
+  }
+`;
+
+export const ErrorMessage = styled.span`
+  font-size: 2rem;
+`;
+
+export const Container = styled.div`
+  display: flex;
+  gap: 3.5rem;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const ButtonContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 3rem;
+
+  & > button {
+    width: 17rem;
+    height: 5rem;
+    font-size: 1.4rem;
+  }
+`;

frontend/src/pages/ErrorPage/index.tsx

@@ -0,0 +1,43 @@
+import { useNavigate } from 'react-router';
+
+import { Main, PageLayout, SideModal, Sidebar, Topbar } from '@/components';
+import { useSidebar } from '@/hooks';
+
+import ErrorSection from './components/ErrorSection';
+
+const ERROR_MESSAGE = {
+  server_unstable: '서버와의 통신이 불안정합니다.',
+};
+
+const ErrorPage = () => {
+  const { isSidebarHidden, isSidebarModalOpen, closeSidebar, openSidebar } = useSidebar();
+  const navigate = useNavigate();
+
+  const handleReLoad = () => {
+    window.location.reload();
+  };
+
+  const handleGoHome = () => {
+    navigate('/'); // TODO: 홈 페이지 경로가 결정되면 변경 필요
+  };
+
+  return (
+    <PageLayout>
+      {isSidebarModalOpen && (
+        <SideModal isSidebarHidden={isSidebarHidden}>
+          <Sidebar closeSidebar={closeSidebar} />
+        </SideModal>
+      )}
+      <Topbar openSidebar={openSidebar} />
+      <Main>
+        <ErrorSection
+          errorMessage={ERROR_MESSAGE.server_unstable}
+          handleReLoad={handleReLoad}
+          handleGoHome={handleGoHome}
+        />
+      </Main>
+    </PageLayout>
+  );
+};
+
+export default ErrorPage;

frontend/src/pages/LoadingPage/components/LoadingBar/index.tsx

@@ -0,0 +1,7 @@
+import * as S from './styles';
+
+const LoadingBar = () => {
+  return <S.LoadingBar />;
+};
+
+export default LoadingBar;

frontend/src/pages/LoadingPage/components/LoadingBar/styles.ts

@@ -0,0 +1,41 @@
+import styled from '@emotion/styled';
+
+export const LoadingBar = styled.div`
+  position: relative;
+
+  display: block;
+
+  width: 30rem;
+  height: 2rem;
+
+  background-color: ${({ theme }) => theme.colors.lightPurple};
+  border-radius: 3rem;
+
+  ::before {
+    content: '';
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 0%;
+    height: 100%;
+
+    background: ${({ theme }) => theme.colors.primary};
+    border-radius: 3rem;
+
+    animation: moving 1s ease-in-out infinite;
+  }
+
+  @keyframes moving {
+    50% {
+      width: 100%;
+    }
+
+    100% {
+      right: 0;
+      left: unset;
+      width: 0;
+    }
+  }
+`;

frontend/src/pages/LoadingPage/index.tsx

@@ -0,0 +1,13 @@
+import LoadingBar from './components/LoadingBar';
+import * as S from './styles';
+
+const LoadingPage = () => {
+  return (
+    <S.Container>
+      <S.Text>Loading ....</S.Text>
+      <LoadingBar />
+    </S.Container>
+  );
+};
+
+export default LoadingPage;

frontend/src/pages/LoadingPage/styles.ts

@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: calc(100vh - 21rem);
+`;
+
+export const Text = styled.span`
+  font-size: ${({ theme }) => theme.fontSize.basic};
+  color: ${({ theme }) => theme.colors.primary};
+`;

frontend/src/pages/ReviewPreviewListPage/index.tsx

@@ -5,6 +5,8 @@ import { getReviewListApi } from '@/apis/review';
 import ReviewPreviewCard from '@/components/ReviewPreviewCard';
 import { ReviewPreview } from '@/types';
 
+import LoadingPage from '../LoadingPage';
+
 import SearchSection from './components/SearchSection';
 import * as S from './styles';
 
@@ -44,7 +46,7 @@ const ReviewPreviewListPage = () => {
       <S.Layout>
         <SearchSection onChange={() => {}} options={OPTIONS} placeholder={USER_SEARCH_PLACE_HOLDER} />
         <S.ReviewSection>
-          {loading && <p>로딩 중...</p>}
+          {loading && <LoadingPage />}
           {error && <p>{error}</p>}
           {!loading &&
             !error &&

frontend/src/pages/ReviewWriting/index.tsx

@@ -8,6 +8,8 @@ import Button from '@/components/common/Button';
 import { REVIEW } from '@/constants/review';
 import { Keyword, ReviewContent, ReviewData, WritingReviewInfoData } from '@/types';
 
+import LoadingPage from '../LoadingPage';
+
 import KeywordButton from './components/KeywordButton';
 import RevieweeComment from './components/RevieweeComment';
 import ReviewItem from './components/ReviewItem';
@@ -74,7 +76,7 @@ const ReviewWritingPage = () => {
     }
   };
 
-  if (!dataToWrite) return <div>Loading...</div>;
+  if (!dataToWrite) return <LoadingPage />;
 
   return (
     <S.ReviewWritingPage onSubmit={handleSubmitReview}>