Merge pull request #88 from Kernel360/ui-details-loading

공통 컴포넌트: DetailsLoading

src/components/details/details-loading/DetailsLoading.module.scss

@@ -0,0 +1,12 @@
+.loadingContainer {
+  img {
+    display: block;
+    margin: 0 auto;
+  }
+
+  span {
+    display: block;
+    width: fit-content;
+    margin: 0 auto;
+  }
+}

src/components/details/details-loading/DetailsLoading.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import DetailsLoading from './DetailsLoading';
+
+const meta = {
+  title: 'details/DetailsLoading',
+  component: DetailsLoading,
+  parameters: {
+  },
+  tags: ['autodocs'],
+  argTypes: {
+  },
+} satisfies Meta<typeof DetailsLoading>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const defaultComponent: Story = {
+  args: {
+
+  },
+};

src/components/details/details-loading/DetailsLoading.tsx

@@ -0,0 +1,23 @@
+import classNames from 'classnames/bind';
+import Image from 'next/image';
+
+import Spacing from '@shared/spacing/Spacing';
+import Text from '@shared/text/Text';
+
+import styles from './DetailsLoading.module.scss';
+
+const cx = classNames.bind(styles);
+
+function DetailsLoading() {
+  return (
+    <div className={cx('loadingContainer')}>
+      <Spacing size={243} />
+      <Image src="/assets/DetailsLoading.png" alt="로딩 중.." width={242} height={200} />
+      <Spacing size={16} />
+      <Text typography="t3" color="primary" bold>잠시만 기다려 주세요.</Text>
+      <Text typography="t6" color="tertiary">해당 페이지로 이동 중입니다.</Text>
+    </div>
+  );
+}
+
+export default DetailsLoading;