디자인 시안 확인
board-write.html
: 비 로그인 시 로그인 페이지로 리다이렉션 처리 됨 : 파일 미리 보기 기능 구현
board-write.html
더보기
board-write.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/header.css">
<link rel="stylesheet" href="../css/boardWrite.css">
</head>
<body>
<h1>글쓰기 화면</h1>
<header>
<nav class="nav-container">
<div class="nav-item">
<span class="menu-link" id="board">게시판</span>
</div>
<div class="nav-item" id="authLinks">
<span class="menu-link" id="signIn">로그인</span>
<span class="menu-link" id="signUp">회원가입</span>
</div>
</nav>
</header>
<main class="content-wrapper">
<section class="form-title">
<h1>글쓰기 by JS</h1>
</section>
<section>
<table>
<tr>
<th>제목</th>
<td>
<input type="text" class="inputs title">
</td>
</tr>
<tr>
<th>작성자</th>
<td>
<input type="text" class="inputs username" readonly>
</td>
</tr>
<tr>
<th>첨부파일</th>
<td>
<input type="file" class="file" accept="image/*" >
<!-- 이미지 파일만 받을 수 있도록 설정 accept="image/*" -->
</td>
</tr>
<tr>
<th>내용</th>
<td>
<div class="img-box">이미지 미리보기</div>
<textarea name="" id="" class="content"></textarea>
</td>
</tr>
</table>
<div class="btn-area">
<button type="button" class="btn">글쓰기</button>
</div>
</section>
</main>
<script src="../js/header.js"></script>
<script src="../js/boardWrite.js"></script>
</body>
</html>
boardWrite.css
더보기
boardWrite.css
.content {
width: 95%;
height: 300px;
font-size: 18px;
border: none;
resize: none;
margin-top: 5px;
}
.img-box {
width: 100%;
display: flex;
justify-content: center;
}
.img-box img {
width: 100%;
max-width: 300px;
}
header.js 코드 추가
// ... 생략
// 코드 추가
// 로그인 상태가 아니면 지정된 페이지로 리다이렉션
function redirectToPageIfNotLoggedIn(page) {
// 로컬 스토리지 접근 - user key 값 여부 확인
const loggedInUser = localStorage.getItem('user');
if(loggedInUser === null) {
location.href = `${page}.html`;
}
}
더보기
header.js 전체 코드
// DOMContentLoaded 이벤트를 사용해 보자.
window.document.addEventListener('DOMContentLoaded', function() {
// DOM 요소를 가져오기
const boardMenu = window.document.getElementById('board');
const signInMenu = window.document.getElementById('signIn');
const signUpMenu = window.document.getElementById('signUp');
const authLinks = window.document.getElementById('authLinks');
// 로그인 여부 확인
// F12 눌러서 LocalStorage 에서 user 를 확인할 수 있다.
const user = localStorage.getItem('user');
if(user != null) {
if(authLinks) {
// 로그인, 회원가입 링크를 로그아웃 링크로 변경
console.log('authLinks', authLinks);
authLinks.innerHTML = '<span class="menu-link" id="logoutLink">로그아웃</span>';
// 로그아웃 클릭 시 처리
document.getElementById('logoutLink').addEventListener('click', function() {
localStorage.removeItem('user');
// 로그아웃 후 페이지 새로고침 해야 렌더링이 된다.
window.location.reload(); // 로그아웃 클릭시, 로그인, 회원가입 버튼이 나타난다.
});
}
}
// 각 메뉴에 클릭 이벤트를 추가 합니다.
if(boardMenu) {
boardMenu.addEventListener('click', function() {
window.location.href = 'board-list.html';
});
}
if(signInMenu) {
signInMenu.addEventListener('click', function() {
window.location.href = 'sign-in.html';
});
}
if(signUpMenu) {
signUpMenu.addEventListener('click', function() {
window.location.href = 'sign-up.html';
});
}
});
// 로그인 상태가 아니면 지정된 페이지로 리다이렉션
function redirectToPageIfNotLoggedIn(page) {
// 로컬 스토리지 접근 - user key 값 여부 확인
const loggedInUser = localStorage.getItem('user');
if(loggedInUser == null) {
location.href = `${page}.html`;
}
}
boardWrite.js
더보기
boardWrite.js
// 로그인 상태 여부
redirectToPageIfNotLoggedIn('sign-in');
document.addEventListener('DOMContentLoaded', function() {
// 사용할 요소에 접근
const title = document.querySelector('.title');
const username = document.querySelector('.username');
const fileInput = document.querySelector('.file');
const imgViewBox = document.querySelector('.img-box');
const button = document.querySelector('button');
const tody = new Date();
// 사용자가 선택한 이미지를 저장할 공간이 필요
let imageData = null;
// 사용자 정보 가져오기
const getUser = JSON.parse(localStorage.getItem('user'));
username.value = getUser.username;
// 파일 미리보기 기능 만들기
function fileUpload(event) {
alert('111111');
const file = event.target.files[0];
console.log('file', file);
// 파일 크기 유효성 검사 (5MB 까지 만 허용할 꺼야)
// 1024 * 1024 * 5 = 5MB (5242880) 이하만 허용
if(file.size >= 5242880) {
alert('첨부 파일은 5MB 이하만 가능합니다.');
event.target.value =""; // 5MB 초과되는 파일이 올라오면 첨부 파일 목록에서 삭제한다.
return;
}
// 파일 타입 유효성 검사
const validFileTypes = ["image/jpeg", "image/png", "image/gif"];
if(!validFileTypes.includes(file.type)) { // 위의 확장자가 아닌경우
alert("유효한 파일 타입이 아닙니다. ( jpeg, png, gif만 허용 )");
event.target.value=""; // 파일 확장자가 유효하지 않으면 첨부 파일 목록에서 삭제된다.
}
// 파일 미리보기 기능
const reader = new FileReader();
reader.onload = function(e) {
console.log('e.target.result', e.target.result);
console.log('Base64', e.target.result);
imgViewBox.innerHTML = `<img src="${e.target.result}" alt ="Upload Image"> `;
// 글 저장시에 로컬스토리지에 바이너리 데이터를 -- 64 인코딩 저장
imageData = reader.result;
}
reader.readAsDataURL(file); // Base64 인코딩 바이트 단위 데이터를 -- 64개 문자로 표현하는 인코딩 방식
}
// 글 저장하는 기능 만들기
// 이벤트 리스너 등록 처리 - file change
fileInput.addEventListener('change', fileUpload);
});
'JS' 카테고리의 다른 글
| 2024.08.28 JavaScript 게시판 만들기 JavaScript boardWrite.js 글 쓰기 (0) | 2024.08.28 |
|---|---|
| 2024.08.27 JavaScript 게시판 만들기 JavaScript board-list 기능 만들기 -2 (0) | 2024.08.27 |
| 2024.08.26 JavaScript 게시판 만들기 JavaScript board-list 기능 만들기 (0) | 2024.08.26 |
| 2024.08.22 JavaScript 게시판 만들기 JavaScript 로그인 기능 만들기 (0) | 2024.08.22 |
| 2024.08.21 JavaScript 게시판 만들기 JavaScript 회원 가입 만들기 (0) | 2024.08.21 |