29. 알림설정
알림 설정
> 특정 웹 서비스 이벤트 (스터디 생성, 참가 신청 결과, 참여중인 스터디)에 대한 정보를 이메일로 받을지, 웹 알림 메시지로 받을지 선택하는 기능. 물론 둘 다 받을 수 있음
부트스트랩
> Form
백엔드 로직 처리하기
1. Controller에 model view를 갖고오는 get메소드와 알림설정을 할 수 있는 post메소드를 작성한다.
SettingsController.java
@Controller
@RequiredArgsConstructor
public class SettingsController {
// ...
static final String SETTINGS_NOTIFICATIONS_VIEW_NAME = "settings/notifications";
static final String SETTINGS_NOTIFICATIONS_URL = "/settings/notifications";
// ...
@GetMapping(SETTINGS_NOTIFICATIONS_URL)
public String updateNotificationsForm(@CurrentUser Account account, Model model) {
model.addAttribute(account);
model.addAttribute(new Notifications(account));
return SETTINGS_NOTIFICATIONS_VIEW_NAME;
}
@PostMapping(SETTINGS_NOTIFICATIONS_URL)
public String updateNotifications(@CurrentUser Account account, @Valid Notifications notifications, Errors errors,
Model model, RedirectAttributes attributes) {
if (errors.hasErrors()) {
model.addAttribute(account);
return SETTINGS_NOTIFICATIONS_VIEW_NAME;
}
accountService.updateNotifications(account, notifications);
attributes.addFlashAttribute("message", "알림 설정을 변경했습니다.");
return "redirect:/" + SETTINGS_NOTIFICATIONS_URL;
}
}
2. 그 다음 알림 정보를 담을 Notfications DTO를 작성한다.
Notifications.java
// 알림 DTO
@Data
@NoArgsConstructor
public class Notifications {
private boolean studyCreatedByEmail;
private boolean studyCreatedByWeb;
private boolean studyEnrollmentResultByEmail;
private boolean studyEnrollmentResultByWeb;
private boolean studyUpdatedByEmail;
private boolean studyUpdatedByWeb;
public Notifications(Account account) {
this.studyCreatedByEmail = account.isStudyCreatedByEmail();
this.studyCreatedByWeb = account.isStudyCreatedByWeb();
this.studyEnrollmentResultByEmail = account.isStudyEnrollmentResultByEmail();
this.studyEnrollmentResultByWeb = account.isStudyEnrollmentResultByWeb();
this.studyUpdatedByEmail = account.isStudyUpdatedByEmail();
this.studyUpdatedByWeb = account.isStudyUpdatedByWeb();
}
}
3. Controller에서 web에서 발생한 정보를 받아 Service단으로 보내주는 updateNotifications 메소드를 작성한다
AccountService.java
@Slf4j
@Service
@Transactional
@RequiredArgsConstructor
public class AccountService implements UserDetailsService {
// ...
public void updateNotifications(Account account, Notifications notifications) {
account.setStudyCreatedByWeb(notifications.isStudyCreatedByWeb());
account.setStudyCreatedByEmail(notifications.isStudyCreatedByEmail());
account.setStudyEnrollmentResultByWeb(notifications.isStudyEnrollmentResultByWeb());
account.setStudyEnrollmentResultByEmail(notifications.isStudyEnrollmentResultByEmail());
account.setStudyUpdatedByWeb(notifications.isStudyUpdatedByWeb());
account.setStudyUpdatedByEmail(notifications.isStudyUpdatedByEmail());
accountRepository.save(account);
}
}
마지막으로 Account에서 초기 default값만 설정해주면 끝! (default : web으로 설정)
Account.java
@Slf4j
@Entity
@Getter @Setter
@EqualsAndHashCode(of ="id")
@Builder @AllArgsConstructor @NoArgsConstructor
public class Account {
// 알림
private boolean studyCreatedByEmail;
private boolean studyCreatedByWeb = true;
private boolean studyEnrollmentResultByEmail;
private boolean studyEnrollmentResultByWeb = true;
private boolean studyUpdatedByEmail;
private boolean studyUpdatedByWeb = true;
}
뷰 만들기
마지막으로 프론트 view를 만들어준다
/settings/notifications.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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='notifications')"></div>
</div>
<div class="col-8">
<div th:if="${message}" class="alert alert-info alert-dismissible fade show mt-3" role="alert">
<span th:text="${message}">완료</span>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="row">
<h2 class="col-12">알림 설정</h2>
</div>
<div class="row mt-3" th:fragment="profile-form">
<form class="col-12" action="#" th:action="@{/settings/notifications}" th:object="${notifications}" method="post" novalidate>
<div class="alert alert-light" role="alert">
<strong><a href="#" th:href="@{/settings/locations}">주요 활동 지역</a>에
<a href="#" th:href="@{/settings/keywords}">관심있는 주제</a>의 스터디가 만들어졌을 때</strong> 알림을 받을 방법을 설정하세요.
</div>
<div class="form-group">
<div class="custom-control custom-switch custom-control-inline">
<input type="checkbox" th:field="*{studyCreatedByEmail}" class="custom-control-input" id="studyCreatedByEmail">
<label class="custom-control-label" for="studyCreatedByEmail">이메일로 받기</label>
</div>
<div class="custom-control custom-switch custom-control-inline">
<input type="checkbox" th:field="*{studyCreatedByWeb}" class="custom-control-input" id="studyCreatedByWeb">
<label class="custom-control-label" for="studyCreatedByWeb">웹으로 받기</label>
</div>
</div>
<div class="alert alert-light" role="alert">
<strong>스터디 모임 참가 신청</strong> 결과 알림을 받을 방법을 설정하세요.
</div>
<div class="form-group">
<div class="custom-control custom-switch custom-control-inline">
<input type="checkbox" th:field="*{studyEnrollmentResultByEmail}" class="custom-control-input" id="studyEnrollmentResultByEmil">
<label class="custom-control-label" for="studyEnrollmentResultByEmil">이메일로 받기</label>
</div>
<div class="custom-control custom-switch custom-control-inline">
<input type="checkbox" th:field="*{studyEnrollmentResultByWeb}" class="custom-control-input" id="studyEnrollmentResultByWeb">
<label class="custom-control-label" for="studyEnrollmentResultByWeb">웹으로 받기</label>
</div>
</div>
<div class="alert alert-light" role="alert">
<strong>참여중인 스터디</strong>에 대한 알림을 받을 방법을 설정하세요.
</div>
<div class="form-group">
<div class="custom-control custom-switch custom-control-inline">
<input type="checkbox" th:field="*{studyUpdatedByEmail}" class="custom-control-input" id="studyWatchByEmail">
<label class="custom-control-label" for="studyWatchByEmail">이메일로 받기</label>
</div>
<div class="custom-control custom-switch custom-control-inline">
<input type="checkbox" th:field="*{studyUpdatedByWeb}" class="custom-control-input" id="studyWatchByWeb">
<label class="custom-control-label" for="studyWatchByWeb">웹으로 받기</label>
</div>
</div>
<div class="form-group">
<button class="btn btn-outline-primary" type="submit" aria-describedby="submitHelp">저장하기</button>
</div>
</form>
</div>
</div>
</div>
<div th:replace="fragments.html :: footer"></div>
</div>
</body>
</html>
참고
'Dot Programming > Spring Clone' 카테고리의 다른 글
| [스프링 웹앱 프로젝트 #31] 닉네임 수정 (0) | 2021.03.09 |
|---|---|
| [스프링 웹앱 프로젝트 #30] ModelMapper적용 (0) | 2021.03.08 |
| [스프링 웹앱 프로젝트 #27 #28] 패스워드 수정 및 테스트 (0) | 2021.03.04 |
| [스프링 웹앱 프로젝트 #26] 프로필 이미지 변경 (0) | 2021.03.04 |
| [스프링 웹앱 프로젝트 #25] 프로필 수정 테스트 (0) | 2020.12.22 |
