Merge pull request #134 from boostcampwm-2024/Feature/#133_로티_애니메이션_추가

Feature/#133 로티 애니메이션 추가

client/package.json

@@ -11,6 +11,7 @@
     "prepare": "panda codegen"
   },
   "dependencies": {
+    "@lottiefiles/react-lottie-player": "^3.5.4",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",

client/src/assets/lotties/loadingSpinner.json

@@ -0,0 +1 @@
+{"nm":"Main Scene","ddd":0,"h":500,"w":500,"meta":{"g":"@lottiefiles/creator 1.34.2"},"layers":[{"ty":4,"nm":"Progress Bar","sr":1,"st":0,"op":150,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[250,250]},"r":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":0},{"s":[360],"t":60}]},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"Progress Bar","d":1,"ks":{"a":0,"k":{"c":true,"i":[[-87.47614999999999,0],[0,-87.47614999999999],[87.47614999999999,0],[0,87.47614999999999]],"o":[[87.47614999999999,0],[0,87.47614999999999],[-87.47614999999999,0],[0,-87.47614999999999]],"v":[[0,-158.5],[158.5,0],[0,158.5],[-158.5,0]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":32},"c":{"a":0,"k":[0.451,0.5333,0.6353]}},{"ty":"tm","bm":0,"hd":false,"nm":"Trim Path","e":{"a":0,"k":6},"o":{"a":0,"k":0},"s":{"a":0,"k":22},"m":1}],"ind":1},{"ty":4,"nm":"Progress Bar","sr":1,"st":0,"op":150,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[250,250]},"r":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":0},{"s":[360],"t":60}]},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"Progress Bar","d":1,"ks":{"a":0,"k":{"c":true,"i":[[-87.47614999999999,0],[0,-87.47614999999999],[87.47614999999999,0],[0,87.47614999999999]],"o":[[87.47614999999999,0],[0,87.47614999999999],[-87.47614999999999,0],[0,-87.47614999999999]],"v":[[0,-158.5],[158.5,0],[0,158.5],[-158.5,0]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":32},"c":{"a":0,"k":[0.6,0.6863,0.7922]}},{"ty":"tm","bm":0,"hd":false,"nm":"Trim Path","e":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[22],"t":0},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":30},{"s":[22],"t":60}]},"s":{"a":0,"k":16},"m":1}],"ind":2},{"ty":4,"nm":"Progress Track","sr":1,"st":0,"op":150,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[250,250]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"Progress Track","d":1,"ks":{"a":0,"k":{"c":true,"i":[[-87.47614999999999,0],[0,-87.47614999999999],[87.47614999999999,0],[0,87.47614999999999]],"o":[[87.47614999999999,0],[0,87.47614999999999],[-87.47614999999999,0],[0,-87.47614999999999]],"v":[[0,-158.5],[158.5,0],[0,158.5],[-158.5,0]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":32},"c":{"a":0,"k":[0.7569,0.8431,0.9569]}},{"ty":"tm","bm":0,"hd":false,"nm":"Trim Path","e":{"a":0,"k":100},"o":{"a":0,"k":0},"s":{"a":0,"k":0},"m":1}],"ind":3}],"v":"5.7.0","fr":30,"op":60,"ip":0,"assets":[]}

client/src/components/loading/LoadingSpinner.tsx

@@ -0,0 +1,10 @@
+import { Player } from "@lottiefiles/react-lottie-player";
+import loadingAnimation from "@assets/lotties/loadingSpinner.json";
+
+export const LoadingSpinner = ({ size = 200 }) => {
+  return (
+    <div style={{ width: size, height: size }}>
+      <Player autoplay loop src={loadingAnimation} style={{ width: "100%", height: "100%" }} />
+    </div>
+  );
+};