Merge pull request #74 from go-cham/Hyeonmin

Fixed: 내 게시글, 참여 게시글 없을 시 페이지 수정

src/features/posts/components/NoPost/NoPost.tsx

@@ -0,0 +1,35 @@
+import { useNavigate } from 'react-router-dom';
+import { POST_TYPE } from '@/common/constants/post-type';
+import { ReactComponent as NoPostIcon } from './no-post-icon.svg';
+
+interface NoPostText {
+  type: POST_TYPE;
+}
+
+export function NoPost({ type }: NoPostText) {
+  const navigate = useNavigate();
+
+  const text =
+    type === POST_TYPE.MY
+      ? '아직 작성한 게시물이 없어요.'
+      : '투표하거나 댓글 남긴 게시글이 없어요.';
+
+  return (
+    <div
+      className={
+        'absolute left-1/2 top-[45%] flex -translate-x-1/2 flex-col items-center'
+      }
+    >
+      <NoPostIcon className={'h-[7.512rem] w-[7.496rem]'} />
+      <span className="mt-[1.688rem] font-system-body3">{text}</span>
+      {type === POST_TYPE.MY && (
+        <span
+          className="cursor-pointer text-mainSub-main-500 underline font-system-body4"
+          onClick={() => navigate('/write')}
+        >
+          글 작성 시작
+        </span>
+      )}
+    </div>
+  );
+}

src/features/posts/components/NoPost/index.ts

@@ -0,0 +1 @@
+export { NoPost } from './NoPost';

src/features/posts/components/PostCardList/PostCardList.tsx

@@ -1,4 +1,5 @@
 import { POST_TYPE } from '@/common/constants/post-type';
+import { NoPost } from '@/features/posts/components/NoPost';
 import { PostCard } from '@/features/posts/components/PostCard';
 import { useGetPosts } from '@/features/posts/queries';
 import { useUser } from '@/features/user/queries/useUser';
@@ -14,6 +15,10 @@ export function PostCardList({ type }: PostCardListProps) {
     type,
   });
 
+  if (type !== POST_TYPE.ALL && posts?.length === 0) {
+    return <NoPost type={type} />;
+  }
+
   return (
     <ul className={'flex w-full flex-col items-center space-y-[1.7rem]'}>
       {posts?.map((post, index) => (

src/pages/user/UserPage.tsx

@@ -42,7 +42,7 @@ function UserPage() {
     <PageWrapper>
       <UserPageHeader />
       <Divider className={'my-[1.9rem]'} />
-      <main className={'flex min-h-0 w-full flex-col'}>
+      <main className={'flex h-full min-h-0 w-full flex-col'}>
         <Suspense fallback={'fuck'}>
           <PostTypeTabList
             selectedPostType={selectedPostType}
@@ -62,7 +62,7 @@ function UserPage() {
                 : participatedPostsRef,
             ])
           }
-          className={'hide-scrollbar overflow-y-scroll px-[2.5rem]'}
+          className={'hide-scrollbar h-full overflow-y-scroll px-[2.5rem]'}
         >
           <Suspense fallback={<PostCardListSkeleton />}>
             <PostCardList type={selectedPostType} />