프로필 화면 설계

등록된 포스트를 한번에 볼 수 있고, 포스트를 선택해서 들어갈 수 있는 프로필 화면을 설계해야한다. 포스트는 이미 등록되어 있기 때문에 적절한 UI를 설계하고 사용자의 포스트의 앞 이미지를 불러와 한 화면에 한번에 볼 수 있도록 설계하여야한다.

<!DOCTYPE html>
<html th:replace="~{layout/common_layout :: layout(~{::title}, ~{::section})}">
<head>
  <title>러브쉐어</title>
</head>
<body>
<section class="text-center">
  <div>
    <div style="float: left">
      <span th:text="${boyFriend}" style="font-size: 20px"></span>
      <span style="font-size: 20px">&hearts;</span>
      <span th:text="${girlFriend}"  style="font-size: 20px"></span>
      <span style="font-size: 15px">의 공간</span>
    </div>
    <button th:if="${session.loginMember.loginId == boyFriend || session.loginMember.loginId == girlFriend}"
            type="button" class="btn btn-outline-dark" style="font-size: 30px; float: right" onclick="location.href='/profile-add'">+</button>
  </div><br><br><br>

  <div class="row">
    <div class="col-4" th:each="p : ${post}">
      <div class="card" style="margin-bottom: 20px">
        <a th:href="@{/profile/post/{id}(id=${p.id})}">
          <img th:src="|/images/${p.images[0].getStoreFileName()}|" class="card-img-top">
        </a>
      </div>
    </div>
  </div>

</section>
</body>
</html>

프로필의 이름은 ‘남자친구아이디 ♥ 여자친구아이디의 공간’으로 설정하고, 이름 옆에 포스트 등록 버튼을 만들어 프로필의 아이디 정보와 로그인 아이디 정보가 일치할 시에만 활성화되도록 설정한다. 그리고 각 포스트의 이미지를 를 사용하여 클릭하면 해당 포스트로 이동할 수 있도록 설정한다. 이때, 이미지는 포스트의 맨앞 이미지를 사용할 것이기 때문에 이미지 src정보를 “|/images/${p.images[0].getStoreFileName()}|”로 하여 포스트의 첫번째 이미지를 불러오도록 하였다. th:each속성을 사용하여 로그인 아이디에 해당하는 모든 포스트를 불러들인다.

포스트 화면 구현

컨트롤러를 통해 포스트 화면에 로그인 정보와 포스트 정보를 제공한다. 기존 profilePage.html에 사용자의 subscriber와 사용자의 subscriber의 subscriber이 사용자와 일치하면 코드를 실행하도록 하여 커플 프로필 화면으로 이동하도록 한다.

@GetMapping("/profile/posts")
    public String redirect_posts(RedirectAttributes redirectAttributes, HttpServletRequest request) {
        HttpSession session = request.getSession();
        Member member = (Member) session.getAttribute(SessionConst.LOGIN_MEMBER);
        if (member.getGender().equals("MEN")) {
            redirectAttributes.addAttribute("boyFriend", member.getLoginId());
            redirectAttributes.addAttribute("girlFriend", member.getLoverName());
        } else {
            redirectAttributes.addAttribute("boyFriend", member.getLoverName());
            redirectAttributes.addAttribute("girlFriend", member.getLoginId());
        }

        return "redirect:/profile/couple/{boyFriend}/{girlFriend}";
    }

    @GetMapping("/profile/couple/{boyFriend}/{girlFriend}")
    public String couplePosts(@PathVariable String boyFriend, @PathVariable String girlFriend, Model model) {
        List<Post> post = postRepository.findByBoyFriend(boyFriend);
        log.info("post={}", post);
        model.addAttribute("post", post);
        return "page/profilePage_couple";
    }

/profile/posts로 이동하게 되면 남자친구와 여자친구의 정보와 함께 커플 프로필 화면으로 이동한다. 이때, redirect를 사용하여 커플의 boyFriend아이디와 girlFriend아이디를 url을 통해 넘겨주도록 한다. url로 넘겨받은 정보를 model에 넣고, 커플의 포스트를 List형으로 데이터베이스에서 가지고 와 model에 넣고, 커플 프로필 화면에 넘겨준다. 이전에 프로필 화면 설계 부분에서 구현한 화면에 model이 전해져 커플의 각 포스트 맨앞 이미지가 출력되어진다.

결과

image

커플 이름으로 올린 포스트들이 커플 프로필 화면에 한꺼번에 들어온 것을 확인할 수 있다. 각 이미지를 클릭하면 이미지에 해당하는 포스트 화면으로 이동하게 된다.

image

다른 사용자의 프로필 화면에 들어가면 포스트 등록 버튼이 비활성화 된다.