23. 프로필 수정
컨트롤러
> Bio, Link, Occupation, Location 정보만 입력받아서 Account 정보를 수정한다
백엔드 로직 작성
일단 프로필 수정에 접근할 수 있게 Get메소드를 만들자
@Controller
public class SettingsController {
@GetMapping("/settings/profile")
public String profileUpdateForm(@CurrentUser Account account, Model model){
model.addAttribute(account);
model.addAttribute(new Profile(account));
return "settings/profile";
}
}
Profile클래스는 프로필 수정 폼을 받아서 컨트롤러에 전해주는 DTO클래스이다
/**
* setting form을 채울 Data (DTO)
*/
@Data
public class Profile {
private String bio;
private String url;
private String occupation;
private String location;
public Profile(Account account) {
this.bio = account.getBio();
this.url = account.getUrl();
this.occupation = account.getOccupation();
this.occupation = account.getOccupation();
this.location = account.getLocation();
}
}
뷰 작성
마지막으로 settings/profile.html을 작성하자
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head th:replace ="fragments.html :: head"></head>
<body class="bg-light">
<nav th:replace="fragments.html :: main-nav"></nav>
<div class="container">
<div class ="row mt-5 justify-content-center">
<div class="col-2">
<div th:replace="fragments.html :: settings-menu(currentMenu='profile')"></div>
</div>
<div class="col-8">
<div class="row">
<h2 class="col-sm-12" th:text="${account.nickname}">loosie</h2>
</div>
<div class="row mt-3">
<!--프로필 소개 정보-->
<form class="col-sm-6" action="#"
th:action="@{/settings/profile}" th:object="${profile}" method="post" novalidate>
<div class="form-group">
<label for="bio">한 줄 소개</label>
<input id="bio" type="text" th:field="*{bio}" class="form-control"
placeholder="간략한 소개를 부탁합니다." aria-describedby="bioHelp" required>
<small id="bioHelp" class="form-text text-muted">
길지 않게 35자 이내로 입력하세요.
</small>
<small class="form-text text-danger" th:if="${#fields.hasErrors('bio')}" th:errors="*{bio}">
조금 길어요.
</small>
</div>
<!-- 링크 정보 -->
<div class="form-group">
<label for="url">링크</label>
<input id="url" type="url" th:field="*{url}" class="form-control"
placeholder="http://dotstudy.com" aria-describedby="urlHelp" required>
<small id="urlHelp" class="form-text text-muted">
블로그, 유튜브 또는 포트폴리오나 좋아하는 웹 사이트 등 본인을 표현할 수 있는 링크를 추가하세요.
</small>
<small class="form-text text-danger" th:if="${#fields.hasErrors('url')}" th:errors="*{url}">
옳바른 URL이 아닙니다. 예시처럼 입력해 주세요.
</small>
</div>
<!--직업 정보-->
<div class="form-group">
<label for="company">직업</label>
<input id="company" type="text" th:field="*{occupation}" class="form-control"
placeholder="어떤 일을 하고 계신가요?" aria-describedby="occupationHelp" required>
<small id="occupationHelp" class="form-text text-muted">
개발자? 매니저? 취준생? 대표님?
</small>
</div>
<!--활동 지역-->
<div class="form-group">
<label for="location">활동 지역</label>
<input id="location" type="text" th:field="*{location}" class="form-control"
placeholder="Seoul, South Korea"
aria-describedby="locationdHelp" required>
<small id="locationdHelp" class="form-text text-muted">
주요 활동(사는 곳이나 직장을 다니는 곳 또는 놀러 다니는 곳) 지역의 도시 이름을 알려주세요.
</small>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block" type="submit"
aria-describedby="submitHelp">수정하기</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
결과화면
프로필 수정 폼 완성
참고
인프런 강의 - 스프링과 JPA 기반 웹 애플리케이션 개발
'Dot Programming > Spring Clone' 카테고리의 다른 글
| [스프링 웹앱 프로젝트 #25] 프로필 수정 테스트 (0) | 2020.12.22 |
|---|---|
| [스프링 웹앱 프로젝트 #24] 프로필 수정 처리 (0) | 2020.12.21 |
| [스프링 웹앱 프로젝트 #22] Open Entitymanager (또는 Session) In View 필터 (0) | 2020.12.15 |
| [스프링 웹앱 프로젝트 #21] 프로필 뷰 (0) | 2020.12.11 |
| [스프링 웹앱 프로젝트 #20] 로그인 기억하기 (0) | 2020.12.10 |
