어제 그제, bootstrap 으로 tooltip 을 구현하는데에 실패했다.
내 코드 안에서는 아무리 해도 구현이 안되었다.
그래도 그 과정에서 bootstrap 의 css 코드와 js 코드를 가져오는 방법을 더 자세히 알게 되었고,
tooltip 이나 popovers 그리고 그 둘을 사용하지 않을 때에 용량을 줄이기 위한 따로 불러오는 코드를 알았다.
버전도 신경써야한다는 것을 알았다.
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
우선 시간적으로 여유가 없어서 내가 직접 tooltip 을 만들기로 했다.
내 목표는 경기일정 탭에서 승패 이미지 영역인 match-result-logo 영역을 클릭 시에 아래에 해당 경기 때의 mvp 의 이름이
나오도록 설정할 것이다.
위에 WIN 버튼에 마우스를 갖다 대면 아래에 tooltip 이 뜨면서 MVP 이름이 나오게 할 거다.
<div class="match-result-resultlogo match-result-tooltip">
<%-result[i].resultlogo%>
<div class="match-result-tooltip-content">
이름
</div>
</div>
마우스를 갖다 댈 영역 안에 tooltip 영역을 하나 만들어주고,
.match-result-tooltip {
position: relative;
margin: auto;
width: 20%;
}
.match-result-tooltip .match-result-tooltip-content {
visibility: hidden;
height: 80%;
width: 50%;
font-size: 100%;
background-color: #ff3ca0;
padding: 0;
color: white;
text-align: center;
position: absolute;
z-index: 1;
top: 80%;
right: 25%;
opacity: 0;
transition: opacity 0.3s ease;
}
.match-result-tooltip:hover .match-result-tooltip-content { visibility: visible; opacity: 1 }
다음과 같이 css 코드를 짜줬다.
match-result-tooltip 에 hover 를 붙여서 visibility 속성을 visible 로 맞춰줬고,
서서히 드러나게 하기 위해서 opacity 속성도 이용해줬다.
마우스를 갖다댈 때마다 이처럼 아래 영역이 생기고 그 곳에 MVP 이름이 뜰 공간이 만들어졌다.
이제 DB 에서 관리를 해줘야하는데,
우선 MVP 를 등록하는 내 서버코드가 이미 존재한다.
이를 이용해서 경기결과 DB 에 하나의 항목을 더 만들고 MVP 가 선정이 되면 그 항목을 업데이트 해 나간다음,
그 데이터를 경기결과 탭에 가져와서 띄우게 할 계획이다.
선정이 안되어있는 상태에서는 미정 이라는 문구를 띄울 것이다.
( 최근 밖에서 돌아다니면서 생각해낸 방법. 제일 베스트라고 아직까지 생각 중 )
근데 문제가 있다.
기존에 나는 MVP 를 선정하고 해당 날짜와 홈 화면에서 이미지를 띄우기 위해 이미지 코드만 DB 로 전송시켜서 저장했었다.
하지만 이제 이름 값도 전달을 받아야하고 이름은 result 탭에 mvp 이름 으로 업데이트 시키는 식으로 해야한다
업데이트 로 하는 이유는 보통, 경기가 끝나고 경기결과를 올리는 시간 이후에 MVP 투표 후 MVP 선정되기까지
사이에 텀이 존재하기 때문이다.
case 'ㅇㅇㅇ':
var MVP_Name = 'ㅇㅇㅇ'
var selectedMVP = `<div class="overlay-text">${month}.${day}</div><div class="mvp-area"><img
</div>`
break
MVP_Name 변수를 추가로 전달하기 위해서 만들어주고 변수를 선언, option 이 선택되었을 때 해당 변수에 그 이름이 들어가도록 값을 설정,
location.href = `/mvp?val=${encodeURIComponent(selectedMVP)}&month=${encodeURIComponent(month)}&day=${encodeURIComponent(day)}&MVP_Name=${encodeURIComponent(MVP_Name)}`;
/mvp 엔드포인트로 데이터 값 전달.
데이터를 전달 받기 전에 사이에 텀에 사용자들에게 MVP 가 "미정" 이라고 알려주기 위해서, 또 그 위치로 업데이트 하기
위해서 경기결과 등록 때
app.get('/result', async (req, res) => {
let result = db.collection('result').insertOne({
month: req.query.month,
day: req.query.day,
day2: req.query.day2,
time: req.query.time,
place: req.query.place,
homescore: req.query.homescore,
awayscore: req.query.awayscore,
awayname: req.query.awayname,
resultlogo: req.query.resultlogo,
home_resultlogo: req.query.home_resultlogo,
mvp_name : '미정'
})
res.redirect('/match-result')
})
이처럼 미정 값을 넣어줬다.
app.get('/mvp', async (req, res) => {
// MVP 추가
let result = await db.collection('mvp').insertOne({
mvp: req.query.val,
month: req.query.month,
day: req.query.day,
mvp_name : req.query.MVP_Name
});
let query = { month: req.query.month, day: req.query.day };
let updateResult = await db.collection('result').updateOne(query, { $set: { mvp_name: req.query.MVP_Name } });
if(updateResult.modifiedCount === 1) {
console.log("업데이트 성공");
} else {
console.log("업데이트된 문서가 없음.");
}
res.redirect('/');
});
그 다음 위처럼 result 안에서 month 와 day 가 같은 곳을 찾아서 mvp_name 항목을 업데이트 해줬다.
이제 ejs 파일로 돌아와서
<div class="match-result-resultlogo match-result-tooltip">
<%-result[i].resultlogo%>
<div class="match-result-tooltip-content">
<%=result[i].mvp_name%>
</div>
</div>
이름이 들어갈 자리에 데이터 값을 넣어줬는데
잘 뜬다.
이거 년도 23년도 이거 뭐야;
해결해야겠다 이것도. 내일 출근해야하니까 내일한다.
