<div class="seller_auth_btns">
<button id="sellerLoginBtn">판매자 로그인</button>
<button id="sellerSignupBtn">판매자 회원가입</button>
</div>
이걸 헤더 안에 넣는다.
<header class="header">
<a href="/" class="logo">MOAMOA</a>
<!-- 검색창-->
<div class="search_box">
<input type="search" name="search" id="searchInput">
<div class="search_btn" onclick="searchProducts()">검색</div>
</div>
<div id="searchResults"></div>
<!-- 로그인 버튼-->
<div class="login_btn" id="loginBtn">
<a href="javascript:;">
<img src="https://developers.kakao.com/tool/resource/static/img/button/login/full/ko/kakao_login_medium_wide.png"
alt="kakao_btn"></a>
</div>
<!-- 판매자 로그인 및 회원가입 버튼 -->
<div class="seller_auth_btns">
<button id="sellerLoginBtn">판매자 로그인</button>
<button id="sellerSignupBtn">판매자 회원가입</button>
</div>
<div id="welcomeMessage" class="welcome">
<p>환영합니다!</p>
<div class="btn_flex">
<button id="logoutBtn" class="logout_btn welcome_btn">로그아웃</button>
<button id="my-page-button" class="my_btn welcome_btn">마이페이지</button>
</div>
</div>
</header>그럼 이제 로그인과 회원가입 버튼이 생긴다.
그런데,
이런식으로 버튼이 딱 달라붙게되는데 이걸 해결하려면
.seller_auth_btns {
margin-top: 20px; /* 판매자 로그인 및 회원가입 버튼 상단에 20px의 간격 추가 */
}이걸 스타일 안쪽에 넣으면 해결된다.
인덱스에의 밑에 스크립트 안쪽에
// 판매자 회원가입 함수 여기부터 추가
document.addEventListener('DOMContentLoaded', (event) => {
document.getElementById('sellerSignupBtn').addEventListener('click', function() {
window.location.href = 'www.your-website.com/signup.html';
});
});
이걸 넣고
seller-signup.html을 만든다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Seller Signup</title>
<style>
/* 여기에 CSS 스타일을 추가하세요 */
</style>
</head>
<body>
<h1>Seller Signup</h1>
<form id="signupForm">
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br>
<label for="passwordCheck">Confirm Password:</label><br>
<input type="password" id="passwordCheck" name="passwordCheck"><br>
<label for="nickname">Nickname:</label><br>
<input type="text" id="nickname" name="nickname"><br>
<label for="address">Address:</label><br>
<input type="text" id="address" name="address"><br>
<label for="phoneNumber">Phone Number:</label><br>
<input type="tel" id="phoneNumber" name="phoneNumber"><br>
<label for="bizRegistrationNumber">Business Registration Number:</label><br>
<input type="text" id="bizRegistrationNumber" name="bizRegistrationNumber"><br>
<input type="submit" value="Signup">
</form>
<script>
document.getElementById('sellerSignupBtn').addEventListener('click', function() {
window.location.href = 'www.your-website.com/signup.html'; // '/signup'은 실제 회원가입 페이지의 URL로 변경해야 합니다.
});
// 회원가입 페이지에서 폼을 제출하면 실행되는 함수
function signUpSeller(event) {
event.preventDefault(); // 폼 제출의 기본 동작을 막습니다.
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const passwordCheck = document.getElementById('passwordCheck').value;
const nickname = document.getElementById('nickname').value;
const address = document.getElementById('address').value;
const phoneNumber = document.getElementById('phoneNumber').value;
const bizRegistrationNumber = document.getElementById('bizRegistrationNumber').value;
const sellerSignUpRequest = {
email: email,
password: password,
passwordCheck: passwordCheck,
nickname: nickname,
address: address,
phoneNumber: phoneNumber,
bizRegistrationNumber: bizRegistrationNumber
};
fetch('/sellers/signup', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(sellerSignUpRequest)
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => {
console.error('Error:', error);
alert('회원가입에 실패했습니다. 다시 시도해 주세요.');
});
}
// 회원가입 페이지의 폼에 이벤트 리스너를 추가합니다.
document.getElementById('signupForm').addEventListener('submit', signUpSeller);
</script>
</body>
</html>
그런데 오류가 뜬다. 아직 해결중이다.