Skip to content

Commit bfa2328

Browse files
MINJI121MINJI121
authored
Merge pull request #81 from part3-4team-Taskify/feature/Gnb
[Feat] Gnb: 헤더 내부 api 로딩에 스켈레톤 UI 적용
2 parents 54965da + 4eb9d01 commit bfa2328

File tree

4 files changed

+84
-60
lines changed

4 files changed

+84
-60
lines changed

‎src/components/Gnb/HeaderBebridge.tsx‎

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useState, useEffect } from "react";
22
import { useRouter } from "next/router";
3+
import SkeletonUser from "./skeletonUser";
34
import { MemberType, UserType } from "./type";
45
import { getMembers } from "@/api/members";
56
import { getUserInfo } from "@/api/user";
@@ -48,17 +49,16 @@ const HeaderBebridge: React.FC<HeaderBebridgeProps> = ({ dashboardId }) => {
4849
useEffect(() => {
4950
const fetchMembers = async () => {
5051
try {
51-
if (dashboardId) {
52-
const members = await getMembers(dashboardId);
53-
setMembers(members);
54-
}
52+
const members = await getMembers(dashboardId);
53+
setMembers(members);
5554
} catch (error) {
5655
console.error("멤버 불러오기 실패:", error);
5756
} finally {
5857
setIsLoading(false);
5958
}
6059
};
6160

61+
if (!dashboardId) return;
6262
fetchMembers();
6363
}, [dashboardId]);
6464

@@ -80,7 +80,7 @@ const HeaderBebridge: React.FC<HeaderBebridgeProps> = ({ dashboardId }) => {
8080
<div className="flex gap-[6px] md:gap-[16px] pr-[40px]">
8181
<button
8282
onClick={goToDashboardEdit}
83-
className="flex items-center justify-center w-[49px] h-[30px] md:w-[85px] md:h-[36px] lg:w-[88px] lg:h-[40px] rounded-[8px] border-[1px] border-[#D9D9D9] gap-[10px] cursor-pointer"
83+
className="flex items-center justify-center w-[49px] h-[30px] md:w-[85px] md:h-[36px] lg:w-[88px] lg:h-[40px] rounded-[8px] border border-[#D9D9D9] gap-[10px] cursor-pointer"
8484
>
8585
<img
8686
src="/svgs/settings.svg"
@@ -92,7 +92,7 @@ const HeaderBebridge: React.FC<HeaderBebridgeProps> = ({ dashboardId }) => {
9292

9393
<button
9494
onClick={openInviteModal}
95-
className="flex items-center justify-center w-[73px] h-[30px] md:w-[109px] md:h-[36px] lg:w-[116px] lg:h-[40px] rounded-[8px] border-[1px] border-[#D9D9D9] gap-[10px] cursor-pointer"
95+
className="flex items-center justify-center w-[73px] h-[30px] md:w-[109px] md:h-[36px] lg:w-[116px] lg:h-[40px] rounded-[8px] border border-[#D9D9D9] gap-[10px] cursor-pointer"
9696
>
9797
<img
9898
src="/svgs/add-box.svg"
@@ -107,7 +107,7 @@ const HeaderBebridge: React.FC<HeaderBebridgeProps> = ({ dashboardId }) => {
107107
{/*4개의 프로필 아이콘 표시, 나머지 멤버 숫자 +n 아이콘으로 표시*/}
108108
<div className="flex -space-x-3">
109109
{isLoading ? (
110-
<p className="font-16m text-gray1">로딩 중...</p>
110+
<SkeletonUser />
111111
) : (
112112
<>
113113
{members.slice(0, 4).map((member) => (
@@ -138,23 +138,27 @@ const HeaderBebridge: React.FC<HeaderBebridgeProps> = ({ dashboardId }) => {
138138
</div>
139139

140140
{/*유저 프로필 아이콘 & 유저 닉네임*/}
141-
{user && (
142-
<div className="flex items-center pr-[10px] md:pr-[30px] lg:pr-[80px] gap-[12px]">
143-
<div className="w-[34px] h-[34px] md:w-[38px] md:h-[38px]">
144-
{user.profileImageUrl ? (
145-
<img
146-
src={user.profileImageUrl}
147-
alt="유저 프로필 아이콘"
148-
className="w-full h-full rounded-full object-cover"
149-
/>
150-
) : (
151-
<RandomProfile name={user.nickname} />
152-
)}
141+
{isLoading ? (
142+
<SkeletonUser />
143+
) : (
144+
user && (
145+
<div className="flex items-center pr-[10px] md:pr-[30px] lg:pr-[80px] gap-[12px]">
146+
<div className="w-[34px] h-[34px] md:w-[38px] md:h-[38px]">
147+
{user.profileImageUrl ? (
148+
<img
149+
src={user.profileImageUrl}
150+
alt="유저 프로필 아이콘"
151+
className="w-full h-full rounded-full object-cover"
152+
/>
153+
) : (
154+
<RandomProfile name={user.nickname} />
155+
)}
156+
</div>
157+
<span className="hidden md:block text-black3 md:text-base md:font-medium">
158+
{user.nickname}
159+
</span>
153160
</div>
154-
<span className="hidden md:block text-black3 md:text-base md:font-medium">
155-
{user.nickname}
156-
</span>
157-
</div>
161+
)
158162
)}
159163
</div>
160164
</div>

‎src/components/Gnb/HeaderDashboard.tsx‎

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useState, useEffect } from "react";
22
import { useRouter } from "next/router";
3+
import SkeletonUser from "./skeletonUser";
34
import { UserType } from "./type";
45
import { getUserInfo } from "@/api/user";
56
import RandomProfile from "../table/member/RandomProfile";
@@ -54,7 +55,7 @@ const HeaderDashboard = () => {
5455
<div className="flex gap-[6px] md:gap-[16px]">
5556
<button
5657
onClick={goToDashboardEdit}
57-
className="flex items-center justify-center w-[49px] h-[30px] md:w-[88px] md:h-[40px] rounded-[8px] border-[1px] border-[#D9D9D9] gap-[10px] cursor-pointer"
58+
className="flex items-center justify-center w-[49px] h-[30px] md:w-[88px] md:h-[40px] rounded-[8px] border border-[#D9D9D9] gap-[10px] cursor-pointer"
5859
>
5960
<img
6061
src="/svgs/settings.svg"
@@ -66,7 +67,7 @@ const HeaderDashboard = () => {
6667

6768
<button
6869
onClick={openInviteModal}
69-
className="flex items-center justify-center w-[73px] h-[30px] md:w-[116px] md:h-[40px] rounded-[8px] border-[1px] border-[#D9D9D9] gap-[10px] cursor-pointer"
70+
className="flex items-center justify-center w-[73px] h-[30px] md:w-[116px] md:h-[40px] rounded-[8px] border border-[#D9D9D9] gap-[10px] cursor-pointer"
7071
>
7172
<img
7273
src="/svgs/add-box.svg"
@@ -84,23 +85,27 @@ const HeaderDashboard = () => {
8485
</div>
8586

8687
{/*유저 프로필 아이콘 & 유저 닉네임*/}
87-
{user && (
88-
<div className="flex items-center pr-[10px] md:pr-[30px] lg:pr-[80px] gap-[12px]">
89-
<div className="w-[34px] h-[34px] md:w-[38px] md:h-[38px]">
90-
{user.profileImageUrl ? (
91-
<img
92-
src={user.profileImageUrl}
93-
alt="유저 프로필 아이콘"
94-
className="w-full h-full rounded-full object-cover"
95-
/>
96-
) : (
97-
<RandomProfile name={user.nickname} />
98-
)}
88+
{isLoading ? (
89+
<SkeletonUser />
90+
) : (
91+
user && (
92+
<div className="flex items-center pr-[10px] md:pr-[30px] lg:pr-[80px] gap-[12px]">
93+
<div className="w-[34px] h-[34px] md:w-[38px] md:h-[38px]">
94+
{user.profileImageUrl ? (
95+
<img
96+
src={user.profileImageUrl}
97+
alt="유저 프로필 아이콘"
98+
className="w-full h-full rounded-full object-cover"
99+
/>
100+
) : (
101+
<RandomProfile name={user.nickname} />
102+
)}
103+
</div>
104+
<span className="hidden md:block text-black3 md:text-base md:font-medium">
105+
{user.nickname}
106+
</span>
99107
</div>
100-
<span className="hidden md:block text-black3 md:text-base md:font-medium">
101-
{user.nickname}
102-
</span>
103-
</div>
108+
)
104109
)}
105110
</div>
106111
</div>

‎src/components/Gnb/HeaderMypage.tsx‎

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useState, useEffect } from "react";
22
import { useRouter } from "next/router";
3+
import SkeletonUser from "./skeletonUser";
34
import { MemberType, UserType } from "./type";
45
import { getMembers } from "@/api/members";
56
import { getUserInfo } from "@/api/user";
@@ -71,7 +72,7 @@ const HeaderMyPage = () => {
7172
<div className="flex gap-[6px] md:gap-[16px] pr-[40px]">
7273
<button
7374
onClick={goToDashboardEdit}
74-
className="flex items-center justify-center w-[49px] h-[30px] md:w-[85px] md:h-[36px] lg:w-[88px] lg:h-[40px] rounded-[8px] border-[1px] border-[#D9D9D9] gap-[10px] cursor-pointer"
75+
className="flex items-center justify-center w-[49px] h-[30px] md:w-[85px] md:h-[36px] lg:w-[88px] lg:h-[40px] rounded-[8px] border border-[#D9D9D9] gap-[10px] cursor-pointer"
7576
>
7677
<img
7778
src="/svgs/settings.svg"
@@ -83,7 +84,7 @@ const HeaderMyPage = () => {
8384

8485
<button
8586
onClick={openInviteModal}
86-
className="flex items-center justify-center w-[73px] h-[30px] md:w-[109px] md:h-[36px] lg:w-[116px] lg:h-[40px] rounded-[8px] border-[1px] border-[#D9D9D9] gap-[10px] cursor-pointer"
87+
className="flex items-center justify-center w-[73px] h-[30px] md:w-[109px] md:h-[36px] lg:w-[116px] lg:h-[40px] rounded-[8px] border border-[#D9D9D9] gap-[10px] cursor-pointer"
8788
>
8889
<img
8990
src="/svgs/add-box.svg"
@@ -99,7 +100,7 @@ const HeaderMyPage = () => {
99100
{/*4개의 프로필 아이콘 표시, 나머지 멤버 숫자 +n 아이콘으로 표시*/}
100101
<div className="flex -space-x-3">
101102
{isLoading ? (
102-
<p className="font-16m text-gray1">로딩 중...</p>
103+
<SkeletonUser />
103104
) : (
104105
<>
105106
{members.slice(0, 4).map((member) => (
@@ -125,23 +126,27 @@ const HeaderMyPage = () => {
125126
</div>
126127

127128
{/*유저 프로필 아이콘 & 유저 닉네임*/}
128-
{user && (
129-
<div className="flex items-center pr-[10px] md:pr-[30px] lg:pr-[80px] gap-[12px]">
130-
<div className="w-[34px] h-[34px] md:w-[38px] md:h-[38px]">
131-
{user.profileImageUrl ? (
132-
<img
133-
src={user.profileImageUrl}
134-
alt="유저 프로필 아이콘"
135-
className="w-full h-full rounded-full object-cover"
136-
/>
137-
) : (
138-
<RandomProfile name={user.nickname} />
139-
)}
129+
{isLoading ? (
130+
<SkeletonUser />
131+
) : (
132+
user && (
133+
<div className="flex items-center pr-[10px] md:pr-[30px] lg:pr-[80px] gap-[12px]">
134+
<div className="w-[34px] h-[34px] md:w-[38px] md:h-[38px]">
135+
{user.profileImageUrl ? (
136+
<img
137+
src={user.profileImageUrl}
138+
alt="유저 프로필 아이콘"
139+
className="w-full h-full rounded-full object-cover"
140+
/>
141+
) : (
142+
<RandomProfile name={user.nickname} />
143+
)}
144+
</div>
145+
<span className="hidden md:block text-black3 md:text-base md:font-medium">
146+
{user.nickname}
147+
</span>
140148
</div>
141-
<span className="hidden md:block text-black3 md:text-base md:font-medium">
142-
{user.nickname}
143-
</span>
144-
</div>
149+
)
145150
)}
146151
</div>
147152
</div>

‎src/components/Gnb/skeletonUser.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const SkeletonUser = () => {
2+
return (
3+
<div className="flex items-center pr-[10px] md:pr-[30px] lg:pr-[80px] gap-[12px] animate-pulse">
4+
<div className="w-[34px] h-[34px] md:w-[38px] md:h-[38px] bg-[var(--color-gray2) rounded-full" />
5+
<div className="hidden md:block w-[60px] h-[16px] bg-[var(--color-gray2)] rounded-md" />
6+
</div>
7+
);
8+
};
9+
10+
export default SkeletonUser;

0 commit comments

Comments
 (0)