221217~1218_데이트 장소 다이어리 제작 11_HTML/CSS 수정 및 기타 기능 수정

해당 게시글은 개인 프로젝트인 "데이트 장소 다이어리 제작" 중
#36 "HTML/CSS 수정 및 기타 기능 수정" 이슈를 다루고 있습니다.

1. 진행 사항

(1) 요약

• 기타 기능 수정
  • 댓글 읽기 / 수정 기능 수정
  • 이미지 업로드 시 파일 용량 체크
  • 이미지 업로드하지 않았을 경우 별도 처리
• HTML/CSS 수정
  • 폰트 변경
  • 게시글 숫자에 따라 컨테이너 너비가 변경되는 점 수정
  • 버튼 컬러 스타일 변경
  • 텍스트 정렬
  • 일부 레이아웃 수정
  • 이미지 비율 조정 처리
  • 버튼 오류 수정
  • footer 추가

(2) 상세

• 이미지 업로드 시 파일 용량 체크

      const maxSize = 1 * 1024 * 1024;

      // 파일 업로드 버튼 클릭 시
      document.querySelector(".uploadBtn").addEventListener("click", function (e) {

          // 결과창에 있는 요소를 선택, 몇 개 존재하는지 확인
          if (document.querySelectorAll(".imageCard").length < 2) {

              const formObj = new FormData();

              const fileInput = document.querySelector("input[name='files']")

              const fileSize = fileInput.files[0].size;

              if(fileSize > maxSize) {
                  alert("첨부할 수 있는 이미지 파일은 1MB 이하여야 합니다.");
                  return
              }

• 댓글 읽기 / 수정 기능 수정 : 댓글 작성자만 댓글을 클릭 조회 하여 수정 / 삭제할 수 있게 변경

      let hasAuth = false // 댓글의 작성자와 currentUser의 일치 여부


      // 댓글 클릭 시 단건 조회
      commentList.addEventListener("click", function (e) {

          e.preventDefault()
          e.stopPropagation()

          const target = e.target

          if (!target || target.tagName != 'P') {
              return
          }

          const cid = target.getAttribute("data-cid")

          if (!cid) {
              return
          }

          getComment(cid).then(comment => { //댓글의 내용을 모달창에 채워서 보여주는

              hasAuth = currentUser === comment.commentUid //댓글의 작성자와 현재 사용자 일치 여부 확인

              console.log(comment)
              console.log(hasAuth)

              if (hasAuth) {
                  commentHeader.innerHTML = comment.cid
                  modifyCommentDescription.value = comment.commentDescription
                  modifyModal.show()
              } else {
                  return
              }

          }).catch(e => alert('error'))

      }, false)

2. 결과

• 버튼 컬러 스타일 변경 (CRUD 기능 별로 스타일 변경)
  
• 이미지 업로드 시 파일 용량 체크
  
• 이미지를 업로드하지 않았을 경우 썸네일
  
• 이미지를 업로드하지 않았을 경우 본문
  
• 댓글 창 디자인 변경
  
• 댓글 입력 시 textarea 사이즈 자동 조절
  

3. 개선이 필요한 점

• 썸네일 부분 비율을 잘 조정해봐야겠다....