[Spring][쇼핑몰 프로젝트] 18. 상품 등록(1)

YB·2023년 2월 20일
Spring쇼핑몰
0

쇼핑몰

목록 보기
26/40
post-thumbnail

목표

상품 등록 기능을 구현하고자 합니다. 전체적인 구현 방향은 "회원 등록", "작가 등록"과 동일하지만 "상품 등록"구현에서는 '팝업창을 통한 작가 선택', '제이쿼리 캘린더 라이브러리 활용', 'JSON을 활용한 캘린더 데이터 출력', '위지윅' 적용과 같은 기능들을 적용시킬 것입니다.

1. 상품 등록 테이블

상품 테이블을 구성할 컬럼들을 다음과 같이 정하였습니다.

  • 상품 ID
  • 상품 이름
  • 작가 ID
  • 출판일
  • 출판사
  • 카테고르 코드
  • 책 가격
  • 책(상품) 재고
  • 할인율
  • 책 소개
  • 책 내용(목차)
  • 등록 날짜
  • 수정 날짜

정해진 컬럼 구성을 가지고 아래와 같이 '상품 테이블' 생성 쿼리를 입력하여 테이블을 생성합니다.

-- 상품 테이블 
create table test_book(
    bookId int primary key auto_increment,
    bookName varchar(50) not null,
    authorId int,
    publeYear Date not null,
    publisher varchar(70) not null,
    cateCode varchar(30),
    bookPrice int not null,
    bookStock int not null,
    bookDiscount decimal(2,2),
    bookIntro text,
    bookContents text,
    regDate timestamp default now(),
    updateDate timestamp default now()
);

  • 출판일(publeYear)경우 Date타입으로 지정하였습니다. 행 데이터를 삽입할 때 "yyyy-mm-dd"와 같은 형식으로 삽입을 하면 됩니다.

  • 상품ID(bookId)경우 자동으로 숫자가 삽입되도록 autoincrement를 사용하였습니다.

  • 할인율(bookDiscount)은 소수 둘째 자리까지 혀용되는 고정 소수점 타입으로 지정하였습니다.

  • 책소개(bookIntro), 책내용(bookContents)경우 위지윅을 활용하여 작성된 데이터를 등록시키려고 합니다. 위지윅을 사용하게 되면 태그가 자동으로 삽입되게 되어 길지 않은 길이의 글을 작성하더라도 DB에 등록 시에는 태그를 포함하면 매우 많은 데이터들이 등록되게 됩니다. 따라서 대량의 데이터를 등록할 수 있도록 TEXT타입을 사용하였습니다.

  • 작가ID(authorId), 카테고리코드(cateCode) 각가 '작가 테이블(test_author)'과 카테고리 테이블(test_bcate)'에 있는 데이터만 등록되도록 외래키를 지정해주어야 합니다. 하지만 외래키 등록은 작업의 편의를 위해서 '작가 팝업창 등록', '카테고리 리스트 출력' 기능을 '상품 등록' 페이지에 적용한 뒤에 등록해주도록 하겠습니다.

2. 카테고리 테이블

1) 테이블 생성

아래의 쿼리를 입력하여 카테고리 테이블(test_bcate)을 생성합니다.

create table test_bcate(
    tier int(1) not null,
    cateName varchar(30) not null,
    cateCode varchar(30) not null,
    cateParent varchar(30),
    primary key(cateCode),
    foreign key(cateParent) references test_bcate(cateCode) 
);

  • 기본키는 cateCode를 지정해주었습니다.

  • cateParent컬럼에 들어갈 값은 cateCode에 있는 값만 등록할 수 있도록 외래키 설정을 해주었습니다.

2) 카테고리 코드 규칙

책 상품을 3가지 단계로 분류 할 것입니다. 1단계 분류는 '국내', '국외'의 구분입니다. 2단계는 '소설', '교양', '인문', '과학', '철학'과 같이 큰 범주의 책 분야로 분류이고, 3단계는 2단계의 분류에서 좀 더 세분화된 분야의 범주로 분류하였습니다.

이러한 3개의 분류를 가지고 카테고리 코드의 규칙을 아래와 같이 정하였습니다.

위의 '카테고리 코드'와 더불어 "카테고리 테이블(test_bcate)"에는 '카테고리 이름(cateName)', '상위 카테고리(cateParent)', '카테고리 등급(tier)'칼럼들로 구성할 것입니다.

  • '상위 카테고리(cateParent)'는 어떠한 상위 카테고리의 하위 카테고리인지 알 수 있는 역할을 합니다.

  • '카테고리 등급(tier)'경우 해당 카테고리 번호가 위에서 분류한 1단계, 2단계, 3단계 중 어떠한 단계인지를 표시합니다.

3) 데이터 삽입

데이터베이스 명령을 통해 직접 카테고리 코드 데이터를 삽입하겠습니다.

위의 카테고리 코드 규칙에 근거하여 아래의 데이터를 삽입하였습니다.

-- 카테고리 테이블 데이터
insert into test_bcate(tier, cateName, cateCode) values (1, '국내', '100000');
    insert into test_bcate(tier, cateName, cateCode, cateParent) values (2, '소설', '101000','100000');    
        insert into test_bcate(tier, cateName, cateCode, cateParent) values (3, '한국소설', '101001','101000');
        insert into test_bcate(tier, cateName, cateCode, cateParent) values (3, '영미소설', '101002','101000');
        insert into test_bcate(tier, cateName, cateCode, cateParent) values (3, '일본소설', '101003','101000');
    insert into test_bcate(tier, cateName, cateCode, cateParent) values (2, '시/에세이', '102000','100000');    
        insert into test_bcate(tier, cateName, cateCode, cateParent) values (3, '한국시', '102001','102000');    
        insert into test_bcate(tier, cateName, cateCode, cateParent) values (3, '해외시', '102002','102000');    
    insert into test_bcate(tier, cateName, cateCode, cateParent) values (2, '경제/경영', '103000','100000');    
        insert into test_bcate(tier, cateName, cateCode, cateParent) values (3, '경영일반', '103001','103000');    
        insert into test_bcate(tier, cateName, cateCode, cateParent) values (3, '경영이론', '103002','103000');    
        insert into test_bcate(tier, cateName, cateCode, cateParent) values (3, '경제일반', '103003','103000');    
        insert into test_bcate(tier, cateName, cateCode, cateParent) values (3, '경제이론', '103004','103000');    
    insert into test_bcate(tier, cateName, cateCode, cateParent) values (2, '자기계발', '104000','100000');    
        insert into test_bcate(tier, cateName, cateCode, cateParent) values (3, '성공/처세', '104001','104000');    
        insert into test_bcate(tier, cateName, cateCode, cateParent) values (3, '자기능력계발', '104002','104000');    
        insert into test_bcate(tier, cateName, cateCode, cateParent) values (3, '인간관계', '104003','104000');    
    insert into test_bcate(tier, cateName, cateCode, cateParent) values (2, '인문', '105000','100000');    
        insert into test_bcate(tier, cateName, cateCode, cateParent) values (3, '심리학', '105001','105000');    
        insert into test_bcate(tier, cateName, cateCode, cateParent) values (3, '교육학', '105002','105000');    
        insert into test_bcate(tier, cateName, cateCode, cateParent) values (3, '철학', '105003','105000');    
    insert into test_bcate(tier, cateName, cateCode, cateParent) values (2, '역사/문화', '106000','100000');
        insert into test_bcate(tier, cateName, cateCode, cateParent) values (3, '역사일반', '106001','106000');
        insert into test_bcate(tier, cateName, cateCode, cateParent) values (3, '세계사', '106002','106000');
        insert into test_bcate(tier, cateName, cateCode, cateParent) values (3, '한국사', '106003','106000');
    insert into test_bcate(tier, cateName, cateCode, cateParent) values (2, '과학', '107000','100000');
        insert into test_bcate(tier, cateName, cateCode, cateParent) values (3, '과학이론', '107001','107000');
        insert into test_bcate(tier, cateName, cateCode, cateParent) values (3, '수학', '107002','107000');
        insert into test_bcate(tier, cateName, cateCode, cateParent) values (3, '물리학', '107003','107000');
insert into test_bcate(tier, cateName, cateCode) values (1, '국외', '200000');
    insert into test_bcate(tier, cateName, cateCode, cateParent) values (2, '문학', '201000','200000');    
        insert into test_bcate(tier, cateName, cateCode, cateParent) values (3, '소설', '201001','201000');    
        insert into test_bcate(tier, cateName, cateCode, cateParent) values (3, '시', '201002','201000');    
        insert into test_bcate(tier, cateName, cateCode, cateParent) values (3, '희곡', '201003','201000');    
    insert into test_bcate(tier, cateName, cateCode, cateParent) values (2, '인문/사회', '202000','200000');    
        insert into test_bcate(tier, cateName, cateCode, cateParent) values (3, '교양', '202001','202000');    
        insert into test_bcate(tier, cateName, cateCode, cateParent) values (3, '철학', '202002','202000');    
    insert into test_bcate(tier, cateName, cateCode, cateParent) values (2, '경제/경영', '203000','200000');    
        insert into test_bcate(tier, cateName, cateCode, cateParent) values (3, '경제학', '203001','203000');    
        insert into test_bcate(tier, cateName, cateCode, cateParent) values (3, '경영학', '203002','203000');    
        insert into test_bcate(tier, cateName, cateCode, cateParent) values (3, '투자', '203003','203000');    
    insert into test_bcate(tier, cateName, cateCode, cateParent) values (2, '과학/기술', '204000','200000');    
        insert into test_bcate(tier, cateName, cateCode, cateParent) values (3, '교양과학', '204001','204000');    
        insert into test_bcate(tier, cateName, cateCode, cateParent) values (3, '물리학', '204002','204000');    
        insert into test_bcate(tier, cateName, cateCode, cateParent) values (3, '수학', '204003','204000');

3. BookVO

먼저 '상품 테이블(test_book)'테이블의 데이터들을 한 번에 전달받거나 전달하기 위해 사용될 "BookVO.java" 클래스를 com.test.model에 만들어 줄 것입니다.

text_book테이블의 칼럼들을 변수로 선언해줍니다. 그리고 Lombok이 있을 경우 @Data 또는 @Getter / @Setter / @ToString 어노테이션을 작성해주고 없을 경우 생성해줍니다.

	/* 상품 id */
	private int bookId;
	
	/* 상품 이름 */
	private String bookName;
	
	/* 작가 id */
	private int authorId;
	
	/* 작가 이름 */
	private String authorName;
	
	/* 출판일 */
	private String publeYear;
	
	/* 출판사 */
	private String publisher;
	
	/* 카테고리 코드 */
	private String cateCode;
	
	/* 카테고리 이름 */
	private String cateName;
	
	/* 상품 가격 */
	private int bookPrice;
	
	/* 상품 재고 */
	private int bookStock;
	
	/* 상품 할인률(백분율) */
	private double bookDiscount;
	
	/* 상품 소개 */
	private String bookIntro;
	
	/* 상품 목차 */
	private String bookContents;
	
	/* 등록 날짜 */
	private Date regDate;
	
	/* 수정 날짜 */
	private Date updateDate;

4. Mapper 작업

AdminMapper.java
상품 등록 쿼리를 실행할 Mapper메서드를 작성해야합니다. 먼저 com.test.mapper패키지에 "AdminMapper.java"인터페이스를 생성한 뒤 아래의 메서드를 작성합니다.

	/* 상품 등록 */
	public void bookEnroll(BookVO book);

AdminMapper.xml
mapper.xml파일이 모여있는 경로에 AdminMapper.xml파일을 생성한 뒤 mbbatis를 사용할 수 있도록 기본적인 태그코드들을 추가합니다. 그리고 AdminMapper.java에서 선안한 메서드가 실행해야할 쿼리 코드를 작성합니다.

<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  <mapper namespace="com.test.mapper.AdminMapper">

	<!-- 상품 등록 -->
	<insert id="bookEnroll">
  		insert into test_book(bookName, authorId, publeYear, publisher, cateCode, bookPrice, bookStock, bookDiscount, bookIntro, bookContents)
		values(#{bookName},#{authorId}, #{publeYear},#{publisher},#{cateCode},#{bookPrice},#{bookStock},#{bookDiscount},#{bookIntro},#{bookContents})
	</insert>

  </mapper>

5. Service 작업

AdminService.java
com.test.service패키지에 "AdminService.java"인터페이스를 생성합니다. 그리고 '상품 등록'mapper메서드를 호출할 메서드를 작성합니다.

	/* 상품 등록 */
	public void bookEnroll(BookVO book);

AdminServiceImpl.java
com.test.service패키지에 "AdminServiceImpl.java"클래스를 생성합니다. "AdminService"를 상속받도록 implements키워드를 추가해주고, log메서드를 사용하기 위해 @log4j를 선언해주었습니다.

@Service 어노테이션을 작성해줍니다. 스프링이 해당 클래스가 Service역할을 하는 클래스로 인식할 수 있도록 하기 위함입니다. 그리고 AdminMapper인터페이스를 의존성 주입 해준 후, AdminService.java에서 선언한 메서드를 오버라이딩하여 구현합니다.

@Service
@Log4j
public class AdminServiceImpl implements AdminService {
	
	@Autowired
	private AdminMapper adminMapper;

	@Override
	public void bookEnroll(BookVO book) {
		
		log.info("(service)bookEnroll.....");
		
		adminMapper.bookEnroll(book);
		
	}

}

6. Controller 작업

AdminService의 메서드를 사용할 수 있도록 의존성 주입해줍니다. 그리고 AdminController.java에 '상품 등록'을 수행하는 url매핑 메서드를 작성합니다.

  • 상품 등록을 수행 후 "상품 관리(goodsManage.jsp)"페이지로 리다이렉트하여 이동하도록 리턴 값을 작성하였습니다.
  • 상품 등록이 완료되었음을 사용자에게 피드백하기 위해 상품 등록 후 '상품 관리 페이지'에 이동하였을 때 등록한 상품 이름과 함께 상품이 등록되었음을 알리는 경고창을 뜨도록 할 것입니다. 이를 위해 RedirectAttribute의 addFlashAttribute메서드를 활용하여 등록한 책 이름을 "enroll_result" 속성에 저장하였습니다.

	@Autowired
	private AdminService adminService;
    
	/* 상품 등록 */
    @PostMapping("/goodsEnroll")
	public String goodsEnrollPOST(BookVO book, RedirectAttributes rttr) {
		
		logger.info("goodsEnrollPOST.........." + book);
		
		adminService.bookEnroll(book);
		
		rttr.addFlashAttribute("enroll_result", book.getBookName());
		
		return "redirect:/admin/goodsManage";
		
	}

7. View 작업

goodsEnroll.jsp
사용자가 데이터를 입력하고 전송할 수 있도록 class속성이 "admin_content_subject"인 <div>태그 다음 공간에 아래의 코드를 추가해주었습니다. 그리고 취소 버튼과 등록 버튼이 동작하도록 JS코드도 추가하였습니다.

    <div class="admin_content_wrap">
        <div class="admin_content_subject"><span>상품 등록</span></div>
       	<div class="admin_content_main">
       		<form action="/admin/goodsEnroll" method="post"
       			id="enrollForm">
       			<div class="form_section">
       				<div class="form_section_title">
       					<label>책 제목</label>
       				</div>
       				<div class="form_section_content">
       					<input name="bookName">
       				</div>
       			</div>
       			<div class="form_section">
       				<div class="form_section_title">
       					<label>작가</label>
       				</div>
       				<div class="form_section_content">
       					<input name="authorId" value="0">
       				</div>
       			</div>
       			<div class="form_section">
       				<div class="form_section_title">
       					<label>출판일</label>
       				</div>
       				<div class="form_section_content">
       					<input name="publeYear">
       				</div>
       			</div>
       			<div class="form_section">
       				<div class="form_section_title">
       					<label>출판사</label>
       				</div>
       				<div class="form_section_content">
       					<input name="publisher">
       				</div>
       			</div>
       			<div class="form_section">
       				<div class="form_section_title">
       					<label>책 카테고리</label>
       				</div>
       				<div class="form_section_content">
       					<input name="cateCode">
       				</div>
       			</div>
       			<div class="form_section">
       				<div class="form_section_title">
       					<label>상품 가격</label>
       				</div>
       				<div class="form_section_content">
       					<input name="bookPrice" value="0">
       				</div>
       			</div>
       			<div class="form_section">
       				<div class="form_section_title">
       					<label>상품 재고</label>
       				</div>
       				<div class="form_section_content">
       					<input name="bookStock" value="0">
       				</div>
       			</div>
       			<div class="form_section">
       				<div class="form_section_title">
       					<label>상품 할인율</label>
       				</div>
       				<div class="form_section_content">
       					<input name="bookDiscount" value="0">
       				</div>
       			</div>
       			<div class="form_section">
       				<div class="form_section_title">
       					<label>책 소개</label>
       				</div>
       				<div class="form_section_content">
       					<input name="bookIntro">
       				</div>
       			</div>
       			<div class="form_section">
       				<div class="form_section_title">
       					<label>책 목차</label>
       				</div>
       				<div class="form_section_content">
       					<input name="bookContents">
       				</div>
       			</div>
       		</form>
       		<div class="btn_section">
       			<button id="cancelBtn" class="btn">취 소</button>
       			<button id="enrollBtn" class="btn enroll_btn">
       				등 록
       			</button>
       		</div>
       	</div>
    </div>
        
	<%@include file="../includes/admin/footer.jsp" %>
	
<script>

	let enrollForm = $("#enrollForm")
	
/* 취소 버튼 */
$("#cancelBtn").click(function(){
	
	location.href="/admin/goodsManage"
	
});

/* 상품 등록 버튼 */
$("#enrollBtn").on("click",function(e){
	
	e.preventDefault();
	
	enrollForm.submit();
	
});

</script>

goodsEnroll.css
goodsEnroll.jsp에서 추가한 코드들의 css설정을 추가해주기 위해 goodsEnroll.css에 아래의 코드를 추가하였습니다.

/* 관리자 컨텐츠 제목 영역 */
.admin_content_subject{            
    font-size: 40px;
    font-weight: bolder;
    padding-left: 15px;
    background-color: #6AAFE6;
    height: 80px;
    line-height: 80px;
    color: white;    
}

/* 관리자 컨텐츠 메인 영역 */
.form_section{
	width: 95%;
    margin-left: 2%;
    margin-top: 20px;
    border: 1px solid #dbdde2;
    background-color: #efefef;	
}
.form_section_title{
	padding: 20px 35px;	
}
.form_section_title label{
	display: block;
    font-size: 20px;
    font-weight: 800;
}
.form_section_content{
	padding: 20px 35px;
    border-top: 1px solid #dbdde2;	
}
.form_section_content input{
	width: 98%;
    height: 25px;
    font-size: 20px;
    padding: 5px 1%;
}
.form_section_content select{
	width: 98%;
    height: 35px;
    font-size: 20px;
    text-align-last: center;
}

goodsManage.jsp
'상품 관리 페이지(goodsManage.jsp)'에 상품 등록 결과를 피드백하기 위한 경고창을 띄우기 위해 서버로부터 전달받은 "enroll_result"속성을 활용한 아래의 JS코드를 작성합니다.

<script>
$(document).ready(function(){
	
	let eResult = '<c:out value="${enroll_result}"/>';
	
	checkResult(eResult);
	
	function checkResult(result){
		
		if(result === ''){
			return;
		}
		
		alert("상품'"+ eResult +"'을 등록하였습니다.");
		
	}

});
</script>

8. 위지윅 에디터 사용준비

CKEditor 홈페이지로 접속합니다. 그리고 화면의 Download를 클릭합니다.

이동된 화면에서 1번 란에 자신이 원하는 스타일의 에디터를 선택합니다. 저는 기본인 Classic을 선택하였습니다. 그리고 아래 2번란에 "Command line"은 Node.js를 사용하는 경우이고 "Zip package"는 'CKEditor5'라이브러리 파일들을 다운로드하여 프로젝트에 직접 넣어주는 방법입니다. 저는 "CDN"방식으로 아래의 <script>태그를 복사하여 삽입하는 방식을 사용할 것입니다.

goodsEnroll.jsp상단에 복사한 <script>태그를 삽입해줍니다.

9. 위지윅 에디터 적용

<textarea>태그를 대상으로 Javascript코드를 통해 CKEditor에디터를 적용합니다.

'책 소개', '책 목차'에 있는 기존의 <input>태그를 아래의 <textarea>태그로 변경합니다.

<textarea name="bookIntro" id="bookIntro_textarea"></textarea>
<textarea name="bookContents" id="bookContents_textarea"></textarea>

<textarea>에 CKEditor5를 적용시키기 위한 기본적 JS코드는 아래와 같습니다. 그리고 '책 소개', '책 목차' 입력란에 에디터를 적용시키기 위해 아래의 코드를 추가하였습니다.

/* 위지윅 적용 */

	/* 책 소개 */
	ClassicEditor
		.create(document.querySelector('#bookIntro_textarea'))
		.catch(error=>{
			console.error(error);
		});
	
	/* 책 목차 */	
	ClassicEditor
		.create(document.querySelector('#bookContents_textarea'))
		.catch(error=>{
			console.error(error);
		});

입력란 높이를 높여주기 위해 goodsEnroll.css파일에 아래의 css설정을 추가해주었습니다.

.ck-content {						/* ckeditor 높이 */
    height: 170px;
}

※ CKEditor는 원하는 기능들만 사용할 수 있도록 커스터마이징 할 수 있습니다. 아래의 CKEditor 홈페이지를 참고하시거나 검색을 통해 참고하셔서 수정해주시면 됩니다.
CKEdiotr커스터마이징

10. 달력 사용 준비

Datepicker위젯을 사용하기 위해선 2가지 방법이 있습니다. 첫 번째 방법은 직접 라이브러리를 다운로드를 받는 방법입니다. 아래의 링크로 들어가서 라이브러리를 다운로드 후 직접 프로젝트에 추가해주셔서 사용하시면 됩니다.
Datepicker라이브러리

두번째는 CDN방식입니다. 단순히 아래의 태그 코드를 추가해주기만 하면 됩니다. 저는 CDN방식을 하기 위해서 "goodsEnroll.jsp"에 위의 코드를 추가해주었습니다.

<link rel="stylesheet" href="//code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>

11. 달력 datepicker 적용

대상이 될 <input>태그를 작성한 뒤 해당 <input>태그에 datepicker위젯이 적용되도록 Javascript코드를 추가해주는 과정입니다.

적용대상이 될 <input>태그는 이미 작성되어 있지만 해당 태그에 추가적인 설정을 해줍니다. 아래와 같이 'autocomplete', 'readonly'속성을 추가해줍니다. 'autocomplete'경우 <input>태그를 클릭했을 때 이전 데이터가 뜨는 것을 막기 위해서입니다. 'readonly'를 추가해준 이유는 datepicker을 통해 삽입된 날짜 데이터를 사용자가 잘못된 형식으로 수정하지 못하도록 하기 위함입니다.

<input name="publeYear" autocomplete="off" readonly="readonly">

datapicker를 동작시키는 JS코드를 'goodsEnroll.jsp' 하단의 <script>태그내부에 선택자를 삽입하여 아래의 코드를 추가합니다.

  • 날짜 입력 방식은 'dd/mm/yy'일 것입니다. 따라서 날짜 입력 방식을 'yy-mm-dd'로 수정하였습니다.
  • 캘릭더가 동작하는 방식은 <input>태그를 클릭하여 동작하고 있기때문에 <input>태그 옆에 버튼을 추가하여 해당 버튼을 눌렀을때 동작하도록 하였습니다.
  • 달력은 영어로 되어 있는데 이를 한글로 출력되도록 변경하였습니다.
  • '연도'와 '월'을 <select>태그 형식으로 선택할 수 있도록 기능을 추가하였습니다.
/* 캘린더 위젯 적용 */
	
	/* 설정 */
	const config = {
		dateFormat: 'yy-mm-dd',
		showOn : "button",
		buttonText:"날짜 선택",
	    prevText: '이전 달',
	    nextText: '다음 달',
	    monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
	    monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
	    dayNames: ['일','월','화','수','목','금','토'],
	    dayNamesShort: ['일','월','화','수','목','금','토'],
	    dayNamesMin: ['일','월','화','수','목','금','토'],
	    yearSuffix: '년',
        changeMonth: true,
        changeYear: true
	}

	/* 캘린더 */
	$(function() {
	  $( "input[name='publeYear']" ).datepicker(config);
	});

'goodsEroll.css' 파일에 아래의 코드를 추가하여 출판일 <input>태그와 <button>태그에 css설정을 추가하였습니다.

.ui-datepicker-trigger {						/* 캘린더 css 설정 */
    margin-left: 25px;
    width: 14%;
    height: 38px;
    font-weight: 600;
    background-color: #dfe8f5;
    font-size: 15px;
    cursor:pointer;
}
input[name='publeYear'] {
    width: 80%;
    text-align: center;
}

※ 좀 더 다양한 옵션들을 수정하고 싶으시다면 아래의 링크를 참고해주세요. 여러 예시가 있고 소스코드도 볼 수 있습니다.
Datepicker 옵션

11. 테스트



profile
YB
개인이 공부한걸 작성하는 블로그입니다..
이전 포스트

[Spring][쇼핑몰 프로젝트] 17. 작가 수정 페이지 구현

다음 포스트

[Spring][쇼핑몰 프로젝트] 18. 상품 등록(2)

0개의 댓글