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

결과물

 

 

 

1. CardContent와 Typography로 caption 채우기

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

......


      {/* Caption */}
      <CardContent>
        <Typography
          fontWeight="bold"
          component="span"
          sx={{ marginRight: '1rem' }}
        >
          {username}
        </Typography>
        {caption}
      </CardContent>

 

2. 글자가 넘치므로 한 줄로 줄이기

      {/* Caption */}
      <CardContent
        sx={{
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          overflow: 'hidden',
        }}
      >
      ......
      
      </CardContent>

 

3. Post.js 파일에 mockComments 생성 (with faker.js)

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

......

function Post({ id, username, userImg, img, caption }) {
  const [comments, setComments] = useState();

  useEffect(() => {
    const mockComments = [...Array(10)].map((_, i) => ({
      username: faker.name.findName(),
      userImg: faker.internet.avatar(),
      comment: faker.lorem.sentence(),
      caption: faker.lorem.text(),
      createdAt: faker.date.recent(10),
      id: i,
    }));

    setComments(mockComments);
  }, []);

  return (
  	......
  );
}

 

4. 댓글 N개 모두 보기 버튼 달기

      {/* Comments */}
      <CardContent>
        {comments?.length > 3 && (
          <Typography
            variant="subtitle2"
            gutterBottom
            sx={{ cursor: 'pointer' }}
          >
            댓글 {comments?.length}개 모두 보기
          </Typography>
        )}

      </CardContent>

 

5. 댓글 3개까지만 나열하기

      {/* Comments */}
      <CardContent>
......
        {comments?.slice(0, 3).map((comment) => (
          <div key={comment.id}>
            <Typography
              fontWeight="bold"
              component="span"
              sx={{ marginRight: '1rem' }}
            >
              {comment.username}
            </Typography>
            {comment.comment}
          </div>
        ))}
      </CardContent>

 

6. 댓글 입력란 TextField로 구현하기

import TextField from '@mui/material/TextField';
import InputAdornment from '@mui/material/InputAdornment';
import Button from '@mui/material/Button';

import MoodIcon from '@mui/icons-material/Mood';
......


      {/* TextField */}
      <TextField
        sx={{ paddingLeft: '1rem', paddingY: '0.5rem' }}
        placeholder="댓글 달기..."
        fullWidth
        variant="standard"
        InputProps={{
          startAdornment: (
            <InputAdornment position="start">
              <MoodIcon fontSize="large" />
            </InputAdornment>
          ),
          endAdornment: (
            <InputAdornment position="end">
              <Button sx={{ fontWeight: 'bold' }}>게시</Button>
            </InputAdornment>
          ),

          disableUnderline: true,
        }}
      />

 

7. 게시물(Post.js)마다 간격 넣어주기 

    <Card sx={{ marginY: '2rem' }}>