Merge pull request #12 from MBTips/feature/-LoadingMessage-ui-컴포너트-작업

Feat: LoadingMessageBox UI 컴포넌트 작업

Author: junjeeong

src/App.tsx

@@ -1,5 +1,5 @@
 function App() {
-  return <div className="text-lg">폰트 크기 설정 테스트</div>
+  return;
 }
 
 export default App;

src/components/LoadingCommentBox.tsx

@@ -0,0 +1,11 @@
+import LoadingSpinner from "@/components/spinner/LoadingSpinner";
+
+const LoadingCommentBox = () => {
+  return (
+    <div className="flex justify-center items-center bg-white border border-gray-100 rounded-xl rounded-tl-none w-[100px] h-[52px]">
+      <LoadingSpinner />
+    </div>
+  );
+};
+
+export default LoadingCommentBox;

src/components/spinner/LoadingSpinner.tsx

@@ -0,0 +1,11 @@
+const LoadingSpinner = () => {
+  return (
+    <div className="flex justify-center items-center space-x-3">
+      <div className="bg-primary-normal rounded-full w-2.5 h-2.5 animate-pulse-custom delay-400"></div>
+      <div className="bg-primary-light rounded-full w-2.5 h-2.5 animate-pulse-custom delay-600"></div>
+      <div className="bg-primary-pale rounded-full w-2.5 h-2.5 animate-pulse-custom delay-800"></div>
+    </div>
+  );
+};
+
+export default LoadingSpinner;

src/index.css

@@ -59,4 +59,33 @@ body {
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
+}
+
+@keyframes pulse-custom {
+
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.5);
+    /* 크기를 늘리는 효과 */
+  }
+}
+
+.animate-pulse-custom {
+  animation: pulse-custom 1s infinite;
+}
+
+.delay-400 {
+  animation-delay: 0.4s;
+}
+
+.delay-600 {
+  animation-delay: 0.6s;
+}
+
+.delay-800 {
+  animation-delay: 0.8s;
 }

tsconfig.app.json

@@ -1,5 +1,9 @@
 {
   "compilerOptions": {
+    "baseUrl": "src",
+    "paths": {
+      "@/*": ["*"]
+    },
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "target": "ES2020",
     "useDefineForClassFields": true,