$$config title: 자기소개 페이지 keywords: - IT - 자기소개 - 두번째 $$ # 오늘 한일(21/10/11) ![image](https://i.imgur.com/3FLDYlb.png) ![image](https://i.imgur.com/9r5i6yi.png) # head.jspf ## 검색기능 ```html

``` # mobileSideBar.jspf ## 모바일화면에서 메뉴를 보여주는 사이드바 ```html ``` # common.css ## 모바일 사이드바와 검색바의 css ```css /* 모바일 사이드바 시작 */ .mobile-side-bar { top:0; left:0; width:100%; height:100%; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; background-color: rgba(0,0,0,0.7); } .mobile-side-bar__content { background-color: white; position: absolute; top:0; right:0; bottom:0; transform:translateX(100%); transition:transform 0.2s; min-width:320px; } .mobile-side-bar.active { opacity: 1; visibility: visible; } .mobile-side-bar.active .mobile-side-bar__content { transform:translateX(0); } .mobile-side-bar__menu-box-1 > ul > li > a { padding: 12px 15px; display: flex; font-weight: bold; } .mobile-side-bar__menu-box-1 > ul > li:hover > a { color:red; text-decoration: underline; } @media (max-width: 767px) { html.mobile-side-bar-actived, html.mobile-side-bar-actived > body { overflow: hidden; } } /* 모바일 사이드바 끝 */ /* 검색바 시작 */ .search-bar-actived, .search-bar-actived > body { overflow:hidden; } .search-bar { visibility: hidden; opacity: 0; background-color: rgba(0,0,0,0.7); position:fixed; top:0; left:0; width: 100%; height: 100%; display:flex; align-items: center; justify-content: center; z-index:100; } .search-bar.active { visibility: visible; opacity: 1; } .search-bar > form { min-width:320px; background-color: white; padding: 20px; border-radius: 10px; border:2px solid black; } /* 검색바 끝 */ ``` # common.js ## 모바일 사이드바와 검색바의 js ```js /* 모바일 탑바 시작 */ function MobileTopBar__init() { $('.mobile-top-bar .btn-show-mobile-side-bar').click(function() { MobileSideBar__show(); }); $('.mobile-top-bar .btn-show-search-bar').click(function() { SearchBar__show(); }); } /* 모바일 탑바 끝 */ /* 모바일 사이드바 시작 */ function MobileSideBar__init() { $('.mobile-side-bar, .mobile-side-bar .btn-close-mobile-side-bar').click(function() { MobileSideBar__hide(); }) $('.mobile-side-bar__content').click(function(e) { e.stopPropagation(); }); $('.mobile-side-bar .btn-show-search-bar').click(function() { SearchBar__show(); }); } function MobileSideBar__show() { $('.mobile-side-bar').addClass('active'); $('html').addClass('mobile-side-bar-actived'); } function MobileSideBar__hide() { $('.mobile-side-bar').removeClass('active'); $('html').removeClass('mobile-side-bar-actived'); } /* 모바일 사이드바 끝 */ /* 탑바 시작 */ function TopBar__init() { $('.top-bar .btn-show-search-bar').click(function() { SearchBar__show(); }); } /* 탑바 끝 */ /* 검색바 시작 */ function SearchBar__init() { $('.search-bar .btn-hide-search-bar').click(function() { SearchBar__hide(); }); } function SearchBar__show() { $('html').addClass('search-bar-actived'); $('.search-bar').addClass('active'); setTimeout(function() { $('.search-bar form input[name="searchKeyword"]').focus(); }, 100); } function SearchBar__hide() { $('html').removeClass('search-bar-actived'); $('.search-bar').removeClass('active'); $('.search-bar form input[name="searchKeyword"]').val(''); } /* 검색바 끝 */ TopBar__init(); MobileSideBar__init(); MobileTopBar__init(); SearchBar__init(); ``` # Rq.java ## Request 와 Response 를 편하게 쓰게 해주는 어댑터 패턴의 라이브러리 ```java @Component @Scope(value = "request", proxyMode = ScopedProxyMode.TARGET_CLASS) public class Rq { @Getter private boolean isLogined; @Getter private int loginedMemberId; @Getter private Member loginedMember; private HttpServletRequest req; private HttpServletResponse resp; private HttpSession session; public Rq(HttpServletRequest req, HttpServletResponse resp, MemberService memberService) { this.req = req; this.resp = resp; this.session = req.getSession(); boolean isLogined = false; int loginedMemberId = 0; Member loginedMember = null; if (session.getAttribute("loginedMemberId") != null) { isLogined = true; loginedMemberId = (int) session.getAttribute("loginedMemberId"); loginedMember = memberService.getMemberById(loginedMemberId); } this.isLogined = isLogined; this.loginedMemberId = loginedMemberId; this.loginedMember = loginedMember; this.req.setAttribute("rq", this); } public void printHistoryBackJs(String msg) { resp.setContentType("text/html; charset=UTF-8"); print(Ut.jsHistoryBack(msg)); } public void print(String str) { try { resp.getWriter().append(str); } catch (IOException e) { e.printStackTrace(); } } public void println(String str) { print(str + "\n"); } public void login(Member member) { session.setAttribute("loginedMemberId", member.getId()); } public void logout() { session.removeAttribute("loginedMemberId"); } public String historyBackJsOnView(String msg) { req.setAttribute("msg", msg); req.setAttribute("historyBack", true); return "common/js"; } public String jsHistoryBack(String msg) { return Ut.jsHistoryBack(msg); } public String jsReplace(String msg, String uri) { return Ut.jsReplace(msg, uri); } // 이 메서드는 Rq 객체가 자연스럽게 생성되도록 유도하는 역할을 한다. // 지우면 안되고, // 편의를 위해 BeforeActionInterceptor 에서 꼭 호출해줘야 한다. public void initOnBeforeActionInterceptor() { } } ``` # ResultData ## 결과의 true, false 를 내용과 필요 데이터를 담을 수 있게 해주는 라이브러리 ```java @Data public class ResultData { private String resultCode; private String msg; private Map < String, Object > body; public ResultData(String resultCode, String msg, Object...args) { this.resultCode = resultCode; this.msg = msg; this.body = Ut.mapOf(args); } public boolean isSuccess() { return resultCode.startsWith("S-"); } public boolean isFail() { return isSuccess() == false; } } ``` # 느낀점 - xampp가 갑자기 안되서 고생했다. 오류를 해결하려다 결국 재설치 했다. - html를 안하다 하려니 기억이 나지않는 부분이 많았다. 하는 방법이라도 다시 익혀야 할 것 같다.