Skip to content

refactor: apply clip loader on loading #286

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ninaxlee merged 2 commits into from
Dec 1, 2025
Merged

refactor: apply clip loader on loading #286

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
56e07e3
refactor: apply clip loader on loading
ninaxlee Nov 8, 2025
ffb8f6d
refactor: 리뷰 반영
ninaxlee Nov 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion apps/web/src/app/(backButton)/events/register/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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} />

@gemini-code-assist gemini-code-assist Bot Nov 16, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

ClipLoader에 사용된 color와 size 값이 여러 파일에 걸쳐 반복적으로 사용되고 있습니다. 유지보수성을 높이고 일관성을 보장하기 위해 이 값들을 상수로 정의하여 사용하는 것을 고려해보세요. 예를 들어, 공통 constants 파일에 다음과 같이 정의할 수 있습니다:

export const LOADER_COLOR = '#FF6B6B';
export const LOADER_SIZE = 50;

이렇게 하면 나중에 로딩 스피너의 스타일을 변경할 때 한 곳만 수정하면 됩니다. 더 나아가, 로딩 스피너 자체를 별도의 재사용 가능한 컴포넌트로 만드는 것도 좋은 방법입니다.

</div>
)
}
3 changes: 2 additions & 1 deletion apps/web/src/app/(backButton)/events/update/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />}>
Comment thread
ninaxlee marked this conversation as resolved.
Outdated
<UpdatePageContent />
</Suspense>
)
Expand Down
15 changes: 13 additions & 2 deletions apps/web/src/components/comment/commentList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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">
Comment thread
ninaxlee marked this conversation as resolved.
Outdated
<ClipLoader color="#FF6B6B" size={50} />
</div>
)
}

if (isError) {
Expand All @@ -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>
Comment thread
ninaxlee marked this conversation as resolved.
Outdated
<ClipLoader color="#FF6B6B" size={50} />
</div>
) : (
<div ref={ref} />
)}
</div>
)
}
Expand Down