게시판 - 내 정보 화면 구현 1

프로필화면의 경우 따로 만들어서 진행하자.

/member/me 정도로 uri 진행 예정

여기서 보여줄만한것들

• 사용자의 기본 정보
• 작성한 질문
• 답변

질문과 답변의 경우

• 페이징 처리가 필요할듯하다.

  • 너무많으면 질문만 보이거나해서 프로필화면 보기 어려워짐.

• 자바 객체로써 questionList와 answerList가 존재함.

  • 기본 틀로써 이걸 먼저 만들고 나서 페이징 처리를 하자.
  • 페이징틀을 만들면 거기에 추가적으로 누르면 그 질문으로 이동하게 하는 방식도 괜찮을듯.
    • 이건 일단 기본 틀을 만들고 나서 또 추가적으로 생각해보기.

프로필화면 폼의 구성

member_me.html

1. 내 정보 : id 정도?
2. 내가한 질문들
3. 내가한 답변들

시작은 나열하는폼

이 2가지의 경우 user안에 있기 때문에 현재는 먼저 틀과 기본만 진행하기 위해서 질문 먼저 진행하였다.

/user/me로 연결되는 내 정보의 경우 현재 로그인한 유저의 이름을 통해서 찾아오게 진행하였다.

• findByUsername을 통해서 찾아온뒤에 model에 실어서 html에 보내주기.

@PreAuthorize("isAuthenticated()")
@GetMapping("/me")
public String me(Model model, Principal principal) {
    SiteUser user = userService.getUser(principal.getName());
    model.addAttribute("SiteUser", user);
    return "member_me";
}

질문 리스트만 보이는 현재 member_me.html

<table class="table">
    <thead class="table-dark">
    <tr class="text-center">
        <th style="width:50%">제목</th>
        <th>글쓴이</th>
        <th>작성일시</th>
    </tr>
    </thead>
    <tbody>
    <tr class="text-center" th:each="question, loop:${SiteUser.questionList}">
        <td class="text-start">
            <a th:href="@{|/question/detail/${question.id}|}" th:text="${question.subject}"></a>
            <span class="text-danger small ms-2"
                  th:if="${#lists.size(question.answerList)>0}"
                  th:text="${#lists.size(question.answerList)}"></span>
        </td>
        <td><span th:text="${question.author.username}"></span></td>
        <td th:text="${#temporals.format(question.createDate, 'yyyy-MM-dd HH:mm')}"></td>
    </tr>
    </tbody>
</table>

다음은 내가 쓴 답변들을 추가하자.

• 내가 쓴 답변을 추가하는 방법을 생각해보자.
• 답변의 경우 질문에 달려있기 때문에 링크를 질문의 링크를 줘야한다.
  • 답변안에 존재하는 question을 가져와서 id를 통해서 연결하게 진행하였다.

<h3 class="text-center">내가 작성한 답변들</h3>
<table class="table">
    <thead class="table-dark">
    <tr class="text-center">
        <th style="width:50%">내용</th>
        <th>글쓴이</th>
        <th>작성일시</th>
    </tr>
    </thead>
    <tbody>
    <tr class="text-center" th:each="answer, loop:${SiteUser.answerList}">
        <td class="text-start">
            <a th:href="@{|/question/detail/${answer.question.id}|}" th:utext="${answer.content}"></a>
        </td>
        <td><span th:text="${answer.author.username}"></span></td>
        <td th:text="${#temporals.format(answer.createDate, 'yyyy-MM-dd HH:mm')}"></td>
    </tr>
    </tbody>
</table>

질문과 답변이 나오게하는 결과물들.

• 여기서 답변리스트를 좀 띄워서 만들어 두면 보기 좋을거같다.
• 페이징 작업이 아직 안되어있는데 페이징 작업까지 진행해서 많은 질문들 달거나 많은 답변을 달았을 때 내 정보 페이지가 엄청 길쭉해지는 현상을 막는 거까지 진행하면 될 거 같다.
• 아직 내 정보의 경우에는 username 정도 나오게 할 생각인데 질문과 답변 먼저 만들어둔 모습이다.

---

내 정보로 보여줄만 한 것들.

• username
• email 정도? 보여주면 좋을 거 같다.

<div class="card" style="width: 18rem;">
    <div class="card-body">
        <h5 class="card-title">내 정보</h5>
        <p>유저 이름 :</p><p class="card-text" th:text="${SiteUser.username}"></p>
        <p>유저 이메일 : </p><p class="card-text" th:text="${SiteUser.email}"></p>
    </div>
</div>

---

타임리프 작성시에는 인텔리제이 유료버전이 아닌 커뮤니티버전에서는 html부분 오타를 잡아주지 않기 때문에 오타가 있는지 꼭 조심하자.

• 오류가 발생했을때 페이지에서 잘 읽어내면 어디서 문제가 됬는지 확인이 가능하니 오류가 났을때 오류페이지를 잘 읽도록하자.