프로필 기능
말그대로 유저가 본인의 프로필 사진을 올리고, 수정할 수 있는 기능이다. 하지만 develop 에 병합을 하던 중, 아래와 같은 오류가 발생했다.
ajax post 통신을 하던 중 발생했고, 403 에러인것을 보아 csrf 관련 문제인 것 같다. 준형님이 작업한곳을 다 찾아봤는데 토큰 관련한 부분이 없었고, 경로 문제도 있었기 때문에 다시 만들어야 할 필요성이 있었다. 하지만 발표를 앞두고 작업해야할게 너무 많았기 때문에 재현님에게 초안을 부탁드렸습니다.
프로필 이미지 다운로드
프로필 컨트롤러 초안
이미지 저장까지는 잘 되었지만, 그 후에 이미지 파일을 불러오는 코드는 존재하지 않았습니다. 저번에 해결했던 갤러리 이미지 다운로드 문제와 비슷한 문제인것 같아 파일을 다운로드 하는 코드를 아래와 같이 넣어주었습니다.
적절한 파라미터를 넣어 해당되는 이미지주소를 찾게 했고, 이를 타임리프에서 아래와 같이 불러왔습니다.
원하는 주소에서 위의 이미지가 보이기 하기 위해서는 원하는 url 과 매핑된 곳에 아래와 같이 적어주어야 합니다.
그래야 프로필에 대한 내용을 앞단에 넘겨줄 수 있기 때문입니다. 서비스의 경우는 문제가 없었기 때문에 따로 적시하지 않겠습니다. 
프로필이 여러 페이지에서 보이도록 수정
프로필을 업로드하는 페이지에서는 잘 동작이 되지만.. 화면 구현시 프로필이 여러군데에서 보이도록 만들었기 때문에 꼭 해당 부분에 이미지가 출력되도록 하고 싶었습니다. 그래서 해당 문제를 해결하기 위해 고심했고, 아래와같이 해결하였습니다.
그래서 해당 문제를 해결하기 위해 고심했고, 아래와같이 해결하였습니다.프로필이 보여야 하는 곳의 컨틀롤러마다 아래와같은 코드를 추가했습니다.
@GetMapping
public String dashboard(Model model) throws IOException {
Profile profile = profileService.getProfileData(UserPrincipal.getUserPrincipal().getPrincipal().getUserId());
model.addAttribute("profile", profile);
return "main_layout";
}
@GetMapping("download")
public ResponseEntity<FileSystemResource> downloadFile(@RequestParam Long pfIdx){
ProfileModifyRequest dto = profileService.findImagePathByPfIdx(pfIdx);
HttpHeaders headers = new HttpHeaders();
headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
headers.setContentDisposition(ContentDisposition.builder("attachment")
.filename(dto.getImagePath(), Charset.forName("utf-8"))
.build());
FileSystemResource fsr = new FileSystemResource(dto.getFullPath());
return ResponseEntity.ok().headers(headers).body(fsr);
}
Java
복사
그리고 화면에 적절한 url 을 넣어주어 해결했습니다.
<button class="wrapper__btn__profile" th:onclick="|location.href='@{/profile/profile}'|">
Java
복사