about page

build.gradle

@@ -36,8 +36,9 @@ dependencies {
     testImplementation 'org.springframework.graphql:spring-graphql-test'
     // log4j2
     implementation 'org.springframework.boot:spring-boot-starter-log4j2'
-    // webmvc
-/*    implementation 'org.springframework'*/
+    //thymeleaf
+    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
+    implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'
 }
 
 tasks.named('test') {

src/main/java/com/example/ili_web/main/controller/MainController.java

@@ -11,8 +11,21 @@ import org.springframework.web.bind.annotation.RequestMapping;
 public class MainController {
 
     @GetMapping("/")
-    public String test () {
-        log.info("Connect!!");
+    public String index () {
+        log.info("========== Move to index ==========");
         return "/html/index.html";
     }
+
+    /**
+     method -> about
+     description -> about 페이지이동
+     @author -> 김주한
+     @return -> html
+     date -> 2024.02.29
+     **/
+    @GetMapping("/about")
+    public String about () {
+        log.info("========== Move to about ==========");
+        return "/html/about.html";
+    }
 }

src/main/resources/static/css/about.css

@@ -0,0 +1,126 @@
+/* Carousel base class */
+.carousel {
+    margin-bottom: 4rem;
+}
+/* Since positioning the image, we need to help out the caption */
+.carousel-caption {
+    bottom: 3rem;
+    z-index: 10;
+}
+
+/* Declare heights because of positioning of img element */
+.carousel-item {
+    height: 32rem;
+}
+.carousel-item > img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    min-width: 100%;
+    height: 32rem;
+}
+
+/** Blog basd **/
+/* stylelint-disable selector-list-comma-newline-after */
+
+.blog-header {
+    line-height: 1;
+    border-bottom: 1px solid #e5e5e5;
+}
+
+.blog-header-logo {
+    font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/;
+    font-size: 2.25rem;
+}
+
+.blog-header-logo:hover {
+    text-decoration: none;
+}
+
+/*h1, h2, h3, h4, h5, h6 {
+    font-family: "Playfair Display", Georgia, "Times New Roman", serif!*rtl:Amiri, Georgia, "Times New Roman", serif*!;
+}*/
+
+.display-4 {
+    font-size: 2.5rem;
+}
+@media (min-width: 768px) {
+    .display-4 {
+        font-size: 3rem;
+    }
+}
+
+.nav-scroller {
+    position: relative;
+    z-index: 2;
+    height: 2.75rem;
+    overflow-y: hidden;
+}
+
+.nav-scroller .nav {
+    display: flex;
+    flex-wrap: nowrap;
+    padding-bottom: 1rem;
+    margin-top: -1px;
+    overflow-x: auto;
+    text-align: center;
+    white-space: nowrap;
+    -webkit-overflow-scrolling: touch;
+}
+
+.nav-scroller .nav-link {
+    padding-top: .75rem;
+    padding-bottom: .75rem;
+    font-size: .875rem;
+}
+
+.card-img-right {
+    height: 100%;
+    border-radius: 0 3px 3px 0;
+}
+
+.flex-auto {
+    flex: 0 0 auto;
+}
+
+.h-250 { height: 250px; }
+@media (min-width: 768px) {
+    .h-md-250 { height: 250px; }
+}
+
+/* Pagination */
+.blog-pagination {
+    margin-bottom: 4rem;
+}
+.blog-pagination > .btn {
+    border-radius: 2rem;
+}
+
+/*
+ * Blog posts
+ */
+.blog-post {
+    margin-bottom: 4rem;
+}
+.blog-post-title {
+    margin-bottom: .25rem;
+    font-size: 2.5rem;
+}
+.blog-post-meta {
+    margin-bottom: 1.25rem;
+    color: #727272;
+}
+
+/*
+ * Footer
+ */
+.blog-footer {
+    padding: 2.5rem 0;
+    color: #727272;
+    text-align: center;
+    background-color: #f9f9f9;
+    border-top: .05rem solid #e5e5e5;
+}
+.blog-footer p:last-child {
+    margin-bottom: 0;
+}

src/main/resources/static/css/index.css

@@ -11,6 +11,19 @@ body {
 
 /* CUSTOMIZE THE CAROUSEL
 -------------------------------------------------- */
+.bd-placeholder-img {
+    font-size: 1.125rem;
+    text-anchor: middle;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+}
+
+@media (min-width: 768px) {
+    .bd-placeholder-img-lg {
+        font-size: 3.5rem;
+    }
+}
 
 /* Carousel base class */
 .carousel {

src/main/resources/templates/html/about.html

@@ -0,0 +1,90 @@
+<!doctype html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="utf-8">
+    <meta content="width=device-width, initial-scale=1" name="viewport">
+    <meta content="" name="description">
+    <meta content="Mark Otto, Jacob Thornton, and Bootstrap contributors" name="author">
+    <meta content="Hugo 0.84.0" name="generator">
+    <title>(주)국제종합물류</title>
+
+    <link href="https://getbootstrap.com/docs/5.0/examples/carousel/" rel="canonical">
+    <!-- Bootstrap core CSS -->
+    <link href="/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Custom styles for this template -->
+    <link href="/css/about.css" rel="stylesheet">
+</head>
+<body>
+<header th:include="/html/common/header"></header>
+
+<main>
+    <div class="carousel slide" data-bs-ride="carousel" id="myCarousel">
+        <!--<div class="carousel-indicators">
+            <button aria-label="Slide 1" data-bs-slide-to="0" data-bs-target="#myCarousel" type="button"></button>
+            <button aria-label="Slide 2" data-bs-slide-to="1" data-bs-target="#myCarousel" type="button"></button>
+            <button aria-label="Slide 3" data-bs-slide-to="2" data-bs-target="#myCarousel" type="button"></button>
+        </div>-->
+        <div class="carousel-inner">
+            <div class="carousel-item active">
+                <svg aria-hidden="true" class="bd-placeholder-img" focusable="false" height="100%"
+                     preserveAspectRatio="xMidYMid slice" width="100%" xmlns="http://www.w3.org/2000/svg">
+                    <rect fill="#777" height="100%" width="100%"/>
+                </svg>
+
+                <div class="container">
+                    <div class="carousel-caption">
+                        <h1>회사소개</h1>
+                        <p>The Master of Global Logistics</p>
+                        <p>중국을 시작으로 세계 각지에 글로벌 물류 네트워크를 구축하였고</p>
+                        <p>오랜 실무경험을 통한 노하우로 언제 어디서나 고객만족을 실현하고 있습니다.</p>
+                        <p><a class="btn" href="#">회사개요</a>
+                            <a class="btn" href="#">CEO 인사말</a>
+                            <a class="btn" href="#">연혁</a>
+                            <a class="btn" href="#">경영이념</a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row mb-2">
+        <div class="row justify-content-center mb-2">
+            <div class="col-md-8">
+                <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-300 position-relative">
+                    <div class="col p-4 d-flex flex-column position-static align-items-stretch h-100">
+                        <h3 class="mb-2">회사개요</h3>
+                        <p></p>
+                        <div class="mb-1 text-muted">법인명 : (주)국제종합물류</div>
+                        <div class="mb-1 text-muted">설립일 : 1988.10.10</div>
+                        <div class="mb-1 text-muted">대표이사 : 이재구</div>
+                        <div class="mb-1 text-muted">사업영역 : 국제물류, 창고보관, 전자상거래, 국제특송, 특수화물, 지정화물, 육상국제운송, 유럽철도운송, 통관업무, 관세환급, 물류/컨설팅</div>
+                        <div class="mb-1 text-muted">소재지 : 인천광역시 중구 신흥동 1가 31-1 국제물류빌딩</div>
+                        <div class="mb-1 text-muted">해외법인 : 爱尔国际物流（烟台）有限公司。/ IL INTERNATIONAL LOGISTICS VINA CO.,LTD</div>
+                        <a class="stretched-link" href="#">Continue reading</a>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-8">
+                <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-300 position-relative">
+                    <div class="col p-4 d-flex flex-column position-static align-items-stretch h-100">
+                        <h3 class="mb-2">회사개요</h3>
+                        <p></p>
+                        <div class="mb-1 text-muted">법인명 : (주)국제종합물류</div>
+                        <div class="mb-1 text-muted">설립일 : 1988.10.10</div>
+                        <div class="mb-1 text-muted">대표이사 : 이재구</div>
+                        <div class="mb-1 text-muted">사업영역 : 국제물류, 창고보관, 전자상거래, 국제특송, 특수화물, 지정화물, 육상국제운송, 유럽철도운송, 통관업무, 관세환급, 물류/컨설팅</div>
+                        <div class="mb-1 text-muted">소재지 : 인천광역시 중구 신흥동 1가 31-1 국제물류빌딩</div>
+                        <div class="mb-1 text-muted">HP : <a class="stretched-link" href="https://www.nn21.com/"></a></div>
+                        <p class="card-text mb-auto">This is a wider card with supporting text below as a natural
+                            lead-in to additional content.</p>
+                        <a class="stretched-link" href="#">Continue reading</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</main>
+<hr class="featurette-divider">
+<footer class="footer" th:include="/html/common/footer"></footer>
+</body>
+</html>

src/main/resources/templates/html/common/footer.html

@@ -0,0 +1,23 @@
+<div class="container">
+    <div class="row">
+        <div class="col-md-6">
+            <h4>회사 소개</h4>
+            <p>CEO 인사말</p>
+            <p>회사연혁</p>
+            <p>경영이념</p>
+        </div>
+        <div class="col-md-6">
+            <h4>Contact Us</h4>
+            <p>연락처 및 위치 정보</p>
+        </div>
+    </div>
+</div>
+<div class="bottom-footer">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-12">
+                <p>&copy;2016 INTERNATIONAL LOGISTICS CO., LTD. ALL RIGHTS RESERVED.</p>
+            </div>
+        </div>
+    </div>
+</div>

src/main/resources/templates/html/common/header.html

@@ -0,0 +1,29 @@
+<nav class="navbar navbar-expand-md navbar-white fixed-top bg-white">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="/"><img alt="" src="/image/logo.png"></a>
+        <button aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"
+                class="navbar-toggler"
+                data-bs-target="#navbarCollapse" data-bs-toggle="collapse" type="button">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarCollapse">
+            <ul class="navbar-nav me-auto mb-2 mb-md-0">
+                <li class="nav-item">
+                    <a aria-current="page" class="nav-link fw-bold text-dark" href="/about">회사소개</a>
+                </li>
+                <li class="nav-item">
+                    <a aria-current="page" class="nav-link fw-bold text-dark" href="#">사업영역</a>
+                </li>
+                <li class="nav-item">
+                    <a aria-current="page" class="nav-link fw-bold text-dark" href="#">정보광장</a>
+                </li>
+                <li class="nav-item">
+                    <a aria-current="page" class="nav-link fw-bold text-dark" href="#">고객센터</a>
+                </li>
+            </ul>
+            <form class="d-flex">
+                <button class="btn btn-success" type="button">물류회원전용</button>
+            </form>
+        </div>
+    </div>
+</nav>

src/main/resources/templates/html/index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
 <head>
     <meta charset="utf-8">
     <meta content="width=device-width, initial-scale=1" name="viewport">
@@ -14,58 +14,13 @@
     <!-- swiper CSS-->
     <link href="https://unpkg.com/swiper/swiper-bundle.min.css" rel="stylesheet">
 
-    <style>
-        .bd-placeholder-img {
-            font-size: 1.125rem;
-            text-anchor: middle;
-            -webkit-user-select: none;
-            -moz-user-select: none;
-            user-select: none;
-        }
-
-        @media (min-width: 768px) {
-            .bd-placeholder-img-lg {
-                font-size: 3.5rem;
-            }
-        }
-    </style>
-
 
     <!-- Custom styles for this template -->
     <link href="/css/index.css" rel="stylesheet">
 </head>
 <body>
 
-<header>
-    <nav class="navbar navbar-expand-md navbar-white fixed-top bg-white">
-        <div class="container-fluid">
-            <a class="navbar-brand" href="#"><img alt="" src="/image/logo.png"></a>
-            <button aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"
-                    class="navbar-toggler"
-                    data-bs-target="#navbarCollapse" data-bs-toggle="collapse" type="button">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            <div class="collapse navbar-collapse" id="navbarCollapse">
-                <ul class="navbar-nav me-auto mb-2 mb-md-0">
-                    <li class="nav-item">
-                        <a aria-current="page" class="nav-link fw-bold text-dark" href="#">회사소개</a>
-                    </li>
-                    <li class="nav-item">
-                        <a aria-current="page" class="nav-link fw-bold text-dark" href="#">사업영역</a>
-                    </li>
-                    <li class="nav-item">
-                        <a aria-current="page" class="nav-link fw-bold text-dark" href="#">정보광장</a>
-                    </li>
-                    <li class="nav-item">
-                        <a aria-current="page" class="nav-link fw-bold text-dark" href="#">고객센터</a>
-                    </li>
-                </ul>
-                <form class="d-flex">
-                    <button class="btn btn-success" type="button">물류회원전용</button>
-                </form>
-            </div>
-        </div>
-    </nav>
+<header th:include="/html/common/header">
 </header>
 
 <main>
@@ -262,35 +217,8 @@
     </div><!-- /.container -->
 
 
-    <!-- FOOTER -->
-    <!--<footer class="container">
-        <p class="float-end"><a href="#">Back to top</a></p>
-        <p>&copy; 2017–2021 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
-    </footer>-->
-    <footer class="footer">
-        <div class="container">
-            <div class="row">
-                <div class="col-md-6">
-                    <h4>회사 소개</h4>
-                    <p>CEO 인사말</p>
-                    <p>회사연혁</p>
-                    <p>경영이념</p>
-                </div>
-                <div class="col-md-6">
-                    <h4>Contact Us</h4>
-                    <p>연락처 및 위치 정보</p>
-                </div>
-            </div>
-        </div>
-        <div class="bottom-footer">
-            <div class="container">
-                <div class="row">
-                    <div class="col-md-12">
-                        <p>&copy;2016 INTERNATIONAL LOGISTICS CO., LTD. ALL RIGHTS RESERVED.</p>
-                    </div>
-                </div>
-            </div>
-        </div>
+    <footer class="footer" th:include="/html/common/footer">
+
     </footer>
 </main>