feat : index, 메인페이지 초안 (#37)

* feat : index페이지 초안 * feat : container 크기 고정에 따른 변동 * feat : header랑 index * feat : 메인페이지 끝 * feat : layout변경
donsonioc2010 · Sep 20, 2023 · ede67b3 · ede67b3
1 parent e82c1a8
commit ede67b3
Show file tree

Hide file tree

Showing 8 changed files with 217 additions and 17 deletions.
diff --git a/Api/src/main/resources/static/asset/.keep b/Api/src/main/resources/static/asset/.keep
diff --git a/Api/src/main/resources/static/asset/logo.png b/Api/src/main/resources/static/asset/logo.png
diff --git a/Api/src/main/resources/static/css/index.css b/Api/src/main/resources/static/css/index.css
@@ -0,0 +1,50 @@
+swiper-container {
+    width: 100%;
+    height: 100%;
+}
+
+swiper-slide {
+    max-height: 400px;
+    text-align: center;
+    font-size: 18px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: transparent;
+}
+
+swiper-slide div.box {
+    width: 100%;
+    height: 100%;
+    border-radius: 30%;
+    overflow: hidden;
+}
+
+swiper-slide div.box img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+div.auction-container {
+    margin-top: 100px;
+}
+
+div.title-sector {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+div.title-sector>button.more {
+    border-radius: 100px;
+    background: #18ACDB;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
+    color: #FFF;
+    text-align: center;
+    font-family: Sigmar One;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+}
diff --git a/Api/src/main/resources/static/css/style.css b/Api/src/main/resources/static/css/style.css
@@ -1,3 +1,28 @@
+body {
+    background: linear-gradient(180deg, #7B37EA 0%, rgba(42, 70, 50, 0.00) 100%);
+}
+
+.container {
+    max-width:936px !important;
+}
+
+button.before-login-btn {
+    border-radius: 100px;
+    background: #18ACDB;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
+    color: #FFF;
+    text-align: center;
+    font-family: Sigmar One;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+}
+/* header */
+header .main-header > div .before-login-area {
+    display: flex;
+    align-items: center;
+}
+
 /* footer */
 footer {
     border-top: 1px solid #eee;
@@ -26,4 +51,5 @@ footer .copyright {
     font-size: 10px;
     margin-top: 10px;
     padding-left: 10px;
-}
+}
+
diff --git a/Api/src/main/resources/templates/fragment/config.html b/Api/src/main/resources/templates/fragment/config.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
+<html xmlns:th="http://www.thymeleaf.org">
     <head th:fragment="configFragment">
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -15,15 +15,23 @@
 
 
         <!-- Font -->
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.cdnfonts.com/css/kranky" rel="stylesheet">
         <link rel="stylesheet" as="style" crossorigin
               href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.7/dist/web/static/pretendard-dynamic-subset.css"/>
+        <link href="https://fonts.googleapis.com/css2?family=Sigmar+One&display=swap" rel="stylesheet">
 
         <!-- PortOne SDK -->
         <script src="https://cdn.iamport.kr/v1/iamport.js"></script>
 
 
         <!-- Bootstrap -->
-        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+
+        <!-- Swiper  -->
+        <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-element-bundle.min.js"></script>
 
         <!-- FontAwesome -->
         <script src="https://kit.fontawesome.com/6ac784f4b9.js" crossorigin="anonymous"></script>

diff --git a/Api/src/main/resources/templates/fragment/header.html b/Api/src/main/resources/templates/fragment/header.html
@@ -1,8 +1,25 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
     <header class="main-header" th:fragment="headerFragment">
-        <div style="background-color: rgba(186,255,250,0.41)">
-            header.html
+        <div class="row text-center">
+            <div class="col"></div>
+            <div class="col"></div>
+            <div class="col">
+                <div class="title">
+                    <img src="/static/asset/logo.png" alt="logo" height="100px"/>
+                </div>
+            </div>
+            <div class="col"></div>
+            <div class="col before-login-area" style="display: flex; align-items: center;">
+                <div class="row" >
+                    <div class="col">
+                        <button type="button" class="btn btn-primary before-login-btn" onclick="">LOGIN</button>
+                    </div>
+                    <div class="col">
+                        <button type="button" class="btn btn-primary before-login-btn" onclick="">JOIN</button>
+                    </div>
+                </div>
+            </div>
         </div>
     </header>
 </html>
diff --git a/Api/src/main/resources/templates/index.html b/Api/src/main/resources/templates/index.html
@@ -4,12 +4,113 @@
         xmlns="http://www.w3.org/1999/xhtml"
         xmlns:th="http://www.thymeleaf.org"
         xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+        layout:decorate="~{layout/layout}"
 >
-    <head th:replace="~{fragment/config :: configFragment}"></head>
-    <body>
-        인덱스냐옹
-    </body>
-    <script>
-        console.log('a')
+<main layout:fragment="content">
+    <link rel="stylesheet" type="text/css" href="/static/css/index.css"/>
+    <div class="container body">
+        <div class="auction-container">
+            <div class="title-sector">
+                <h1 class="title">경매 예정작</h1>
+                <button type="button" class="btn btn-primary more" onclick="">more</button>
+            </div>
+            <swiper-container
+                    class="swiper"
+                    navigation="true"
+                    speed=500
+                    delay="500"
+                    autoplay="true"
+                    loop="true"
+            >
+                <swiper-slide data-swiper-autoplay="1000">
+                    <div class="box">
+                        <img
+                                src="http://xgrnsxldyejc19608959.cdn.ntruss.com/local/profile/0813a94b-90ef-4f10-9172-0a954035b585.JPG?type=f&w=936&h=600"
+                                alt="미쯔"
+                        />
+                    </div>
+                </swiper-slide>
+                <swiper-slide data-swiper-autoplay="1000">
+                    <div class="box">
+                        <img
+                                src="http://xgrnsxldyejc19608959.cdn.ntruss.com/local/paint/cute.jpg?type=f&w=936&h=600"
+                                alt="아리"
+                        />
+                    </div>
+                </swiper-slide>
+                <swiper-slide data-swiper-autoplay="1000">
+                    <div class="box">
+                        <img
+                                src="http://xgrnsxldyejc19608959.cdn.ntruss.com/local/profile/0813a94b-90ef-4f10-9172-0a954035b585.JPG?type=f&w=936&h=600"
+                                alt="미쯔"
+                        />
+                    </div>
+                </swiper-slide>
+                <swiper-slide data-swiper-autoplay="1000">
+                    <div class="box">
+                        <img
+                                src="http://xgrnsxldyejc19608959.cdn.ntruss.com/local/paint/cute.jpg?type=f&w=936&h=600"
+                                alt="아리"
+                        />
+                    </div>
+                </swiper-slide>
+            </swiper-container>
+        </div>
+
+        <div class="auction-container" style="margin-bottom: 100px;">
+            <div class="title-sector">
+                <h1 class="title">경매 진행중</h1>
+                <button type="button" class="btn btn-primary more" onclick="">more</button>
+            </div>
+            <swiper-container
+                    class="swiper"
+                    navigation="true"
+                    speed=500
+                    delay="3000"
+                    autoHeight="true"
+                    autoplay="true"
+                    loop="true"
+            >
+                <swiper-slide data-swiper-autoplay="3000">
+                    <div class="box">
+                        <img
+                                src="http://xgrnsxldyejc19608959.cdn.ntruss.com/local/profile/0813a94b-90ef-4f10-9172-0a954035b585.JPG?type=f&w=936&h=600"
+                                alt="미쯔"
+                        />
+                    </div>
+                </swiper-slide>
+                <swiper-slide data-swiper-autoplay="3000">
+                    <div class="box">
+                        <img
+                                src="http://xgrnsxldyejc19608959.cdn.ntruss.com/local/paint/cute.jpg?type=f&w=936&h=600"
+                                alt="아리"
+                        />
+                    </div>
+                </swiper-slide>
+                <swiper-slide data-swiper-autoplay="3000">
+                    <div class="box">
+                        <img
+                                src="http://xgrnsxldyejc19608959.cdn.ntruss.com/local/profile/0813a94b-90ef-4f10-9172-0a954035b585.JPG?type=f&w=936&h=600"
+                                alt="미쯔"
+                        />
+                    </div>
+                </swiper-slide>
+                <swiper-slide data-swiper-autoplay="3000">
+                    <div class="box">
+                        <img
+                                src="http://xgrnsxldyejc19608959.cdn.ntruss.com/local/paint/cute.jpg?type=f&w=936&h=600"
+                                alt="아리"
+                        />
+                    </div>
+                </swiper-slide>
+            </swiper-container>
+        </div>
+    </div>
+</main>
+<th:block layout:fragment="script">
+    <script type="application/javascript" th:inline="javascript">
     </script>
-</html>
+    <script type="text/javascript">
+    </script>
+</th:block>
+</html>
diff --git a/Api/src/main/resources/templates/layout/layout.html b/Api/src/main/resources/templates/layout/layout.html
@@ -7,11 +7,9 @@
 >
     <head th:replace="~{fragment/config :: configFragment}"></head>
     <body>
-        <div class="container">
-            <header th:replace="~{fragment/header :: headerFragment}"></header>
-            <div layout:fragment="content"></div>
-            <footer th:replace="~{fragment/footer:: footerFragment}"></footer>
-        </div>
+    <header th:replace="~{fragment/header :: headerFragment}"></header>
+    <div layout:fragment="content"></div>
+    <footer th:replace="~{fragment/footer:: footerFragment}"></footer>
     </body>
     <script layout:fragment="script"></script>
 </html>