Skip to content

Commit

Permalink
Merge pull request StudyBadge-TenTen#96 from StudyBadge-TenTen/test
Browse files Browse the repository at this point in the history 
<fix>: <멤버 리스트 디버깅>
  • Loading branch information
@rabyeoljji
rabyeoljji authored Jul 31, 2024
2 parents 4871043 + 1586ab4 commit 1ee8935
Showing 1 changed file with 168 additions and 99 deletions.
267 changes: 168 additions & 99 deletions src/components/channel/MemberList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,112 +83,181 @@ const MemberList = ({ setNewSubLeader, setModal, isStudyEnd }: MemberListPropsTy
window.location.reload();
};

return (
<>
<h2 className="text-2xl font-bold text-Blue-2 text-center mb-2">스터디 멤버</h2>
<div className="w-full h-[500px] flex flex-wrap justify-center items-center px-10 sm:px-12 py-4 overflow-y-scroll custom-scroll">
{!isMember ? (
if (!isMember) {
return (
<>
<h2 className="text-2xl font-bold text-Blue-2 text-center mb-2">스터디 멤버</h2>
<div className="w-full h-[500px] flex flex-wrap justify-center items-center px-10 sm:px-12 py-4 overflow-y-scroll custom-scroll">
<div className="w-full h-full"></div>
) : (
<>
{isLoading
? skeletonList.map((value) => (
<div
key={`skeleton_${value}`}
className="w-60 h-80 border border-solid border-Gray-3 bg-Gray-1 rounded-[50px] flex flex-col justify-between items-center px-4 py-8 m-2 animate-pulse"
>
<div className="w-28 h-28 bg-Gray-2 rounded-full"></div>
<div className="w-1/3 h-4 bg-Gray-2 rounded-[50px]"></div>
<div className="w-2/3 h-4 bg-Gray-2 rounded-[50px]"></div>
<div className="w-2/3 h-4 bg-Gray-2 rounded-[50px]"></div>
</div>
</>
);
} else {
if (!isStudyEnd && data && data.leader) {
return (
<>
<h2 className="text-2xl font-bold text-Blue-2 text-center mb-2">스터디 멤버</h2>
<div className="w-full h-[500px] flex flex-wrap justify-center items-center px-10 sm:px-12 py-4 overflow-y-scroll custom-scroll">
<>
{error &&
(error.response?.status === 401 ? (
<div>회원에게만 공개되는 컨텐츠입니다.</div>
) : (
<div className="text-center">
멤버를 불러오는 데 실패하였습니다. errorName: {error.name} , errorMessage: {error.message}
</div>
))
: !isLoading &&
data &&
data.studyMembers.map((member) => (
<div
key={member.memberId}
className={`w-[210px] h-80 border border-solid border-Gray-3 rounded-[50px] flex flex-col ${!isStudyEnd && data.leader ? "justify-between" : "justify-center"} items-center px-4 py-8 m-2 relative`}
>
{member.badgeLevel === "NONE" && <img src={NONE_BADGE} className="absolute w-16 right-8" />}
{member.badgeLevel === "BRONZE" && <img src={BRONZE_BADGE} className="absolute w-16 right-8" />}
{member.badgeLevel === "SILVER" && <img src={SILVER_BADGE} className="absolute w-16 right-8" />}
{member.badgeLevel === "GOLD" && <img src={GOLD_BADGE} className="absolute w-16 right-8" />}
<div className="flex flex-col justify-center items-center">
{member.imageUrl ? (
<img
src={member.imageUrl}
alt="프로필 이미지"
className="object-cover w-28 h-28 rounded-full bg-Gray-1"
/>
) : (
<div className="w-28 h-28 rounded-full bg-Gray-3 flex justify-center items-center">
<PersonIcon color="text-white" size={[60, 60]} />
</div>
)}
<p
className={`${!isStudyEnd && data.leader ? "text-xl" : "text-2xl mt-10"} font-bold text-Blue-2`}
>
{member.name}
</p>
{member.role === "LEADER" && <p className="font-bold text-Red-2 mt-4">리더</p>}
{member.role === "SUB_LEADER" && <p className="font-bold text-Red-2 mt-4">서브리더</p>}
))}
{isLoading
? skeletonList.map((value) => (
<div
key={`skeleton_${value}`}
className="w-60 h-80 border border-solid border-Gray-3 bg-Gray-1 rounded-[50px] flex flex-col justify-between items-center px-4 py-8 m-2 animate-pulse"
>
<div className="w-28 h-28 bg-Gray-2 rounded-full"></div>
<div className="w-1/3 h-4 bg-Gray-2 rounded-[50px]"></div>
<div className="w-2/3 h-4 bg-Gray-2 rounded-[50px]"></div>
<div className="w-2/3 h-4 bg-Gray-2 rounded-[50px]"></div>
</div>
{/* 리더에게만 보여질 버튼 */}
{!isStudyEnd && data.leader && (
<>
<button
id="subLeaderBtn"
className={`${(member.role === "LEADER" || member.role === "SUB_LEADER") && "hidden"} btn-blue px-3 py-2 w-28`}
onClick={(e) => handleClick(e, member.memberId)}
>
서브리더로 지정
</button>
<button
id="banishBtn"
className={`${member.role === "LEADER" && "hidden"} btn-red px-3 py-2 w-28`}
onClick={(e) => handleClick(e, member.memberId)}
))
: !isLoading &&
Array.isArray(data.studyMembers) &&
data.studyMembers.map((member) => (
<div
key={member.memberId}
className={`w-[210px] h-80 border border-solid border-Gray-3 rounded-[50px] flex flex-col ${!isStudyEnd && data.leader ? "justify-between" : "justify-center"} items-center px-4 py-8 m-2 relative`}
>
{member.badgeLevel === "NONE" && <img src={NONE_BADGE} className="absolute w-16 right-8" />}
{member.badgeLevel === "BRONZE" && <img src={BRONZE_BADGE} className="absolute w-16 right-8" />}
{member.badgeLevel === "SILVER" && <img src={SILVER_BADGE} className="absolute w-16 right-8" />}
{member.badgeLevel === "GOLD" && <img src={GOLD_BADGE} className="absolute w-16 right-8" />}
<div className="flex flex-col justify-center items-center">
{member.imageUrl ? (
<img
src={member.imageUrl}
alt="프로필 이미지"
className="object-cover w-28 h-28 rounded-full bg-Gray-1"
/>
) : (
<div className="w-28 h-28 rounded-full bg-Gray-3 flex justify-center items-center">
<PersonIcon color="text-white" size={[60, 60]} />
</div>
)}
<p
className={`${!isStudyEnd && data.leader ? "text-xl" : "text-2xl mt-10"} font-bold text-Blue-2`}
>
퇴출
</button>
{modalState.isOpen && studyMemberId && (
<Modal>
<div className="w-60 px-6 flex flex-col justify-center items-center text-center whitespace-pre-wrap">
{modalState.content}
<div className="flex justify-center items-center mt-10">
<button
className="yes-btn btn-blue w-10 mr-4"
onClick={(e) => handleConfirm(e, studyMemberId, member.name)}
>
예
</button>
<button
className="no-btn btn-blue"
onClick={() => setModalState((origin) => ({ ...origin, isOpen: false }))}
>
아니요
</button>
</div>
{member.name}
</p>
{member.role === "LEADER" && <p className="font-bold text-Red-2 mt-4">리더</p>}
{member.role === "SUB_LEADER" && <p className="font-bold text-Red-2 mt-4">서브리더</p>}
</div>
{/* 리더에게만 보여질 버튼 */}
<button
id="subLeaderBtn"
className={`${(member.role === "LEADER" || member.role === "SUB_LEADER") && "hidden"} btn-blue px-3 py-2 w-28`}
onClick={(e) => handleClick(e, member.memberId)}
>
서브리더로 지정
</button>
<button
id="banishBtn"
className={`${member.role === "LEADER" && "hidden"} btn-red px-3 py-2 w-28`}
onClick={(e) => handleClick(e, member.memberId)}
>
퇴출
</button>
{modalState.isOpen && studyMemberId && (
<Modal>
<div className="w-60 px-6 flex flex-col justify-center items-center text-center whitespace-pre-wrap">
{modalState.content}
<div className="flex justify-center items-center mt-10">
<button
className="yes-btn btn-blue w-10 mr-4"
onClick={(e) => handleConfirm(e, studyMemberId, member.name)}
>
예
</button>
<button
className="no-btn btn-blue"
onClick={() => setModalState((origin) => ({ ...origin, isOpen: false }))}
>
아니요
</button>
</div>
</Modal>
)}
</>
)}
</div>
</Modal>
)}
</div>
))}
</>
</div>
</>
);
} else if (!isStudyEnd && data) {
return (
<>
<h2 className="text-2xl font-bold text-Blue-2 text-center mb-2">스터디 멤버</h2>
<div className="w-full h-[500px] flex flex-wrap justify-center items-center px-10 sm:px-12 py-4 overflow-y-scroll custom-scroll">
<>
{error &&
(error.response?.status === 401 ? (
<div>회원에게만 공개되는 컨텐츠입니다.</div>
) : (
<div className="text-center">
멤버를 불러오는 데 실패하였습니다. errorName: {error.name} , errorMessage: {error.message}
</div>
))}
{error &&
(error.response?.status === 401 ? (
<div>회원에게만 공개되는 컨텐츠입니다.</div>
) : (
<div className="text-center">
멤버를 불러오는 데 실패하였습니다. errorName: {error.name} , errorMessage: {error.message}
</div>
))}
</>
)}
</div>
</>
);
{isLoading
? skeletonList.map((value) => (
<div
key={`skeleton_${value}`}
className="w-60 h-80 border border-solid border-Gray-3 bg-Gray-1 rounded-[50px] flex flex-col justify-between items-center px-4 py-8 m-2 animate-pulse"
>
<div className="w-28 h-28 bg-Gray-2 rounded-full"></div>
<div className="w-1/3 h-4 bg-Gray-2 rounded-[50px]"></div>
<div className="w-2/3 h-4 bg-Gray-2 rounded-[50px]"></div>
<div className="w-2/3 h-4 bg-Gray-2 rounded-[50px]"></div>
</div>
))
: !isLoading &&
Array.isArray(data.studyMembers) &&
data.studyMembers.map((member) => (
<div
key={member.memberId}
className={`w-[210px] h-80 border border-solid border-Gray-3 rounded-[50px] flex flex-col ${!isStudyEnd && data.leader ? "justify-between" : "justify-center"} items-center px-4 py-8 m-2 relative`}
>
{member.badgeLevel === "NONE" && <img src={NONE_BADGE} className="absolute w-16 right-8" />}
{member.badgeLevel === "BRONZE" && <img src={BRONZE_BADGE} className="absolute w-16 right-8" />}
{member.badgeLevel === "SILVER" && <img src={SILVER_BADGE} className="absolute w-16 right-8" />}
{member.badgeLevel === "GOLD" && <img src={GOLD_BADGE} className="absolute w-16 right-8" />}
<div className="flex flex-col justify-center items-center">
{member.imageUrl ? (
<img
src={member.imageUrl}
alt="프로필 이미지"
className="object-cover w-28 h-28 rounded-full bg-Gray-1"
/>
) : (
<div className="w-28 h-28 rounded-full bg-Gray-3 flex justify-center items-center">
<PersonIcon color="text-white" size={[60, 60]} />
</div>
)}
<p
className={`${!isStudyEnd && data.leader ? "text-xl" : "text-2xl mt-10"} font-bold text-Blue-2`}
>
{member.name}
</p>
{member.role === "LEADER" && <p className="font-bold text-Red-2 mt-4">리더</p>}
{member.role === "SUB_LEADER" && <p className="font-bold text-Red-2 mt-4">서브리더</p>}
</div>
</div>
))}
</>
</div>
</>
);
}
}
return <></>;
};

export default MemberList;

0 comments on commit 1ee8935

Please sign in to comment.