Portfolio


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';


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);


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


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>
  );
};


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

common/PostPreview 컴포넌트

이미지

✨ PostPreview 컴포넌트

import 목록

props

선언부

렌더링

하위 컴포넌트 - PostDetailInfo

하위 컴포넌트 - PostHeaderWithUser