[React MUI 5] 인스타그램 클론코딩 - 피드 오른쪽 프로필(MiniProfile, Suggestions) with Faker.js | Avatar, List

결과물

 

 

 

1. MiniProfile.js 에 사용할 mockProfile 생성

import * as React from 'react';
import { faker } from '@faker-js/faker';

function MiniProfile() {
  const [profile, setProfile] = React.useState();

  React.useEffect(() => {
    const mockProfile = {
      email: faker.internet.email(),
      username: faker.name.findName(),
      avatar: faker.internet.avatar(),
      id: faker.datatype.uuid(),
    };
    setProfile(mockProfile);
  }, []);

  return (
  
  );  
}

 

2. MUI 예제 Avatar, List 로 MiniProfile.js 구현

import * as React from 'react';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import ListItemAvatar from '@mui/material/ListItemAvatar';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';

......

    <List sx={{ marginTop: '2rem' }}>
      <ListItem disablePadding secondaryAction={<Button>전환</Button>}>
        <ListItemAvatar>
          <Avatar
            alt="Remy Sharp"
            src={profile?.avatar}
            sx={{ width: 56, height: 56, marginRight: '1rem' }}
          />
        </ListItemAvatar>
        <ListItemText primary={profile?.email} secondary={profile?.username} />
      </ListItem>
    </List>

 

3. Feed.js 에서 bgcolor 부분 제거

      <Box
        component="section"
        sx={{
          display: { xs: 'none', md: 'block' },
          gridColumn: '3',
          // bgcolor: 'gray',
        }}
      >
        <MiniProfile />
        {/* sugestions */}
      </Box>

 

4. MiniProfile 똑같이 복사해서 Suggestions 만들기

•   Suggestions.js 생성 후 mockSuggestions 생성

import * as React from 'react';
import { faker } from '@faker-js/faker';

function Suggestions() {
  const [suggestions, setSuggestions] = React.useState([]);

  React.useEffect(() => {
    const suggestions = [...Array(5)].map((_) => ({
      email: faker.internet.email(),
      username: faker.name.findName(),
      avatar: faker.internet.avatar(),
      id: faker.datatype.uuid(),
    }));
    setSuggestions(suggestions);
  }, []);
  
  return <div>Suggestions</div>;
}
export default Suggestions;

 

5. mockSuggestions 개수 만큼 Avatar, List 로 Suggestions.js 구현

import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import ListItemAvatar from '@mui/material/ListItemAvatar';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';

......

  return (
    <List>
      {suggestions?.map((suggestion) => (
        <ListItem
          key={suggestion.id}
          disablePadding
          secondaryAction={<Button>팔로우</Button>}
        >
          <ListItemAvatar sx={{ marginLeft: '0.25rem' }}>
            <Avatar alt="Remy Sharp" src={suggestion.avatar} />
          </ListItemAvatar>
          <ListItemText
            primary={suggestion.email}
            secondary={suggestion.username}
          />
        </ListItem>
      ))}
    </List>
  );

 

6. suggestions 위에 '회원님을 위한 추천' 타이틀 및 '모두 보기' 버튼 넣기

import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';

......

    <>
      <Box
        sx={{
          marginTop: '1rem',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}
      >
        <Typography color="GrayText" fontWeight="bold">
          회원님을 위한 추천
        </Typography>
        <Button color="inherit" sx={{ fontWeight: 'bold' }}>
          모두 보기
        </Button>
      </Box>
      <List>
......      
      </List>
    </>

 

 

7. MiniProfile.js Suggestions.js 의 이메일 표시 부분 font-weight 굻게 처리

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

// ...... MiniProfile.js

        <ListItemText
          primary={
            <Typography variant="body1" fontWeight={600}>
              {profile?.email}
            </Typography>
          }
          secondary={profile?.username}
        />

// ...... suggestion.js

            <ListItemText
              primary={
                <Typography variant="body1" fontWeight={600}>
                  {suggestion.email}
                </Typography>
              }
              secondary={suggestion.username}
            />

MiniProfile, Suggestions