2023. 6. 29. 22:25ㆍTIL/2023.6월
2023.06.29 목
배포 전 페이지를 사용해보며, 수정사항을 찾고 수정하는 작업을 했습니다.
| index.html | 1.margin bottom |
| profile-eventbookmark.html | 2.행사 카드에 커서 포인트 주기 |
| ‘’ | 3.해당 공연 이미지로 변경 필요 현재는 디폴트 이미지가 출력 |
| event.html | 4.main-page 공간 이미지에도 불투명도 검은 배경 깔아주기 |
| event-detail.html | 5.비로그인 댓글 입력 시도 시 경고문 추가 |
| index.html | 6.margin bottom 설정필요!(큐레이션 항목이 네비바에 가려지는 문제)<-1과 동일 |
| 7.비로그인시 좋아요 아이콘 이미지가 이상 | |
| 8.좋아요, 북마크 아이콘 클릭 시 행사 상세페이지로 이동 | |
| 9.커서 포인트 수정 필요 |
1.margin bottom
[문제]
데이터가 카드 형식으로 저장되면, 종종 최하단에 위치한 카드가 네비바에 묻혀 컨텐츠가 가려져 출력되는 현상이 있습니다.
[해결]
/* ------ 하단 메뉴 아이콘으로 인해 가려지는 공간 확보 ------ */
.mb120px {
padding-bottom: 120px;
}전역적으로 사용이 가능 경로에서 해당 코드를 사용하여 해결하였습니다.
2.행사 이미지에 커서 속성 변경
[문제]
컨텐츠 카드를 클릭하여 해당 행사의 상세페이지로 이동할 수 있습니다.
모바일 환경에서는 문제가 없지만, 컴퓨터를 사용하여 페이지에 접속한다면, 클릭이 되는 곳은 커서의 형태를 변경시켜 사용자가 판단하기 쉬워야 합니다.
[해결]
해당 카드 영역을 꾸미는 css에 커서 속성을 수정해주어 해결했습니다.
cursor: pointer.contant-page .sub-card img{
width: 100%;
height: 300px;
object-fit: cover;
border-radius: 10px;
cursor: pointer
}pointer는 지정한 위치에 커서를 가져다 되면 손가락 모양으로 바뀌어 통상적인 클릭이 가능한 것을 나타내는 모양으로 변경됩니다.
3.해당 공연 이미지로 변경 필요 현재는 디폴트 이미지가 출력
[문제]
북마크 페이지에 있는 북마크된 행사들 모두 자신만의 이미지를 가지고 있습니다.
지금 보이는 이미지는 디폴트 이미지이기에 이것을 변경해주어야 합니다.
[해결]
이 부분은 이미 구현되어 있었으며, 초기 테스트 때에는 행사를 생성할 때 이미지를 넣지 않고 생성하였습니다. 그랬기에 디폴트 이미지를 사용하였고 주석처리된 구현된 기능을 주석 해제하여 해결하였습니다.
const event_img = document.createElement('img')
// event_img.setAttribute('src',`${backend_base_url}${events.image}`)
event_img.setAttribute('src', "/assets/img/image-2.jpg")(주석된 것이 해당 행사의 이미지를 가져오는 것 입니다.)
4.main-page 공간 이미지에도 불투명도 검은 배경 깔아주기
위의 큰 부분이 main-page이고 아래 부분이 sub-page입니다.
보시는 것 처럼 같은 사진이여도 백그라운에 색을 넣어주냐, 아니냐에 따라 차이가 있습니다.
또한 컨텐츠 내용을 표시하는 것들이 흰색이기에 배경이 흰생 계통인 행사사진이 들어간다면, 가독성을 심하게 떨어뜨리게 됩니다.
[해결]
팀 내 회의결과 수정하지 않는다 쪽으로 결정이나서 수정하지 않게 되었습니다.
1.main-page는 행사 상세페이지 처럼 행사 이미지를 크게 볼 수 있는 공간으로 사용하고 싶기에 뒷배경 색을 바꾸지 않았으면 한다.
2.행사 데이터를 넣어주는 것은 어드민(관리자)이다, 우리가 데이터를 만들 때, 흰색 계통의 사진을 피해서 넣으면 문제없다.
나온 의견이 타당하다 생각하여 의견을 수용하였습니다.
5.비로그인 댓글 입력 시도 시 경고문 추가
[문제]
기존에는 별도의 에러메시지를 출력하지 않았습니다.
async function HandleComment() {
const select_grade = document.getElementById('grade').value;
const in_img = document.getElementById('in_img').files[0];
const com_txt = document.getElementById('com_txt').value;
const grade = select_grade.split('')[0]
const formdata = new FormData();
formdata.append("grade", grade)
formdata.append("review_image", in_img)
formdata.append("content", com_txt)
const response = await fetch(`${backend_base_url}/events/${event_id}/review/`, {
headers: {
"Authorization": `Bearer ${token}`,
},
method: 'POST',
body: formdata
})
if (response.status == 201) {
alert("작성되었습니다.")
window.location.reload()
} else {
(response.status)
}그냥 요건이 충족하였을 때, 작성되었습니다. 메시지를 출력해주고 새로고침 시켜 리뷰를 등록시켜 주었습니다.
그렇기에 충족해야 할 데이터 형태를 갖추지 못했을 때, 비로그인 시 리뷰를 작성하려고 할 때,
등록 버튼을 아무리 눌러도 아무 반응도 하지 않는 상태였습니다.
이 경우 사용자가 무엇 때문에 페이지가 작동하지 않는지 파악하지 못해, 불편함을 느낄 수 있기에 이 부분을 수정해 주었습니다.
[해결]
async function HandleComment() {
const select_grade = document.getElementById('grade').value;
const in_img = document.getElementById('in_img').files[0];
const com_txt = document.getElementById('com_txt').value;
const grade = select_grade.split('')[0]
const formdata = new FormData();
formdata.append("grade", grade)
formdata.append("review_image", in_img)
formdata.append("content", com_txt)
const response = await fetch(`${backend_base_url}/events/${event_id}/review/`, {
headers: {
"Authorization": `Bearer ${token}`,
},
method: 'POST',
body: formdata
})
if (response.status == 201) {
alert("작성되었습니다.")
window.location.reload()
} else if (response.status == 400) {
alert("내용이 필요합니다.")
(response.status)
}
else{
alert("로그인이 필요합니다.")
}
}모든 요건(데이터 형태, 로그인 상태)을 갖추어 데이터를 보내주었을 때, 백엔드 측에서 201상태메시지를 줍니다.
if 조건문에서 해당 201 상태메시지를 받으면 alert으로 작성되었습니다. 메시지를 출력합니다.
보내야 할 데이터의 형태를 갖추지 못해(별점, 내용, 이미지를 입력하지 않을 경우) 잘못된 요청인 것을 표현하는 400 상태메시지를 받을 경우 내용이 필요합니다. alert을 출력합니다.
그 이외의 상태에서는 로그인이 필요합니다 메시지를 출력하여, 사용자가 이후 어떻게 행동해야 하는지 알려줍니다.
6.margin bottom 설정필요!(큐레이션 항목이 네비바에 가려지는 문제)
이 문제의 경우 중복된 문제였기에 해결되었습니다.
7.비로그인시 좋아요 아이콘 이미지가 이상
8.좋아요, 북마크 아이콘 클릭 시 행사 상세페이지로 이동
이 문제의 경우 해당 요소(좋아요 아이콘, 북마크 아이콘)를 제거하여 해결하였습니다.
9.커서 포인트 수정 필요
[문제]
북마크 페이지와 마찬가지로 index.html에 있는 컨텐츠 카드에 커서 속성이 default값으로 지정 되어 있었습니다.
[해결]
마찬가지로
cursor: pointer코드를 css에 넣어주어 해결했습니다.
[느낀점]
정말 마지막 단계까지 왔다 느껴집니다.
특히 프론트 부분이 많이 늘었다 생각될 정도입니다.
배포 이후 들어오는 피드백을 보며, 제가 생각하지 못했던 부분이나, 기술적인 한계로 미뤄두었던 문제 등을 구현하고 해결해야 할 것입니다.
현재 하나 둘 캠프 내 다른 팀에서 배포를 시작하고 있는 상황입니다.
처음 팀원들과 만든 결과물을 외부에 공개하는 것이니 솔직히 많이 떨리고 기대됩니다.
'TIL > 2023.6월' 카테고리의 다른 글
| TIL 최종프로젝트(18) 배포전 수정2 (1) | 2023.07.04 |
|---|---|
| TIL 최종프로젝트(16) 제네릭 사용 시 주의 (0) | 2023.06.28 |
| TIL 최종프로젝트(15) 프론트엔드 수정 (0) | 2023.06.28 |
| TIL 최종프로젝트(14) 코드 업그레이드? (0) | 2023.06.28 |
| TIL 최종프로젝트(13) 즐거운 css(사실아님) (0) | 2023.06.24 |