[#664] [독서 모임] 참여 중인 모임 UI 개선 (#670)

* style: 독서모임 목록 카드 컴포넌트 제목 fontsize 14로 수정

* feat: 모임 만들기 유도 배너 구현

* feat: 모임 목록 페이지에서 참여 모임이 없는 경우 배너 노출

- 모임 목록 상세 카드 safe nickname 함수 적용

* fix: 모임 목록 페이지 내 참여한 모임 카드에서 모임장인 경우 뱃지 노출되도록 UI 수정

* style: 모임 생성 유도 배너 heading font size 수정

* feat: 모임 생성 유도 배너 클릭 시 모임 생성 페이지로 이동하도록 link 태그 추가

Author: gxxrxn

public/images/book-illustration.png

@@ -23,6 +23,7 @@ import SearchGroupInput from '@/components/bookGroup/SearchGroup';
 import SimpleBookGroupCard, {
   SimpleBookGroupCardSkeleton,
 } from '@/components/bookGroup/SimpleBookGroupCard';
+import CreateGroupBanner from '@/components/bookGroup/banner/CreateGroupBanner';
 
 const GroupPage = () => {
   const router = useRouter();
@@ -53,7 +54,7 @@ const GroupPage = () => {
       <div className="flex w-full flex-col gap-[2rem]">
         <SearchGroupInput onClick={handleSearchInputClick} />
         <SSRSafeSuspense fallback={<PageSkeleton />}>
-          {isAuthenticated && <MyBookGroupList />}
+          {isAuthenticated && <MyBookGroupSection />}
           <EntireBookGroupList />
         </SSRSafeSuspense>
       </div>
@@ -67,24 +68,33 @@ const GroupPage = () => {
 
 export default GroupPage;
 
-const MyBookGroupList = () => {
+const MyBookGroupSection = () => {
   const isAuthenticated = checkAuthentication();
   const {
     data: { bookGroups },
   } = useMyGroupsQuery({ enabled: isAuthenticated });
   const { data: myId } = useMyProfileId({ enabled: isAuthenticated });
 
+  // 참여한 모임이 없는 경우, 모임 생성 유도 배너 노출
+  if (bookGroups.length === 0) {
+    return <CreateGroupBanner />;
+  }
+
   return (
-    <section className="flex gap-[1rem] overflow-y-hidden overflow-x-scroll pb-[1.5rem]">
-      {bookGroups.map(({ title, book, bookGroupId, owner }) => (
-        <SimpleBookGroupCard
-          key={bookGroupId}
-          title={title}
-          imageSource={book.imageUrl}
-          isOwner={owner.id === myId}
-          bookGroupId={bookGroupId}
-        />
-      ))}
+    <section className="flex flex-col gap-[1rem]">
+      <h2 className="font-body1-bold">내 모임</h2>
+      <ul className="flex gap-[1rem] overflow-y-hidden overflow-x-scroll pb-[1.5rem]">
+        {bookGroups.map(({ title, book, bookGroupId, owner }) => (
+          <li key={bookGroupId}>
+            <SimpleBookGroupCard
+              title={title}
+              imageSource={book.imageUrl}
+              isOwner={owner.id === myId}
+              bookGroupId={bookGroupId}
+            />
+          </li>
+        ))}
+      </ul>
     </section>
   );
 };
@@ -149,6 +159,7 @@ const EntireBookGroupList = () => {
   return (
     <>
       <section className="flex flex-col gap-[1rem]">
+        <h2 className="font-body1-bold">전체 모임</h2>
         {isSuccess &&
           data.pages.map(({ bookGroups }) =>
             bookGroups.map(
@@ -171,6 +182,7 @@ const EntireBookGroupList = () => {
                   bookImageSrc={book.imageUrl}
                   date={{ start: startDate, end: endDate }}
                   owner={{
+                    id: owner.id,
                     name: owner.nickname,
                     profileImageSrc: owner.profileUrl,
                   }}

src/app/group/page.tsx

@@ -54,6 +54,7 @@ const UserGroupContent = () => {
               bookImageSrc={book.imageUrl}
               date={{ start: startDate, end: endDate }}
               owner={{
+                id: owner.id,
                 name: owner.nickname,
                 profileImageSrc: owner.profileUrl,
               }}

src/app/profile/me/group/page.tsx

@@ -1,6 +1,8 @@
 import Link from 'next/link';
 
 import { IconCalendar, IconMembers, IconComments } from '@public/icons';
+import { getSafeNickname } from '@/utils/converter';
+
 import BookGroupStatus from '@/components/bookGroup/BookGroupStatus';
 import Badge from '@/components/common/Badge';
 import Avatar from '@/components/common/Avatar';
@@ -11,7 +13,7 @@ interface DetailBookGroupCardProps {
   description: string;
   bookImageSrc: string;
   date: { start: string; end: string };
-  owner: { name: string; profileImageSrc: string };
+  owner: { id: number; name: string; profileImageSrc: string };
   memberCount: number;
   commentCount: number;
   isPublic: boolean;
@@ -37,13 +39,13 @@ const DetailBookGroupCard = ({
           <Public isPublic={isPublic} />
         </div>
         <div className="flex justify-between gap-[1.5rem] pt-[1rem]">
-          <div className="flex min-w-0 flex-grow flex-col justify-between ">
+          <div className="flex min-w-0 flex-grow flex-col justify-center gap-[0.6rem]">
             <Title title={title} />
             <Description description={description} />
             <Duration start={date.start} end={date.end} />
             <div className="flex justify-between">
               <Owner
-                name={owner.name}
+                name={getSafeNickname(owner.id, owner.name)}
                 profileImageSrc={owner.profileImageSrc}
               />
               <div className="flex gap-[0.5rem]">
@@ -66,23 +68,16 @@ const Public = ({ isPublic }: { isPublic: boolean }) => (
 );
 
 const Title = ({ title }: { title: string }) => {
-  return <p className="min-w-0 truncate font-body1-bold">{title}</p>;
+  return <p className="min-w-0 truncate font-body2-bold">{title}</p>;
 };
 
 const Description = ({ description }: { description: string }) => {
   return <p className="min-w-0 truncate font-body2-regular">{description}</p>;
 };
 
 const Duration = ({ start, end }: { start: string; end: string }) => {
-  const formatDateTime = (dateString: string) =>
-    new Intl.DateTimeFormat('ko-KR', {
-      year: 'numeric',
-      month: '2-digit',
-      day: '2-digit',
-    }).format(new Date(dateString));
-
   return (
-    <div className="flex items-center gap-[0.5rem]">
+    <div className="my-[0.2rem] flex items-center gap-[0.5rem]">
       <IconCalendar className="w-[1.2rem] fill-placeholder" />
       <p className="text-placeholder font-caption1-regular">
         {formatDateTime(start)} - {formatDateTime(end)}
@@ -91,6 +86,13 @@ const Duration = ({ start, end }: { start: string; end: string }) => {
   );
 };
 
+const formatDateTime = (dateString: string) =>
+  new Intl.DateTimeFormat('ko-KR', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  }).format(new Date(dateString));
+
 const Owner = ({
   name,
   profileImageSrc,

src/components/bookGroup/DetailBookGroupCard.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import BookCover from '../book/BookCover';
+import BookCover from '@/components/book/BookCover';
 
 interface SimpleBookGroupCardProps {
   title: string;
@@ -17,11 +17,16 @@ const SimpleBookGroupCard = ({
   return (
     <Link href={`/group/${bookGroupId}`}>
       <article className="flex w-[10rem] flex-col gap-[1rem]">
-        <div className="bg-main-300 px-[1.8rem] py-[1.6rem]">
+        <div className="relative rounded-[0.5rem] bg-black-100 px-[1.8rem] py-[1.6rem]">
+          {isOwner && (
+            <span className="absolute left-[0.6rem] top-[0.6rem] z-10 rounded-[0.5rem] bg-main-300 px-[0.6rem] py-[0.4rem] text-main-900 font-caption2-bold">
+              운영
+            </span>
+          )}
           <BookCover size="xsmall" src={imageSource} />
         </div>
         <p className="break-keep text-center !leading-tight font-caption1-regular">
-          {isOwner ? `👑 ${title}` : title}
+          {title}
         </p>
       </article>
     </Link>

src/components/bookGroup/SimpleBookGroupCard.tsx

@@ -0,0 +1,33 @@
+import Link from 'next/link';
+
+import Image from '@/components/common/Image';
+
+const CreateGroupBanner = () => {
+  return (
+    <Link href="/group/create">
+      <article className="flex w-full cursor-pointer select-none items-center justify-between rounded-[0.8rem] bg-main-300 p-[2rem]">
+        <div className="flex flex-col gap-[0.6rem]">
+          <h3 className="text-main-900 font-body2-bold">
+            원하는 모임이 없다면?
+          </h3>
+          <p className="whitespace-pre-line text-black-600 font-body2-bold">
+            {`읽고 싶은 책으로
+            직접 모임을 만들어 보세요`}
+          </p>
+        </div>
+        <div>
+          <Image
+            src="/images/book-illustration.png"
+            alt="책"
+            width={81}
+            height={48}
+            loading="eager"
+            priority
+          />
+        </div>
+      </article>
+    </Link>
+  );
+};
+
+export default CreateGroupBanner;

src/components/bookGroup/banner/CreateGroupBanner.tsx

@@ -24,6 +24,7 @@ export const Default: Story = {
     },
     memberCount: 3,
     owner: {
+      id: 3,
       name: '소피아',
       profileImageSrc: '',
     },

src/stories/bookGroup/DetailBookGroupCard.stories.tsx

@@ -31,7 +31,7 @@ module.exports = {
       },
       colors: {
         main: {
-          300: '#F5F4EE',
+          300: '#FFF7E6',
           400: '#FAF0DD',
           500: '#FFDEB6',
           600: '#FFD480', // use with opacity 18%