Map関数を使用して繰り返しとインタフェースpropsを定義する

import Avatar from 'react-avatar';
import styled from 'styled-components';
import NewComponent from './Category/NewComponent';

// interface로 타입지정해주는거 까먹지말기!!!
interface ProfileImage {
  profile: {
    imageUrl: string;
    name: string;
  };
}

const LiveBroadCastWrapper = styled.div `
  /* position: absolute; */
  width: 375px;
  height: 164px;
  margin-top: 9px;
  /* background: #1E1E1E; */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
`;

const InfluencerProfileWrapper = styled.div `
  position: absolute;
  width: 73px;
  height: 110px;
  margin-top: 54px;
  margin-bottom: 11px;
  margin-left: 17px;
`;

const InfluencerImage = styled.div `
  /* display: flex; */
  width: 73px;
  height:73px;
  border: 3px solid #FF8686;
  box-sizing: border-box;
  background: #FFFFFF;
  border-radius: 50%;
`;

const InfluencerName = styled.div `
  position: absolute;
  width: 100px;
  height: 22px;
  margin-top: 4px;
  margin-left: 22px;
  font-style: normal;
  font-weight: normal;
  font-size: 13px;
  line-height: 22px;
  display: flex;
  align-items: center;
  text-align: center;
  letter-spacing: -0.0241176em;
  color: #999999;
`;



// <> 안에는 interface로 선언한 Props이름 ({})안에는 Props로 받고자하는 속성 값
const LiveBroadCast: React.FunctionComponent<ProfileImage> = ({profile}) => {
    return (
      <LiveBroadCastWrapper>
        <InfluencerProfileWrapper>
          <InfluencerImage>
            <Avatar alt="Influencer_ProfileImage" src={profile.imageUrl} size="66.5" round={true}/>
          </InfluencerImage>
          <InfluencerName>{profile.name}</InfluencerName>
        </InfluencerProfileWrapper>
      </LiveBroadCastWrapper>
    );

}

export default LiveBroadCast;

const profile = [
  {
    imageUrl: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ1f-bdyCIMuT2XOfBqr2KUE24QOAYGK9cBFA&usqp=CAU",
    name: "엘린"
  },
  {
    imageUrl: "https://yt3.ggpht.com/ytc/AAUvwnjRgXQ8cfs4tQ88D_QskjxMQgWS8uFQg4MhxKxW=s900-c-k-c0x00ffffff-no-rj",
    name: "레이디"
  },
  {
    imageUrl: "https://fpost.co.kr/board/data/editor/1902/73f13ad6d5f5126be936fc9035fddf68_1549853437_9992.jpg",
    name: "최겨울"
  },
  {
    imageUrl: "https://static.news.zumst.com/images/108/2019/04/30/6c6b7afa729f4288ac6160b50a7a69e4.jpg",
    name: "세리"
  },
  {
    imageUrl:"https://yt3.ggpht.com/ytc/AAUvwnjydzAF-kQIfLTJ5gLy685dWiw4g0_rRF2Zk8DGrA=s900-c-k-c0x00ffffff-no-rj",
    name: "쩡대"
  },
];

const NewComponent: React.FunctionComponent<ProductState> = ({items}) => {
.
.
.
.
.
.
.

return (
    <>
      <TopCarousel items={productCarouselItem} />
      <Title>라이브방송</Title>
      <Slider {...settings}>

// 여기서 첫 번째 profile은 위에서 정의한 데이터들을 Map 함수로 반복하기 위한 역할
// 두 번째, 세 번째 profile은 LiveBroadCast.tsx에서 정의한 ProfileImage interface의 profile

        {profile.map((profile) => {
             return( 
              <LiveBroadCast profile={profile} />
             )
          })} 
      </Slider>

      <Items>
        {items &&
          items.map((item, i) => {
            return <ProductCard item={item}></ProductCard>;
          })}
      </Items>

      <GridList cols={2}>
        {items.map((item, i) => {
          return(
          <GridListTile>
             <ProductCard item={item}></ProductCard>
          </GridListTile>
          )  
        })}
      </GridList>
    </>
  );
};

export default NewComponent;