인천 일보 아카데미 58~67일 차 개인 프로젝트 - NAVER 지식in 클론 코딩 (4)

• myPage 레이아웃 만들기

왼쪽이 실제 네이버의 myPage 레이아웃 오른쪽이 내가 만든 myPage레이아웃

내가 필요한 부분만 가져와 사용했고 필요 없는 부분은 제외

css부분은 문외한이기 때문에 이거만드는데 하루종일 걸렸다....

 

• header.jsp - component

<div style="position: relative;display: inline;" class="gnb_common_area">
    <div id="header-myPage-box">
        <a href="#" style="position: relative;text-decoration: none;color: black;"
            id="layout-controller">
            <img id="header-myPage-img"src="https://ssl.pstatic.net/static/common/myarea/myInfo.gif"
                    alt="내 프로필 이미지" style="display: inline-block;">
            <span class="filter_mask" style="display: inline-block;"></span>
            <span id="header-myPage-name"style="display: inline-block;">${memberDTO.memberEmail}</span>
            <em class="blind">내정보 보기</em>
        </a>
    </div>
    <!-- 레이아웃 박스 -->
    <div class="header-layout-box" id="layout-box">
        <span class="header-layout-pointer"></span>
        <div class="header-layout-content">
            <div class="layout-img-area">
                <span class="layout-img-mask"></span>
                <img src="https://ssl.pstatic.net/static/common/myarea/myInfo.gif"
                        width="80" height="80" alt="프로필 이미지">
                <a href="#"class="layout-img-change">
                    <span class="blind">프로필 사진 변경</span>
                </a>
            </div>
            <div class="layout-txt-area">
                <p class="layout-user-account">
                    <span class="layout-user-name">
                        <a class="layout-user-nick" href="#">${memberDTO.memberEmail}</a>님
                    </span>
                    <a class="layout-logout" href="/member/logout">
                        <span class="layout-logout-bg"></span>
                        <span class="layout-logout-bdr"></span>
                        <span class="layout-logout-txt">로그아웃</span>
                    </a>
                </p>
                <a href="#" class="layout-user-domain">${memberDTO.memberDomain}</a>
            </div>
        </div>
    </div>
</div>

사실 myPage 레이아웃에는 큰 기능이 없습니다

그냥 보고 만들어보고 싶어서 해봤는데 생각보다 어려웠습니다

 

배운점은 realative , absolute 가 있습니다

realative : 해석 그대로 상대적인 위치를 지정합니다

position : relative 로 사용이 가능하고 요소를 자기 자신의 원래 위치를 기준으로 배치합니다

이를 absolute와 함께 사용하여 해당 위치에서 절대적인 위치 지정을 가능하게 해줍니다

 

absolute : 위치 지정, 절대적인 위치를 지정합니다

부모 에게 속박되지 않고 독립적인 위치 선정이 가능합니다

또한 다른 css의 흐름을 방해하지 않습니다

 

absolute의 경우 시작위치는 왼쪽 최상단이지만

realative , fixed , absolute 속성을 갖는 요소와 만나게되면

그 요소를 기준으로 위치를 지정할 수 있습니다

 

이를 이용하여 레이아웃을 만들고 싶은 div에 realative를 사용하고

레이아웃의 시작인 div에 absolute를 사용하여 좀 더 쉽게 위치를 선정할 수 있습니다

 

 

• header.jsp - script

<script>
    window.onload = function () {
        const layoutController = document.getElementById('layout-controller');
        const layoutBox = document.getElementById('layout-box');
        layoutController.addEventListener("click", function () {
            if (layoutBox.style.display === "block") {
                layoutBox.style.display = "none";
            } else {
                layoutBox.style.display = "block";
            }
        })
    }
</script>

window.onload 와 EventListener를 사용하여 해당 레이아웃을 클릭했을때

디스플레이가 none일 경우 block 으로 block일 경우 none으로 변경되게 만들었습니다

원래 같은 경우 window.onload를 사용하지 않았지만

두번 클릭해야 열리는 문제를 해결하지 못하여 사용하게 되었습니다

 

 

• Controller

    @GetMapping("/member/logout")
    public String memberLogout(HttpSession session) {
        session.invalidate();
        return "redirect:/";
    }

사용자가 로그아웃을 누르는 경우 session에 있는 값을 비워주고,

redirect를 사용하여 초기화면 Mapping을 실행해줍니다

그냥 index 새로고침