[#585] [프로필 페이지] '참여한 모임' 영역 사용자가 모임장인 모임에 마크 추가 (#586)

* fix: ProfileGroup 프리젠터 컴포넌트에 isGroupOwner prop 추가 * fix: 내가 참여한 모임 목록 페이지 hydration error 해결 - SSRSafeSuspense 추가 * style: 프로필 페이지 참여한 모임 영역 overflow 스타일 수정 * style: profile 페이지 gap 수정
prgrms-web-devcourse · Jun 17, 2024 · 3a3f263 · 3a3f263
1 parent cff01fd
commit 3a3f263
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 37 deletions.
diff --git a/src/app/profile/me/group/page.tsx b/src/app/profile/me/group/page.tsx
@@ -3,6 +3,7 @@
 import useMyGroupsQuery from '@/queries/group/useMyGroupQuery';
 import { checkAuthentication } from '@/utils/helpers';
 
+import SSRSafeSuspense from '@/components/SSRSafeSuspense';
 import BackButton from '@/v1/base/BackButton';
 import TopNavigation from '@/v1/base/TopNavigation';
 import DetailBookGroupCard from '@/v1/bookGroup/DetailBookGroupCard';
@@ -16,40 +17,16 @@ const UserGroupPage = () => {
         </TopNavigation.LeftItem>
         <TopNavigation.CenterItem>내가 참여한 모임</TopNavigation.CenterItem>
       </TopNavigation>
-      <UserGroupContent />
+      <SSRSafeSuspense fallback={<PageSkeleton />}>
+        <UserGroupContent />
+      </SSRSafeSuspense>
     </>
   );
 };
 
 const UserGroupContent = () => {
   const isAuthenticated = checkAuthentication();
-  const { data, isSuccess } = useMyGroupsQuery({ enabled: isAuthenticated });
-
-  if (!isSuccess) {
-    return (
-      <ul className="flex animate-pulse flex-col gap-[1rem] pt-[2rem]">
-        {Array.from({ length: 4 }).map((_, index) => (
-          <li
-            key={index}
-            className="border-placeholder px-[1.6rem] py-[0.9rem] shadow-bookgroup-card"
-          >
-            <div className="flex gap-[0.5rem] [&>*]:rounded-[0.5rem]">
-              <div className="h-[1.9rem] w-[4.34rem] bg-placeholder" />
-              <div className="h-[1.9rem] w-[4.34rem] bg-placeholder" />
-            </div>
-
-            <div className="flex justify-between gap-[1.5rem] pt-[1rem]">
-              <div className="flex flex-col justify-between [&>*]:rounded-[0.5rem]">
-                <div className="h-[2.15rem] w-[23rem] bg-placeholder" />
-                <div className="h-[2rem] w-[10rem] bg-placeholder" />
-              </div>
-              <div className="h-[10.5rem] w-[7.5rem] rounded-[0.5rem] bg-placeholder" />
-            </div>
-          </li>
-        ))}
-      </ul>
-    );
-  }
+  const { data } = useMyGroupsQuery({ enabled: isAuthenticated });
 
   return (
     <ul className="flex flex-col gap-[1rem] pt-[2rem]">
@@ -89,3 +66,27 @@ const UserGroupContent = () => {
 };
 
 export default UserGroupPage;
+
+const PageSkeleton = () => (
+  <ul className="flex animate-pulse flex-col gap-[1rem] pt-[2rem]">
+    {Array.from({ length: 4 }).map((_, index) => (
+      <li
+        key={index}
+        className="border-placeholder px-[1.6rem] py-[0.9rem] shadow-bookgroup-card"
+      >
+        <div className="flex gap-[0.5rem] [&>*]:rounded-[0.5rem]">
+          <div className="h-[1.9rem] w-[4.34rem] bg-placeholder" />
+          <div className="h-[1.9rem] w-[4.34rem] bg-placeholder" />
+        </div>
+
+        <div className="flex justify-between gap-[1.5rem] pt-[1rem]">
+          <div className="flex flex-col justify-between [&>*]:rounded-[0.5rem]">
+            <div className="h-[2.15rem] w-[23rem] bg-placeholder" />
+            <div className="h-[2rem] w-[10rem] bg-placeholder" />
+          </div>
+          <div className="h-[10.5rem] w-[7.5rem] rounded-[0.5rem] bg-placeholder" />
+        </div>
+      </li>
+    ))}
+  </ul>
+);
diff --git a/src/app/profile/me/page.tsx b/src/app/profile/me/page.tsx
@@ -97,7 +97,7 @@ const MyProfileForAuth = () => {
           </Menu.DropdownList>
         </Menu>
       </TopHeader>
-      <div className="flex flex-col gap-[2rem]">
+      <div className="flex flex-col gap-[1rem]">
         <ProfileInfo userId={USER_ID} />
         <Link href="/profile/me/edit" className="w-full">
           <Button colorScheme="main-light" size="full">
@@ -106,8 +106,10 @@ const MyProfileForAuth = () => {
             </span>
           </Button>
         </Link>
-        <ProfileBookShelf userId={USER_ID} />
-        <ProfileGroup userId={USER_ID} />
+        <div className="mt-[3rem] flex flex-col gap-[3rem]">
+          <ProfileBookShelf userId={USER_ID} />
+          <ProfileGroup userId={USER_ID} />
+        </div>
       </div>
     </>
   );

diff --git a/src/v1/profile/bookShelf/ProfileBookshelfPresenter.tsx b/src/v1/profile/bookShelf/ProfileBookshelfPresenter.tsx
@@ -12,7 +12,7 @@ const ProfileBookshelfPresenter = ({
   likeCount,
 }: APIBookshelf) => {
   return (
-    <div className="flex flex-col gap-[2rem]">
+    <div className="flex flex-col gap-[1rem]">
       <div className="flex items-center justify-between">
         <h3 className="text-lg font-bold">책장</h3>
         <div className="flex gap-[2rem]">

diff --git a/src/v1/profile/group/ProfileGroupContainer.tsx b/src/v1/profile/group/ProfileGroupContainer.tsx
@@ -1,4 +1,5 @@
 import useMyGroupsQuery from '@/queries/group/useMyGroupQuery';
+import useMyProfileQuery from '@/queries/user/useMyProfileQuery';
 import { APIUser } from '@/types/user';
 import ProfileGroupPresenter from './ProfileGroupPresenter';
 
@@ -8,10 +9,17 @@ const ProfileGroupContainer = ({
   userId: 'me' | APIUser['userId'];
 }) => {
   const { isSuccess, data } = useMyGroupsQuery({ suspense: true });
+  const {
+    data: { userId: myId },
+  } = useMyProfileQuery({ enabled: userId === 'me' });
+
+  const isMeOwner = (ownerId: number) => ownerId === myId;
 
   if (!isSuccess) return null;
 
-  return <ProfileGroupPresenter userId={userId} {...data} />;
+  return (
+    <ProfileGroupPresenter userId={userId} isGroupOwner={isMeOwner} {...data} />
+  );
 };
 
 export default ProfileGroupContainer;
diff --git a/src/v1/profile/group/ProfileGroupPresenter.tsx b/src/v1/profile/group/ProfileGroupPresenter.tsx
@@ -7,28 +7,30 @@ import Link from 'next/link';
 interface ProfileGroupPresenterProps {
   userId: 'me' | APIUser['userId'];
   bookGroups: APIGroup[];
+  isGroupOwner?: (ownerId: number) => boolean;
 }
 
 const ProfileGroupPresenter = ({
   userId,
   bookGroups,
+  isGroupOwner,
 }: ProfileGroupPresenterProps) => {
   return (
-    <div className="flex flex-col gap-[0.6rem]">
+    <div className="mt-[0.5rem] flex flex-col gap-[1.5rem]">
       <div className="flex items-center justify-between">
         <h3 className="text-lg font-bold">참여한 모임</h3>
         <Link href={`/profile/${userId}/group`}>
           <IconArrowRight height="1.8rem" width="1.8rem" />
         </Link>
       </div>
 
-      <ul className="flex gap-[1rem] overflow-scroll">
-        {bookGroups.map(({ bookGroupId, title, book: { imageUrl } }) => (
+      <ul className="w-app flex gap-[1rem] overflow-y-hidden overflow-x-scroll px-[2rem]">
+        {bookGroups.map(({ bookGroupId, title, owner, book: { imageUrl } }) => (
           <li key={bookGroupId}>
             <SimpleBookGroupCard
               title={title}
               imageSource={imageUrl}
-              isOwner={false}
+              isOwner={!!isGroupOwner && isGroupOwner(owner.id)}
               bookGroupId={bookGroupId}
             />
           </li>