feat: 빈 소식 페이지 친구 추천 기능 구현

depromeet · Nov 26, 2024 · fb4d778 · fb4d778
1 parent 60b1938
commit fb4d778
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 54 deletions.
diff --git a/features/news/components/molecules/empty-news.tsx b/features/news/components/molecules/empty-news.tsx
@@ -2,6 +2,7 @@ import Link from 'next/link';
 
 import { SpeechBubbleIcon } from '@/components/atoms';
 import { Divider } from '@/components/atoms/divider';
+import { RecommendedProfileCardList } from '@/features/profile-recommend';
 import { css } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 
@@ -22,6 +23,10 @@ export const EmptyNews = () => {
         </Link>
       </div>
       <Divider variant="thick" />
+      <RecommendedProfileCardList
+        title="다른 수영인과 응원을 주고 받아보세요"
+        variant="vertical"
+      />
     </>
   );
 };

diff --git a/features/news/components/organisms/news-list.tsx b/features/news/components/organisms/news-list.tsx
@@ -30,7 +30,7 @@ export const NewsList = () => {
   //   void queryClient.refetchQueries({ queryKey: ['newsData'], type: 'active' });
   // };
 
-  return !isEmpty ? (
+  return isEmpty ? (
     <EmptyNews />
   ) : (
     <>

diff --git a/features/profile-recommend/components/molecules/recommended-profile-card.tsx b/features/profile-recommend/components/molecules/recommended-profile-card.tsx
@@ -4,15 +4,17 @@ import { Button } from '@/components/atoms';
 import { ProfileImage } from '@/components/molecules';
 import { useProfileData } from '@/features/profile/hooks';
 import { useMemberFollowingState } from '@/hooks';
-import { css } from '@/styled-system/css';
-import { flex } from '@/styled-system/patterns';
+import { css, cva } from '@/styled-system/css';
 
-interface ProfileCardProps {
+import { ProfileCardListProps } from '../organisms';
+
+interface ProfileCardProps extends Pick<ProfileCardListProps, 'variant'> {
   isMyProfile: boolean;
   memberId: number;
 }
 
 export function RecommendedProfileCard({
+  variant = 'vertical',
   isMyProfile,
   memberId,
 }: ProfileCardProps) {
@@ -26,9 +28,12 @@ export function RecommendedProfileCard({
 
   if (!profileData) return null;
   return (
-    <div className={ProfileCardStyle.layout}>
-      <Link href={`/profile/${memberId}`} className={ProfileCardStyle.link}>
-        <div className={ProfileCardStyle.image}>
+    <div className={css(ProfileCardStyle.layout.raw({ variant }))}>
+      <Link
+        href={`/profile/${memberId}`}
+        className={css(ProfileCardStyle.link.raw({ variant }))}
+      >
+        <div className={css(ProfileCardStyle.imageLayout.raw({ variant }))}>
           <ProfileImage
             alt="profile image"
             src={profileData.profileImageUrl}
@@ -37,12 +42,14 @@ export function RecommendedProfileCard({
             className={css({ borderRadius: 'full', objectFit: 'cover' })}
           />
         </div>
-        <p className={ProfileCardStyle.nickname}>{profileData.nickname}</p>
-        <p className={ProfileCardStyle.introduction}>
-          {profileData.introduction ? profileData.introduction : null}
-        </p>
+        <div className={css(ProfileCardStyle.textLayout.raw({ variant }))}>
+          <p className={ProfileCardStyle.nickname}>{profileData.nickname}</p>
+          <p className={css(ProfileCardStyle.introduction.raw({ variant }))}>
+            {profileData.introduction ? profileData.introduction : null}
+          </p>
+        </div>
       </Link>
-      <div className={ProfileCardStyle.followButton}>
+      <div className={css(ProfileCardStyle.followButton.raw({ variant }))}>
         {!isMyProfile && (
           <>
             {isFollowing ? (
@@ -72,44 +79,110 @@ export function RecommendedProfileCard({
 }
 
 const ProfileCardStyle = {
-  layout: flex({
-    position: 'relative',
-    direction: 'column',
-    alignItems: 'center',
-    width: '146px',
-    height: '208px',
-    backgroundColor: 'fill.normal',
-    borderRadius: '10px',
-    shrink: 0,
-    p: '16px',
+  layout: cva({
+    base: {
+      position: 'relative',
+      flexShrink: 0,
+      backgroundColor: 'fill.normal',
+      borderRadius: '10px',
+      p: '16px',
+    },
+    variants: {
+      variant: {
+        vertical: { width: '146px', height: '208px' },
+        horizontal: { display: 'flex', alignItems: 'center', height: '100px' },
+      },
+    },
   }),
-  link: flex({
-    position: 'relative',
-    direction: 'column',
-    alignItems: 'center',
+  link: cva({
+    base: {
+      w: 'full',
+      display: 'flex',
+      position: 'relative',
+    },
+    variants: {
+      variant: {
+        vertical: {
+          flexDirection: 'column',
+          alignItems: 'center',
+        },
+        horizontal: {
+          alignItems: 'center',
+        },
+      },
+    },
   }),
-  image: css({
-    position: 'relative',
-    w: '60px',
-    h: '60px',
-    mb: '12px',
+  imageLayout: cva({
+    base: {
+      position: 'relative',
+      w: '60px',
+      h: '60px',
+    },
+    variants: {
+      variant: {
+        vertical: {
+          mb: '12px',
+        },
+        horizontal: {},
+      },
+    },
   }),
   nickname: css({
     textStyle: 'body2.normal',
     fontWeight: 600,
     mb: '2px',
   }),
-  introduction: css({
-    textStyle: 'label2',
-    fontWeight: 400,
-    color: 'text.alternative',
-    textAlign: 'center',
-    lineClamp: 2,
+  introduction: cva({
+    base: {
+      textStyle: 'label2',
+      fontWeight: 400,
+      color: 'text.alternative',
+      lineClamp: 2,
+    },
+    variants: {
+      variant: {
+        vertical: {
+          textAlign: 'center',
+        },
+        horizontal: { wordBreak: 'keep-all' },
+      },
+    },
+  }),
+  textLayout: cva({
+    base: {
+      display: 'flex',
+      flexDirection: 'column',
+    },
+    variants: {
+      variant: {
+        vertical: {
+          alignItems: 'center',
+        },
+        horizontal: {
+          justifyContent: 'center',
+          ml: '12px',
+          w: '50%',
+        },
+      },
+    },
   }),
-  followButton: css({
-    w: 'full',
-    p: '0 20px',
-    position: 'absolute',
-    bottom: '16px',
+  followButton: cva({
+    base: {
+      position: 'absolute',
+    },
+    variants: {
+      variant: {
+        vertical: {
+          w: 'full',
+          p: '0 20px',
+          bottom: '16px',
+          left: '50%',
+          transform: 'translateX(-50%)',
+        },
+        horizontal: {
+          right: '16px',
+        },
+      },
+    },
   }),
 };
diff --git a/features/profile-recommend/components/organisms/recommended-profile-card-list.tsx b/features/profile-recommend/components/organisms/recommended-profile-card-list.tsx
@@ -1,17 +1,22 @@
 import { Suspense } from 'react';
 
 import { useCurrentMemberInfo, useMemberFollowingState } from '@/hooks';
-import { css } from '@/styled-system/css';
-import { flex } from '@/styled-system/patterns';
+import { css, cva } from '@/styled-system/css';
 
 import { recommendedMemberIds } from '../../constants';
 import { RecommendedProfileCard } from '../molecules';
 
-interface ProfileCardListProps {
+type VariantType = 'vertical' | 'horizontal';
+
+export interface ProfileCardListProps {
   title: string;
+  variant?: VariantType;
 }
 
-export function RecommendedProfileCardList({ title }: ProfileCardListProps) {
+export function RecommendedProfileCardList({
+  title,
+  variant = 'horizontal',
+}: ProfileCardListProps) {
   const { data: myData } = useCurrentMemberInfo();
   const { useSyncFollowingListState } = useMemberFollowingState();
   useSyncFollowingListState(recommendedMemberIds);
@@ -26,10 +31,11 @@ export function RecommendedProfileCardList({ title }: ProfileCardListProps) {
     <section className={ProfileCardListStyle.layout}>
       <p className={ProfileCardListStyle.title}>{title}</p>
       <Suspense>
-        <div className={ProfileCardListStyle.slider}>
+        <div className={css(ProfileCardListStyle.slider.raw({ variant }))}>
           {recommendedMemberIds.map((memberId) => (
             <RecommendedProfileCard
               key={memberId}
+              variant={variant === 'vertical' ? 'horizontal' : 'vertical'}
               memberId={memberId}
               isMyProfile={getIsMyProfile(memberId)}
             />
@@ -52,12 +58,23 @@ const ProfileCardListStyle = {
     fontWeight: 600,
     mb: '16px',
   }),
-  slider: flex({
-    gap: '8px',
-    overflowX: 'auto',
-    mb: '16px',
-    '&::-webkit-scrollbar': {
-      display: 'none',
+  slider: cva({
+    base: {
+      display: 'flex',
+      gap: '8px',
+      overflowX: 'auto',
+      mb: '16px',
+      '&::-webkit-scrollbar': {
+        display: 'none',
+      },
+    },
+    variants: {
+      variant: {
+        vertical: {
+          flexDirection: 'column',
+        },
+        horizontal: {},
+      },
     },
   }),
 };
diff --git a/features/profile/components/organisms/my-page.tsx b/features/profile/components/organisms/my-page.tsx
@@ -61,7 +61,7 @@ export function MyProfile({
           />
         </div>
       </section>
-      <RecommendedProfileCardList title="다른 수영인들과 응원을 주고 받아보세요" />
+      <RecommendedProfileCardList title="다른 수영인과 응원을 주고 받아보세요" />
       <Tab type="primary">
         <TabItem
           text="통계"