🦁_21.11.27 / 21.11.28

21년 11월 27일 / 28일

📎 Vending Machine with SCSS

소스코드 보기

// _main.scss
#app {
  @include grid(null, null, 28px);
  margin: 65px 0;
  .vending-machine {
    grid-column: 1 / 2;
    padding: 30px 30px 30px 27px;
    background-color: $white;
  }
  .my-page {
    @include grid(null, null, 20px);
    grid-column: 2 / 3;
    width: 369px;
  }
}

//  ul.list-items-cart
.list-items-cart {
  @include itemStyle($border-main, null, $sub-color);
  overflow-y: scroll;
  padding: 12px 16px 12px 12px;

  &::-webkit-scrollbar {
    width: 4px;
  }
  &::-webkit-scrollbar-track {
    background: transparent;
  }
  &::-webkit-scrollbar-thumb {
    @include itemStyle(null, $border-r-5, rgba(255, 255, 255, 0.8));
  }

  .item-cart {
    @include itemStyle(null, $border-r-5, $white);
    overflow: hidden;
    padding: 8px 8px 8px 10px;
  }
  .item-cart + .item-cart {
    margin-top: 6px;
  }
  .img-item {
    width: 18px;
    height: 33px;
  }
  .tit-item {
    @include fontStyle(null, $font-9, null, 33px);
    margin-left: 10px;
  }
  .num-counter {
    @include itemStyle($border-main, $border-r-5);
    float: right;
    width: 31px;
    height: 31px;
    text-align: center;
    line-height: 30px;
  }
}

// section.vending-machine
.vending-machine {
  .list-items {
    @include grid(repeat(3, 96px), repeat(2, minmax(136px, auto)), 12px);
    li {
      @include itemStyle(null, $border-r-10, null, $shadow-25);

      &.selected {
        position: relative;
      }
      &.selected::after {
        @include itemAfter(-3px, -3px, -3px, -3px);
        border: 3px solid $main-color;
      }
      &.sold-out {
        position: relative;

        &::after {
          @include itemAfter;
          background: url("../img/Sold-out.png") no-repeat center center
            rgba(0, 0, 0, 0.8);
          background-size: 70%;
        }
      }
    }

    .btn-item {
      @include flex(column, center, space-between);
      @include itemStyle(null, $border-r-10, $white);
      width: 100%;
      height: 100%;
      padding: 10px 0;
      .img-item {
        width: 36px;
        height: 65px;
      }
      .tit-item {
        @include fontStyle(null, $font-9, $font-w-500);
      }
      .txt-item {
        @include itemStyle(null, 50px, $main-color);
        @include fontStyle($white, $font-12);
        width: 70px;
        padding: 5px 0;
      }
    }
  }
}

.vending-machine {
  .cont-mycart {
    @include grid(204px 96px, 33px 33px 106px, 12px);
    margin-top: 20px;
    .cart-mycart__col-left {
      @include itemStyle(null, $border-r-5);
      @include fontStyle(null, $font-14, null, 20px);
      padding: 6px 10px 7px;
    }
    .info-balance {
      overflow: hidden;
      background-color: $sub-color;
      .txt-balance {
        float: right;
      }
    }
    .inp-insert {
      border: $border-main;
      background: $white;

      &::placeholder {
        @include fontStyle(#bdbdbd, $font-13, null);
      }
    }
    .cart-mycart__col-right {
      @include itemStyle(null, $border-r-5, $white, $shadow-25);
      @include fontStyle(null, $font-13);
      padding: 6px 0 7px;
    }
    .btn-get {
      @include itemStyle(null, null, $main-color, $shadow-50);
      @include fontStyle($white, null, $font-w-700);
    }
  }
}

// section.my-page
.my-page {
  .cont-mymoney {
    padding: 9px 27px;
    background-color: $white;
    .info-mymoney {
      @include itemStyle(null, $border-r-5, $sub-color);
      @include fontStyle(null, $font-14, null, 20px);
      overflow: hidden;
      padding: 6px 10px;
    }
    .txt-mymoney {
      float: right;
      font-weight: $font-w-700;
    }
  }
  .cont-myitems {
    overflow: hidden;
    padding: 25px 27px;
    background-color: $white;
    text-align: center;
    .tit-myitems {
      @include fontStyle(null, $font-14, null, 20px);
    }
    .list-items-cart {
      @include itemStyle(null, $border-r-5);
      height: 378px;
      margin: 13px 0 6px;
      text-align: left;
    }
  }
  .tit-total {
    @include fontStyle(null, $font-12, null, 17px);
    float: right;
  }
}

@media screen and (max-width: $media-w-md) {
  #app {
    .vending-machine {
      grid-row: 1 / 2;
    }
    .my-page {
      grid-column: 1 / 2;
      grid-row: 2 / 3;
    }
  }
}

@media screen and (max-width: $media-w-sm) {
  #app {
    gap: 0;
    margin: 16px 0 0;
    .vending-machine {
      grid-row: 1 / 2;
      padding-bottom: 20px;
    }
    .my-page {
      row-gap: 0;
      grid-column: 1 / 2;
      grid-row: 2 / 3;
      .cont-mymoney {
        padding: 0 27px;
      }
      .cont-myitems {
        padding: 41px 27px;
      }
    }
  }
}

📌 액션 플랜 돌아보기(4주차)

1순위 : 뚜렷한 목표 설정

• 학습 세부 계획
  => 차근차근 진행중
• 취업 방향성
  => 어렵구만... 그냥 재미있게 일할 수 있는 곳으면 더할나위 없이 좋을듯 싶은데... 그런데 이제 높은 연봉을 곁들인

2순위 : 수업 내용 잘 정리하기

• TIL 작성
  => 이번주는 많이 밀렸네요
• commit
  => 자주 하는 중!
• 실습 한 번 더 해보기
  => 최대한 많이 실습 도전!
• 적극적인 질문
  => 개인적인 메시지로 질문 가능
  => 단체 채팅에 질문 불가능 허허

3순위 : 체력 관리

• 수면시간 지키기
  => 제일 지키기 어렵습니다만...
• 운동 꾸준히
  => 이번주는 상태가 좋지 못했습니다

📌 지난 주 목표 달성 여부

• 지난 주 목표 이어가기
  • 최소한의 수면 시간 지키기
    => 액션플랜 3순위 참고...🥲
  • Notion에 올라와 있는 과제 차근차근 뿌시기 (단, 나는 뿌셔지면 안됨)
    => Notion에 있는 과제는 아니지만 Vending Machine : SCSS 작성
    
• 주말에 공부할 목록 작성하기
  => 무작정 목록 작성하지 않도록 해야겠다. 해보고 싶은건 많은데 시간도 부족하고 제일 부족한 것은 내 체력과 수면이다.

📌 11월 29일(월) ~ 12월 05일(일) 목표

• 내가 하고싶은 것과 해야하는 것 잘 구분해서 주말에 공부할 목록 작성해서 실천하기
• 모던 자바스크립트 공부하기
  => 스터디를 해보고 싶은데 잘 참여할 수 있을지 확신이 들지 않는다.
  => 일단 혼자 공부 해본다.

---

마무리

• 이번주는 TIL이 많이 밀렸다.
  • 이유1 : 많이 피곤했다.
  • 이유2 : TIL을 작성 방법?
    => 시간이 오래걸리는 편이지만 그래도 꼼꼼하게 작성하고 싶다.
  • 이유3 : 수업시간에도 바삐 작성해야하는데 좀 덜 바쁘게 작성한 것 같다.

=> 거 살다보면 TIL 이런거 좀 밀릴 수 있지 뭐, 어짜피 계속 채울건데 뭐가 문제냐아아

• 하고싶은 것들이 점점 많아지는데 이걸 어떻게 해야 하나?
• 책을 구매해보았습니다. 공부할 책, 가볍게 읽을 책, 해마다 구매해야겠다 싶은 책까지 총 3권
  => 예스24 굿즈도 히히
  => 패딩 슬리퍼 예에에에