[22주 1일차] API 정보를 db에 저장 & 페이징

티스토리 뷰

코딩/spring

[22주 1일차] API 정보를 db에 저장 & 페이징

ehzim 2024. 3. 4. 19:15

컨트롤러

HospitalInfoController.java

package com.springmvc.controller;

import java.net.HttpURLConnection;
import java.net.URL;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Map;

import org.jdom2.input.SAXBuilder;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import com.springmvc.domain.Hospital;
import com.springmvc.domain.HospitalInfo;
import com.springmvc.repository.HospitalInfoRepository;
import com.springmvc.service.Jdom;

import org.jdom2.Document;
import org.jdom2.Element;

@Controller
@RequestMapping("/hospitalinfo")
public class HospitalInfoController {
	
	@Autowired
    private Jdom jdom;
	
	@Autowired
	private HospitalInfoRepository hospitalInfoRepository;
	
	
	
	@GetMapping("/save")
	public String saveDate(Model model) {
		try {
			List<Map<String, String>> allDataList = jdom.readAllPages();
			hospitalInfoRepository.saveDataToDB(allDataList);
			return "Hospital/hospitals";
		}
		catch(Exception e) {
			e.printStackTrace();
			return "Error occured : " +e.getMessage();
		}
	}
	
	@GetMapping("/list")
	public String getHospitalList(@RequestParam(defaultValue = "1") int page, Model model) {
		
		int itemslimit=15;
		//시작 인덱스 계산 
		int startIndex = (page - 1) * itemslimit;
		System.out.println("시작인덱스:"+startIndex);
		//15개씩 조회
		List<HospitalInfo> dataList = hospitalInfoRepository.findHospitalData(itemslimit, startIndex);
		
		//전체 수 조회
		int totalItemCount = hospitalInfoRepository.getTotalItemCount();
		System.out.println("전체수:"+totalItemCount);
		
		//총 페이지 수 계산
		int totalPages = (int) Math.ceil((double) totalItemCount / itemslimit);
		System.out.println("총페이지수:"+totalPages);
		model.addAttribute("totalItemCount", totalItemCount);
		model.addAttribute("dataList",dataList);
		model.addAttribute("currentPage", page);
		model.addAttribute("totalPages",totalPages);
		
		return "/Hospital/hospitals";
	}
	
	@GetMapping("/hospital")
	public String requestHospitalInfoById(@RequestParam("id") String id, Model model) {
		HospitalInfo hospitalInfoById = hospitalInfoRepository.readHospitalInfoById(id);
		model.addAttribute("hospitalInfo",hospitalInfoById);
		
		return "/Hospital/hospital";
	}
	
}

limit를 15로 설정하여 한페이지랑 15개의 데이터를 출력하도록 설정했다.

또한, 시작인덱스를 1로 설정하고 int startIndex = (page -1)*itemslimit; 로 offset값으로 사용할 시작 row숫자를 계산해주었다.

버튼을 누르면 다음 데이터를 보여주는 페이징 작업을 하기위해

총 페이지 수를 계산해 model로 담아 뷰페이지로 전달했다.

현재 페이지의 정보로 필요로하기 때문에 이것도 model 에 담아 전달했다.

도메인

HospitalInfo.java

package com.springmvc.domain;

import java.io.Serializable;

public class HospitalInfo implements Serializable{

    /**
	 * 
	 */
	private static final long serialVersionUID = 9210551159295495721L;
	
	private int id; //아이디
	private String addr;  //주소
    private String clCd;
    private String clCdNm;
    private int cmdcGdrCnt;
    private int cmdcIntnCnt;
    private int cmdcResdntCnt;
    private int cmdcSdrCnt;
    private int detyGdrCnt;
    private int detyIntnCnt;
    private int detyResdntCnt;
    private int detySdrCnt;
    private int drTotCnt;
    private String emdongNm;
    private String estbDd;
    private String hospUrl;
    private int mdeptGdrCnt;
    private int mdeptIntnCnt;
    private int mdeptResdntCnt;
    private int mdeptSdrCnt;
    private int pnursCnt;
    private String postNo;
    private String sgguCd;
    private String sgguCdNm;
    private String sidoCd;
    private String sidoCdNm;
    private String telno;
    private double XPos;
    private double YPos;
    private String yadmNm;
    private String ykiho;

    
	public HospitalInfo() {
		super();
		// TODO Auto-generated constructor stub
	}


	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public String getAddr() {
		return addr;
	}

	public void setAddr(String addr) {
		this.addr = addr;
	}

	public String getClCd() {
		return clCd;
	}

	public void setClCd(String clCd) {
		this.clCd = clCd;
	}

	public String getClCdNm() {
		return clCdNm;
	}

	public void setClCdNm(String clCdNm) {
		this.clCdNm = clCdNm;
	}

	public int getCmdcGdrCnt() {
		return cmdcGdrCnt;
	}

	public void setCmdcGdrCnt(int cmdcGdrCnt) {
		this.cmdcGdrCnt = cmdcGdrCnt;
	}

	public int getCmdcIntnCnt() {
		return cmdcIntnCnt;
	}

	public void setCmdcIntnCnt(int cmdcIntnCnt) {
		this.cmdcIntnCnt = cmdcIntnCnt;
	}

	public int getCmdcResdntCnt() {
		return cmdcResdntCnt;
	}

	public void setCmdcResdntCnt(int cmdcResdntCnt) {
		this.cmdcResdntCnt = cmdcResdntCnt;
	}

	public int getCmdcSdrCnt() {
		return cmdcSdrCnt;
	}

	public void setCmdcSdrCnt(int cmdcSdrCnt) {
		this.cmdcSdrCnt = cmdcSdrCnt;
	}

	public int getDetyGdrCnt() {
		return detyGdrCnt;
	}

	public void setDetyGdrCnt(int detyGdrCnt) {
		this.detyGdrCnt = detyGdrCnt;
	}

	public int getDetyIntnCnt() {
		return detyIntnCnt;
	}

	public void setDetyIntnCnt(int detyIntnCnt) {
		this.detyIntnCnt = detyIntnCnt;
	}

	public int getDetyResdntCnt() {
		return detyResdntCnt;
	}

	public void setDetyResdntCnt(int detyResdntCnt) {
		this.detyResdntCnt = detyResdntCnt;
	}

	public int getDetySdrCnt() {
		return detySdrCnt;
	}

	public void setDetySdrCnt(int detySdrCnt) {
		this.detySdrCnt = detySdrCnt;
	}

	public int getDrTotCnt() {
		return drTotCnt;
	}

	public void setDrTotCnt(int drTotCnt) {
		this.drTotCnt = drTotCnt;
	}

	public String getEmdongNm() {
		return emdongNm;
	}

	public void setEmdongNm(String emdongNm) {
		this.emdongNm = emdongNm;
	}

	public String getEstbDd() {
		return estbDd;
	}

	public void setEstbDd(String estbDd) {
		this.estbDd = estbDd;
	}

	public String getHospUrl() {
		return hospUrl;
	}

	public void setHospUrl(String hospUrl) {
		this.hospUrl = hospUrl;
	}

	public int getMdeptGdrCnt() {
		return mdeptGdrCnt;
	}

	public void setMdeptGdrCnt(int mdeptGdrCnt) {
		this.mdeptGdrCnt = mdeptGdrCnt;
	}

	public int getMdeptIntnCnt() {
		return mdeptIntnCnt;
	}

	public void setMdeptIntnCnt(int mdeptIntnCnt) {
		this.mdeptIntnCnt = mdeptIntnCnt;
	}

	public int getMdeptResdntCnt() {
		return mdeptResdntCnt;
	}

	public void setMdeptResdntCnt(int mdeptResdntCnt) {
		this.mdeptResdntCnt = mdeptResdntCnt;
	}

	public int getMdeptSdrCnt() {
		return mdeptSdrCnt;
	}

	public void setMdeptSdrCnt(int mdeptSdrCnt) {
		this.mdeptSdrCnt = mdeptSdrCnt;
	}

	public int getPnursCnt() {
		return pnursCnt;
	}

	public void setPnursCnt(int pnursCnt) {
		this.pnursCnt = pnursCnt;
	}

	public String getPostNo() {
		return postNo;
	}

	public void setPostNo(String postNo) {
		this.postNo = postNo;
	}

	public String getSgguCd() {
		return sgguCd;
	}

	public void setSgguCd(String sgguCd) {
		this.sgguCd = sgguCd;
	}

	public String getSgguCdNm() {
		return sgguCdNm;
	}

	public void setSgguCdNm(String sgguCdNm) {
		this.sgguCdNm = sgguCdNm;
	}

	public String getSidoCd() {
		return sidoCd;
	}

	public void setSidoCd(String sidoCd) {
		this.sidoCd = sidoCd;
	}

	public String getSidoCdNm() {
		return sidoCdNm;
	}

	public void setSidoCdNm(String sidoCdNm) {
		this.sidoCdNm = sidoCdNm;
	}

	public String getTelno() {
		return telno;
	}

	public void setTelno(String telno) {
		this.telno = telno;
	}

	public double getXPos() {
		return XPos;
	}

	public void setXPos(double xPos) {
		XPos = xPos;
	}

	public double getYPos() {
		return YPos;
	}

	public void setYPos(double yPos) {
		YPos = yPos;
	}

	public String getYadmNm() {
		return yadmNm;
	}

	public void setYadmNm(String yadmNm) {
		this.yadmNm = yadmNm;
	}

	public String getYkiho() {
		return ykiho;
	}

	public void setYkiho(String ykiho) {
		this.ykiho = ykiho;
	}
	
}

리파지토리

HospitalInfoRepository.java

package com.springmvc.repository;

import java.util.List;
import java.util.Map;

import com.springmvc.domain.HospitalInfo;

public interface HospitalInfoRepository {
	void saveDataToDB(List<Map<String, String>> dataList);
	List<HospitalInfo> findHospitalData(int limit, int offset);
	int getTotalItemCount();
	HospitalInfo readHospitalInfoById(String id);
}

HospitalInfoRepositoryImpl.java

package com.springmvc.repository;

import java.util.List;
import java.util.Map;

import javax.sql.DataSource;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Repository;

import com.springmvc.domain.HospitalInfo;

@Repository
public class HospitalInfoRepositoryImpl implements HospitalInfoRepository{

	private JdbcTemplate template;
	
	@Autowired
	public void setJdbcTemplate(DataSource dataSource) {
		this.template = new JdbcTemplate(dataSource);
	}
	
	@Override
	public void saveDataToDB(List<Map<String, String>> dataList) {
		for (Map<String, String> dataMap : dataList) {
            String SQL = "INSERT INTO hospitalInfo (addr, clCd, clCdNm, cmdcGdrCnt, cmdcIntnCnt, cmdcResdntCnt, cmdcSdrCnt, "
                    + "detyGdrCnt, detyIntnCnt, detyResdntCnt, detySdrCnt, drTotCnt, emdongNm, estbDd, hospUrl, mdeptGdrCnt, "
                    + "mdeptIntnCnt, mdeptResdntCnt, mdeptSdrCnt, pnursCnt, postNo, sgguCd, sgguCdNm, sidoCd, sidoCdNm, telno, "
                    + "XPos, YPos, yadmNm, ykiho) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, "
                    + "?, ?, ?, ?, ?, ?, ?)";

            template.update(SQL,
                    dataMap.get("addr"),
                    dataMap.get("clCd"),
                    dataMap.get("clCdNm"),
                    dataMap.get("cmdcGdrCnt"),
                    dataMap.get("cmdcIntnCnt"),
                    dataMap.get("cmdcResdntCnt"),
                    dataMap.get("cmdcSdrCnt"),
                    dataMap.get("detyGdrCnt"),
                    dataMap.get("detyIntnCnt"),
                    dataMap.get("detyResdntCnt"),
                    dataMap.get("detySdrCnt"),
                    dataMap.get("drTotCnt"),
                    dataMap.get("emdongNm"),
                    dataMap.get("estbDd"),
                    dataMap.get("hospUrl"),
                    dataMap.get("mdeptGdrCnt"),
                    dataMap.get("mdeptIntnCnt"),
                    dataMap.get("mdeptResdntCnt"),
                    dataMap.get("mdeptSdrCnt"),
                    dataMap.get("pnursCnt"),
                    dataMap.get("postNo"),
                    dataMap.get("sgguCd"),
                    dataMap.get("sgguCdNm"),
                    dataMap.get("sidoCd"),
                    dataMap.get("sidoCdNm"),
                    dataMap.get("telno"),
                    dataMap.get("XPos"),
                    dataMap.get("YPos"),
                    dataMap.get("yadmNm"),
                    dataMap.get("ykiho"));
        }
		
	}

	public void setTemplate(JdbcTemplate template) {
		this.template = template;
	}

	@Override
	public List<HospitalInfo> findHospitalData(int limit, int offset) {
		String SQL = "select * from hospitalInfo LIMIT ? OFFSET ?";
		
		return template.query(SQL, new Object[] {limit,offset}, new HospitalInfoRowMapper());
	}

	@Override
	public int getTotalItemCount() {
		String SQL = "select count(*) from hospitalInfo";
		return template.queryForObject(SQL, Integer.class);
	}

	@Override
	public HospitalInfo readHospitalInfoById(String id) {
		HospitalInfo hospitalInfo = null;
		
		String SQL = "select count(*) from hospitalInfo where id=?";
		int rowCount = template.queryForObject(SQL, Integer.class, id);
		
		if(rowCount!=0) {
			SQL="select * from hospitalInfo where id=?";
			hospitalInfo = template.queryForObject(SQL, new Object[] {id}, new HospitalInfoRowMapper());
		}
		if(hospitalInfo==null) {
			throw new IllegalArgumentException("일치하는 항목이 없습니다.");
		}
		return hospitalInfo;
	}

}

limit와 offset을 사용하여 원하는만큼 리스트를 볼 수 있도록 설정해주었다.

limit는 출력되는 갯수를 제한하고 offset은 시작되는 row을 말한다.

서비스

Jdom.java

package com.springmvc.service;
import org.jdom2.Element;
import org.springframework.stereotype.Service;

import java.net.HttpURLConnection;
import java.net.URL;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Map;

import org.jdom2.input.SAXBuilder;
@Service
public class Jdom {

	public List<Map<String, String>> readAllPages() throws Exception {
        List<Map<String, String>> dataList = new ArrayList<>();

        StringBuilder urlBuilder = new StringBuilder("https://apis.data.go.kr/B551182/hospInfoServicev2/getHospBasisList");
        urlBuilder.append("?ServiceKey=인증키");
        urlBuilder.append("&numOfRows=5000");
        urlBuilder.append("&dgsbjtCd=05");
        urlBuilder.append("&page=3");

        URL url = new URL(urlBuilder.toString());
        HttpURLConnection conn = (HttpURLConnection) url.openConnection();
        conn.setRequestMethod("GET");
        conn.setRequestProperty("Content-Type", "application/xml");

        SAXBuilder builder = new SAXBuilder();
        org.jdom2.Document document = builder.build(conn.getInputStream());
        Element root = document.getRootElement();

        dataList.addAll(getDataForPage(root));

        return dataList;
    }

    private List<Map<String, String>> getDataForPage(Element root) {
        List<Map<String, String>> dataList = new ArrayList<>();
        Element itemsElement = root.getChild("body").getChild("items");

        if (itemsElement != null) {
            List<Element> itemsList = itemsElement.getChildren("item");

            for (Element item : itemsList) {
                Map<String, String> dataMap = new HashMap<>();
                for (Element itemElement : item.getChildren()) {
                    dataMap.put(itemElement.getName(), itemElement.getValue());
                }
                dataList.add(dataMap);
            }
        }

        return dataList;
    }
}

xml을 가져와 읽어주는 코드이다.

이때 문제가 발생했는데 xml을 가져와 db에 저장하고자했지만 계속 동일값들이 저장되어 반복되는 오류가 발생했다.

살펴본 결과 xml이 페이지별로 나누어져 있기 때문이라는 것을 알 수 있었다.

이런 경우 실시간으로 x,y 좌표를 이용하는 용도로 사용되는데

우리는 병원을 예약하고 목록을 보여줘야하기 때문에 db에 저장할 필요가 있었다.

그렇기 때문에 numOfRow를 5000으로 설정하여 한 페이지랑 5000개의 데이터를 가져오도록 설정하고

page=1부터 수동으로 저장해주었다.

페이지 1을 저장 후 2로 변경하여 저장하고 원하는 페이지까지 저장해주었다.

그럼 이전과 다르게 반복된 값이 아닌 다른 값들이 저장된 것을 볼 수 있었다.

DB

CREATE TABLE hospitalInfo (
    id INT AUTO_INCREMENT PRIMARY KEY,
    addr VARCHAR(255),
    clCd VARCHAR(2),
    clCdNm VARCHAR(20),
    cmdcGdrCnt INT,
    cmdcIntnCnt INT,
    cmdcResdntCnt INT,
    cmdcSdrCnt INT,
    detyGdrCnt INT,
    detyIntnCnt INT,
    detyResdntCnt INT,
    detySdrCnt INT,
    drTotCnt INT,
    emdongNm VARCHAR(50),
    estbDd VARCHAR(8),
    hospUrl VARCHAR(255),
    mdeptGdrCnt INT,
    mdeptIntnCnt INT,
    mdeptResdntCnt INT,
    mdeptSdrCnt INT,
    pnursCnt INT,
    postNo VARCHAR(10),
    sgguCd VARCHAR(10),
    sgguCdNm VARCHAR(20),
    sidoCd VARCHAR(10),
    sidoCdNm VARCHAR(20),
    telno VARCHAR(20),
    XPos DOUBLE,
    YPos DOUBLE,
    yadmNm VARCHAR(255),
    ykiho VARCHAR(100)
);

id는 AUTO_INCREMENT 로 하나씩 숫자를 늘려 입력되도록했다. (이럴경우 따로 id를 입력하지않아도된다.)

이것을 pk로 지정하여 id로 사용하기로 했다.

뷰

전체 리스트 보기

hospitals.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!-- form 사용을 위한 선언 -->
    
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Aroma Shop - Category</title>
	<link rel="icon" href="img/Fevicon.png" type="image/png">
  <link rel="stylesheet" href="<c:url value='/resources/vendors/bootstrap/bootstrap.min.css'/>"/>
  <link rel="stylesheet" href="<c:url value='/resources/vendors/fontawesome/css/all.min.css'/>"/>
	<link rel="stylesheet" href="<c:url value='/resources/vendors/themify-icons/themify-icons.css'/>"/>
	<link rel="stylesheet" href="<c:url value='/resources/vendors/linericon/style.css'/>"/>
  <link rel="stylesheet" href="<c:url value='/resources/vendors/owl-carousel/owl.theme.default.min.css'/>"/>
  <link rel="stylesheet" href="<c:url value='/resources/vendors/owl-carousel/owl.carousel.min.css'/>"/>
  <link rel="stylesheet" href="<c:url value='/resources/vendors/nice-select/nice-select.css'/>"/>
  <link rel="stylesheet" href="<c:url value='/resources/vendors/nouislider/nouislider.min.css'/>"/>
  <script src="https://kit.fontawesome.com/c3566586b6.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="<c:url value='/resources/css/style.css'/>"/>
  <style>
    *{
      /* border:0.1px solid black; */
      list-style: none;
    }
    .heart
    {
      position: absolute;
      bottom: 5%;
      left: 3%;
      font-size: 1.2rem;
      color: rgb(79, 155, 253);
    }
    .hospital-img
    {
      position: relative;
    }
    .fa-solid
    {
      display: none;
    }
    
    .fa-regular:hover ~ .fa-solid
    {
      display: block;
    }
  </style>

</head>
<body>
<header class="header_area">
    <div class="main_menu">
      <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container">
          <a class="navbar-brand logo_h" href="index.html"><img src="img/logo.png" alt=""></a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <div class="collapse navbar-collapse offset" id="navbarSupportedContent">
            <ul class="nav navbar-nav menu_nav ml-auto mr-auto">
              <li class="nav-item"><a class="nav-link" href="index.html">홈</a></li>
              <li class="nav-item"><a class="nav-link" href="index.html">쇼핑</a></li>
              <li class="nav-item active submenu dropdown">
                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                  aria-expanded="false">구단</a>
                <ul class="dropdown-menu">
                  <li class="nav-item"><a class="nav-link" href="/waguwagu/team/add">구단등록</a></li>
                  <li class="nav-item"><a class="nav-link" href="/waguwagu/team">구단목록</a></li>
                  <li class="nav-item"><a class="nav-link" href="/waguwagu/games">경기목록</a></li>
                  <li class="nav-item"><a class="nav-link" href="/waguwagu/team/result/ranks">구단랭킹</a></li>
                  <li class="nav-item"><a class="nav-link" href="confirmation.html">나의구단</a></li>
                </ul>
							</li>
              <li class="nav-item submenu dropdown">
                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                  aria-expanded="false">클래스</a>
                <ul class="dropdown-menu">
                  <li class="nav-item"><a class="nav-link" href="/waguwagu/Lesson/lessons">클래스?</a></li>
                  <li class="nav-item"><a class="nav-link" href="/waguwagu/lessons">클래스목록</a></li>
                </ul>
							</li>
              <li class="nav-item submenu dropdown">
                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                  aria-expanded="false">경기장</a>
                <ul class="dropdown-menu">
                  <li class="nav-item"><a class="nav-link" href="/waguwagu/">경기장목록</a></li>
                  <li class="nav-item"><a class="nav-link" href="single-blog.html">경기장예약</a></li>
                </ul>
							</li>
              <li class="nav-item submenu dropdown">
                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                  aria-expanded="false">관광</a>
                <ul class="dropdown-menu">
                  <li class="nav-item"><a class="nav-link" href="blog.html">맛집</a></li>
                  <li class="nav-item"><a class="nav-link" href="single-blog.html">둘러볼곳</a></li>
                </ul>
							</li>
							<li class="nav-item submenu dropdown">
                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                  aria-expanded="false">의료</a>
                <ul class="dropdown-menu">
                  <li class="nav-item"><a class="nav-link" href="/waguwagu/hospitalinfo/list">병원목록</a></li>
                  <li class="nav-item"><a class="nav-link" href="/waguwagu/Hospital/">병원예약</a></li>
                  <li class="nav-item"><a class="nav-link" href="tracking-order.html">재활추천</a></li>
                </ul>
              </li>
            </ul>

            <ul class="nav-shop">
              <li class="nav-item"><button><i class="ti-search"></i></button></li>
              <li class="nav-item"><button><i class="ti-shopping-cart"></i><span class="nav-shop__circle">3</span></button> </li>
              <li class="nav-item"><button><i class="fas fa-user"></i></button></li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
  </header>
	<!--================ End Header Menu Area =================-->
	<!-- ================ start banner area ================= -->	
	<section class="blog-banner-area" id="category">
		<div class="container h-100">
			<div class="blog-banner">
				<div class="text-center">
					<h1>Shop Category</h1>
					<nav aria-label="breadcrumb" class="banner-breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active" aria-current="page">Shop Category</li>
            </ol>
          </nav>
				</div>
			</div>
    </div>
	</section>
	<!-- ================ end banner area ================= -->


	<!-- ================ category section start ================= -->		  
  <section class="section-margin--small mb-5">
    <div class="container">
      <div class="row">
        <div class="col-xl-3 col-lg-4 col-md-5">
          <div class="sidebar-categories">
            <div class="head">Browse Categories</div>
            <ul class="main-categories">
              <li class="common-filter">
                <form action="#">
                  <ul>
                    <li class="filter-list"><input class="pixel-radio" type="radio" id="men" name="brand"><label for="men">Men<span> (3600)</span></label></li>
                    <li class="filter-list"><input class="pixel-radio" type="radio" id="women" name="brand"><label for="women">Women<span> (3600)</span></label></li>
                    <li class="filter-list"><input class="pixel-radio" type="radio" id="accessories" name="brand"><label for="accessories">Accessories<span> (3600)</span></label></li>
                    <li class="filter-list"><input class="pixel-radio" type="radio" id="footwear" name="brand"><label for="footwear">Footwear<span> (3600)</span></label></li>
                    <li class="filter-list"><input class="pixel-radio" type="radio" id="bayItem" name="brand"><label for="bayItem">Bay item<span> (3600)</span></label></li>
                    <li class="filter-list"><input class="pixel-radio" type="radio" id="electronics" name="brand"><label for="electronics">Electronics<span> (3600)</span></label></li>
                    <li class="filter-list"><input class="pixel-radio" type="radio" id="food" name="brand"><label for="food">Food<span> (3600)</span></label></li>
                  </ul>
                </form>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-xl-9 col-lg-8 col-md-7">
          <!-- Start Filter Bar -->
          <div class="filter-bar d-flex flex-wrap align-items-center">
            <div class="sorting">
              <select>
                <option value="1">Default sorting</option>
                <option value="1">Default sorting</option>
                <option value="1">Default sorting</option>
              </select>
            </div>
            <div class="sorting mr-auto">
              <select>
                <option value="1">Show 12</option>
                <option value="1">Show 12</option>
                <option value="1">Show 12</option>
              </select>
            </div>
            <div>
              <div class="input-group filter-bar-search">
                <input type="text" placeholder="Search">
                <div class="input-group-append">
                  <button type="button"><i class="ti-search"></i></button>
                </div>
              </div>
            </div>
          </div>
          <!-- End Filter Bar -->
          <!-- Start Best Seller -->
          <section class="lattest-product-area pb-40 category-list">
            <div class="row">
              <div class="">
                <ul>
                  <c:forEach var="dataList" items="${dataList}">
				    <li class="d-f shadow-sm p-3 mb-5 bg-body-tertiary rounded" aria-current="true">
				        <div class="card-product d-inline-flex">
				            <div class="hospital-img" style="width: 80%;">
				                <img class="img-fluid" src="/img/hospital.jpg" alt="">
				                <input type="checkbox" style="display: none;">
				                <i class="fa-regular fa-heart heart"></i>
				                <i class="fa-solid fa-heart heart"></i>
				            </div>
				            <div class="description d-flex flex-column flex-md-row">
				                <div class="ml-3">
				                    <h2 class="">${dataList.yadmNm}</h2>
				                    <div class="subheading mb-3">${dataList.addr}</div>
				                    <p>${dataList.clCdNm}</p>
				                </div>
				            </div>
				        </div>
				        <div class="text-md-right">
				            <a href="<c:url value='/hospitalinfo/hospital?id=${dataList.id}'/>" class="btn btn-sm btn-primary">예약하기</a>
				        </div>
				    </li>
				</c:forEach>
	           </ul>              
	            </div>
          </section>
          <div class="d-flex justify-content-center">
            <nav aria-label="Page navigation example">
              <ul class="pagination">
                <li class="page-item">
                  <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                  </a>
                </li>
                <li class="page-item"><a class="page-link" href="/waguwagu/sample/list?page=1">1</a></li>
                <li class="page-item"><a class="page-link" href="/waguwagu/sample/list?page=2">2</a></li>
                <li class="page-item"><a class="page-link" href="/waguwagu/sample/list?page=3">3</a></li>
                <li class="page-item">
                <a class="page-link" href="/waguwagu/hospitalinfo/list?page=${currentPage + 1}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                  </a>
                </li>
              </ul>
            </nav>
          </div>
          <!-- End Best Seller -->
        </div>
      </div>
    </div>
  </section>
	<!-- ================ category section end ================= -->		  

	<!-- ================ top product area start ================= -->	
	
	<!-- ================ top product area end ================= -->		





  <script src="<c:url value='/resources/vendors/jquery/jquery-3.2.1.min.js'/>"/></script>
  <script src="<c:url value='/resources/vendors/bootstrap/bootstrap.bundle.min.js'/>"/></script>
  <script src="<c:url value='/resources/vendors/skrollr.min.js'/>"/></script>
  <script src="<c:url value='/resources/vendors/owl-carousel/owl.carousel.min.js'/>"/></script>
  <script src="<c:url value='/resources/vendors/nice-select/jquery.nice-select.min.js'/>"/></script>
  <script src="<c:url value='/resources/vendors/nouislider/nouislider.min.js'/>"/></script>
  <script src="<c:url value='/resources/vendors/jquery.ajaxchimp.min.js'/>"/></script>
  <script src="<c:url value='/resources/vendors/mail-script.js'/>"/></script>
  <script src="<c:url value='/resources/js/main.js'/>"/></script>
</body>
</html>

리스트 결과는 많기때문에 페이징 기술이 필수적이다.

그러므로 아래의 코드와 같이 페이징해주었다.

 <li class="page-item"><a class="page-link" href="/waguwagu/sample/list?page=1">1</a></li>
                <li class="page-item"><a class="page-link" href="/waguwagu/sample/list?page=2">2</a></li>
                <li class="page-item"><a class="page-link" href="/waguwagu/sample/list?page=3">3</a></li>
                <li class="page-item">
                <a class="page-link" href="/waguwagu/hospitalinfo/list?page=${currentPage + 1}" aria-label="Next">

1 2 3 각 숫자에는 해당하는 page를 볼 수 있도록 작성해주었다.

컨트롤로로부터 전달받은 현재 페이지 정보에 +1하여 다음 페이지로 넘어가도록 페이징을 설정했다.

상세보기

hospital.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!-- form 사용을 위한 선언 -->
    
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Medical</title>
	<link rel="icon" href="img/Fevicon.png" type="image/png">
  <link rel="stylesheet" href="<c:url value='/resources/vendors/bootstrap/bootstrap.min.css'/>"/>
  <link rel="stylesheet" href="<c:url value='/resources/vendors/fontawesome/css/all.min.css'/>"/>
	<link rel="stylesheet" href="<c:url value='/resources/vendors/themify-icons/themify-icons.css'/>"/>
	<link rel="stylesheet" href="<c:url value='/resources/vendors/linericon/style.css'/>"/>
  <link rel="stylesheet" href="<c:url value='/resources/vendors/nice-select/nice-select.css'/>"/>
  <link rel="stylesheet" href="<c:url value='/resources/vendors/owl-carousel/owl.theme.default.min.css'/>"/>
  <link rel="stylesheet" href="<c:url value='/resources/vendors/owl-carousel/owl.carousel.min.css'/>"/>

  <link rel="stylesheet" href="<c:url value='/resources/css/style.css'/>"/>
  <style>
	.fade{
		/* text-align: center; */
	}
	.fade-1{
		display: flex;
		align-items: center;
	}
	.breadhospital{
		background-color: transparent; 
		border-bottom: 1px solid #777;
	}
  </style>
</head>
<body>
	<!--================ Start Header Menu Area =================-->
	<header class="header_area">
	    <div class="main_menu">
	      <nav class="navbar navbar-expand-lg navbar-light">
	        <div class="container">
	          <a class="navbar-brand logo_h" href="index.html"><img src="img/logo.png" alt=""></a>
	          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
	            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	          </button>
	          <div class="collapse navbar-collapse offset" id="navbarSupportedContent">
	            <ul class="nav navbar-nav menu_nav ml-auto mr-auto">
	              <li class="nav-item"><a class="nav-link" href="index.html">홈</a></li>
	              <li class="nav-item"><a class="nav-link" href="index.html">쇼핑</a></li>
	              <li class="nav-item active submenu dropdown">
	                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
	                  aria-expanded="false">구단</a>
	                <ul class="dropdown-menu">
	                  <li class="nav-item"><a class="nav-link" href="/waguwagu/team/add">구단등록</a></li>
	                  <li class="nav-item"><a class="nav-link" href="/waguwagu/team">구단목록</a></li>
	                  <li class="nav-item"><a class="nav-link" href="/waguwagu/games">경기목록</a></li>
	                  <li class="nav-item"><a class="nav-link" href="/waguwagu/team/result/ranks">구단랭킹</a></li>
	                  <li class="nav-item"><a class="nav-link" href="confirmation.html">나의구단</a></li>
	                </ul>
								</li>
	              <li class="nav-item submenu dropdown">
	                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
	                  aria-expanded="false">클래스</a>
	                <ul class="dropdown-menu">
	                  <li class="nav-item"><a class="nav-link" href="/waguwagu/Lesson/lessons">클래스?</a></li>
	                  <li class="nav-item"><a class="nav-link" href="/waguwagu/lessons">클래스목록</a></li>
	                </ul>
								</li>
	              <li class="nav-item submenu dropdown">
	                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
	                  aria-expanded="false">경기장</a>
	                <ul class="dropdown-menu">
	                  <li class="nav-item"><a class="nav-link" href="/waguwagu/">경기장목록</a></li>
	                  <li class="nav-item"><a class="nav-link" href="single-blog.html">경기장예약</a></li>
	                </ul>
								</li>
	              <li class="nav-item submenu dropdown">
	                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
	                  aria-expanded="false">관광</a>
	                <ul class="dropdown-menu">
	                  <li class="nav-item"><a class="nav-link" href="blog.html">맛집</a></li>
	                  <li class="nav-item"><a class="nav-link" href="single-blog.html">둘러볼곳</a></li>
	                </ul>
								</li>
								<li class="nav-item submenu dropdown">
	                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
	                  aria-expanded="false">의료</a>
	                <ul class="dropdown-menu">
	                  <li class="nav-item"><a class="nav-link" href="/waguwagu/hospitalinfo/list">병원목록</a></li>
	                  <li class="nav-item"><a class="nav-link" href="/waguwagu/Hospital/">병원예약</a></li>
	                  <li class="nav-item"><a class="nav-link" href="tracking-order.html">재활추천</a></li>
	                </ul>
	              </li>
	            </ul>
	
	            <ul class="nav-shop">
	              <li class="nav-item"><button><i class="ti-search"></i></button></li>
	              <li class="nav-item"><button><i class="ti-shopping-cart"></i><span class="nav-shop__circle">3</span></button> </li>
	              <li class="nav-item"><button><i class="fas fa-user"></i></button></li>
	            </ul>
	          </div>
	        </div>
	      </nav>
	    </div>
	  </header>
	<!--================ End Header Menu Area =================-->
	<!-- ================ start banner area ================= -->	
	<section class="blog-banner-area" id="blog">
		<div class="container h-100">
			<div class="blog-banner">
				<div class="text-center">
					<h1>Medical</h1>
					<nav aria-label="breadcrumb" class="banner-breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active" aria-current="page">hospital</li>
            </ol>
          </nav>
				</div>
			</div>
    </div>
	</section>
	<!-- ================ end banner area ================= -->
	<div class="container">
		<nav class="bread_c" style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
			<ol class="breadcrumb breadhospital">
			  <li class="breadcrumb-item"><a href="#">병원목록</a></li>
			  <li class="breadcrumb-item active" aria-current="page">졍형외과</li>
			</ol>
		</nav>
	</div>

  <!--================Single Product Area =================-->
	<div class="product_image_area">
		<div class="container">
			<div class="row s_product_inner">
				<div class="col-lg-6">
					<div class="owl-carousel owl-theme s_Product_carousel">
						<div class="single-prd-item">
							<img class="img-fluid" src="img/category/hospital3.jpg" alt="">
						</div>
                        <div class="single-prd-item">
                            <img class="img-fluid" src="img/category/hospital2.jpg" alt="">
                        </div>
						<!-- <div class="single-prd-item">
							<img class="img-fluid" src="img/category/s-p1.jpg" alt="">
						</div>
						<div class="single-prd-item">
							<img class="img-fluid" src="img/category/s-p1.jpg" alt="">
						</div> -->
					</div>
				</div>
				<div class="col-lg-5 offset-lg-1">
					<div class="s_product_text">
						<h3>${hospitalInfo.yadmNm }</h3>
						<h2>정형외과</h2>
						<ul class="list">
							<li><a class="active" href="#"><span>Number</span> : ${hospitalInfo.telno }</a></li>
							<li><a href="#"><span>Availibility</span> : Orthopedics</a></li>
						</ul>
                        
						<p>${hospitalInfo.addr }</p>
						<div class="product_count">
                            <label>예약날짜 : </label>
                            <input type="date" name="birth" id="b" min="1996-12-30"  style="width:150px;font-size:15px;">
							<a class="button primary-btn" href="#">예약</a>               
						</div>
						<div class="card_area d-flex align-items-center">
							<a class="icon_btn" href="#"><i class="lnr lnr lnr-diamond"></i></a>
							<a class="icon_btn" href="#"><i class="lnr lnr lnr-heart"></i></a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--================End Single Product Area =================-->

	<!--================Product Description Area =================-->
	<section class="product_description_area">
		<div class="container">
			<ul class="nav nav-tabs" id="myTab" role="tablist">
				<li class="nav-item">
					<a class="nav-link" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">병원정보</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact"
					 aria-selected="false">QnA</a>
				</li>
				<li class="nav-item">
					<a class="nav-link active" id="review-tab" data-toggle="tab" href="#review" role="tab" aria-controls="review"
					 aria-selected="false">리뷰</a>
				</li>
			</ul>
			<div class="tab-content" id="myTabContent">
				<div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
					<p>팔꿈치 부상을 전문으로 하는 정형외과입니다.</p>
                    <div class="col-lg-12">
                        <div id="map" style="width: 500px; height: 400px;" class="feature-img">
                                <!-- <img class="img-fluid" src="img/category/정형외과.jpg" alt=""> -->
                        </div>
                    </div>
                    <div class="col-lg-9 col-md-9 blog_details">
                        <h2>Astronomy Binoculars A Great Alternative</h2>
                        <p class="excert">
                                MCSE boot camps have its supporters and its detractors. Some people do not understand why you should have to spend money
                                on boot camp when you can get the MCSE study materials yourself at a fraction.
                        </p>
                        <p>
                                Boot camps have its supporters and its detractors. Some people do not understand why you should have to spend money on boot
                                camp when you can get the MCSE study materials yourself at a fraction of the camp price.
                                However, who has the willpower to actually sit through a self-imposed MCSE training. who
                                has the willpower to actually sit through a self-imposed
                        </p>
                        <p>
                                Boot camps have its supporters and its detractors. Some people do not understand why you should have to spend money on boot
                                camp when you can get the MCSE study materials yourself at a fraction of the camp price.
                                However, who has the willpower to actually sit through a self-imposed MCSE training. who
                                has the willpower to actually sit through a self-imposed
                        </p>
                    </div>	
                    <div class="col-lg-12">
                        <div class="quotes">
                                MCSE boot camps have its supporters and its detractors. Some people do not understand why you should have to spend money
                                on boot camp when you can get the MCSE study materials yourself at a fraction of the camp
                                price. However, who has the willpower to actually sit through a self-imposed MCSE training.
                        </div>
                        <div class="row">
                                <div class="col-6">
                                        <img class="img-fluid" src="<c:url value='/resources/img/category/usman-yousaf-pTrhfmj2jDA-unsplash.jpg" alt="'/>"/>
                                </div>
                                <div class="col-6">
                                        <img class="img-fluid" src="<c:url value='/resources/img/category/새우아님.jpg" alt="'/>"/>
                                </div>
                                <div class="col-lg-12 mt-4">
                                        <p>
                                                MCSE boot camps have its supporters and its detractors. Some people do not understand why you should have to spend money
                                                on boot camp when you can get the MCSE study materials yourself at a fraction of
                                                the camp price. However, who has the willpower.
                                        </p>
                                        <p>
                                                MCSE boot camps have its supporters and its detractors. Some people do not understand why you should have to spend money
                                                on boot camp when you can get the MCSE study materials yourself at a fraction of
                                                the camp price. However, who has the willpower.
                                        </p>
                                </div>
                        </div>
                    </div>
				</div>
				<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
					<div class="row">
						<div class="col-lg-6">
							<div class="comment_list">
								<div class="review_item">
									<div class="media">
										<div class="d-flex">
											<img src="img/product/review2.png" alt="">
										</div>
										<div class="media-body">
											<h4>강도영</h4>
											<h5>12th Feb, 2018 at 05:56 pm</h5>
											<a class="reply_btn" href="#">Reply</a>
										</div>
									</div>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
										dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
										commodo</p>
								</div>
								<div class="review_item reply">
									<div class="media">
										<div class="d-flex">
											<img src="img/product/review2.png" alt="">
										</div>
										<div class="media-body">
											<h4>서의정</h4>
											<h5>12th Feb, 2018 at 05:56 pm</h5>
											<a class="reply_btn" href="#">Reply</a>
										</div>
									</div>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
										dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
										commodo</p>
								</div>
								<div class="review_item">
									<div class="media">
										<div class="d-flex">
											<img src="img/product/review2.png" alt="">
										</div>
										<div class="media-body">
											<h4>이태림</h4>
											<h5>12th Feb, 2018 at 05:56 pm</h5>
											<a class="reply_btn" href="#">Reply</a>
										</div>
									</div>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
										dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
										commodo</p>
								</div>
							</div>
						</div>
						<div class="col-lg-6">
							<div class="review_box">
								<h4>QnA 작성</h4>
								<form class="row contact_form" action="contact_process.php" method="post" id="contactForm" novalidate="novalidate">
									<div class="col-md-12">
										<div class="form-group">
											<input type="text" class="form-control" id="name" name="name" placeholder="이름을 입력하세요.">
										</div>
									</div>
									<div class="col-md-12">
										<div class="form-group">
											<input type="email" class="form-control" id="email" name="email" placeholder="이메일을 입력하세요.">
										</div>
									</div>
									<div class="col-md-12">
										<div class="form-group">
											<input type="text" class="form-control" id="number" name="number" placeholder="전화번호를 입력하세요.">
										</div>
									</div>
									<div class="col-md-12">
										<div class="form-group">
											<textarea class="form-control" name="message" id="message" rows="1" placeholder="글을 작성하세요."></textarea>
										</div>
									</div>
									<div class="col-md-12 text-right">
										<button type="submit" value="submit" class="btn primary-btn">등록</button>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
				<div class="tab-pane fade show active" id="review" role="tabpanel" aria-labelledby="review-tab">
					<div class="row">
						<div class="col-lg-6">
							<div class="row total_rate">
								<div class="col-6">
									<div class="box_total">
										<h5>총점</h5>
										<h4>4.0</h4>
									</div>
								</div>
								<div class="col-6">
									<div class="rating_list">
										<ul class="list">
											<li><a href="#">5 Star <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i
													 class="fa fa-star"></i><i class="fa fa-star"></i> 01</a></li>
											<li><a href="#">4 Star <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i
													 class="fa fa-star"></i><i class="fa fa-star"></i> 01</a></li>
											<li><a href="#">3 Star <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i
													 class="fa fa-star"></i><i class="fa fa-star"></i> 01</a></li>
											<li><a href="#">2 Star <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i
													 class="fa fa-star"></i><i class="fa fa-star"></i> 01</a></li>
											<li><a href="#">1 Star <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i
													 class="fa fa-star"></i><i class="fa fa-star"></i> 01</a></li>
										</ul>
									</div>
								</div>
							</div>
							<div class="review_list">
								<div class="review_item">
									<div class="media">
										<div class="d-flex">
											<img src="img/product/review2.png" alt="">
										</div>
										<div class="media-body">
											<h4>서의정</h4>
											<i class="fa fa-star"></i>
											<i class="fa fa-star"></i>
											<i class="fa fa-star"></i>
											<i class="fa fa-star"></i>
											<i class="fa fa-star"></i>
										</div>
									</div>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
										dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
										commodo</p>
								</div>
								<div class="review_item">
									<div class="media">
										<div class="d-flex">
											<img src="img/product/review2.png" alt="">
										</div>
										<div class="media-body">
											<h4>강도영</h4>
											<i class="fa fa-star"></i>
											<i class="fa fa-star"></i>
											<i class="fa fa-star"></i>
											<i class="fa fa-star"></i>
											<i class="fa fa-star"></i>
										</div>
									</div>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
										dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
										commodo</p>
								</div>
								<div class="review_item">
									<div class="media">
										<div class="d-flex">
											<img src="img/product/review2.png" alt="">
										</div>
										<div class="media-body">
											<h4>이태림</h4>
											<i class="fa fa-star"></i>
											<i class="fa fa-star"></i>
											<i class="fa fa-star"></i>
											<i class="fa fa-star"></i>
											<i class="fa fa-star"></i>
										</div>
									</div>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
										dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
										commodo</p>
								</div>
							</div>
						</div>
						<div class="col-lg-6">
							<div class="review_box">
								<h4>리뷰작성</h4>
								<p>평점:</p>
								<ul class="list">
									<li><a href="#"><i class="fa fa-star"></i></a></li>
									<li><a href="#"><i class="fa fa-star"></i></a></li>
									<li><a href="#"><i class="fa fa-star"></i></a></li>
									<li><a href="#"><i class="fa fa-star"></i></a></li>
									<li><a href="#"><i class="fa fa-star"></i></a></li>
								</ul>
								<!-- <p>Outstanding</p> -->
                <form action="#/" class="form-contact form-review mt-3">
                  <div class="form-group">
                    <input class="form-control" name="name" type="text" placeholder="이름을 입력하세요." required>
                  </div>
                  <div class="form-group">
                    <input class="form-control" name="email" type="email" placeholder="이메일을 입력하세요." required>
                  </div>
                  <div class="form-group">
                    <input class="form-control" name="subject" type="text" placeholder="제목을 입력하세요.">
                  </div>
                  <div class="form-group">
                    <textarea class="form-control different-control w-100" name="textarea" id="textarea" cols="30" rows="5" placeholder="글을 작성하세요."></textarea>
                  </div>
                  <div class="form-group text-center text-md-right mt-3">
                    <button type="submit" class="button button--active button-review">등록</button>
                  </div>
                </form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!--================End Product Description Area =================-->

	<!--================ Start related Product area =================-->  
	<section class="related-product-area section-margin--small mt-0">
		<div class="container">
			<div class="section-intro pb-60px">
        <p>Popular Item in the market</p>
        <h2>추천 <span class="section-intro__style">상품</span></h2>
      </div>
			<div class="row mt-30">
        <div class="col-sm-6 col-xl-3 mb-4 mb-xl-0">
          <div class="single-search-product-wrapper">
            <div class="single-search-product d-flex">
              <a href="#"><img src="img/product/product-sm-1.png" alt=""></a>
              <div class="desc">
                  <a href="#" class="title">Gray Coffee Cup</a>
                  <div class="price">$170.00</div>
              </div>
            </div>
            <div class="single-search-product d-flex">
              <a href="#"><img src="img/product/product-sm-2.png" alt=""></a>
              <div class="desc">
                <a href="#" class="title">Gray Coffee Cup</a>
                <div class="price">$170.00</div>
              </div>
            </div>
            <div class="single-search-product d-flex">
              <a href="#"><img src="img/product/product-sm-3.png" alt=""></a>
              <div class="desc">
                <a href="#" class="title">Gray Coffee Cup</a>
                <div class="price">$170.00</div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-6 col-xl-3 mb-4 mb-xl-0">
          <div class="single-search-product-wrapper">
            <div class="single-search-product d-flex">
              <a href="#"><img src="img/product/product-sm-4.png" alt=""></a>
              <div class="desc">
                  <a href="#" class="title">Gray Coffee Cup</a>
                  <div class="price">$170.00</div>
              </div>
            </div>
            <div class="single-search-product d-flex">
              <a href="#"><img src="img/product/product-sm-5.png" alt=""></a>
              <div class="desc">
                <a href="#" class="title">Gray Coffee Cup</a>
                <div class="price">$170.00</div>
              </div>
            </div>
            <div class="single-search-product d-flex">
              <a href="#"><img src="img/product/product-sm-6.png" alt=""></a>
              <div class="desc">
                <a href="#" class="title">Gray Coffee Cup</a>
                <div class="price">$170.00</div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-6 col-xl-3 mb-4 mb-xl-0">
          <div class="single-search-product-wrapper">
            <div class="single-search-product d-flex">
              <a href="#"><img src="img/product/product-sm-7.png" alt=""></a>
              <div class="desc">
                  <a href="#" class="title">Gray Coffee Cup</a>
                  <div class="price">$170.00</div>
              </div>
            </div>
            <div class="single-search-product d-flex">
              <a href="#"><img src="img/product/product-sm-8.png" alt=""></a>
              <div class="desc">
                <a href="#" class="title">Gray Coffee Cup</a>
                <div class="price">$170.00</div>
              </div>
            </div>
            <div class="single-search-product d-flex">
              <a href="#"><img src="img/product/product-sm-9.png" alt=""></a>
              <div class="desc">
                <a href="#" class="title">Gray Coffee Cup</a>
                <div class="price">$170.00</div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-6 col-xl-3 mb-4 mb-xl-0">
          <div class="single-search-product-wrapper">
            <div class="single-search-product d-flex">
              <a href="#"><img src="img/product/product-sm-1.png" alt=""></a>
              <div class="desc">
                  <a href="#" class="title">Gray Coffee Cup</a>
                  <div class="price">$170.00</div>
              </div>
            </div>
            <div class="single-search-product d-flex">
              <a href="#"><img src="img/product/product-sm-2.png" alt=""></a>
              <div class="desc">
                <a href="#" class="title">Gray Coffee Cup</a>
                <div class="price">$170.00</div>
              </div>
            </div>
            <div class="single-search-product d-flex">
              <a href="#"><img src="img/product/product-sm-3.png" alt=""></a>
              <div class="desc">
                <a href="#" class="title">Gray Coffee Cup</a>
                <div class="price">$170.00</div>
              </div>
            </div>
          </div>
        </div>
      </div>
		</div>
	</section>
	<!--================ end related Product area =================-->  	



	<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=인증키"></script>
	<script>
		var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
		var options = { //지도를 생성할 때 필요한 기본 옵션
			center: new kakao.maps.LatLng(${hospitalInfo.XPos}, ${hospitalInfo.YPos}), 
			level: 3 //지도의 레벨(확대, 축소 정도)
		
		};
	
		var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
	</script>
  <script src="<c:url value='/resources/vendors/jquery/jquery-3.2.1.min.js'/>"/></script>
  <script src="<c:url value='/resources/vendors/bootstrap/bootstrap.bundle.min.js'/>"/></script>
  <script src="<c:url value='/resources/vendors/skrollr.min.js'/>"/></script>
  <script src="<c:url value='/resources/vendors/owl-carousel/owl.carousel.min.js'/>"/></script>
  <script src="<c:url value='/resources/vendors/nice-select/jquery.nice-select.min.js'/>"/></script>
  <script src="<c:url value='/resources/vendors/jquery.ajaxchimp.min.js'/>"/></script>
  <script src="<c:url value='/resources/vendors/mail-script.js'/>"/></script>
  <script src="<c:url value='/resources/js/main.js'/>"/></script>
</body>
</html>

저작자표시

'코딩 > spring' 카테고리의 다른 글

[22주 2일차] 카카오맵 api 완성 (0)	2024.03.05
[22주 2일차] 스프링 시작페이지 설정 (0)	2024.03.05
[21주 5일차] 공공데이터포털 API 사용하기 (2) (0)	2024.03.01
[21주 4일차] 공공데이터포털 API 사용하기 (0)	2024.02.29
[21주 3일차] 회원가입시 카카오톡 주소 사용하기 (0)	2024.02.28

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

zim's growth dairy

티스토리 뷰