8/9 ~ 8/11 은 미니 프로젝트를 진행하는 기간이다.
16기 12조는 독서 검색 및 개인 독서록을 만들 수 있는 사이트를 만들기로 했다.
협업은 당연히 Github 로 진행하였고
나는 Github Desktop 을, 팀원들은 Source Tree, IDE 에 내장되어 있는 git 등등 여러 가지를 사용하였다.
조장님이 Figma 로 프로젝트 와이어 프레임을 그려주셨다.
내가 맡은 부분은 서브 페이지로
알라딘 api 로 불러와진 메인 페이지에서 특정 책을 누르면 그 책에 대한 정보와 후기를 작성할 수 있는 부분을 만들어야 한다.
추가 창은 팝업이 아닌 Bootstrap 에 있는 Modal 로 사용하였다.
https://getbootstrap.com/docs/5.3/components/modal/
Modal
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
getbootstrap.com
우선 Modal 은 처음 보는 개체라 찬찬히 살펴보았고
크기 조절을 위해
Optional sizes 쪽에 소스를 긁어서
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/modal2.css">
<title>Document</title>
</head>
<script>
const exampleModal = document.getElementById('exampleModal')
if (exampleModal) {
exampleModal.addEventListener('show.bs.modal', event => {
// Button that triggered the modal
const button = event.relatedTarget
// Extract info from data-bs-* attributes
const recipient = button.getAttribute('data-bs-whatever')
// If necessary, you could initiate an Ajax request here
// and then do the updating in a callback.
// Update the modal's content.
const modalTitle = exampleModal.querySelector('.modal-title')
const modalBodyInput = exampleModal.querySelector('.modal-body input')
modalTitle.textContent = `New message to ${recipient}`
modalBodyInput.value = recipient
})
}
</script>
<body>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"
data-bs-whatever="@mdo">Book</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Book</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<div class="imgBook">
<img src="https://image.yes24.com/momo/TopCate93/MidCate02/9210732.jpg">
</div>
</div>
<div class="mb-3">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="mb-3">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
</body>
</html>
위처럼 적용 시켜주었다.
이제 갖가지 정보를 입력하기 위해 모달 창을 대략적으로 디자인해 주었다.
<body>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"
data-bs-whatever="@mdo">Book</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">책 이름</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<div class="imgBook">
<img src="https://image.yes24.com/momo/TopCate93/MidCate02/9210732.jpg">
</div>
</div>
<div class="mb-3">
<p><label for="book-content" class="boldText">줄거리</label></p>
<p><text>줄거리는 쌸라쌸라 누가 내 머리에 똥 쌌을까</text></p>
</div>
<div class="mb-3">
<p><label for="message-text" class="boldText">감상평</label></p>
<p><select class="form-select" id="inputGroupSelect01">
<option selected>-- 선택하기 --</option>
<option value="1">⭐</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="5">⭐⭐⭐⭐⭐</option>
</select></p>
<p><textarea class="form-control" id="message-text"></textarea></p>
</div>
</form>
</div>
<div class="modal-footer">
<!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button> -->
<button type="button" class="btn btn-primary">저장</button>
</div>
</div>
</div>
</div>
</body>
이제 메인 페이지에서 받아온 정보를 모달 창에 뿌려주어야 하는데 처음엔 ${변수}의 형태로만 받아오면 되는 줄 알았다.
function listing() {
fetch('/book').then((res) => res.json()).then((data) => {
let rows = data['result']
$('#cards-box').empty()
console.log(rows)
rows.forEach((a) => {
let author = a['author']
let title = a['title']
let desc = a['description'].substring(0, 50) + "...";
let image = a['cover']
let pubDate = a['pubDate']
let temp_html = `<div class="col">
<div class="card h-100">
<img src="${image}" class="card-img-top"
button type="button" class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#exampleModal" data-bs-whatever="@mdo">
<!-- 모달 부분 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h1 id="title" class="modal-title fs-5" id="exampleModalLabel">${title}</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<div class="imgBook">
<img src="${image}">
</div>
</div>
<div class="mb-3">
<p><label for="book-content" class="boldText">줄거리</label></p>
<p><text>${desc}<</text></p>
</div>
<div class="mb-3">
<p><label for="message-text" class="boldText">감상평</label></p>
<p><select class="form-select" id="inputGroupSelect01">
<option selected>-- 선택하기 --</option>
<option value="1">⭐</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="5">⭐⭐⭐⭐⭐</option>
</select></p>
<p><textarea class="form-control" id="message-text"></textarea></p>
</div>
</form>
</div>
<div class="modal-footer">
<!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button> -->
<button type="button" class="btn btn-primary">저장</button>
</div>
</div>
</div>
</div>
<!-- 모달 끝 -->
<div class="card-body">
<h5 class="card-title" name="title">${title}</h5>
<p>${desc}</p>
<p>출간일 : ${pubDate}</p>
<p>저자 : ${author}</p>
</div>
</div>
</div>
`
$('#cards-box').append(temp_html)
})
})
}
이렇게 코드를 짜니 메인페이지 책 목록에 첫 번째로 뜨는 책은 누르면 모달 창이 뜨면서 제대로 데이터 전달이 되었다.
하지만 문제는 그다음 순서에 있는 책들을 눌러도 전부 첫 번째에 있던 책 정보로만 뜬다는 것이었다.
몇 시간 동안 삽질을 하다 보니
${변수} 로 데이터가 들어오게끔 뚫어놔도 Modal 창 속성 안에 ID 값이 변하지 않아서 페이지가 렌더링 되면서 첫 번째로 불러오는 변수들로 고정이 되는 문제였다.
https://okky.kr/questions/413416
OKKY - modal 질문드립니다.
modal에 db 데이터를 반복문으로 나타내려고 합니다. 테이블에 forEach문으로 데이터를 뿌려주었고, 상세보기 버튼을 클릭하면 그 행에 해당하는 매장명을 받아와야하는데 다른 행의 버튼을 눌렀을
okky.kr
그럼 ID 값도 foreach 문이 돌 때마다 바뀌어야 하는데
forEach 문
var arr = ['A', 'B', 'C', 'D']
arr.forEach(function(item, index, arr2){
})
// item : 배열의 구성 요소 (필수)
// index : 배열의 index (선택)
// arr2 : 또 다른 배열 (선택)을 살펴보면 index 인자가 있어서 위 링크에 있는 대로 적용시키려 했지만 제대로 된 문법이 아직 숙지가 안되어서 그런지 어떤 식으로 변수를 적용해도 에러가 떴었다...
https://laracasts.com/discuss/channels/laravel/how-to-use-modal-in-at-foreach-loop
https://laracasts.com/discuss/channels/laravel/how-to-use-modal-in-at-foreach-loop
laracasts.com
https://learn.microsoft.com/en-us/answers/questions/698656/using-javascript-open-modal-in-foreach
Using JavaScript: Open Modal in foreach - Microsoft Q&A
Hi, My Controller is successfully return a data My foreach as a following. It contains - Click to Open Modal when User click " TenderName " ![165806-a-111.png][1] This is a script to Open Modal ![165861-a-112.png][2] It…
learn.microsoft.com
🔎 modal foreach id: Google 검색
www.google.com
정말 여러 가지를 참고하고 적용시켜보려 했지만 에러는 사라지지 않았고 시간은 점점 늦어져 새벽 6시쯤 되어서야 포기하고 잠에 들었다.
'개발 ━━━━━ > TIL' 카테고리의 다른 글
| [TIL] Java 자료형과 Git 협업 (fork vs clone) (0) | 2023.08.15 |
|---|---|
| [TIL] 미니 프로젝트 3일차 -완- (0) | 2023.08.11 |
| [TIL] 미니 프로젝트 2일차 (0) | 2023.08.10 |
| [TIL] Programmers SQL 문제 풀이 (0) | 2023.08.07 |
| [TIL] Programmers SQL 문제 풀이 (0) | 2023.08.07 |