Project Shall-We-Health #4-1 반응형 웹페이지 구현

시작하며

이번 프로젝트는 Bare Mininum 단계에서 반응형 웹페이지 구현을 목표로 설정했기 때문에 처음에 목업페이지를 만들때부터 염두를 하고 CSS 속성을 정의하였다. 이전 프로젝트인 느린우체통에서는 Advanced 단계에서 반응형 웹페이지를 구현할 예정이였고 짧은 프로젝트여서 모든 페이지에서 반응형 웹페이지를 구현하지 못했다. 이전에는 흔히 사용하는 태블릿이나 모바일 화면의 width로 미디어쿼리를 사용해서 분기를 나누었는데 불필요하게 나눌 필요가 없다는 생각이 들었다. 처음부터 max-width를 설정하고 width를 %로 주면 따로 미디어쿼리 설정할 필요 없이 어느정도 반응형 웹페이지가 구현되기 때문에 실제 구현 단계에서 코드가 많이 수정되지는 않았다.

네비게이션바, Board

//NavigationBar.js
import React, { useState } from 'react';
import Login from './Login';
import { useSelector, useDispatch } from 'react-redux';
import { loginModal } from '../actions';
import { Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCog, faThList, faUser, faSearch, fas } from '@fortawesome/free-solid-svg-icons';
import './NavigationBar.css';
import axios from "axios"

export default function NavigationBar() {
  
  ...
  
  return (
    <div className='navBar-container'>
      <div className='bar'>
        <img alt='logo' src='img/logo.svg' className='home-logo web'  onError={(e)=>{e.target.onerror = null; e.target.src='../img/logo.svg'}} onClick={() => { window.location.replace('/') }} />
        <img alt='logo' src='img/symbol.svg' className='home-logo mobile' onError={(e)=>{e.target.onerror = null; e.target.src='../img/symbol.svg'}} onClick={() => { window.location.replace('/') }} />
        <div className='btn-board'>
          <Link
            to='/board'
            style={{ color: 'inherit', textDecoration: 'inherit' }}
          >
            <span className='web'>메이트 탐색</span>
            <FontAwesomeIcon className='board mobile' icon={faThList} />
          </Link>
        </div>
        <div className='btn-search'>
          <Link
            to='/find-partner'
            style={{ color: 'inherit', textDecoration: 'inherit' }}
          >
            <span className='web'>메이트 모집</span>
            <FontAwesomeIcon className='find-partner mobile' icon={faSearch} />
          </Link>
        </div>
        {isLogin ? (
          <>
            <div className='btn-mypage'>
              <Link
                to='/mypage'
                style={{ color: 'inherit', textDecoration: 'inherit' }}
              >
                <span className='web'>마이페이지</span>
                <FontAwesomeIcon className='mypage mobile' icon={faUser} />
              </Link>
            </div>
            <div className='btn-logout'>
              <span onClick={handleLogout}>로그아웃</span>
            </div>
          </>
        ) : (
          <>
            <div className='btn-login-nav'>
              <span onClick={handleModal}>로그인</span>
            </div>
            <div className='btn-signup'>
              <Link
                to='/signup'
                style={{ color: 'inherit', textDecoration: 'inherit' }}
              >
                <span>회원가입</span>
              </Link>
            </div>
          </>
        )}
        {isAdmin && isLogin ? (
          <div className='btn-admin'>
            <Link
              to='/admin'
              style={{ color: 'inherit', textDecoration: 'inherit' }}
            >
              <FontAwesomeIcon icon={faCog} />
            </Link>
          </div>
        ) : (
          ''
        )}
      </div>
      {isModal ? <Login /> : ''}
    </div>
  );
}

네비게이션바는 width가 줄어들면 버튼을 글자로 나타낼 공간이 없어지기 때문에 로그인/로그아웃 버튼과 회원가입 버튼을 제외하고 아이콘으로 대체될 수 있도록 미디어쿼리에 display:none 속성을 정의하여 설정하였다.

이전 프로젝트에서는 font-size를 0으로 설정하고 이미지 아이콘으로 대체할 수 있도록 CSS만 수정해서 구현했었는데 이번 프로젝트에서는 react-js-stickynav를 사용하여 스크롤을 내렸을 경우 네비게이션바와 버튼의 컬러가 변경되기 때문에 color로 색상을 변경할 수 있는 fontawesome 태그를 사용하였다.

매칭 게시판 페이지는 처음 목업페이지를 만들때부터 지역을 선택하는 부분의 overflow-x: auto나 데이터들의 크기 등 반응형을 고려했기 때문에 따로 설정하지는 않았고 상단 배너의 height만 vw로 설정하고 max-height을 따로 설정해주었다.

마이페이지, 관리자 페이지

마이페이지와 관리자페이지는 보여지는 데이터가 많기 때문에 미디어쿼리를 사용해서 font-size를 설정해주고 text-overflow: ellipsis;를 장소 데이터 부분에 정의하여 width보다 사이즈가 클때 ...으로 보여지게 설정하였다.

마치며

반응형 웹페이지라면 어떤 width에서도 의도한대로 페이지가 보이도록 설정하는 것이 맞는데 저번 프로젝트에서 분기를 태블릿이나 모바일 사이즈에 따로 맞추어서 설정한 것이 좋지 않은 방법이라는 것을 깨달았다. 오히려 코드만 길어지고 수정하기도 어렵기 때문에 처음부터 width를 %로 정의하고 각 페이지에 맞춰서 미디어쿼리를 설정하는 것이 더 효율적이였다.