할 일
- 본인이 좋아하는 사람 등록 폼
- 본인의 인스타그램 회원정보 입력을 완료한 사람만 가능
- 인스타그램 아이디
- 매력포인트(외모, 성격, 능력)
- 등록되어있지않은 인스타 멤버에게도 호감표현가능하게
- 호감목록 페이지 구현호감 표시 구현 예정
- 호감 이유를 세가지 선택
- 외모
- 성격
- 능력
- 호감 표시의 경우 3개중 하나를 무조건 선택해야함.
- 선택을 하지 않았을 경우 호감도를 선택해야합니다 메시지 나오게
인스타 정보 입력을 하지 않으면 안내메세지 표현까지 진행
- 연결이 되어있는지 아닌지를 판단해서 만약 연결되있지 않았다면 본인의 인스타그램 아이디 입력하기 버튼이 보이게
- 인스타 계정을 연결한 경우에는 호감 표현 폼이 보이게
public boolean hasConnectedInstaMember() {
return instaMember != null;
}- 멤버에 boolean 함수 추가
- instamember가 비어있다면 false 리턴
<th:block th:unless="${@rq.member.hasConnectedInstaMember}">
<div>먼저 본인의 인스타그램 아이디를 입력해주세요.</div>
<div>
<a href="/instaMember/connect" class="btn btn-link">본인의 인스타그램 아이디 입력하기</a>
</div>
</th:block>- th:unless -> 해당 조건이 false 인 경우 출력됨.
호감을 표현한 객체를 저장하기 위한 likeablePerson 객체
- 누가 표시를 했는지
- 인스타 멤버는 여러사람에게 호감표시가 가능
- 누가 받았는지 관계가 필요하다.
- 인스타 멤버는 여러사람에게 호감표시를 받을 수 있다.
두개의 연관관계는 일 대 다 관계로 형성된다.
instamember 일대다 관계 표현 추가
@OneToMany(mappedBy = "fromInstaMember",cascade = CascadeType.ALL)
@OrderBy("id desc")
@Builder.Default
private List<LikeablePerson> fromLikeablePeople = new ArrayList<>();
@OneToMany(mappedBy = "toInstaMember",cascade = CascadeType.ALL)
@OrderBy("id desc")
@Builder.Default
private List<LikeablePerson> toLikeablePeople = new ArrayList<>();인스타 멤버에 일대다 연결 작업 추가작업도 필요하지만 더 생각해봐야할 점은 호감도를 표시할 대상이 인스타 멤버로 저장되어 있지 않은 경우에 이 부분을 처리할 방도를 생각해야한다.
- 인스타 id를 기반으로 호감도를 표시하기 때문에 해당 인스타 계정이 현재 내가 만들고 있는 웹사이트에 등록되어 있지 않을 수 있기 때문에
InstaMemberService 에 추가
@Transactional
public InstaMember findByUsernameOrCreate(String username) {
Optional<InstaMember> opInstaMember = findByUsername(username);
if (opInstaMember.isPresent()) {
return opInstaMember.get();
}
return create(username, "U").getData();
}- instaMember에 등록되어있는 경우에는 해당 인스타 반환, 없는 경우 gender를 U로 해둔상태로 만들어둠.
호감 목록 페이지 추가
<html layout:decorate="~{/layout/layout.html}">
<head>
<title>당신이 좋아하는 사람들</title>
</head>
<body>
<mai layout:fragment="main">
<th:block th:unless="${@rq.member.hasConnectedInstaMember}">
<div>먼저 본인의 인스타그램 아이디를 입력해주세요.</div>
<div>
<a href="/instaMember/connect" class="btn btn-link">본인의 인스타그램 아이디 입력하기</a>
</div>
</th:block>
<th:block th:if="${@rq.member.hasConnectedInstaMember}">
<ul>
<li th:each="likeablePerson: ${likeablePeople}">
<span class="toInstaMember_username" th:text="${likeablePerson.toInstaMember.username}"></span>
<span class="toInstaMember_attractiveTypeDisplayName"
th:text="${likeablePerson.attractiveTypeDisplayName}"></span>
<a th:href="@{|delete/${likeablePerson.id}|}" onclick="return confirm('정말로 삭제하시겠습니까?');">삭제</a>
</li>
</ul>
</th:block>
</mai>
</body>
</html>- 인스타 아이디가 인증되었을때만 보이게된다.
- 삭제 버튼은 추가했지만 현재는 삭제는 구현되지 않았다.
호감 표시 및 호감 목록이 공용 레이아웃으로 보이게 header 에 추가
<header>
<a href="/" class="btn btn-link">메인</a>
<a href="/member/login" th:if="${@rq.logout}" class="btn btn-link">로그인</a>
<a href="/member/join" th:if="${@rq.logout}" class="btn btn-link">회원가입</a>
<a href="/member/me" th:if="${@rq.login}" class="btn btn-link">내 정보</a>
<a href="/instaMember/connect" th:if="${@rq.login}" class="btn btn-link">본인의 인스타그램 정보 입력</a>
<a href="/likeablePerson/add" th:if="${@rq.login}" class="btn btn-link">호감표시</a>
<a href="/likeablePerson/list" th:if="${@rq.login}" class="btn btn-link">호감목록</a>
<a href="javascript:;" th:if="${@rq.login}" onclick="$(this).next().submit();" class="btn btn-link">로그아웃</a>
<form th:if="${@rq.login}" hidden th:action="|/member/logout|" method="POST"></form>
<span th:if="${@rq.login}" th:text="|${@rq.member.username}님 환영합니다.|"></span>
</header>
열심히하자