비밀번호 확인 및 상세보기 기능

src/main/java/com/example/ili_web/board/controller/BoardController.java

@@ -1,5 +1,6 @@
 package com.example.ili_web.board.controller;
 
+import com.example.ili_web.board.domain.Board;
 import com.example.ili_web.board.dto.*;
 import com.example.ili_web.board.service.BoardService;
 import com.example.ili_web.main.response.CheckDupleRes;
@@ -12,6 +13,7 @@ import org.springframework.web.multipart.MultipartFile;
 
 import java.io.IOException;
 import java.util.List;
+import java.util.Optional;
 
 @Controller
 @Slf4j
@@ -72,10 +74,48 @@ public class BoardController {
     @PostMapping("/board/add")
     public ResponseEntity insertBoard (BoardInfoReq req, @RequestPart("files") List<MultipartFile> files) throws IOException {
         log.info("========== Insert Board Data ==========");
-        for (MultipartFile file : files) {
-            log.info("file =>" + file.getOriginalFilename());
-        }
         boardService.insertBoard(req, files);
         return ResponseEntity.ok(null);
     }
+
+    /**
+     method -> getPassword
+     description -> 패스워드 찾기
+     @author -> 김주한
+     @return -> String (password)
+     date -> 2024.03.20
+     **/
+    @GetMapping("/board/password")
+    public ResponseEntity getPassword (BoardReq req) {
+        log.info("========== Get Board Password ==========");
+        return ResponseEntity.ok(boardService.getPassword(req.getId()));
+    }
+
+    /**
+     method -> checkPassword
+     description -> 패스워드 일치 여부
+     @author -> 김주한
+     @return -> boolean
+     date -> 2024.03.20
+     **/
+    @PostMapping("/board/password")
+    public ResponseEntity checkPassword(@RequestBody BoardReq req) {
+        log.info("========== Check Board Password ==========");
+        return ResponseEntity.ok(boardService.checkPassword(req));
+    }
+
+    /**
+     * method -> getBoardDetail
+     * description -> 게시판 상세 가져오기
+     *
+     * @return -> BoardRes
+     * date -> 2024.03.20
+     * @author -> 김주한
+     **/
+    @GetMapping("/board/detail")
+    public ResponseEntity<Optional<Board>> getBoardDetail(BoardReq req) {
+        log.info("========== Get Board Detail ==========");
+        return ResponseEntity.ok(boardService.getBoardDetail(req));
+    }
+    
 }

src/main/java/com/example/ili_web/board/domain/Board.java

@@ -49,7 +49,7 @@ public class Board {
         this.userName = req.getUserName();
         this.password = req.getPassword();
         this.company = req.getCompany();
-        this.phoneNum = req.getPhone();
+        this.phoneNum = req.getPhoneNum();
         this.nickName = req.getNickname();
         this.title = req.getTitle();
         this.content = req.getContent();

src/main/java/com/example/ili_web/board/dto/BoardInfoReq.java

@@ -12,7 +12,7 @@ public class BoardInfoReq {
     private String type;
     private String email;
     private String password;
-    private String phone;
+    private String phoneNum;
     private String company;
     private String nickname;
 }

src/main/java/com/example/ili_web/board/dto/BoardList.java

@@ -7,6 +7,7 @@ import java.time.LocalDateTime;
 
 @Getter
 public class BoardList {
+    private Long id;
     private String title;
     private String userName;
     private String content;

src/main/java/com/example/ili_web/board/dto/BoardReq.java

@@ -4,6 +4,8 @@ import lombok.Data;
 
 @Data
 public class BoardReq {
+    private Long id;
+    private String password;
     private String userName;
     private String type;
     private int page;

src/main/java/com/example/ili_web/board/repository/BoardRepository.java

@@ -7,4 +7,5 @@ import org.springframework.stereotype.Repository;
 @Repository
 public interface BoardRepository extends JpaRepository<Board, Long> {
     long countBoardsByNickName(String nick_name);
+    boolean existsBoardByIdAndPassword(Long id, String password);
 }

src/main/java/com/example/ili_web/board/repository/BoardRepositoryDsl.java

@@ -27,7 +27,7 @@ public class BoardRepositoryDsl {
         BoardRes res = new BoardRes();
 
         List<BoardList> bList = queryFactory
-                .select(Projections.fields(BoardList.class, b.title, b.userName, b.content, b.type, b.regDt))
+                .select(Projections.fields(BoardList.class, b.id, b.title, b.userName, b.content, b.type, b.regDt))
                 .from(b)
                 .where(typeEq(req.getType()))
                 .offset(req.getOffset())

src/main/java/com/example/ili_web/board/service/BoardService.java

@@ -7,6 +7,7 @@ import com.example.ili_web.board.repository.BoardFileRepository;
 import com.example.ili_web.board.repository.BoardRepository;
 import com.example.ili_web.board.repository.BoardRepositoryDsl;
 import com.example.ili_web.main.response.CheckDupleRes;
+import jakarta.persistence.EntityNotFoundException;
 import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.beans.factory.annotation.Value;
@@ -15,9 +16,7 @@ import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
 import org.springframework.web.multipart.MultipartFile;
 import org.springframework.web.reactive.function.client.WebClient;
-import org.springframework.web.reactive.function.client.WebClient;
 import reactor.netty.http.client.HttpClient;
-import org.springframework.http.client.reactive.ReactorClientHttpConnector;
 
 import java.io.File;
 import java.io.IOException;
@@ -26,8 +25,7 @@ import java.nio.file.Path;
 import java.nio.file.Paths;
 import java.util.ArrayList;
 import java.util.List;
-
-import static java.net.http.HttpClient.*;
+import java.util.Optional;
 
 @Service
 @RequiredArgsConstructor
@@ -153,4 +151,16 @@ public class BoardService {
             Files.write(realPath, bytes);
         }
     }
+
+    public String getPassword(Long id) {
+        return repository.findById(id).orElseThrow(()-> new EntityNotFoundException("sd"+id)).getPassword();
+    }
+
+    public boolean checkPassword(BoardReq req) {
+        return repository.existsBoardByIdAndPassword(req.getId(), req.getPassword());
+    }
+
+    public Optional<Board> getBoardDetail(BoardReq req) {
+        return repository.findById(req.getId());
+    }
 }

src/main/resources/static/js/contact/advice.js

@@ -36,7 +36,6 @@ function subForm() {
         formData.append('email', document.getElementById('lg_email').value);
         formData.append('nickname', document.getElementById('lg_nickname').value);
         if (fileArray.length > 0) {
-            console.log(fileArray)
             for (let file of fileArray) {
                 formData.append('files', file[0]);
             }
@@ -80,23 +79,6 @@ function clearModal() {
     timer.innerHTML = '';
 }
 
-/*
-document.getElementById('lg_file').addEventListener('change', (event)=>{
-    const files = event.target.files;
-    let html = '';
-    if (fileArray.length > 5) {
-        alert('파일은 5개까지 업로드 가능합니다.')
-    } else {
-        fileArray.push(files);
-    }
-    const ul = document.getElementById('lg_file_list');
-    const textNode = document.createTextNode(files[0].name);
-    const li = document.createElement('li');
-    li.setAttribute('class', 'list-group-item')
-    li.appendChild(textNode);
-    ul.appendChild(li);
-})
-*/
 
 function initFile (input) {
     const files = input.files;
@@ -113,3 +95,18 @@ function initFile (input) {
     li.appendChild(textNode);
     ul.appendChild(li);
 }
+
+
+async function bindDetail(id) {
+    const data = await getDetail(id);
+}
+
+function getDetail(id) {
+    axios.get('/api/v1/board/detail', {params : {id}})
+        .then(res => {
+            return res.data;
+        })
+        .catch(error => {
+            console.log(error)
+        })
+}

src/main/resources/static/js/contact/auth-phone.js

@@ -16,29 +16,52 @@ async function beforeAuth(tag) {
         }
     })
     setCookie('authNum', randomCode, 3);
-    const timer = document.getElementById('timer');
-    timer.style.display = 'block';
-    countDown();
+    if (tag === 'auth_check_phone') {
+        const timer = document.getElementById('auth_timer');
+        timer.style.display = 'block';
+        countDown('auth_timer');
+    } else {
+        const timer = document.getElementById('timer');
+        timer.style.display = 'block';
+        countDown('timer');
+    }
 }
 
 // 인증버튼 클릭
-function afterAuth(tag) {
-    const phoneNumInput = document.getElementById('check_phone');
-    const authNumInput = document.getElementById('check_apply_num');
-    const phoneBtn = document.getElementById('button_phone');
-    const authBtn = document.getElementById('button_auth');
-    const timer = document.getElementById('timer');
-    const authVal = document.getElementById('check_apply_num').value;
+async function afterAuth(type) {
+    let phoneNumInput;
+    let authNumInput;
+    let phoneBtn;
+    let authBtn;
+    let timer;
+    let authVal;
+    if (type === 'APPLY') {
+        phoneNumInput = document.getElementById('check_phone');
+        authNumInput = document.getElementById('check_apply_num');
+        phoneBtn = document.getElementById('button_phone');
+        authBtn = document.getElementById('button_auth');
+        timer = document.getElementById('timer');
+        authVal = document.getElementById('check_apply_num').value;
+    } else if (type === 'READ') {
+        phoneNumInput = document.getElementById('auth_check_phone');
+        authNumInput = document.getElementById('auth_apply_num');
+        phoneBtn = document.getElementById('auth_button_phone');
+        authBtn = document.getElementById('auth_button_auth');
+        timer = document.getElementById('auth_timer');
+        authVal = document.getElementById('auth_apply_num').value;
+    }
     if (authVal.length === 7) {
         const authNum = getCookie('authNum');
         if (authVal === authNum) {
-            alert('인증이 완료되었습니다.');
+
             phoneNumInput.disabled = true;
             authNumInput.disabled = true;
             phoneBtn.disabled = true;
             authBtn.disabled = true;
             timer.style.display = 'none';
             clearInterval(intervalCount);
+            type === 'APPLY' ? alert('인증이 완료되었습니다.') :
+                await getPassword();
         } else {
             alert('인증번호가 일치하지 않습니다.');
         }
@@ -74,14 +97,52 @@ function saveAuth() {
     document.getElementById('lg_email').value = email;
     document.getElementById('lg_phone').value = phone;
     document.getElementById('button-phone').disabled = true;
-    closeModal();
+    closeModal('advice_modal');
+}
+
+async function getPassword() {
+    const id = document.getElementById('board_id').value;
+    axios.get('/api/v1/board/password', {params: {id}})
+        .then(res => {
+            alert(`비밀번호는 ${res.data} 입니다.`)
+        })
+        .catch(error => {
+            console.log(error)
+        })
+}
+
+function checkPassword() {
+    const id = document.getElementById('board_id').value;
+    const password = document.getElementById('auth_password').value;
+    const dataMap = {id, password}
+    axios.post('/api/v1/board/password', dataMap)
+        .then(res => {
+            if (!res.data) {
+                alert('비밀번호가 틀렸습니다.');
+            } else {
+                closeModal('auth_modal');
+                document.getElementById('advice_manual_header').style.display = 'none';
+                document.getElementById('advice_apply').style.display = 'none';
+                document.getElementById('advice_manual').style.display = 'none';
+                document.getElementById('advice_detail').style.display = 'flex';
+                bindDetail(id)
+            }
+        })
+        .catch(error => {
+
+        })
 }
 
 // 타이머 함수
-function countDown() {
+function countDown(target) {
     let time = 180;
-    const timer = document.getElementById('timer');
-    const buttonAuth = document.getElementById('button_auth');
+    const timer = document.getElementById(target);
+    let buttonAuth;
+    if (target === 'timer') {
+        buttonAuth = document.getElementById('button_auth');
+    } else {
+        buttonAuth = document.getElementById('auth_button_auth');
+    }
     intervalCount = setInterval(function () {
         if (time > 0) {
             --time;

src/main/resources/static/js/contact/makeHtml.js

@@ -6,7 +6,7 @@ function makeTable(list, target, code) {
         html += '<tr>';
         html += `<td>${data.regDt}</td>`
         html += code !== 'LG' ? `<td><a href="javascript:void(0);" onclick="goToDetail('${data.title}', '${data.userName}', '${data.regDt}', '${data.content}')">${data.title}</a></td>`
-            : `<td><a href="javascript:void(0);" onclick="modalControl('auth_modal')">${data.title}</a></td>`
+            : `<td><a href="javascript:void(0);" onclick="openModal('auth_modal', '${data.id}')">${data.title}</a></td>`
         html += `<td>${data.userName}</td>`
         html += '</tr>';
     }

src/main/resources/static/js/contact/modalControl.js

@@ -1,6 +1,9 @@
-function modalControl(tag) {
+function openModal(tag, id = null) {
     const modal = document.querySelector(`#${tag}`);
     modal.style.display = 'flex'
+    if (id !== null) {
+        document.getElementById('board_id').value = id;
+    }
 }
 
 function closeModal(tag) {

src/main/resources/templates/html/contact-inner/logi-advice.html

@@ -46,7 +46,7 @@
                             <div class="input-group mb-3 form-floating">
                                 <input class="form-control" id="lg_phone" required type="tel" name="phoneNum" disabled>
                                 <label class="form-label" for="lg_phone">핸드폰번호</label>
-                                <button class="btn btn-outline-secondary" id="button-phone" type="button" onclick="modalControl('advice_modal')">인증 확인</button>
+                                <button class="btn btn-outline-secondary" id="button-phone" type="button" onclick="openModal('advice_modal')">인증 확인</button>
                             </div>
                         </div>
                         <div class="col-md-6 form-floating">
@@ -96,6 +96,53 @@
                 </form>
             </div>
         </div>
+        <div class="row" id="advice_detail" style="display: none">
+            <div class="container my-5">
+                    <input type="hidden" name="type" value="LG">
+                    <div class="row g-3">
+                        <div class="col-md-6 form-floating h-3">
+                            <input class="form-control" id="lg_detail_name" required type="text" name="userName" disabled>
+                            <label class="form-label" for="lg_detail_name">성명</label>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="input-group mb-3 form-floating">
+                                <input class="form-control" id="lg_detail_phone" required type="tel" name="phoneNum" disabled>
+                                <label class="form-label" for="lg_detail_phone">핸드폰번호</label>
+                            </div>
+                        </div>
+                        <div class="col-md-6 form-floating">
+                            <input class="form-control" id="lg_detail_email" required type="email" name="email" disabled>
+                            <label class="form-label" for="lg_detail_email">이메일</label>
+                        </div>
+                        <div class="col-md-6 ">
+                            <div class="input-group mb-3 form-floating">
+                                <input class="form-control" id="lg_detail_nickname" name="nickname" required type="text" disabled>
+                                <label class="form-label" for="lg_detail_nickname">닉네임</label>
+                            </div>
+                        </div>
+
+                        <div class="col-md-6 form-floating mb-4">
+                            <input class="form-control" id="lg_detail_company" name="company" type="text" disabled>
+                            <label class="form-label" for="lg_detail_company">상호</label>
+                        </div>
+                        <div class="col-md-6">
+                            <p>파일목록</p>
+                            <ul id="lg_detail_file_list" class="list-group mb-3">
+
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="mb-3 form-floating">
+                        <input class="form-control" id="lg_detail_title" required name="title" type="text" disabled>
+                        <label class="form-label" for="lg_detail_title">제목</label>
+                    </div>
+                    <div class="mb-3 form-floating">
+                        <textarea class="form-control" id="lg_detail_content" required rows="10" name="content" disabled></textarea>
+                        <label class="form-label" for="lg_content">내용</label>
+                    </div>
+                    <button class="btn btn-primary" type="button" onclick="subForm()">신청하기</button>
+            </div>
+        </div>
         <div class="row" id="advice_manual">
 
             <div class="col d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">

src/main/resources/templates/html/modal/lg-advice-modal.html

@@ -1,7 +1,7 @@
 <div class="modal" id="advice_modal">
     <div class="modal_body">
         <h2>개인정보 인증</h2>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="closeModal()"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="closeModal('advice_modal')"></button>
         <form id="check_info">
             <div class="form-floating mb-3">
                 <input type="text" class="form-control" id="check_name" placeholder="홍깅동">
@@ -19,7 +19,7 @@
             <div class="form-floating mb-3 input-group">
                 <input type="email" class="form-control" id="check_apply_num" placeholder="0000000">
                 <label for="check_apply_num">인증번호</label>
-                <button class="btn btn-outline-secondary" id="button_auth" type="button" onclick="afterAuth('check_apply_num')">인증 확인</button>
+                <button class="btn btn-outline-secondary" id="button_auth" type="button" onclick="afterAuth('APPLY')">인증 확인</button>
             </div>
             <p id="timer" style="display: none"></p>
             <div class="form-floating mb-3">

src/main/resources/templates/html/modal/lg-auth-modal.html

@@ -1,4 +1,5 @@
 <div class="modal" id="auth_modal">
+    <input type="hidden" value="" id="board_id">
     <div class="modal_body">
         <h2>비밀번호 입력</h2>
         <button aria-label="Close" class="btn-close" data-bs-dismiss="modal" onclick="closeModal('auth_modal')"
@@ -14,16 +15,16 @@
             <div class="form-floating mb-3 input-group" id="auth_phone" style="display: none">
                 <input type="tel" class="form-control" id="auth_check_phone" placeholder="xxx-xxxx-xxxx">
                 <label for="auth_check_phone">휴대폰번호</label>
-                <button class="btn btn-outline-secondary" id="button_phone" type="button" onclick="beforeAuth('auth_check_phone')">번호 발급</button>
+                <button class="btn btn-outline-secondary" id="auth_button_phone" type="button" onclick="beforeAuth('auth_check_phone')">번호 발급</button>
             </div>
             <div class="form-floating mb-3 input-group" id="auth_num" style="display: none">
                 <input type="email" class="form-control" id="auth_apply_num" placeholder="0000000">
                 <label for="auth_apply_num">인증번호</label>
-                <button class="btn btn-outline-secondary" id="button_auth" type="button" onclick="afterAuth('auth_apply_num')">인증 확인</button>
+                <button class="btn btn-outline-secondary" id="auth_button_auth" type="button" onclick="afterAuth('READ')">인증 확인</button>
             </div>
-            <p id="timer" style="display: none"></p>
+            <p id="auth_timer" style="display: none"></p>
             <div class="form-floating mb-3">
-                <button class="btn btn-success" onclick="saveAuth()" type="button">제출</button>
+                <button class="btn btn-success" onclick="checkPassword()" type="button">제출</button>
             </div>
         </form>
     </div>