메인페이지는 자바스크립트를 이용하여 버튼을 클릭하면 해당 페이지로 이동 할 수 있게 간단하게 구성을 하였습니다.
또한 상단 네비바를 이용하여 편하게 해당 페이지로 이동 할 수 있게 구성을 하였습니다.
메인페이지는 상단 사진처럼 디자인을 했습니다.
<body>
<!-- 헤더 영역 -->
<th:block th:replace="fragments/nav :: header"></th:block>
<!-- 메인 컨텐츠 영역 -->
<th:block th:replace="fragments/mainContent"></th:block>
<!-- 푸터 영역 -->
<th:block th:replace="fragments/nav :: footer"></th:block>
<script th:src="@{js/login.js}"></script>
</body>
타임리프에 프레그먼트를 이용하여 페이지의 코드 재사용성과 유지보수에 용이 할 수 있게 하였습니다.(나중에 메인페이지에 기능을 추가하거나 버전 업데이트 대비)
<!-- 첫 번째 섹션 -->
<div class="section section1">
<div class="overlay"></div>
<div class="content">
<h1>나와 비슷한 사람 어디서 찾을까?</h1>
<div class="link-button">
<div class="button-group">
<p><span>나에게 딱 맞는</span> 이성을 찾고 싶다.</p><form action="/chat/match" method="POST">
<input type="hidden" name="userId" th:value="${user.uid}"> <!-- 현재 사용자 UID -->
<button type="submit">맞춤형 상대 찾기</button>
</form>
</div>
<div class="button-group2">
<p>내가 원하는 <span>이성을 찾고 싶다.</span></p>
<button onclick="goToProfileSearch()">프로필로 상대 찾기</button>
</div>
</div>
</div>
</div>
<!-- 두 번째 섹션 -->
<div class="section section2">
<div class="overlay"></div>
<div class="content2">
<h1><span>우리</span><br>오늘은 뭐하면서 놀까?</h1>
<div class="button-group">
<p>오늘은 어떤 사람들을 만날볼까?</p>
<button onclick="goTomeetingList()">모임 찾아보기</button>
</div>
<div class="button-group2">
<p><span>오늘은 어떤 걸 같이 해볼까?</span></p>
<button onclick=" makeMeetingRoom()">직접 모임 만들기</button>
</div>
</div>
</div>
<script>
function goToProfileSearch() {
// 원하는 경로로 페이지 이동
window.location.href = '/chat/findMultipleUsers'; // 여기에 이동할 URL을 입력하세요
}
function goTomeetingList() {
// 원하는 경로로 페이지 이동
window.location.href = '/meetingRoomsMap'; // 여기에 이동할 URL을 입력하세요
}
function makeMeetingRoom() {
// 원하는 경로로 페이지 이동
window.location.href = '/createMeetingRoom'; // 여기에 이동할 URL을 입력하세요
}
</script>
자바스크립트를 통해 각버튼에 이벤트를 생성하여 클릭하면 해당 페이지로 이동 할 수 있게 하였습니다.
헤더부분은 많은 페이지에서 사용하기 때문에 재사용성을 높이기 위해서 모듈화 하여 구성을 하였습니다.
<header th:fragment="header">
<div class="header">
<div class="logo-image"><img src="/image/logo.png"></div>
<div class="header-index">
<a href="/mypage">마이페이지</a> <!-- 마이페이지 링크 -->
<a href="/mypage/edit">프로필 수정</a> <!-- 프로필 수정 링크 -->
<a href="/logout">로그아웃</a> <!-- 로그아웃 링크 -->
<a href="#" onclick="submitMatchForm()">맞춤형 상대 찾기</a>
<form id="matchForm" action="/chat/match" method="POST" style="display: none;">
<input type="hidden" name="userId" value="${user.uid}"> <!-- 현재 사용자 UID -->
</form> <!-- 맞춤형 상대 찾기 링크 -->
<a href="/chat/findMultipleUsers">프로필로 상대 찾기</a> <!-- 프로필로 상대 찾기 링크 -->
<a href="/meetingRoomsMap">모임 찾기</a> <!-- 모임 찾기 링크 -->
</div>
</div>
<script>
function submitMatchForm() {
document.getElementById('matchForm').submit();
}
</script>
</header>
'project > 모임웹프로젝트' 카테고리의 다른 글
| 실시간 채팅 구현 스크립트 코드 구성 (1) | 2024.11.19 |
|---|---|
| 모임 웹프로젝트 실시간 채팅 프런트 구성 (0) | 2024.11.19 |
| 아이디 비밀번호 찾기 구현(11) (0) | 2024.09.30 |
| 로그인 기능 구현 중 UserDetails 관련 이슈 (10) (2) | 2024.09.30 |
| 모임 웹프로젝트 로그인 기능 구현(9) (1) | 2024.09.30 |