[230901] 간단한 화면 구현

간단한 화면 구현

💬 시연 영상을 위해 간단한 화면 구현을 해야했습니다. 별도의 Front 서버를 만들기보다는 기존 서버에 Thymeleaf을 사용해서 화면을 구성하기로 했습니다. HTML, JQuery, CSS, BootStrap5를 사용했습니다.

 

✔ Controller 추가

💬 제가 맡은 부분은 아이디어 쓰기, 아이디어 업데이트 부분이었습니다. 해당 페이지를 호출하기 위해 Controller를 생성하고 url에 연결 시켜주었습니다.

@Controller
@RequestMapping("/view")
public class ViewController {

    @GetMapping("/pageWrite")
    public String ideaWritePage() {
        return "page/ideaWrite";
    }

    @GetMapping("/pageUpdate")
    public String ideaUpdatePage() {
        return "page/ideaUpdate";
    }
    
}

 

✔ JQuery, BootStrap5 추가

💬 JQuery와 Ajax를 사용하기 위해 JQuery 3.5.1 버전을 추가했습니다. 그리고 화면을 쉽게 그릴 수 있도록 컴포넌트를 제공하는 BootStrap5를 위한 JS 파일과 CSS 파일을 추가했습니다.

<!-- JQuery 3.5.1 버전 JS 파일 -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>

<!-- BootStrap 5.3.0 JS 파일과 CSS 파일 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">​

 

✔ 화면 작업

💬 상단 Nav 파일을 만들었으며, 그 아래로 BootStrap5에서 제공하는 그리드로 레이아웃을 잡았습니다. 거기에 필요한 입력할 수 있는 칸들을 왼쪽 컨테이너 만들었으며, 오른쪽 컨테이너에는 현재 사진을 보여주도록 만들었습니다. 맨 아래 컨테이너에는 내용을 입력할 수 있도록 BottStrap에서 제공하는 textarea를 적용했습니다.

 

✔ 결과 화면