📌 인스타그램 스토리 페이지를 생성하자.
스토리는 인스타그램의 메인 페이지이다. 그렇기에 메인페이지를 일단 테스트로 구현해놓고 가려고 한다.

📌 프로필 페이지를 생성하자.
User Entity를 생성하였으니, User의 정보를 이용하여 개인 프로필 화면을 구현해보자.

📌 회원정보 수정을 구현해 보자!
User의 정보가 있다면 당연히 수정이 가능해야 할 것이다.
그렇기에 프로필 -> 회원정보 수정기능을 추가하도록 한다.

이전에도 말했지만 프론트엔드는 많은 구현을 하지 못한다 ㅜㅜ
그래서 다른 인스타그램 클론코딩을 진행한 다른 분들의 깃허브에서 코드를 참조하여 화면을 구현하였다.. 정말 정말 감사합니다!

https://github.com/moonsbeen626/clone_instargram[링크텍스트](https://github.com/moonsbeen626/clone_instargram)

💻 인스타그램 스토리 페이지

화면은 이렇게 완성하였다.

common.html 파일을 생성하여 기본 틀을 잡았고,
스토리 자체는 일단은 sample로 만들어서 넣었다.

이제 프론트엔드를 구현하였으니 컨트롤러를 설정할 차례이다.

💬 UserController.java

@GetMapping("/story")
    public String story(@AuthenticationPrincipal PrincipalDetails principalDetails , Model model){
        User user = userService.getUserByEmail(principalDetails.getUser().getEmail());
        model.addAttribute("user",user);
        return "/post/story";
    }

다음과 같이 컨트롤러를 생성하여 story로 진입했을 경우 완성된 프론트엔드 화면을 보여주도록 하였다.

모델을 이용하여 user 정보를 넘겨 타임리프를 사용하게 하였다!

💻 인스타그램 프로필 페이지

스토리와 동일하게 기본틀을 잡고 타임리프를 통해 User 정보를 넘겨서
User 정보를 출력하도록 하였다.

아래의 개인 스토리는 아직 구현을 안하여 테스트화면으로 두었다.

💬 UserController.java

@GetMapping("/user/profile/{id}")
    public String profile(@PathVariable("id") Long id, Model model,@AuthenticationPrincipal PrincipalDetails principalDetails){
        if(principalDetails.getUser().getId() == id){
            User user = userService.getUserByEmail(principalDetails.getUser().getEmail());
            model.addAttribute("user",user);
        }
        return "user/profile";
    }

코드는 다음과 같이 구성하였다.

💻 인스타그램 회원정보수정 페이지

다음과 같이 화면을 구성하였다.

이메일은 변경하지 못하도록 readOnly 속성을 주었고 나머지는 수정하여 제출버튼을 누르면 서비스와 컨트롤러를 통하여 수정하도록 하였다.

💬 UserController.java

    @GetMapping("/user/update")
    public String update(@AuthenticationPrincipal PrincipalDetails principalDetails, Model model){
        User user = userService.getUserByEmail(principalDetails.getUser().getEmail());
        model.addAttribute("user",user);
        return "user/update";
    }
    
    @PostMapping("/user/update/{id}")
    public String updateUser(@PathVariable("id") Long id, UserUpdateDto userUpdateDto, @AuthenticationPrincipal PrincipalDetails principalDetails){
        userService.update(userUpdateDto,principalDetails);
        return "redirect:/user/profile/{id}";
    }

GetMapping은 회원정보 수정페이지를 출력하도록 한것이고
PostMapping은 수정처리를 하도록 한것이다.

💬 User.java

public void update(String password,String phone, String username,String title,String website,String profileImgUrl){
        this.password = password;
        this.phone = phone;
        this.username = username;
        this.title = title;
        this.website = website;
        this.profileImgUrl = profileImgUrl;
    }

---

💬 UserService.java

    @Transactional
    public void update(UserUpdateDto userUpdateDto, @AuthenticationPrincipal PrincipalDetails principalDetails){
        User user = userRepository.findByEmail(principalDetails.getUser().getEmail());
        BCryptPasswordEncoder encoder = new BCryptPasswordEncoder();
        user.update(
                encoder.encode(userUpdateDto.getPassword()),
                userUpdateDto.getPhone(),
                userUpdateDto.getName(),
                userUpdateDto.getTitle(),
                userUpdateDto.getWebsite(),
                userUpdateDto.getProfileImgUrl()
        );
    }

다음과 같은 코드를 추가하여 수정하도록 하였다.