[Feat] 로딩 페이지 및 스켈레톤 mixin 추가

app/loading.module.scss

@@ -0,0 +1,9 @@
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  height: 100vh;
+  @include typo-b1;
+  color: $color-gray-700;
+}

app/loading.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import classNames from 'classnames/bind'
+
+import Spinner from '@/shared/ui/spinner'
+
+import styles from './loading.module.scss'
+
+const cx = classNames.bind(styles)
+
+const LoadingPage = () => {
+  return (
+    <div className={cx('container')}>
+      <p>Loading...</p>
+      <Spinner />
+    </div>
+  )
+}
+
+export default LoadingPage

shared/styles/base/_mixins.scss

@@ -113,3 +113,14 @@
     overflow: hidden;
   }
 }
+
+// skeleton
+@mixin skeleton {
+  border-radius: 6px;
+  background-color: $color-gray-200;
+
+  div {
+    border-radius: 6px;
+    background-color: $color-gray-300;
+  }
+}

shared/ui/spinner/index.tsx

@@ -0,0 +1,15 @@
+import classNames from 'classnames/bind'
+
+import styles from './styles.module.scss'
+
+const cx = classNames.bind(styles)
+
+interface Props {
+  className?: string
+}
+
+const Spinner = ({ className }: Props) => {
+  return <div className={cx('spinner', className)} />
+}
+
+export default Spinner

shared/ui/spinner/styles.module.scss

@@ -0,0 +1,17 @@
+.spinner {
+  width: 32px;
+  height: 32px;
+  border: 4px solid $color-gray-200;
+  border-top: 4px solid $color-orange-500;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}