[React MUI 5] 인스타그램 클론코딩 - 상단 스토리(Stories) 만들기 with Faker.js

결과물

상단 스토리

 

 

1. Faker.js 설치

npm install @faker-js/faker@^7 --save-dev

 

2. Stories에 faker.js를 사용하여 mockStories(가짜 데이터) 만들기

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

function Stories() {
  const [stories, setStories] = useState();

  useEffect(() => {
    const mockStories = [...Array(20)].map((_, i) => ({
      username: faker.name.findName(),
      name: faker.name.firstName(),
      phone: faker.phone.number(),
      address: faker.address.county(),
      website: faker.internet.url(),
      avatar: faker.internet.avatar(),
      id: i,
    }));

    setStories(mockStories);
  }, []);

  if (!stories) return <div>loading...</div>;

  return (
    <Box>
      {stories.map((story) => (
        <>
          <img src={story.avatar} alt={story.username} />
          <span>{story.username}</span>
        </>
      ))}
    </Box>
  );
}
export default Stories;

 

3. Stories 가로로 스크롤 되도록 css 처리

import { grey } from '@mui/material/colors';
......

    <Box
      sx={{
        display: 'flex',
        padding: '1.5rem',
        marginTop: '2rem',
        overflowX: 'scroll',
        border: `1px solid ${grey[200]}`,
        borderRadius: '2px',
        '> div + div': {
          marginLeft: '0.5rem',
        },
      }}
    >
      {stories.map((story) => (
      ......
      
    </Box>

 

4. src/components/Story.js 컴포넌트 생성 및 Stories.js 에 적용

import { Avatar, Typography } from '@mui/material';

function Story({ avatar, username }) {
  return (
    <div>
      <Avatar src={avatar} alt={username} />

      <Typography>{username}</Typography>
    </div>
  );
}
export default Story;

import Story from './Story';
......

      {stories.map((story) => (
        <Story key={story.id} avatar={story.avatar} username={story.username} />
      ))}

 

5. Feed 왼쪽 영역 배경 색 red 제거 및 그리드 사이 gap 넣기

  columnGap: '3rem' 추가

  bgcolor: 'red' 제거

function Feed() {
  return (
    <Box
      component="main"
      sx={{
        display: 'grid',
        gridTemplateColumns: {
          xs: 'repeat(1, 1fr)',
          sm: 'repeat(2, 1fr)',
          md: 'repeat(3, 1fr)',
        },
        columnGap: '3rem', // gap 추가
        maxWidth: 'lg',
        marginX: 'auto',
      }}
    >
      <Box component="section" sx={{ gridColumn: '1 / 3' }}>
        <Stories />
        {/* posts */}
      </Box>
      
      
......

 

6. Avatar의 크기 조정, 빨간 테두리 적용, hover시 확대 효과 적용

      <Avatar
        src={avatar}
        alt={username}
        sx={{
          width: '56px',
          height: '56px',
          cursor: 'pointer',
          // 확대 효과
          ':hover': {
            transform: 'scale(1.1)',
          },
          transition: 'transform 0.2s ease-out',

          // 빨간 테두리
          '> img': {
            border: `2px solid ${red[500]}`,
            borderRadius: '50%',
            padding: '1.5px',
          },
        }}
      />

 

7. Avatar 아래 username 줄임 처리로 마무리

      <Typography variant="body2" noWrap align="center" sx={{ width: '56px' }}>
        {username}
      </Typography>