[React] 게시판 디자인하기 (3)

구현할 디자인

헤더 만들기

function Header() {
  return (
    <div className='header'>
        
    </div>
  );
}

export default Header;

- 가장 기본 서식

- 함수명과 export를 위한 이름 지정 (Header)

뼈대 만들기

import './Header.css';

function Header() {
  return (
    <div className="header">
        <div className="header__back">
            <i>뒤로</i>
            <h3> 공대생 게시판 </h3>
        </div>
        <div className='header__more'>
            <i>검색</i>
            <i>더보기</i>
        </div>
    </div>
  );
}

export default Header;

 

 

- <div> </div> 마다 한 줄 차지가 기본

- 이것을 한 줄로 만들기 위해 css 지정

 

 

 

.header {
    display: flex; // 한 줄로 만들기
    justify-content: space-between; // <div>와 <div> 사이에 일정한 띄어쓰기 제공
    padding: 20px;
}

.header__back h3 {
    display: inline; // 한 줄로 만들기
}

.header__more {
    float: right; // 오른쪽 정렬
}

아이콘 삽입하기

function Header() {
  return (
    <div className='header'>
        <div className='header__back'>
            <i><FontAwesomeIcon icon={faArrowLeft} size="lg" /></i>
            <h3> 공대생 게시판 </h3>
        </div>
        <div className='header__more'>
            <i><FontAwesomeIcon icon={faMagnifyingGlass} size="lg" /></i>
            <i><FontAwesomeIcon icon={faEllipsisVertical} size="lg" /></i>
        </div>
    </div>
  );
}

- 아래 무료 아이콘 사이트 FontAwesome 참고

- React 적용 방법은 아래 두 블로그 참고

무료 아이콘 삽입하기 - Font Awesome

Font Awesome

아래 두 사이트 참고

[React] 리액트에 폰트어썸 매우 쉽게 적용하기 (4단계)

 

React에 Font Awesome 적용하기

전체 CSS 코드

.header {
    display: flex;
    justify-content: space-between;
    background-color: #D9D9D9;
    font-weight: 500;
    padding: 20px;
}

.header__back {
    margin-right: 5%;
}

.header__back h3 {
    display: inline;
    padding: 0px 5px;
}

.header__more {
    float: right;
}

.header__more > i:first-child {
    padding: 0px 20px;
}

FontAwesomeIcon {
    width: 70px;
    height: 20px;
}

게시글 리스트 구현하기

function BoardList() {
  return (
    <div>
      <div className='board__header'>
    
        <div className='board__user'>
          <image>  </image>
          <p>공대생</p>
          <p className='board__date'>2023-02-21</p>
        </div>
          <div className='board_icons'>
            <i> </i>
            <i> </i>
          </div>
          
      </div>
      
      <div className='board'>
      
        <div className='board__title'>
            <h4>코딩 꿀팁 공유합니다.</h4>
        </div>
        <div className='board__content'>
          <p>사실 그런 건 없지롱 블라블라 블라블라 블라블라 블라블라</p>
        </div>
        
      </div>
    </div>
  );
}

- <div> </div>로 큰 뼈대 나누기

- 그 다음 아이콘 등 세부사항 넣기

BoardList.js 전체 코드

import './BoardList.css';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faUser } from "@fortawesome/free-solid-svg-icons";
import { faHeart } from "@fortawesome/free-solid-svg-icons";
import { faStar } from "@fortawesome/free-solid-svg-icons";

function BoardList() {
  return (
    <div>
      <div className='board__header'>
        <div className='board__user'>
          <image>
            <i><FontAwesomeIcon icon={faUser} size="2x" /></i>
          </image>
          <p>공대생</p>
          <p className='board__date'>2023-02-21</p>
        </div>
          <div className='board_icons'>
            <i><FontAwesomeIcon icon={faHeart}/> 5 </i>
            <i><FontAwesomeIcon icon={faStar}/> 5 </i>
          </div>
      </div>
      <div className='board'>
        <div className='board__title'>
            <h4>코딩 꿀팁 공유합니다.</h4>
        </div>
        <div className='board__content'>
          <p>사실 그런 건 없지롱 블라블라 블라블라 블라블라 블라블라</p>
        </div>
      </div>
    </div>
  );
}

export default BoardList;

BoardList.css 전체 코드

.board__header {
    display: flex; // 한 줄로 만들기
    justify-content: space-between; // 요소 사이에 적절한 빈칸 넣기
    padding: 12px;
}

.board__user p {
    display: inline;
    padding-left: 12px;
}

.board__date {
    font-size: small;
    color: rgb(100, 100, 100);
}

.board {
    padding: 0px 12px;
}