Merge pull request #197 from code-zero-to-one/feat/no-group-study-member

[Feat] 그룹스터디 멤버가 없을 경우와 멤버의 진행점수가 없을 경우 UI 처리

Author: aken-you

public/images/no-group-study-member.svg

@@ -155,13 +155,23 @@ export default function GroupStudyMemberItem({
 
           <ProgressBar value={member.progress.score} className="mt-200" />
 
-          {isProgressHistoryOpen && (
-            <ul className="mt-300 flex flex-col gap-300">
-              {member.progress.progressHistory.map((history) => (
-                <ProgressScoreItem key={history.id} {...history} />
-              ))}
-            </ul>
-          )}
+          {isProgressHistoryOpen &&
+            (member.progress.progressHistory.length > 0 ? (
+              <ul className="mt-300 flex flex-col gap-300">
+                {member.progress.progressHistory.map((history) => (
+                  <ProgressScoreItem key={history.id} {...history} />
+                ))}
+              </ul>
+            ) : (
+              <div className="rounded-100 bg-background-alternative mt-300 flex h-[130px] flex-col items-center justify-center gap-100">
+                <span className="font-designer-14b text-text-subtle">
+                  진행한 스터디가 없습니다.
+                </span>
+                <span className="font-designer-13m text-text-subtlest">
+                  스터디를 시작하고 활동 내역을 쌓아보세요.
+                </span>
+              </div>
+            ))}
         </div>
       </div>
     </li>

src/features/study/group/ui/group-study-member-item.tsx

@@ -1,3 +1,4 @@
+import Image from 'next/image';
 import { useState } from 'react';
 import Pagination from '@/shared/ui/pagination';
 import GroupStudyMemberItem from './group-study-member-item';
@@ -29,16 +30,30 @@ export default function GroupStudyMemberList({
     <section className="flex flex-col gap-300">
       <span className="font-designer-20b text-text-default">스터디 참가자</span>
 
-      <ul className="flex flex-col gap-200">
-        {memberList.map((member, idx) => (
-          <GroupStudyMemberItem
-            key={`${member.id}-${idx}`}
-            groupStudyId={groupStudyId}
-            leaderId={leaderId}
-            {...member}
+      {memberList.length > 0 ? (
+        <ul className="flex flex-col gap-200">
+          {memberList.map((member, idx) => (
+            <GroupStudyMemberItem
+              key={`${member.id}-${idx}`}
+              groupStudyId={groupStudyId}
+              leaderId={leaderId}
+              {...member}
+            />
+          ))}
+        </ul>
+      ) : (
+        <div className="bg-background-alternative rounded-100 flex h-[640px] flex-col items-center justify-center gap-200">
+          <Image
+            src="/images/no-group-study-member.svg"
+            alt="no-group-study-member"
+            width={160}
+            height={160}
           />
-        ))}
-      </ul>
+          <p className="text-text-default font-bold-h5">
+            아직 <span className="text-text-brand">참여한 멤버</span>가 없습니다
+          </p>
+        </div>
+      )}
 
       <Pagination
         page={pageNumber}