(reactjs)음악 플레이어 만들기(2) - 컴포넌트 제작

안녕하세요. 이번강의에서는 뮤직플레이어중 아래 사진과 같은 ui를 구성하기 워한 컴포넌트를 제작해보겠습니다.

 

목차는 다음과 같습니다.

 

--목차--

흰버튼 컴포넌트 제작

파란버튼 컴포넌트 제작

앨범아트 컴포넌트 제작

곡 정보 컴포넌트 제작

 

먼저 music-player/src 폴더 안에 PlayerBlock.js라는 파일과 components/player 라는 폴더를

만들어주세요.

그리고 그 안에  Cover.js, WhiteButton.js, BlueButton.js, SongInfo.js 라는 파일을 만들어줍니다.

 

폴더 구조는 아래와 같습니다.

 

├── ./src

│   ├── ./components

│   │  ├── ./PlayerBlock.js
│   │  ├── ./player
│   │  │   ├── ./player/Cover.js

│   │  │   ├── ./player/WhiteButton.js

│   │  │   ├── ./player/BlueButton.js

│   │  │   ├── ./player/SongInfo.js

 

 

#흰버튼 컴포넌트 제작

먼저 하얀색 버튼을 만들어주겠습니다.

WhiteButton.js를 아래와 같이 편집해주세요

import React from 'react';
import styled from 'styled-components';

const CircleButtonBlock= styled.div`
    width:3.5rem;
    height:3.5rem;
    background:white;
    border-radius:100%;
    background: rgb(152,169,255);
background: radial-gradient(circle, rgba(152,169,255,0.9055555555555556) 0%, rgba(67,113,255,1) 100%);
    box-shadow:  19px 19px 38px #9096a0,
             -19px -19px 38px #ffffff;
    overflow:hidden;         
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
`
const Icon = styled.div`
    color:#fff;
    font-size:2.5rem;
    background:none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
`
const InButton = styled.div`
    position: relative;
    background:#none;
    object-fit:cover;
    border-radius:100rem;
    width:100%;
    height:100%;
    box-shadow: 0 0 6px 2px #fff;
`

function CircleButton(props) {
    
  return (
      
     <CircleButtonBlock style={props.style}>
     <InButton>
     <Icon>{props.icon}</Icon>
     </InButton>
        </CircleButtonBlock>
        
      );
}

export default CircleButton;

 

제가 style에 props.style이라는 변수를 준 이유는 상위 컴포넌트에서 위치를 자유롭게 조정할수 있도록 하기 위함입니다. props를 이용하여 상위컴포넌트의 변수를 받을 수 있습니다.

 

파란색 버튼은 흰 버튼하고 만드는 방식은 똑같지만 색깔만 바꾸면 됩니다.

 

#앨범아트 컴포넌트 제작

다음으로 앨범아트를 넣을 Cover.js 컴포넌트를 수정해보겠습니다.

import React from 'react';
import styled from 'styled-components';

const PlayerCdBlock = styled.div`
   width: 25rem;
   height:25rem;
   margin:0 auto;
   margin-top:5rem;
   background: #DDE6F7;
   box-shadow:  19px 19px 38px #9096a1,
             -19px -19px 38px #ffffff;
   border-radius:100rem;
   padding:0.8rem;
   overflow:hidden;
`;
const AlbumArt = styled.img`
   width:100%;
   height:100%;
   border-radius:100rem;
   object-fit:cover;
`;



function PlayerCd(props) {
    
  return (
      
     <PlayerCdBlock style={props.float}>
     <AlbumArt src={props.cover}/>
        </PlayerCdBlock>
        
      );
}

export default PlayerCd;

 

똑같이 상위 컴포넌트에서 수정할 수 있도록 style에 props를 주었고 div 안에 원형 사진을 넣을 AlbumArt라는 컴포넌트도 만들어 주었습니다. 

#곡정보 컴포넌트 제작

다음은 SongInfo컴포넌트 입니다.

SongInfo 컴포넌트는 음악 타이틀과 아티스트를 표시하기 때문에 props로 변수를 주면 되겠죠?

 

import React from 'react';
import styled from 'styled-components';

const SongInfoBox= styled.div`
    width:100%;
    height:auto;
    background:none;
    margin-top:5rem;
`
const Title=styled.div`
    color:#758398;
    font-size:3rem;
`
const Artist=styled.div`
    color:#9FADC7;
    font-size:1.3rem;
    margin-top:1rem;
`


function SongInfo(props) {
    
  return (
      
     <div className="SongInfo">
     <SongInfoBox>
     <Title>
     {props.title}
     </Title>
     <Artist>
     {props.artist}
     </Artist>
     </SongInfoBox>
     </div>
        
      );
}

export default SongInfo;

위 코드처럼 props.title, props.artist로 아티스트와 제목을 표시해주면 됩니다.

 

이제 컴포넌트를 조립해주겠습니다.

 

PlayBlock.js에 아래 코드를 작성해주세요.

import CdBlock from './player/Cover';
import CircleButton from './player/BackButton';
import PlayButton from './player/PlayButton';
import SongInfo from './player/SongInfo';
import React,{useState} from 'react';
import styled from 'styled-components';
import {GiHamburgerMenu} from "react-icons/gi"
import {IoMdArrowRoundBack} from "react-icons/io"
import '../App.css';

const Top=styled.div`
    width:100%;
    height:3rem;
`
function PlayerBlock(props) {
    const title = "아이유"
    const artist = "밤편지"
    
  return (
    <div className="PlayerBlock">
    <Top>
     <CircleButton float={{"float":"left","margin-top":"1rem","margin-left":"1rem"}} icon=<IoMdArrowRoundBack/>/>
    <div>
     <CircleButton float={{"float":"right","margin-top":"1rem","margin-right":"1rem"}} icon= <GiHamburgerMenu/>/>
     </div>
     </Top>
      <CdBlock/>
      <SongInfo title={title} artist={artist}/>
      <RangeBar/>
      <PlayButton/>
      
    </div>
  );
}

export default PlayerBlock;

 버튼에는 props float으로 스타일을 주었고 

title과 artist에는 각각 "아이유"와 "밤편지"라는 변수를 전달했습니다.

 

이렇게 컴포넌트가 나오신다면 성공입니다!

다음 강의에서는 재생목록을 보여주는 컴포넌트를 만들어보도록 하겠습니다.

 

다음강의