Fix: 로딩창 UI 개선

src/components/loading/TaxiLoading.tsx

@@ -0,0 +1,26 @@
+import TaxiSvg from '@/assets/icon/gachonTaxi.svg?react';
+import { motion } from 'framer-motion';
+
+const TaxiLoading = () => {
+  return (
+    <section className="flex flex-col items-center justify-center h-screen bg-darkBlack text-white">
+      <div className="relative flex flex-1 items-center justify-center z-10 mb-1">
+        <TaxiSvg />
+      </div>
+
+      <div className="absolute top-[56%] w-48 h-3 bg-textDarkGray rounded-full overflow-hidden z-0">
+        <motion.div
+          className="h-full bg-primary w-1/2 rounded-full"
+          animate={{ x: ['-100%', '200%'] }}
+          transition={{
+            repeat: Infinity,
+            duration: 3,
+            ease: 'linear',
+          }}
+        />
+      </div>
+    </section>
+  );
+};
+
+export default TaxiLoading;

src/components/loading/index.tsx

@@ -1,52 +1,10 @@
-import { useEffect, useState } from 'react';
-import LoadingTaxi from '@/assets/icon/loadingTaxi.svg?react';
+import TaxiLoading from './TaxiLoading';
 
 const LoadingScreen = () => {
-  const [rotation, setRotation] = useState(0);
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setRotation((prev) => (prev + 10) % 360);
-    }, 300);
-
-    return () => clearInterval(interval);
-  }, []);
-
   return (
     <div className="flex flex-col items-center justify-center h-screen bg-darkBlack text-white">
       <p className="text-header font-bold absolute top-[20%]">로딩 중...</p>
-      <div className="relative flex items-center justify-center">
-        <svg
-          className="animate-spin"
-          width="200"
-          height="200"
-          viewBox="0 0 100 100"
-        >
-          <circle
-            cx="50"
-            cy="50"
-            r="40"
-            fill="none"
-            stroke="#4F624A"
-            strokeWidth="10"
-          />
-          <circle
-            cx="50"
-            cy="50"
-            r="40"
-            fill="none"
-            stroke="#08F283"
-            strokeWidth="10"
-            strokeDasharray="27.9 223.3"
-            strokeDashoffset="188.4"
-            strokeLinecap="butt"
-            transform={`rotate(${rotation - 90} 50 50)`}
-          />
-        </svg>
-        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-          <LoadingTaxi />
-        </div>
-      </div>
+      <TaxiLoading />
     </div>
   );
 };