인프런 커뮤니티 질문&답변

우선 무료로 이런 속이 꽉 찬 강의를 만들어주신 강사분께 감사드립니다.

다름이 아니라 제가 챕터15에 있는 실습코드를 보고 실행을 해보았는데

이러한 에러가 뜨던가 아니면 빈 웹페이지만 덩그러니 떠있는 경우만 있어

혹시 고칠 수 있는 방법이 있나 여쭤봅니다.

관리자 화면에는 이렇게 뜹니다!

import styled from "styled-components";

const Wrapper = styled.div`
    padding: 1rem;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    background-color: lightgrey;
`;

const Block = styled.div `
    padding: ${(props) => props.padding};
    border: 1px solid black;
    border-radius: 1rem;
    background-color: ${(props) => props.backgroundColor};
    color: white;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
`;

const blockItems = [
    {
        label: "1",
        padding: "1rem",
        backgroundColor: "red",
    },
    {
        label: "2",
        padding: "3rem",
        backgroundColor: "green",
    },
    {
        label: "3",
        padding: "2rem",
        backgroundColor: "blue",
    },
];

function Blocks(props) {
    return (
        <Wrapper>
            {blockItems.map((blockItem) => {
                return (
                    <Block
                        padding={blockItem.padding}
                        backgroundColor={blockItem.backgroundColor}
                    >
                        {blockItem.label}
                    </Block>
                );
            })}
        </Wrapper>
    );
}

export default Blocks;