[DAY - 80] #1 React-router clone-coding

react의 router를 연습하기 좋은 웹 사이트를 클론코딩했다.

 

https://www.tamraev.com/

탐라는전기차

 

 

1) 구조 설계

src	┌	assets	┌	api	┌	main.js
	│		│		└	notice.js
    	│		└	css	─	reset.css
    	├	components	┌	Header.jsx
    	│			├	Footer.jsx
    	│			└	Popup.jsx
    	├	pages	┌	Home.jsx
    	│		├	Info.jsx
    	│		├	NoticeLayout.jsx
    	│		├	NoticeList.jsx
    	│		├	NoticeDetail.jsx
    	│		├	Privacy.jsx
    	│		└	Terms.jsx
    	└	styled	─	Global.js

 

styled-components를 사용할 것이기 때문에 따로 css나 scss폴더는 만들지 않았다.

Global.js에는 공통으로 사용될 style들을 작성했다.

 

 

2) 컴포넌트 Router 작업

const App = () => {
  return (
    <>
      <div id='wrap'>
        <HashRouter >
          <Header />
          <Routes>
            <Route path='/' element={<Home />} />
            <Route path='/info' element={<Info />} />
            <Route path='/terms' element={<Terms />} />
            <Route path='/privacy' element={<Privacy />} />
            <Route path='/electronicList' element={<ElectronicList />} />

            <Route path='/noticeList' element={<NoticeLayout />}>
              <Route index element={<Noticelist/>}/>
              <Route path=':id' element={<NoticeDetail />} />
            </Route>
          </Routes>
          <Footer />
        </HashRouter>
      </div>
      <GlobalStyle />
    </>
  );
};

notice

notice

 

notice 페이지의 경우 header와 footer 외에도 JEJU 전기차 관력 소식 부분이 항상 나오기 때문에 layout, outlet을 사용했다.

 

const NoticeLayout = () => {
    return (
        <ContainerNoticeLayout>
            <div id="container">
                <div className="inner">
                    <h3>JEJU 전기차 관련 소식</h3>
                    <p className="sub_tit">제주도의 전기차 관련 정보와 다양한 관광 소식을 확인해보세요.</p>
                    <Outlet />
                </div>
            </div>
        </ContainerNoticeLayout>
    );
};

 

 

3) header

header

 

header 부분에 이미지 swiper를 추가해 주었다.

 

import { Navigation, Scrollbar, A11y, Autoplay } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

 

라이브러리를 추가하고 추가하고자 하는 기능에 대한 css도 import 했다.

 

  <Swiper
              modules={[Navigation, Scrollbar, A11y, Autoplay]}
              spaceBetween={50}
              slidesPerView={1}
              navigation
              pagination={{ clickable: true }}
              scrollbar={{ draggable: true }}
              autoplay={true}
              onSwiper={(swiper) => console.log(swiper)}
              onSlideChange={() => console.log('slide change')}
            >
              <SwiperSlide>
                <img src="./img/gnb_slider_1.jpg" alt="" />
              </SwiperSlide>
              <SwiperSlide>
                <img src="./img/gnb_slider_2.jpg" alt="" />
              </SwiperSlide>

 

추가로 확인을 해 보니 메인 페이지와 서브페이지에서 header의 class가 변경이 되고 logo파일도 변경이 되었다.

 

home

info

 

이 부분을 해결하기 위해 페이지 별로 다른 class와 파일이 설정되도록 작성했다.

 

 const location = useLocation();
  const headerClass = location.pathname === '/' ? '' : 'blue';
  const logoClass = location.pathname === '/' ? '' : '_b';

      <header className={`${headerClass} ${isOpen ? 'total_open' : ''}`}>
        <div className="inner">
          <h1>
            <Link to='/'>
              <img src={`./img/logo${logoClass}.png`} alt="탐라는 전기차" />
            </Link>
          </h1>