Skip to content

Commit 5bd3ad7

Browse files
author
chaewon41
committed
feat: 로딩 컴포넌트 추가
1 parent 65a3b56 commit 5bd3ad7

File tree

7 files changed

+106
-50
lines changed

7 files changed

+106
-50
lines changed

‎src/app/(auth)/auth/kakao/callback/page.tsx‎

Lines changed: 3 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { useEffect, Suspense } from 'react';
44
import { useRouter, useSearchParams } from 'next/navigation';
55
import { kakaoLogin } from '@/api/auth';
6-
6+
import Loading from '@/components/common/Loading';
77
function KakaoCallbackContent() {
88
const router = useRouter();
99
const searchParams = useSearchParams();
@@ -51,43 +51,15 @@ function KakaoCallbackContent() {
5151

5252
// 로딩 화면
5353
return (
54-
<div
55-
style={{
56-
position: 'fixed',
57-
top: 0,
58-
left: 0,
59-
right: 0,
60-
bottom: 0,
61-
display: 'flex',
62-
justifyContent: 'center',
63-
alignItems: 'center',
64-
backgroundColor: '#131416',
65-
}}
66-
>
67-
<div style={{ color: '#EAEFF5', fontSize: '16px' }}>카카오 로그인 처리 중...</div>
68-
</div>
54+
<Loading />
6955
);
7056
}
7157

7258
export default function KakaoCallbackPage() {
7359
return (
7460
<Suspense
7561
fallback={
76-
<div
77-
style={{
78-
position: 'fixed',
79-
top: 0,
80-
left: 0,
81-
right: 0,
82-
bottom: 0,
83-
display: 'flex',
84-
justifyContent: 'center',
85-
alignItems: 'center',
86-
backgroundColor: '#131416',
87-
}}
88-
>
89-
<div style={{ color: '#EAEFF5', fontSize: '16px' }}>로딩 중...</div>
90-
</div>
62+
<Loading />
9163
}
9264
>
9365
<KakaoCallbackContent />

‎src/app/(main)/archive/page.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { ArchiveNewsMenuBottomSheet } from "@/components/archive/ArchiveNewsMenu
1414
import { DeleteConfirmDialog } from "@/components/archive/DeleteConfirmDialog";
1515
import { ArchiveCategoryEditBottomSheet } from "@/components/archive/ArchiveCategoryEditBottomSheet";
1616
import { NewCategoryBottomSheet } from "@/components/study/NewCategoryBottomSheet";
17+
import Loading from "@/components/common/Loading";
1718

1819
type TabType = "news" | "terms";
1920

@@ -588,9 +589,7 @@ export default function ArchivePage() {
588589
{activeTab === "news" && selectedCategoryId !== null ? (
589590
loadingNews ? (
590591
/* 로딩 중 */
591-
<div className="flex-1 flex items-center justify-center">
592-
<div className="text-b2 text-gray-50">로딩 중...</div>
593-
</div>
592+
<Loading className="flex-1 mt-20" />
594593
) : newsList.length > 0 ? (
595594
/* 뉴스 리스트 */
596595
<div className="flex-1 overflow-y-auto px-5 py-4">
@@ -660,9 +659,7 @@ export default function ArchivePage() {
660659
) : activeTab === "terms" && selectedCategoryId !== null ? (
661660
loadingTerms ? (
662661
/* 로딩 중 */
663-
<div className="flex-1 flex items-center justify-center">
664-
<div className="text-b2 text-gray-50">로딩 중...</div>
665-
</div>
662+
<Loading className="flex-1 mt-20" />
666663
) : termsList.length > 0 ? (
667664
/* 용어 리스트 */
668665
<div className="flex-1 overflow-y-auto px-5 py-4">

‎src/app/(main)/archive/search/page.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { ArchiveTermCard } from "@/components/archive/ArchiveTermCard";
1010
import { ArchiveSortDropdown } from "@/components/archive/ArchiveSortDropdown";
1111
import { getCategoryOrder } from "@/lib/api/user";
1212
import { getStorageFolders, searchStorageNews, searchStorageTerms, type StorageNewsSearchItem, type StorageTermsSearchItem } from "@/lib/api/storage";
13-
13+
import Loading from "@/components/common/Loading";
1414
type TabType = "news" | "terms";
1515

1616
type Category = {
@@ -647,9 +647,7 @@ export default function ArchiveSearchPage() {
647647
return (
648648
<Suspense fallback={
649649
<div className="flex flex-col flex-1 min-h-0 bg-bg-100">
650-
<div className="flex flex-1 items-center justify-center">
651-
<p className="text-gray-400">로딩 중...</p>
652-
</div>
650+
<Loading />
653651
</div>
654652
}>
655653
<ArchiveSearchContent />

‎src/app/(main)/study/page.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useState, useEffect } from "react";
44
import Image from "next/image";
55
import { useRouter } from "next/navigation";
66
import { Header } from "@/components/common/Header";
7+
import Loading from "@/components/common/Loading";
78
import { CategoryBar } from "@/components/study/CategoryBar";
89
import { SortDropdown, type SortOption } from "@/components/study/SortDropdown";
910
import { NewsCard } from "@/components/study/NewsCard";
@@ -272,9 +273,7 @@ export default function StudyPage() {
272273
{/* 뉴스 리스트 */}
273274
<div className="flex-1">
274275
{loading && newsList.length === 0 ? (
275-
<div className="flex items-center justify-center py-8">
276-
<p className="text-gray-400">로딩 중...</p>
277-
</div>
276+
<Loading className="min-h-[60vh]" />
278277
) : newsList.length === 0 ? (
279278
<div className="flex items-center justify-center py-8">
280279
<p className="text-gray-400">뉴스가 없습니다.</p>

‎src/app/study/[id]/page.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
saveNewsToStorage,
1212
getStorageFoldersByItemId,
1313
} from "@/lib/api/storage";
14-
14+
import Loading from "@/components/common/Loading";
1515
type Category = {
1616
category_id: number;
1717
name: string;
@@ -213,7 +213,7 @@ export default function NewsDetailPage() {
213213

214214
if (loading) {
215215
return (
216-
<div className="flex flex-col min-h-full bg-bg-100">
216+
<div className="flex flex-col min-h-screen bg-bg-100">
217217
<Header
218218
title="뉴스 상세"
219219
leftSlot={
@@ -237,9 +237,7 @@ export default function NewsDetailPage() {
237237
</button>
238238
}
239239
/>
240-
<div className="flex-1 flex items-center justify-center">
241-
<p className="text-gray-400">로딩 중...</p>
242-
</div>
240+
<Loading className="flex-1" />
243241
</div>
244242
);
245243
}

‎src/components/common/Loading.tsx‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import Image from 'next/image';
2+
3+
interface LoadingProps {
4+
message?: string;
5+
className?: string;
6+
}
7+
8+
export default function Loading({ message, className = '' }: LoadingProps) {
9+
return (
10+
<div className={`flex flex-col items-center justify-center ${className}`}>
11+
{/* 로딩 인디케이터 SVG */}
12+
<div className="flex items-center justify-center mb-8">
13+
<svg
14+
xmlns="http://www.w3.org/2000/svg"
15+
width="64"
16+
height="20"
17+
viewBox="0 0 64 20"
18+
fill="none"
19+
className="loading-dots"
20+
>
21+
<circle cx="10" cy="10" r="6" fill="#9C95FA">
22+
<animate
23+
attributeName="opacity"
24+
values="0.3;1;0.3"
25+
dur="1.4s"
26+
repeatCount="indefinite"
27+
begin="0s"
28+
/>
29+
<animate
30+
attributeName="r"
31+
values="6;7;6"
32+
dur="1.4s"
33+
repeatCount="indefinite"
34+
begin="0s"
35+
/>
36+
</circle>
37+
<circle cx="32" cy="10" r="6" fill="#9C95FA">
38+
<animate
39+
attributeName="opacity"
40+
values="0.3;1;0.3"
41+
dur="1.4s"
42+
repeatCount="indefinite"
43+
begin="0.2s"
44+
/>
45+
<animate
46+
attributeName="r"
47+
values="6;7;6"
48+
dur="1.4s"
49+
repeatCount="indefinite"
50+
begin="0.2s"
51+
/>
52+
</circle>
53+
<circle cx="54" cy="10" r="6" fill="#9C95FA">
54+
<animate
55+
attributeName="opacity"
56+
values="0.3;1;0.3"
57+
dur="1.4s"
58+
repeatCount="indefinite"
59+
begin="0.4s"
60+
/>
61+
<animate
62+
attributeName="r"
63+
values="6;7;6"
64+
dur="1.4s"
65+
repeatCount="indefinite"
66+
begin="0.4s"
67+
/>
68+
</circle>
69+
</svg>
70+
</div>
71+
72+
{/* 캐릭터 이미지 */}
73+
<div className="relative animate-float aspect-[68/95]">
74+
<Image
75+
src="/img-character-main.png"
76+
alt="핀토 캐릭터"
77+
width={136}
78+
height={190}
79+
priority
80+
/>
81+
</div>
82+
83+
{/* 로딩 메시지 */}
84+
{message && (
85+
<p className="mt-6 text-primary-10 text-b1">
86+
{message}
87+
</p>
88+
)}
89+
</div>
90+
);
91+
}

‎src/components/study/TermDescriptionCard.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
deleteTermFromStorage,
1212
type StorageFolder,
1313
} from "@/lib/api/storage";
14+
import Loading from "../common/Loading";
1415

1516
type CardMode = "front" | "select" | "create"; // 카드 모드 (앞면, 선택, 생성)
1617

@@ -379,7 +380,7 @@ export function TermDescriptionCard({
379380
{/* 사용자 폴더들 */}
380381
{loadingFolders ? (
381382
<div className="w-full py-[14px] text-center text-b2 text-gray-40">
382-
로딩 중...
383+
<Loading className="min-h-[200px]" />
383384
</div>
384385
) : (
385386
userFolders.map((folder) => {

0 commit comments

Comments
 (0)