feat(web): 500에러 컴포넌트 추가 (#101)

* feat: 500에러 컴포넌트

* chore: 확장자 추가

* feat: 이미지 추가 및 route

* chore: @types, tsconfig

packages/web-domains/src/common/components/Error/500.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { Button, Txt } from '@sds/components';
+import { colors } from '@sds/theme';
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+
+import ErrorImage from './images/error.png';
+import { buttonsContainer, codeCss, containerCss, descriptionCss, titleCss } from './styles';
+
+export const Error500 = () => {
+  const router = useRouter();
+
+  return (
+    <div style={{ backgroundColor: colors.secondary50 }} css={containerCss}>
+      <h1 style={{ color: colors.secondary500 }} css={codeCss}>
+        500
+      </h1>
+      <h2 css={titleCss}>잠시 후 다시 확인해주세요!</h2>
+      <Txt typography="body2" as="h3" color={colors.grey600} css={descriptionCss}>
+        앗, 에러가 발생했어요.
+        <br />
+        잠시 후 다시 시도해 주세요.
+      </Txt>
+      <Image src={ErrorImage} width={288} height={304} alt="error" />
+      <div css={buttonsContainer}>
+        <Button onClick={() => router.back()}>이전 페이지로 가기</Button>
+        <Button variant="sub" onClick={() => router.push('/home')}>
+          홈으로 가기
+        </Button>
+      </div>
+    </div>
+  );
+};

packages/web-domains/src/common/components/Error/index.ts

@@ -0,0 +1 @@
+export { Error500 } from './500';

packages/web-domains/src/common/components/Error/styles.ts

@@ -0,0 +1,42 @@
+import { css } from '@emotion/react';
+import { fontWeightVariants } from '@sds/components';
+import { colors, size } from '@sds/theme';
+
+export const containerCss = css({
+  width: '100%',
+  height: '100dvh',
+  paddingTop: size.xl,
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  position: 'relative',
+});
+
+export const codeCss = css({
+  fontSize: '64px',
+  fontWeight: fontWeightVariants.bold,
+  marginBottom: size['2xs'],
+});
+
+export const titleCss = css({
+  fontSize: '24px',
+  fontWeight: fontWeightVariants.bold,
+  color: colors.black,
+  marginBottom: size['3xs'],
+});
+
+export const descriptionCss = css({
+  textAlign: 'center',
+  marginBottom: '50px',
+});
+
+export const buttonsContainer = css({
+  position: 'absolute',
+  bottom: 0,
+  width: '100%',
+  padding: size['2xs'],
+
+  '& > button  + button': {
+    marginTop: size['5xs'],
+  },
+});

packages/web-domains/tsconfig.json

@@ -13,11 +13,6 @@
       }
     ]
   },
-  "include": [
-    "src",
-    "../../apps/web/layout/RootLayout.styles.ts",
-    "../../apps/web/layout/RootLayout.tsx",
-    "images.d.ts"
-  ],
+  "include": ["**/*.ts", "**/*.tsx", "../../../@types"],
   "exclude": ["node_modules", "dist"]
 }