From dc448386fcdbd9486efd8ed9518317d153492d52 Mon Sep 17 00:00:00 2001
From: daniel LEE <leejk0523@gmail.com>
Date: Thu, 26 Oct 2023 17:58:29 +0900
Subject: [PATCH] =?UTF-8?q?JSTL=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EA=B2=BD?=
 =?UTF-8?q?=EB=A1=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../demo/controller/JSPController.java        |  12 +-
 src/main/webapp/WEB-INF/views/index.jsp       | 105 ++++++++++--------
 2 files changed, 68 insertions(+), 49 deletions(-)

diff --git a/src/main/java/com/example/demo/controller/JSPController.java b/src/main/java/com/example/demo/controller/JSPController.java
index 427cd05..c7e1fc3 100644
--- a/src/main/java/com/example/demo/controller/JSPController.java
+++ b/src/main/java/com/example/demo/controller/JSPController.java
@@ -33,9 +33,17 @@ public class JSPController {
 	
 	@GetMapping("/index.do")
 	public String index(Model model) {
-	
-		return "index";
 		
+		List<Object> list = new ArrayList<Object>();
+		for ( int  i = 0; i < 8; i++) {
+			HashMap<String, String> map = new HashMap<String, String>();			
+			map.put( "filepath", "/img/52e11fb7-f206-48d8-b13d-e010e852fd6a.jpeg" );	
+			list.add(map);
+		}
+		
+		model.addAttribute("list", list);
+	
+		return "index";		
 	}
 	
 	@GetMapping("/list.do")
diff --git a/src/main/webapp/WEB-INF/views/index.jsp b/src/main/webapp/WEB-INF/views/index.jsp
index 964d974..4ed1589 100644
--- a/src/main/webapp/WEB-INF/views/index.jsp
+++ b/src/main/webapp/WEB-INF/views/index.jsp
@@ -58,10 +58,15 @@
         <section class="py-5">
             <div class="container px-4 px-lg-5 mt-5">
                 <div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
+                
+                
+                
+                <c:forEach items="${list}" var="item">
+                
                     <div class="col mb-5">
                         <div class="card h-100">
                             <!-- Product image-->
-                            <img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
+                            <img class="card-img-top" src="https://api.leejk0523.com${ item.filepath }"  alt="..." />
                             <!-- Product details-->
                             <div class="card-body p-4">
                                 <div class="text-center">
@@ -76,19 +81,25 @@
                                 <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">View options</a></div>
                             </div>
                         </div>
-                    </div>
-                    <div class="col mb-5">
+                    </div>                   
+
+				</c:forEach>
+				
+				
+				
+
+ 					<!-- <div class="col mb-5">                    
                         <div class="card h-100">
-                            <!-- Sale badge-->
+                            Sale badge
                             <div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
-                            <!-- Product image-->
+                            Product image
                             <img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
-                            <!-- Product details-->
+                            Product details
                             <div class="card-body p-4">
                                 <div class="text-center">
-                                    <!-- Product name-->
+                                    Product name
                                     <h5 class="fw-bolder">Special Item</h5>
-                                    <!-- Product reviews-->
+                                    Product reviews
                                     <div class="d-flex justify-content-center small text-warning mb-2">
                                         <div class="bi-star-fill"></div>
                                         <div class="bi-star-fill"></div>
@@ -96,12 +107,12 @@
                                         <div class="bi-star-fill"></div>
                                         <div class="bi-star-fill"></div>
                                     </div>
-                                    <!-- Product price-->
+                                    Product price
                                     <span class="text-muted text-decoration-line-through">$20.00</span>
                                     $18.00
                                 </div>
                             </div>
-                            <!-- Product actions-->
+                            Product actions
                             <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                                 <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">Add to cart</a></div>
                             </div>
@@ -109,21 +120,21 @@
                     </div>
                     <div class="col mb-5">
                         <div class="card h-100">
-                            <!-- Sale badge-->
+                            Sale badge
                             <div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
-                            <!-- Product image-->
+                            Product image
                             <img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
-                            <!-- Product details-->
+                            Product details
                             <div class="card-body p-4">
                                 <div class="text-center">
-                                    <!-- Product name-->
+                                    Product name
                                     <h5 class="fw-bolder">Sale Item</h5>
-                                    <!-- Product price-->
+                                    Product price
                                     <span class="text-muted text-decoration-line-through">$50.00</span>
                                     $25.00
                                 </div>
                             </div>
-                            <!-- Product actions-->
+                            Product actions
                             <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                                 <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">Add to cart</a></div>
                             </div>
@@ -131,14 +142,14 @@
                     </div>
                     <div class="col mb-5">
                         <div class="card h-100">
-                            <!-- Product image-->
+                            Product image
                             <img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
-                            <!-- Product details-->
+                            Product details
                             <div class="card-body p-4">
                                 <div class="text-center">
-                                    <!-- Product name-->
+                                    Product name
                                     <h5 class="fw-bolder">Popular Item</h5>
-                                    <!-- Product reviews-->
+                                    Product reviews
                                     <div class="d-flex justify-content-center small text-warning mb-2">
                                         <div class="bi-star-fill"></div>
                                         <div class="bi-star-fill"></div>
@@ -146,11 +157,11 @@
                                         <div class="bi-star-fill"></div>
                                         <div class="bi-star-fill"></div>
                                     </div>
-                                    <!-- Product price-->
+                                    Product price
                                     $40.00
                                 </div>
                             </div>
-                            <!-- Product actions-->
+                            Product actions
                             <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                                 <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">Add to cart</a></div>
                             </div>
@@ -158,21 +169,21 @@
                     </div>
                     <div class="col mb-5">
                         <div class="card h-100">
-                            <!-- Sale badge-->
+                            Sale badge
                             <div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
-                            <!-- Product image-->
+                            Product image
                             <img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
-                            <!-- Product details-->
+                            Product details
                             <div class="card-body p-4">
                                 <div class="text-center">
-                                    <!-- Product name-->
+                                    Product name
                                     <h5 class="fw-bolder">Sale Item</h5>
-                                    <!-- Product price-->
+                                    Product price
                                     <span class="text-muted text-decoration-line-through">$50.00</span>
                                     $25.00
                                 </div>
                             </div>
-                            <!-- Product actions-->
+                            Product actions
                             <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                                 <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">Add to cart</a></div>
                             </div>
@@ -180,18 +191,18 @@
                     </div>
                     <div class="col mb-5">
                         <div class="card h-100">
-                            <!-- Product image-->
+                            Product image
                             <img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
-                            <!-- Product details-->
+                            Product details
                             <div class="card-body p-4">
                                 <div class="text-center">
-                                    <!-- Product name-->
+                                    Product name
                                     <h5 class="fw-bolder">Fancy Product</h5>
-                                    <!-- Product price-->
+                                    Product price
                                     $120.00 - $280.00
                                 </div>
                             </div>
-                            <!-- Product actions-->
+                            Product actions
                             <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                                 <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">View options</a></div>
                             </div>
@@ -199,16 +210,16 @@
                     </div>
                     <div class="col mb-5">
                         <div class="card h-100">
-                            <!-- Sale badge-->
+                            Sale badge
                             <div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
-                            <!-- Product image-->
+                            Product image
                             <img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
-                            <!-- Product details-->
+                            Product details
                             <div class="card-body p-4">
                                 <div class="text-center">
-                                    <!-- Product name-->
+                                    Product name
                                     <h5 class="fw-bolder">Special Item</h5>
-                                    <!-- Product reviews-->
+                                    Product reviews
                                     <div class="d-flex justify-content-center small text-warning mb-2">
                                         <div class="bi-star-fill"></div>
                                         <div class="bi-star-fill"></div>
@@ -216,12 +227,12 @@
                                         <div class="bi-star-fill"></div>
                                         <div class="bi-star-fill"></div>
                                     </div>
-                                    <!-- Product price-->
+                                    Product price
                                     <span class="text-muted text-decoration-line-through">$20.00</span>
                                     $18.00
                                 </div>
                             </div>
-                            <!-- Product actions-->
+                            Product actions
                             <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                                 <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">Add to cart</a></div>
                             </div>
@@ -229,14 +240,14 @@
                     </div>
                     <div class="col mb-5">
                         <div class="card h-100">
-                            <!-- Product image-->
+                            Product image
                             <img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
-                            <!-- Product details-->
+                            Product details
                             <div class="card-body p-4">
                                 <div class="text-center">
-                                    <!-- Product name-->
+                                    Product name
                                     <h5 class="fw-bolder">Popular Item</h5>
-                                    <!-- Product reviews-->
+                                    Product reviews
                                     <div class="d-flex justify-content-center small text-warning mb-2">
                                         <div class="bi-star-fill"></div>
                                         <div class="bi-star-fill"></div>
@@ -244,16 +255,16 @@
                                         <div class="bi-star-fill"></div>
                                         <div class="bi-star-fill"></div>
                                     </div>
-                                    <!-- Product price-->
+                                    Product price
                                     $40.00
                                 </div>
                             </div>
-                            <!-- Product actions-->
+                            Product actions
                             <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                                 <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">Add to cart</a></div>
                             </div>
                         </div>
-                    </div>
+                    </div> -->
                 </div>
             </div>
         </section>