react 퍼블 기본 셋팅 방법

react 기본 환경 셋팅이 완료가 되고 퍼블리셔한테 기본적으로 html, assets폴더 images 폴더로 구성된 퍼블이 완료된 템플렛을 전달 받았을때를 가정해서 설명하겠습니다.

 

1. public 폴더에 assets, images 폴더를 넣습니다. 

 

2. src 폴더에 components, pages폴더를 추가합니다. 

3. 전달 받은 템플렛에서 메인이 되는 html 코드기반으로 Header, Sidebar, Bottom 따로 구분해서 만들고 그것을 한번에 관리하는 Layout.js 생성 후 적용합니다.

// src/components/Layout.js
import Header from "./Header";
import Sidebar from "./Sidebar";

export default function Layout({ children }) {
  return (
    <div id="wrapper">
      <div id="main">
        <div className="inner">
          <Header />
          {children}
        </div>
      </div>
      <Sidebar />
    </div>
  );
}

추가 설명)

Layout.js 예시입니다. 이제 pages 폴더에서 Layout 함수가 레이아웃 공통 모듈이 되서 작업을 진행할 것입니다. 

4. pages 폴더에서 퍼블리셔한테 받은 각 페이지마다 componet가 되는 부분들은 제외하고 Layout에 들어갈 부분을 채워넣습니다. 

import Layout from "../components/Layout";

export default function Home() {
  return (
    <Layout>
        <section id="banner">
            <div class="content">
                <header>
                    <h1>마이샵</h1>
                    <p class="sub">트렌디한 패션, 특별한 가격</p>
                </header>
                <p>매일 새로운 아이템과 시즌 특가를 만나보세요.</p>
            </div>
            <span class="image object">
                <img src="images/pic10.jpg" alt="" />
            </span>
        </section>

        <section>
        <header class="major">
            <h2>마이샵 혜택</h2>
        </header>
        <div class="features">
            <article>
            <span class="icon">
                <i class="fa-solid fa-truck fa-2x"></i>
            </span>
            <div class="content">
                <h3>전 상품 무료 배송</h3>
                <p>전국 어디든 빠르고 안전한 무료 배송 서비스를 제공합니다.</p>
            </div>
            </article>
            <article>
            <span class="icon">
                <i class="fa-solid fa-undo fa-2x"></i>
            </span>
            <div class="content">
                <h3>무료 교환 & 반품</h3>
                <p>사이즈가 안 맞아도 걱정 없이! 7일 이내 교환/반품 무료.</p>
            </div>
            </article>
            <article>
            <span class="icon">
                <i class="fa-solid fa-gift fa-2x"></i>
            </span>
            <div class="content">
                <h3>회원 전용 쿠폰</h3>
                <p>회원가입 즉시 사용 가능한 특별 할인 쿠폰 지급.</p>
            </div>
            </article>
            <article>
            <span class="icon">
                <i class="fa-solid fa-star fa-2x"></i>
            </span>
            <div class="content">
                <h3>베스트 상품 추천</h3>
                <p>리뷰가 입증한 인기 상품만 모아 한눈에 확인!</p>
            </div>
            </article>
        </div>
        </section>

        <section>
            <header class="major">
                <h2>신상품 BEST</h2>
            </header>
            <div class="posts">
                <article>
                    <a href="#" class="image"><img src="images/pic01.jpg" alt="" /></a>
                    <h3>오버핏 베이지 자켓</h3>
                    <p>₩59,000</p>
                    <ul class="actions">
                        <li><a href="#" class="button">구매하기</a></li>
                    </ul>
                </article>
                <article>
                    <a href="#" class="image"><img src="images/pic02.jpg" alt="" /></a>
                    <h3>슬림핏 수트 세트</h3>
                    <p>₩120,000</p>
                    <ul class="actions">
                        <li><a href="#" class="button">구매하기</a></li>
                    </ul>
                </article>
                <article>
                    <a href="#" class="image"><img src="images/pic03.jpg" alt="" /></a>
                    <h3>시크 블랙 코트</h3>
                    <p>₩98,000</p>
                    <ul class="actions">
                        <li><a href="#" class="button">구매하기</a></li>
                    </ul>
                </article>
                <article>
                    <a href="#" class="image"><img src="images/pic04.jpg" alt="" /></a>
                    <h3>남성 블랙 재킷</h3>
                    <p>₩79,000 / 심플한 기본템</p>
                    <ul class="actions">
                        <li><a href="#" class="button">구매하기</a></li>
                    </ul>
                </article>
                <article>
                    <a href="#" class="image"><img src="images/pic05.jpg" alt="" /></a>
                    <h3>민트 수트 셋업</h3>
                    <p>₩129,000 / SS 시즌 인기</p>
                    <ul class="actions">
                        <li><a href="#" class="button">구매하기</a></li>
                    </ul>
                </article>
                <article>
                    <a href="#" class="image"><img src="images/pic06.jpg" alt="" /></a>
                    <h3>머스타드 니트 원피스</h3>
                    <p>₩69,000 / FW 필수템</p>
                    <ul class="actions">
                        <li><a href="#" class="button">구매하기</a></li>
                    </ul>
                </article>
            </div>
        </section>
    </Layout>
  );
}

추가 설명)

assets 또는 images 경로는 public 폴더 경로를 따릅니다. 

 

5. App.js에서 파일 경로를 설정합니다. 

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import Generic from "./pages/Generic";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/generic" element={<Generic />} />
      </Routes>
    </BrowserRouter>
  );
}

 

주의사항

상세 component를 만들어서 재사용을 할 수 있지만 서비스를 운영하다보면 디자인이 여러번 바껴서 퍼블도 구성이 달라지기 때문에 html에 해당되는 form 파일은 최대한 유지하고 기능은 캡슐화해서 연결하는 방식으로 접근해야합니다. 

// components/Notice/NoticeForm.js
import NoticeFileList from "./NoticeFileList";
import SideMenu from "../../Components/SideMenu";
import Header from "../../Header/Header";
import Editor from "../../Components/EditorComponent";

export default function NoticeForm({
  id, imgFile, saveImage, value, setValue,
  handleFile, plusImgCtrl, minusImgCtrl, handleUpload,
  deleteNotice, setSaveImage, setDeleteS3
}) {
  return (
    <div className="main-layout">
      <SideMenu />
      <div className="main-form">
        <Header />
        <div className="main-background">
          <h1>공지사항 등록/수정</h1>
          <div className="notice-title-layout">
            <input id="title" type="text" maxLength="255" />
          </div>
          <div>
            <input type="file" onChange={handleFile} />
            <button onClick={plusImgCtrl}>+</button>
            <button onClick={minusImgCtrl}>-</button>
          </div>

          <NoticeFileList
            id={id}
            saveImage={saveImage}
            setSaveImage={setSaveImage}
            setDeleteS3={setDeleteS3}
          />

          <Editor value={value} onChange={setValue} />
          <button onClick={handleUpload}>{id === "0" ? "등록" : "수정"}</button>
          {id !== "0" && <button onClick={deleteNotice}>삭제</button>}
        </div>
      </div>
    </div>
  );
}