주요 기능
- 팀원 프로필 css 호버 애니메이션
- 방명록 글 저장, 수정, 삭제 구현
- 방명록 수정, 삭제 시 비밀번호 입력
- 반응형 디자인
구현 기능
- input value 값이 없을 경우 '내용이 없습니다' alert 창 띄우기
- 삭제 버튼 클릭 시 '삭제하시겠습니까' 모달 창 띄우기
- db에 저장된 방명록 조회 -> ajax 제이쿼리를 사용해 html 동적 수정
배포 링크
내가 맡은 작업
1. 웹페이지 디자인
-
항해99에서 앞으로 할 프로젝트들은 볼륨이 커져서 해보고 싶은 디자인을 마음껏 하기에 마지막 기회라는 생각이 들었다. 글래스모피즘 ui 디자인을 적용해보고자 하였는데 백그라운드가 이미지가 아니라 그라데이션이 들어갔기 때문에 글래스모피즘을 느끼기엔 어렵다.
-
header를 sticky로 상단에 고정시켜놓았다. 버튼이 스크롤을 왔다갔다 하면서 뒤의 ui 요소가 blur 됨을 확인 할 수 있다.
-
입체적인 ui에 맞게 hover, focus 애니메이션 효과를 추가하였다.
/* 방명록 내용 입력 박스 css style */
.save-box .comment-box{
width: 100%;
height: 100px;
background: rgba(255, 255, 255, 0.2);
border-left: 2px solid rgba(255, 255, 255, 0.3);
border-top: 2px solid rgba(255, 255, 255, 0.3);
box-shadow: 0px 0px 60px rgba( 0, 0, 0, 0.1 );
backdrop-filter: blur(5px);
transition: all 0.2s ease-in-out;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
color: #fff;
}
.save-box .comment-box::placeholder{
color: #fff;
}
.save-box .comment-box:hover{
box-shadow: 0px 0px 10px rgba( 0, 0, 0, 0.2 );
}
.save-box .comment-box:focus{
border-left: 2px solid rgba(0, 0, 0, 0.5);
border-top: 2px solid rgba(0, 0, 0, 0.5);
background: rgba(255, 255, 255, 0.1);
box-shadow: 0px 0px 10px rgba( 0, 0, 0, 0.1 );
}2. 방명록 html & css + 반응형 디자인
- 이전까지
table태그를 써보고 싶어서 방명록 html & css를 맞았다. .txt-box의 내용이 넘쳐서 높이가 다른 열과 달라지면td태그 안에 넣은button태그들이 다른tr의 자식요소들과 높이를 맞추지 않는 문제가 있다.
<section class="guestbook">
<h2>방명록</h2>
<div class="save-box">
<p>방명록을 남겨보세요~</p>
<div class="input-com">
<input id="name-box" class="name-box" type="text" placeholder="닉네임을 입력해주세요" />
<input id="pw-box" class="pw-box" type="text" placeholder="비밀번호를 입력해주세요!" />
<input
id="comment-box"
class="comment-box"
type="text"
placeholder="내용을 입력해 주세요."
/>
<button onclick="save_comment()">방명록 남기기</button>
</div>
</div>
<div class="content-box">
<table>
<thead>
<tr>
<th class="num">넘버</th>
<th class="user">user</th>
<th class="comment">내용</th>
<th class="date">기록날짜</th>
<th class="btn-thead">수정/삭제</th>
</tr>
</thead>
<tbody id="comments-box">
<tr>
<td>1</td>
<td>홍길이</td>
<td class="txt-box bf">잘 보고 갑니다.</td>
<td class="update-input-box af">
<input
class="comment-update"
type="text"
placeholder="수정을 입력해 주세요."
/>
<input id="pw-update" type="text" placeholder="비밀번호" />
</td>
<td>2023.06.07 1시</td>
<td class="btn-box btn-before bf">
<button onclick="update_btn(this)" class="btn-click">수정</button>
<button onclick="delete_btn()" class="btn-click">삭제</button>
</td>
<td class="btn-box btn-after af">
<button onclick="update_scc()" class="btn-click">수정 완료</button>
<button onclick="update_cancle()" class="btn-click">수정 취소</button>
</td>
</tr>
</tbody>
</table>
</div>
</section>
3. db에 저장된 방명록 조회 -> ajax 제이쿼리를 사용해 html 동적 수정
function listing() {
fetch('/guestbook')
.then((res) => res.json())
.then((data) => {
let rows = data['result'];
$('#comments-box').empty();
rows.forEach((a) => {
let id = a['id'];
let name = a['name'];
let comment = a['comment'];
let date = a['date'];
let temp_html = `
<tr>
<td>${id}</td>
<td>${name}</td>
<td class="txt-box bf" >${comment}</td>
<td class="update-input-box af">
</td>
<td class="date-txt">${date}</td>
<td class="btn-box btn-before bf">
<button onclick="update_btn(this)" class="btn-click">수정</button>
<button onclick="delete_btn(${id})" class="btn-click">삭제</button>
</td>
<td class="btn-box btn-after af">
<button onclick="update_scc(${id})" class="btn-click">수정 완료</button>
<button onclick="update_cancle()" class="btn-click">
수정 취소
</button>
</td>
</tr>
`;
$('#comments-box').append(temp_html);
});
});
}4. 방명록 입력된 정보를 app.py로 보내기
function save_comment() {
let name = $('#name-box').val();
let comment = $('#comment-box').val();
let Pw = $('#pw-box').val();
console.log(Pw);
let formData = new FormData();
formData.append('name_give', name);
formData.append('comment_give', comment);
formData.append('password_give', Pw);
fetch('/guestbook', { method: 'POST', body: formData })
.then((response) => response.json())
.then((data) => {
let msg = data['msg'];
if (msg.includes('내용')) {
alert(msg);
} else {
alert(msg);
window.location.reload();
}
});
}5. 방명록 수정 버튼 클릭 -> ui 교체
- 수정 버튼을 누르면 방명록 내용이 있던
.txt-box에 수정 내용 + password 입력창이 나오도록 ui가 수정된다. - 처음에는 js로 html을 직접 수정하려 하였으나 css로 해결을 하기로 방향을 틀었다.
수정 버튼을 누르면
#choose가 붙는다
#choose이 붙은update-input-box에#comment-update을 생성한다
- 사전에 정의된 css
.update-input-box{
display: none;
}
#choose .update-input-box{
display: flex;
padding: 0;
}- css에 id를 삭제하거나 생성함으로서 html을 조작
function update_btn(e) {
$('#choose').removeAttr('id');
let gran_parent = $(e).parent().parent();
gran_parent.attr('id', 'choose');
let temp_html = `
<input
id="comment-update"
type="text"
placeholder="수정을 입력해 주세요."
/>
<input id="pw-update" type="text" placeholder="비밀번호" />
`;
$('#choose .update-input-box').append(temp_html);
}
function update_cancle() {
$('#choose').removeAttr('id');
$('#comment-update').remove();
$('#pw-update').remove();
}- 수정 완료 버튼을 누르면 정보가
app.py로 보내짐
function update_scc(a) {
let num = a;
let ucomment = $('#comment-update').val();
let pw = $('#pw-update').val();
let formData = new FormData();
formData.append('id_give', num);
formData.append('ucomment_give', ucomment);
formData.append('password_give', pw);
fetch('/update', { method: 'POST', body: formData })
.then((response) => response.json())
.then((data) => {
let msg = data['msg'];
if (msg.includes('내용')) {
alert(msg);
update_cancle();
} else {
alert(msg);
update_cancle();
window.location.reload();
}
});
}