Devcamp_header

페어 프로그래밍

멘토님의 조언으로 초반에는 페어 프로그래밍을 하기로 하였다.
개발을 조금 늦게 시작하여 끝까지 페어프로그래밍으로 진행하면 마감일까지 프로젝트를 마무리하기 힘들 것 같아 헤더 부분만 페어 프로그래밍을 진행하기로 하였다.

Header.tsx

import React from "react";
import "./Header.css";
import MyPageBtn from "./MyPage";

const Header = () => (
  <div id="header">
    <div id="headerContents">
      <text id="headerText">테라스 예약 시스템</text>
      <MyPageBtn />
    </div>
  </div>
);

export default Header;

Header.css

#header {
  height: 100px;
  background-color: #50b4d2;
  color: white;
  display: flex;
  width: 100%;
  padding: 0px;
  justify-content: center;
}

#headerContents {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  width: 100%;
}

#headerText {
  flex: 1;
  text-align: center;
  font-size: large;
}

결과물

해결해야할 문제

테라스 예약 시스템 글씨를 가운데로 보냈는데 div가 저렇게 나누어져 있어 가운데보다 살짝 왼쪽으로 치우쳐져 있는 문제가 발생한다