diff --git a/package-lock.json b/package-lock.json
index 5194101..2d37e4e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,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",
@@ -3647,6 +3648,25 @@
"loose-envify": "cli.js"
}
},
+ "node_modules/lottie-react": {
+ "version": "2.4.1",
+ "resolved": "https://registry.npmjs.org/lottie-react/-/lottie-react-2.4.1.tgz",
+ "integrity": "sha512-LQrH7jlkigIIv++wIyrOYFLHSKQpEY4zehPicL9bQsrt1rnoKRYCYgpCUe5maqylNtacy58/sQDZTkwMcTRxZw==",
+ "license": "MIT",
+ "dependencies": {
+ "lottie-web": "^5.10.2"
+ },
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+ }
+ },
+ "node_modules/lottie-web": {
+ "version": "5.13.0",
+ "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.13.0.tgz",
+ "integrity": "sha512-+gfBXl6sxXMPe8tKQm7qzLnUy5DUPJPKIyRHwtpCpyUEYjHYRJC/5gjUvdkuO2c3JllrPtHXH5UJJK8LRYl5yQ==",
+ "license": "MIT"
+ },
"node_modules/lower-case": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
diff --git a/package.json b/package.json
index 2d1bf17..a6e380c 100644
--- a/package.json
+++ b/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",
diff --git a/src/assets/icons/ai_comment.svg b/src/assets/icons/ai_comment.svg
new file mode 100644
index 0000000..901dcfa
--- /dev/null
+++ b/src/assets/icons/ai_comment.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/assets/icons/ai_image.svg b/src/assets/icons/ai_image.svg
new file mode 100644
index 0000000..16e6e3a
--- /dev/null
+++ b/src/assets/icons/ai_image.svg
@@ -0,0 +1,84 @@
+
diff --git a/src/assets/index.tsx b/src/assets/index.tsx
index f975b00..c576688 100644
--- a/src/assets/index.tsx
+++ b/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,
};
diff --git a/src/assets/lotties/Loading.json b/src/assets/lotties/Loading.json
new file mode 100644
index 0000000..52e3140
--- /dev/null
+++ b/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":[]}
\ No newline at end of file
diff --git a/src/component/common/Loading/Loading.tsx b/src/component/common/Loading/Loading.tsx
new file mode 100644
index 0000000..b367a30
--- /dev/null
+++ b/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 (
+
+
+
+ );
+}
diff --git a/src/component/index.tsx b/src/component/index.tsx
index 784e266..17ae68f 100644
--- a/src/component/index.tsx
+++ b/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,
};
diff --git a/src/pages/ai/AILoadingPage.tsx b/src/pages/ai/AILoadingPage.tsx
new file mode 100644
index 0000000..0589d35
--- /dev/null
+++ b/src/pages/ai/AILoadingPage.tsx
@@ -0,0 +1,12 @@
+import { AIComment, AIImage } from '@/assets';
+import { Loader } from '@/component';
+
+export default function AILoadingPage() {
+ return (
+
+ );
+}
diff --git a/src/routes/router.tsx b/src/routes/router.tsx
index 15452f3..1964ef2 100644
--- a/src/routes/router.tsx
+++ b/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: ,
},
+ {
+ path: 'loading',
+ element: ,
+ },
],
},
//여행지 상세페이지