퍼센트 원 그리기

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

const GRAY = '#eeeeee';
const BLUE = '#058ef3';

const StyledIndex = styled.div`
	display: flex;
	width: 100vw;
	height: 100vh;
	justify-content: center;
	align-items: center;
	.circle {
		width: 320px;
		height: 320px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: ${BLUE};
		background-image: ${({ backgroundImage }) => backgroundImage};
	}
	.inner-circle {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: white;
		width: 310px;
		height: 310px;
		border-radius: 50%;
	}
	.per {
		font-size: 32px;
		font-weight: 800;
		color: #d6dbde;
	}
`;

const Index = () => {
	const percent = 60;
	const per = percent * 3.6;
	let deg = 90;
	let color = GRAY;
	if (per <= 180) {
		deg += per;
	} else {
		deg += per - 180;
		color = BLUE;
	}
	const backgroundImage = `
    linear-gradient(${deg}deg, transparent 50%, ${color} 50%),
    linear-gradient(90deg, ${GRAY} 50%, transparent 50%);
  `;
	return (
		<StyledIndex backgroundImage={backgroundImage}>
			<div className="circle">
				<div className="inner-circle">
					<div className="per">{percent}%</div>
				</div>
			</div>
		</StyledIndex>
	);
};

export default Index;