본문 바로가기

전체 글

 (41)
[MATURI] 마이페이지 기능 구현 상세설명 목차 상세 페이지 출력 데이터 상세설명 마이페이지 수정페이지 상세설명 1. 상세 페이지 출력 데이터 상세설명 마이페이지에 들어오면 이름, 닉네임, 상태메시지를 출력시킬 수 있고, 해당 유저가 작성한 게시글을 확인할 수 있고, 게시글을 클릭시 해당 게시글의 상세페이지로 들어갈 수 있도록 처리하였습니다. 자기 자신의 마이페이지에 들어왔을 경우 다른 유저의 마이페이지에 들어왔을 경우 자기 자신의 마이페이지에 들어왔을 경우 더보기 버튼을 클릭시 프로필 편집을 할 수 있도록 하고, 다른 유저의 마이페이지에 들어와서 더보기 버튼을 클릭할 경우 팔로잉 취, 차단하기를 할 수 있도록 설계하였습니다. 마이 페이지의 더보기 버튼 html 소스 코드 일부분 프로필 편집 팔로잉 팔로잉 취소 차단하기 thymeleaf의 th:..
[MATURI] 팔로우/팔로워 기능 상세설명 목차 팔로잉하기 요청처리 상세설명 팔로우/팔로워 조회 요청처리 상세설명 1. 팔로잉하기 요청처리 상세설명 팔로잉 팔로워 데이터를 저장한 follow 테이블 먼저 용어를 정리하면 "팔로우"를 추가하는 행위를 "팔로잉" 이라고하고, 누군가 나를 팔로잉했다면 즉 팔로잉을 당했다면 누군가를 "팔로워" 라고 합니다. member테이블의 id를 외래키로 받아서 누가 누구를 팔로우했는지 알 수 있도록 데이터를 저장하였습니다. 예를 들어 id가 11번인 회원이 14,13번 회원을 팔로잉했다면 팔로우는 14번, 13번 회원이 됩니다. 11번회원이 14,13번 회원을 팔로잉했을 때 id가 1, 13, 7, 10번인 회원이 11번인 회원을 팔로잉했다면 11번회원의 팔로워는 1, 13, 7 10번 회원이 됩니다. 1, 13,..
[MATURI] 댓글 기능 상세설명 목차 백단에서 댓글 작성 로직처리 백단에서 댓글 조회 로직처리 프론트 단의 댓글 CRUD요청 처리 프론트 단의 댓글 이벤트 처리 1. 백단에서 댓글 작성/조회 로직처리 Service단의 댓글 작성로직 소스코드 public Comment write(Long memberId, Long articleId, Long ref, Long refStep, Long refMemberId, String refMemberNickName, String content) { Member findMember = memberRepository.findById(memberId).orElseThrow(() -> new IllegalArgumentException("맴버가 없습니다!")); Article findArticle = art..
[MATURI] 상세 페이지, 좋아요 기능 상세설명 목차 상세 페이지의 게시글 데이터 상세설명 지도로 음식점 위치 확인하기 좋아요 기능 상세설명 1. 상세 페이지의 게시글 데이터 상세설명 메인 페이지에서 해당 게시글의 이미지 또는 내용을 클릭시 상세페이지로 들어갈 수 있습니다. 이 때 데이터를 가져올 때, DTO를 통해 값을 가져와서 메인페이지에서 사용하는 게시글 데이터, 상세페이지에서 사용되는 게시글 데이터를 동일하게 사용하여 재사용성을 높혔습니다. 상세 페이지와 메인 페이지에서 사용되는 게시글 출력 데이터 DTO @Data @Builder @NoArgsConstructor @AllArgsConstructor public class ArticleViewDTO { // 기본 article 정보 private Long id; private String co..
[MATURI] 관심지역 설정 상세설명 목차 관심지역 선택 관심지역 삭제 1. 관심지역 선택 관심지역 클릭시 alert창 관심지역을 클릭했을 경우 관심지역이 등록되어있지 않을 경우 alert창을 통해 관심지역 등록 여부를 선택하도록 합니다. 관심지역 등록 팝업창 관심지역 등록은 음식점 선택 팝업창의 상단에 위치시켰습니다. 관심지역으로 등록 버튼을 클릭했을 때 관심지역을 등록하여 메인 페이지의 관심지역 버튼에 해당 지역으로 변경되도록 설계하였습니다. 관심지역을 아무것도 선택하지 않았다면 경고 alert창을 통해 예외처리를 하였습니다. 관심지역으로 등록 클릭시 팝업창 등록 후의 관심지역 버튼 관심지역으로 아무것도 선택하지 않고 관심지역으로 등록을 클릭했을 경우 2. 관심지역 삭제 관심지역의 오른쪽에 배치되어있는 X버튼을 클릭시 alert창을 통해..
[MATURI] 게시글 작성/수정 상세설명 목차 카카오 Map API로 지도에서 음식점 선택하기 음식점만 리뷰 작성할 수 있도록 유효성 검사 리뷰 이미지 미리 보기 해시 태그 상세설명 게시글 수정 상세설명 1. 카카오 Map API로 지도에서 음식점 선택하기 사이드 네비게이션에서 리뷰작성을 클릭시 보여지는 팝업창으로 maturi 사이트에서 게시글을 작성하기 위해서는 먼저 음식점을 선택하도록 로직을 설계하였습니다. 시도/시군/동을 선택시 드롭다운 되는 메뉴 시도/시군/동을 선택하여 필터링 할 수 있는데, 디자인을 이쁘게 만들려고 하다, 어려움이 많이 생겼습니다. 카카오에서 제공하는 샘플코드에서는 select option 태그를 사용하여 시도/시군/동을 선택하여 change이벤트로 간단하게, 이벤트처리를 해주었지만, ul, li를 사용하다보니 cha..
[MATURI] 검색 조건들 상세설명(카테고리, 팔로우, 관심지역...) 목차 검색 조건에 사용되는 DTO 카테고리 검색 조건 상세 설명 팔로우,관심지역,좋아요, 검색 조건 상세 설명 현재위치 검색 조건 상세 설명 keyword검색, 차단회원 필터링 조건 상세설명 1. 검색 조건에 사용되는 DTO 클라이언트에서 검색을 시작하면 javascript로 검색조건을 가공해서 Controller단에 요청을 보냅니다. 이 데이터를 기반으로 service단에서 사용되는 검색조건으로 변환 후 repository단에 전달을 해줍니다. Controller단에서 받는 검색조건 요청DTO @Builder @AllArgsConstructor @NoArgsConstructor @Data public class ArticleSearchRequest { /** * 옵션 검색 조건들 * 1. 전체 * 2...
[MATURI] 메인 페이지(게시글 목록 페이지, 동적 쿼리문, 페이징...) 다른 일반적인 게시판 포트폴리오들과 차별성을 주기 위해 구현한 부분으로 maturi프로젝트를 진행하며 가장 강조 하고 싶은 부분입니다. 여러 조건들과 페이징을 동적 쿼리문을 통해 하나의 쿼리문으로 처리하였습니다. 목차 front단에서 처리한 검색, 정렬 조건 처리 controller단에서 처리한 검색, 정렬 조건 처리 service단에서 처리한 검색, 정렬 조건 처리 repository단에서 처리한 동적 쿼리 문 1. front단에서 처리한 검색, 정렬 조건 처리 게시글목록을 불러오는 작업은 ajax로 데이터를 받아왔습니다. 먼저 선택한 조건에 맞도록 데이터를 ajax요청을 보내야하기 때문에 데이터를 세팅해주는 작업이 필요합니다. 검색 조건을 세팅하는 javascript코드 일부분 function Sea..

티스토리툴바