TIL 최종프로젝트(13) 즐거운 css(사실아님)

2023.06.23 금

 

오늘 한 일

1. 북마크, 좋아요 유무에 따라 해당 아이콘 이미지를 구분하여 사용자 편리성을 높임

2. 공연 리스트에서 상세 페이지로 이동하기 위해 해당 공연의 이미지를 클릭 할 때, 마우스 커서 기능을 사용하여, 이동 가능 위치와 그렇지 않은 위치를 구분하여 사용자 편리성을 높임

3. 삭제하기 버튼 css를 추가하여 좀 더 나은 페이지를 만듬

 

 -북마크, 좋아요 유무에 따라 해당 아이콘 이미지를 구분하여 사용자 편리성을 높임

하는 방법을 찾다가 이미 구현해주신 팀원분의 것을 가져와, 조금 변경하여 사용했습니다.

#좋아요
  heartElement.className = 'heart';
  heartIconElement.src = '/assets/img/Heart-outline.svg';
  heartIconElement.alt = '';
  if (response_json.likes.includes(payload_parse.user_id)) {
    heartIconElement.setAttribute("src", "/assets/img/Heart-full.svg")
  } else {  
    heartIconElement.setAttribute("src", "/assets/img/Heart-outline.svg")
  }
#북마크
  bookmarkElement.className = 'bookmark';
  bookmarkIconElement1.id = 'bookmarkIcon';
  bookmarkIconElement1.src = '/assets/img/Bookmark-outline.svg';
  bookmarkIconElement1.alt = '';
    if (response_json.event_bookmarks.includes(payload_parse.user_id)) {
    bookmarkIconElement1.setAttribute("src", "/assets/img/Bookmark-full.svg")
  } else {  
    bookmarkIconElement1.setAttribute("src", "/assets/img/Bookmark-outline.svg")
  }

토큰에 담긴 user_id를 가지고 좋아요와 북마크에 해당 user_id가 있는지 비교 후 북마크, 좋아요 유무에 따라 아이콘 이미지를 변경시켜 줍니다.

속이 가득 차면 user_id가 있을 때, 속이 비웠다면, user_id가 없다는 것을 표현합니다.

+) 즉각적인 반영을 위해 기존에는 alert을 이용하여 표현해 주었지만, 리로드를 하지 않아 좋아요의 숫자나 아이콘의 이미지가 바로 반영되지 않았습니다.

window.location.reload()

모든 함수 끝에 window.location.reload()를 넣어주어 좋아요와 북마크 시alert창을 띄우고 페이지를 리로드 시켜 변경점을 바로 반영시켜주었습니다.

 

-공연 리스트에서 상세 페이지로 이동하기 위해 해당 공연의 이미지를 클릭 할 때, 마우스 커서 기능을 사용하여, 이동 가능 위치와 그렇지 않은 위치를 구분하여 사용자 편리성을 높임

 

이부분에는 기능적인 변경은 없었습니다, 더 나은 방법을 찾기 위해 의논을 한 결과, 제가 맡은 부분에서는 변화를 주지 않는 것이 좋겠다는 결론이 나와 수정이 없었습니다.

단, 사용성을 높이기 위해 클릭이 가능한 범위에 마우스가 들어오면 커서의 모양을 변경하여 구분시켜주는 코드를 추가시켜 주었습니다.

가장 넓은 img를 클릭 시 해당 id의 상세페이지로 이동

빨간 박스 영역은 이미지 영역의 위에 위치하기 때문에 저 범위를 클릭한다면, 상세페이지로 넘어가지 않습니다.

해당 빨간 박스 영역을 최소화 시키고자 했고 css를 확인한 결과

.sub-card .sub-card-txt {
    position: absolute;
    bottom: 0;
    left: 30px;
    width: 300px;
    margin-bottom: 30px;
    color: #fff;
}

해당 영역의 width가 300px로 고정되어 있었습니다.

 

찾아보니 

width: max-content;

이것을 사용하면, 내부 컨텐츠의 최대만큼 width범위를 가져가니 최소화 할 수 있다 생각하였지만, 상의 결과 공연 타이틀의 길이가 매우 길어질 경우 빨간 박스 영역도 사이즈를 벗어나 생성되기에 고정값을 넣어 관리하는 것으로 결정하였습니다.

.contant-page .sub-card img{
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;

}

cursor: pointer을 주어 img에 커서가 들어올 경우 변경하여 사용성을 높였습니다.

 

-삭제하기 버튼 css를 추가하여 좀 더 나은 페이지를 만듬

 

1. js에서 style을 사용하여 꾸미는 것을 event-detail.css에서 구현 

#event-detail.css

.deletebtn {
    line-height: 0.25;
    width: 70px;
    height: 30px;
    padding: 0px;
    font-size: 14px;
    position: absolute;
    bottom: 0;
    margin-bottom: 13px;
    border: 1px solid rgb(51, 51, 51, 0.1);
    transition: border 0.25s;
}

.deletebtn:hover {
    border: 9px solid black;
  }

기존버튼

변경된 버튼

 

[느낀점]

css, js 어느정도 알 거 같습니다 감이 잡히는 거 같습니다.