Dashboard 디자인 (Layout 구성)

1Jui.ce·2023년 3월 23일

나장봇 제작 중 Main Content 내용이 늘어나면 배경 element를 벗어나 아래로 넘어가는 현상이 발생했다. overflow : scroll을 해도 해결이 되지 않아 하나하나씩 뜯어보면서 layout을 구성하기로 했다!

1. 초기 세팅

1.1. Create React App (yarn)

yarn create react-app page --template typescript

project 이름은 page로 하였고, typescript로 설치하였다.

1.2. Components 생성 후 실행

Dashboard의 Layout은 Header(topbar), aside(sidebar), div(content)로 총 3가지 지역으로 구분하도록 하겠다!
쓰잘데기 없는 파일들 삭제 후 다음과 같이 컴포넌트를 생성하였다.

/* App.tsx */
const App = () => {
  return (
    <div className="App">
      <Layout />
    </div>
  );
};
export default App;

/* Layout.tsx */
const Layout = () => {
  return (
    <div className="main">
      <Header />
      <Side />
      <Content />
    </div>
   );
};
export default Layout;

/* Header.tsx */
const Header = () => {
  return <header className="topbar">this is the HEader </header>;
};
export default Header;

/* Side.tsx */
const Side = () => {
  return <aside className="sidebar">this is the Side </aside>;
};
export default Side;

/* Content.tsx */
const Content = () => {
  return <div className="content">this is the Content </div>;
};
export default Content;

실행결과는 다음과 같다.

1.3. CSS 파일 생성

src/components에 index.css 파일 생성 후 클래스에 맞게 구분을 지어보자

/* index.css */
.topbar {
  background-color: skyblue;
}

.sidebar {
  background-color: mediumseagreen;
}

.content {
  background-color: cyan;
}

Layout.tsx에 적용하고 실행해보자!

import Content from "./Content";
import Header from "./Header";
import Side from "./Side";
import "./index.css";

const Layout = () => {
  ...

주변에 붕 뜬 느낌을 없애보자. body의 margin이 기본적으로 들어가 있기에 그렇다!

/* index.css */
body {
  margin: 0;
}

이제 기본적인 설정은 끝났다! 이제 디자인을 해보도록 하잣!

2. Layout 구성하기

2.1. Header(topbar) 일단 만들기

일단 지금은 높이가 작아서 모르니깐 크기를 늘려보자.

/* index.css */
.topbar {
  background-color: skyblue;
  min-height: 80px;
}

min-height을 설정함으로써 height가 80px이하로 떨어지는 일이 발생하지 않게된다! 난 최소 80px을 바라보고 있기에 이렇게 설정했다.
마찬가지로 min-width : 80px는 width가 80px이하로 떨어지지 않는다는 거겠지?! max는 반대로 80이상이 안된다는 것이구!? 아주 쉽네~

2.2. Aside(sidebar) 일단 만들기

사이드바는 자고로 왼쪽에 붙어서 어느정도 너비(width)를 가지고 높이(height)는 꽉차는게 일반적인 디자인인지라,,
다음과 같이 썼다.

/* index.css */
.sidebar {
  background-color: mediumseagreen;
  width: 260px;
  height: 100%;
}

이렇게만 되면 될거란 생각은 허덜덜도 마라! 이렇게만 하면 아래처럼 바보처럼 된다!

따라서 왼쪽에 고정하고, 높이를 맘껏 조정하기 위해서는 absolute, fixed가 있다. 그런데 우리는 "고정"을 하고 싶으니까 fixed을 사용해야겠다

absolute : 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다.
fixed : 원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정 할 수 있다.
브라우저 화면의 상대 위치를 기준으로 위치가 결정된다.

그런데 이게 또 문제가 생길것이 뻔하다. Sidebar가 Header위에 덮힐 것이다. 따라서 z-index 조정이 필요하다.

/* index.css */
.topbar {
  background-color: skyblue;
  min-height: 80px;
  z-index: 20;
}

.sidebar {
  background-color: mediumseagreen;
  width: 260px;
  height: 100%;
  position: fixed;
  z-index: 10;
}

2.3. div(Content) 일단 만들기

sidebar, topbar을 만들다 보니 어느새 content의 글자가 가려졌다. 참으로 슬픈일이다.
다시 글자를 부르기 위해서는 아주 간단하다. margin을 조절하면 끝난다!
margin과 padding은 아주 간단하다. margin은 해당 element의 바깥쪽을 말하고, padding은 안쪽을 말한다고 생각하면 된다!
따라서 margin-left을 사이드의 width 만큼 떨구면 분명히 좋은 결과가 우리를 기다릴것이다!

/* index.css */
.content {
  background-color: cyan;
  margin-left: 260px;
}

그리고 Content 내부에 더미데이터로 화면을 꽉채워서 대시보드 다운 얼굴을 가지도록 하겠당

const DUMMY_TEXT = "DUMMY";
const Content = () => {
  return (
    <div className="content">
      This is the Content
      {Array(100)
        .fill("")
        .map((_, index) => (
          <div key={index}>{DUMMY_TEXT}</div>
        ))}
    </div>
  );
};

Array(number)을 통해서 number개의 요소를 가진 배열을 생성하고 Array.fill method을 이용해서 요소를 ""로 만든 다음. map을 이용해서 출력하도록 한 결과이다!

3. 마무리 디테일 살리기

화면은 꽉차지만, 스크롤을 하면 header 빼고 따라오는게 넘나 싫당 그래서 header에 fixed 요소를 추가하자!

.topbar {
  position: fixed;
  background-color: skyblue;
  min-height: 80px;
  z-index: 20;
}

난리가 났다. 어디서부터 손을 대야할지 막막하다,, 라고 생각하면 안된다! 하나하나씩 손을 대보도록하자!
지금 header(topbar)는 width는 내용물에 따라서 크기가 변할 것이다. 즉 width : fit-content일 것이다!! 따라서 이것을 100%로 해주면 화면을 아주 야무지게 될것이다.
그리고 지금 Sidebar의 내용물 또한 header에 가려져 있다 이를 header의 height 만큼 margin이나 padding을 조정해주면 역시나 야무질 것이다.
마지막으로 Content의 "This is the Content" 또한 가려질게 뻔하다.
그러면 어쩌냐??? 역시나 Content의 padding을 header의 height 만큼 조절해주면 끝나겠지~

.topbar {
  position: fixed;
  background-color: skyblue;
  min-height: 80px;
  z-index: 20;
  width: 100%;
}

.sidebar {
  background-color: mediumseagreen;
  width: 260px;
  height: 100%;
  position: fixed;
  z-index: 10;
  padding-top: 80px;
}

.content {
  background-color: cyan;
  margin-left: 260px;
  padding-top: 80px;
}