$$config title: [웹서비스] ? 요리조리 작업위키 keywords: - IT - 웹서비스 $$ # ? 페이지 정보 - 페이지 담당자 : 이돈혁 - 프로젝트 대표 페이지 주소 [https://to2.kr/dVG](https://to2.kr/dVG) #### ?Git 리포지터리 - [GITHUB](https://github.com/donhyuck/YJ_Cooking) --- # 관련링크 #### [기획서](https://drive.google.com/file/d/1zxaZ_b4Lmpss_7PhY9ft73_sgNGpVIs6/view?usp=share_link) - 프로젝트 관련 개요와 페이지 설명(PPT) #### [기술서](https://drive.google.com/file/d/1-jVHUTnCWHMgrkJxCapyDfsmCZE17-X_/view?usp=share_link) - 기능의 동작과정을 소스코드와 함께 상세설명 #### [작업위키](https://slog.gg/p/9361) - 웹서비스 기능을 위해 작성한 소스코드와 각 작업별로 설명을 남겼습니다. #### [작업목록](https://slog.gg/p/9358) - 웹서비스에 대한 개요를 볼 수 있습니다. #### [서비스 접속하기(배포예정)]() --- ## 작업 01 / 프로젝트 세팅 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/28ac8a263004a7dda9aa67e55b7e27802265a8c7) ### 스프링부트 세팅 - Maven project, java18, Jar - 의존성 추가 Lombok, Spring Boot Devtools, Spring Web - application.yml 로 파일명 변경 ## 작업 02 - 컨트롤러 /서비스 구현 - 컨트롤러 구현 01/ 레시피 등록, 목록보기, 테스트생성 메서드 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/9a4b9b751d25ddd4d53a2a87cd68e9e18eb0a6db) - 서비스 구현 - 컨트롤러의 로직을 넘김 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/6345929d609bd6f889c3b92d172c970a1a5d48c0) ## 작업 03 - 레시피 CRUD - 레시피 목록보기, 상세보기 구현 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/945de722cdb8842066281b0fe5ace7114df9530e) - 레시피 수정하기, 삭제하기 구현 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/354b98546b7fb989ddf0cc3d8c9fd5d8c1bf2057) ## 작업 04 - 레시피 수정,삭제 메서드를 String 타입으로 변경, 처리결과 보이도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/c6a10fa7cac036fa28d305eb8980eb304eaba872) ## 작업 05 - 리포지터리 구현 - 사용자의 요청에 대한 처리를 담당 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/93ebe08849ec18514ea58c362f23ceb990641ceb) ## 작업 06 - DB생성, DB연결 - DB생성-레시피 테이블 생성,의존성추가-마이바티스, MySQL JDBC 드라이버 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/44f40fb68f37d2b2845809a89ebc3a0825dc26ac) 의존성 추가 (MySQL Driver, MYBatis Framework) - 설정 파일에 DB접속정보 기입 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/94e0e8cc352d199ed0af1dafd97c982d3b98a66f) ## 작업 07 - 리포지터리에서 DB로 접근하여 데이터 관리, 쿼리문 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/16ae61e22fd15f4a80e7685d10a12453850c83a9) ## 작업 08 - getLastInsertId 추가, SQL을 XML로 옮김 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/51eee5e00a4a8996b755e628a868ec2ac8298b9b) - getLastInsertId는 마지막 insert된 id를 정수형 리턴한다. 작성로직은 insert로 처리되며, 사용자에게 만들어진 게시물을 보여주기 위해 사용한다. ### SQL을 XML로 옮기는 이유 - 퀴리문이 길어질 수 록 매우 번거로워지기 때문에 지금 방식으로 DB에 쿼리문을 접근하는 것은 비효율적이다. - 또한, application.xml 에서 마이바티스에 대한 설정으로 다음과 같이 두었다. ``` mybatis: type-aliases-package: com.ldh.exam.demo.vo ``` - resultType="com.ldh.exam.demo.vo.Recipe"로 작성해야 했던 것을 resultType="Recipe"로 할 수 있다. ## 작업 09 - 회원 테이블 생성, Member클래스 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/f512653195101b5db49da39910b6dd948ecbf1b4) ## 작업 10 - 회원 컨트롤러, 서비스, 리포지터리 구현 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/736c45fd0734dec6e7a988fe52215b3dddb059fe) ## 작업 12 - 회원가입 기능 - 회원가입 01/ 회원등록기능 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/e2d1c6366d8e089542ee233ef7ae8344fe380cf7) - 회원가입 02/ 등록 후 해당 회원 정보 보기 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/02d32968e0d1a68562c590cb7a121b76085505c3) - 회원가입 03/ Ut.empty 함수 도입, empty메서드로 입력 데이터 유효성 검사 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/ced7c4e5ac6c7e8b5a91c22099c28cb3705db1ba) - 회원가입 04/ Ut format 함수 도입, 회원가입시 아이디, 닉네임, 이메일 중복 검사 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/cdae23b87886fe5da95292ef7af5f6e352a8038e) ## 작업 13 - ResultData 구현 - ResultData 01/ 범용 보고서 클래스 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/6c6fff3d301bb84d9d96cd1732c1117778b70aa1) - ResultData 02/ 레시피와 회원 컨트롤러, 서비스에 적용 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/856facd9ab565e06c40b74eb7737fe48b0e1db36) - ResultData 03/ 새로운 데이터를 넘기도록 newData 추가, 제네릭 추가 후 기존 메서드에 적용(형변환) [GIT](https://github.com/donhyuck/YJ_Cooking/commit/3dd7bd383580b1fc2ad6fc2b6f8e5388e157f157) - ResultData 04/ data1Name 속성 추가하여, data1의 리턴타입을 보이도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/07261a69e235c2b7b9917ae89bfe3cc7c3333cb3) ## 작업 14 - 로그인, 로그아웃 기능 - 로그인, 로그아웃 메서드 추가, 세션으로 로그인 관리 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/1d465b67497cc53adcd30c0b0d7cfad8605c083b) ## 작업 15 - 레시피 작성자 표시, 권한체크 - 레시피 작성자 표시 01/ 레시피 테이블에 회원번호 컬럼 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/ac838efe0b525eb43a8575447d47bd7408d27231) - 레시피 작성자 표시 02/ 레시피 작성전 로그인 확인, 작성자의 회원번호를 저장 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/3c26d55c600b59b4c19fc16653737939d36c3124) - 레시피 작성자 표시 03/ 수정, 삭제시 로그인확인, 작성자 권한 체크 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/8747fd62df63c75a141debb7e3aab299da3e6bfe) - 레시피 작성자 표시 04/ 레시피 서비스에서 레시피 찾기, 권한체크 하도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/e338e39ca179ac0fbbdec89555632611928e47fc) ## 작업 16 - SQL 로거 적용 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/ebbe7c0338bfb1c37d01742f5648f9339ee0b893) - 의존성 추가 SQL로거 - 파일추가 log4j2.properties logback-spring.xml - SQl로거 적용 후 Log파일을 gitignore에 추가 LOG_PATH_IS_UNDEFINED 폴더가 생기는 버그 해결 ## 작업 17 - 프론트 기본작업 - JSP 적용, 임시 메인페이지 구현 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/9cb71754a803965ed2604f8077ee0a628b05c63f) 의존성 추가 -> JSP 엔진, JSTL ``` - JSP, JSTL 의존성 추가 application.yml 설정 prefix, suffix prefix: /WEB-INF/jsp/ suffix: .jsp 위와 같이 설정함으로써 경로생략이 가능하다. - 루트페이지 구현 "(/WEB-INF/jsp)/user/home/main(.jsp)" -> "/user/home/main" ``` - 공통 css, js 로딩, 폰트적용(한림고딕체) [GIT](https://github.com/donhyuck/YJ_Cooking/commit/bd2820ee4ff95ebaec8e98437e13e14be2ff870c) ## 작업 18 - 페이지 구현 - 페이지 구현 01/ 목록, 상세 페이지 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/4ee08524afb3d0ba312c5f5ef1189b9c02730cef) - 페이지 구현 02/ 공통 내용을 head.jspf , foot.jspf로 모으기 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/22a778cbd05cd6d518bd23b3f82e316f141b36d9) - 페이지 구현 03/ 공통 라이브러리 불러오기 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/7909833a8b8aba1042557e9d32b5cf366c6da56a) - 페이지 구현 04/ 작성자 정보로 닉네임 표시 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/dd1290bb5f37abc8ef8e91108be4347c07ddc557) ## 작업 19 - head 상단영역 디자인 - head 상단영역 디자인 작업 01 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/1fced68b731d1780b879392530e2afddd7a174f4) - head 상단영역 디자인 작업 02 - 로고, 검색, 사용자 구분 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/5060b7fbae0424ee6e919d38827f5f5ff231b935) - head 상단영역 디자인 작업 03 - list영역 구현 ,CSS커스텀 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/fc78ef0c805fa9d1a0c230c23fa7645528f89817) ## 작업 20 - 레시피목록 디자인 - 레시피목록 디자인 01/ 단위별 구분, 메뉴바에서 이동 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/f233b9dca4d271150e70de7ae52351075a168d15) - 레시피목록 디자인 02/ 상단 메뉴바에서 이동 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/c164ec0a331092f1316902c6798a04204972e47d) - 레시피목록 디자인 03/ 각 리스트 별 레이아웃 구현 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/09905787f66a862016a7d0c1e76475df99590d35) - 레시피목록 디자인 04/ 임시 데이터로 레시피카드 배열 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/99b1d1e755e861252c66ded118853aec2601e207) - 레시피목록 디자인 05/ 마이페이지 구현 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/643c401e2c8a2bc672cf714a2d1430d78503f8f5) - 레시피목록 디자인 06/ 랭킹 페이지 한 영역에 3개씩 표시, 이동버튼구현 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/7eda409fb2e6d9d6810f6b254cd186fe6ddc5d3e) ## 작업 21 - 회원가입 - 회원가입 기능 01/ 회원가입 페이지 구현 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/1c37d1b72d0d499e019bc689541d1533caf85c58) 입력 박스별 회원가입 입력 스타일 구현 - 회원가입 기능 02/ 비밀번호 확인, 입력유효성 스크립트 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/a0596bb690311bc9a52773ce9a27d4e893eba6e2) 회원가입 페이지 내에서 미입력된 사항을 확인시켜줌 - 회원가입 기능 03/ Ut메서드추가-사용자에게 메세지 출력, 가입후 메인으로 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/86aabb9668f3406831ac71a9599a258f17537be4) 자바스크립트 메서드로 출력 ## 작업 22 - Rq클래스 도입 - Rq 클래스 도입으로 로그인 여부와 관련된 중복된 로직 제거 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/bdf7a11a73b1ef2527ce1f601465f69a5ad8693e) 레시피 작성, 수정, 삭제 등 회원확인, 로그인여부가 필요한 로직이 다수 중복되어 있었다. 이를 HttpServletRequest 클래스를 도입하고, session에 접근해서 로그인정보를 가져온다. ## 작업 22 - Rq 클래스 설명 ### 1장. Rq 객체 생성 간소화 > Rq 객체의 생성을 스프링에 맡김 - 매번 rq객체를 생성하지 않고 한번 생성함 UserRecipeController, UserMemberController, NeedLoginInterceptor 에서 `HttpServletRequest req` 제거 - 다만 RecipeService, BoardService 와 같은 객체는 사용이 많아도 객체가 매번 만들어질 필요가 없는 반면 rq는 각각의 요청별로 하나씩 생겨야 한다. 이때 의존성 주입을 필요로 한다. > Rq.java 의존성주입 ``` @Component @Scope(value = "request", proxyMode = ScopedProxyMode.TARGET_CLASS) ``` - Component로 rq가 의존성주입 대상임을 선언 - Scope에서 객체가 하나만 존재하는게 아니라 각 요청별로 하나씩 존재하게 설정
- Rq.java 에서 자신을 받음 this.req.setAttribute("rq", this); ### 2장. 요청과 응답에 관련하여 Rq 객체 설명 - 요청과 응답에 관련하여 해당하는 Request와 Response가 있다. 서버와 통신을 위한 Session도 있다. - 기능마다 많은 접근이 있게 되기 때문에 제일앞에서 소통하는 역할이 있으면 편리하다. - Rq를 두어 프로그램의 모든 로직에서 접근은 Rq로만 한다. ### 3장. Rq 프록시 객체 설명 BeforActionInterceptor 에서 굳이 rq의 메서드를 호출하는 이유 ```java @Component @Scope(value = "request", proxyMode = ScopedProxyMode.TARGET_CLASS) public class Rq { } ``` > Component - `Component`가 의미하는 것은 개발자가 new로 객체를 만들어 관리하는 것이 아니라 Spring시스템이 언제 만들고 언제 지울지 등의 이 객체의 생명을 관리한다. - 단일로 존재한다면, 실행되는 동안 1개만 만들고 여러 로직에서 그 한개를 사용하게 된다. @Scope를 붙이면서 접속할때마다 생성되도록 한다. > BeforeActionInterceptor - 한편, 최초로 생성되는 BeforeActionInterceptor를 보자. - BeforeActionInterceptor가 1번 실행되는 반면 여기서 생성되는 rq는 여러번 생성되야 한다. 인터셉터의 생성자는 1번만 실행되는데, 가능한걸까? - 이때, 발휘되는게 ScopedProxyMode이다. 인터셉터에서 생성되는 rq는 실제rq가 아니고, 일종의 대리인이다. ### 4장. rq객체의 작동 - 여기저기 rq가 있는데, 어떻게 행동하게 되는가? 사용자가 요청을 보내면 그 요청에 위한 내부처리를 하면서 관련된 로직이 수행된다. 여기서 자동으로 연관된 rq가 생성되어 쓰인다. - 만일, 로직상 rq객체가 필요없는 경우라면, 만들지 않는다. 컨트롤러, 서비스, 리포지터리는 요청이 10000개가 있어도 1개가 생성되고 실행된다. 겉으로 보기엔 rq또한 1번 생성되는 것 같지만 프록시모드를 했기에 지금 현재 rq에 해당하는 걸로 간다. - initOnBeforeActionInterceptor를 왜 호출한건가? 메서드 작동에는 문제없이 처리되더라도 jsp에서 로그인 정보에서 문제가 생긴다. 컨트롤러에서 굳이 실행하지 않아도 항시 보여주는 상단바의 경우 rq.isLogined() 와 같은 코드를 처리할 수 없게 된다. ### 5장. 무작정 처음부터 rq를 무조건 만드는 방식을 수정-> 필요할 때만 만듬 - 기존방식은 로직마다 해당하는 rq객체가 쓰인다. 하지만 rq가 전혀 안쓰이더라도 객체가 생성된다. - 필요한 경우마다 rq객체가 쓰이는 방식으로 변경 - Rq => BeforeActionInterceptor `req.setAttribute("rq", rq);` Rq에서가 아니라 인터셉션에서 rq를 어트리뷰트 ## 작업 23 - 인터셉터 적용 - 인터셉터 01/ BeforeAction 추가, MyWebMvcConfigurer 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/af882e2623b3cf36a8a634fe82eb4e25dd3b4ee9) rq클래스를 인터셉터 즉, 컨트롤러가 작동하기 전에 불러오도록 함 - 인터셉터 02/ NeedLogin 인터셉터 추가 및 등록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/1a4cbd41337eb7edfd484d696e35d6f163a4bbd7) 로그인이 필요한 요청에 대해서 로그인 확인을 요청한다. - 인터셉터 03/ Ut클래스로 스크립트메세지 출력 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/428cd8cc2759e2614635786c88c6ac564f3472af) - 인터셉터 04/ NeedLogin 인터셉터가 작동하여 자격없는 요청들을 막도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/68e6be141efd463ba8e753e4f0515d7ede62a112) - 인터셉터 05/ NeedLogout 인터셉터 추가, rq개선 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/8eba00cd86b374c25bc12216887875c68e4ef3a6) ## 작업 23 - 인터셉터 설명 인터셉터가 필요한 이유 하지만 로그인 정보를 매번 가져오는 객체를 만드는 것보다는 그 앞에서 만드는 것에 효과적이다. 컨트롤러 앞선에서 이러한 기능을 수행하는 BeforeAction 인터셉터 ### 1장. BeforeActionInterceptor 에서 Rq객체 생성 제거 이제는 Rq 객체가 자동으로 만들어지기 때문에 BeforeActionInterceptor 에서 rq를 만들 필요가 없음 ### 2장. initOnBeforeActionInterceptor 도입 - 홈메인페이지에서 로그인 상태에서도 jsp가 로그인을 인식하지 못하는 문제가 있었다. 이를 위해 initOnBeforeActionInterceptor 메서드를 도입 이 메서드는 Rq 객체가 자연스럽게 생성되도록 유도하는 역할을 한다. - BeforeActionInterceptor 에서 호출하여 UserHomeController에서 로그인 확인을 할 수 있다. BeforeActionInterceptor 에서 Rq 객체를 좀 더 확실하게 생성되도록 유도하기 위함 ## 작업 24 - 로그인, 로그아웃 - 로그인 기능 01/ doLogin메서드에 Ut클래스 적용하여 스크립트 출력 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/704a3363ab51d9b0f235f1fe03f07270b6a0d506) - 로그인 기능 02/ 로그인 페이지 구현 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/3bd917f022da81dac2737daf19a5daa7871cf1e0) - 로그인 기능 03/ Rq에서 세션관리, 로그인, 로그아웃 처리 적용 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/9787d905e0730a2ad530407457bb8a62791de14a) ## 작업 25 - 레시피 수정 - 레시피 수정 01/ 상단바 주석정리, 상세보기 url연결 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/7b2194978d26c0a3ff0a27d36f4d8e65250985b9) - 레시피 수정 02/ showModify 메서드추가, common 페이지 도입으로 메세지출력 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/1c07ccc13876c829bcf2be2851dedd7b939db35e) - 레시피 수정 03/ 수정페이지추가, 상세 페이지에서 이동 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/713ef9784f94426adaae3ab01396cc503508650a) - 레시피 수정 04/ 수정삭제 권한 업데이트 기능 구현 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/8557e3e4de202bd0a22b288aa2b3ea22375ead34) ## 작업 26 - 레시피 등록 - 레시피 등록 01/ 날짜 표현 개선 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/6d5be0e59e2a321a22fec14d9ea5c4f5b271733d) - 레시피 등록 02/ 레시피 등록페이지 추가, 수정페이지 수정 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/1ced8d1c5a4f6dd4815fe143d6fef64694df6c56) - 레시피 등록 03/ 레시피 등록 후 이동경로 설정 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/4ed28b9e785abae290402a7fb42d85db21279a60) - 레시피 등록 04/ Rq에서 스크립트 출력을 요청하도록 담당 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/ae39e03edda9a29a668a03bbab1e1bbcf49df9f5) - 레시피 등록 05/ 입력요청 박스 디자인 수정(등록,수정,로그인,회원가입) [GIT](https://github.com/donhyuck/YJ_Cooking/commit/595ac9ad3fd8228db76ea36dc59638a83b34eb21) ## 작업 27 - 마이페이지 - 마이페이지 01/ Rq개선, 필요할때 생성되도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/0515ba923f0ed00bf1bb6a05a0351c2367814cf3) - 마이페이지 02/ 마이페이지에서 내정보 보기 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/a94e8fa9d7e67d8b9ae4e1c2e59a6930364328ea) - 마이페이지 03/ 비밀번호 확인페이지 구현, 수정전 비밀번호확인 하도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/b6a9f83186202753705b56736d981a8ad7d643b1) - 마이페이지 04/ 비밀번호 확인기능 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/eb17418dce763e1cd20e23d982d3752f07916d13) - 마이페이지 05/ 회원정보 수정 페이지 추가, 비밀번호가 확인되면 요청대로 이동하도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/0bc76485ca5ff1a56ba2cb0a3c62aa9db60e3bd3) - 마이페이지 06/ 입력데이터 검사 스크립트 개선 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/9a97e5ec4ed6a64fc7d9c230d8f0ff33d8c34857) - 마이페이지 07/ 회원정보 수정기능 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/e49720372bfa16c1bb6996fc58b119e83d9f154b) - 마이페이지 08/ 신규비밀번호를 입력받은 경우에 비밀번호 변경 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/d51f121be70c94cc42ce7cfa9f09b99daf31a0f5) ## 작업 28 - 인증코드 발급 및 인가 - 인증코드 기능 01/ Attr서비스, Attr리포지터리 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/aae4a9c2a27fbd850dd24af9a522652a23c0f0ce) - 인증코드 기능 02/ 비밀번호가 확인되면 인증코드 발급 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/e684ecb51f750ad1b74ec460ce29aa463a0c9a6d) - 인증코드 기능 03/ DB와 설정된 인증코드 확인, 인증코드없는 경우 접근을 막도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/6c88c4a2277688bdb5277c0ed9eb8e854c3d4311) ## 작업 29 - 레시피 상세 페이지 디자인 - 레시피 상세 01/ 각 목록에서 상세페이지로 이동하도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/0ef9eba8caae1ed602887d482d473aa6927ff38d) - 레시피 상세 02/ 레이아웃 구성 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/a274999099bdd614eb22359ae9c1d1dd1191bb4e) - 레시피 상세 03/ 디자인 수정, 요리정보(인원,소요시간, 난이도) 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/a29f47f5823e76ee848edc3926d6ffd2383a2d47) - 레시피 상세 04/ 등록한 회원 프로필, 리액션 영역 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/f6afafa651d601b233c8c4a2d7ec9c2f39bf0098) - 레시피 상세 05/ 재료,양념 영역 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/fbed85c93b4813d2a892b2a35cf9fa96182464a6) - 레시피 상세 06/ 조리순서 영역 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/957e5f56a5f24f20086fd3b279ce3dcc3bd4bc01) - 레시피 상세 07/ 댓글 영역 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/86e1a1b7696f8a4fe55bcb5e4fed6ee59f0708d5) - 레시피 상세 08/ 댓글 작성영역 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/efc7c89c426ea84fddc41cb4fbed97dbd32c4541) ## 작업 30 - 레시피 정보 추가 - 레시피 정보추가 01/ 요리정보(인원,소요시간, 난이도) 속성 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/81492ec5a4f4bab218babe09347fabfaa5058829) - 레시피 정보추가 02/ 조회수 속성 추가, 상세보기 이동시 1만큼 증가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/86aeceee0862ed9f5ace0c6edfce94b5f05d602c) - 레시피 정보추가 03/ 조회수 증가를 별도의 메서드가 담당, 증가시 ajax 적용으로 하여 매끄럽도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/64997580bb844f2049c0ee297ea95e9d883cb705) - 레시피 정보추가 04/ 조회수 증가 성공에 대한 응답에 data2(글 번호) 정보 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/33e52eb345d22ec36e8744dc709f6b2662fbad86) - 레시피 정보추가 05/ 로컬스토리지 적용, 브라우저가 한번 읽은 레시피에 대한 조회수 증가 요청이 없도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/2f42a46025fb7e805310293316776844cd324b49) - 레시피 정보추가 06/ 팁/주의사항 속성 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/1feb600f2bdd3a5f78d0636d9ab6de1aca69ac78) ## 작업 31 - 좋아요 기능 - 좋아요 01/ DB-reactionPoint 테이블 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/eea116892dd222ee63b96109f67014b118338194) - 좋아요 02/ 쿼리수정, 해당 레시피에 해당하는 리액션 포인트 가져오도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/15fdac9ca735fff8f2feac3641e34ffd59e31e23) - 좋아요 03/ 해당 레시피를 좋아요 할 수 있는 확인 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/4e38689b41e75fff735e8a52eb238e1573bc1ef6) - 좋아요 04/ 쿼리수정, 레시피 테이블에 goodRP 좋아요 속성 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/b349d6240802fdd8b10f7daf0df63dff6fc5a384) - 좋아요 05/ 리액션 메서드를 별도로 관리 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/0cdf544d306968ecfca1dadb6fb773c812aad32f) - 좋아요 06/ 좋아요 메서드 추가, 좋아요 버튼 구현 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/6f24c728af40f0847524b7796c4d7426cceb85f9) - 좋아요 07/ 좋아요 처리 후 해당 페이지로 이동 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/5e48259dde634dc93b3475381c791682c2645125) - 좋아요 08/ 리액션 테이블에서 회원의 리액션 정보를 저장하도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/e02685dc9d2a167979aef8a8cfd173bc7aee6e15) - 좋아요 09/ 레시피 테이블에서 리액션에 따라 좋아요 수를 갱신하도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/ac23a871de8c4c9e1366aa07d14a468c3957a4aa) - 좋아요 10/ 사용자의 리액션에 따라 메세지 출력 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/47ac497406d1b4e0e995e65e450c4d013923950f) - 좋아요 11/ 좋아요 취소 메서드 추가, 리액션 여부에 따라 버튼 구분 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/adc89e4bb1478b1df34812795016e13d7141eb98) ## 작업 32 - 스크랩 기능 - 스크랩 01/ DB-reactionPoint 테이블 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/223405812ff3b197010d1f212c14c472ee9b2922) - 스크랩 02/ 스크랩포인트 확인, 스크랩 여부에 따라 버튼 구분 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/07abec8464d5d444d3ccdf833e2d927bd987e899) - 스크랩 03/ 스크랩 처리, 취소 메서드 추가, 스크랩테이블과 레시피 테이블에서 스크랩 수 갱신 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/92a96d8a313ad312bded41d3b8f995987ae8b368) ## 작업 33 - 스크랩 목록 디자인 - 스크랩목록 디자인 01/ listhead.jspf-목록에서 쓰는 상단바 구현, 기본 상단바 구분 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/d66d3c687236d86dcabeadb24ada9c6299936748) - 스크랩목록 디자인 02/ 스크랩한 레시피를 마이홈, 레시피 노트에서 모아보기 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/0b1c0a58058edebe96e5dd595e3ae3b4898eea4f) - 스크랩목록 디자인 03/ 쿼리수정, 스크랩한 레시피 가져오기 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/920b201e7dba35939c880a04c9c978bdeada9785) ## 작업 34 - 로그인 개선 - 로그인 개선 01/ 레시피 노트에서 로그인 안내, 로그인 페이지 이동 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/50fa025d3ac74f2efe8e1ea31187d84d617e3a59) - 로그인 개선 02/ 로그인, 로그아웃 후 요청했던 페이지로 이동 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/82f0f89303f809a4a3f17e91a356dfa821b2325b) - 로그인 개선 03/ 로그아웃 중 버그를 수정 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/8c6f07f3d6f9ef628f9fa453094a46bfddb33da3) - 로그인 개선 04/ 로그인, 로그아웃이 필요한 경우 사용자에게 확인받도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/6d811e214f7f71a0361d77969b85deea3ad5d590) ## 작업 35 - 댓글 기능 - 댓글 기능 01/ DB-reply 테이블 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/54a6a1dbb1354cf8aed5f3cb9645040dfd0b1554) - 댓글 기능 02/ reply 컨트롤러, 서비스, 리포지터리 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/da6023a301d649e27079479d4bd7e8f1c84e321d) - 댓글 기능 03/ 댓글 작성시 유효스크립트 추가, 레시피 정보 넘기기 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/7ed641b88a33b9765ca47d717aead7704adc274f) - 댓글 기능 04/ 댓글 작성기능 추가, 등록 후 해당 레시피 페이지로 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/4108c086125a1c949a7adcab8b713ded988a941b) - 댓글 기능 05/ 해당 레시피의 댓글 목록 가져오기 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/64a9648c9cd2fab8869265cef9326ae1476a2cff) - 댓글 기능 06/ 댓글 테이블에 인덱스 걸기, 날짜표현, 내용표현 개선 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/b94795351a72db7b8fd1ebbb85ffd112bb582704) - 댓글 기능 07/ 수정삭제 권한 업데이트 기능 구현 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/6ed126f72b34c06f55bab33af793279e8af60d5e) - 댓글 기능 08/ 댓글 삭제 기능 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/d0d25cc9c00b9e48fa97e53a8811d7bf03833147) - 댓글 기능 09/ 댓글 수정 기능 추가, 수정페이지로 관련정보 넘기기 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/b033f135cfccbb140fd522f7c728f71728fde8ea) - 댓글 기능 10/ 댓글 수정시 유효성 검사, 수정 후 기존 레시피 페이지로 이동 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/35a0fc3182dfdd2e1721b64569063e2bab2980fc) ### 스크롤 이동효과 적용 - 댓글 기능 11/ Util 메서드 추가, 등록한 댓글 후 해당 번호를 URI에 포함 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/20c423226efc0c8c613275ddd418a249e6486a05) data-id 는 임의로 생성한 속성이다. 통상적으로 임의로 생성할 경우 data-??로 명명한다. 댓글 작성후 스크롤이 이동할 위치를 댓글 번호로 설정한다. - 댓글 기능 12/ 자바 데이터를 자바스크립트 변수로 선언, 스크롤 이동 구현 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/1e6308b58e5794093bc5db6bbab5f0829b20e723) 자바(jsp)에서 댓글 번호를 얻을 수 있다. 이후 스크롤 이동을 위해서는 추가로 자바스크립트로의 변수선언이 필요하다. Rq객체에서 getParamJsonStr()메서드로 댓글번호를 얻는다. 결과적으로 자바스크립트에서 쓸수있도록 JSON형태로 바꾸고, 변수에 넣는다. 자바스크립트 수준에서 param이라는 변수를 쓸 수 있게 된것이다. - 댓글 기능 13/ 스크롤 이동 후 포커스효과로 등록된 댓글임을 강조표시 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/09278027b36acb3b86e147d120e8218297bc8f28) 페이지를 구성하는 중간에 위치를 설정하게 되면 꼬일 수 있다. 그래서 setTimeout으로 잠시시간을 두고 스크롤이동 작업을 수행하게 한다. 강조효과를 내기 위해 focus 도입 이동하는 스크립트가 수행되고, 1s후에 1초동안 색상이변하고, 돌아온다. - 댓글 기능 14/ 수정 후 해당 댓글로 이동, 리액션 후 댓글이동되지 않도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/cae67141752fe81315a22c86ead06739bfcfa145) - 댓글 기능 15/ 댓글보기 버튼, TOP버튼으로 스크롤이동 구현, 부드러운 이동효과 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/567859f08f7dc04497d1756b69f7c08ff9982cdc) ## 작업 36 - 아이디/비밀번호 찾기 - 아이디 찾기 / 아이디 찾기 기능 추가, 아이디 찾기 페이지 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/3117f3e8cb3834258eda593c6266e991aab7e9bc) - 비밀번호 찾기 01/ 비밀번호 암호화 기존 회원 비밀번호 암호화 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/583075160625106eb9bfb4b479f3f1720810f3fb) - 비밀번호 찾기 02/ 비밀번호 찾기 페이지 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/3c9ecc9aa845a1c69a99a72f0391e8085c70e357) - 비밀번호 찾기 03/ 메일 서비스 도입 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/f63294640d0b0ce0ce15b016216cd6d2f39311b9) - 비밀번호 찾기 04/ 비밀번호 찾기 기능 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/4278422dfb111e71fb03e9c2ff16761df5840a81) - 비밀번호 찾기 05/ 임시 비밀번호 메일발송 구현 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/4e41abb32dfad8567f1ed0e3e110411dda93dee3) - 비밀번호 찾기 06/ 임시 비밀번호 사용시 비밀번호 변경 권유 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/b3face6ecf7a78e71b4cfe52c2f859aaaf6a058a) - 비밀번호 찾기 07/ 회원정보 수정시 비밀번호를 바꾸는 경우에만 암호화 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/b52c00db07293a33b54163c4df1673e435bbe053) > 임시 비밀번호 사용시 비밀번호 변경 권유 ( 비밀번호 찾기 06 ) ```java if (loginPw != null) { attrService.remove("member", memberId, "extra", "useTempPassword"); } ``` - 임시비밀번호를 AttrService로 관리 임시비밀번호 발급시 attrService.setValue를 한다. - `attrService.setValue("member", actor.getId(), "extra", "useTempPassword", "1", null);` member객체 중 회원번호에 대한 정보이며, typeCode 구분으로 "extra", "useTempPassword"이면 1의 값으로 설정한다. 만료는 null 즉, 만료일이 없는 상태로서 별도의 변경이 없으면 그대로 있다. - 로그인 할때 isUsingTempPassword 메서드로 해당회원에 대해 1값이 들어있다면 임시비밀번호를 사용중인 회원에게 비밀번호 변경을 권유하고, 마이페이지로 이동한다. - 이후 회원정보 수정을 요청하면 modify메서드를 처리하며 명시적으로 임시비밀번호를 사용하지 않으니, 해당 회원에 대한 "useTempPassword" 를 제거한다. ## 작업 37 - 레시피 분류 페이지 - 레시피 DB 구성 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/22b028007b1b70f57d99d7e100c57bf64bc102ed) - 레시피 분류 01/ DB-board,category,guide 테이블 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/85aad80b2a6147df8e5b087f5c9dfc0d3c3a8fb0) - 레시피 분류 02/ board 서비스, 리포지터리 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/f0ff49ce72d640f0932d24b5cbd02971790383f1) - 레시피 분류 03/ board 목록 가져오기, 대분류 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/719d2957dbcd96e93ad4f7e55e60a03cffb59fab) - 레시피 분류 04/ category 목록 가져오기, 중분류 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/045b7b13c0be9ff880add1316207c2936540f9c5) - 레시피 분류 05/ 분류페이지에서 선택한 레시피 목록 가져오기, 소분류 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/d5de3d7d35ce31035071158ff103c2c4ea6dc5de) - 레시피 분류 06/ DB 수정, 대량 데이터 생성 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/379aa5f9ccc79e6115e77ddf532e43516ad6b14b) PROCEDURE 프로시져를 사용하여 INSERT 요청을 반복한다. - 레시피 분류 07/ 레시피 분류목록 디자인(카드형적용) [GIT](https://github.com/donhyuck/YJ_Cooking/commit/32d5ae857a8a4ed6bbcdbb06ecf588f1c9abcb20) - 레시피 분류 08/ 선택한 사항에 맞는 guide번호 가져오기(수정필요) [GIT](https://github.com/donhyuck/YJ_Cooking/commit/000dc48f9aa1a64bd5c92bf576db29903eafa3c2) - 레시피 분류 09/ 선택한 사항에 맞는 레시피 목록 가져오기 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/d76972df4024c85d6d06e8ce0c6dce29b2c04748) ## 작업 38 - 레시피 추천 페이지 - 레시피 추천 01/ 레시피 중 램덤 목록 가져오기 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/5e6e2c3f282226766796eb98252f82c5c7b74e46) - 레시피 추천 02/ 레시피 중 최근 등록한 목록 가져오기 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/aae3465844e89b550b5257b246184adfa812bcd8) - 레시피 추천 03/ 레시피 추천목록 디자인(카드형적용) [GIT](https://github.com/donhyuck/YJ_Cooking/commit/5cc6bee1853e4f2f884bf22bd6f7a4a448db67a6) ## 작업 39 - 레시피 랭킹 페이지 - 레시피 랭킹 01/ 레시피 랭킹 페이지 디자인 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/573e7623c7b5cd9114752d359c62cdc8895c87c5) - 레시피 랭킹 02/ 최다 하트, 조회수 목록 / 최다 스크랩 목록 가져오기 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/81eaddc782707ad544183a1510e116384b96a827) ## 작업 40 - 레시피 노트 페이지 - 레시피 노트 01/ 레시피 목록 페이지 전체 수정 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/c79d9ff718b250491693e1337d40b76b5cefb896) - 레시피 노트 02/ 레시피 노트 페이지 디자인 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/c9adb5bbb7f67bfaf83add8db4a4b13fb8b8600e) - 레시피 노트 03/ 내가 등록한 목록 가져오기 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/099246643d106b6b804b2f5f65081dfb98b6eeb3) ## 작업 41 - 페이징 기능 - 레시피 페이징 01/ 목록에서 레시피 디자인 수정 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/470fbab684f06004e5554a325c5764dfddbaa93a) - 레시피 페이징 02/ 조회수 + 좋아요가 많은 순으로 랭킹매기기, 순위표시하기 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/5ea57b8d9fdd42f9aa2a0c383391a824bf45ef8e) - 레시피 페이징 03/ 일정 조회수, 스크랩수 이상에서 램덤으로 추천하도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/a00b5c5fb7efcf772d1042b560e07e71f20fc7db) - 레시피 페이징 04/ 추천 레시피 전체보기 기능 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/9773230cadbc01cbfc3aa4e07e3c5d3c1ef2c4e8) - 레시피 페이징 06/ 한 페이지당 레시피 수 설정, 하단 페이징 영역 구현 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/99f474771a66f49ae920cd4fac1630057aaba8ba) 최근 등록된 레시피에 페이징 적용 - 레시피 페이징 07/ 전체 갯수에 따른 페이지 메뉴의 동적조절, 한 화면에서 페이지 갯수를 설정 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/8fe9d977402d5067c0f37653c65315f623b5fdbd) - 레시피 페이징 08/ 좌우 이동버튼을 목록좌우에 위치 시키기 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/042e422ec2951684ace59af6bd5517159de988e6) - 레시피 페이징 09/ 좌우이동버튼 디자인수정, 1페이지부터 시작하도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/8a94bdd356c046c6807c844fbb9fdd93c0e8cc2c) - 레시피 페이징 10/ 내가 등록한 레시피 목록을 페이지로 보기 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/b753b370f03d973ac6b34001cd17310f5bf813ac) - 레시피 페이징 11/ 내가 등록한 전체레시피 수 가져오기, 1페이지부터 시작하도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/5b31b5b6d52d322c010e1eb109e785c325d7ae13) ## 작업 42 - 레시피 목록에서 편의기능 추가 - 레시피 목록 01/ 추천메뉴-탭메뉴 추가, 스크립트 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/432c1bbf7e94e5dbe2647863f57fda6c94e3689c) - 레시피 목록 02/ 추천메뉴-tapCode값 넘기기 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/3d5b06826d72710d72a731e33c866eee51e6d285) - 레시피 목록 03/ 추천메뉴-테그내 조건문으로 active를 나타내도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/bb9be2836587b407fa6a2b2e60739c48095f66ad) - 레시피 목록 04/ 추천메뉴-쿼리구분, 추천더보기에서 리액션별로 정렬하도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/932a4347b5b32928e6c080228e3a84169ae01a34) - 레시피 목록 05/ 각 메뉴별 안내문구 수정 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/057942431d331437f58dd21aa5c2ffc3738a8352) - 레시피 목록 06/ 종류메뉴-안내영역, 추가선택란 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/cea8f0ddfed387c12949cde6f5037d9f2f0eadad) - 레시피 목록 07/ 추천메뉴-추천더보기에서 최신글포함, 랭킹에서 종합하여 순위매기도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/e8c626fe751dab76887407b79ec79f197e830151) ## 작업 43 - 레시피 선택 페이지 - 레시피 선택 01/ 분류페이지, 선택페이지에서 위로 가기 버튼 만들기 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/640e4506c306266f776d666c74c70a7569971a1b) - 레시피 선택 02/ select추가, 선택페이지에서 또다른 선택가능하도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/0b99de924aed18eb695d654a43cf15917c8da7ef) - 레시피 선택 03/ 추가 선택기능 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/2cc2c4d483351cc0b8fa629c66a08abd654d1d1c) - 레시피 선택 04/ 선택된 사항을 유지하도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/57f9cbc2264fb271e9365379af011f4ebea512e3) - 레시피 선택 05/ 대분류 선택시, 하위 소분류로 필터링되도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/de7b93ae9c418f7f626cfca5384fa070e6479684) - 레시피 선택 06/ 하위 소분류 내역 구성 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/4bd45213cb54aa0b11c2b3f1c4630e25d06554ec) - 레시피 선택 07/ 미선택, 잘못된 선택시 사용자에게 알리도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/dd421c838924f6fda526e04f1a63a66d8f4336b6) - 레시피 선택 08/ 쿼리수정,전체 선택 사항이 있을 경우를 적용 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/0518ca0489fa8aaf942f9c63e0a8ad92ff5eb750) - 레시피 선택 09/ 분류, 카테고리시 선택 사항을 서비스에서 담당하도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/999ac367c83126dc0dbb27407b2c22783905a290) - 분류 기능/ 추가 추천시 쿼리수정, 전체 선택이 가능하도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/f2a27d9348c2aa4d9af626d84bb533d03b58c1c8) ## 작업 44 - 마이홈 댓글내역 - 마이홈 댓글내역 01/ 마이홈에서 댓글남긴 레시피 영역 디자인 수정 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/bffe48dc1392bc5babf03387cd1f9b02b40a63c1) - 마이홈 댓글내역 02/ 내가 댓글 남긴 레시피 목록 가져오기 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/7d67493bb24d1ff708599e593b85bcc20bf1a638) - 마이홈 댓글내역 03/ 쿼리수정, 각 레시피 별로 댓글 일부를 볼 수 있도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/30cd558b8fa2be88f007a427bb88460945e82fbd) ## 작업 45 - 상단 메뉴바 수정 - 목록 페이지, listHead를 없애도록 상단 메뉴를 통합 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/0786093bd305a1235fb031bf2cd3fda92b53a4bd) ## 작업 46 - 댓글 수정 기능 - 댓글 수정 01/ 댓글 수정페이지 디자인 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/0a72bd66c92f183200c256e14275fe552facb042) - 댓글 수정 02/ 날짜 표현개선, 수정페이지에서 해당 레시피 정보 보이도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/03a5079412eb9e33eb24cf289741071a094de75a) - 댓글 수정 03/ 댓글 목록 디자인 수정, 조작버튼을 우측으로 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/6126ba81298be86771584c05f1d280fea8977e80) ## 작업 47 - URI 개선 - URI 개선 01/ 레시피 상세페이지에서 목록으로 이동시 listUri 파라미터를 가지고 감 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/1dca5e126e3e156b3091591e9a39df84c24eea55) - URI 개선 02/ 레시피과 댓글의 수정 또는 삭제시 replaceUri를 설정 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/630e0b81639f3e5349d112b2b35be14b0f64e637) - URI 개선 03/ 회원가입시 로그인페이지로 가도록, 로그인 이후 원래 페이지로 가도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/9b40ba56e81a9e2a9a8b71647afa3129a6ebded8) ## 작업 48 - AJAX 적용 - AJAX 적용 01/ 회원가입 시 ajax로 로그인아이디 중복체크 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/042055907209f1f942383c91b66cdb337787a792) - AJAX 적용 02/ ajax로 로그인 아이디할 때 입력 시 딜레이를 줌 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/901d0294b7962c27474af00828f15c54ca8ee78a) - AJAX 적용 03/ ajax 구조 수정, lodash debounce 함수로 로그인 중복체크를 줄이도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/bde39d9b0c266318d542e7fde9eeae5dcd9117a1) - AJAX 적용 04/ 아이디 미입력시 메세지 보이도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/65da3ba51227b000f1d69f704c078645cea067db) - AJAX 적용 05/ 별도의 js파일에서 ajax담당, 회원가입url중복방지 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/0ea7f8f91d8b7ad45b23be5bde2b0d6495d5e33d) - AJAX 적용 06/ ajax를 적용하여 회원가입시 닉네임과 이메일 검사 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/1d3f7bfb0a0fc9e453075ed65385b8939931f881) - AJAX 적용 07/ 회원가입 레이아웃 수정, 닉네임과 이메일 미입력시 메세지 보이도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/f3eaf7efcc811a1251802c2955b966f2b8febb83) - AJAX 적용 08/ 연락처 입력시 자동으로 하이픈 표시되도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/7b726d6fab0c48fb3205259ae7f0da650d332803) - AJAX 적용 09/ 요청이 ajax 인지 체크, 요청이 ajax면 인터셉터에서도 그에 맞는 식으로 응답 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/701be678f84e709ebcf21107e4d71d8f9f151b78) > 로그인 아이디 중복 체크 시도 횟수를 줄이기 ( AJAX 적용 05 ) 추가 입력, 수정이 없더라도 방향키 등에도 계속 통신이 되는 것을 방지 현재까지 확인된 validLoginId와 입력된 loginId가 같으면 넘어감 ```java if (validLoginId == form.loginId.value) { return; } ``` > lodash 라이브러리의 debounce 함수적용하여 통신줄이기 ( AJAX 적용 05 ) 타이핑을 하는 중에도 아이디중복을 체크하는 상태인데, 이는 매번 통신을 하는 셈이다. 하지만, 그럴 필요가 없고 타이핑을 마치고 잠깐지나면 중복체크를 하는 것이 효과적이다. - debounce (막음) 요청이 몰려도 호출하지 않는다. 요청이 끊기고 잠잠해지면 그때 한번 호출 한다. - throttle (둔감) 요청이 몰리면 중간중간 한번씩 호출한다. > ajax 요청이면, 인터셉터에서도 그에 맞게 json 으로 응대 ( AJAX 적용 09 ) 인터셉터에서 AJAX인지 확인하고(isAjax) 아니면 json방식으로 처리 rq객체에서 isAjax를 담당 해당 요청이 ajax 요청인지 아닌지 체크 ## 작업 49 - 레시피 등록 - 레시피 등록 01/ 레시피 등록 페이지 구현(대표사진, 제목, 내용, 팁 레이아웃구성) [GIT](https://github.com/donhyuck/YJ_Cooking/commit/f0b6a8af7c6edc7d6626c1af784869113c7f09c3) - 레시피 등록 02/ 기본정보(인원, 소요시간, 난이도) 선택하기 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/86fbf2181a3774721795d79a324c9c0e13ef7a57) - 레시피 등록 03/ 기본정보 안내영역 구현 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/e88b29fead4f975fa46c29d36ebfd95ab5dd10c6) - 레시피 등록 04/ 기본정보 선택시 요리정보에서 표시하도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/54a2f07d9812f0467ffbdab14fe02287b4e0f31c) - 레시피 등록 05/ 입력 데이터 검사 스크립트 추가, 입력시데이터 전환 작업중 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/dcda5d861805bd723f20767c91eaf86aaf61ed50) - 레시피 등록 06/ 데이터값삽입, 인원,시간은 선택 또는 입력으로, 난이도는 선택만으로 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/84902bd3d4a549d16ccaf63d341c7ac5ce211aa7) - 레시피 등록 07/ 입력은 숫자만 가능하도록, 미입력시 알림메세지 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/60a44ed49b04de6c41a501782377e45c18202d2d) - 레시피 등록 08/ 레시피 분류 선택영역 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/2a92da542f1251daed86fc6b821bc34d0ef6efb3) - 레시피 등록 09/ 레시피 작성시 항목별 안내사항 개선 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/98245c6a19117aa4271a22ab6651f1df0a8a7ca4) - 레시피 등록 10/ 레시피 분류선택시 각 분류에 해당하는 카테고리 값을 가져오도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/a114f7244cdb8e20c5e96fa5eb1198bbdb8275a9) - 레시피 등록 11/ 선택된 카테고리값으로 구성된 가이드 만들기 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/9a78a8814196feb4a2dc9dec3688c2bccd35420d) - 레시피 등록 12/ 쿼리수정, 레시피등록시 요리정보,가이드번호,팁을 넣도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/cbd07f41d5d88fcb22c984d8ee8b37d3767b2442) - 레시피 등록 13/ TOP, DOWN 버튼 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/50e3cc9b5a33b0bbb657b379dc60612bb2137800) - 레시피 등록 14/ 자유->상황별 분류로 변경, 버튼 클릭시 이동 효과 스크립트 공통으로 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/99227f73cd59b8ce9c0fe71f2903a63318d8320b) > 안내영역 (레시피 등록 03, 04) - select 테크의 change@@Box 에서 `onchange="changeTimeBox(this.value)"` 로 선택하면 js함수로 해당 값을 넘긴다. ```js var changeTimeBox = function(value) { $("#changeTimeInput").val(value + "분이내"); } ``` - id로 각 인원, 시간, 난이도를 구분하고, input 테그의 value값을 설정한다. > 레시피 분류선택시 각 분류에 해당하는 카테고리 값을 가져오고, 가이드 만들기(레시피 등록 10, 11) - select 테그에서 사용자는 boardId별로 구분된 카테고리를 보고, 선택하게된다. 사용자가 선택하게되는 값은 category의 relId값이다. 이는 guide의 각 속성값 sortId, methodId, contentId, freeId에 대응된다. - 미선택인 경우는 0값으로 설정하여, 넘어온 값으로 guide를 구성하여 만든다. 이때, 아직 레시피 등록이 되지 않았으므로 recipeId가 부여되지 않은 가이드를 만들게 된다. > 등록된 레시피 번호를 가이드로 갱신 (레시피 등록 13) - 등록에 필요로 하는 값으로 레시피를 등록(레시피 등록 12)한 뒤 해당 레시피 번호를 가이드에 갱신한다. `boardService.updateRecipeId(guideId, id);` ## 작업 50 - 재료양념 표시 - 재료양념 01/ 재료양념 입력란 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/4cd288f46f17a4f3f7990bff2898d1207c2b6d22) - 재료양념 02/ 재료양념 입력칸을 추가/삭제 버튼으로 조절하도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/f3ae7efdbe7e1ba70d5acfe73ae39cce2c8e53f2) - 재료양념 03/ 재료양념 데이터를 배열로 가져오기, 재료값만 구현 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/a723414d5782bdb7f6171d2a3a57c9ce08b94554) - 재료양념 04/ 입력값으로 구현된 문자열을 가져오도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/8f027fbc5d13f7aa8cb0cc85b15ee3f226112cdf) - 재료양념 05/ 재료, 양념의 각 항목, 값을 가져오도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/1ad818e72e0d7c0b963f9c891b3c991b267bd4b0) - 재료양념 06/ DB- ingredient 테이블 추가, 가져온 데이터로 재료양념 구성하기 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/891f6d6bed8e5bc407811f6a3aeb8a15b942923e) - 재료양념 07/ 등록된 레시피 번호를 재료양념으로 갱신 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/c6b56d10d1f891eee441a0623052c76132e3bde2) - 재료양념 08/ 좌우공백처리후 데이터 저장, 구분(,)이 중복되지 않도록 처리 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/8c78cb510eef421310cc60b0f7005c62d070c4b9) - 재료양념 09/ 레시피등록 스크립트에서 재료양념 문자열처리를 담당, 항목,수량을 채우도록 사용자에게 알림 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/8cd0f56eae40cbe10cffb1668dfeafcd813b55f3) - 재료양념 10/ 상세 페이지, 재료양념 영역 디자인 수정 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/91708f93baba02ddc60c58df3225a9a190351674) - 재료양념 11/ 특정 레시피에 해당하는 재료항목 문자열을 분리하여 상세페이지에 표시하도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/1cc393cb621d47f794399d087d3208c53fb32a0a) - 재료양념 12/ 재료,양념의 각 항목과 값을 표시하도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/60ffb8d2a57c911aca74ebccca4cd0c6dbd3db7b) - 재료양념 13/ 메서드를 통합하여 관리, 재료양념 데이터를 2차배열로 처리 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/beafc9a546900a9f6985377bd487af62d3db036e) > 공백처리 (재료양념 08) - input테그가 추가만 되고 입력되지 않았을 경우 ,가 여러개 겹쳐서 저장되었다. - 공란제외 `item != ''` 를 했음에도 실제값을 가진 앞열의 데이터로 , 가 남겨지게 된다. - 문자열 길이를 통해 그 앞열까지만 구분자를 두어 매번 넣지 않도록 수정 ## 작업 51 - 레시피 상세 페이지 갱신 - 레시피 상세 갱신 01/ 재료양념 항목별로 체크박스 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/b573234c5d363b579168eb27ccaa49b82591d5a9) - 레시피 상세 갱신 02/ 등록일, 수정일 표시 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/8ac1ba622466e3d674dfa2e1907cc7a9f5fcc02b) - 레시피 상세 갱신 03/ 레시피 분류 표시영역 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/b14ab19a7f318de16845bae631f3c18a7a759ecf) - 레시피 상세 갱신 04/ 상세, 등록 페이지 토스트 에디터 적용 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/7b8a67097240ff6d0b06ae0101c1b542b3dc8ac9) ## 작업 52 - 레시피 수정 페이지 - 레시피 수정 01/ 수정페이지 디자인 수정 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/86252b60ddca210cc222d020003ada1b962cb09e) - 레시피 수정 02/ 기존 등록한 데이터 표시하도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/7e0910c975a781dd3c37dde343077f41c12cd649) - 레시피 수정 03/ 기등록된 재료양념 표시, 입력란 추가,삭제 구현 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/b9c57793be138a9bfcbbdf561637135c3806ec06) - 레시피 수정 04/ 기등록된 레시피 분류 표시, 선택란 수정 구현, 대량데이터 생성쿼리 수정 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/de1e346b7371c8ebce44d50797f0238e3d702ce9) - 레시피 수정 05/ 기등록된 레시피 분류를 선택란에 표시, 레시피에 재료양념번호 추가, 컨트롤러에서 변수받기 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/122f8bcc2efbe95fc01c991f4c57f00cac7c1db2) - 레시피 수정 06/ 레시피 수정 기능 구현(가이드, 재료양념 갱신 필요) [GIT](https://github.com/donhyuck/YJ_Cooking/commit/903c01fa99b9f6e0b359f466d83e5cac36b1c540) - 레시피 수정 07/ 레시피 수정시 가이드, 재료양념 수정 구현 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/055fb81780c59578d3a87bb1c1a68fb4956f8615) - 레시피 수정 08/ 우측에 취소, 수정 고정버튼 구현, DB저장, 재료양념 수정 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/ec5678bb8e68adbebe018fa614e51ac80f6f6ee2) - 레시피 수정 09/ 등록, 수정에서 요리정보 스크립트, 재료양념 추가삭제칸 스크립트 통합 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/d3e4c173337edc9ce6592d8352b6a1051447a9cc) ## 작업 53 - 비밀번호 암호화 - 비밀번호 암호화 01/ 회원관련 표시 메시지 수정 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/352a40ff1698ecc95475848c45070ccc3c18befe) - 비밀번호 암호화 02/ 회원정보수정시, 입력받는 페이지에서 암호화를 수행하도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/1f7cf766bb5c763a95a25a898b42e47b473b777c) - 비밀번호 암호화 03/ 회원가입, 비밀번호 확인, 로그인시 암호화 적용 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/22c0050b6f6a8f30e992b010ddd0c94e0cae5496) ## 작업 54 - 댓글관련기능 ajax적용 - 댓글 ajax적용 01/ 댓글 삭제시 ajax적용하여 페이지 내에서 처리 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/c4c45b2aff60e3e776541c84a5a80b810aa2dadd) - 댓글 ajax적용 02/ 댓글 작성시 ajax적용제외, 댓글이동버튼 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/bd84df2acba9907863c59288bd2214dd832a10bf) - 댓글 ajax적용 03/ 댓글관련 스크립트는 Reply.js에서 담당, 댓글수정 모달 구현 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/116528dd43851df755b56878341fd97b15f7f73b) - 댓글 ajax적용 04/ 댓글 수정시 댓글정보 넘기기, 모달화면 구현 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/1e6927cd170bff44145ef7bc88c5ee42ea9dd7b1) - 댓글 ajax적용 05/ 수정버튼으로 활성화, 닫기버튼, 외부영역클릭시 비활성화되도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/02caf96bf1c5ce883ac181cb88d8bfc157c4e279) - 댓글 ajax적용 06/ 해당 페이지에서 수정내용을 입력후 수정 처리 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/34f825e01a3ff6765a2df32ffe5893ab82861952) - 댓글 ajax적용 07/ 로그인 디자인 수정, 댓글목록을 스크롤 박스에서 보도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/8e40abc95145728e39acf4ee2625380c496e4b81) - 댓글 ajax적용 08/ 댓글목록 디자인 개선 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/6357484ea54c282e0613bd6201629d6783b631e8) - 댓글 ajax적용 09/ 댓글 삭제시, 댓글갯수에도 반영하도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/a42e04bdfae89cf198972aecd853ca5869a6c3a0) > 댓글수정 버튼을 클릭하면 (댓글 ajax적용 04~06) 1) display속성이 hidden에서 flex로 보이게 되고, 2) ReplyModify__showModal가 활성화되어 해당 댓글의 번호, 작성된 내용을 모달창에 반영한다. 3) 취소 혹은 입력박스 이외를 클릭하면 다시 hidden으로 숨긴다. 4) 수정 내용 입력이 마치면 수정처리 후 댓글위치로 포커스된다. > 댓글삭제시 전체 댓글 갯수반영 (댓글 ajax적용 09) - 삭제할 댓글이 위치한 레시피번호를 가져오고 - 삭제 후 댓글갯수를 카운트하여 data1에 담아넘긴다. - 삭제시 댓글영역시 사라지는 것과 함꼐 댓글갯수가 최신화된다. ## 작업 55 - 리액션관련기능 ajax적용 - 리액션 ajax적용 01/ 리액션에서 이동하여 로그인한 경우, 로그인 후 자동으로 리액션되지 않도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/ce0a30ca606e0b3df95a9ef7e097ce9adc730ba7) - 리액션 ajax적용 02/ 스크랩 처리,취소 스크립트 구현 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/7ad61dd19178e1cb2b494d70747203408eb768e4) - 리액션 ajax적용 03/ 좋아요 처리,취소 스크립트 구현 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/04c1a1ee28f05b195a1e8d11f7d12a0a270b8c24) - 리액션 ajax적용 04/ 리액션에 따라 해당 아이콘, 갯수 보이도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/90e34481f037c34a68b26fabbed5dd46fc422e68) - 리액션 ajax적용 05/ 리액션에 따라 교체반영되도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/78176d8adb64fcbd771507dfe6e727aa4346a708) > 작업55 이전 문제 (리액션 ajax적용 01) - 스크랩과 좋아요는 로그인이 필요하도록 설정하였다. 로그인이 필요한 요청임을 알리고, 로그인 페이지로 이동, 로그인이 성공하면 기존 페이지로 이동되게 하였다. - 하지만, 해당 레시피 페이지로 이동하는 것과 함께, 자동으로 리액션까지 처리되면서 이동되었다. - 로그인 성공시 해당 레시피 페이지로 이동까지만 구현하기 위해 스크랩, 좋아요 관련 요청은 인코딩된 현재uri대신에 요청의 relId파라미터를 상세페이지 이동으로 리턴되게 했다. `return "/user/recipe/detail?id=" + req.getParameter("relId");` > 리액션에 따라 아이콘, 카운트 반영 (리액션 ajax적용 02~05) - 우선, 사용자의 요청을 보면 리액션(스크랩, 좋아요)에 대해 처리요청 또는 취소요청 하게되며 각 요청에 따라 4개로 구분된 함수를 스크랩과 좋아요로 통합했다. 이를 위해 a테그에 action타입을 make 또는 cancel로 구분하여, 요청이 처리요청인지, 취소요청인지 구분했다. - 댓글삭제ajax 처럼 p테그 내부에 테그생성은 레이아웃이 꼬이게 된다. 이를 위해 replaceWith를 스크립트에 적용하여, 요청에 따라 바뀐다. ## 작업 56 - 회원탈퇴 기능 - 회원탈퇴 01/ 회원탈퇴 요청시, 비밀번호확인 및 인증코드검사 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/201345d5ea2f6bc6034dbeb3a3353ac62737eaf1) - 회원탈퇴 02/ 회원탈퇴 페이지 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/c37a56de8433020e128d1e4adb0c54a2cf934a8d) - 회원탈퇴 03/ 회원탈퇴 기능 추가, 탈퇴회원 접근제한 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/b1a8bba2f085bea6c420d018ac035b533408161a) - 회원탈퇴 04/ 쿼리수정, 레시피에서 탈퇴회원표시, 기존정보로 로그인, 회원가입제한 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/f69fbcdfa6864ba292b638afc5ad8a3bf4debc17) ## 추가작업 - 분류 기능/ 추가 추천시 쿼리수정, 전체 선택이 가능하도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/f2a27d9348c2aa4d9af626d84bb533d03b58c1c8) 이전까지는 relId가 0으로 선택되면 IS NOT NULL 즉, 값이 있는 항목을 선택했다. 하지만 테이블 구조상 선택안된 경우 0값으로 두었기 때문에, 전체선택이라는 기능이 작동못했다. ```java AND G.contentId = #{relId} AND G.contentId != 0 ``` - 이처럼 쿼리를 수정하여, 기존대로 선택한 값을 찾아서 보여주고 0으로 선택되면, 0이외의 값을 가진 항목을 select한다. ## 작업 57 - 사진 등록 - 사진 등록 01/ 이미지 업로드에 필요한 파일 및 설정추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/9c5dd28233a9a00af5bfb643af45fa93695fee00) - 사진 등록 02/ 회원가입시 프로필 업로드 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/9f5dfb21496e6697f5d7069cd36d4e8f4b0ba179) - 사진 등록 03/ DB- genFile테이블 추가, genFile을 URL을 통해서 접근할 수 있도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/0598b964c1dd4e82052123e2d495fa42369f30a0) - 사진 등록 04/ 프로필 미등록 회원의 이미지 구현, DB-종류/일식 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/2a86ddc2ecdadfb8c0f1158932bf916c6122e9fa) - 사진 등록 05/ 프로필 업로드시 이미지 용량 제한 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/6e00e46c33729e90bd84f754911f30b6d0b19904) - 사진 등록 06/ 회원정보 수정시 프로필 이미지 변경 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/78e91023f837ca8dd8383edfa6ae6ec4f7782923) - 사진 등록 07/ 시작시 스크롤 상단에 위치하도록, 프로필 사진 변경 버튼으로 입력박스 보이도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/e2577a52272b76c39cf9ab88f8e951ef5cb706f9) - 사진 등록 08/ 프로필 변경을 별도의 메서드로 구현, 댓글작성자 프로필표시 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/7301f11ffbb67d16a0b3812b9a755c8504114958) - 사진 등록 09/ 프로필 이미지 등록,수정시 미리보기 구현 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/3a25445c6886debf0acfdd5e3dd0b57a2f7e8a14) - 사진 등록 10/ 레시피 대표사진 등록, 수정 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/0143e55ce911413ebabc5761575eac97ae5eb2f0) - 사진 등록 11/ 수정시 현재 사진보기, 대표사진 목록보기/상세보기 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/5cf7cb79b491ef9bef33976b5c6ea0b7c166d17b) - 사진 등록 12/ 댓글영역에서 요리후기사진 등록전 미리보기 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/44fad978d1ac418366128b88c46581c8798e2564) - 사진 등록 13/ 댓글 요리후기 사진 등록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/782445314af2efcb89d307b0ddb58c73d2a002fe) - 사진 등록 14/ 댓글 수정박스 이외 클릭시 닫기, 댓글 요리후기 수정 구현 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/4c1ebfc24a44a2ac8bed070feaa511aeea8dea17) > 미리보기 구현 ( 사진 등록 09 ) - id로 사진파일이 입력되는 테그에서 이미지를 읽어오고, 미리보기 박스에서 로드된 이미지를 불러와서 보여준다. - 서버로 제출되는 데이터가 아니라 사용자의 컴퓨터, 로컬 경로의 img테그가 삽입되어 보여주게 된다. > 사진등록 / 사진표시 | | relTypeCode | 설명 | type2Code | 기능 | | -- | -- | -- | -- | -- | | <회원> | member | 프로필 | profileImg | (등록)/(수정) | | <레시피> | recipe | 대표사진 | mainRecipeImg | (등록)/(수정) | | <레시피> | order | 요리순서사진 | recipeOrderImg | (등록)/(수정) | | <댓글> | reply | 요리후기 | reviewImg | (등록)/(수정) | > 사진표시 | 페이지 | 표시영역 | | -- | -- | | 마이홈 | 본인프로필 | | @rows=3: 상세페이지 | 대표사진표시 | | 작성자 프로필 | | 조리순서 사진 | | @rows=2: 댓글영역 | 요리후기 사진 | | 댓글 작성자 프로필 | | 목록 | 대표사진 표시 | ## 작업 58 - 검색기능 - 검색기능 01/ 리액션 안내문구 추가, 레시피상세보기 이동시 replace설정 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/eaea1d442b64fb9c30120f09df5bb561f00e0b9f) - 검색기능 02/ 맵핑 시작문자열 통합, 검색페이지 구현 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/35de4a45b27b89dce8b2f15ec8d5f2af143a488e) - 검색기능 03/ 검색 or 분류타입 선택, 선택 또는 입력값을 검색후에도 보이도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/095236592dd96d97a27cd4c8ff6cf646591ca010) - 검색기능 04/ 검색타입으로 레시피 검색기능 구현, 총갯수 표시 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/f86e22310827c8bed0a86afe6dc1d7aaa50ff4d3) - 검색기능 05/ 분류타입으로 레시피 검색기능 구현 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/8d10b08e7c646dd102d8390576d65e82827c24b5) - 검색기능 06/ searchRange이 입력되었 경우 검색되도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/46472f56bf28c1a7641aef0dd84dd2a6f0bfdfdf) - 검색기능 07/ 선택칸에 해당하는 이름을 검색후에도 표시하도록, 미검색시 메세지표시 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/2116b475aded9028210df931e8eb55b1e231061b) - 검색기능 08/ 전체검색, 레시피번호로 검색, 회원닉네임으로 검색 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/c9cf598baa0784d4aa620f32e169520cbec86df0) - 검색기능 09/ 검색분류를 적용하여 검색 추가, 리포지터리 정리 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/f2c59029a44b96ede5f26bc053d0a7959885f4c3) - 검색기능 10/ ingredient 테이블에서 레시피의 요리재료, 양념을 검색할 수 있도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/0b4192242f4a2d52acc0294aa87f258c1d053318) - 검색기능 11/ 포함여부를 선택하여 검색하도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/f83da48ee94f27af99c533bee4a9ad156763bc8e) > 검색하여 레시피 찾기 (검색기능 06) - searchRange가 입력되지 않으면 기존의 제목, 내용 검색 쿼리가 실행된다. - searchRange가 입력됨에 따라 LEFT JOIN 으로 처리된 가이드테이블을 붙인다. 이 가이드 테이블은 카테고리와 매칭되어 이름을 붙여서 만든 테이블이다. - 카테고리 테이블과 INNER JOIN으로 두고, boardId 묶음에서 가이드번호와 각 카테고리의 이름을 매칭된다. > GROUP_CONCAT 도입 - 도입이전 예를 들어 수육 레시피를 표현하고자 다음과 같은 데이터로 구성했다면 | sortId | methodId | contentId | freeId | sortName | methodName | contentName | freeName | | -- | -- | -- | -- | -- | -- | -- | -- | | 2 | 3 | 2 | 9 | 메인반찬 | | | | | 2 | 3 | 2 | 9 | | 끓이기 | | | | 2 | 3 | 2 | 9 | | | 돼지고기 | | | 2 | 3 | 2 | 9 | | | | 집들이 | - 위의 상황에서 레시피의 가이드정보는 sortId, methodId, contentId, freeId 의 조합을 가지며 최대 4개에서 0개를 가지게 된다. 테이블에서 자신 이외에는 빈칸으로 표현되면서, 각 속성 이외는 빈칸인채로 최소1개에서 4개까지 중복데이터가 늘어나게 된다. - 도입 이후 | sortId | methodId | contentId | freeId | categoryNameArr | | -- | -- | -- | -- | -- | |1 | 3 | 2 | 9 | 집들이,돼지고기,끓이기,밑반찬 | - 해당 카테고리 이름이 가이드 속성에 따라 행이 늘어나므로 GROUP_CONCAT(C.name) 으로 쉼표(,)로 통합하여 categoryNameArr 행으로 설정했다. > getSearchRecipes 쿼리설명, 사용자가 검색을 하는 과정 (검색기능 04~10) 1 ) 검색조건 설정 - 사용자가 입력하는 searchKeyword, searchRange 가 있다. searchKeyword 는 레시피 테이블 자체에서 검색이며, 조건은 (1) 제목만으로 검색 / (2) 제목 또는 내용 검색 / (3) 레시피번호로 검색 / (4) 회원닉네임으로 검색 그리고 (5) 구분없이 전체검색 searchRange는 가이드, 카테고리 테이블과 조인하여 레시피 분류를 제한하며, 조건은 (1) 레시피 종류 / (2) 요리방법 / (3) 재료,양념 / (4) 상황별 검색 그리고 (5) 구분없이 전체검색 2 ) 검색조건이 설정된 검색어 - searchKeyword 부터 보면, 우선 입력값이 있을 경우에 조건에 따라 작동하도록 했다. 입력값을 가지고, searchKeyword가 어느 위치던 포함된 단어가 있는지 `LIKE CONCAT('%', #{searchKeyword}, '%')` 확인한다. 선택된 kewordType에 따라 조건문이 달라지게 된다. 검사하는 부분은 구성된 recipe테이블의 속성 중 제목(recipe.title), 내용(recipe.body), 레시피번호(recipe.id), 레시피작성자(recipe.extra__writerName) - searchRange 또한 입력값이 있을 경우에, 필요한 테이블을 조인하며, categoryNameArr 로 구성한 속성값을 부여한다. 카테고리번호에 해당하는 이름을 나열하여, 검색어에 해당하는 경우, select 된다. ```java C.boardId = 1 AND G.sortId = C.relId AND 1 AND 0 ``` `C.boardId = 1 AND G.sortId = C.relId`는 board 1번인 레시피 종류 이면서 카테고리 번호가 매칭되는 것을 가져오게 된다. 이는 가이드의 속성값 sortId 이 된다. 사용자가 검색할 경우 rangeType 은 sort,method, content, free 중에 하나가 선택되는 경우, 전체선택되는 경우가 있다. 자신인 sort가 선택될 경우 뿐아니라 total인 경우에도 적용되게 했다. 반대로 method, content,free가 선택되면 작동하지 않도록, 조건문을 설정했다. 3 ) 재료, 양념 검색 - 레시피 를 보면 재료, 양념이 다양하게 포함된다. 레시피 등록시 레시피 분류를 정하게 되는데, 이때 정해진 범위에서 select 선택항목으로 구성된 데이터를 생성한다. 따라서, 대표재료인셈이고, 사용자가 찾고자 하는 원하는 재료, 양념가 포함된 레시피를 검색하지 못할 것이다. - 따라서, searchRange 입력시 가이드 테이블을 가져오는 것과 함께 재료, 양념 선택시 세부항목으로 ingredient 테이블을 가져오도록 했다. ```java ,G.* , I.* ``` - 이렇게 구성된 테이블은 recipe,guide, ingredient가 붙여진 테이블이다. 여기서 가이드에서 대표 재료로 찾기도 하며, ingredient의 row, sauce에서 포함된 것들을 찾기도 한다. ```java OR ( I.rowArr LIKE CONCAT('%', #{searchRange}, '%') OR I.rowValueArr LIKE CONCAT('%', #{searchRange}, '%') OR I.sauceArr LIKE CONCAT('%', #{searchRange}, '%') OR I.sauceValueArr LIKE CONCAT('%', #{searchRange}, '%') ) ``` > 검색으로 가능한 기능 - 검색어 검색란 하단에 모아보기 " " + " " 처럼 검색어 구분하여 표시하기 - 검색시 1) 요리의 방법, 분류, 재료 따라 복합필터링 2) 어느 하나로도 필터링 3) 검색어를 위에 보여주기 검색결과 "볶기" + "돼지고기" 4) 조건을 모두 포함한 결과 보기 or 하나라도 포함, 일부포함 ## 작업 59 - 조리순서 - 조리순서 01/ DB-조리순서 테이블 추가, 레시피의 조리순서가져오기 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/335039609d79f9fbfab73c5d726ba6c63a917294) - 조리순서 02/ 레시피 조리순서의 안내문구 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/c7ad8756a8cf3ded5a8c2186d2aceaf1d1cafb7d) - 조리순서 03/ 조리순서 등록, 조회 기능 추가, 레시피 등록 스크립트 별도로 관리 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/6428e656c6f80ccf892287f5c6804952fe171e8f) - 조리순서 04/ 조리순서 수정 기능 추가, 레시피 수정 스크립트 별도로 관리 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/a7b634c03b4748c7d5d51d2673bbbb6d7c5ff5c4) - 조리순서 05/ 안내문구 토글 기능 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/c60f7b3e78ec3a379aedb257e14df6185309ac5b) - 조리순서 06/ 요리순서 등록 영역 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/0ec1ddf4be49d56e3c6195452f258d8cdbbd3df5) - 조리순서 07/ 요리순서 이미지 테스트 구현 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/0d109c0e7f337628129940d5e8eeb2abc6509902) - 조리순서 08/ 다중이미지 미리보기 적용 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/80d84d1c31b44188833f7fb8c22c889639616e36) - 조리순서 09/ 사진등록, 내용작성 영역 구분 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/12cffffffd89f58efdf9d838526deb22afeed95b) - 조리순서 10/ 내용작성 박스 추가, 삭제 기능구현 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/69fb784912ec4358bbe0b29a94085c1f7cbf790e) - 조리순서 11/ 길어지면 사진등록버튼이 따라오도록, 우측 버튼모음 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/c6258b191f8c1dba92326b6ee0ed3b9f31bfd77b) - 조리순서 12/ 조리순서 내용을 폼데이터로 넘기도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/f24536551b0ead017895f93a1fbfb64ae5a22638) - 조리순서 13/ 레시피수정시 조리순서 적용, 조리순서 전체내용을 구분하도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/710c1cb7c0dedd20e764187106647ab3399c159e) - 조리순서 14/ 조리순서 내용수정 구현 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/84cf643d1ab1cdc06bb6116e5a65e7e232f77a04) - 조리순서 15/ 조리이미지를 순서에 맞게 불러오기 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/8903ef15a9a8ba686fba1bf50d9e57de4d24cf1e) - 조리순서 16/ 조리순서 박스 수정, 사진과 내용을 묶어서 관리 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/bc18c855a28517a8d85aa4f4271c7e937b8409b9) - 조리순서 17/ 조리순서 전체박스 추가, 삭제 기능구현 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/754076e50fdeafc6ab099c2e8c1316266f3d8121) - 조리순서 18/ 순서번호를 붙여서 입력란이 생성되도록, 순서번호 가져오기 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/0472955003543ab9e3c9ec8c5635e4e15ad99d5e) - 조리순서 19/ 추가되는 입력박스에 맞게 이미지 미리보기, 순서가 적용되도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/847a7b1100ba5f7f309aec109907f6105d94b39a) - 조리순서 20/ 이미지 업로드 후 상세페이지에서 누락되는 문제 해결 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/f3a3a5c8e04edfd9092f6bf2a297ed9a84faab8c) - 조리순서 21/ 레시피 수정시 조리순서 수정 구현 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/7e587a685874dcf2bf17ee93ad3a2d8c26511a67) - 조리순서 22/ 수정페이지에서 작성 박스 추가에 맞춰 orderNum 갱신 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/399ffcd8f981fea3f8ea104d95c71052ae109764) > 사진등록 설명 (조리순서 12) - 잘안쓰이는 @표시로 구분함 varStatus="status" forEach에서 ${ status.count }를 통해 1부터 번호매기기 > 조리순서 내용작성 설명 (조리순서 13~14) - 조리순서의 테이블(cookingOrder) 구조를 보면 레시피 등록시, 레시피번호(recipeId)와 통으로 길게 연결된 레시피 내용(orderBody)을 삽입한다. - 서비스에서 구분자@를 기준으로 분리하여 리스트에 담아 상세페이지로 가져온다. > 조리순서 이미지 (조리순서 15) - 조리순서 이미지를 가져오는 메서드 ```java public String getRecipeOrderImgUri(int recipeId, int fileNoCount) { return "/common/genFile/file/order/" + recipeId + "/extra/recipeOrderImg/"+ fileNoCount; } ``` - 사진의 경우, 등록된 레시피에 해당하는 조리순서와 각 순서에 대한 정보로 구성된다. - 추후 사진을 건너뛰는 경우도 고려하여, genFile테이블에서 파일번호(fileNo)로 사진데이터를 가져온다. 즉, recipe정보 이외에도 순서에 해당하는 데이터를 파일번호(fileNo)로 설정했다가 필요하다. > orderNum 도입 (조리순서 16 ~18) 1 ) 조리박스 추가시 orderNum 적용 - 추가 버튼으로 사진, 내용 박스가 함께 추가되도록 변경 -> orderNum가 전역변수로 선언되어 조리입력박스 생성에 따라 1씩 증가한다. ```js var orderNum = 1; const add_orderBox = () => { ... } ``` - 이미지 업로드시 미리보기, 사진변경을 위해서는 순서에 대한 구분이 필요함 -> 추가에 따라 증가하는 orderNum값이 input테그의 name에 대응되도록 설정했다. ```js name = `file__order__0__extra__recipeOrderImg__` + orderNum ``` - 결과적으로 input-recipeOrder, preview-recipeOrder 와 orderNum 가 조합되어 조리입력박스가 구성된다. 2 ) 조리순서 미리보기 - 이미지 업로드시 조리순서에 해당하는 데이터를 확인, input태그의 name값을 가져온다. - `var inputNum = inputNameStr.charAt(inputNameStr.length - 1);` -> 마지막 문자를 분리해서 inputNum 로서 조리순서 번호로 매긴다. - preview-recipeOrder__ + inputNum 조합으로 순서에 해당하는 위치에서 미리보기 이미지 구현한다. > 조리순서 미리보기 버그수정 (조리순서 19) - 이전까지 구현하면 추가 삭제가 이루어지고, 미리보기가 가능하다. ```js $(function() { var imgButton = document.getElementsByClassName("recipeOrderBox"); $(imgButton).on('change', function() { readRecipeOrderImage(this); }); }); ``` 1 ) 문제파악 : 추가로 생성된 입력박스에서는 미리보기 기능이 작동이 안되는 점을 확인했다. - 입력박스를 여러개 두고 페이지를 구성해보면 순서에 맞게 이미지추가, 이미지변경이 가능하다. 2 ) 해결모색 - 페이지가 이미 구성된 이후라서 미리보기 함수가 적용이 안되는 것을 파악했다. - 동적으로 추가된 입력박스라서 함수적용에 있어서 수정이 필요하다. 3 ) 오류해결 - 아래와 같이 change이벤트가 적용되도록 수정했다. ```js $(function() { $(document).on("change", ".recipeOrderBox", function() { readRecipeOrderImage(this); }); }); ``` on태그 각각에 들어가는 parameter들을 살펴보면 1. change 이벤트가 적용될 경우(onChange와 같은 역할) 2. 이벤트 적용할 타겟인 recipeOrderBox 요소 3. 동작 함수로 미리보기 함수 readRecipeOrderImage 를 불러온다. > 순서누락 방지 (조리순서 20) - 내용작성시 구분자가 되는 @의 경우가 되지 않도록 특수문자 입력방지 - 조리순서를 나타내는 과정을 보면 cookingOrder 테이블에서 @구분자에 의해 순서대로 문자열을 나눠서 배열로 지정한다. 이미지는 해당 레시피 번호(recipeId )에 해당하는 order 코드를 가져오면서 - 작성내용 번호에 해당하는 fileNoCount 로 순서에 맞는 이미지를 가져온다. ``` "/common/genFile/file/order/" + recipeId + "/extra/recipeOrderImg/"+ fileNoCount; ``` 1 ) 문제파악 - 삭제이후 orderNum가 증가한 상태에서 레시피 등록을 하게되면 이미지가 누락되는 경우가 생긴다. - DB에는 저장되지만, 상세페이지에서는 등록된 순서내용만큼만 표시하는 과정에서 사진이미지가 보이지 않게된다. 2 ) 해결모색 - 이미지를 등록될때의 번호로 갱신하는 과정이 필요하다. - 사용자는 순서박스를 추가 or 삭제를 할때 남아있는 박스와 별개로 orderNum는 증가한다. 이로써 input태그에 구성되는 name의 번호로 증가하게 된다. - 입력을 마치고 등록을 요청하면, 입력데이터 처리를 하게된다. -> 페이지를 넘겼기때문에, 사용자에 의해 데이터 변화가 발생할 수 없다. 3 ) 오류해결 - 조리순서 에서 내용작성은 빈칸없이 내용을 입력받는점 - 추가, 삭제에 관계없이 입력데이터 처리 과정에서 orderTextArr가 구성되는 점 -> orderTextArr.length가 조리순서의 마지막이라 할 수 있다. - 이를 이용하여 인덱스 i + 1 로 이미지의 name과 비교한다. `file__order__0__extra__recipeOrderImg__" + (i + 1)` ```js // 조리순서 이미지 번호 순서대로 처리 var orderImgArr = $(".recipeOrderBox"); // 작성내용 갯수만큼 검사 for (var i = 0; i < orderTextArr.length; i++) { // 조리순서 이미지 번호 가져오기 var inputNameStr = orderImgArr[i].name; // 내용작성에 해당하는 순서 var tempStrForNaming = "file__order__0__extra__recipeOrderImg__" + (i + 1); // 순서가 일치하지 않을 경우, 작성순서에 따른 번호로 name값 변경 if (tempStrForNaming !== inputNameStr) { orderImgArr[i].name = tempStrForNaming; }; }; ``` #### 개념. 자바스크립트 일치비교 - 동등연산자 -> ==는 Equality를 비교, ===는 Identity를 비교 ``` ==는 비교하는 객체의 타입이 달라도, 형변환하여 값이 같으면 true를 리턴 ===는 객체 타입이 같고 값이 같을 때 true 리턴 ``` > 조리순서 수정 (21) - 이미 등록된 내용에서는 기존대로 기능 동작 사진, 순서내용으로 구성한 배열에서 미리보기, 내용수정, 이미지 변경 - 입력박스를 추가하여 작성하는 경우, 스크립트 상 orderNum가 실제순서에 반영이 안된다. orderNum는 마지막 순서번호를 모르기 때문 - 컨트롤러에서 수정페이지modify.jsp에 배열크기를 지정하여 넘긴다. 해당 값은 lastOrderNum 라는 id로 둔다. - 결과적으로 작성페이지에는 lastOrderNum 가 없기 때문에 기존대로 orderNum가 1씩 증가하여 작성박스를 추가한다. 수정페이지에서 스크립트로 넘어가고 lastOrderNum의 값을 마지막순서로서 orderNum가 갱신된다. ```js // 수정페이지에서 마지막 번호 가져오기 if (document.getElementById("lastOrderNum")) { lastOrderNum = document.getElementById("lastOrderNum").value; // 처음 한번만 orderNum를 lastOrderNum로 설정하기 if (lastOrderNum > orderNum) { orderNum = lastOrderNum; } } ``` ## 작업 60 - 추가수정 - 추가수정 01/ 조리순서 null 값 오류 방지, 마이홈 레시피사진 표시 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/2065628c7606ec61fcbf95f6ba2960f659e8fe5b) - 추가수정 02/ 검색예시 안내문구 추가, toggle기능을 공통 스크립트 파일로 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/c12d628bbb0e47d568201019592e1cac2f5dad83) - 추가수정 03/ 파비콘 추가, 재료양념 데이터 입력시 required처리 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/392c92996568b77b721508dde959ae2607daba02) - 추가수정 04 조리순서 cookingOrder 테이블 오류 수정 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/518d36312266ba1ce294377ebcc09b8eaec848da) - 추가수정 05/ genFileDirPath 수정-> 작업폴더 내에서 이미지 관리, 현재 상태DB저장 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/2e1ed4f8e187c909ea6f81356a77c7f1cad974ed) - 추가수정 06/ 인터셉터가 적용되는 요청경로 갱신, 발급한 인증코드 회수 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/7fae7aa0736408a2b27d42c405927fd69befb0fe) - 추가수정 07/ DB업데이트, 레시피 등록 이후로 분류, 재료/양념, 조리순서 데이터 등록되도록 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/e599537e6708e0ceba53df2879db09121a19216a) - 추가수정 08/ 레시피 삭제시 관련가이드, 재료, 요리순서 함께 삭제 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/8f1932510d621733705e54e60f2b16f973d12be5) - 추가수정 09/ applicaton.yml 개발환경과 프로덕션환경용 설정분리 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/ff6f48f465949520f92b13b05d1236e53929e680) - 추가수정 10/ AttrRepository.xml 추가 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/463d90a86d4d982ba51fa54624a8f119136e6bf3) - 추가수정 11/ AttrRepository 리턴타입 수정, 배포환경에 따른 환경변수 적용 [GIT](https://github.com/donhyuck/YJ_Cooking/commit/51d16d090c9e4d2cd982f7c087c9b58fe26a966f)

게시글 상세