[React MUI 5] 인스타그램 클론코딩 - 게시물(Posts) 영역 만들기 with Faker.js | CardHeader, CardMedia, CardActions

결과물

 

 

1. src/components/Post.js 생성

function Post({ id, username, userImg, img, caption }) {
  return (
    <div>
      {/* Header */}
      {username}

      {/* Media */}

      {/* Buttons */}

      {/* Caption */}

      {/* Comments */}

      {/* TextField */}
    </div>
  );
}
export default Post;

 

2. src/components/Posts.js 생성 및 Faker.js로 mock

import { faker } from '@faker-js/faker';
import { useEffect, useState } from 'react';
import Post from './Post';

function Posts() {
  const [posts, setPosts] = useState();

  useEffect(() => {
    const mockPosts = [...Array(20)].map((_, i) => ({
      username: faker.name.findName(),
      userImg: faker.internet.avatar(),
      img: faker.image.image(),
      caption: faker.lorem.text(),
      id: i,
    }));

    setPosts(mockPosts);
  }, []);

  if (!posts) return null;

  return (
    <div>
      {posts.map((post) => (
        <Post
          key={post.id}
          id={post.id}
          username={post.username}
          userImg={post.userImg}
          img={post.img}
          caption={post.caption}
        />
      ))}
    </div>
  );
}
export default Posts;

 

3. Feed.js 에서  Posts.js 불러오기

import Posts from './Posts';

......

      <Box component="section" sx={{ gridColumn: '1 / 3' }}>
        <Stories />
        <Posts />
      </Box>

posts 영역 mock 데이터 보여짐

 

4. Post.js Header 만들기 위해 CardHeader 사용

import Avatar from '@mui/material/Avatar';
import Card from '@mui/material/Card';
import CardHeader from '@mui/material/CardHeader';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';


import MoreVertIcon from '@mui/icons-material/MoreVert';


function Post({ id, username, userImg, img, caption }) {
  return (
    <Card>
      {/* Header */}
      <CardHeader
        avatar={
          <Avatar src={userImg} aria-label={username}>
            {username.charAt(0)}
          </Avatar>
        }
        action={
          <IconButton aria-label="settings">
            <MoreVertIcon />
          </IconButton>
        }
        title={<Typography fontWeight="bold">{username}</Typography>}
      />

      {/* Media */}

      {/* Buttons */}

      {/* Caption */}

      {/* Comments */}

      {/* TextField */}
    </Card>
  );
}
export default Post;

 

5. Media 이미지를 위해 CardMedia 사용

import CardMedia from '@mui/material/CardMedia'
......

      {/* Media */}
      <CardMedia component="img" image={img} alt={caption} />

 

6. like, comment, chat, bookmark 버튼을 넣을 CardActions 사용

import CardActions from '@mui/material/CardActions';

import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
import ModeCommentOutlinedIcon from '@mui/icons-material/ModeCommentOutlined';
import SendIcon from '@mui/icons-material/Send';
import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
......

      {/* Buttons */}
      <CardActions disableSpacing>
        <IconButton aria-label="like">
          <FavoriteBorderIcon />
        </IconButton>
        <IconButton aria-label="comment">
          <ModeCommentOutlinedIcon />
        </IconButton>
        <IconButton aria-label="chat">
          <SendIcon />
        </IconButton>

        <span style={{ flex: 1 }} />

        <IconButton aria-label="bookmark">
          <BookmarkBorderIcon />
        </IconButton>
      </CardActions>

like, comment, chat, bookmark 버튼 영역 추가