Merge pull request #536 from depromeet/fix/my-profile-design

[FIX] 마이너한 디자인 수정사항
depromeet · Feb 11, 2024 · a6ef7e7 · a6ef7e7
2 parents 3eda174 + d9e6619
commit a6ef7e7
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 25 deletions.
diff --git a/src/app/feed/FeedList.tsx b/src/app/feed/FeedList.tsx
@@ -1,6 +1,8 @@
 'use client';
 import { useFeedMe } from '@/apis/feed';
 import FeedItem, { FeedSkeletonItem } from '@/app/feed/FeedItem';
+import Empty from '@/components/Empty/Empty';
+import { ROUTER } from '@/constants/router';
 import { css } from '@styled-system/css';
 
 function FeedList() {
@@ -13,6 +15,21 @@ function FeedList() {
       </ul>
     );
 
+  if (data.length === 0) {
+    return (
+      <div className={emptyFeedCss}>
+        <Empty
+          type={'suggest'}
+          image={'docs'}
+          link={ROUTER.SEARCH.HOME}
+          title={'피드가 없습니다.'}
+          buttonText={'친구 찾기'}
+          description={'친구를 팔로우하고 피드를 받아볼까요?'}
+        />
+      </div>
+    );
+  }
+
   return (
     <ul className={feedListCss}>
       {data.map((feed) => (
@@ -24,6 +41,13 @@ function FeedList() {
 
 export default FeedList;
 
+const emptyFeedCss = css({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: 'calc(100vh - 200px)',
+});
+
 const feedListCss = css({
   padding: '0 16px 132px 16px',
   display: 'flex',

diff --git a/src/app/feed/page.tsx b/src/app/feed/page.tsx
@@ -8,7 +8,7 @@ export default function FeedPage() {
     <>
       <AppBar />
       <FeedList />
-      <BottomDim />
+      <BottomDim type={'bottomDim2'} />
       <AppBarBottom />
     </>
   );

diff --git a/src/app/mypage/ProfileFeedList.tsx b/src/app/mypage/ProfileFeedList.tsx
@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import { useFeedByMemberId } from '@/apis/feed';
 import ProfileFeedItem, { ProfileFeedItemSkeleton } from '@/app/mypage/ProfileFeedItem';
+import Empty from '@/components/Empty/Empty';
 import { EVENT_LOG_CATEGORY, EVENT_LOG_NAME } from '@/constants/eventLog';
 import { ROUTER } from '@/constants/router';
 import { eventLogger } from '@/utils';
@@ -23,6 +24,14 @@ function ProfileFeedList({ memberId, isMySelf }: { memberId: number; isMySelf: b
         <ProfileFeedItemSkeleton />
       </ul>
     );
+
+  if (data.length === 0) {
+    return (
+      <div className={emptyFeedCss}>
+        <Empty type={'notice'} image={'docs'} title={'아직 작성한 피드가 없어요.'} description={''} />
+      </div>
+    );
+  }
   return (
     <ul className={feedListCss}>
       {data?.map((feed) => (
@@ -43,6 +52,13 @@ const getHref = (recordId: string, isMySelf: boolean) => {
   return ROUTER.RECORD.DETAIL.FOLLOW(recordId);
 };
 
+const emptyFeedCss = css({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: '60px 0',
+});
+
 const feedListCss = css({
   display: 'grid',
   padding: '0 0 132px 0',

diff --git a/src/app/mypage/page.tsx b/src/app/mypage/page.tsx
@@ -30,8 +30,8 @@ function Mypage() {
       <Header />
       <MyProfile />
       <AppBarBottom />
-      <div className={dimCss} />
-      <BottomDim />
+      <div className={profileBackgroundDimCss} />
+      <BottomDim type={'bottomDim2'} />
     </main>
   );
 }
@@ -43,7 +43,7 @@ const backgroundCss = css({
   background: 'gradients.primary',
 });
 
-const dimCss = css({
+const profileBackgroundDimCss = css({
   position: 'absolute',
   width: '100%',
   height: '100%',

diff --git a/src/app/profile/[id]/ProfileContent.tsx b/src/app/profile/[id]/ProfileContent.tsx
@@ -45,8 +45,7 @@ function ProfileContent({
             <span className={followerTabCss}>
               <Link onClick={handleClickFollowList} href={ROUTER.PROFILE.FOLLOW_LIST(memberId, 'following')}>
                 팔로잉 {followingCount}
-              </Link>{' '}
-              &nbsp;
+              </Link>
               <Link onClick={handleClickFollowList} href={ROUTER.PROFILE.FOLLOW_LIST(memberId, 'follower')}>
                 팔로워 {followerCount}
               </Link>
@@ -92,7 +91,11 @@ const userNameCss = css({
 });
 const followerTabCss = css({
   color: 'text.secondary',
+  textStyle: 'body5',
   marginTop: '6px',
+
+  display: 'flex',
+  gap: '10px',
 });
 
 const myTabCss = css({

diff --git a/src/app/profile/[id]/page.tsx b/src/app/profile/[id]/page.tsx
@@ -36,8 +36,8 @@ function FollowProfilePage({ params }: { params: { id: string } }) {
       >
         <ProfileTab memberId={Number(params.id)} />
       </ProfileContent>
-      <div className={dimCss} />
-      <BottomDim />
+      <div className={profileBackgroundDimCss} />
+      <BottomDim type={'bottomDim2'} />
     </main>
   );
 }
@@ -52,7 +52,7 @@ const backgroundCss = css({
   background: 'gradients.primary',
 });
 
-const dimCss = css({
+const profileBackgroundDimCss = css({
   position: 'absolute',
   width: '100%',
   height: '100%',

diff --git a/src/components/BottomDim/BottomDim.tsx b/src/components/BottomDim/BottomDim.tsx
@@ -1,22 +1,42 @@
-import { css } from '@/styled-system/css';
+import { cva } from '@/styled-system/css';
 
-function BottomDim() {
-  return <article className={containerCss}></article>;
+function BottomDim({ type = 'bottomDim1' }: { type?: 'bottomDim1' | 'bottomDim2' }) {
+  return (
+    <article
+      className={containerCss({
+        type: type,
+      })}
+    ></article>
+  );
 }
 
 export default BottomDim;
 
-const containerCss = css({
-  width: '100vw',
-  height: '200px',
-  maxWidth: '475px',
-  margin: '0 auto',
-  position: 'fixed',
-  left: 0,
-  right: 0,
-  bottom: 0,
-  zIndex: 'bottomDim',
-  background:
-    'linear-gradient(180deg, rgba(24, 24, 29, 0.00) 0%, rgba(24, 24, 29, 0.09) 7.58%, rgba(24, 24, 29, 0.59) 34.59%, rgba(24, 24, 29, 0.69) 41.18%, rgba(24, 24, 29, 0.83) 51.39%, #18181D 63.25%)',
-  pointerEvents: 'none',
+const containerCss = cva({
+  base: {
+    width: '100vw',
+    maxWidth: '475px',
+    margin: '0 auto',
+    position: 'fixed',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 'bottomDim',
+    pointerEvents: 'none',
+  },
+  variants: {
+    type: {
+      bottomDim1: {
+        background:
+          'linear-gradient(180deg, rgba(24, 24, 29, 0.00) 0%, rgba(24, 24, 29, 0.09) 7.58%, rgba(24, 24, 29, 0.59) 34.59%, rgba(24, 24, 29, 0.69) 41.18%, rgba(24, 24, 29, 0.83) 51.39%, #18181D 63.25%)',
+        height: '200px',
+      },
+
+      bottomDim2: {
+        background:
+          'linear-gradient(180deg, rgba(24, 24, 29, 0.00) 0%, rgba(24, 24, 29, 0.10) 15.1%, rgba(24, 24, 29, 0.61) 51.56%, rgba(24, 24, 29, 0.73) 70.83%, rgba(24, 24, 29, 0.85) 86.98%, #18181D 100%)',
+        height: '156px',
+      },
+    },
+  },
 });