TIL 61일차

◆ 프로필 이미지 첨부 미리보기 기능

1. 목표
   1) 이 기능은 게시물의 작성자의 프로필 이미지를 게시물 상세 페이지에서 볼 수 있도록 합니다.
   2) 프로필 이미지가 없는 경우에는 기본 이미지를 표시합니다.

2. 구현 방법
   ReviewController, detail.jsp 파일의 코드를 수정 및 추가.

가. ReviewController
1) 'detail' 메서드는 특정 게시물의 상세 정보를 가져오는 기능을 수행합니다.
2) 해당 게시물의 작성자 정보(작성자의 닉네임과 프로필 이미지)를 가져오는 기능을 추가하였습니다.
3) 작성자의 프로필 이미지 정보는 MemberProfileDto 객체를 통해 관리하고, 해당 정보는 'memberProfile'라는 이름으로 모델에 추가됩니다.

나. detail.jsp
1) 게시물의 상세 정보와 함께 작성자의 닉네임과 프로필 이미지를 표시합니다.
2) 프로필 이미지가 없는 경우에는 기본 이미지를 표시하도록 하였습니다.
3) 이미지 표시에는 JSTL <c:choose> 태그를 사용하여 프로필 이미지의 존재 여부에 따라 다른 이미지를 표시하도록 하였습니다.

다. HTML 구조
1) 이미지 미리보기 영역: img 태그에 id="preview" 사용
2) 파일 업로드 입력창: input 태그에 type="file" 및 name="attach" 사용
3) 이미지 지우기 버튼: button 태그에 class="form-btn negative clear-attach-btn" 사용

라. CSS 스타일링
1) input[type="file"] 스타일: 업로드 버튼 숨기기 및 레이아웃 조절
2) .writer 클래스: 이미지 미리보기 영역 및 버튼들을 수평 정렬

마. JavaScript & jQuery 구현
1) 파일 업로드 이벤트 처리 : 파일 선택 시 미리보기 함수 호출
2) 이미지 미리보기 함수 : 이미지 파일을 읽어 미리보기 영역에 표시
3) 이미지 지우기 이벤트 처리 : 지우기 버튼 클릭 시 미리보기 이미지 제거 및 파일 입력창 초기화