화면
배경
로그인 한 사용자의 프로필 설정을 바탕으로, 자신과 성향이 비슷한 사람들을 쉽게 찾을 수 있습니다.
구현한 기능
•
BE
Querydsl을 사용해 추천 목록 불러오기
로그인한 유저의 정보를 받으면, 룸메이트 모집 글을 작성한 유저 중에서 흡연 유무, 원하는 지역, 활동 시간이 같고 희망 연령대에 해당하는 나이를 가진 유저 목록을 가져옵니다. 요청하는 size 수 만큼 가져오고, 무작위로 가져옵니다.
비교하는 조건들이 다양하고 룸메이트 모집 글을 작성한 유저 중에서 추천 목록을 가져와야 하기 때문에 JPA 대신 Querydsl을 사용했습니다.
@Override
public List<User> getRecommend(User user, Integer size) {
var subQuery = JPAExpressions.select(qArticle.user)
.from(qArticle)
.where(qArticle.isDeleted.eq(false)
.and(qArticle.isRecruiting.eq(true)));
var userQuery = queryFactory.selectFrom(qUser)
.where(eqGender(user),
eqSmoker(user),
preferAge(user),
eqRegion(user),
neSelf(user),
eqActivityTime(user),
userInSubQuery(subQuery)
)
.orderBy(Expressions.numberTemplate(Double.class, "function('rand')").asc())
.limit(size);
return userQuery.fetch();
}
Java
복사
•
FE
백엔드에서 내 프로필을 토대로 나이, 지역, 흡연 유무, 성별, 활동 시간대가 같은 유저를 필터링하여 그 유저의 정보를 랜덤으로 보내줍니다.
그 유저에서 mbti 궁합 계산기를 토대로 5단계 중 중간 이상으로 궁합이 맞는 유저만 추천하게 만들어 주었습니다.
export const mbtiGraph: { [key: string]: number } = {
"INFP-INFP": 3,
"INFP-ENFP": 3,
"INFP-INFJ": 3,
"INFP-ENFJ": 4,
"INFP-INTJ": 3,
"INFP-ENTJ": 4,
"INFP-INTP": 3,
"INFP-ENTP": 3,
"INFP-ISFP": 0,
"INFP-ESFP": 0,
"INFP-ISTP": 0,
"INFP-ESTP": 0,
"INFP-ISFJ": 0,
"INFP-ESFJ": 0,
"INFP-ISTJ": 0,
"INFP-ESTJ": 0,
"ENFP-INFP": 3,
...}
TypeScript
복사
const compatibilityLevels = [
<div></div>,
<div></div>,
<div style={{ color: "#F0CB33" }} className={styles.mbtiResult}>
<img src="/mbti5.svg" className={styles.mbtiIcon} />
</div>,
<div style={{ color: "#70E5AD" }} className={styles.mbtiResult}>
<img src="/mbti1.svg" className={styles.mbtiIcon} />
</div>,
<div style={{ color: "#70B7F2" }} className={styles.mbtiResult}>
<img src="/mbti3.svg" className={styles.mbtiIcon} />
</div>,
]
const compatibilityKey = `${data.mbti}-${user.mbti}`
const compatibility =
compatibilityKey in mbtiGraph &&
mbtiGraph[compatibilityKey] >= 2 &&
mbtiGraph[compatibilityKey] <= 4
? compatibilityLevels[mbtiGraph[compatibilityKey]]
: compatibilityLevels[0]
TypeScript
복사