From 56e07e3b4ee77532c10c46227e88594e996f4bfb Mon Sep 17 00:00:00 2001
From: Mina Lee <chsjen492@gmail.com>
Date: Sun, 9 Nov 2025 02:25:04 +0900
Subject: [PATCH 1/2] refactor: apply clip loader on loading

---
 .../app/(backButton)/events/register/loading.tsx  |  8 +++++++-
 .../src/app/(backButton)/events/update/page.tsx   |  3 ++-
 apps/web/src/components/comment/commentList.tsx   | 15 +++++++++++++--
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/app/(backButton)/events/register/loading.tsx b/apps/web/src/app/(backButton)/events/register/loading.tsx
index 1766cdd5..6f0a6cdb 100644
--- a/apps/web/src/app/(backButton)/events/register/loading.tsx
+++ b/apps/web/src/app/(backButton)/events/register/loading.tsx
@@ -1,3 +1,9 @@
+import { ClipLoader } from 'react-spinners'
+
 export default function Loading() {
-    return <div className="flex min-h-screen items-center justify-center text-lg font-semibold">Loading...</div>
+    return (
+        <div className="flex min-h-screen items-center justify-center text-lg font-semibold">
+            <ClipLoader color="#FF6B6B" size={50} />
+        </div>
+    )
 }
diff --git a/apps/web/src/app/(backButton)/events/update/page.tsx b/apps/web/src/app/(backButton)/events/update/page.tsx
index e9bf5150..f91b8ee4 100644
--- a/apps/web/src/app/(backButton)/events/update/page.tsx
+++ b/apps/web/src/app/(backButton)/events/update/page.tsx
@@ -5,10 +5,11 @@ import { Suspense, useState } from 'react'
 import { ICategory } from '@fienmee/types'
 import EventForm from '@/components/events/eventForm'
 import { eventStore } from '@/store'
+import { ClipLoader } from 'react-spinners'
 
 export default function EventUpdate() {
     return (
-        <Suspense fallback={<div>Loading...</div>}>
+        <Suspense fallback={<ClipLoader color="#FF6B6B" size={50} />}>
             <UpdatePageContent />
         </Suspense>
     )
diff --git a/apps/web/src/components/comment/commentList.tsx b/apps/web/src/components/comment/commentList.tsx
index 2d87334b..d3c1f22e 100644
--- a/apps/web/src/components/comment/commentList.tsx
+++ b/apps/web/src/components/comment/commentList.tsx
@@ -7,6 +7,7 @@ import { useInView } from 'react-intersection-observer'
 import { IGetEventCommentsResponse } from '@fienmee/types'
 import { getEventCommentsByEventId } from '@/api/event'
 import { EventComment } from '@/components/comment/comment'
+import { ClipLoader } from 'react-spinners'
 
 interface CommentListProps {
     eventId: string
@@ -31,7 +32,11 @@ export function CommentList({ eventId }: CommentListProps) {
     }, [inView, isFetchingNextPage, fetchNextPage])
 
     if (isLoading) {
-        return <div className="px-4 py-2">로딩중...</div>
+        return (
+            <div className="px-4 py-2">
+                <ClipLoader color="#FF6B6B" size={50} />
+            </div>
+        )
     }
 
     if (isError) {
@@ -48,7 +53,13 @@ export function CommentList({ eventId }: CommentListProps) {
     return (
         <div className="flex flex-col gap-4">
             {data && data.pages.map(page => page.comments.map(comment => <EventComment key={comment._id} comment={comment} />))}
-            {isFetchingNextPage ? <div>로딩중...</div> : <div ref={ref} />}
+            {isFetchingNextPage ? (
+                <div>
+                    <ClipLoader color="#FF6B6B" size={50} />
+                </div>
+            ) : (
+                <div ref={ref} />
+            )}
         </div>
     )
 }

From ffb8f6d27f376726d28866e49a6e061c58e3d3fc Mon Sep 17 00:00:00 2001
From: Mina Lee <chsjen492@gmail.com>
Date: Sun, 30 Nov 2025 21:04:56 +0900
Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20=EB=A6=AC=EB=B7=B0=20=EB=B0=98?=
 =?UTF-8?q?=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/app/(backButton)/events/update/page.tsx | 8 +++++++-
 apps/web/src/components/comment/commentList.tsx      | 4 ++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/app/(backButton)/events/update/page.tsx b/apps/web/src/app/(backButton)/events/update/page.tsx
index f91b8ee4..681e9538 100644
--- a/apps/web/src/app/(backButton)/events/update/page.tsx
+++ b/apps/web/src/app/(backButton)/events/update/page.tsx
@@ -9,7 +9,13 @@ import { ClipLoader } from 'react-spinners'
 
 export default function EventUpdate() {
     return (
-        <Suspense fallback={<ClipLoader color="#FF6B6B" size={50} />}>
+        <Suspense
+            fallback={
+                <div className="flex min-h-screen items-center justify-center">
+                    <ClipLoader color="#FF6B6B" size={50} />
+                </div>
+            }
+        >
             <UpdatePageContent />
         </Suspense>
     )
diff --git a/apps/web/src/components/comment/commentList.tsx b/apps/web/src/components/comment/commentList.tsx
index d3c1f22e..d36140a8 100644
--- a/apps/web/src/components/comment/commentList.tsx
+++ b/apps/web/src/components/comment/commentList.tsx
@@ -33,7 +33,7 @@ export function CommentList({ eventId }: CommentListProps) {
 
     if (isLoading) {
         return (
-            <div className="px-4 py-2">
+            <div className="flex justify-center px-4 py-2">
                 <ClipLoader color="#FF6B6B" size={50} />
             </div>
         )
@@ -54,7 +54,7 @@ export function CommentList({ eventId }: CommentListProps) {
         <div className="flex flex-col gap-4">
             {data && data.pages.map(page => page.comments.map(comment => <EventComment key={comment._id} comment={comment} />))}
             {isFetchingNextPage ? (
-                <div>
+                <div className="flex justify-center">
                     <ClipLoader color="#FF6B6B" size={50} />
                 </div>
             ) : (