[스프링부트+React.js+JPA] 웹페이지 만들기 2. 차량 검색

주제 : 노약자 대상 전동차 커뮤니티 사이트 

메인 페이지의 차량 검색 기능 완성 예

 

💻 들어가기 

웹 개발 및 프레임워크 : 스프링부트, 리액트

리액트를 사용한 파일 명 : frontwork
vscode 에서 스프링부트 프로젝트를 먼저 생성 한 후 frontwork 파일을 만들어 주었습니다.

요약 
1. 스프링 부트 파일을 생성한다. 
2. cmd 에서 해당 스프링부트 파일 위치로 이동하여 [mkdir frontwork]로 frontwork 파일을 만들어주었습니다.
3. 리액트 앱 설치  : npm install -g create-react-app
4. 프로젝트 생성 : create-react-app .
5. 프로젝트 구동 : npm run start

구글에 (리액트 스프링부트 연동) 으로 검색하여 참고 하면 쉽게 연결 할 수 있답니다! 

 

 

메인페이지의 차량 검색 기능 

📌  server/frontwork/src/components/Search.js

제조사 선택

차량유형 선택

모델명 선택

 

제조사-> 차량유형(바퀴개수) -> 모델명 순으로 선택 후 검색 버튼을 누르면

하단에 정보가 나타나게 구현 하였습니다. 

import React, { useEffect, useState } from 'react';
import {Link} from 'react-router-dom';
import '../css/Search.css';
import axios from 'axios';
import Productinfo from './Productinfo';
const Search=()=> {
 
  const [Product,setProduct]=useState([]);
  const[loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [productinfo, setProductinfo] = useState({});
 
  const Productfatch = async()=>{
    try{
      setError(null);
      setProduct([]);
      setLoading(true);

      const res = await(await axios.get('/vehicle')).data;
      setProduct(res);
    }catch(e){
      setError(e);
    }
    setLoading(false);
  };

  useEffect(()=>{
    Productfatch();
  },[]);

  //제조사 
  const[Manufact, setManufact] = useState(null);
  const ProductMade = Product.map(Madeitem => Madeitem.manufacturer);
  const selectManufact = (e)=>{
    setManufact(e.target.value)
  }

  //차량유형
  const[Wheels, setWheels] = useState(null);
  const ProductWheels = Product
                        .filter(Madeitem => Manufact === Madeitem.manufacturer)
                        .map(Madeitems=>Madeitems.wheels);
  const selectWheels = (e)=>{
    setWheels(e.target.value);
  } 
  
  //모델명
  const[Names, setNames] = useState(null);
  const ProductName = Product
                      .filter(Madeitem => Wheels == Madeitem.wheels)
                      .filter(Madeitem => Manufact === Madeitem.manufacturer)                 
                      .map(Madeitems=>Madeitems.vehicleName);
  const selectNames = (e)=>{
    setNames(e.target.value);
  } 

  if (loading) return (<div className='loading'><h1>로딩중..</h1></div>);
  if (error) return (
    <div className='error'>
      <h1>로딩중 에러가 발생했습니다.</h1>
      <button onClick={Productfatch}>다시 불러오기</button>
    </div>);
  
  return (
    <article className='Search_article'>
      <div id = "Search">
          <div id="Search_title">
              <p>대한민국 No.1</p>
              <p>SILVERMOTION에서 전동차를 찾아보세요.</p>
          </div>

          <div className='Search_input'>
                  <select onClick={selectManufact} defaultValue="default" className='Search_madeType' required>
                    <option value="default" className='option_name' disabled>
                      제조사
                    </option>
                    {[...new Set(ProductMade)].map((factitem, factkey)=>(
                      <option value={factitem} key={factkey}>{factitem}</option>
                    ))}
                  </select>
              
                  <select onClick={selectWheels}  defaultValue="default"  className='Search_wheelsType' required>
                  <option value="default" className='option_name' disabled>
                      차량유형
                    </option>
                  {[...new Set(ProductWheels)].map((Wheelsitem, Wheelskey)=>(
                      <option value={Wheelsitem} key={Wheelskey}>{Wheelsitem}</option>
                    ))}
                  </select>

                  <select onClick={selectNames}defaultValue="default" className='Search_VehicleType'>
                    <option value="default" className='option_name' disabled>
                      모델명
                    </option>

                    {[...new Set(ProductName)].map((Nameitem,Namekey)=>(
                      <option value={Nameitem} key={Namekey}
                      >{Nameitem}</option>
                    ))}
                  </select>
                
                  <button id="Search_btn" onClick={()=>{                 
                                        axios.get("/vehicleinfo",{params:{vehicleName: Names}})
                                        .then((res2)=>setProductinfo(res2.data))
                                        .catch(()=>console.log('요청실패'))
                                    }}>검색</button>
          </div>
          <div className='product_detail'>
                {(productinfo.vehicleName!=null) && <Productinfo
                        vehicleName = {productinfo.vehicleName}
                        manufacturer= {productinfo.manufacturer}
                        price= {productinfo.price}
                        color= {productinfo.color}
                        dimensions= {productinfo.dimensions}
                        cargoSize= {productinfo.cargoSize}
                        loadCapacity= {productinfo.loadCapacity}
                        canopy= {productinfo.canopy}
                        wheels= {productinfo.wheels}
                        wheelSize= {productinfo.wheelSize}
                        battery= {productinfo.battery}
                        maximumOutput= {productinfo.maximumOutput}
                        maximumSpeed= {productinfo.maximumSpeed}
                        mileage= {productinfo.mileage}
                        chargingTime= {productinfo.chargingTime}
                        weight= {productinfo.weight}/>}
            </div>
      </div>
    </article>
  );
}

export default Search;

 

 

 

📌  server/frontwork/src/components/Productinfo.js

import React from 'react';
import {BrowserRouter,Link, useParams} from "react-router-dom"
import '../css/Productinfo.css';

const Productinfo = ({vehicleName, manufacturer, price, color, dimensions, cargoSize,
    loadCapacity, canopy, wheels, wheelSize, battery, maximumOutput,
    maximumSpeed, mileage, chargingTime, weight}) =>{

        const addComma = (price) => {
            return new Intl.NumberFormat('ko-KR').format(price);
        }
        const displayValue = canopy === 0 ? 'N' : 'Y';

        return (
            <div className='product_detail'>
                <div>
                    <h3 id='product_info_title'>Product Info</h3>
                    <h1>{vehicleName}</h1>
                </div>
                
                <div className='product_info'>
                    <img src = {`/vehicle_image/${vehicleName}.jpg`} id="product_image"/>
                    
                    <div id='product_tableDiv'>
                        <table id="product_table">
                            <tr>
                                <td>제조사</td>
                                <td className='td_size'>{manufacturer}</td>
                            </tr>
                            <tr>
                                <td>색상</td>
                                <td>{color}</td>
                            </tr>
                            <tr>
                                <td>가로X폭X높이</td>
                                <td>{dimensions}</td>
                            </tr>
                            <tr>
                                <td>화물칸사이즈</td>
                                <td>{cargoSize}</td>
                            </tr>
                            <tr>
                                <td>화물칸 최대중량</td>
                                <td>{loadCapacity}</td>
                            </tr>
                            <tr>
                                <td>그늘막 유무</td>
                                <td>{displayValue}</td>
                            </tr>
                            <tr>
                                <td>바퀴 3륜/4륜</td>
                                <td>{wheels}</td>
                            </tr>
                            <tr>
                                <td>바퀴사이즈</td>
                                <td>{wheelSize}</td>
                            </tr>
                            <tr>
                                <td>배터리정격</td>
                                <td>{battery}</td>
                            </tr>
                            <tr>
                                <td>최대출력</td>
                                <td>{maximumOutput}</td>
                            </tr>
                            <tr>
                                <td>최대속도</td>
                                <td>{maximumSpeed}</td>
                            </tr>
                            <tr>
                                <td>최대거리</td>
                                <td>{mileage}</td>
                            </tr>
                            <tr>
                                <td>충전시간</td>
                                <td>{chargingTime}</td>
                            </tr>
                            <tr>
                                <td>차량무게</td>
                                <td>{weight}</td>
                            </tr>
                        </table>
                        <div className='product_price'>
                            <span>제품 가격</span>
                            <p id="price">{addComma(price)}원</p>
                        </div>
                        <Link to={`https://search.shopping.naver.com/search/all?query=전동차${vehicleName}`} target='_black'>
                        <button className='Order_btn'><span>주문하기</span></button>
                        </Link>
                    </div>
                </div>
            </div>
        );
    };

export default Productinfo;

 

 

[링크]

https://github.com/20153306Kimgunwoo/silver-car-community

GitHub - 20153306Kimgunwoo/silver-car-community: KepcoA 1조 / SpringBoot와 React를 활용한 노약자 대상 전동차 커

https://notrowing.tistory.com/43

[스프링부트+React.js+JPA] 웹페이지 만들기 1. 소개