$$config title: ?DevNews (1인 프로젝트 ) 기술서 $$ ## ?개요 # 소개 ![](https://velog.velcdn.com/images/ohtj6644/post/d2e55629-9bc9-4bbb-9bde-6302391fba0d/image.png) - 'DevNews' 는 개발관련 뉴스 페이지 입니다. - 관리자는 뉴스를 등록할 수 있으며 모든 회원은 해당뉴스를 확인 , 해당뉴스에 대한 리뷰작성 , 리뷰에 대한 댓글작성 을 할 수 있습니다. - 해당 프로젝트를 진행한 목적은 프론트엔드 새로운 기능의 구현 , 이전 3차 팀프로젝트 에 다른 조원이 작성한 코드를 리뷰, 커스텀 하며 공부하기 위해 해당 프로젝트를 진행하게 되었습니다. # 유튜브 발표영상 $$youtube BvWby1csCJg $$ ## ?환경 # 형상관리 ![](https://velog.velcdn.com/images/ohtj6644/post/1c415507-4745-4f66-98ef-5c0fc8081228/image.png) - https://github.com/ohtj6644/devnews.git # 개발도구 ``` - SpringBoot - JAVA - MariaDB - HTML - CSS - JS - AJax - jQuery ``` # 개발환경 ``` - IntelliJ IDEA - DBeaver ``` ## ?요구사항과 기능구현 여부 ![요구사항 정의서](https://i.postimg.cc/mr0Gdb7z/11111.jpg) - https://docs.google.com/spreadsheets/d/1BxyKmHB8tzGbwvLDGtJx3jDvEKMyxSffRMICqJ38vXo/edit#gid=186860782 ## ?ERD 구성 # 초기 ERD # 최종 ERD ![](https://i.postimg.cc/m2CfDffB/111111.png) ## ??‍?구현화면 및 주요 소스코드 # 메인화면 ![](https://velog.velcdn.com/images/ohtj6644/post/94de1339-0aea-43d8-96fc-f7d7350030bc/image.png) [codepen_embed height="300" theme_id="dark" default_tab="html,result" slug_hash="ExGZygZ" user="ohtj6644"]See the Pen Untitled by ohtj6644 (@ohtj6644) on CodePen.[/codepen_embed] ```js (function() { var slidersContainer = document.querySelector('.sliders-container'); // 슬라이더 숫자 var msNumbers = new MomentumSlider({ el: slidersContainer, cssClass: 'ms--numbers', range: [1, 3], rangeContent: function (i) { return '0' + i; }, style: { transform: [{scale: [0.4, 1]}], opacity: [0, 1] }, interactive: false }); // 슬라이더 제목 var titles = [ 'Developer News ', 'News Review', 'Contact' ]; var msTitles = new MomentumSlider({ el: slidersContainer, cssClass: 'ms--titles', range: [0, 2], rangeContent: function (i) { return '

'+ titles[i] +'

'; }, vertical: true, reverse: true, style: { opacity: [0, 1] }, interactive: false }); // 링크 슬라이더 초기화 중 var msLinks = new MomentumSlider({ el: slidersContainer, cssClass: 'ms--links', range: [0, 2], rangeContent: function (i) { var href; switch (i) { case 0: href = '/news/list'; break; case 1: href = '/review/list'; break; default: href = ''; } return 'View Case'; }, vertical: true, interactive: false }); // 페이지 표시 항목 가져오기 var pagination = document.querySelector('.pagination'); var paginationItems = [].slice.call(pagination.children); // 영상 슬라이더 초기화 var msImages = new MomentumSlider({ // 슬라이더를 추가할 요소 el: slidersContainer, // 슬라이더를 참조할 CSS 클래스 cssClass: 'ms--images', // 필요한 슬라이드 3개 생성 range: [0, 2], rangeContent: function () { return '

'; }, // 다른 슬라이더 동기화 sync: [msNumbers, msTitles, msLinks], // 슬라이더를 이동할 때 보간할 스타일 style: { '.ms-slide__image': { transform: [{scale: [1.5, 1]}] } }, // 슬라이더가 변경되면 페이지 표시 업데이트 change: function(newIndex, oldIndex) { if (typeof oldIndex !== 'undefined') { paginationItems[oldIndex].classList.remove('pagination__item--active'); } paginationItems[newIndex].classList.add('pagination__item--active'); } }); // 페이지 구성 버튼을 클릭할 때 해당 슬라이더 항목 선택 pagination.addEventListener('click', function(e) { if (e.target.matches('.pagination__button')) { var index = paginationItems.indexOf(e.target.parentNode); msImages.select(index); } }); })(); ``` # 회원가입 ![](https://velog.velcdn.com/images/ohtj6644/post/4f743676-1d10-4dbb-a0f4-02403a8a66dd/image.png) controller ```java @GetMapping("/signup") public String signup(UserCreateForm userCreateForm) { return "signup"; } @PostMapping("/signup") public String signup(@Valid UserCreateForm userCreateForm, BindingResult bindingResult) { if (bindingResult.hasErrors()) { return "signup"; } if (!userCreateForm.getPassword1().equals(userCreateForm.getPassword2())) { bindingResult.rejectValue("password2", "passwordInCorrect", "2개의 패스워드가 일치하지 않습니다."); return "signup"; } userService.create(userCreateForm.getUsername(), userCreateForm.getEmail(), userCreateForm.getPassword1() ,userCreateForm.getNickname()); return "redirect:/"; } ``` service ```java public SiteUser create(String username, String email, String password ,String nickname) { SiteUser user = new SiteUser(); user.setUsername(username); user.setEmail(email); user.setPassword(passwordEncoder.encode(password)); user.setNickname(nickname); user.setCreateDate(LocalDate.now()); this.userRepository.save(user); return user; } ``` # 로그인 ![](https://velog.velcdn.com/images/ohtj6644/post/99b75e48-e696-46b6-8353-9fc1d8d172a3/image.png) # 뉴스 리스트 ![](https://velog.velcdn.com/images/ohtj6644/post/b15d748b-7b5b-459c-80a7-db3648eb639e/image.png) 리스트 좌측 상세 슬라이드 ```html

> <

뉴스제목

.

``` ```js jQuery(document).ready(function ($) { $('#checkbox').change(function(){ setInterval(function () { moveRight(); }, 3000); }); var slideCount = $('#slider ul li').length; var slideWidth = $('#slider ul li').width(); var slideHeight = $('#slider ul li').height(); var sliderUlWidth = slideCount * slideWidth; $('#slider').css({ width: slideWidth, height: slideHeight }); $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); $('#slider ul li:last-child').prependTo('#slider ul'); function moveLeft() { $('#slider ul').animate({ left: + slideWidth }, 200, function () { $('#slider ul li:last-child').prependTo('#slider ul'); $('#slider ul').css('left', ''); }); }; function moveRight() { $('#slider ul').animate({ left: - slideWidth }, 200, function () { $('#slider ul li:first-child').appendTo('#slider ul'); $('#slider ul').css('left', ''); }); }; $('a.control_prev').click(function () { moveLeft(); }); $('a.control_next').click(function () { moveRight(); }); }); ``` # 뉴스 상세페이지 ![](https://velog.velcdn.com/images/ohtj6644/post/fc80582e-2bf7-4da8-a7b5-927ccbc6761d/image.png) 상세사진 선택 기능 (오픈소스 코드 커스텀) ```html

``` ```js ;(function($){ $.fn.picZoomer = function(options){ var opts = $.extend({}, $.fn.picZoomer.defaults, options), $this = this, $picBD = $('

').css({'width':opts.picWidth+'px', 'height':opts.picHeight+'px'}).appendTo($this), $pic = $this.children('img').addClass('picZoomer-pic').appendTo($picBD), $cursor = $('

').appendTo($picBD), cursorSizeHalf = {w:$cursor.width()/2 ,h:$cursor.height()/2}, $zoomWP = $('

').appendTo($this), $zoomPic = $zoomWP.find('.picZoomer-zoom-pic'), picBDOffset = {x:$picBD.offset().left,y:$picBD.offset().top}; opts.zoomWidth = opts.zoomWidth||opts.picWidth; opts.zoomHeight = opts.zoomHeight||opts.picHeight; var zoomWPSizeHalf = {w:opts.zoomWidth/2 ,h:opts.zoomHeight/2}; $zoomPic.css({'width':opts.picWidth*opts.scale+'px', 'height':opts.picHeight*opts.scale+'px'}); //초기화 이벤트 $picBD.on('mouseenter',function(event){ $zoomPic.attr('src',$pic.attr('src')) }).on('mouseleave',function(event){ $cursor.hide(); $zoomWP.hide(); }).on('mousemove', function(event){ var x = event.pageX-picBDOffset.x, y = event.pageY-picBDOffset.y; $cursor.css({'left':x-cursorSizeHalf.w+'px', 'top':y-cursorSizeHalf.h+'px'}); $zoomPic.css({'left':-(x*opts.scale-zoomWPSizeHalf.w)+'px', 'top':-(y*opts.scale-zoomWPSizeHalf.h)+'px'}); }); return $this; }; $.fn.picZoomer.defaults = { picHeight: 450, scale: 2.5, zoomerPosition: {top: '0', left: '380px'}, zoomWidth: 460, zoomHeight: 460 }; })(jQuery); $(document).ready(function () { $('.picZoomer').picZoomer(); $('.piclist li').on('click', function (event) { var $pic = $(this).find('img'); $('.picZoomer-pic').attr('src', $pic.attr('src')); }); }); ``` # 뉴스작성 ![](https://velog.velcdn.com/images/ohtj6644/post/5a9d09d0-495e-4659-af01-4fe9b98a9dba/image.png) # 리뷰작성 ![](https://velog.velcdn.com/images/ohtj6644/post/02165882-95cd-42fc-859e-79593e84bdfd/image.png) # 리뷰상세 ![](https://velog.velcdn.com/images/ohtj6644/post/f6571d0b-66a5-4f25-948e-eeb076186bad/image.png) 댓글 작성 팝업창 기능 ```js $(document).ready(function () { $(".question-content").hide(); }); $(document).ready(function () { var productId = [[${reviewId}]]; $(".question-create-btn").click(function () { if (productId !== null) { var width = 700; // 새 창의 너비 var height = 500; // 새 창의 높이 var left = (window.screen.width - width) / 2; var top = (window.screen.height - height) / 2; var options = "width=" + width + ",height=" + height + ",left=" + left + ",top=" + top; var url = "/answer/create?productId=" + productId; window.open(url, "_blank", options); } else { console.error("리뷰 ID를 찾지 못했습니다."); } }); ``` # 리뷰리스트 ![](https://velog.velcdn.com/images/ohtj6644/post/51dcfe56-9b65-4ef8-b749-e6a8f751ec33/image.png)