Skip to content

Commit 707f380

Browse files
MINJI121MINJI121
authored
Merge pull request #78 from part3-4team-Taskify/feature/Gnb
[Refactor] Gnb: 헤더 비브리지, 대시보드, 마이페이지 컴포넌트에 user info api 연동
2 parents ed2d9f4 + 974c556 commit 707f380

File tree

8 files changed

+154
-108
lines changed

8 files changed

+154
-108
lines changed

‎src/api/members.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import axios from "axios";
2-
import { MemberType } from "@/components/Gnb/members";
2+
import { MemberType } from "@/components/Gnb/type";
33

44
interface ApiResponse {
55
members: MemberType[]; // 실제 데이터

‎src/api/user.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import axios from "axios";
2+
3+
interface UserResponse {
4+
id: number;
5+
email: string;
6+
nickname: string;
7+
profileImageUrl: string;
8+
createdAt: string;
9+
updatedAt: string;
10+
}
11+
12+
export const getUserInfo = async () => {
13+
const token = process.env.NEXT_PUBLIC_API_TOKEN;
14+
15+
const response = await axios.get<UserResponse>(
16+
`https://sp-taskify-api.vercel.app/13-4/users/me`,
17+
{
18+
headers: {
19+
Authorization: `Bearer ${token}`,
20+
},
21+
}
22+
);
23+
24+
return response.data || [];
25+
};

‎src/components/Gnb/HeaderBebridge.tsx‎

Lines changed: 40 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,20 @@
11
import React, { useState, useEffect } from "react";
22
import { useRouter } from "next/router";
3-
import { MemberType } from "@/components/Gnb/members";
3+
import { MemberType, UserType } from "./type";
44
import { getMembers } from "@/api/members";
5+
import { getUserInfo } from "@/api/user";
56
import RandomProfile from "../table/member/RandomProfile";
6-
import ModalInviting from "./ModalInviting";
77
import NewDashboard from "../modal/NewDashboard";
88

99
interface HeaderBebridgeProps {
1010
dashboardId?: string | string[];
1111
}
1212

13-
/*dummy data*/
14-
const user = {
15-
nickname: "배유철",
16-
profileImageUrl: "",
17-
};
18-
1913
const HeaderBebridge: React.FC<HeaderBebridgeProps> = ({ dashboardId }) => {
20-
// dashboardId 받을 수 있게 변경
21-
22-
/*멤버 목록 profileImageUrl loading*/
23-
const [isLoading, setIsLoading] = useState(true);
14+
const [user, setUser] = useState<UserType | null>(null);
2415
const [members, setMembers] = useState<MemberType[]>([]);
25-
/*관리 버튼 클릭 이벤트 함수*/
16+
const [isLoading, setIsLoading] = useState(true);
17+
/*관리 버튼 클릭 시 대시보드 수정하기 페이지 이동*/
2618
const router = useRouter();
2719
const goToDashboardEdit = () => {
2820
router.push(`/dashboard/${dashboardId}/edit`);
@@ -36,6 +28,22 @@ const HeaderBebridge: React.FC<HeaderBebridgeProps> = ({ dashboardId }) => {
3628
setIsModalOpen(false);
3729
};
3830

31+
/*유저 정보 api 호출*/
32+
useEffect(() => {
33+
const fetchUser = async () => {
34+
try {
35+
const data = await getUserInfo();
36+
setUser(data);
37+
} catch (error) {
38+
console.log("유저 정보 불러오기 실패", error);
39+
} finally {
40+
setIsLoading(false);
41+
}
42+
};
43+
44+
fetchUser();
45+
}, []);
46+
3947
/*멤버 목록 api 호출*/
4048
useEffect(() => {
4149
const fetchMembers = async () => {
@@ -56,7 +64,7 @@ const HeaderBebridge: React.FC<HeaderBebridgeProps> = ({ dashboardId }) => {
5664

5765
return (
5866
<header className="w-full h-[50px] sm:h-[60px] md:h-[70px] flex items-center justify-center bg-white border-b-[1px] border-b-[#D9D9D9]">
59-
<div className="w-full flex items-center justify-between pl-[18vw]">
67+
<div className="w-full flex items-center justify-between pl-[4vw]">
6068
<div className="flex items-center gap-[8px]">
6169
<p className="hidden lg:block text-base text-black3 font-bold md:text-xl">
6270
비브리지
@@ -93,15 +101,13 @@ const HeaderBebridge: React.FC<HeaderBebridgeProps> = ({ dashboardId }) => {
93101
/>
94102
<span className="text-sm md:text-base text-gray1">초대하기</span>
95103
</button>
96-
{/*임시 컴포넌트명, 추후 정식 초대 모달 컴포넌트로 교체*/}
97-
98104
{isModalOpen && <NewDashboard onClose={closeInviteModal} />}
99105
</div>
100106

101107
{/*4개의 프로필 아이콘 표시, 나머지 멤버 숫자 +n 아이콘으로 표시*/}
102108
<div className="flex -space-x-3">
103109
{isLoading ? (
104-
<p className="text-gray-500 text-sm">로딩 중...</p>
110+
<p className="font-16m text-gray1">로딩 중...</p>
105111
) : (
106112
<>
107113
{members.slice(0, 4).map((member) => (
@@ -132,23 +138,24 @@ const HeaderBebridge: React.FC<HeaderBebridgeProps> = ({ dashboardId }) => {
132138
</div>
133139

134140
{/*유저 프로필 아이콘 & 유저 닉네임*/}
135-
<div className="flex items-center pr-[10px] md:pr-[30px] lg:pr-[80px] gap-[12px]">
136-
<div className="w-[34px] h-[34px] md:w-[38px] md:h-[38px]">
137-
{user.profileImageUrl ? (
138-
<img
139-
src={user.profileImageUrl}
140-
alt="유저 프로필 아이콘"
141-
className="w-full h-full rounded-full object-cover"
142-
/>
143-
) : (
144-
<RandomProfile name={user.nickname} />
145-
)}
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+
)}
153+
</div>
154+
<span className="hidden md:block text-black3 md:text-base md:font-medium">
155+
{user.nickname}
156+
</span>
146157
</div>
147-
148-
<span className="hidden md:block text-black3 md:text-base md:font-medium">
149-
{user.nickname}
150-
</span>
151-
</div>
158+
)}
152159
</div>
153160
</div>
154161
</header>

‎src/components/Gnb/HeaderDashboard.tsx‎

Lines changed: 42 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1-
import React, { useState } from "react";
1+
import React, { useState, useEffect } from "react";
22
import { useRouter } from "next/router";
3+
import { UserType } from "./type";
4+
import { getUserInfo } from "@/api/user";
35
import RandomProfile from "../table/member/RandomProfile";
4-
import ModalInviting from "./ModalInviting";
5-
6-
/*dummy data*/
7-
const user = {
8-
nickname: "배유철",
9-
profileImageUrl: "/svgs/dummy-icon.png",
10-
};
6+
import NewDashboard from "../modal/NewDashboard";
117

128
const HeaderDashboard = () => {
9+
const [user, setUser] = useState<UserType | null>(null);
10+
const [isLoading, setIsLoading] = useState(true);
11+
1312
/*관리 버튼 클릭 이벤트 함수*/
1413
const router = useRouter();
1514
const { dashboardId } = router.query;
@@ -26,9 +25,25 @@ const HeaderDashboard = () => {
2625
setIsModalOpen(false);
2726
};
2827

28+
/*유저 정보 api 호출*/
29+
useEffect(() => {
30+
const fetchUser = async () => {
31+
try {
32+
const data = await getUserInfo();
33+
setUser(data);
34+
} catch (error) {
35+
console.log("유저 정보 불러오기 실패", error);
36+
} finally {
37+
setIsLoading(false);
38+
}
39+
};
40+
41+
fetchUser();
42+
}, []);
43+
2944
return (
3045
<header className="w-full h-[50px] sm:h-[60px] md:h-[70px] flex items-center justify-center bg-white border-b-[1px] border-b-[#D9D9D9]">
31-
<div className="w-full flex items-center justify-between pl-[18vw]">
46+
<div className="w-full flex items-center justify-between pl-[4vw]">
3247
<div className="flex items-center">
3348
<p className="text-base text-black3 font-bold md:text-xl">
3449
내 대시보드
@@ -60,8 +75,7 @@ const HeaderDashboard = () => {
6075
/>
6176
<span className="text-sm md:text-base text-gray1">초대하기</span>
6277
</button>
63-
{/*임시 컴포넌트명, 추후 정식 초대 모달 컴포넌트로 교체*/}
64-
{isModalOpen && <ModalInviting onClose={closeInviteModal} />}
78+
{isModalOpen && <NewDashboard onClose={closeInviteModal} />}
6579
</div>
6680

6781
{/*구분선*/}
@@ -70,22 +84,24 @@ const HeaderDashboard = () => {
7084
</div>
7185

7286
{/*유저 프로필 아이콘 & 유저 닉네임*/}
73-
<div className="flex items-center pr-[10px] md:pr-[30px] lg:pr-[80px] gap-[12px]">
74-
<div className="w-[34px] h-[34px] md:w-[38px] md:h-[38px]">
75-
{user.profileImageUrl ? (
76-
<img
77-
src={user.profileImageUrl}
78-
alt="유저 프로필 아이콘"
79-
className="w-full h-full rounded-full object-cover"
80-
/>
81-
) : (
82-
<RandomProfile name={user.nickname} index={2} />
83-
)}
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+
)}
99+
</div>
100+
<span className="hidden md:block text-black3 md:text-base md:font-medium">
101+
{user.nickname}
102+
</span>
84103
</div>
85-
<span className="hidden md:block text-black3 md:text-base md:font-medium">
86-
{user.nickname}
87-
</span>
88-
</div>
104+
)}
89105
</div>
90106
</div>
91107
</header>

‎src/components/Gnb/HeaderMypage.tsx‎

Lines changed: 40 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,15 @@
11
import React, { useState, useEffect } from "react";
22
import { useRouter } from "next/router";
3-
import { MemberType } from "@/components/Gnb/members";
3+
import { MemberType, UserType } from "./type";
44
import { getMembers } from "@/api/members";
5+
import { getUserInfo } from "@/api/user";
56
import RandomProfile from "../table/member/RandomProfile";
6-
import ModalInviting from "./ModalInviting";
7-
8-
/*dummy data*/
9-
const user = {
10-
nickname: "배유철",
11-
profileImageUrl: "/svgs/dummy-icon.png",
12-
};
7+
import NewDashboard from "../modal/NewDashboard";
138

149
const HeaderMyPage = () => {
15-
/*멤버 목록 profileImageUrl loading*/
16-
const [isLoading, setIsLoading] = useState(true);
10+
const [user, setUser] = useState<UserType | null>(null);
1711
const [members, setMembers] = useState<MemberType[]>([]);
12+
const [isLoading, setIsLoading] = useState(true);
1813

1914
/*관리 버튼 클릭 이벤트 함수*/
2015
const router = useRouter();
@@ -31,6 +26,22 @@ const HeaderMyPage = () => {
3126
setIsModalOpen(false);
3227
};
3328

29+
/*유저 정보 api 호출*/
30+
useEffect(() => {
31+
const fetchUser = async () => {
32+
try {
33+
const data = await getUserInfo();
34+
setUser(data);
35+
} catch (error) {
36+
console.log("유저 정보 불러오기 실패", error);
37+
} finally {
38+
setIsLoading(false);
39+
}
40+
};
41+
42+
fetchUser();
43+
}, []);
44+
3445
/*멤버 목록 api 호출*/
3546
useEffect(() => {
3647
const fetchMembers = async () => {
@@ -82,13 +93,13 @@ const HeaderMyPage = () => {
8293
<span className="text-sm md:text-base text-gray1">초대하기</span>
8394
</button>
8495
{/*임시 컴포넌트명, 추후 정식 초대 모달 컴포넌트로 교체*/}
85-
{isModalOpen && <ModalInviting onClose={closeInviteModal} />}
96+
{isModalOpen && <NewDashboard onClose={closeInviteModal} />}
8697
</div>
8798

8899
{/*4개의 프로필 아이콘 표시, 나머지 멤버 숫자 +n 아이콘으로 표시*/}
89100
<div className="flex -space-x-3">
90101
{isLoading ? (
91-
<p className="text-gray-500 text-sm">로딩 중...</p>
102+
<p className="font-16m text-gray1">로딩 중...</p>
92103
) : (
93104
<>
94105
{members.slice(0, 4).map((member) => (
@@ -114,22 +125,24 @@ const HeaderMyPage = () => {
114125
</div>
115126

116127
{/*유저 프로필 아이콘 & 유저 닉네임*/}
117-
<div className="flex items-center pr-[10px] md:pr-[30px] lg:pr-[80px] gap-[12px]">
118-
<div className="w-[34px] h-[34px] md:w-[38px] md:h-[38px]">
119-
{user.profileImageUrl ? (
120-
<img
121-
src={user.profileImageUrl}
122-
alt="유저 프로필 아이콘"
123-
className="w-full h-full rounded-full object-cover"
124-
/>
125-
) : (
126-
<RandomProfile name={user.nickname} index={2} />
127-
)}
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+
)}
140+
</div>
141+
<span className="hidden md:block text-black3 md:text-base md:font-medium">
142+
{user.nickname}
143+
</span>
128144
</div>
129-
<span className="hidden md:block text-black3 md:text-base md:font-medium">
130-
{user.nickname}
131-
</span>
132-
</div>
145+
)}
133146
</div>
134147
</div>
135148
</header>

‎src/components/Gnb/ModalInviting.tsx‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

src/components/Gnb/members.ts renamed to src/components/Gnb/type.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,8 @@ export interface MemberType {
33
profileImageUrl: string;
44
nickname: string;
55
}
6+
7+
export interface UserType {
8+
profileImageUrl: string;
9+
nickname: string;
10+
}

0 commit comments

Comments
 (0)