Skip to content

Commit 93dadf4

Browse files
gaeulzzanggaeulzzang
committed
#103 [FEAT] 팀 조회 skeleton ui 적용
1 parent 62666e4 commit 93dadf4

11 files changed

Lines changed: 81 additions & 29 deletions

File tree

‎src/apis/external/useGetExternalName.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ const getExternalName = async (teamId: number): Promise<string> => {
88
const response = await axiosInstance.get<CommonResponse<string>>(
99
`/api/teams/${teamId}/external-name`
1010
);
11+
if (!response.data.result) return Promise.reject(response);
1112
return response.data.result;
1213
} catch (error) {
1314
console.error('생성될 외부 이름 조회 실패', error);

‎src/apis/external/useGetSlackConnect.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ const getSlackConnect = async (workspaceId: number): Promise<GetSlackConnectResp
1313
'/slack/connect',
1414
{ params: workspaceId }
1515
);
16+
if (!response.data.result) return Promise.reject(response);
1617
return response.data.result;
1718
} catch (error) {
1819
console.error('Slack 연동 조회 실패', error);

‎src/apis/goal/useGetGoalName.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ const getGoalName = async (teamId: number): Promise<string> => {
88
const response = await axiosInstance.get<CommonResponse<string>>(
99
`/api/teams/${teamId}/goal-name`
1010
);
11+
if (!response.data.result) return Promise.reject(response);
1112
return response.data.result;
1213
} catch (error) {
1314
console.error('생성될 목표 이름 조회 실패', error);

‎src/apis/issue/useGetIssueName.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ const getIssueName = async (teamId: number): Promise<string> => {
88
const response = await axiosInstance.get<CommonResponse<string>>(
99
`/api/teams/${teamId}/issue-name`
1010
);
11+
if (!response.data.result) return Promise.reject(response);
1112
return response.data.result;
1213
} catch (error) {
1314
console.error('생성될 이슈 이름 조회 실패', error);

‎src/apis/setting/useGetWorkspaceTeams.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ const getWorkspaceTeams = async (
2424
'/api/workspace/setting/teams',
2525
hasPagination ? { params: { page: page, size: size } } : {}
2626
);
27+
if (!response.data.result) return Promise.reject(response);
2728
return response.data.result;
2829
} catch (error) {
2930
console.error('워크스페이스 팀 조회 실패', error);

‎src/apis/workspace/usePostCreateWorkspace.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,10 @@ export const usePostCreateWorkspace = () => {
2222
return useMutation<CreateWorkspaceResponse, Error, CreateWorkspaceRequest>({
2323
mutationFn: postCreateWorkspace,
2424
onSuccess: (data) => {
25-
localStorage.setItem(LOCAL_STORAGE_KEY.inviteUrl, data.result.inviteUrl);
26-
localStorage.setItem(LOCAL_STORAGE_KEY.invitePassword, data.result.invitePassWord);
25+
if (data.result) {
26+
localStorage.setItem(LOCAL_STORAGE_KEY.inviteUrl, data.result.inviteUrl);
27+
localStorage.setItem(LOCAL_STORAGE_KEY.invitePassword, data.result.invitePassWord);
28+
}
2729
},
2830
});
2931
};

‎src/pages/setting/SettingMember.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const DUMMY_MEMBERS = [
1212
name: '이가을',
1313
email: 'gaeulzzang@gmail.com',
1414
teams: [
15-
{ teamId: 1, teamName: 'veco1', teamImageUrl: null },
15+
{ teamId: 1, teamName: 'veco1', teamImageUrl: '' },
1616
{
1717
teamId: 2,
1818
teamName: 'veco2',
@@ -23,23 +23,23 @@ const DUMMY_MEMBERS = [
2323
},
2424
{
2525
memberId: 2,
26-
profileImageUrl: null,
26+
profileImageUrl: '',
2727
name: '선우정아',
2828
email: 'mymelody@naver.com',
2929
teams: [],
3030
joinedAt: '25.02.01',
3131
},
3232
{
3333
memberId: 3,
34-
profileImageUrl: null,
34+
profileImageUrl: '',
3535
name: '가응가',
3636
email: 'gaeullee@gmail.com',
37-
teams: [{ teamId: 1, teamName: 'veco1', teamImageUrl: null }],
37+
teams: [{ teamId: 1, teamName: 'veco1', teamImageUrl: '' }],
3838
joinedAt: '25.03.01',
3939
},
4040
{
4141
memberId: 4,
42-
profileImageUrl: null,
42+
profileImageUrl: '',
4343
name: '가을리',
4444
email: 'gaeulzzang11@naver.com',
4545
teams: [
@@ -48,8 +48,8 @@ const DUMMY_MEMBERS = [
4848
teamName: 'veco1',
4949
teamImageUrl: 'https://avatars.githubusercontent.com/u/91470334?v=4',
5050
},
51-
{ teamId: 2, teamName: 'veco2', teamImageUrl: null },
52-
{ teamId: 3, teamName: 'veco3', teamImageUrl: null },
51+
{ teamId: 2, teamName: 'veco2', teamImageUrl: '' },
52+
{ teamId: 3, teamName: 'veco3', teamImageUrl: '' },
5353
],
5454
joinedAt: '25.04.01',
5555
},
@@ -75,11 +75,11 @@ const SettingMember = () => {
7575
{/* <>*/}
7676
{/* <MemberItem*/}
7777
{/* key={members[0].memberId}*/}
78-
{/* profileImage={members[0].profileUrl}*/}
78+
{/* profileImageUrl={members[0].profileImageUrl}*/}
7979
{/* name={members[0].name}*/}
8080
{/* email={members[0].email}*/}
8181
{/* teams={members[0].teams}*/}
82-
{/* date={members[0].joinedAt}*/}
82+
{/* joinedAt={members[0].joinedAt}*/}
8383
{/* className={`py-[2.4rem]`}*/}
8484
{/* />*/}
8585
{/* <hr className={`w-full text-gray-300 mb-[2.4rem]`} />*/}
@@ -89,11 +89,11 @@ const SettingMember = () => {
8989
{/* .map((member, index) => (*/}
9090
{/* <MemberItem*/}
9191
{/* key={index}*/}
92-
{/* profileImage={member.profileUrl}*/}
92+
{/* profileImageUrl={member.profileImageUrl}*/}
9393
{/* name={member.name}*/}
9494
{/* email={member.email}*/}
9595
{/* teams={member.teams}*/}
96-
{/* date={member.joinedAt}*/}
96+
{/* joinedAt={member.joinedAt}*/}
9797
{/* />*/}
9898
{/* ))}*/}
9999
{/* </>*/}

‎src/pages/setting/SettingTeam.tsx‎

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useState } from 'react';
44
import TeamCreateModal from './components/modal/TeamCreateModal.tsx';
55
// import { useInView } from 'react-intersection-observer';
66
// import { useGetWorkspaceTeams } from '../../apis/setting/useGetWorkspaceTeams.ts';
7+
// import TeamItemSkeleton from './components/TeamItemSkeleton.tsx';
78

89
const DUMMY_TEAMS = [
910
{
@@ -39,7 +40,16 @@ const DUMMY_TEAMS = [
3940
const SettingTeam = () => {
4041
// TODO: 팀 목록 조회 API 연동
4142
// const { ref, inView } = useInView();
42-
// const { data: teams, fetchNextPage, hasNextPage, isFetchingNextPage } = useGetWorkspaceTeams();
43+
// const {
44+
// data: teams,
45+
// fetchNextPage,
46+
// hasNextPage,
47+
// isFetchingNextPage,
48+
// isLoading,
49+
// } = useGetWorkspaceTeams();
50+
// const allTeams = teams?.pages.flatMap((page) => page.teamList) || [];
51+
// const firstTeam = allTeams[0];
52+
// const restTeams = allTeams.slice(1);
4353
const [isModalOpen, setIsModalOpen] = useState(false);
4454

4555
// useEffect(() => {
@@ -55,14 +65,46 @@ const SettingTeam = () => {
5565
onClick={() => setIsModalOpen(!isModalOpen)}
5666
/>
5767
<hr className={`w-full text-gray-300`} />
68+
{/*{isLoading ? (*/}
69+
{/* <TeamItemSkeleton />*/}
70+
{/*) : (*/}
71+
{/* <>*/}
72+
{/* {firstTeam && (*/}
73+
{/* <TeamItem*/}
74+
{/* teamImageUrl={firstTeam.teamImageUrl}*/}
75+
{/* teamName={firstTeam.teamName}*/}
76+
{/* memberCount={firstTeam.memberCount}*/}
77+
{/* createdAt={firstTeam.createdAt}*/}
78+
{/* />*/}
79+
{/* )}*/}
80+
{/* <hr className={`w-full text-gray-300 mb-[2.4rem]`} />*/}
81+
{/* {restTeams &&*/}
82+
{/* restTeams.map((team, index) => (*/}
83+
{/* <TeamItem*/}
84+
{/* teamImageUrl={team.teamImageUrl}*/}
85+
{/* key={index}*/}
86+
{/* teamName={team.teamName}*/}
87+
{/* memberCount={team.memberCount}*/}
88+
{/* createdAt={team.createdAt}*/}
89+
{/* className={`mb-[3.2rem]`}*/}
90+
{/* />*/}
91+
{/* ))}*/}
92+
{/* </>*/}
93+
{/*)}*/}
94+
{/*{isFetchingNextPage && (*/}
95+
{/* <>*/}
96+
{/* <TeamItemSkeleton />*/}
97+
{/* <TeamItemSkeleton />*/}
98+
{/* </>*/}
99+
{/*)}*/}
58100
<TeamItem
59101
teamImageUrl={DUMMY_TEAMS[0].teamImageUrl}
60102
teamName={DUMMY_TEAMS[0].teamName}
61103
memberCount={DUMMY_TEAMS[0].memberCount}
62104
createdAt={DUMMY_TEAMS[0].createdAt}
63105
className={`py-[2.4rem]`}
64106
/>
65-
<hr className={`w-full text-gray-300 mb-[2.4rem]`} />
107+
66108
{DUMMY_TEAMS.slice(1).map((team, index) => (
67109
<TeamItem
68110
teamImageUrl={team.teamImageUrl}

‎src/pages/setting/components/MemberItem.tsx‎

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,13 @@ import ProfileImage from './ProfileImage.tsx';
33
import SubProfileImage from './SubProfileImage.tsx';
44
import { useDropdownActions, useDropdownInfo } from '../../../hooks/useDropdown.ts';
55
import Dropdown from '../../../components/Dropdown/Dropdown.tsx';
6-
7-
type SettingMemberTeam = {
8-
teamId: number;
9-
teamName: string;
10-
teamImageUrl: string | null;
11-
};
6+
import type { Team } from '../../../types/setting.ts';
127

138
interface MemberItemProps {
149
profileImageUrl: string | null;
1510
name: string;
1611
email: string;
17-
teams?: SettingMemberTeam[];
12+
teams: Team[];
1813
joinedAt: string;
1914
className?: string;
2015
}
@@ -51,13 +46,7 @@ const MemberItem = (props: MemberItemProps) => {
5146
);
5247
};
5348

54-
const ProfileLayout = ({
55-
teams,
56-
onClick,
57-
}: {
58-
teams?: SettingMemberTeam[];
59-
onClick: () => void;
60-
}) => {
49+
const ProfileLayout = ({ teams, onClick }: { teams: Team[]; onClick: () => void }) => {
6150
return (
6251
<div className={`flex w-[6.2rem] justify-start items-center`} onClick={onClick}>
6352
{teams && teams.length === 1 && <ProfileImage profileImage={teams[0].teamImageUrl} />}

‎src/pages/setting/components/TeamItemSkeleton.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
const TeamItemSkeleton = () => {
2+
return (
3+
<div className="flex items-center mb-[3.2rem] animate-pulse">
4+
<div className="w-12 h-12 bg-gray-200 rounded-full mr-4" />
5+
<div className="flex-1">
6+
<div className="h-4 bg-gray-200 rounded w-1/3 mb-2" />
7+
<div className="h-3 bg-gray-200 rounded w-1/4" />
8+
</div>
9+
</div>
10+
);
11+
};
12+
13+
export default TeamItemSkeleton;

0 commit comments

Comments
 (0)