[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 30회차 미션

패스트캠프 프론트앤드 인강 30일차 scss에서 styled-components를 활용해 버튼별 사이즈, outline, fullwidth를 만들어보았다.

 

large, medium, small 버튼사이즈들을 만들어보자.

 

props와 StyleButton태그안에 size를 추가한다.

export default function StyledBtn({children, color, size, ...rest}){
    return(
        <StyledButton color={color} size={size} {...rest}>{children}</StyledButton>
    );
}

StyledButton.defaultProps = {
    color:'blue',
    size:'medium'
};

props.size에 따라 다른값을 주면된다.

${props =>
        props.size === 'large' && css`
            height:3rem;
            font-size:1.25rem;
        `
    }

    ${props =>
        props.size === 'medium' && css`
            height:2.25rem;
            font-size:1rem
        
        `
    }

    ${props =>
        props.size === 'small' && css`
            height:1.75rem;
            font-size:0.875rem;
        `
    }

코드를 깔끔히하기 위해서 const sizeStyles 로 따로빼내고 안에는 ${sizeStyles} 대체해보자.

import React from 'react';
import styled, {css} from 'styled-components';
import {lighten, darken} from 'polished';

const colorStyles = css`
${props =>
        props.size === 'large' && css`
            height:3rem;
            font-size:1.25rem;
        `
    }

    ${props =>
        props.size === 'medium' && css`
            height:2.25rem;
            font-size:1rem
        
        `
    }

    ${props =>
        props.size === 'small' && css`
            height:1.75rem;
            font-size:0.875rem;
        `
    }
`

const StyledButton = styled.button`
    /*공통스타일*/ 
    display: inline-flex; 
    outline: none; 
    border: none; 
    border-radius: 4px; 
    color: #fff; 
    font-weight: bold; 
    cursor: pointer; 
    padding-left: 1rem; 
    padding-right: 1rem; 
    
    /* 크기 */ 
    /* height: 2.25rem;  */
    /* font-size: 1rem;  */
    ${colorStyles}
    /* 색상 */ 
    ${props =>{
        const color = props.theme.palette[props.color];
        return css`
            background:${color};
            &:hover{
                background:${lighten(0.1, color)};
            }
            &:active{
                background:${darken(0.1, color)};
            }
        `
    }}
        
    /* 기타 */ 
    & + & { margin-left: 1rem; } 
`;

export default function StyledBtn({children, color, size, ...rest}){
    return(
        <StyledButton color={color} size={size} {...rest}>{children}</StyledButton>
    );
}

StyledButton.defaultProps = {
    color:'blue',
    size:'medium'
};

outline과 fullWidth도 해보자

참고로 outline, fullWidth 는 boolean타입으로간다(true/false) 그래서 defaultProps값을 설정해주지않아도된다.

 

import React from 'react';
import styled, {css} from 'styled-components';
import {lighten, darken} from 'polished';

const outlineStyle = css`
    ${props =>
        props.outline && css`
            border:1px solid red;
        `
    }
`
const fullWidth = css`
${props =>
    props.fullWidth === true && css`
        width:100%;
        justify-content:center;
        & + & {margin-left:0; margin-top:2rem;}
    `
}
`

const colorStyles = css`
${props =>
        props.size === 'large' && css`
            height:3rem;
            font-size:1.25rem;
        `
    }

    ${props =>
        props.size === 'medium' && css`
            height:2.25rem;
            font-size:1rem
        
        `
    }

    ${props =>
        props.size === 'small' && css`
            height:1.75rem;
            font-size:0.875rem;
        `
    }
`

const StyledButton = styled.button`
    /*공통스타일*/ 
    display: inline-flex; 
    outline: none; 
    border: none; 
    border-radius: 4px; 
    color: #fff; 
    font-weight: bold; 
    cursor: pointer; 
    padding-left: 1rem; 
    padding-right: 1rem; 
            
    /* 기타 */ 
    & + & { margin-left: 1rem; } 

    /* 크기 */ 
    /* height: 2.25rem;  */
    ${colorStyles}
    /* font-size: 1rem;  */
    ${fullWidth}
    ${outlineStyle}
    /* 색상 */ 
    ${props =>{
        const color = props.theme.palette[props.color];
        return css`
            background:${color};
            &:hover{
                background:${lighten(0.1, color)};
            }
            &:active{
                background:${darken(0.1, color)};
            }
        `
    }}

`;

export default function StyledBtn({children, color, size, outline, fullWidth, ...rest}){
    return(
        <StyledButton color={color} size={size} outline={outline} fullWidth={fullWidth} {...rest}>{children}</StyledButton>
    );
}

StyledButton.defaultProps = {
    color:'blue',
    size:'medium'
};

* props.fullWidth === true && css`...` 에서 ===true는 생략가능

 

참고로 만약 & + & 코드가 fullWidthStyle아래에 있을경우 기존 스타일을 덮어써버리기때문에 fullWidthStyle보다 위로 올려줘야한다.

https://bit.ly/31Cf1hp

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스