[TIL] 0209

블로그 정리

MonthSub Refactoring

• input:checked 선택자 사용 시 형제 선택자에서 button은 선택이 안된다

  const StyledInput = styled.input`
      display: none;
      &:checked + div { // button은 선택 안됨..
        background-color: ${theme.color.main};
        color: #fff;
      }
  `;

• 중복되는 css를 mixin파일에 저장해서 중복을 제거했는데, styledComponent로 해결해봐야겠음

  const fullScreen = css`
    position: relative;
    top: -3rem;
    width: 100vw;
    height: 30rem;
    margin-left: calc(-50vw + 50%);
    @media ${theme.device.tablet} {
      height: 43vw;
    }
    @media ${theme.device.mobile} {
      height: 43vw;
    }
  `;
  
  const invisibleScrollBar = css`
      -ms-overflow-style: none; /* IE and Edge */
      scrollbar-width: none; /* Firefox */
      &::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera*/
      }
  `;
  
  const mixin = { fullScreen, invisibleScrollBar };
  
  export default mixin;

MonthSub 회의

• 타입스크립트 환경 설정
• atom컴포넌트부터 점차적으로 적용
• style코드를 별도의 파일로 분리

WaffleCard 가이드 페이지 디자인