Add: BSM Auth 소개 페이지

BSSM-BSM · May 21, 2022 · 9c1277a · 9c1277a
1 parent 15811cd
commit 9c1277a
Show file tree

Hide file tree

Showing 7 changed files with 139 additions and 16 deletions.
diff --git a/public/css/pages/oauth/home.css b/public/css/pages/oauth/home.css
@@ -5,20 +5,45 @@ body{
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
+ padding-bottom: 0;
+}
+*[data-aos]{
+ display: inline-block;
 }
 main{
+ scroll-snap-type: y mandatory;
+}
+main > section{
+ scroll-snap-align: start;
  width:100%;
- height:100%;
+}
+section.home{
+ height: calc(100% - 10rem);
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  color:#fff;
 }
-
 h1.main{
  font-size:6.4rem;
 }
+h2{
+ font-size: 3.6rem;
+}
+h3{
+ font-size: 2.4rem;
+}
+section.introduce{
+ background-color:var(--background);
+ padding: 2rem 0 5rem 0;
+}
+.bottom_arrow{
+ font-size: 3rem;
+ padding: 1rem;
+ text-align: center;
+}
+
 @media screen and (min-width:0px) and (max-width:780px) {
  h1.main{
  font-size:5.4rem;

diff --git a/public/css/style.css b/public/css/style.css
@@ -200,6 +200,9 @@ footer{
 .col-space-10{
  height: 10rem;
 }
+.col-space-20{
+ height: 20rem;
+}
 .left_slide_menu{
  position: relative;
  align-self: stretch;
@@ -217,7 +220,8 @@ footer{
  opacity: 0;
  position: absolute;
  top: 0;
- right: -100%;
+ right: 0;
+ transform: translateX(100%);
  height: 100%;
  word-break: keep-all;
  padding: 1rem;
@@ -229,7 +233,7 @@ footer{
 .menu_list:hover{
  pointer-events: all;
  opacity: 1;
- right: 0;
+ transform: translateX(0);
 }
 
 .title{

diff --git a/public/js/account.js b/public/js/account.js
@@ -284,7 +284,7 @@ const authcodeMail = (
  },
  callback:() => {
  showToast('인증코드 전송이 완료되었습니다.\n메일함을 확인해주세요.');
- popupClose($('#valid_code_box'));
+ popupClose($('#authcode_box'));
  }
  })
 }

diff --git a/public/sw.js b/public/sw.js
@@ -1,4 +1,4 @@
-const cacheName = '1.4.1.8';
+const cacheName = '1.5.0';
 const cacheFiles = [
  '/',
  '/meal',
@@ -32,13 +32,15 @@ const cacheFiles = [
  '/css/etc/timetable.css',
  '/css/etc/user.css',
 ];
-const libCacheName = 'lib-1.4.1.2';
+const libCacheName = 'lib-1.5.0';
 const libCacheFiles = [
  '/lib/axios.js',
  '/lib/vue.js',
  '/lib/tinymce/tinymce.min.js',
+ '/lib/aos/aos.js',
+ '/lib/aos/aos.css',
 ];
-const etcCacheName = 'etc-1.4.0.2';
+const etcCacheName = 'etc-1.5.0';
 const etcCacheFiles = [
  '/favicon.ico',
  '/icons/logo.png',
@@ -57,6 +59,7 @@ const etcCacheFiles = [
  '/resource/common/images/people.svg',
  '/resource/common/images/bell.svg',
  '/resource/common/images/cloud.svg',
+ '/resource/common/images/calendar-clock.svg',
  '/resource/user/profile_images/profile_default.png',
  '/resource/user/profile_images/profile_-1.png'
 ];

diff --git a/views/pages/index.ejs b/views/pages/index.ejs
@@ -35,7 +35,7 @@
  </div>
  </a>
  <a v-if="!user.isLogin" class="icon" onclick="showLoginBox()">
- <object data="/resource/common/images/person.svg" alt="meister"></object>
+ <object data="/resource/common/images/person.svg" alt="login"></object>
  <span>로그인</span>
  </a>
  </li>
@@ -155,7 +155,7 @@
  </div>
  <div class="right_wrap">
  <p>Web App</p>
- <p>Ver. 1.4.1.8</p>
+ <p>Ver. 1.5.0</p>
  </div>
  </a>
  </div>

diff --git a/views/pages/oauth/home.ejs b/views/pages/oauth/home.ejs
@@ -7,15 +7,101 @@
  <meta property="og:title" content="BSM Auth">
  <meta property="og:description" content="BSM Auth 서비스">
  <link rel="stylesheet" type="text/css" href="/css/pages/oauth/home.css">
+ <link rel="stylesheet" type="text/css" href="/lib/aos/aos.css">
 </head>
 <body>
  <main>
- <div>
- <h1 class="main">BSM Auth</h1>
- <p class="main">복잡한 회원 인증을 간편하게</p>
- <a href="#" class="button">준비 중</a>
- </div>
+ <section class="home">
+ <div>
+ <h1 class="main">BSM Auth</h1>
+ <p class="main">복잡한 회원 인증을 간편하게</p>
+ <div class="rows">
+ <a href="/oauth/manage" class="button accent">시작하기</a>
+ <div class="row-space"></div>
+ <a href="/board/doc-oauth" class="button">사용 가이드</a>
+ </div>
+ </div>
+ </section>
+ <section class="introduce center">
+ <div class="bottom_arrow">▼</div>
+ <div class="col-space-5"></div>
+ <h2>BSM Auth란?</h2>
+ <div class="col-space-20"></div>
+ <h3 data-aos="fade-right">
+ 우리 학교 학생들을 위한 서비스를 개발하는데<br>
+ 학년 정보 등, 학생 인증에 어려움을 겪고 계신가요?
+ </h3>
+ <div class="col-space-20"></div>
+ <div class="col-space-20"></div>
+ <h3 data-aos="fade-left">
+ 아니면 이메일 인증 기능 같은거<br>
+ 회원가입 기능 만들기 귀찮으신가요?
+ </h3>
+ <div class="col-space-20"></div>
+ <div class="col-space-20"></div>
+ <h3 data-aos="fade-right">
+ 친구들이 만든 서비스를 사용하려는데<br>
+ 서비스마다 따로 회원가입하기 싫으신가요?
+ </h3>
+ <div class="col-space-20"></div>
+ <div class="col-space-20"></div>
+ <h2 data-aos="zoom-in">
+ BSM Auth는 회원가입의 번거로움을 해결하기 위한<br>
+ 간편 로그인 서비스입니다
+ </h2>
+ <div class="col-space-20"></div>
+ <div class="col-space-20"></div>
+ <h2>BSM Auth를 사용하면..</h2>
+ <div class="col-space-20"></div>
+ <div class="rows">
+ <span class="icon">
+ <object style="height: 25rem;" data="/resource/common/images/person.svg" alt="" data-aos="fade-up"></object>
+ </span>
+ <span class="row-space"></span>
+ <h3 data-aos="fade-left">
+ 학반번호, 이름, 학교 이메일 주소 등<br>
+ 다양한 정보를 제공받을 수 있습니다.
+ </h3>
+ </div>
+ <div class="col-space-20"></div>
+ <div class="rows">
+ <h3 data-aos="fade-right">
+ 학년이 바뀌거나 학생의 인적사항이 변경되면<br>
+ 신경 쓸 필요 없이 업데이트가 반영되며<br>
+ 서버에서 데이터를 다시 불러오기만 하면 됩니다.
+ </h3>
+ <span class="row-space"></span>
+ <span class="icon">
+ <object style="height: 25rem;" data="/resource/common/images/calendar-clock.svg" alt="" data-aos="fade-up"></object>
+ </span>
+ </div>
+ <div class="col-space-20"></div>
+ <div class="rows">
+ <img src="/resource/oauth/index/images/1.png" alt="" data-aos="fade-up">
+ <span class="row-space"></span>
+ <h3 data-aos="fade-left">
+ 만약 사용자가 BSM계정을 가지고있다면<br>
+ 사용자는 버튼 하나만 누르면 됩니다.
+ </h3>
+ </div>
+ <div class="col-space-20"></div>
+ </section>
+ <section class="home">
+ <div>
+ <h2>지금 바로 시작해보세요</h2>
+ <div class="col-space-5"></div>
+ <div class="rows">
+ <a href="/oauth/manage" class="button accent">시작하기</a>
+ <div class="row-space"></div>
+ <a href="/board/doc-oauth" class="button">사용 가이드</a>
+ </div>
+ </div>
+ </section>
  </main>
+ <script src="/lib/aos/aos.js"></script>
+ <script>
+ AOS.init();
+ </script>
  <%- include('../../common/common') %>
 </body>
 </html>
diff --git a/views/pages/oauth/manage.ejs b/views/pages/oauth/manage.ejs
@@ -36,12 +36,17 @@
  </header>
  <main class="container">
  <section id="oauth-manage">
- <h1 class="text_left">OAuth 클라이언트</h1><br>
+ <h1 class="text_left">OAuth 클라이언트</h1>
+ <div class="col-space-5"></div>
  <div class="oauth-menu">
  <button id="oauth-create_client" class="button accent">추가</button>
  <button id="oauth-load_client" class="button">새로 고침</button>
  </div>
  <ul id="oauth-client_list">
+ <div v-if="!clientList.length">
+ <div class="col-space-5"></div>
+ <p>클라이언트가 없습니다, 상단 추가버튼을 눌러 추가하세요</p>
+ </div>
  <li v-for="client in clientList" class="oauth-client rows">
  <div class="flex-main">
  <div class="top_wrap">