회원정보 수정

$$config title: spring boot/gradle 콘텐츠 사용, 회원가입, 회원 정보 수정 keywords: - 테일윈드 - 부트스트랩 - 폰트어썸 - Article에 회원가입일, 수정일 추가 $$ # 1 콘텐츠 사용 방법 ##### 테일윈드, 부트스트랩, 데이지유아이, 플로우바이트, (다른부트스트랩), 폰트어썸 # ## 테일윈드 - 테일윈드 [tailwind-cheat-sheet](https://nerdcave.com/tailwind-cheat-sheet) - tawilwind-cheat-sheet에서 필요한 서치 박스(search box) css를 이용할 수 있음. - flex개구리/디펜스에서 flex 연습 ## 부트스트랩 - 부트스트랩 [bootstrap]() - bootstrap에서 component에서 필요한 컴포넌트의 코드 복사해 html에 가져와 사용할 수 있음. ## 데이지유아이 - 데이지유아이 [daysiUI](https://daisyui.com/) - 불러오기[불러오기](https://daisyui.com/docs/install/cdn/)로 들어가서 코드를 복사해 layout.html에 넣어준 뒤 사용하기 - //////////////////////////////아직 안한 것 같음(2022년 2월 8일, 확인 후 정리하기)////////////////////////////// ~~~HTML ~~~ ## 플로우바이트 - 플로우바이트[flowbite](https://flowbite.com/docs/components/card/) - 불러오기[불러오기](https://flowbite.com/docs/getting-started/quickstart/) - 불러오기를 클릭하고 Include via CDN에 있는 아래 코드를 각각 아래 위치에 입력하기 - head 태그 사이에 아래 코드 입력 ~~~HTML ~~~ - body 태그 사이에 아래 코드 입력 ~~~HTML ~~~ ## 다른부트스트랩 - 다른부트스트랩[](https://dev.to/narottam04/free-tailwind-components-for-your-next-project-2gka) ## 폰트어썸 - 폰트어썸[fontawesome](https://fontawesome.com/v5.15/icons?d=gallery&p=2) - layout.html의 head에 넣어 사용하기 ~~~HTML ~~~ # 2 콘텐츠 사용 ## 1 부트스트랩 적용하기 - flowbite 사용 예 - 1 flowbite 불러오기에서 Include via CDN의 코드를 layout.html의 head와 body 안에 각각 넣기 - 2 layout.html ~~~HTML <-- 추가해준 부분입니다. <-- 추가해준 부분입니다.

~~~ - 3 왼쪽 메뉴바에서 COMPONENT에서 Dropdowns에서 Dropdown header 사용하기 - 4 코드 복사 후 header에 사용할 부분 넣고, 사용하고 싶은 대로 수정하기 # 3 domain/Member.java 클래스 수정 - 1 회원가입일, 수정일 추가하기 - Article 넣은 것과 같이 회원가입일(regDate), 수정일(updateDate) 넣기 ~~~JAVA @Entity @Getter @NoArgsConstructor public class Member implements UserDetails { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String loginPw; private String loginId; private String name; private String nickname; private String email; private LocalDateTime regDate = LocalDateTime.now(); <-- 이부분을 추가해 줍니다. private LocalDateTime updateDate = LocalDateTime.now(); <-- 이부분을 추가해 줍니다. @OneToMany(mappedBy = "member", cascade = CascadeType.REMOVE) private List

articles = new ArrayList<>(); ~~~ # 4 게시물 작성 테스트 - 1 SQLyog에 다음을 입력해 데이터가 잘 들어오는지 확인하기 ~~~SHELL SELECT * FROM `member`; SELECT * FROM `article`; ~~~ - 2 회원 정보 수정 - MemberModifyForm/dto > ModifyMember > memberService > memberController > modify.html - 1 dto에 MemberModifyForm 만들기 //// MemberModifyForm에 dto만들기? dto에 MemberModifyForm 만들기? 내 프로젝트 확인하기 ~~~JAVA @Data public class MemberModifyForm { private String loginPw; private String nickname; private String email; } ~~~ - 1 ModifyMember(Member) - Member 클래스에 createMember밑에 다음과 같이 만들기 ~~~JAVA public void modifyMember(String loginPw, String nickname, String email){ this.loginPw = loginPw; this.nickname = nickname; this.email = email; } ~~~ - 2 memberService - 회원정보를 수정해 주기 위해서 로그인 아이디를 가지고 회원을 찾고 거기서 수정된 값을 넣어줍니다. ~~~JAVA @Transactional public Long modifyMember(MemberModifyForm memberModifyForm, String loginId) { Member findMember = findByLoginId(loginId); BCryptPasswordEncoder bCryptPasswordEncoder = new BCryptPasswordEncoder(); findMember.modifyMember( bCryptPasswordEncoder.encode(memberModifyForm.getLoginPw()), memberModifyForm.getNickname(), memberModifyForm.getEmail() ); return findMember.getId(); } ~~~ - 3 memberController ~~~JAVA @GetMapping("/members/modify") public String showModify(Model model, Principal principal){ Member findMember = memberService.findByLoginId(principal.getName()); model.addAttribute("member", findMember); model.addAttribute("memberModifyForm", new MemberModifyForm()); return "usr/member/modify"; } @PostMapping("/members/modify") public String doModify(MemberModifyForm memberModifyForm, Principal principal, Model model){ try { memberService.modifyMember(memberModifyForm, principal.getName()); }catch (Exception e){ model.addAttribute("err_msg", e.getMessage()); return "usr/member/modify"; } return "redirect:/"; } ~~~ - 4 modify.html - usr/member에 modify.html을 만들기 - join.html의 내용을 modify.html에 복사 + 붙여넣기 하고, 회원 수정에 맞게 바꾸기 - modify.html ~~~HTML 회원정보 수정 <-- 바꾸어준 부분

회원정보 수정 <-- 바꾸어준 부분

<-- 바꾸어준 부분

~~~ - 5 SecurityConfig.java ~~~JAVA @Override protected void configure(HttpSecurity http) throws Exception { http .authorizeRequests( authorize -> authorize // URL 에 따른 권한 설정 .mvcMatchers( "/members/join", "/members/login" ) .anonymous() .mvcMatchers( "/articles/**", "/", "/members/modify" < -- 추가해준 부분 ) .permitAll() .mvcMatchers( "/adm/**" ~~~ ##### 여기까지 2022년 1월 19일 ################################################3 # 회원가입일, 수정일 반영(Article) ## Article을 수업 편의상 게시물로 부르고, 회원가입일, 수정일을 Article에 추가함 # 단축키 - 미리보기 모드 토글 : ctrl + alt + shift + p - Start searching : Ctrl-F / Cmd-F - Find next : Ctrl-G / Cmd-G - Find previous : Shift-Ctrl-G / Shift-Cmd-G - Replace : Shift-Ctrl-F / Cmd-Option-F - Replace all : Shift-Ctrl-R / Shift-Cmd-Option-F - Persistent search : Alt-F - 다이얼로그가 안사라짐, enter to find next, Shift-Enter to find previous - Jump to line : Alt-G

게시글 상세