Day 36 - 2022.01.24

Note

오늘 페이지 레이아웃을 짜기로 했다.

3시까지 헤더와 푸터를 짜고 중간점검을 한 후 이후 시간에 페이지 레이아웃을 완성을 시키기로 했는데 생각보다 일찍 푸터 레이아웃을 마쳤다.

페이지 레이아웃도 금방 짤 수 있을 거라 생각했는데....

 

문제 발생

내가 만든 AdBox

import React from 'react';
import styled from 'styled-components';

const Ad = styled.div.attrs(({ width, height, marginBottom }) => ({
  row: height,
  col: width,
  marginBottom,
}))`
  width: ${(props) => props.col};
  height: ${(props) => props.row};
  margin-bottom: ${(props) => props.marginBottom};
  background-color: #c0bbbc;
  border: none;
`;

function AdBox(props) {
  const { width, height, marginBottom } = props;
  return <Ad width={width} height={height} marginBottom={marginBottom}></Ad>;
}

export default AdBox;

 

성제가 만든 graybox

import React from 'react';
import styled from 'styled-components';

const GrayWrap = styled.div.attrs(({ height, width }) => ({
  row: height,
  col: width,
}))`
  height: ${(props) => props.row};
  width: ${(props) => props.col};
  background-color: #F9F9F9;
  border: 1px solid #D6D6D6;

  margin-left: 172px;
`

function Graybox(props) {
  const {width, height} = props;
  return (
  <GrayWrap 
    height={height} 
    width={width}
  />);
};

export default Graybox;

내가 또 만들 필요 없이 성제가 만든 graybox를 가져와서 속성만 수정하면 되는 거였다...

컴포넌트를 언제 재사용하는지 기억하자...

 

 

페이지 레이아웃을 어떻게 코드로 짜야 할지 아직 잘 모르겠다.

일단 grid로 하는 것이 좋을 것 같다며 연습해보라고 코드펜과 연습 코드를 주었고, 그곳에서 먼저 레이아웃을 구현해보았다.

https://codepen.io/halamlee/pen/MWOgOdq?editors=1100 

CSS GRID test

 

<div class="grid">
	<div class="item1">item01</div>
	<div class="item02">item02</div>
	<div class="item03">item03</div>
	<div class="item04">item04</div>
	<div class="item05">item05</div>
</div>

body * {
	margin: 5px;
	padding: 0;
	box-sizing: border-box;
}
.grid {
	display: grid;
	width: 100vw;
	height: 100vh;
	grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
	grid-template-areas: "item01 item02 item03 item04 item05";
}
.grid>* {
	background: orange;
	outline: solid 1px black;
	box-sizing: border-box;
}

.item1{
	grid-area: item01;
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 12;
}
.item02{
	grid-area: item02;
	grid-column-start: 3;
	grid-column-end: 12;
	grid-row-start: 1;
	grid-row-end: 4;
}
.item03{
	grid-area: item03;
	grid-column-start: 3;
	grid-column-end: 9;
	grid-row-start: 4;
	grid-row-end: 8;
}
.item04 {
	grid-area: item04;
	grid-column-start: 3;
	grid-column-end: 9;
	grid-row-start: 8;
	grid-row-end: 12;
}
.item05 {
	grid-area: item05;
	grid-column-start: 9;
	grid-column-end: 12;
	grid-row-start: 4;
	grid-row-end: 7;
}
.grid [class^='item'] {
		align-items: center;
  justify-content: center;
	display: flex;
}

 

코드펜에서는 잘 구현했는데 왜 리액트에서는 이상하게 나올까...?

왼쪽에 빈 공간 뭐니........

내일 한결오빠에게 SOS 해야겠다😭

 

 

 

리액트.... 어렵다......