[React] react 모바일 페이지 구현하기

홈페이지는 나혼자 구현해서 시간이 없기에 모바일까지 코드구현하는데 시간이 소요된다. 사이트를 보고자 하는 사용자를 위하여 모바일 페이지에서 데스크톱으로 이동하여 사이트를 이동할 수 있도록 모바일 페이지에서 데스크톱 페이지로 이동하라는 문구를 구현하고자 하였다.

1. react-device-detect 설치

npm i react-device-detect

react-device-detect를 설치하여 모바일에 보일 화면을 만든다.

2. 모바일에 보일 화면 준비

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

const Outer = styled.div`
  display: flex;
  justify-content: center;
`;

const Inner = styled.div`
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  margin-left: 10px;
`;

const Img = styled.img`
  width: 150px;
  marginbottom: 30px;
`;

const Button = styled.button`
  color: white;
  background-color: #ffe371;
  border: none;
  width: 150px;
  height: 45px;
  border-radius: 30px;
`;

const MobilePage = () => {
  const handleLinkCopy = () => {
    navigator.clipboard.writeText(document.location.href);
    alert("링크가 복사되었습니다!");
  };

  return (
    <Outer>
      <Inner>
        <Img src="img/smartphone.png" alt="mobile icon" />
        <br />
        <strong className="title">PC버전으로 접속해주세요</strong>
        <p className="description" style={{ marginTop: "10px" }}>
          아쉽게도 모바일은 지원하지 않아요😥 <br />
          PC환경에서 이용해주세요!
        </p>
        <Button className="link-copy-button" onClick={handleLinkCopy}>
          링크 복사하기
        </Button>
      </Inner>
    </Outer>
  );
};

export default MobilePage;

→ 버튼을 클릭하면 클립보드에 도메인이 복사되게 하였다. 그리고 alert창을 띄워 링크가 복사되었다는 것을 알려주고자 하였다. 모바일 가운데 위치하는 것이 조금 애매하여 styled-components에서 조금 애를 먹었다. 또한 저작권 이미지 사용하면 안되니 Flaticon라는 곳에서 이미지를 다운받아 이용하였다.

3. App.js 에 모바일에 보일 화면 추가

app.js에 모바일 뷰 로직을 추가하는 방법은 두가지가 있다.

1) isMobile 사용하기

import React from 'react';
import { isMobile } from 'react-device-detect';
import styled from 'styled-components';

import { Header, Footer } from './components/index';
import LoginProvider from './lib/context/provider';
import { MobilePage } from 'pages';

function App() {
  return (
    <>
      {isMobile ? (
        <MobilePage />
      ) : (
        <Router>
          <LoginProvider>
            <Header />
          	/** content */
            <Footer />
          </LoginProvider>
        </Router>
      )}
    </>
  );
}

export default App;

첫번째 방법은 isMobile과 삼항 연산자를 사용하여 조건부 렌더링을 하는 방법이다. 이 방법도 간편하긴 하지만 App.js의 내용이 복잡해지면 코드를 알아보기 힘들어지게 된다.

2) MobileView, BrowserView 사용

import React from 'react';
import { BrowserView, MobileView } from 'react-device-detect';
import styled from 'styled-components';

import { Header, Footer } from './components/index';
import LoginProvider from './lib/context/provider';
import { MobilePage } from 'pages';

function App() {
  return (
    <>
      <MobileView>
        <MobilePage />
      </MobileView>
      <BrowserView>
        <Router>
          <LoginProvider>
            <Header />
            /** content */
            <Footer />
          </LoginProvider>
        </Router>
        </BrowserView>
    </>
  );
}

export default App;

두번째 방법은 BrowserView와 MobileView를 사용하는 방법이다. 내 경우는 이 방법을 사용하였다. 이미 충분히 많은 라우터를 설정해놨기에 구분이 가지 않았다. 그래서 모바일뷰와 브라우저뷰를 구분해서 사용하기에 한 눈에 구분되기에 사용하였다.

실행결과

모바일 구현화면

모바일로 홈페이지를 들어가면 해당 사진같이 보이게 된다. 이러면 완성된 것이다.