빙고판 신규 생성 및 지금까지 만든 빙고판을 볼 수 있는 리스트 구현

[robinyoon-dev]

Description

현재 유저 당 만들 수 있는 빙고판은 하나 밖에 없다.
빙고판 신규 생성 및 지금까지 만든 빙고판을 볼 수 있는 리스트를 구현하자.

Todo

• 빙고판 갤러리 디자인 및 프로토타입 만들기.

• 디자인을 적용하여 더미 데이터로 페이지 구현하기.

  • 레이아웃 구현.
  • 카드 구현.
  • 반응형 적용.

• 실제 데이터 적용하기.

• 빙고판 신규 생성 시, 신규 빙고판의 main값을 true, 기존 main 빙고판의 main값을 false로 바꾸기.

• 상세보기 페이지 또는 모달 구현.

• 상세보기에서 다음 기능 추가.
  - 수정
  - 삭제
  - main 빙고판으로 바꾸기.

• 전체 리스트에서 빙고판을 셀렉해서 삭제할 수 있는 기능 추가.

[robinyoon-dev]

빙고판 갤러리 디자인 및 프로토타입

[robinyoon-dev]

고민

PC로 볼 경우 container 너비를 666px로 할 경우 카드의 너비가 너무 길어진다.
PC환경에서는 카드를 한 줄에 두 개 씩 나오게 만들까...?

[robinyoon-dev]

Card 안의 item 비율 설정하기 flex

flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성입니다.
이 세 속성들은 서로 관련이 깊기 때문에, 이 축약형을 쓰는 편이 여러모로 편리하다.

.item {
	flex: 1;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
	flex: 1 1 auto;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
	flex: 1 500px;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */
}

축약형 flex 예시

.item {
	flex: 1 1 0;
}
.item:nth-child(2) {
	flex: 2 1 0;
}

flex-basis: 0; 으로, 기본 점유 크기를 0으로 만들어버려 결국 전체 크기를 1:2:1로 나누어 가져서, 영역 자체의 크기가 정확히 1:2:1의 비율로 설정되었습니다.

여백의 비가 아닌, 영역 자체를 원하는 비율로 분할하기를 원한다면 이렇게 flex-basis을 0으로 하면 손쉽게 처리할 수 있어요.

[robinyoon-dev]

Card CSS 참고

https://codepen.io/kybarg/pen/rVvgag

<div class="mdl-card mdl-shadow--2dp mdl-card--horizontal">
  <div class="mdl-card__media">
    <img src="http://placehold.it/150x200/DC143C/FFFFFF" alt="img">
  </div>
    <div class="mdl-card__title">
      <h2 class="mdl-card__title-text">Welcome</h2>
    </div>
    <div class="mdl-card__supporting-text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Mauris sagittis pellentesque lacus eleifend lacinia...
    </div>
    <div class="mdl-card__actions mdl-card--border">
      <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" data-upgraded=",MaterialButton,MaterialRipple">Get Started</a>
    </div>
    <div class="mdl-card__menu">
      <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect" data-upgraded=",MaterialButton,MaterialRipple"><i class="material-icons">share</i></button>
    </div>
</div>

html {
  width: 100%;
}
body {
  background: #f5f5f5;
  margin: 50px auto;
  width: 512px;
}
.mdl-card + .mdl-card {
  margin-top: 40px;
}

// Card styles

.mdl-card--horizontal {
  flex-direction: column;
  height: 1vh; /* 1 */
  padding-left: 150px;
  width: 100%;
  
  .mdl-card__media {
    left: 0;
    position: absolute;
    width: 150px;
  }
  
  .mdl-card__supporting-text {
    flex: 1 1 auto;
    width: auto;
  }
}

.mdl-card--horizontal-2 {
  flex-direction: row;
  flex-wrap: wrap;
  min-height: 0px;
  
  .mdl-card__title {
    align-items: flex-start;
    flex-direction: column;
    flex: 1 auto;
    float: left;
  }
  .mdl-card__title-text {
    align-self: flex-start;
  }
  .mdl-card__media {
    flex: 0 auto; 
    float: right;
    height: 112px;
    margin: 16px 16px 0 0;
    width: 112px;
  }
  .mdl-card__actions {
    clear: both;
    flex: 1 auto; 
  }
}

[robinyoon-dev]

#25
카드 만들기 귀찮아져서 CSS 프레임워크를 알아보기로 했다.