홈 화면에 남은 마지막 탭인 MVP Board 탭을 css 로 구현했다. 시즌 MVP 를 뽑기위해서 누적된 MVP 포인트와 순위를 보기 위함이다.
<div class="MvpBoard-Container">
<div class="MvpBoard-title">
MVP BOARD
</div>
<div class="MvpBoard-menu">
<div style="width: 20%; text-align: center;">RANK</div>
<div class="MvpBoard-bar"></div>
<div style="width: 60%; text-align: center;">NAME</div>
<div class="MvpBoard-bar"></div>
<div style="width: 20%; text-align: center;">SCORE</div>
</div>
<div class="MvpBoard-area">
<div class="MvpBoard-area-rank">01</div>
<div class="MvpBoard-area-name">ㅇㅇㅇ</div>
<div class="MvpBoard-area-rank">265</div>
</div>
위와 같이 html 코드고, MvpBoard-area 영역이 인원수만큼 복사붙여넣기를 했다.
근데 개발일지를 쓰다보니 반복문으로 그냥 만들어도 괜찮겠다는 생각이 들었다.
아직 디자인만 해놓은 상황이라서 서버랑 js 로 기능을 구현할 때 시도해봐야겠다.
.MvpBoard-Container {
margin-top: 50px;
width: 95%;
margin: 30px auto 100px auto;
}
.MvpBoard-title {
color: white;
font-size: 300%;
font-weight: 800;
text-align: center;
margin-bottom: 5px;
}
.MvpBoard-menu {
background-color: white;
display: flex;
color: #002832;
font-size: 120%;
font-weight: 500;
padding: 10px 0px 10px 0px;
margin-bottom: 20px;
}
.MvpBoard-bar {
width: 1px;
background-color: #002832;
}
.MvpBoard-area {
color: #002832;
font-size: 120%;
font-weight: 500;
text-align: center;
display: flex;
margin-bottom: 5px;
}
.MvpBoard-area-rank {
width: 20%;
background-color: #002832;
padding: 10px 0px 10px 0px;
color: white;
border: 2px solid white;
}
.MvpBoard-area-name {
width: 60%;
background-color: white;
padding: 10px 0px 10px 0px;
}
@media only screen and (max-width: 1000px) {
.MvpBoard-title {
font-size: 200%;
}
.MvpBoard-menu {
font-size: 80%;
padding: 5px 0px 5px 0px;
margin-bottom: 10px;
}
.MvpBoard-area {
font-size: 80%;
font-weight: 500;
margin-bottom: 3px;
}
.MvpBoard-area-rank {
width: 20%;
padding: 5px 0px 5px 0px;
}
.MvpBoard-area-name {
width: 60%;
padding: 5px 0px 5px 0px;
}
}
MVP Board 탭의 css코드.
매치일정 탭이다. 얼마 전에 삼성 플립 유저들이 작은 화면으로 접속할 때 장소 안내글씨가 아래로 밀리는 현상이 있어서 이를 플립 전용으로 하나 짰는데, 넓은 화면으로 접속할 때 역시 아래로 밀리는 현상이 발견됐다.
플립이 문제다 ㅜ 추가로 플립으로 볼 때 경기일정에서 오늘도골대FC 폰트 사이즈 줄여야하고 2자리수 득점 - 2자리수 득점 같은 경우에도 화면 구성이 밀리니까 확인하고 수정하자.
<div class="main-planmatch-datefont">
24. <%=매치일정[0].month %>. <%=매치일정[0].date %> (금)
</div>
<div class="planmatch-result-area">
<div class="planmatch-result-vs">
vs
</div>
<div class="planmatch-result-scorebox">
<div class="planmatch-result-teamarea1">
<div>
<img class="planmatch-result-scorebox-teamlogo1"
alt="오늘도골대FC로고">
</div>
<div class="planmatch-result-teamfont">
오늘도골대FC
</div>
</div>
<div class="planmatch-time">
<%=매치일정[0].time %>-<%=매치일정[0].timeto %>
</div>
<div class="planmatch-result-teamarea2">
<div>
<img class="planmatch-result-scorebox-teamlogo2"
alt="상대팀로고">
</div>
<div class="planmatch-result-teamfont">
<%=매치일정[0].awayteam%>
</div>
</div>
</div>
<div class="planmatch-place">
<img class="planmatch-place-logo"
alt="place">
<div>
<%=매치일정[0].place %>
</div>
<div onclick="copyToClipboard()" class="planmatch-place-copy" id="planmatch-place-copy">
복사
</div>
</div>
</div>
원래 서버에서 /navi 엔드포인트를 통해서 네이버 지도로 확인하는 기능을 넣었었는데, 아래 이미지와 같이 그냥 이번 주 매치에 대한 정보를 입력할 때 한번에 주소값까지 넣게 해서 하나의 MongoDB 영역에서 정보들을 관리하고 불러올 수 있게 시스템을 수정해줬다.
<form class="form-box" action="/match-plan" method="POST">
<div>
<h4>이번 주 매치</h4>
<div>
24년
<input class="management-input" type="text" name="planmonth" placeholder="00">월
<input class="management-input" type="text" name="plandate" placeholder="00">일
<br>
시간 : <input class="management-input2" name="plantime" type="text" placeholder="00:00"> - <input class="management-input2" name="plantimeto" type="text" placeholder="00:00">
<br>
상대팀명 : <input class="management-input3" type="text" name="planawayteam" placeholder="상대팀명">
<br>
장소 : <input class="management-input3" type="text" name="planplace" placeholder="풋살구장 이름">
</div>
</div>
<div>
<div style="height: 160px;">
주소 : <input id="navi_address" style="width: 200px;" name="planaddress" type="text" placeholder="주소">
<div>현재 저장된 주소 : <%=매치일정[0].address%>
</div>
<button type="submit">등록</button>
</div>
</div>
</form>
placeholder = "" 속성을 이용해서 입력시에 원하는 식으로 입력을 할 수 있게 유도했다.
app.post('/match-plan', async (req, res) => {
let result = db.collection('matchplan').insertOne({
month: req.body.planmonth,
date : req.body.plandate,
time : req.body.plantime,
timeto : req.body.plantimeto,
awayteam : req.body.planawayteam,
place : req.body.planplace,
address : req.body.planaddress
})
res.redirect('/')
})
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 match_result = await db.collection('result').find().sort({ _id: -1 }).toArray();
let matchplan = await db.collection('matchplan').find().sort({ _id: -1 }).toArray();
res.render('home.ejs', { MVP: Weeklymvp, 매치일정: matchplan, result : match_result });
})
개발일지를 쓰면서 또 생각이 든건데, 위에서 보면 mvp 데이터를 가져올 때 limit(1) 속성을 이용해서 DB 로 부터 가장 최근의 값만 가져왔다.
match_result 같은 경우는 홈 화면에서 최근 3개의 매치를 가져와야해서 속성을 안넣었는데, 결국 데이터가 쌓이다보면 싹 다 가져와서 그 중 3개를 html 상에서 처리하는 것 보다 애초에 불러올 때 3개만 가져와서 처리하는 게 더 속도면에서 이득을 볼 수 있지 않을까 하는 생각이 들었다.
마찬가지로 matchplan 같은 경우는 가장 최근 1개의 데이터만 있으면 되기 때문에 limit(1) 을 넣어봐야겠다.
'Project > 축구모임 홈페이지개발' 카테고리의 다른 글
| [축구모임 홈페이지개발] 01/03 개발일지 Nodejs / MVP Board 기능구현 (0) | 2024.01.04 |
|---|---|
| [축구모임 홈페이지개발] 01/02 개발일지 Nodejs / 딕셔너리,new Map(); (2) | 2024.01.03 |
| [축구모임 홈페이지개발] 12/28 개발일지 Nodejs css / Z플립 전용 반응형 버전 개발 (0) | 2023.12.28 |
| [축구모임 홈페이지개발] 12/26 개발일지 Nodejs css / 홈화면 경기결과 탭 배치 수정 (2) | 2023.12.28 |
| [축구모임 홈페이지개발] 12/25 개발일지 Nodejs / 회원가입, 로그인페이지 구현, 로그인 예외처리 (0) | 2023.12.25 |
