feat(web, web-domains): not-found 페이지 추가 (#137)

* chore: not-found 페이지

* fix: 경로 export 수정

Co-authored-by: Doeun Kim <doeunnkimm@gmail.com>

* fix: Icon 컴포넌트 분리

* fix: Icon 이름 수정

---------

Co-authored-by: Doeun Kim <doeunnkimm@gmail.com>

apps/web/app/not-found.tsx

@@ -0,0 +1,7 @@
+import { Error404 } from '@sambad/web-domains/common';
+
+const NotFoundPage = () => {
+  return <Error404 />;
+};
+
+export default NotFoundPage;

packages/core/sds/src/components/Icon/assets/CrossCircle.tsx

@@ -0,0 +1,14 @@
+import { IconAssetProps } from '../types';
+
+export const CrossCircle = (props: IconAssetProps) => {
+  const { color, size } = props;
+
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 65 64" fill="none" {...props}>
+      <path
+        d="M32.5 0C14.8269 0 0.5 14.3269 0.5 32C0.5 49.6731 14.8269 64 32.5 64C50.1731 64 64.5 49.6731 64.5 32C64.4809 14.3347 50.1653 0.019125 32.5 0ZM43.1666 38.8986C44.2503 39.896 44.3203 41.583 43.3229 42.6666C42.3255 43.7503 40.6385 43.8203 39.5549 42.8229C39.5006 42.773 39.4486 42.7209 39.3986 42.6666L32.5 35.7706L25.604 42.6666C24.5446 43.6898 22.8565 43.6604 21.8334 42.601C20.8354 41.5676 20.8354 39.9294 21.8334 38.896L28.7294 32L21.8334 25.104C20.8103 24.0446 20.8396 22.3565 21.899 21.3334C22.9324 20.3354 24.5706 20.3354 25.604 21.3334L32.5 28.2294L39.3986 21.3334C40.396 20.2498 42.083 20.1798 43.1666 21.1771C44.2503 22.1745 44.3203 23.8615 43.3229 24.9451C43.273 24.9994 43.2209 25.0514 43.1666 25.1014L36.2706 32L43.1666 38.8986Z"
+        fill={color}
+      />
+    </svg>
+  );
+};

packages/core/sds/src/components/Icon/constants.ts

@@ -7,6 +7,7 @@ import { AngleUpIcon } from './assets/AngleUp';
 import { CaretDownIcon } from './assets/CaretDown';
 import { CheckIcon } from './assets/Check';
 import { CommentsIcon } from './assets/CommentsIcon';
+import { CrossCircle } from './assets/CrossCircle';
 import { CrownIcon } from './assets/Crown';
 import { Landscape } from './assets/Landscape';
 import { SadUserIcon } from './assets/SadUserIcon';
@@ -32,4 +33,5 @@ export const iconMap = {
   stats: Stats,
   upload: Upload,
   check: CheckIcon,
+  'cross-circle': CrossCircle,
 };

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

@@ -0,0 +1,31 @@
+'use client';
+
+import { css } from '@emotion/react';
+import { Icon, Txt } from '@sds/components';
+import { colors, size } from '@sds/theme';
+
+import { titleCss } from './styles';
+
+export const Error404 = () => {
+  return (
+    <div css={containerCss}>
+      <Icon name="cross-circle" size={65} color={colors.grey400} style={{ marginBottom: size.sm }} />
+      <h1 css={titleCss}>페이지를 찾을 수 없습니다</h1>
+      <Txt typography="body2" as="h2" color={colors.grey600} css={{ textAlign: 'center' }}>
+        죄송합니다. 원하시는 페이지를 찾을 수 없습니다.
+        <br />
+        요청하신 페이지가 사라졌거나, 잘못된 경로입니다.
+      </Txt>
+    </div>
+  );
+};
+
+const containerCss = css({
+  width: '100%',
+  height: '100dvh',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  position: 'relative',
+});

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

@@ -1 +1,2 @@
 export { Error500 } from './500';
+export { Error404 } from './404';

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

@@ -4,3 +4,4 @@ export { QueryClientProvider } from './contexts/QueryClientProvider';
 export { RootLayout } from './layout/RootLayout';
 export { GlobalStyle } from './styles/GlobalStyles';
 export { getWebDomain } from './utils/getWebDomain';
+export * from './components/Error';