728x90

 

 

Controller

/********************************************** QnA : 수정  *******************************************************/
	
	
	@RequestMapping("boardQnaUpdateView.bo")
	public String boardUpdateForm() {
		return "boardQnaUpdateForm";
	}
	
	@RequestMapping("boardQnaUpdateForm.bo") 
	public String updateBoardQna(@ModelAttribute BoardQnA b, @RequestParam("page") int page,
									HttpSession session) {  
		
		String id = ((Member)session.getAttribute("loginUser")).getEmail();
		b.setEmailId(id);
		
		int result = bService.updateBoardQna(b); 

		if(result > 0) {
			//model.addAttribute("board", b)...;
			// 보드 보낼 필요없음. 화면 상세보기 페이지로 가기 때문에 상세보기 페이지로 가는 bdetail.bo 이용하면 됨
			//return "redirect:bdetail.bo?bId=" + b.getBoardId() + "&page=" + page;
			
			// 리다이렉트인데 데이터보존됨
//			model.addAttribute("bId",b.getBoardId());
//			model.addAttribute("page",page);
			return "redirect:boardQna.bo";
			
		} else {
			throw new BoardException("문의사항 수정에 실패하였습니다.");
		}
	}
	
	
	
	
	
/********************************************** QnA : 삭제  *******************************************************/
	
	
	@RequestMapping("boardQnaDeleteForm.bo")
	public String deleteBoard(@ModelAttribute BoardQnA b, HttpSession session) {  
			
		
		String id = ((Member)session.getAttribute("loginUser")).getEmail();
		b.setEmailId(id);
		
		int result = bService.deleteBoardQna(b);
		
		if(result > 0) {
			return "redirect:boardQna.bo";
		}else {
			throw new BoardException("QnA 삭제에 실패하였습니다.");
		}
	}

 

 

Service & DAO

// BoardService
	int updateBoardQna(BoardQnA b);
	int deleteBoardQna(BoardQnA b);
    
// BoardServiceImpl
   	// QnA 수정
	@Override
	public int updateBoardQna(BoardQnA b) {
		return bDAO.updateBoardQna(sqlSession, b);
	}

	// QnA 삭제
	@Override
	public int deleteBoardQna(BoardQnA b) {
		return bDAO.deleteBoardQna(sqlSession, b);
	}


// BoardDAO
	// QnA 수정
	public int updateBoardQna(SqlSessionTemplate sqlSession, BoardQnA b) {
		return sqlSession.update("boardMapper.updateBoardQna",b);
	}
	
	// QnA 삭제
	public int deleteBoardQna(SqlSessionTemplate sqlSession, BoardQnA b) {	// delete도 가능.  status='N'으로 변경 
		return sqlSession.update("boardMapper.deleteBoardQna",b);
	}

 

 

Board-mapper.xml

<!-- QnA 수정 -->
	<update id="updateBoardQna">
		update qna
		set qna_title = #{qnaTitle}, qna_content = #{qnaContent}
		
		where email_id = #{emailId}
	</update>
 	
<!-- QnA 삭제 -->
	<update id="deleteBoardQna">
		update qna
		set qna_status = 'N'
		where email_id = #{emailId}
	</update>

 

뷰단 삭제 메세지 추가

	<script>
		function boardQnaDelete(){
			if(confirm("정말 삭제하시겠습니까?")){
				location.href="boardQnaDeleteForm.bo"
			}
		}
	</script>

 

728x90
반응형
728x90

 

 

 

Controller

/********************************************** QnA : 쓰기  *******************************************************/

	//
	@RequestMapping("boardQnaWriteView.bo")
	public String boardQnaWriteForm() {
		return "boardQnaWriteForm";
	}

	// 게시판 글쓰기
	@RequestMapping("boardQnaWriteForm.bo")
	public String insertBoard(@ModelAttribute BoardQnA b) {

		System.out.println(b);

//		  b.setQnaTitle("qnaTitle"); 
//		  b.setQnaContent("qnaContent"); 세터를 따로 지정해서 값을 주었기 때문에 저 값이 저장된것
//		  파람은 단일, 모델어트리뷰트는 복수 저장할 때 사용.
//		  모델어트리뷰트는 뷰의 파라미터값과 vo클래스의 필드명(정확히는 세터명)이 같은 것을 매핑함.
//		 @ModelAttribute BoardQnA b로 받아오면서 뷰의 name속성 파라미터랑 vo 클래스의 필드명(세터명)이랑 같아서 
//		  자연스럽게 받아올 수 있었지만 세터를 새로 지정하고 거기에 "qnaTitle" 스트링값을 새로 주었기 때문에 저값이 db에 저장된 것


		int result = bService.insertBoardQna(b);
		System.out.println(result);
 
		if (result > 0) {
			return "redirect:boardQna.bo";
		} else {
			throw new BoardException("문의사항 등록에 실패하였습니다.");
		}
	}

 

Service & DAO

//BoardService
int getQnaListCount();
ArrayList<BoardQnA> getBoardQnaList(PageInfo pi);
int insertBoardQna(BoardQnA b);	


// BoardServiceImpl
@Override
public int insertBoardQna(BoardQnA b) {
    return bDAO.insertBoardQna(sqlSession, b);
}

// BoardDAO
public int insertBoardQna(SqlSessionTemplate sqlSession, BoardQnA b) {
    return sqlSession.insert("boardMapper.insertBoardQna",b);
}

 

Board-mapper.xml

	<!-- QnA 조회 : 페이징처리1 - 총게시물 --> 
	<select id="getQnaListCount" resultType="_int"> <!-- resultType,resultMap 무조건 있어야함. 리절셋하고 나서 뭘로 받을지 정해줘야하기에 -->
		select count(*)
		from qna
		where qna_status = 'Y'
	</select>
	
<!-- QnA 조회 : 페이징처리2 - 필요 게시물 --> 
	<select id="getBoardQnaList" resultMap="boardQnaResultSet">
		select *
		from qna 
		where qna_status = 'Y'
		order by qna_no desc
	</select>
	<resultMap type="BoardQnA" id="boardQnaResultSet">	<!-- type="" 속성 별칭 설정하면 Board도 가능 -->
		<id column="QNA_NO" property="qnaNo"/> 					<!-- PK(기본키) -->
		<result column="QNA_TITLE" property="qnaTitle"/>		<!-- 일반 컬럼 -->
		<result column="QNA_CONTENT" property="qnaContent"/>  <!-- 위의 select태그에서 join해서 가져온 멤버테이블의 컬럼 nickname  -->
		<result column="QNA_CREATE_DATE" property="qnaCreateDate"/>
		<result column="QNA_MODIFY_DATE" property="qnaModifyDate"/>
		<result column="QNA_STATUS" property="qnaStatus"/>
		<result column="QNA_ANS_STATUS" property="qnaAnsStatus"/>
		<result column="EMAIL_ID" property="emailId"/>
	</resultMap>
    
    <insert id="insertBoardQna"> 
		insert into qna
		values(seq_qnaid.nextval, #{qnaTitle}, #{qnaContent}, sysdate, default, default, default, default)
	</insert>
728x90
반응형
728x90

 

문의사항 수정 게시판 만들기

boardQnaUpdateForm.html

 

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> TREND_EATER </title>

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.14.3/dist/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.14.3/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.14.3/dist/js/uikit-icons.min.js"></script>

<link rel="stylesheet" type="text/css" href="boardWriteForm.css">

</head>
<body>

<div class="head">
    <h2>1:1 문의</h2>
</div>

<div class="main">
    
    <div class="QuesType">
        <div class="uk-form-select innerQuesType" data-uk-form-select>
            <div class="innerQuesTypeLeft">
                <span>유형</span>
            </div>
            <div class="innerQuesTypeRight">
                <select>
                    <option value="1" name="1">주문/결제/반품/교환문의</option>
                    <option value="2">이벤트/쿠폰/적립금문의</option>
                    <option value="3">상품문의</option>
                    <option value="4">배송문의</option>
                    <option value="5">상품 누락 문의</option>
                    <option value="6" name="6">기타문의</option>
                </select>
                <c:if test="${ name eq 1 }">
                    <select>
                        <option value="">주문취소 해주세요</option>
                        <option value="">상품 반품을 원해요</option>
                        <option value="">상품 교환을 원해요</option>
                        <option value="">주문/결제는 어떻게 하나요?</option>
                        <option value="">오류로 주문/결제가 안 돼요</option>
                        <option value="">기타</option>
                    </select>
                </c:if>
            </div>             
        </div>
    </div>
    <div class="QuesProduct">

    </div>
    <div class="QuesTitle">
        <span>제목</span>
        <input class="uk-input" value="${ b.qnaTitle }">
    </div>
    <div class="QuesContent">
        <span>내용</span>
        <textarea class="uk-textarea">${b.qnaContent}</textarea>

        
    </div>


    <div class="submitButton">
        <button onclick="location.href='boardQna.bo?page'">수정 완료</button>
        <button onclick="location.href='boardQna.bo?page'">목록으로</button> <!-- 3번페이지면 3번으로 돌아갈 수 있게 page-->
    </div>

</div>


</body>
</html>

 

CSS

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css); 



body{
    font-family: "Noto Sans";
}

h2{
    border-bottom: 2px solid black;
    padding: 2%;
}
span{
    width:100px;
    padding-right: 30px;
    margin: 0 auto;
    text-align: center;
}



.head{
    width:1000px;
    align-items: center;
    margin-left: 10px;
    margin: 0 auto;
    
}

.main{
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;

}
.QuesType{
    display: flex;
    padding:1% 0;
}
.innerQuesType{
    display: flex;  
}
.innerQuesTypeLeft{
    width:100px;
    text-align: center;
    padding: 0 13px;
}

.QuesTitle{
    display: flex;
    padding:1% 0;
}
.QuesTitle > input{
    width:890px;
}

.QuesContent{
    display: flex;
    height:500px;
    padding:1% 0;
    word-break: normal;
}
.QuesContent > textarea{
    width:890px;
    padding:1% 0;
}


.submitButton{
    width:1000px;
    text-align: center;
    margin:2% auto;
    padding-right: 3%;
    
}
.submitButton > button{
    width:150px;
    height:35px;
    background-color: #FE8F8F;
    border: 1px solid #FF5C58;
    color:#fff;
}

/**********
1.보드라이트폼 전체 가운데 정렬
2.유형,제목,내용 정렬


********/

 

728x90
반응형
728x90

 

 

제목과 내요을 넣고 게시물 등록 눌렀는데 왜 db에는 null이 들어왔을까?

화면단 만드느라 정신팔려서 서버로 데이터를 보내는 값을 만들어주지 않았기 때문

 

 

 

 

728x90
반응형
728x90

 

 

 

코드에서 중점적으로 봐야할 부분

(코드를 끌어온다거나 새로 만들면서 중점적으로 봐야할 부분)

 

1. 컨트롤러가 dispatcher servlet으로부터 어떤 url로 받아올지에 대한 url 설정 부분

2.page : 해당 게시물을 상세보기로 들어갔다 뒤로가기해서 나와도 해당 페이지 번호를 유지하기 위해 필요한 값

3.required=false 옵션을 안해놓으면 항상 값이 들어가야하기 때문에 처음 페이지 들어갈 때는 page값에 수가 없으므로 에러 발생

4.Integer page : page가 int라 null 못들어가서 int 타입으로 받으면 parsing 해줘야하니 래퍼클래스(wrapper)로 한번에 받아옴

5. model과 ModelAndView 둘 중 하나 선택가능

핵심 데이터값이라 알아둬야하는 변수명

6. service를 거쳐 dao로 보낼 메소드명

7.setViewName() 메소드를 통해 어느 뷰를 보여줄 지 결정하는 부분

8.아래처럼 예외(exception)처리해도 되고, 에러페이지를 따로 만들어서 거기로 에러메시지 값과 함께 보내도됨 

9.return  : 리턴 유무 여부와 리턴할 데이터타입 잊지말고 체크

 

 

728x90
반응형
728x90

 

 

<select>과  <option>을 이중 사용해서 

카테고리를 고를 수 있게 뷰화면 구성

아직 1번 카테고리와 연동되서 2번카테고리의 옵션이 나오게는 미구현

 

※주의사항

placeholder사용 시, textarea나 input태그에서 엔터나 공백이 하나라도 있으면 placeholder가 글씨가 써진 걸로 인식되어

안나오게 되니 코드가 동작하지 않는다거나 문제가 있는걸로 오해하기 쉬움

 

 

HTML(JSP)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> TREND_EATER 문의하기 </title>

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.14.3/dist/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.14.3/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.14.3/dist/js/uikit-icons.min.js"></script>

<link rel="stylesheet" type="text/css" href="${ pageContext.servletContext.contextPath }/resources/css/boardQnaWriteForm.css">

</head>
<body>

<div class="head">
    <h2>1:1 문의</h2>
</div>

<div class="main">
    
    <div class="QuesType">
        <div class="uk-form-select innerQuesType" data-uk-form-select>
            <div class="innerQuesTypeLeft">
                <span>유형</span>
            </div>
            <div class="innerQuesTypeRight">
                <select>
                    <option value="1" name="1">주문/결제/반품/교환문의</option>
                    <option value="2">이벤트/쿠폰/적립금문의</option>
                    <option value="3">상품문의</option>
                    <option value="4">배송문의</option>
                    <option value="5">상품 누락 문의</option>
                    <option value="6" name="6">기타문의</option>
                </select>
                <c:if test="${ name eq 1 }">
                    <select>
                        <option value="">주문취소 해주세요</option>
                        <option value="">상품 반품을 원해요</option>
                        <option value="">상품 교환을 원해요</option>
                        <option value="">주문/결제는 어떻게 하나요?</option>
                        <option value="">오류로 주문/결제가 안 돼요</option>
                        <option value="">기타</option>
                    </select>
                </c:if>
            </div>             
        </div>
    </div>
    <div class="QuesProduct">
			제품문의 선택 시 생기는 제품 카테고리
    </div>
    <div class="QuesTitle">
        <span>제목</span>
        <input class="uk-input">
    </div>
    <div class="QuesContent">
        <span>내용</span>
        <textarea class="uk-textarea" 
            placeholder=
            "  1:1 문의 작성 전 확인해주세요
  
  반품 / 환불
  제품 하자 혹은 이상으로 반품(환불)이 필요한 경우 사진과 함께 구체적인 내용을 남겨주세요.

  주문취소
  [배송준비중] 이전까지 주문 취소 가능합니다.
  [마이페이지]에서 직접 취소하실 수 있습니다.
  생산이 시작된 [상품준비중] 이후에는 취소가 제한되는 점 고객님의 양해 부탁드립니다.
  [배송준비중] 이후에는 취소가 불가하니, 반품으로 진행해주세요.(상품에 따라 반품 불가할 수 있음)
  주문마감 시간에 임박할수록 취소 가능 시간이 짧아질 수 있습니다.
  일부 예약상품은 배송3-4일 전에만 취소 가능합니다.

  ※주문 상품의 부분 취소는 불가능합니다. 전체 주문취소 후 다시 구매해주세요

  배송
  주문 완료 후 배송 방법은 변경 불가능합니다
  배송일 배송시간 지정은 불가능합니다.
  ※ 전화번호, 이메일, 주소, 계좌번호 등의 상세 개인정보가 문의 내용에 저장되지 않도록 주의바랍니다.

"></textarea>

        
    </div>

    <div class="submitButton">
        <button type="submit" onclick="location.href='boardQnaWriteForm.bo'">등록</button>
    </div>

	<script>
	
	
	</script>

</div>


</body>
</html>

 

CSS

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css); 



body{
    font-family: "Noto Sans";
}

h2{
    border-bottom: 2px solid black;
    padding: 2%;
}
span{
    width:100px;
    padding-right: 30px;
    margin: 0 auto;
    text-align: center;
}



.head{
    width:1000px;
    align-items: center;
    margin-left: 10px;
    margin: 0 auto;
    
}

.main{
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;

}
.QuesType{
    display: flex;
    padding:1% 0;
}
.innerQuesType{
    display: flex;  
}
.innerQuesTypeLeft{
    width:100px;
    text-align: center;
    padding: 0 13px;
}

.QuesTitle{
    display: flex;
    padding:1% 0;
}
.QuesTitle > input{
    width:890px;
}

.QuesContent{
    display: flex;
    height:500px;
    padding:1% 0;
    word-break: normal;
}
.QuesContent > textarea{
    width:890px;
    padding:1% 0;
}


.submitButton{
    width:1000px;
    text-align: center;
    margin:2% auto;
    padding-right: 3%;
    
}
.submitButton > button{
    width:150px;
    height:35px;
    background-color: #FE8F8F;
    border: 1px solid #FF5C58;
    color:#fff;
}

/**********
1.보드라이트폼 전체 가운데 정렬
2.유형,제목,내용 정렬


********/

 

728x90
반응형
728x90

 

 

 

html에 사용할 코드

<i class="fa-solid fa-a"></i>

 

 

 

스크립트 연결도 했는데 왜 안되는지 모르겠어서 

 

아래처럼 SVG 파일을 다운 받아서 IMG태그에 직접 연결해서 해결!

728x90
반응형
728x90

 

클릭하여 질문 내용과 답변 내용이 보이도록 토글로 추가로 내용이 보이도록 처리

 

추후에 작성일과 답변상태 라인 맞추고 검색 기능 추가

수정 삭제 추가

 

 

 

HTML

<!-- 
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 
<%@ page import="com.fpj.trendeater.board.model.vo.Board" %> -->

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> TREND_EATER QnA </title>



<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.14.3/dist/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.14.3/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.14.3/dist/js/uikit-icons.min.js"></script>


<script src="${ pageContext.servletContext.contextPath }/resources/js/jquery-3.6.0.min.js"></script> 

<!-- font awesome -->
<script src="https://kit.fontawesome.com/76295929c4.js" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />


<link rel="stylesheet" type="text/css" href="board_qna.css">
<!-- <link rel="stylesheet" type="text/css" href="${ pageContext.servletContext.contextPath }/resources/css/board_qna.css"> -->
  


</head>
    
<body>

<div class="container">

<!-- 헤더푸터는 클래스명 신경써야함
다른 페이지 임포트 되는거에는 css 선택자 적용안됨
메인 : 페이지가 달라지는거니 상관없다 -->

    <div class="main">
        <div class="infoContainer">
            <div class="titleArea">
                <h3 > 1:1 문의 </h3>
            </div>
            <div>
                <table>
                    <thead>
                        <tr>
                            <th>번호</th>
                            <th>제목</th>
                            <!-- <th>작성자</th> 삭제 요망 -->
                            <th>작성일</th>
                            <th>답변상태</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
                <br>
            </div>
            
            <c:forEach var="b" items="${ list }">
            <details>
                <summary> 
                        <div>
                            <table>
                                <tr class="tbodyContent">
                                    <td class="tbodyTd1" width="65">${ qna.QnANo } </td>
                                    <td class="tbodyTd2" style="text-align:left">${ qna.QnATitle }</td>
                                    <td class="tbodyTd4" width="100">${ qna.QnACreateDate }</td>
                                    <td class="tbodyTd5" width="50">${ qna.QnAAnsStatus }</td>
                                </tr>   
                            </table>
                        </div>
                </summary>
                <div class="QnaToggleOpen">
                    <ul>
                        <div class="QnaToggleContent">
                        <li>
                            <div>
                                <img src="img/icons/icons_board_qna_q-solid.svg" style="width: 15px;">
                                <p> 
                                    { qna.Content} 
                                    Q의 아이콘 : 질문 내용
                                </p>
                            </div><br>
                            <div>
                                <!-- 답변 상태 qna.QnAAnsStatus가 Y이면 A아이콘이 나타나는 c:if 사용 -->
                                <img src="img/icons/icons_board_qna_a-solid.svg" style="width: 15px;">
                                <i class="fa-solid fa-circle-a fa-fw"></i> A의 아이콘 : 답변 내용
                            </div>
                        </li>
                        <br>
                        </div>  
                    </ul>
                    <div class="QnaToggleOpen_Button">
                        <button type="submit">수정</button>
                        <button type="submit">삭제</button>
                    </div><br>
                </div>
            </details>  
            
            <br>

            <br>
            <div class="submitButton">
                <button type="submit">문의하기</button>
            </div>
        

            <br>
            <div class="boardSearchBox">
                <div>
                    <span>검색어</span>
                    <ul>
                        <li><label><input type="checkbox">제목</label></li>
                        <li><label><input type="checkbox">내용</label></li>
                    </ul>
                </div>
                <div class="searchBar">
                    <input type="search">
                    <input type="image" name="submit">
                </div>
                <br>
            </div>
        </div>

    
    </div>


</body>
</html>

 

CSS

@import "reset.css";    
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css); 


html, body {
    box-sizing: border-box;
}
summary{
    outline: none;
    cursor : pointer;
    display: -webkit-box;
    /* display: none;  */
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.main{
    width: 100%;
    display: flex;
    justify-content: center;
    font-family:'Noto Sans KR', sans-serif;
    
}

.main .infoContainer {
    flex-basis: 80%;
    height: 800px;
    background-color: white;
    
}
.infoContainer  table{
    margin: 0 auto;
    width: 800px;
    text-align: center;
} 

.titleArea{
    display: flex;
    /* justify-content: center; */
    gap: 3%; 
    align-items: center;
    padding: 2% 11%;
    width:820px;
    margin: 0 auto;
}

.titleArea > h3{
    font-size: 22px; font-weight: 500;
}
.titleArea > span{
    font-size: 13px; color:rgb(135, 133, 133);
}


/*********************************************/


thead tr{
    width: 100%;
    height: 2rem;
        min-height: 20px;
        max-height: 50px;
    border-top: 2px solid rgb(254, 143, 143)  ;
    border-bottom: 2px solid #FE8F8F;
}
thead th{
    padding: 2% 1%;
    vertical-align: middle;
    text-align: center;
    font-size: small;
    font-weight: none;
}
tbody > tr{
    height: 2rem;
    /* border-top: 1px solid lightgray; */
    border-bottom: 1px solid lightgray;
    align-content: center;
    vertical-align: middle;
}
tbody > tr > td{
    height: 2rem;
    font-size: small;
    font-family: noto sans;
    align-content: center;
    vertical-align: middle;
    letter-spacing: 0px;
}
tbody td:nth-last-child(1){
    color: gray;
} 
tbody td:nth-last-child(2){
    color: gray;
} 

/*********************************************/

.QnaToggle{
    text-align: center;
    margin: 0 auto;
    border : none;
}
/* .QnaToggleOpen > p{
    background-color: lightgray;
    text-align: center;
    margin: 0 auto;
} */
.QnaToggleOpen li{
    background-color: rgb(245, 245, 245);
    width:800px;
    min-height: 80px;
    margin: 0 auto;
}
/* 아래꺼 필요없는 듯? */
/* .QnaToggleOpen > ul > li > button{
    color:#FE8F8F;
    border : 0px;
    background-color: #fff;
    font-weight: 500;
    float: right;
} */
.QnaToggleOpen_Button{
    float: right;
    margin: 2% 2%;
    margin-right: 100px;
}
.QnaToggleOpen_Button > button{
    color:#FE8F8F;
    border : 0px;
    background-color: #fff;
    font-weight: 500;
}

.QnaToggleContent{
    margin: 0 auto;
}
.QnaToggleContent > li{
    width:740px;
    padding:3%;
}    

/*********************************************/

.submitButton{
    width:1000px;
    text-align: center;
    margin:2% auto;
    
}
.submitButton > button{
    width:150px;
    height:35px;
    background-color: #FE8F8F;
    border: 1px solid #FF5C58;
    color:#fff;
}



/*********************************************/


.boardSearchBox {
    /* justify-content의 letf,right,center 위치 외에 세부조정하고 싶으면,
     justify-content: space-between으로 공백을 줘서 조정하면 됨*/
    display: flex;
    justify-content: space-between; /* space-between의 디폴트 범위지정값은 나머지 텍스트나 범위를 제외한 전부를 먼저 준다 */
    align-items: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #FCD2D1;
    width:800px;
    margin: 0 auto;
}

.boardSearchBox > div {
    display: flex;
    gap: 15px;
    padding: 0 2%;
}
.boardSearchBox span {
    font-size: x-small;
    padding-top: 5px;
    align-content: center;
    vertical-align: middle;
}

.boardSearchBox > div > ul {
    display: flex;
    /* justify-content: space-between;  */
    list-style: none;
    gap: 10px;
    font-size: smaller;
    margin-right: 350px;
}
.boardSearchBox > div.searchBar{
    /* boardSearchBox 아래있는 div태그 중에 이름이 searchBar인 태그에만 적용 */
    display: flex;
    gap : 0px;
    
}
/* 
.boardSearchBox > div .searchBar
boardSearchBox 아래있는 div태그 자식 요소 중에 seachBar태그에만 적용  */

.searchBar > input{
    display: flex;
    border: 1px solid lightgray;
}


/*********************************************/

 

 

728x90
반응형
728x90

 

위의 이미지눈 게시판 페이징 처리한 화면이다

 

윗줄은 현재페이지가 보이는 않는 문제가 있었고

아랫줄은 해결하고 [ ]로 현재페이지 숫자를 감싸서 현재 어떤 페이지를 보고 있는지를 나타나게 해준 화면이다

가운데 페이지 부분에 ${ p eq pi.currentPage }, ${ p ne pi.currentPage }으로 if문으로 나눠서

같을 경우 페이지 번호가 나오고 눌리지 않게하고, 다를 경우 해당 번호의 url로 이동할 수 있게 해서 해결했다

<!-- 페이지 -->
<c:forEach var="p" begin="${ pi.startPage }" end="${ pi.endPage }">
   <c:if test="${ p eq pi.currentPage }">
      <li class="uk-active"><span>[${ p }]</span></li>
   </c:if>

   <c:if test="${ p ne pi.currentPage }">
      <c:url var="pagination" value="notice.bo">
         <c:param name="page" value="${ p }"/>
      </c:url>
       <li><a href="${ pagination }">${ p }</a></li>&nbsp;
   </c:if>
</c:forEach>

추가로 원래 코드에서 디자인을 개선해보고자 UIKit로 다시 만들어보았다

 

 

html  css + EL, JSTL 코드

    <!-- Pagination -->
                <div class="pagination">
                        <!-- [이전] -->
                    <c:if test="${ pi.currentPage <= 1 }">
                        <!-- [이전]  ≪  &nbsp; -->
                        	 ≪  &nbsp;  <!-- 1페이지에서만 나오는 기호 설정. 마찬가지로 마지막페이지에서 나오는 기호도 따로 지정해줘야함 -->
                    </c:if>
                    <c:if test="${ pi.currentPage > 1 }">
                        <c:url var="before" value="notice.bo">
                            <c:param name="page" value="${ pi.currentPage - 1 }"/>
                        </c:url>
                        <%-- <a href="${ before }">[이전]</a> &nbsp; --%>
                        <a href="${ before }">≪</a> &nbsp;
                    </c:if>
                    
                    <!-- 페이지 -->
                    <c:forEach var="p" begin="${ pi.startPage }" end="${ pi.endPage }">
                        <c:if test="${ p eq pi.currentPage }">
                            <font color="red" size="4"><b>[${ p }]</b></font>
                        </c:if>
                        
                        <c:if test="${ p ne pi.currentPage }">
                            <c:url var="pagination" value="notice.bo">               <!-- 현재페이지가 지워지는 문제 화면에서  -->
                                <c:param name="page" value="${ p }"/>
                            </c:url>
                            <a href="${ pagination }">${ p }</a> &nbsp;
                        </c:if>
                    </c:forEach>
                    
                    <!-- [다음] -->
                    <c:if test="${ pi.currentPage >= pi.maxPage }">
                        <!-- [다음]  ≫ -->
                     	 ≫		<!-- 마지막 페이지에서만 나오는 기호 설정. 마찬가지로 첫페이지에서 나오는 기호도 따로 지정해줘야함 -->
                    </c:if>
                    <c:if test="${ pi.currentPage < pi.maxPage }">
                        <c:url var="after" value="notice.bo">
                            <c:param name="page" value="${ pi.currentPage + 1 }"/>
                        </c:url> 
                        <%-- <a href="${ after }">[다음]</a> --%>
                        <a href="${ after }"> ≫ </a>
                    </c:if>        
                </div>

 

UIKit  + EL, JSTL 코드

<!-- 페이징 처리 -->
         <ul class="uk-pagination uk-flex-center" uk-margin>
            <!-- [이전] -->
            <c:if test="${ pi.currentPage <= 1 }">
               <li><a href="#"><span uk-pagination-previous></span></a></li> &nbsp;
            </c:if>
            <c:if test="${ pi.currentPage > 1 }">
               <c:url var="before" value="notice.bo">
                  <c:param name="page" value="${ pi.currentPage - 1 }"/>
               </c:url>
               <li><a href="${ before }"><span uk-pagination-previous></span></a></li>
            </c:if>
            
            <!-- 페이지 -->
            <c:forEach var="p" begin="${ pi.startPage }" end="${ pi.endPage }">
               <c:if test="${ p eq pi.currentPage }">
                  <li class="uk-active"><span>[${ p }]</span></li>
               </c:if>
               
               <c:if test="${ p ne pi.currentPage }">
                  <c:url var="pagination" value="notice.bo">
                     <c:param name="page" value="${ p }"/>
                  </c:url>
                   <li><a href="${ pagination }">${ p }</a></li>&nbsp;
               </c:if>
            </c:forEach>
            
            <!-- [다음] -->
            <c:if test="${ pi.currentPage >= pi.maxPage }">
               <li><a href="#"><span uk-pagination-next></span></a></li> &nbsp;
            </c:if>
            <c:if test="${ pi.currentPage < pi.maxPage }">
               <c:url var="after" value="notice.bo">
                  <c:param name="page" value="${ pi.currentPage + 1 }"/>
               </c:url> 
               <li><a href="${ after }"><span uk-pagination-next></span></a></li>
            </c:if>
     	 </ul>

 

 

728x90
반응형
728x90

 

 

윗 쪽은 테이블로 해보고

내용 부분은 div태그로 내용을 받게 해보았다

화면 가운데 오도록 div태그 사용할 때 margin: 0 auto;를 참 유용하게 잘 배운 것 같다

이제 좀 css가 좀 감이 오는 느낌이랄까? 힘내자

 

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

<link rel="stylesheet" href="noticeDetail1.css" type="text/css">

</head>
<body>

    <div class="title">
        <h2>공지사항</h2>   
        <p>TRENT EATER의 소식들과 유용한 정보들을 한곳에서 확인하세요.</p>
    </div>    

    <table class="tableWhole">
            <thead>
                <tr>
                    <th>제목</th>
                        <td style="width: 1050px;">${ b.boardTitle } [가격인상공지] [송월타월] 카운테스마라 클래스 1장 외 4건 (2022 6. 27 ~)</td>
                </tr>
                <tr>
                    <th>작성자</th>
                    <td>${b.nickName}</td>
                </tr>
                <tr>
                    <th>작성일</th>
                    <td>${b.boardCreateDate}</td>
                    <th>조회수</th>
                    <td>${b.boardCount}</td>
                </tr>
            </thead>
    </table>
    

    <div class="content">
        <p>
        ${b.boardContent}
        
        </p>
    </div>
    <div class="listButton">
        <button type="submit">목록</button>
    </div>

    

</body>
</html>

 

CSS

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css); 



body{
    font-family: "Noto Sans";
}

.footerMain {
    border-top: 1px solid lightgray;
}

.footerTop{
    width: 100%;
    height: 100%;
    width: 1200px;
    display: flex;
    align-items: center; 
    margin: 0 auto;  
    justify-content: space-around;
}

/*************************footerLeft****************************/

.footerLeft {
    display: flex;
    flex-direction: column;
    width:600px;
}

.footerLeft > h2{  /* 고객센터 글씨 */
    font-size: 20px;
    padding:2%;
    margin-top: 2%;
}
.footerLeft > div > div span{
    display: flex;
    line-height: normal;
    padding-top: 8px;
    width:150px; /************/
}    

.footerLeft > div{
    display: flex;
    /* flex-wrap: wrap;  */ /* flex-wrap: wrap : 길면 줄바꿈 */
    text-align: start;
} 
.footerLeft > div > div > button{
    background: white;
    width: 145px;
    height:50px;
    border : 1px solid lightgray;
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
    align-items: center;
} 

.callCenter div:first-child{ /* 고객행복센터 */
    font-size: 28px;
    font-weight: 800; 
    padding : 2%;
    width: 145px;
}
.footerLeftP{
    line-height: normal;
    padding-top:3%;
    padding-left:2%;
    width: 400px;
}
.kakaotalkQuestion div:first-child{
    padding : 2%;
    width: 145px;
}
.personalQuestion div:first-child{
    padding : 2%;
    width: 145px;
}
.bigOrderQuestion div:first-child{
    padding : 2%;
    width: 145px;
}


/* tbody td:nth-last-child(1) */
/* .footerLeft{ 직접에는 안먹히고 상위 태그에서 적용됨
    display: inline-block;
    width: 600px;
}
.footerRighter{
    display: inline-block;
    width: 600px;
} */


/*************************footerRight****************************/
.footerRight{
    width:570px;
}

.footerRight > ul{
    display: flex;
    width:100%;
}

.footerRight li{
    list-style:none;
    display: inline-block;
    width:80px;
}

.footerRightMiddle{
    color:rgb(165, 164, 164);
    font-size: 12px;
    line-height: normal; /* 1px이나 1%로하면 세로줄이 좁게 압축되고 normal하니 적절히 상하 간격이 생김*/
}
.footerRightMiddle > a{
    text-decoration:none;
    color:#FE8F8F;
}

.footerRightSNS{
    padding: 5% 0;
}
.footerRightSNS img{
    padding:1%;
    width:30px;
}



/*************************footerMiddle****************************/
.footerMiddle{
    display: flex;
    justify-content: space-between;
    
    padding: 3% 5%;
    width:100%; 
    height: 100%;
        max-width: 1100px;
        max-height: 50px;
    margin: 0 auto; /* 센터정렬 방법 : margin 0 auto* /
    /* 부모태그의 넓이를 모르는데 자식태그가 어떤걸 기준을 줄지 모르기 때문에
        부모태그의 width100%를 설정해줘야함

        이미지 크기 조절 방법1
        미디어쿼리
        미디어쿼리로 웹사이트 크기마다 이미지크기를 고정크기로 줘서 움직이게 하면됨

        이미지 크기 조절 방법2
        이미지 하나마다 div태그로 컨테이너를 줘서 width100%로 이미지를 div태그 컨테이너 안에
        꽉채우고 이미지를 채우는 방식이 반응형이나 모바일웹에도 유리함


    */
}
.footerMiddle > div{
    display: flex;
    /* flex-basis: 33.3%; */
    font-size: 10px;
    font-weight: 500;
    color: #999999;
    /* width:33%; */
    /* height:33%; */
    align-items: center;
    line-height: normal;

}
.footerMiddle > div img{
    width:50px;
}

.footerMiddle div p{
    margin: 8px;
}

.footerMiddle div.authentication3 > p{
    display: inline-block;
    width:200px;
    
}


.footerBottom{
    background-color: #f7f7f7;
    color: #999999;
    letter-spacing: -.2px;
    font-weight: 400;
    font-size: 10px;
    
    text-align: center;
    line-height: normal;
    letter-spacing: -1px;

    padding: 2%;
}
728x90
반응형

+ Recent posts