네이버 지식In - 랭킹 페이지 1번 사진은 실제 네이버 지식 in에서 제공하는 명예의 전당 이미지 2번 사진은 클론 코딩으로 따온 랭킹 페이지입니다. 솔직히 랭킹 페이지의 경우 별 다른 기능은 없고, 내공(point)에 따라 랭킹이 정해지게 만들었습니다 memberRank.jsp - 1~3등 출력 랭킹 1등 ~ 3등의 경우 아무래도 최상위 3인을 표현하기 때문에 List를 출력하는 디자인의 사이즈가 약간 더 큰편입니다. 그렇기 때문에 c태그의 for문에 제약을 걸어 1등 ~ 3등은 끊어가며 따로 출력을 진행했습니다. 1 ${memberDTO.memberEmail} 날먹의 신 분야 개꿀 내공 ${memberDTO.memberPoint} memberRank.jsp - 4등부터의 List 출력 일단 모든 사..
네이버 지식인 게시판 답변 채택 채택을 만들면서 알게 된 부분은 답변을 채택하면 채택되었는지 화면에 표시가 되어야 다른 사용들도 정보활용을 하기 편하고 또한 채택이 중복으로 되면 안 되기 때문에 채택 이후 버튼이 사라져야 합니다. 당연히 채택은 게시글 작성자만 가능해야합니다. 네이버의 경우 사용자가 채택받은 개수를 보여주기 때문에 채택 답변수를 화면에 보여주어야 합니다. 마지막으로 1번째 답변이 채택되는 경우가 아닌 10번째 답변이 채택이 되는 경우 채택이 된 답변은 무조건 답변글의 1번째 답변으로 보여주어야 한다는 것입니다. boardDetail.jsp - 채택 사용자의 id가 게시글을 작성한 member의 id와 같다면 c태그의 if문을 사용하여 채택 버튼을 보여줍니다 또한 채택이 되어있는 게시글의 ..
네이버 지식인 게시글 상세페이지 댓글 맨 처음 댓글을 만들때 전에 했던대로 하면된다고 생각했지만 글작성자의 경우 질문 작성자로 사용자의 이름이 작성되어야하고 당연히 일정이상의 댓글이 달리는 경우 페이징까지 진행해야했습니다. 또한 댓글공간을 윈도우로드를 사용하였기 때문에 페이지가 넘어가면 새로고침되며 디스플레이가 none으로 바뀌는 상황으로 ajax를 사용해 비동기 처리를 진행해야 했습니다. boardDetail.jsp - 코멘트 작성 공간 게시글 상세페이지의 댓글 작성을 진행하는 공간입니다 로그인을 하지 않은경우 코멘트를 작성하는 공간을 클릭하면 로그인이 필요하다는 문구를 confirm을 사용하여 확인 취소를 받고 확인을 클릭하는 경우 로그인 페이지를 화면에 띄웁니다. 등록 등록 boardDetail.j..
네이버 지식인 게시글 상세 페이지 게시글 상세에서는 생각보다 제약이 많은데 1. 사용자가 로그인이 되어있고 게시글에 답변이 없는 경우에는 답변을 바로 작성할 수 있게 에디터를 보여주어야하고 2. 사용자가 로그인 되어 있고 게시글에 답변이 있는 경우에는 답변 등록 버튼만 보여주고 에디터는 보여주지 않습니다 3. 사용자가 로그인을 하지 않은 상태에서도 답변 등록 버튼만 보여주고 버튼을 누르면 로그인페이지로 넘어갑니다. 4. 게시글 작성자가 보는 경우에는 답변을 등록할 수 없게 버튼 / 에디터를 보여주지 않습니다 boardDetail.jsp 1. 사용자가 로그인이 되어있고 게시글에 답변이 없는 경우 지금 생각해보면 스크립트를 사용했다면 더 편했을텐데 왜이렇게했는지 이해가 안갑니다 롬북을 사용하여 c태그 if문..
네이버 지식인 QnA글 목록 화면 카테고리는 애초에 만들 생각이 없었기 때문에 지웠고 당연히 관심질문 등 유저의 정보를 나타내는 공간이 필요 없다고 생각하여 뺏습니다 또한 질문 게시판과 QnA게시판의 차이를 모르겠어서 그냥 QnA게시판만 만들기로 했습니다. boardQnA.jsp - script main화면의 QnA 리스트와 크게 다른점이 없지만 제목으로만 보기 , 내용까지 보기 버튼을 추가했다는 약간의 차이점이 있습니다. 어떻게 만들어야할지 고민하다가 그냥 무식하고 편한 방법으로 2가지 상황의 Container를 2개 만들고, 버튼 클릭에 따라 display를 none / block으로 바뀌게 만들었습니다 Controller QnA페이지로 이동시 사용되는 GetMapping @GetMapping("/b..
Index 만들기 이번 프로젝트의 기간은 총 2주이기 때문에 원본 네이버 지식인 사이트를 모두 클론 코딩하기에는 시간이 부족했습니다 그래서 가장 중요한 기능이라고 생각되고 만들어보고 싶었던 기능만 추가하여 Index를 꾸몄습니다 Index.jsp - script 중요하게 사용된 스크립트는 하단의 QnA를 보여주는 리스트입니다 제가 배운 페이징은 ajax를 사용하지 않으면 화면이 새로고침되며, 최상단으로 올라가는 문제가 있기 때문에 페이징을 ajax로 비동기 처리를 하였습니다 Controller main화면 출력에 사용되는 GetMapping입니다 @GetMapping("/") public String Index(@RequestParam(value = "bestPage", required = false, ..
myPage 레이아웃 만들기 왼쪽이 실제 네이버의 myPage 레이아웃 오른쪽이 내가 만든 myPage레이아웃 내가 필요한 부분만 가져와 사용했고 필요 없는 부분은 제외 css부분은 문외한이기 때문에 이거만드는데 하루종일 걸렸다.... header.jsp - component ${memberDTO.memberEmail} 내정보 보기 프로필 사진 변경 ${memberDTO.memberEmail}님 로그아웃 ${memberDTO.memberDomain} 사실 myPage 레이아웃에는 큰 기능이 없습니다 그냥 보고 만들어보고 싶어서 해봤는데 생각보다 어려웠습니다 배운점은 realative , absolute 가 있습니다 realative : 해석 그대로 상대적인 위치를 지정합니다 position : relat..
