[ 세미프로젝트 ] K-HOTEL

이전에 세미 프로젝트 회고에 대해서 작성한 적이 있었는데, 이제 슬슬 포트폴리오와 회사취업을 준비하면서 

내가 한 부분을 정리하는 시간이 있으면 좋을 것 같아 오늘은 코드 정리하는 시간을 갖도록 했다. 

 

해당 부분에 대해서는 프론트 / 백 모두 진행하였다. 

 

5. 세미프로젝트 회고

세미프로젝트는 servlet / JSP를 사용해서 개발을 하였다. 

 

 

📂 관리자 페이지 - 전체 회원 조회

💻 관리자 페이지 진입 코드 

• 어드민일 경우 컬럼 'Y'로 분류하여 loginMember에 memberAdmin에 저장되어 있는 컬럼이 Y 일 경우, 관리자 페이지에 진입하도록 진행 

<div class="P-btn2">
    <ul>
        <c:if test="${! empty loginMember}">
            <a href="${contextPath}/member/logout">로그아웃</a>
            <span> | </span>
            <a href="${contextPath}/member/mypage">마이페이지</a>
            <span>${loginMember.memberName} 님 환영합니다.</span> 
            
            <c:if test="${loginMember.memberAdmin.toString() eq 'Y'}">
                <a href="${contextPath}/admin/memberAdmin?type=1">
                    <button>관리자</button>
                </a>
            </c:if>

        </c:if>

        <c:if test="${empty loginMember}">
            <a href="${contextPath}/member/login">로그인</a>
            <span> | </span>
            <a href="${contextPath}/member/signUp">회원가입</a>
        </c:if>
    </ul>
</div>

 

💻 전체 회원 목록 띄우기  

• 현재 페이지의 숫자를 담고 있는  'cp' 파라미터의 값을 가져와서 조회를 함 ( 처음 진입할 경우는 현재 페이지 숫자가 1임으로 cp에 1를 대입한다. )

      try {

         int type = Integer.parseInt(req.getParameter("type"));
         
         int cp = 1;

         if(req.getParameter("cp")!=null) { // 쿼리 스트링에 cp가 존재 한다면 
            cp = Integer.parseInt(req.getParameter("cp"));
         }

 

💻 신고당한  수 구해오기 

• dao. getListReportCount 메소드를 호출해서 회원의 신고한 횟수를 가져와 setReportCount에 저장

for (int i = 0; i < boardList.size(); i++) {
    int cnt = dao.getListReportCount(conn, listCount, boardList.get(i).getMemberNo());
    boardList.get(i).setReportCount(cnt);
}

• 서브쿼리를 이용해서 BOARD_CD = 3 ( 리뷰게시판) 을 먼저 찾고 REPORT 테이블에서 COUNT 수를 구함 

SELECT COUNT(*)
FROM REPORT
WHERE BOARD_NO IN (
   SELECT BOARD_NO
   FROM BOARD
   WHERE MEMBER_NO =?
   AND BOARD_CD = 3
)

 

💻 아이디 검색 

• Pid값이 있을때 아닐때 구분해서 아이디로만 검색 가능하도록 설정했다. 

우리 조 성이 다 달라서 각자의 성을 따 매개변수명을 짓기로 했다 지금 다시 코드를 보니..

역시 매개변수명은 역시 직관적이고 누구나 알아볼 수 있도록 짓는게 좋은 것 같다 지금 보고 응? Pid가 뭐였지..

  PAdminService service = new PAdminService();

     Map<String, Object> map = null;

     if(req.getParameter("Pid") ==null) {
        map = service.searchAdminMember(type,cp);


     }else {
        String Pid = req.getParameter("Pid");
       map = service.searchId(Pid,type,cp);
     }

 

 

💻 탈퇴시키기 

• 클릭 시 "정말 탈퇴하시겠습니까?"를 묻는 알림창을 띄우고 확인을 누를때 백단에서 실행할 수 있도록 진행했다. SQL에 결과값이 1이상일 경우 탈퇴하도록 하였으며 나중에 DB에서 변경이 가능하도록  UPDATE를 이용하였다. 

function secessionValidate() {
  
    var isConfirmed = confirm('정말 탈퇴 하시겠습니까?');
    return isConfirmed; // 사용자가 확인을 누른 경우에만 폼을 제출합니다.
}


    if(result > 0) {
       session.setAttribute("message", "회원이 탈퇴 되었습니다.");
       resp.sendRedirect(req.getContextPath() + "/admin/memberAdmin?type=1");

    }else {
       session.setAttribute("message", "회원탈퇴 실패.");

    }

 

 

---

📂 게시판 ( 마이페이지 리뷰 / QNA  목록조회 )

• 간단하게 SQL 문을 이용해서 필요한 정보를 가져와서 c:forEach 태그를 이용해서 하나씩 꺼내서 조회할 수 있도록 하였으며, 상세내역을 클릭하면 테이블에서 정의한 type는 각자의 상세내역으로 이동할 수 있도록 onclick 함수를 걸어줬다. 

<c:forEach var="board" items = "${boardList}">
    <div class="P-qna">
        <div>${board.boardNo}</div>
        <div>${board.boardTitle}</div>
        <div></div>
        <div>${board.boardDt}</div>
        <button class="P-qna-btn" 
        onclick="location.href='${contextPath}/board/qna/boardDetail?type=2&no=${board.boardNo}&cp=1'">상세내역</button>
    </div>
</c:forEach>

 

 

---

📂 게시판 ( 이벤트 진행 / 종료 목록조회 )

• 간단한 SQL문을 이용해서 필요한 정보를 가져와 나열하였으며, c:forEach 를 이용해서 상세페이지에 들어갈 수 있도록 진행하였다. 하루에 한번 참여를 해야하는데 1번 이상 클릭 했을때에 진입을 막기 위해 onclick 를 이용해서 알럿창을 띄울 수 있게 return JeventFl() 함수를 추가 해줬다. 

<div class="P-main">
    <div class="P-blank1">진행 중인 이벤트</div>

    <div class="P-eventmain">

        <div class="P-eventmain1">
            <div class="P-event-list">
                <a href="${contextPath}/event/bingo" class="P-event">
                    <img src="${contextPath}/resources/images/빙고 게임 이미지.png" onclick="return JeventFL()"> 
                    <div class="P-event1">
                        <div class="P-event-name">빙고 게임</div>
                    </div>
                </a>

            </div>

            <div class="P-event-list">
                <a href="${contextPath}/event/updown" class="P-event">
                    <img src="${contextPath}/resources/images/업다운게임_이미지.jpg" alt="업다운 썸넬 사진">
                    <div class="P-event1">
                        <div class="P-event-name">업다운 게임</div>
                    </div>
                </a>

            </div>

            <c:forEach var="Img" items="${eventList}">
                <div class="P-event-list">
                    <a href="${contextPath}/event/detail?no=${Img.eventNo}" class="P-event">
                        <img src="${contextPath}${Img.imgRename}">
                        <div class="P-event1">
                            <div class="P-event-name">${Img.eventTitle}</div>
                        </div>
                    </a>

                </div>
            </c:forEach>
        </div>
    </div>

    <div class="P-blank2"></div>

</div>

 

---

 

📂 리뷰게시판 ( 목록조회  / 상세조회 / 삭제 / 신고하기 )

💻 리뷰 목록 조회 

• 프론트는 border-bottom 을 이용해서 하단에만 줄을 넣어 깔끔하게 디자인 하였고,  SQL문으로 조회 해서 c:forEach 를 이용해서 나열하였다. 
• 회원아이디에 대해서는 substring을 이용해서 앞 3개는 ***로 대신하도록 하였다. 

 

💻 리뷰 상세 조회 

상세 조회 시 태그와 별점으로 어떻게 할지에 대해서 혼자 엄청 생각했었던 기억이 있다. 

하다보니 혼자 코드 수정도 하고 히히 재미있구만 😎

 

• 작성자는 동일하게 substring을 이용해서 앞 3개는 ***로 대신하도록 하였다.
• 리뷰 작성자일 경우는 수정 / 삭제 버튼이 보이도록 출력했다. 
  ( 만일, 리뷰 작성자가 아닐경우 신고 버튼이 출력되도록 하였다) 

 

🔎 별점 수정 시 조회 

•  별점의 경우 DB에 1은 별 1개 2은 별 2개로 아래와 같이 코드를 작성했는데 생각해보면 VALUE 5가 별 5개만 출력되면 되니까 1~4개 별은 필요가 없다고 생각하여 아래와 같이 코드를 리팩토링 해봤다. ( 더 줄일 수 있을 것 같은데..    미래의 내가 이걸 본다면 고쳐주세요..) 

⭐ 별점 관련 이전 코드 

<form name="P-myform" id="P-myform" method="post" action="./save">
                <fieldset>
                    <input type="radio" id="5-stars" name="rating" value="5"
                        class="P-myformYellow" v-model="ratings" />
                    <label for="5-stars" class="star P-myformYellow">⭐</label>

                    <input type="radio" id="4-stars" name="rating" value="4"
                        v-model="ratings" />
                    <label for="4-stars" class="star P-myformYellow">⭐</label>

                    <input type="radio" id="3-stars" name="rating" value="3"
                        v-model="ratings" />
                    <label for="3-stars" class="star P-myformYellow">⭐</label>

                    <input type="radio" id="2-stars" name="rating" value="2"
                        v-model="ratings" />
                    <label for="2-stars" class="star P-myformYellow">⭐</label>

                    <input type="radio" id="1-star" name="rating" value="1"
                        v-model="ratings" />
                    <label for="1-star" class="star pyellow">⭐</label>
                </fieldset>
            </form>

        </c:if>


        <c:if test="${board.reviewStar == 2}">

            <form name="P-myform" id="P-myform" method="post" action="./save">
                <fieldset>
                    <input type="radio" id="5-stars" name="rating" value="5"
                        class="P-myformYellow" v-model="ratings" />
                    <label for="5-stars" class="star P-myformYellow">⭐</label>

                    <input type="radio" id="4-stars" name="rating" value="4"
                        v-model="ratings" />
                    <label for="4-stars" class="star P-myformYellow">⭐</label>

                    <input type="radio" id="3-stars" name="rating" value="3"
                        v-model="ratings" />
                    <label for="3-stars" class="star P-myformYellow">⭐</label>

                    <input type="radio" id="2-stars" name="rating" value="2"
                        v-model="ratings" />
                    <label for="2-stars" class="star pyellow">⭐</label>

                    <input type="radio" id="1-star" name="rating" value="1"
                        v-model="ratings" />
                    <label for="1-star" class="star pyellow">⭐</label>
                </fieldset>
            </form>

        </c:if>

        <c:if test="${board.reviewStar == 3}">

            <form name="P-myform" id="P-myform" method="post" action="./save">
                <fieldset>
                    <input type="radio" id="5-stars" name="rating" value="5"
                        class="P-myformYellow" v-model="ratings" />
                    <label for="5-stars" class="star P-myformYellow">⭐</label>

                    <input type="radio" id="4-stars" name="rating" value="4"
                        v-model="ratings" />
                    <label for="4-stars" class="star P-myformYellow">⭐</label>

                    <input type="radio" id="3-stars" name="rating" value="3"
                        v-model="ratings" />
                    <label for="3-stars" class="star pyellow">⭐</label>

                    <input type="radio" id="2-stars" name="rating" value="2"
                        v-model="ratings" />
                    <label for="2-stars" class="star pyellow">⭐</label>

                    <input type="radio" id="1-star" name="rating" value="1"
                        v-model="ratings" />
                    <label for="1-star" class="star pyellow">⭐</label>
                </fieldset>
            </form>

        </c:if>

        <c:if test="${board.reviewStar == 4}">

            <form name="P-myform" id="P-myform" method="post" action="./save">
                <fieldset>
                    <input type="radio" id="5-stars" name="rating" value="5"
                        class="P-myformYellow" v-model="ratings" />
                    <label for="5-stars" class="star P-myformYellow">⭐</label>

                    <input type="radio" id="4-stars" name="rating" value="4"
                        v-model="ratings" />
                    <label for="4-stars" class="star pyellow">⭐</label>

                    <input type="radio" id="3-stars" name="rating" value="3"
                        v-model="ratings" />
                    <label for="3-stars" class="star pyellow">⭐</label>

                    <input type="radio" id="2-stars" name="rating" value="2"
                        v-model="ratings" />
                    <label for="2-stars" class="star pyellow">⭐</label>

                    <input type="radio" id="1-star" name="rating" value="1"
                        v-model="ratings" />
                    <label for="1-star" class="star pyellow">⭐</label>
                </fieldset>
            </form>

        </c:if>

        <c:if test="${board.reviewStar == 5}">

            <form name="P-myform" id="P-myform" method="post" action="./save">
                <fieldset>
                    <input type="radio" id="5-stars" name="rating" value="5"
                        class="P-myformYellow" v-model="ratings" />
                    <label for="5-stars" class="star pyellow">⭐</label>

                    <input type="radio" id="4-stars" name="rating" value="4"
                        v-model="ratings" />
                    <label for="4-stars" class="star pyellow">⭐</label>

                    <input type="radio" id="3-stars" name="rating" value="3"
                        v-model="ratings" />
                    <label for="3-stars" class="star pyellow">⭐</label>

                    <input type="radio" id="2-stars" name="rating" value="2"
                        v-model="ratings" />
                    <label for="2-stars" class="star pyellow">⭐</label>

                    <input type="radio" id="1-star" name="rating" value="1"
                        v-model="ratings" />
                    <label for="1-star" class="star pyellow">⭐</label>
                </fieldset>
            </form>

        </c:if>


    </div>

 

⭐ 별점 관련 수정 코드 

<div>
    <div class="P-star">
        <c:if test="${board.reviewStar == 1}">

            <form name="P-myform" id="P-myform" method="post" action="./save">
                <fieldset>

                    <input type="radio" id="1-star" name="rating" value="1"
                        v-model="ratings" />
                    <label for="1-star" class="star pyellow">⭐</label>
                </fieldset>
            </form>

        </c:if>


        <c:if test="${board.reviewStar == 2}">

            <form name="P-myform" id="P-myform" method="post" action="./save">
                <fieldset>


                    <input type="radio" id="2-stars" name="rating" value="2"
                        v-model="ratings" />
                    <label for="2-stars" class="star pyellow">⭐⭐</label>

                </fieldset>
            </form>

        </c:if>

        <c:if test="${board.reviewStar == 3}">

            <form name="P-myform" id="P-myform" method="post" action="./save">
                <fieldset>

                    <input type="radio" id="3-stars" name="rating" value="3"
                        v-model="ratings" />
                    <label for="3-stars" class="star pyellow">⭐⭐⭐</label>


                </fieldset>
            </form>

        </c:if>

        <c:if test="${board.reviewStar == 4}">

            <form name="P-myform" id="P-myform" method="post" action="./save">
                <fieldset>

                    <input type="radio" id="4-stars" name="rating" value="4"
                        v-model="ratings" />
                    <label for="4-stars" class="star pyellow">⭐⭐⭐⭐</label>

                </fieldset>
            </form>

        </c:if>

        <c:if test="${board.reviewStar == 5}">

            <form name="P-myform" id="P-myform" method="post" action="./save">
                <fieldset>
                    <input type="radio" id="5-stars" name="rating" value="5"
                        class="P-myformYellow" v-model="ratings" />
                    <label for="5-stars" class="star pyellow">⭐⭐⭐⭐⭐</label>


                </fieldset>
            </form>

        </c:if>

    </div>

 

 

🔎 태그 수정 시 조회 

• 태그 출력하는 부분에 대해서는 DB에 태그를 클릭할 때 "${fn:split(board.tagContent,',,')}"이용해서 배열형식으로    DB에 저장되도록 하였다. 

이전에는 태그 1개만 나와도 + 버튼이 나왔는데, 굳이 1개가 있을때는 + 버튼이 없을 것 같아서 

혼자 코드를 수정하여 태그를 1개를 출력했다면 tag[0]을 이용해서 1개만 출력하게 하였으며

tag길이가 1보다 크면  + 버튼이 보이도록하여  다른 태그를 볼 수 있도록 하였다. 

<div class="tagClass">
    <c:set var="tag" value="${fn:split(board.tagContent,',,')}" />

    <span class="P-tag-top1">
    <input type="text" value="✅ ${tag[0]}" disabled>
    </span>

    <c:if test="${fn:length(tag) > 1}">
    <span class="P-tag-con">
        <input type="button" value="+" onclick="appendText()">
    </span>
    </c:if>

    <c:forEach var="i" begin="1" end="${fn:length(tag) - 1}" step="1">
    <span class="P-tag-top2" id="P-tag-top2">
        <input type="text" value="➰ ${tag[i]}" disabled>
    </span>
    </c:forEach>
</div>

 

 

🔎 신고하기 

• 내가 작성하지 않는 글에 신고버튼만 노출 
• AJAX 사용하여 신고하기 구현 

$.ajax({

      url: "declar",
      data: {
        "Ppcontent": Ppcontent.value,
        "boardNo": boardNo.value,
        "memberNo": memberNo.value
      },
      success: function (result) {

        if(result>0){
          alert("신고되었습니다.")

        }else{
          alert("신고 등록이 실패되었습니다.")
        }

      },
      error: function (req, status, error) {
        console.log("신고실패")

      }

  })

})

 

 

🔎 삭제하기 

 

 

 

이렇게 보니까 수정하고 싶은것도  있고 아 ! 이거 한개 더 추가하고 싶은것도 있었다

실제로 코드 정리하면서 혼자 수정한 것도 있어서 재미있었다 😎

다음에는 파이널 프로젝트에 대해서 코드 리뷰를 진행해야겠다 ! 얼른 면접 연습도 해야지... 바쁘다 바빠