📌 [1편] BOOTH 마켓 구조 분석 및 React 프로젝트 초기 설정

📌 [1편] BOOTH 마켓 구조 분석 및 React 프로젝트 초기 설정

BOOTH(https://booth.pm)는 크리에이터들이 자신만의 창작물을 디지털 상품으로 판매하는 대표적인 마켓 플랫폼입니다.
이번 시리즈에서는 이 BOOTH 마켓의 UI/UX 구조를 클론하면서, 검색 중심의 마켓형 웹앱을 React로 실전 구현하는 과정을 다룹니다.

이번 첫 글에서는 전체 아키텍처를 분석하고, **React 개발 환경(Vite 기반)**을 구성하는 것까지 진행합니다.

---

🔍 1. BOOTH 마켓의 UI 구조 분석

사이트: https://booth.pm/ja/search

✅ 주요 요소

구성 요소 설명

검색 입력창	키워드 검색 기능 제공 (debounce 기반 입력 UX)
상품 카드 리스트	썸네일, 제목, 가격, 태그로 구성된 카드
태그 필터	인기 태그 기반 필터 선택 가능
상품 미리보기 모달	클릭 시 상세 정보 팝업
URL 쿼리 파라미터	검색 상태가 URL에 반영됨
무한 스크롤	하단으로 내려갈수록 더 많은 상품 로드

📌 우리의 목표:

이 모든 기능을 React + Tailwind CSS 기반으로 하나씩 직접 구현하면서, 실무에서 활용 가능한 마켓 UI를 익히는 것!

---

🛠 2. 프로젝트 초기 설정

✅ 1) 프로젝트 생성 (Vite + React)

npm create vite@latest booth-clone --template react
cd booth-clone
npm install
npm run dev

✅ 2) 디렉토리 구조 설계

📂 booth-clone/
 ┣ 📂 src/
 ┃ ┣ 📂 components/
 ┃ ┣ 📂 pages/
 ┃ ┣ 📂 hooks/
 ┃ ┣ 📂 utils/
 ┃ ┣ 📂 data/
 ┃ ┗ App.jsx
 ┣ index.html
 ┣ tailwind.config.js

---

✅ 3) Tailwind CSS 적용

반응형

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

📌 tailwind.config.js

module.exports = {
  content: ["./index.html", "./src/**/*.{js,jsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

📌 src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

📌 main.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(<App />);

---

✨ 3. 기본 App 레이아웃 설계

📌 src/App.jsx

function App() {
  return (
    <div className="min-h-screen bg-gray-100">
      <header className="text-center py-4 bg-white shadow">
        <h1 className="text-2xl font-bold">BOOTH Clone 마켓</h1>
      </header>
      <main className="p-4">
        <p>여기에 상품 검색 UI가 들어갈 예정입니다.</p>
      </main>
    </div>
  );
}

export default App;

📌 npm run dev 로 실행 시 기본 템플릿이 잘 적용된 것을 확인할 수 있습니다.

---

📌 4. 다음 글 예고: 상품 카드 리스트 UI 만들기

다음 글에서는 data/products.json에 가상의 상품 데이터를 만들고,
반응형 Grid 레이아웃으로 카드 리스트를 출력하는 UI를 구현합니다.

---

 

React 마켓 UI,BOOTH 클론,React 검색 UI,React Tailwind 프로젝트,상품 카드 레이아웃,React 무한스크롤,React 모달,React 필터 구현,React Vite 시작하기,React 프로젝트 구조