const Image = ({
    width = '100px',
    height = '100px',
    src = 'https://i.pinimg.com/564x/b9/cd/cc/b9cdccde10d5a581874f58bb7e914962.jpg',
    alt,
    radius = '50%',
    margin = '50px',
}: Props) => {
    return (
        <ImgWrapper
            width={width}
            height={height}
            margin={margin}
            radius={radius}>
            <ImageTag width={width} height={height} src={src} alt={alt} />
        </ImgWrapper>
    )
}

interface wrapperProps {
    width?: string
    height?: string
    margin?: string
    radius?: string
}

const ImgWrapper = styled.div<wrapperProps>`
    width: ${(props) => props.width};
    height: ${(props) => (props.height ? props.height : '120px')};
    margin: ${(props) => props.margin};
    border-radius: ${(props) => props.radius};
    overflow: hidden;
`

export default Image

에러

나는 radius에 50%를 줬고 원이 나와야한다.
하지만 나온 모양은 🔔종모양이다.

이유

내가 생각한 코드는 이런 방식인줄 알았다.

<div>
  <img/>
</div>

실제로는 span 태그가 img 태그를 감싸고 있다.

해결법

import React from 'react'
import styled, { css } from 'styled-components'
import ImageTag from 'next/image'

interface Props {
    width?: string
    height?: string
    src?: string
    alt?: string
    radius?: string
    margin?: string
}

const Image = ({
    width = '300px',
    height = '300px',
    src = 'https://i.pinimg.com/564x/b9/cd/cc/b9cdccde10d5a581874f58bb7e914962.jpg',
    alt,
    radius = '50%',
    margin = '10px',
}: Props) => {
    return (
        <ImgWrapper margin={margin} radius={radius}>
            <ImageTag width={width} height={height} src={src} alt={alt} />
        </ImgWrapper>
    )
}

interface wrapperProps {
    margin?: string
    radius?: string
}

const ImgWrapper = styled.div<wrapperProps>`
    margin: ${(props) => props.margin};

    img {
        border-radius: ${(props) => props.radius};
    }
`

export default Image

코드를 보면 알겠지만 image컴포넌트를 감싼 div 태그에서 img 태그를 직접 컨트롤 하여 radius를 주는 것으로 해결했다.

코드도 간결해져서 가독성이 좋아졌다 ㅎㅎ