feat: SomethingWentWrong 페이지 구현

- SomethingWentWrong 컴포넌트로 대체하여 오류 발생 시 사용자 경험을 개선함
- 새로운 오류 이미지(SomethingWentWrong.png)를 추가하고, 스타일링을 위한 SomethingWentWrong.styles.ts 파일을 생성함
- 오류 메시지 및 재시도 버튼을 포함한 레이아웃을 구성하여 사용자에게 명확한 피드백을 제공함

Author: Cllaude99

apps/web/src/assets/images/SomethingWentWrong.png

@@ -0,0 +1,93 @@
+import styled from '@emotion/styled';
+
+const Container = styled.div`
+  width: 100%;
+  height: 100%;
+  max-width: ${({ theme }) => theme.breakpoints.mobile};
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 20px;
+`;
+
+const IconWrapper = styled.div`
+  margin-top: 220px;
+  width: 128px;
+  height: 128px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const ErrorImage = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+`;
+
+const ContentWrapper = styled.div`
+  margin-top: 40px;
+  width: 100%;
+  text-align: center;
+`;
+
+const Title = styled.h1`
+  ${({ theme }) => theme.typography.title.display1};
+  color: ${({ theme }) => theme.palette.common.white};
+  margin-bottom: 8px;
+`;
+
+const Description = styled.p`
+  ${({ theme }) => theme.typography.body.body1};
+  color: ${({ theme }) => theme.palette.gray['gray-5']};
+  white-space: pre-line;
+  text-align: center;
+`;
+
+const ErrorText = styled.p`
+  ${({ theme }) => theme.typography.body.caption};
+  color: ${({ theme }) => theme.palette.gray['gray-5']};
+  margin-top: 8px;
+`;
+
+const ButtonWrapper = styled.div`
+  position: fixed;
+  bottom: 40px;
+  left: 20px;
+  right: 20px;
+  padding: 0px 20px;
+  max-width: ${({ theme }) => theme.breakpoints.mobile};
+  margin: 0 auto;
+`;
+
+const StyledButton = styled.button`
+  width: 100%;
+  height: 52px;
+  background-color: ${({ theme }) => theme.palette.main.pink[50]};
+  border: none;
+  border-radius: 10px;
+  color: ${({ theme }) => theme.palette.common.white};
+  ${({ theme }) => theme.typography.title.subhead1};
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.palette.main.pink[40]};
+  }
+
+  &:active {
+    background-color: ${({ theme }) => theme.palette.main.pink[40]};
+  }
+`;
+
+export {
+  Container,
+  IconWrapper,
+  ErrorImage,
+  ContentWrapper,
+  Title,
+  Description,
+  ErrorText,
+  ButtonWrapper,
+  StyledButton,
+};

apps/web/src/components/ErrorPage/NotFound.tsx

@@ -1,3 +1,9 @@
+import Layout from '@/components/Layout';
+import { useTheme } from '@emotion/react';
+import SomethingWentWrongIcon from '@/assets/images/SomethingWentWrong.png';
+import * as S from './SomethingWentWrong.styles';
+import { useNavigate } from 'react-router-dom';
+
 interface SomethingWentWrongProps {
   onRetry?: () => void;
   status?: string;
@@ -9,13 +15,41 @@ const SomethingWentWrong = ({
   status,
   errorMessage,
 }: SomethingWentWrongProps) => {
+  const theme = useTheme();
+  const navigate = useNavigate();
+
   return (
-    <div>
-      <h1>Something went wrong!</h1>
-      {status && <div>{status}</div>}
-      {errorMessage && <div>{errorMessage}</div>}
-      {onRetry && <button onClick={onRetry}>Retry</button>}
-    </div>
+    <Layout
+      layoutStyle={{
+        backgroundColor: theme.palette.gray['gray-10'],
+      }}
+    >
+      <S.Container>
+        <S.IconWrapper>
+          <S.ErrorImage
+            src={SomethingWentWrongIcon}
+            alt="오류가 발생했습니다"
+          />
+        </S.IconWrapper>
+        <S.ContentWrapper>
+          <S.Title>오류가 발생하였습니다.</S.Title>
+          <S.Description>
+            문제를 해결하기 위해 열심히 노력하고 있어요.
+            {'\n'}잠시 후 다시 시도해 주세요!
+          </S.Description>
+          {status && <S.ErrorText>{status}</S.ErrorText>}
+          {errorMessage && <S.ErrorText>{errorMessage}</S.ErrorText>}
+        </S.ContentWrapper>
+        <S.ButtonWrapper>
+          {onRetry && (
+            <S.StyledButton onClick={onRetry}>다시 시도하기</S.StyledButton>
+          )}
+          <S.StyledButton onClick={() => navigate('/')}>
+            홈으로 이동
+          </S.StyledButton>
+        </S.ButtonWrapper>
+      </S.Container>
+    </Layout>
   );
 };
 

apps/web/src/components/ErrorPage/SomethingWentWrong.styles.ts

@@ -6,7 +6,6 @@ import {
 } from 'react-router-dom';
 import { PATH } from '@/constants/path';
 
-import NotFound from '@/components/ErrorPage/NotFound';
 import SomethingWentWrong from '@/components/ErrorPage/SomethingWentWrong';
 import APIErrorBoundary from '@/components/ErrorBoundary/APIErrorBoundary';
 import UnknownErrorBoundary from '@/components/ErrorBoundary/UnKnownErrorBoudary';
@@ -56,7 +55,7 @@ const router = createBrowserRouter([
       ...createAuthRouter('PUBLIC', []),
       {
         path: '*',
-        element: <NotFound />,
+        element: <SomethingWentWrong />,
       },
     ],
   },