스터디 관리 프로젝트 - grid layout + font 적용

grid layout

전체적인 UI 자체가 구획으로 나뉘어져 있다는 생각이 들어, grid layout이 제일 먼저 떠올랐다.
처음 적용해보는 것이라 어려웠지만.... 일단 해보고 수정해야지!

처음엔 이렇게 시작했다.

import React from "react";

export default function Room() {
  return (
    <div className="container">
      <div className="item">
        <p>루틴스터디</p>
      </div>
      <div className="item">
        <p>Member!!</p>
      </div>
      <div className="item">
        <p>Fine</p>
      </div>
      <div className="item">
        <p>hello sseul!</p>
      </div>
      <div className="item">
        <p>2번째 Todo열</p>
      </div>
      <div className="item">
        <p>3번째 Done열</p>
      </div>
    </div>
  );
}

.container {
  display: grid;
  height: 100vh;
  grid-template-columns: 2fr 3fr 5fr;
  grid-template-rows: 1.5fr 4.25fr 4.25fr;
  background-color: lightgray;
}


.item {
  border: 2px solid black;
  flex-basis: 0;
  flex-grow: 1;

  &:nth-child(1) {
    grid-row: 1/2;
  }
  &:nth-child(2) {
    grid-row: 2/3;
  }
  &:nth-child(3) {
    grid-row: 3/4;
  }
  &:nth-child(4) {
    grid-column: 2/4;
  }
  &:nth-child(5) {
    grid-row: 2/4;
  }
  &:nth-child(6) {
    grid-row: 2/4;
  }
}

이제 각각을 컴포넌트로 수정해주고

크게는 container, grid로 감싸주었다.

/*
 * mobile (<768px) ------------------------------------------------
 * fixture                  sm
 * # of columns             4
 * gutter                   20px
 * margin                   5px 
 * container-size           100% - (5px *2)

 * TABLET (>768px) ------------------------------------------------
 * fixture                  md
 * # of columns             12
 * gutter                   20px
 * margin                   30px 
 * container-size           100% - (30px *2)
 * max-container-size       960px
 
 * DESCKTOP (>1200px) ------------------------------------------------
 * fixture                  lg
 * # of columns             12
 * gutter                   20px
 * unit                     75px
 * margin                   auto 
 * container-size           1140px
 * max-container-size       1140px
*/

$gutter: 20px;

$sm-columns: 4;
$sm-margin: 5px;

$md-columns: 12;
$md-margin: 30;
$md-max-container: 960px + $md-margin * 2;

$lg-columns: 12;
$lg-unit: 75px;
$lg-max-container: ($lg-unit + $gutter) * $lg-columns;

// @debug (($lg-unit + $gutter) * $lg-columns);

.container {
  width: 100%;
  height: 100vh;
  padding: 0 $sm-margin;
  margin: 0 auto;
  background-color: $background;
  .grid {
    display: grid;
    height: 100vh;
    grid-template-columns: 2fr 3fr 5fr;
    grid-template-rows: 1.5fr 4.25fr 4.25fr;
  }

  .row {
    display: flex;
    flex-wrap: wrap;
  }

  //.col-sm-1 .col-md-2
  [class^="col-"] {
    padding: 0 $gutter/2;
  }

  @for $i from 1 through $sm-columns {
    .col-sm-#{$i} {
      width: percentage($i/$sm-columns);
    }
  }

  @include responsive(T) {
    // max-width: $md-max-container;
    padding: 0 $md-margin;
    @for $i from 1 through $md-columns {
      .col-md-#{$i} {
        width: percentage($i/$md-columns);
      }
    }
  }

  @include responsive(D) {
    // max-width: $lg-max-container;
    padding: 0;
    @for $i from 1 through $lg-columns {
      .col-lg-#{$i} {
        width: ($lg-unit + $gutter) * $i;
      }
    }
  }
}

grid로 한번 더 감싸준 이유는?
그냥 container는 메인페이지 외에서도 다양하게 사용될것같아서 재사용성을 고려하였다.

font

//App.scss
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;700&display=swap");

body {
  font-family: "Plus Jakarta Sans", sans-serif;
}