Project/축구모임 홈페이지개발
[축구모임 홈페이지개발] 12/12 개발일지 Nodejs css / 구글폰트적용, 여러개의 변수 쿼리전달, 검색창디자인변경
한33
2023. 12. 12. 23:00
우선 폰트 문제를 해결하기 위해서 구글폰트에서 폰트를 새로 지정했고,
<link
rel="stylesheet">
font-family: 'Noto Sans KR', sans-serif;
위 코드들을 추가해주면서 폰트를 통일시켰다.
그리고 두께별로 한 번에 추가해서 font-weight : 300 ; 와 같이 두께를 조절할 예정.
<form action="/notice-search" method="GET">
<div class="search-area">
<div class="search-container">
<img
src="https://ik.imagekit.io/wlalafg7g/GoalPostAgain/notice/%EA%B2%80%EC%83%89.png?updatedAt=1702379922187"
alt="search" class="search-icon">
<input type="text" name="search" class="search-input" id="search-input" placeholder="검색어입력" autocomplete="off">
<img
alt="clear" class="clear-icon" onclick="clearInput()">
</div>
</div>
</form>
디자인팀에서 검색기능의 디자인 수정요청을 해서
.search-container {
background-color: #f0f0f0;
padding: 10px;
display: flex;
align-items: center;
width: 95%;
margin: -1px auto 25px auto;
border-radius: 7px;
}
.search-icon {
width: 20px; /* 돋보기 이미지의 크기에 맞게 조절 */
margin-right: 10px;
}
.search-input {
flex: 1;
padding: 5px;
border: 1px solid #f0f0f0;
border-radius: 5px;
background-color: #f0f0f0;
font-size: 18px;
}
.clear-icon {
width: 20px; /* x 표시 이미지의 크기에 맞게 조절 */
margin-left: 10px;
cursor: pointer;
}
이렇게 완성해놨다.
검색 버튼을 없애는 대신 엔터키를 누르면 검색이 되길 원했고, 그래서 나는 onclick 속성을 없애고 전에 form 태그로 공지사항 작성을 하던 때가 떠올라서 form 태그를 여기서 활용했다.
또 오른쪽에 x 표시 이미지를 누르면 input 태그 안의 내용이 없어지도록
function clearInput() {
document.getElementById('search-input').value = '';
}
위 함수도 추가해주었다.
위 함수를 추가하던 도중에 알게 된 점은
위에서 타겟한 search-input 앞에 . 을 붙이면 class 이름을 타겟하는 것이다.!
홈 화면에 이미지를 띄워놨는데, 메뉴바를 열 때 메뉴바가 이미지 뒤로 열리는 현상이 발생했다.
찾아보니까 항상 맨 위로 올라오게 우선순위를 설정하는 속성이 있었다.
z-index: 100;
메뉴바 클래스에 위의 속성을 추가해주어서 우선순위를 최상위로 올렸다.
mvp 선정 과정에서 날짜를 입력해서 이미지 위에 띄우게 할 필요가 있었다.
function showMVP() {
var WeeklyMVPSelect = document.getElementById("WeeklyMVPSelect");
var selectedMVP = WeeklyMVPSelect.options[WeeklyMVPSelect.selectedIndex].text
var month = document.getElementById("mvp-date-month").value;
var day = document.getElementById("mvp-date-day").value;
switch (selectedMVP) {
case 'ㄱㄱㄱ':
var selectedMVP = `<div style="color:red">${WeeklyMVPSelect.value}</div><div class="mvp-area"><img
</div>`
break
case 'ㅈㅈㅈ':
var selectedMVP = `<div style="color:red">${WeeklyMVPSelect.value}</div><div class="mvp-area"><img
</div>`
break
case 'ㅇㅇㅇ':
var selectedMVP = `<div class="overlay-text">${month}.${day}</div>
<div class="mvp-area"><img
</div>`
break
case 'ㅂㅂㅂ':
var selectedMVP = `<div style="color:red">${WeeklyMVPSelect.value}</div><div class="mvp-area"><img
</div>`
break
default:
break
}
location.href = `/mvp?val=${encodeURIComponent(selectedMVP)}&month=${encodeURIComponent(month)}&day=${encodeURIComponent(day)}`;
}
그러다보니 월, 일, 선택된 사람 이렇게 세 개의 변수가 필요했고, 쿼리로 복수의 변수를 전달하는데에는
location.href = `/mvp?val=${encodeURIComponent(selectedMVP)}&month=${encodeURIComponent(month)}&day=${encodeURIComponent(day)}`;
위처럼 여러개의 변수를 보낼 수 있었다.
app.get('/mvp', async (req, res) => {
let result = db.collection('mvp').insertOne({
mvp: req.query.val,
month : req.query.month,
day : req.query.day
})
res.redirect('/')
})
그 값을 DB 에 저장시켰고
app.get('/', async (req, res) => {
let result = await db.collection('mvp').find().sort({ _id: -1 }).limit(1).toArray();
let Weeklymvp = result.length > 0 ? result[0].mvp : null;
let navi = await db.collection('navi').find().sort({ _id: -1 }).limit(1).toArray();
res.render('home.ejs', { MVP: Weeklymvp, 목적지: navi[0] });
})
홈 화면에 MVP 변수값으로 출력시켜서 기능을 구현했다.