common/PostPreview 컴포넌트

이미지

• 프로필이 있는 버전

• 프로필이 없는 버전

• 실제 구현 (프로필이 있는 버전)

✨ PostPreview 컴포넌트

import 목록

• Post 타입

• Avatar 컴포넌트 (프로필 사진)

• Icon 컴포넌트 (좋아요, 댓글 아이콘)

• 스타일 컴포넌트

import type Post from '@types/Post';
import { Avatar } from '../Avatar';
import Icon from '../Icon';
import {
  PreviewWrapper,
  PostHeaderWrapper,
  PostInfoWrapper,
  PostContent,
  UserNameWrapper,
  AvatarWrapper,
  PostDetailInfoWrapper
} from './PostPreview.style';

props

• post
백엔드 API 로 부터 받아온 Post 데이터 하나를 의미합니다.

• noneProfile
false : 타임라인에서 사용할 경우, 프로필이 있는 경우 (기본값)
true : Profile 페이지에서 한 사람의 명상 포스트를 보는 경우

interface PostPreviewProps {
  post: Post;
  noneProfile: boolean;
}

선언부

// 1. PostPreview 에서 사용할 데이터들입니다
const { image, likes, comments, title, author, createdAt } = post;
// 2. 좋아요 개수
const totalLikes = likes.length;
// 3. 댓글 개수
const totalComments = comments.length;
// 4. 좋아요와 댓글 아이콘을 아이콘과 정보를 map 함수로 불러오기 위해 다음과 같이 작성했습니다
const iconDescription = [
  { name: 'favorite', size: 12, total: totalLikes },
  { name: 'chat', size: 12, total: totalComments }
];
// 5. 컨텐츠를 최대 100자로 자릅니다
const previewTitle = title.substring(0, 100);

렌더링

• PostHeader : PostHeaderWithUser 와 PostDetailinfo 중 하나를 보여줍니다

• PostContent : 최대 100자의 컨텐츠를 보여줍니다

const PostHeader = noneProfile === true ? PostHeaderWithUser : PostDetailInfo;
  return (
    <PreviewWrapper>
      <PostHeaderWrapper>
        <PostHeader />
      </PostHeaderWrapper>
      <PostContent>{previewTitle}...</PostContent>
    </PreviewWrapper>
  );
};

하위 컴포넌트 - PostDetailInfo

const PostDetailInfo = () => {
  return (
    <PostDetailInfoWrapper>
			// 포스트 작성 날짜
      {createdAt}
			// 아이콘 + 각 아이콘의 total
      {iconDescription.map((iconInfo, index) => { 
        return ( 
          <div key={index}>
            <Icon
              name={iconInfo.name}
              size={iconInfo.size}
              color={'greyLight'}
            />
            {iconInfo.total}
          </div>
        );
      })}
    </PostDetailInfoWrapper>
  );
};

하위 컴포넌트 - PostHeaderWithUser

const PostHeaderWithUser = () => {
  return (
    <>
      <AvatarWrapper>
        <Avatar
          alt={'유저 프로필'}
          src={image}
          size={25}
        />
      </AvatarWrapper>
      <PostInfoWrapper>
        <UserNameWrapper>{author}</UserNameWrapper>
        <PostDetailInfo />
      </PostInfoWrapper>
    </>
  );
};