고객문의 페이지 완성

build.gradle

@@ -34,11 +34,18 @@ dependencies {
     testImplementation 'org.springframework.boot:spring-boot-starter-test'
     testImplementation 'org.springframework:spring-webflux'
     testImplementation 'org.springframework.graphql:spring-graphql-test'
+
     // log4j2
     implementation 'org.springframework.boot:spring-boot-starter-log4j2'
+
     //thymeleaf
     implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
     implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'
+
+    // mssql
+    implementation 'com.microsoft.sqlserver:mssql-jdbc:9.4.0.jre8'
+
+
 }
 
 tasks.named('test') {

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

@@ -10,6 +10,13 @@ import org.springframework.web.bind.annotation.RequestMapping;
 @Slf4j
 public class MainController {
 
+    /**
+     method -> index
+     description -> index 페이지이동
+     @author -> 김주한
+     @return -> html
+     date -> 2024.02.24
+     **/
     @GetMapping("/")
     public String index () {
         log.info("========== Move to index ==========");
@@ -18,7 +25,7 @@ public class MainController {
 
     /**
      method -> about
-     description -> about 페이지이동
+     description -> 회사소개 페이지이동
      @author -> 김주한
      @return -> html
      date -> 2024.02.29
@@ -28,4 +35,36 @@ public class MainController {
         log.info("========== Move to about ==========");
         return "/html/about.html";
     }
+
+    /**
+     method -> businessSector
+     description -> 사업영역 페이지이동
+     @author -> 김주한
+     @return -> html
+     date -> 2024.02.29
+     **/
+    @GetMapping("/business-sector")
+    public String businessSector () {
+        log.info("========== Move to business-sector ==========");
+        return "/html/business-sector.html";
+    }
+
+    /**
+     method -> infoPlaza
+     description -> 정보광장 페이지이동
+     @author -> 김주한
+     @return -> html
+     date -> 2024.02.29
+     **/
+    @GetMapping("/info-plaza")
+    public String infoPlaza () {
+        log.info("========== Move to info-plaza ==========");
+        return "/html/info-plaza.html";
+    }
+
+    @GetMapping("/contact-us")
+    public String contactUs () {
+        log.info("========== Move to info-plaza ==========");
+        return "/html/contact-us.html";
+    }
 }

src/main/resources/application.properties

@@ -1,2 +1,6 @@
-spring.autoconfigure.exclude=org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration,org.springframework.boot.autoconfigure.orm.jpa.HibernateJpaAutoConfiguration
-logging.level.org.springframework.web=INFO
+#spring.autoconfigure.exclude=org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration,org.springframework.boot.autoconfigure.orm.jpa.HibernateJpaAutoConfiguration
+logging.level.org.springframework.web=INFO
+spring.datasource.url=jdbc:sqlserver://210.183.61.202:14451;databaseName=ili_web
+spring.datasource.username=ili_web
+spring.datasource.password=ili_web!!
+spring.datasource.driver-class-name=com.microsoft.sqlserver.jdbc.SQLServerDriver

src/main/resources/static/css/contact-us.css

@@ -0,0 +1,100 @@
+body {
+    font-size: .875rem;
+}
+
+.feather {
+    width: 16px;
+    height: 16px;
+    vertical-align: text-bottom;
+}
+
+/*
+ * Sidebar
+ */
+
+.sidebar {
+    position: fixed;
+    top: 0;
+    /* rtl:raw:
+    right: 0;
+    */
+    bottom: 0;
+    /* rtl:remove */
+    left: 0;
+    z-index: 100; /* Behind the navbar */
+    padding: 48px 0 0; /* Height of navbar */
+    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
+}
+
+@media (max-width: 767.98px) {
+    .sidebar {
+        top: 5rem;
+    }
+}
+
+.sidebar-sticky {
+    position: relative;
+    top: 0;
+    height: calc(100vh - 48px);
+    padding-top: .5rem;
+    overflow-x: hidden;
+    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
+}
+
+.sidebar .nav-link {
+    font-weight: 500;
+    color: #333;
+}
+
+.sidebar .nav-link .feather {
+    margin-right: 4px;
+    color: #727272;
+}
+
+.sidebar .nav-link.active {
+    color: #2470dc;
+}
+
+.sidebar .nav-link:hover .feather,
+.sidebar .nav-link.active .feather {
+    color: inherit;
+}
+
+.sidebar-heading {
+    font-size: .75rem;
+    text-transform: uppercase;
+}
+
+/*
+ * Navbar
+ */
+
+.navbar-brand {
+    padding-top: .75rem;
+    padding-bottom: .75rem;
+    font-size: 1rem;
+    background-color: rgba(0, 0, 0, .25);
+    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
+}
+
+.navbar .navbar-toggler {
+    top: .25rem;
+    right: 1rem;
+}
+
+.navbar .form-control {
+    padding: .75rem 1rem;
+    border-width: 0;
+    border-radius: 0;
+}
+
+.form-control-dark {
+    color: #fff;
+    background-color: rgba(255, 255, 255, .1);
+    border-color: rgba(255, 255, 255, .1);
+}
+
+.form-control-dark:focus {
+    border-color: transparent;
+    box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
+}

src/main/resources/static/js/about/scroll.js

@@ -0,0 +1,11 @@
+function scrollTo (divId) {
+    const element = document.getElementById(divId);
+    const header = document.querySelector('header'); // 'header' 대신 실제 헤더 요소의 선택자 사용
+    const headerHeight = header.offsetHeight;
+    const elementPosition = element.getBoundingClientRect().top;
+    const offsetPosition = elementPosition + window.pageYOffset - headerHeight;
+    window.scrollTo({
+        top : offsetPosition,
+        behavior : 'smooth'
+    })
+}

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

@@ -15,7 +15,7 @@
     <link href="/css/about.css" rel="stylesheet">
 </head>
 <body>
-<header th:include="/html/common/header"></header>
+<header th:include="/html/common/header" id="header"></header>
 
 <main>
     <div class="carousel slide" data-bs-ride="carousel" id="myCarousel">
@@ -37,10 +37,10 @@
                         <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><a class="btn" href="#outline" th:onclick="scrollToDiv('outline')">회사개요</a>
+                            <a class="btn" href="#greeting" th:onclick="scrollToDiv('greeting')">CEO 인사말</a>
+                            <a class="btn" href="#history" th:onclick="scrollToDiv('history')">연혁</a>
+                            <a class="btn" href="#philosophy" th:onclick="scrollToDiv('philosophy')">경영이념</a>
                         </p>
                     </div>
                 </div>
@@ -49,7 +49,8 @@
     </div>
     <div class="row mb-2">
         <div class="row justify-content-center mb-2">
-            <div class="col-md-8">
+            <!-- 회사개요 -->
+            <div class="col-md-8" id="outline">
                 <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>
@@ -57,27 +58,70 @@
                         <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">사업영역 : 국제물류, 창고보관, 전자상거래, 국제특송, 특수화물, 지정화물, 육상국제운송, 유럽철도운송, 통관업무,
+                            관세환급, 물류/컨설팅
+                        </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 class="mb-1 text-muted">해외법인 : 爱尔国际物流（烟台）有限公司。/ IL INTERNATIONAL LOGISTICS VINA
+                            CO.,LTD
+                        </div>
                     </div>
                 </div>
             </div>
-            <div class="col-md-8">
+            <!-- ceo 인사말 -->
+            <div class="col-md-8" id="greeting">
                 <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>
+                        <h3 class="mb-2">CEO 인사말</h3>
+                        <p></p>
+                        <div class="mb-1 text-muted">(주)국제종합물류 홈페이지를 찾아주신 여러분 환영합니다.</div>
+                        <div class="mb-1 text-muted">혁신경영으로 고객만족에 최선을 다하겠습니다.</div>
+                        <p class="card-text mb-auto">저희 주식회사 국제종합물류는 국내외 현지 픽업부터 배송에 이르기까지 종합적인 물류써비스를 제공하는 전문화된 물류기업
+                            입니다.
+
+                            당사는 세계각지 물류현장에서 35년여의 사업경험을 바탕으로 축적된 노하우와 숙련된 인력을 바탕으로 우리회사 만의 특화된 국제 물류프로그램을 개발하였고 이를 통한
+                            업무실행으로 신속하고 정확한 물류써비스를 제공하고 고객사의 인건비 와 물류비용의 절감에도 많은 도움이 되고 있습니다.
+
+                            또한 고객의 실정에 맞는 최적의 물류노선과 시스템을 제공하고 운송화물의 실시간 추적과 물류내역 관리를 고객이 직접 참여 할 수 있도록 하였습니다.
+
+                            중국-한국간 물류에 있어 물류업계 최초로 도착운송일을 지정하는 3일, 4일, 5일 운송 시스템을 개발하여 화물의 운송시간과 비용을 대폭 줄이는 혁신을 일으켰고
+                            중국에서 출발하여 일본, 러시아, 베트남에 이르는 운송노선에도 당사가 개발한 복합운송을 보급하여 이 지역 물류노선에서도 선두자 역할을 담당하고 있습니다.
+
+                            앞으로도 변함없는 성원과 관심을 바랍니다.
+
+                            고객과 함께 발전해가는 성실한 사업동반자가 될 것을 약속드립니다.</p>
+                        <!--<a class="stretched-link" href="#">Continue reading</a>-->
+                    </div>
+                </div>
+            </div>
+            <!-- 연혁 -->
+            <div class="col-md-8" id="history">
+                <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">사업영역 : 국제물류, 창고보관, 전자상거래, 국제특송, 특수화물, 지정화물, 육상국제운송, 유럽철도운송, 통관업무,
+                            관세환급, 물류/컨설팅
+                        </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 class="mb-1 text-muted">해외법인 : 爱尔国际物流（烟台）有限公司。/ IL INTERNATIONAL LOGISTICS VINA
+                            CO.,LTD
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 경영이념 -->
+            <div class="col-md-8" id="philosophy">
+                <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>
+                        <div class="mb-1 text-muted">언제나 고객을 먼저 생각하고</div>
+                        <div class="mb-1 text-muted">고객과 함께 발전해가는 성실하고 신뢰받는</div>
+                        <div class="mb-1 text-muted">사업동반자가 될 것을 약속드립니다.</div>
                     </div>
                 </div>
             </div>
@@ -87,4 +131,5 @@
 <hr class="featurette-divider">
 <footer class="footer" th:include="/html/common/footer"></footer>
 </body>
+<script src="/js/about/scroll.js"></script>
 </html>

src/main/resources/templates/html/business-inner/airplane.html

@@ -0,0 +1,61 @@
+<div class="row">
+    <div class="col-lg-4">
+    </div>
+    <div class="col-lg-4">
+        <h1>항공운송</h1>
+    </div>
+    <div class="col-lg-4">
+    </div>
+</div>
+
+<div class="row featurette">
+    <div class="col-md-6 order-md-2">
+        <p class="lead">(주)국제종합물류는 신속하고 정확하고 안전한 물류 서비스를 제공합니다</p>
+        <p>(주)국제종합물류는 항시 신속하고 정확한 물류서비스를 위하여 24/7 대응체계를 갖추고 있으며, 전세계 80여 자체 지사와 860여사의 협력 파트너를 통하여 고객만족을 실현하고 있습니다.</p>
+    </div>
+    <div class="col-md-6 order-md-1">
+        <img alt="" src="/image/business/plane_component.jpg">
+    </div>
+</div>
+<hr class="featurette-divider">
+<div class="row featurette">
+    <div class="col-md-6">
+        <p class="lead">Door-to-Door 서비스</p>
+        <p>(주)국제종합물류는 보따리 물류부터 현재에 이르기까지 35년의
+            국제물류 사업경험에서 축적된 노하우를 바탕으로 고객의 상황에 따른 픽업부터 문앞 도착까지 One Stop 서비스를 제공합니다
+            신속을 요하는 항공화물을 픽업-포장-수출통관-적하보험-항공Container및 Pallet 에 의한 운송-도착전의 Arrival Notice-반입-수입통관-보관-배송에 이르기 까지 중국물류
+            35년의 사업경험과 중국 각 지역의 위치한 당사 지사를 통해 경쟁력 있는 운임과 체계적인 업무처리로 목적지까지 DOOR TO DOOR 시스템으로 신속.정확.안전한 최적의 항공운송 서비스를
+            제공합니다.
+            또한 당사 36개 지사 및 엄선된 우수한 협력업체를 통한 NETWORK을 구축하여 이를 통한 수출, 수입 및 3국간 운송 등 고객이 원하는 전세계 어느 지점에 관계없이 수출이나 수입 업무를
+            완벽하게 실행합니다.</p>
+    </div>
+    <div class="col-md-6">
+        <img alt="" src="/image/business/door-to-door.jpg">
+    </div>
+</div>
+<hr class="featurette-divider">
+<div class="row featurette">
+    <div class="col-md-6 order-md-2">
+        <p class="lead">Air & Sea & Trucking 의 복합운송 서비스</p>
+        <p>(주)국제종합물류가 중국대륙에서 부터 구축하여 동남아 지역을 대상으로 실행하고 있는 물류사업으로 출발지와 목적지간에 활용할 수 있는 모든 운송방법을 동원하여 고객이 원하는 도착시간에 최우선하여
+            준수하는 DOOR TO DOOR 물류서비스를 시행하고 있습니다.
+            중국출발 한국도착에서 현재와 같이 운송일을 미리 지정하여 운송하는 복합운송은 중국에 고속도로가 개설되기 전인 2002년 4월부터 당사가 개척하여 시행해 오고
+            있는 서비스로 2002년 5월 6일 중국광주(특급기차) -> 제남(화물차) -> 청도 (해운) -> 한국인천 5일 운송 노선이 최초로 개설되어 오늘에 이르고 있습니다.</p>
+    </div>
+    <div class="col-md-6 order-md-1">
+        <img alt="" src="/image/business/muti-trak-sujeong.jpg">
+    </div>
+</div>
+<hr class="featurette-divider">
+<div class="row featurette">
+    <div class="col-md-6">
+        <p class="lead">글로벌화물배상 책임보험</p>
+        <p>글로벌 통합화물배상 책임보험을 통해 언제 어디서 발생할지 모르는 물류 사고에
+            대비하고 있습니다.</p>
+    </div>
+    <div class="col-md-6">
+    </div>
+</div>
+<hr class="featurette-divider">
+
+

src/main/resources/templates/html/business-inner/multi.html

@@ -0,0 +1,44 @@
+<div class="row">
+    <div class="col-lg-4">
+    </div>
+    <div class="col-lg-4">
+        <h1>복합운송</h1>
+    </div>
+    <div class="col-lg-4">
+    </div>
+</div>
+<div class="row">
+    <div class="col-lg-4">
+        <h2>복합운송이란?</h2>
+    </div>
+</div>
+<div class="row">
+    <div class="col-lg-1">
+    </div>
+    <div class="col-lg-11">
+        <p>2002년 부터 중국, 한국, 베트남, 일본, 미얀마, 태국, 라오스, 캄보디아 등지에서 우리회사가 개발하여 운영하고 있는 운송노선으로 지정된 운송 노선 간 운용가능한 운송기구를 총 동원하여 최소의 비용으로 고객이 요구하는 운송일정을 보장하는 운송입니다.
+            복합운송에서는 도착시간을 미리 지정하는 방식으로 출발일로 3일, 4일, 5일, 7일에 목적지에 도착하는 운송방식입니다.</p>
+    </div>
+</div>
+
+<hr class="featurette-divider">
+
+<div class="row">
+    <div class="col-lg-1">
+    </div>
+    <div class="col-lg-6">
+        <h2>Air & Sea & Trucking의 복합운송 서비스</h2>
+    </div>
+</div>
+<div class="row">
+    <div class="col-lg-1">
+    </div>
+    <div class="col-lg-11">
+        <p>(주)국제종합물류가 중국대륙에서 부터 구축하여 동남아 지역을 대상으로 실행하고 있는 물류사업으로 출발지와 목적지간에 활용할 수 있는 모든 운송방법을 동원하여 고객이 원하는 도착시간에 최우선하여 준수하는 DOOR TO DOOR 물류서비스를 시행하고 있습니다.</p>
+    </div>
+</div>
+
+
+<hr class="featurette-divider">
+
+

src/main/resources/templates/html/business-inner/ship.html

@@ -0,0 +1,47 @@
+<div class="row">
+    <div class="col-lg-4">
+    </div>
+    <div class="col-lg-4">
+        <h1>해상운송</h1>
+    </div>
+    <div class="col-lg-4">
+    </div>
+</div>
+
+<div class="row featurette">
+    <div class="col-md-6 order-md-2">
+        <p class="lead">국제간 해상운송은 오랜 사업경험과 확실한 네트워크에 의하여 정확한 물류가 가능합니다</p>
+        <p>IL국제물류는 전세계 60여 선사들과 150여 포딩사들과 파트너 계약을 맺고 운송노선과 정보를 공유하여 고객에게 최적의    운송노선과 보다 저렴한 물류비용으로 고객만족을 실현하고    있습니다.</p>
+        <p>*소량의 LCL화물부터 산업설비, 건축자재, 화학제품, 전자전기 제품등 다양하고 특수한 운송환경이 요구되는 제품까지 화물과 운송조건 등에 따라 포장, 통관, 보관, 운송등 다양한 형태의 서비스로 고객의 신뢰에 부흥하고 있습니다</p>
+    </div>
+    <div class="col-md-6 order-md-1">
+        <img alt="" src="/image/business/ship.jpg">
+    </div>
+</div>
+<hr class="featurette-divider">
+<div class="row featurette">
+    <div class="col-md-8">
+        <p class="lead">해상운송 종합서비스 (LCL, FCL, Bulk Cargo)</p>
+        <p>전세계 주요물류 거점에 구축된 인프라와 협력업체들을 통하여 화물의 특성과 조건에 따라 언제나 최적의 컨디션을 제공합니다.</p>
+        <p>수출지 픽업에서부터 포장 , 수출통관, 원산지 발행, 국제운송, 도착통관, 배송에 이르기 까지 종합적인 물류써비스를 제공합니다.</p>
+    </div>
+    <div class="col-md-4">
+        <img alt="" src="/image/business/ship2.png">
+    </div>
+</div>
+<hr class="featurette-divider">
+<div class="row featurette">
+    <div class="col-md-6 order-md-2">
+        <p class="lead">동남아 지역 물류포트(출발,도착) 직영운영</p>
+        <p>동남아 주요 물류거점에 IL이 직영하는 물류 발송포트를 설치하여 운영해 오고 있습니다.</p>
+        <p>한 국: 인천 -> 중구. 평택 -> 항구. 부산 -> 항구. 광양 -> 항구</p>
+        <p>중 국: 심양 -> 화평. 단동 -> 동항. 대련 -> 항구. 천진 -> 신항. 연태 -> 항구. 청도 -> 청양. 연운 -> 항구.</p>
+        <p>해상 전자상거래 운송 중국을 출발기점으로 하여 주위의 18개국을 물류네트워크로 구축하여 해상을 이용한 특송은 물론 전자상거래 물류를 시행하고 있습니다.</p>
+    </div>
+    <div class="col-md-6 order-md-1">
+        <img alt="" src="/image/business/ship3.jpg">
+    </div>
+</div>
+<hr class="featurette-divider">
+
+

src/main/resources/templates/html/business-sector.html

@@ -0,0 +1,73 @@
+<!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">
+    <!-- swiper CSS-->
+<!--    <link href="https://unpkg.com/swiper/swiper-bundle.min.css" rel="stylesheet">-->
+
+
+    <!-- Custom styles for this template -->
+    <link href="/css/index.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><a class="btn" href="#plane" th:onclick="scrollToDiv('outline')">항공운송</a>
+                            <a class="btn" href="#greeting" th:onclick="scrollToDiv('greeting')">해상운송</a>
+                            <a class="btn" href="#history" th:onclick="scrollToDiv('history')">복합운송</a>
+                            <a class="btn" href="#philosophy" th:onclick="scrollToDiv('philosophy')">국제특송</a>
+                            <a class="btn" href="#philosophy" th:onclick="scrollToDiv('philosophy')">전자상거래</a>
+                        </p>
+                        <p><a class="btn" href="#outline" th:onclick="scrollToDiv('outline')">특수화물</a>
+                            <a class="btn" href="#greeting" th:onclick="scrollToDiv('greeting')">철도운송</a>
+                            <a class="btn" href="#history" th:onclick="scrollToDiv('history')">유통물류</a>
+                            <a class="btn" href="#philosophy" th:onclick="scrollToDiv('philosophy')">국경운송</a>
+                            <a class="btn" href="#philosophy" th:onclick="scrollToDiv('philosophy')">물류컨설팅</a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- 업무내용 설명 -->
+
+    <div class="container marketing" th:include="/html/business-inner/airplane" id="inner_airplane" style="display: none">
+    </div>
+    <div class="container marketing" th:include="/html/business-inner/ship" id="inner_ship" style="display: none">
+    </div>
+    <div class="container marketing" th:include="/html/business-inner/multi" id="multi">
+    </div>
+</main>
+
+<footer class="footer" th:include="/html/common/footer">
+
+</footer>
+</body>
+</html>

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

@@ -12,13 +12,13 @@
                     <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>
+                    <a aria-current="page" class="nav-link fw-bold text-dark" href="/business-sector">사업영역</a>
                 </li>
                 <li class="nav-item">
-                    <a aria-current="page" class="nav-link fw-bold text-dark" href="#">정보광장</a>
+                    <a aria-current="page" class="nav-link fw-bold text-dark" href="/info-plaza">정보광장</a>
                 </li>
                 <li class="nav-item">
-                    <a aria-current="page" class="nav-link fw-bold text-dark" href="#">고객센터</a>
+                    <a aria-current="page" class="nav-link fw-bold text-dark" href="/contact-us">고객센터</a>
                 </li>
             </ul>
             <form class="d-flex">

src/main/resources/templates/html/contact-us.html

@@ -0,0 +1,153 @@
+<!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">
+    <!-- swiper CSS-->
+    <!--    <link href="https://unpkg.com/swiper/swiper-bundle.min.css" rel="stylesheet">-->
+
+
+    <!-- Custom styles for this template -->
+    <link href="/css/index.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><a class="btn" href="#plane" th:onclick="scrollToDiv('outline')">안내/공지</a>
+                            <a class="btn" href="#greeting" th:onclick="scrollToDiv('greeting')">물류자문</a>
+                            <a class="btn" href="#history" th:onclick="scrollToDiv('history')">무역자문</a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- 업무내용 설명 -->
+
+    <div class="container marketing" id="notice">
+        <div class="row">
+            <div class="col-lg-4">
+            </div>
+            <div class="col-lg-4">
+                <h1>안내 / 공지</h1>
+            </div>
+            <div class="col-lg-4">
+            </div>
+        </div>
+        <!-- Grid -->
+        <div class="row" style="height: 300px;">
+            <!-- 왼쪽 영역: 문의 목록 표시 -->
+            <div class="col-md-6">
+                <h3 class="text-center">문의 목록</h3>
+                <table class="table table-striped">
+                    <thead>
+                    <tr>
+                        <th>일시</th>
+                        <th>제목</th>
+                        <th>작성자</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <!-- 여기에 문의 목록을 동적으로 추가 -->
+                    <tr>
+                        <td>2024-03-04</td>
+                        <td>문의 제목1</td>
+                        <td>김주한</td>
+                    </tr>
+                    <tr>
+                        <td>2024-03-04</td>
+                        <td>문의 제목1</td>
+                        <td>김주한</td>
+                    </tr>
+                    <tr>
+                        <td>2024-03-04</td>
+                        <td>문의 제목1</td>
+                        <td>김주한</td>
+                    </tr>
+                    <tr>
+                        <td>2024-03-04</td>
+                        <td>문의 제목1</td>
+                        <td>김주한</td>
+                    </tr>
+                    <tr>
+                        <td>2024-03-04</td>
+                        <td>문의 제목1</td>
+                        <td>김주한</td>
+                    </tr>
+                    <!-- 추가적인 문의 목록 행들을 여기에 추가 -->
+                    </tbody>
+                </table>
+                <nav aria-label="Page navigation">
+                    <ul class="pagination justify-content-center">
+                        <li class="page-item disabled">
+                            <a aria-disabled="true" class="page-link" href="#" tabindex="-1">Previous</a>
+                        </li>
+                        <li class="page-item"><a class="page-link" href="#">1</a></li>
+                        <li class="page-item"><a class="page-link" href="#">2</a></li>
+                        <li class="page-item"><a class="page-link" href="#">3</a></li>
+                        <li class="page-item">
+                            <a class="page-link" href="#">Next</a>
+                        </li>
+                    </ul>
+                </nav>
+            </div>
+            <!-- 오른쪽 영역: 문의 내용 표시 -->
+            <div class="col-md-6">
+                <h3 class="text-center">문의 내용</h3>
+                <div class="row">
+
+                    <div class="col">
+                        <!-- 일시, 제목, 작성자 표시 -->
+                        <p><strong>일시:</strong> 2024-03-04 15:00</p>
+                        <p><strong>제목:</strong> 문의 제목 1</p>
+                        <p><strong>작성자:</strong> 작성자 이름</p>
+                    </div>
+                    <!-- 내용 표시 textarea -->
+                    <div class="row">
+                        <!-- 내용 표시 textarea -->
+                        <div class="col">
+                            <textarea class="form-control" rows="5" readonly>문의 내용을 여기에 표시합니다.</textarea>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="container marketing" id="inner_ship" style="display: none" th:include="/html/business-inner/ship">
+    </div>
+    <div class="container marketing" id="multi" style="display: none" th:include="/html/business-inner/multi">
+    </div>
+    <hr class="featurette-divider">
+</main>
+
+<footer class="footer" th:include="/html/common/footer">
+
+</footer>
+</body>
+</html>

src/main/resources/templates/html/info-plaza.html

@@ -0,0 +1,32 @@
+<!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">
+    <!-- swiper CSS-->
+    <link href="https://unpkg.com/swiper/swiper-bundle.min.css" rel="stylesheet">
+
+
+    <!-- Custom styles for this template -->
+    <link href="/css/index.css" rel="stylesheet">
+</head>
+<body>
+<header th:include="/html/common/header">
+</header>
+<main>
+
+</main>
+
+<footer class="footer" th:include="/html/common/footer">
+
+</footer>
+</body>
+</html>