feat: empty view 추가

Nexters · Aug 14, 2023 · c0518e1 · c0518e1
1 parent 5acecf7
commit c0518e1
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 1 deletion.
diff --git a/public/images/film.png b/public/images/film.png
diff --git a/src/components/user/EmptyView.tsx b/src/components/user/EmptyView.tsx
@@ -0,0 +1,31 @@
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+import { Button } from '@/components/shared';
+
+interface Props {
+  isLogin?: boolean;
+}
+
+export function EmptyView({ isLogin }: Props) {
+  const router = useRouter();
+
+  return (
+    <div className='tw-flex tw-flex-col tw-items-center tw-gap-9'>
+      <div className='tw-flex tw-flex-col tw-items-center tw-gap-2.5'>
+        <Image
+          src='/images/film.png'
+          alt='empty view'
+          width={200}
+          height={186}
+          priority
+        />
+        <p className='tw-text-body1 tw-text-grayscale-300'>
+          아직 등록된 사진이 없어요
+        </p>
+      </div>
+      {!isLogin && (
+        <Button onClick={() => router.push('/signin')}>내 그라피 만들기</Button>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/user/index.ts b/src/components/user/index.ts
@@ -4,3 +4,4 @@ export * from './FilmAddModal';
 export * from './FilmSelectModal';
 export * from './FilmTitleModal';
 export * from './ProfileModal';
+export * from './EmptyView';
diff --git a/src/pages/user/[id]/index.tsx b/src/pages/user/[id]/index.tsx
@@ -14,6 +14,7 @@ import { Drawer } from '@/components/shared/Drawer';
 import { AddMenu } from '@/components/user';
 import {
   CameraRoll,
+  EmptyView,
   FilmAddModal,
   FilmSelectModal,
   FilmTitleModal,
@@ -72,7 +73,7 @@ export default function User({
   if (isError) return <div>에러 ㅋ</div>;
 
   return (
-    <div className='tw-relative tw-overflow-x-hidden tw-pb-10 tw-pt-3'>
+    <div className='tw-relative tw-min-h-screen tw-overflow-x-hidden tw-pb-10 tw-pt-3'>
       {userData && (
         <Avatar
           src={userData.profile_img ?? '/images/avatar-placeholder.png'}
@@ -99,6 +100,11 @@ export default function User({
             onEditTitle={() => handleEditTitle(title, film_id)}
           />
         ))}
+        {!filmList && (
+          <div className='tw-mt-[60px]'>
+            <EmptyView isLogin={isLogin} />
+          </div>
+        )}
       </div>
       {isLogin && (
         <Button