Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 6 commits into from
Sep 20, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0f6cf1d
feat : index페이지 초안
donsonioc2010 Sep 19, 2023
0758cb2
feat : container 크기 고정에 따른 변동
donsonioc2010 Sep 19, 2023
40b7210
feat : header랑 index
donsonioc2010 Sep 19, 2023
c5bf22f
Merge branch 'dev' into feat/index-css
donsonioc2010 Sep 19, 2023
5852db4
feat : 메인페이지 끝
donsonioc2010 Sep 19, 2023
e8f6969
feat : layout변경
donsonioc2010 Sep 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file removed Api/src/main/resources/static/asset/.keep
View file
Open in desktop
Empty file.
Binary file added Api/src/main/resources/static/asset/logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
50 changes: 50 additions & 0 deletions Api/src/main/resources/static/css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
28 changes: 27 additions & 1 deletion Api/src/main/resources/static/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -26,4 +51,5 @@ footer .copyright {
font-size: 10px;
margin-top: 10px;
padding-left: 10px;
}
}

12 changes: 10 additions & 2 deletions Api/src/main/resources/templates/fragment/config.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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" />
Expand All @@ -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>
Expand Down
21 changes: 19 additions & 2 deletions Api/src/main/resources/templates/fragment/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
115 changes: 108 additions & 7 deletions Api/src/main/resources/templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
8 changes: 3 additions & 5 deletions Api/src/main/resources/templates/layout/layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Loading