[Feat] 로딩 컴포넌트 구현

package.json

@@ -13,6 +13,7 @@
     "@fontsource/inter": "^5.2.6",
     "@tailwindcss/vite": "^4.1.11",
     "clsx": "^2.1.1",
+    "lottie-react": "^2.4.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-feather": "^2.0.10",

src/assets/index.tsx

@@ -11,6 +11,8 @@ import HeartFill from '@/assets/icons/heart_filled.svg?react';
 import HeartOutline from '@/assets/icons/heart_outlined.svg?react';
 import StarFill from '@/assets/icons/star_filled.svg?react';
 import StarLine from '@/assets/icons/star_outlined.svg?react';
+import AIComment from '@/assets/icons/ai_comment.svg?react';
+import AIImage from '@/assets/icons/ai_image.svg?react';
 
 export {
   InfoIcon,
@@ -26,4 +28,6 @@ export {
   HeartOutline,
   StarFill,
   StarLine,
+  AIComment,
+  AIImage,
 };

src/assets/lotties/Loading.json

@@ -0,0 +1 @@
+{"nm":"Main Scene","ddd":0,"h":300,"w":1700,"meta":{"g":"@lottiefiles/creator 1.47.1"},"layers":[{"ty":4,"nm":"Dot4","sr":1,"st":0,"op":360,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[-284,92,0],"ix":1},"s":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[44.21,44.21,100],"t":25},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[66.32,66.32,100],"t":39},{"s":[44.21,44.21,100],"t":55}],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[1010.94,150],"t":25},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[1010.94,114.63],"t":39},{"s":[1010.94,150],"t":55}],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[25],"t":25},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":39},{"s":[25],"t":55}],"ix":11}},"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Ellipse 1","ix":1,"cix":2,"np":3,"it":[{"ty":"el","bm":0,"hd":false,"mn":"ADBE Vector Shape - Ellipse","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"s":{"a":0,"k":[120,120],"ix":2}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.2118,0.3647,0.1961],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-284,92],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":1},{"ty":4,"nm":"Dot3","sr":1,"st":0,"op":360,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[-284,92,0],"ix":1},"s":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[44.21,44.21,100],"t":17},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[66.32,66.32,100],"t":31},{"s":[44.21,44.21,100],"t":47}],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[904.82,150],"t":17},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[904.82,114.63],"t":31},{"s":[904.82,150],"t":47}],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[25],"t":17},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":31},{"s":[25],"t":47}],"ix":11}},"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Ellipse 1","ix":1,"cix":2,"np":3,"it":[{"ty":"el","bm":0,"hd":false,"mn":"ADBE Vector Shape - Ellipse","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"s":{"a":0,"k":[120,120],"ix":2}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.2118,0.3647,0.1961],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-284,92],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":2},{"ty":4,"nm":"Dot2","sr":1,"st":0,"op":360,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[-284,92,0],"ix":1},"s":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[44.21,44.21,100],"t":9},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[66.32,66.32,100],"t":23},{"s":[44.21,44.21,100],"t":39}],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[798.71,150],"t":9},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[798.71,114.63],"t":23},{"s":[798.71,150],"t":39}],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[25],"t":9},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":23},{"s":[25],"t":39}],"ix":11}},"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Ellipse 1","ix":1,"cix":2,"np":3,"it":[{"ty":"el","bm":0,"hd":false,"mn":"ADBE Vector Shape - Ellipse","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"s":{"a":0,"k":[120,120],"ix":2}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.2118,0.3647,0.1961],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-284,92],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":3},{"ty":4,"nm":"Dot1","sr":1,"st":0,"op":360,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[-284,92,0],"ix":1},"s":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[44.21,44.21,100],"t":0},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[66.32,66.32,100],"t":14},{"s":[44.21,44.21,100],"t":30}],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[692.6,150],"t":0},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[692.6,114.63],"t":14},{"s":[692.6,150],"t":30}],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[25],"t":0},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":14},{"s":[25],"t":30}],"ix":11}},"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Ellipse 1","ix":1,"cix":2,"np":3,"it":[{"ty":"el","bm":0,"hd":false,"mn":"ADBE Vector Shape - Ellipse","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"s":{"a":0,"k":[120,120],"ix":2}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.2118,0.3647,0.1961],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-284,92],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":4}],"v":"5.7.0","fr":60,"op":81,"ip":0,"assets":[]}

src/component/common/Loading/Loading.tsx

@@ -0,0 +1,10 @@
+import Lottie from 'lottie-react';
+import Loading from '@/assets/lotties/Loading.json';
+
+export default function Loader({ className = 'w-16 h-16' }: { className?: string }) {
+  return (
+    <div role="status" aria-busy="true" className={className}>
+      <Lottie animationData={Loading} loop autoplay style={{ width: '100%', height: '100%' }} />
+    </div>
+  );
+}

src/component/index.tsx

@@ -10,6 +10,7 @@ import Sidebar from './SideBar';
 import SelectorMulti from './selector/SelectorMulti';
 import Selector from './selector/Selector';
 import ParkingTable from './ai_explore/ParkingInfo';
+import Loader from './common/Loading/Loading';
 
 export {
   Button,
@@ -23,4 +24,5 @@ export {
   Selector,
   SelectorMulti,
   ParkingTable,
+  Loader,
 };

src/pages/ai/AILoadingPage.tsx

@@ -0,0 +1,12 @@
+import { AIComment, AIImage } from '@/assets';
+import { Loader } from '@/component';
+
+export default function AILoadingPage() {
+  return (
+    <div className="bg-green3 min-h-screen place-items-center">
+      <Loader className="w-70 pt-40 pb-10" />
+      <AIComment />
+      <AIImage />
+    </div>
+  );
+}

src/routes/router.tsx

@@ -10,6 +10,7 @@ import AiExploreMain from '@/pages/ai/MainAI';
 import ThemeSelcetPage from '@/pages/ai/ThemeSelect';
 import Filter from '@/pages/explore/Filter';
 import TravelSpotDetail from '@/pages/ai/TravelSpotDetail';
+import AILoadingPage from '@/pages/ai/AILoadingPage';
 export const router = createBrowserRouter([
   {
     path: '/',
@@ -36,6 +37,10 @@ export const router = createBrowserRouter([
         path: 'theme',
         element: <ThemeSelcetPage />,
       },
+      {
+        path: 'loading',
+        element: <AILoadingPage />,
+      },
     ],
   },
   //여행지 상세페이지