Merge pull request #81 from geulDa/feat/#80/loading-page-lotti

✨Feat: 로띠및 로딩페이지 레이아웃

Author: jjangminii

package.json

@@ -15,6 +15,7 @@
     "@tanstack/react-query": "^5.90.5",
     "axios": "^1.12.2",
     "clsx": "^2.1.1",
+    "lottie-react": "^2.4.1",
     "next": "15.5.4",
     "react": "19.1.0",
     "react-dom": "19.1.0",
@@ -24,23 +25,23 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "autoprefixer": "^10.4.21",
     "class-variance-authority": "^0.7.1",
+    "date-fns": "^4.1.0",
     "eslint": "^9",
     "eslint-config-next": "15.5.4",
+    "lucide-react": "^0.540.0",
     "postcss": "^8.5.6",
+    "react-day-picker": "^9.11.1",
     "svg-sprite-loader": "^6.0.11",
     "tailwindcss": "4.1.14",
-    "typescript": "^5",
-    "@radix-ui/react-progress": "^1.1.7",
-    "@radix-ui/react-popover": "^1.1.15",
-    "date-fns": "^4.1.0",
-    "react-day-picker": "^9.11.1",
-    "@radix-ui/react-slot": "^1.2.3",
-    "lucide-react": "^0.540.0"
+    "typescript": "^5"
   }
 }

pnpm-lock.yaml

@@ -0,0 +1 @@
+{"nm":"Main Scene","ddd":0,"h":180,"w":180,"meta":{"g":"@lottiefiles/creator 1.58.0"},"layers":[{"ty":0,"nm":"Nested Scene 1","sr":1,"st":0,"op":150,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[80,80]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[90,90]},"r":{"a":1,"k":[{"o":{"x":0.7,"y":0.064},"i":{"x":0.3,"y":0.936},"s":[0],"t":0},{"o":{"x":0.7,"y":0.064},"i":{"x":0.3,"y":0.936},"s":[360],"t":50},{"o":{"x":0.7,"y":0.064},"i":{"x":0.3,"y":0.936},"s":[720],"t":100},{"s":[1080],"t":150}]},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"w":160,"h":160,"refId":"precomp_Shape Layer - SVG_Pyi9z_WozP_02f09327-b264-4238-b974-1580b3747f32","ind":1}],"v":"5.7.0","fr":30,"op":150,"ip":0,"assets":[{"nm":"Nested Scene 1","id":"precomp_Shape Layer - SVG_Pyi9z_WozP_02f09327-b264-4238-b974-1580b3747f32","layers":[{"ty":4,"nm":"Shape Layer 1","sr":1,"st":0,"op":150,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[83.07499999999999,80]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[83.07499999999999,80]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","np":2,"it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.83,0],[0,0.83],[-0.83,0],[0,-0.83]],"o":[[0,0.83],[-0.83,0],[0,-0.83],[0.83,0],[0,0]],"v":[[150.15,91.65],[148.65,93.15],[147.15,91.65],[148.65,90.15],[150.15,91.65]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[0.549,0.9412,0.949]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[148.64999999999998,91.64999999999998]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[148.64999999999998,91.64999999999998]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","np":2,"it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 2","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.55,0],[0,0.55],[-0.55,0],[0,-0.55]],"o":[[0,0.55],[-0.55,0],[0,-0.55],[0.55,0],[0,0]],"v":[[153.15,87.15],[152.15,88.15],[151.15,87.15],[152.15,86.15],[153.15,87.15]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[0.1098,0.851,0.6902]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[152.14999999999998,87.14999999999998]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[152.14999999999998,87.14999999999998]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 3","np":2,"it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 3","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.55,0],[0,0.55],[-0.55,0],[0,-0.55]],"o":[[0,0.55],[-0.55,0],[0,-0.55],[0.55,0],[0,0]],"v":[[131.15,77.15],[130.15,78.15],[129.15,77.15],[130.15,76.15],[131.15,77.15]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[0.6392,0.9412,0.8784]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[130.14999999999998,77.15]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[130.14999999999998,77.15]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 4","np":2,"it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 4","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.08,-0.75],[0,0],[-0.17,-0.21],[0,0],[0.74,-0.15],[0,0],[0.14,-0.23],[0,0],[0.37,0.65],[0,0],[0.26,0.07],[0,0],[-0.51,0.56],[0,0],[0.02,0.27],[0,0],[-0.69,-0.31],[0,0],[-0.25,0.1],[0,0]],"o":[[0.7,-0.28],[0,0],[-0.03,0.27],[0,0],[0.48,0.58],[0,0],[-0.26,0.06],[0,0],[-0.4,0.64],[0,0],[-0.13,-0.24],[0,0],[-0.73,-0.19],[0,0],[0.18,-0.2],[0,0],[-0.05,-0.75],[0,0],[0.25,0.11],[0,0],[0,0]],"v":[[147.66,70.22],[149.03,71.26],[148.38,77.15],[148.61,77.9],[152.4,82.47],[151.83,84.08],[146.02,85.29],[145.38,85.74],[142.21,90.75],[140.5,90.72],[137.55,85.57],[136.93,85.09],[131.18,83.63],[130.69,81.99],[134.68,77.59],[134.93,76.86],[134.55,70.94],[135.96,69.96],[141.37,72.39],[142.15,72.41],[147.66,70.22]]}}},{"ty":"gf","bm":0,"hd":false,"nm":"paint1_linear_625_3738","e":{"a":0,"k":[140.64,91.73]},"g":{"p":3,"k":{"a":0,"k":[0,0.7019607843137254,0.9607843137254902,0.9607843137254902,0.48,0.12941176470588237,0.8705882352941177,0.9019607843137255,1,0.10980392156862745,0.8509803921568627,0.6901960784313725]}},"t":1,"a":{"a":0,"k":0},"h":{"a":0,"k":0},"s":{"a":0,"k":[141.69,71.26]},"r":2,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[141.52878571428568,80.54489285714288]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[141.52878571428568,80.54489285714288]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 5","np":2,"it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 5","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-7.93,-3.28],[-6.22,-6.22],[-3.37,-8.13],[-0.08,-8.58],[0,-0.05],[0,-0.03],[0,-0.14],[0,0],[2.32,0],[0.25,2.25],[0,0],[2.91,7.04],[5.39,5.38],[7.04,2.91],[7.61,0],[0,0],[0,2.32],[-2.25,0.25],[0,0],[-0.13,0],[-0.03,0],[-0.05,0]],"o":[[8.58,0.08],[8.13,3.37],[6.22,6.22],[3.28,7.93],[0,0.05],[0,0.03],[0,0.14],[0,0],[-0.25,2.25],[-2.32,0],[0,0],[0,-7.61],[-2.91,-7.04],[-5.39,-5.38],[-7.03,-2.91],[0,0],[-2.25,-0.25],[0,-2.32],[0,0],[0.13,0],[0.03,0],[0.05,0],[0,0]],"v":[[80.65,13],[105.64,18.1],[127.38,32.62],[141.9,54.36],[147,79.35],[147,79.5],[147,79.59],[147,80],[146.97,80],[142.5,84],[138.03,80],[137.99,80],[133.57,57.81],[121,39],[102.19,26.43],[80,22.01],[80,21.97],[76,17.5],[80,13.03],[80,13],[80.4,13],[80.5,13],[80.65,13]]}}},{"ty":"gf","bm":0,"hd":false,"nm":"paint0_linear_625_3738","e":{"a":0,"k":[143.27,84]},"g":{"p":4,"k":{"a":0,"k":[0,0.7019607843137254,0.9607843137254902,0.9607843137254902,0.43,0.4,0.9098039215686274,0.9294117647058824,0.72,0.10980392156862745,0.8509803921568627,0.6901960784313725,1,0.0392156862745098,0.7686274509803922,0.6196078431372549]}},"t":1,"a":{"a":0,"k":0},"h":{"a":0,"k":0},"s":{"a":0,"k":[79.73,13]},"r":2,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[111.5,48.5]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[111.5,48.5]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":1}]}]}

public/lottie/loading_revised.json

@@ -0,0 +1,36 @@
+import Lottie from 'lottie-react';
+import loading_revised from '../../../public/lottie/loading_revised.json';
+
+export default function Loading() {
+  return (
+    <div className='flex flex-col items-center justify-between h-[100vh] bg-white'>
+      <div className='relative w-full h-[22vw] min-h-[14rem] max-h-[28rem]'>
+        <svg
+          xmlns='http://www.w3.org/2000/svg'
+          viewBox='0 0 402 194'
+          className='absolute inset-0 w-full h-full'
+          preserveAspectRatio='none'
+        >
+          <path
+            d='M402 180.922C257.925 56.9753 160.195 270.883 0 161.93V0H402V180.922Z'
+            className='fill-mint-50'
+          />
+        </svg>
+      </div>
+
+      <div className='flex items-center justify-center'>
+        <Lottie
+          animationData={loading_revised}
+          loop
+          autoplay
+          className='w-[18rem] h-[18rem]'
+        />
+      </div>
+
+      <div className='mb-[10rem] text-center text-gray-500 text-label-md'>
+        <p>만화 속 부천 여행</p>
+        <p>8개 명소를 탐험하고 엽서를 모아보세요!</p>
+      </div>
+    </div>
+  );
+}