뷰페이지 구성(2)

팀원들과의 소통 후 결정한 내용은 우리가 진행하는 프로젝트는 백 프로젝트이기 때문에 뷰에 크게 신경쓰지 말고 백을 완벽하게 구성을 한 후에 남은 시간에 뷰를 건드려 보기로 했다.

 

그렇기 때문에 일단은 무료 웹 템플릿을 이용하여 뷰를 구성하기로 했다. 

저번과 마찬가지로 fetch API를 이용하여 메인 index페이지를 구성했는데 

<div class="button-container">
    <div class="button-group" align="center">
    <h2>기획본부</h2>
        <a href="javascript:void(0)" onclick="FetchContent('fetchContent1', 'test/managementplanning')" class="button small">경영기획팀</a>
        <a href="javascript:void(0)" onclick="FetchContent('fetchContent2', 'test/strategicplanning')" class="button small">전략기획팀</a>
    </div>
    <div class="button-group" align="center">
    <h2>관리본부</h2>
        <a href="javascript:void(0)" onclick="FetchContent('fetchContent3', 'test/account')" class="button small">회계팀</a>
        <a href="javascript:void(0)" onclick="FetchContent('fetchContent4', 'test/finance')" class="button small">재무팀</a>
        <a href="javascript:void(0)" onclick="FetchContent('fetchContent5', 'test/greeting')" class="button small">인사팀</a>
        <a href="javascript:void(0)" onclick="FetchContent('fetchContent6', 'test/gunradish')" class="button small">총무팀</a>
    </div>
</div> 

<div class="button-container">
	<div class="button-group" align="center">
    <h2>영업본부</h2>
        <a href="javascript:void(0)" onclick="FetchContent('fetchContent7', 'test/internationalsales')" class="button small">해외영업팀</a>
        <a href="javascript:void(0)" onclick="FetchContent('fetchContent8', 'test/domesticsales')" class="button small">국내영업팀</a>
        <a href="javascript:void(0)" onclick="FetchContent('fetchContent9', 'test/storesales')" class="button small">매장영업팀</a>
        <a href="javascript:void(0)" onclick="FetchContent('fetchContent10', 'test/businessmanagement')" class="button small">영업관리팀</a>
    </div>
    <div class="button-group" align="center">
    <h2>지원본부</h2>
        <a href="javascript:void(0)" onclick="FetchContent('fetchContent11', 'test/production')" class="button small">생산팀</a>
        <a href="javascript:void(0)" onclick="FetchContent('fetchContent12', 'test/purchase')" class="button small">구매팀</a>
        <a href="javascript:void(0)" onclick="FetchContent('fetchContent13', 'test/quality')" class="button small">품질관리팀</a>
        <a href="javascript:void(0)" onclick="FetchContent('fetchContent14', 'test/distribution')" class="button small">물류팀</a>
    </div>
</div>

각각의 버튼을 클릭하면 버튼 밑에 있는 div에 각 팀의 기능 버튼(?) 이 나오고 그 버튼을 누르면 페이지 이동을 시키도록 구성을 했다.

 

 

JS

let currentOpenFetchContent = null;

    function FetchContent(fetchContentId, url) {
        var fetchContent = document.getElementById(fetchContentId);

        // 현재 열려있는 FetchContent가 있으면 닫기
        if (currentOpenFetchContent === fetchContent) {
            fetchContent.innerHTML = '';
            currentOpenFetchContent = null;
            return;
        }

        // 모든 FetchContent 닫기
        closeAllFetchContents();

        // FetchContent를 열기
        fetch(url).then(function(response) {
            response.text().then(function(text) {
                fetchContent.innerHTML = text;
                currentOpenFetchContent = fetchContent;
            });
        });
    }

    // 모든 FetchContent를 닫는 함수 정의
    function closeAllFetchContents() {
        var fetchContents = document.getElementsByName("f");
        for (var i = 0; i < fetchContents.length; i++) {
            fetchContents[i].innerHTML = '';
        }
    }

    // Windows.onload에서 fetchcontent1의 내용을 로드하기
    window.onload = function() {
        FetchContent('fetchContent1', 'test/managementplanning');
    };

참고로 window.onload를 이용하면 페이지에 들어왔을 때 자동으로 실행을 시킴으로서 조금 휑해 보일 수 있는 메인페이지를 채워줄 수 있게 된다. 

 

그리고 'test/managementplanning' 은 컨트롤러 매핑 경로로 컨트롤러에서 리턴값을 managementplanning.jsp로 줬기 때문에

 

<h2>경영기획팀</h2>
<br>
	<input type="button" value="회사정보" onclick="#">
	<input type="button" value="사업자정보" onclick="#">
	<input type="button" value="지점관리" onclick="#">
	<input type="button" value="경영자정보" onclick="#">

 

이 내용이 출력되게 된다. 참고로 onclick에 있는 #은 아직 매핑경로를 지정해 주지 않았기 때문에 임의로 둔 것이다. 

 

그래서 실제 뷰페이지 결과는

 

이런 느낌..?

 

경영기획팀 버튼을 한 번 더 누르면 <hr> 밑에 내용이 사라지고 다른 팀 버튼을 누르면 그 팀에 해당되는 버튼들로 잘 교체된다.