-
- 로그인후 이용해주세요.
팁과노하우
모바일 하단 퀵 아이콘 버튼을 어플같은 느낌으로 수정
하단 rb.layout_ft/footer.php 를 수정하시면됩니다.
기존것은 아이콘만 있어서 검정배경에 약간 어플같은 느낌이 없습니다.
이것을 어플같이 하단에 글자가 나오게 수정한것입니다.
<style>
.tail_fixed_gnb {
display: flex;
justify-content: space-around;
align-items: center;
background-color: #ff4078 !important; /* Dark gray background */
padding: 10px 0;
}
.footer-button {
display: flex;
flex-direction: column;
align-items: center;
color: white;
text-align: center;
width: 60px; /* Width can be adjusted as needed */
}
.footer-button button {
// color: #444444; /* Set background color for the icon */
}
.footer-button svg {
margin-left:-5px;
width: 32px; /* Increase icon size for better visibility */
height: 32px;
margin-bottom: 5px; /* Space between icon and text */
display: block;
}
.footer-button span {
margin-top:5px;
font-size: 12px;
color: #fff; /* White color for text */
text-align: center;
padding-left:10px;
}
</style>
<div class="tail_fixed_gnb mobile main_rb_bg">
<div class="footer-button">
<button type="button" onclick="location.href='<?php echo G5_SHOP_URL ?>/cart.php';" title="장바구니">
<!-- SVG Icon -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_526_6)">
<path d="M7.5 19C7.89782 19 8.27936 19.158 8.56066 19.4393C8.84196 19.7206 9 20.1022 9 20.5C9 20.8978 8.84196 21.2794 8.56066 21.5607C8.27936 21.842 7.89782 22 7.5 22C7.10218 22 6.72064 21.842 6.43934 21.5607C6.15804 21.2794 6 20.8978 6 20.5C6 20.1022 6.15804 19.7206 6.43934 19.4393C6.72064 19.158 7.10218 19 7.5 19ZM17.5 19C17.8978 19 18.2794 19.158 18.5607 19.4393C18.842 19.7206 19 20.1022 19 20.5C19 20.8978 18.842 21.2794 18.5607 21.5607C18.2794 21.842 17.8978 22 17.5 22C17.1022 22 16.7206 21.842 16.4393 21.5607C16.158 21.2794 16 20.8978 16 20.5C16 20.1022 16.158 19.7206 16.4393 19.4393C16.7206 19.158 17.1022 19 17.5 19ZM3 2C4.726 2 6.023 3.283 6.145 5H19.802C20.095 4.99996 20.3844 5.06429 20.6498 5.18844C20.9152 5.31259 21.15 5.49354 21.3378 5.71848C21.5255 5.94342 21.6615 6.20686 21.7362 6.49017C21.8109 6.77348 21.8224 7.06974 21.77 7.358L20.133 16.358C20.0492 16.8188 19.8062 17.2356 19.4466 17.5357C19.0869 17.8357 18.6334 18.0001 18.165 18H6.931C6.42514 18 5.93807 17.8083 5.56789 17.4636C5.1977 17.1188 4.97192 16.6466 4.936 16.142L4.136 4.929C4.09 4.31 3.564 4 3 4C2.73478 4 2.48043 3.89464 2.29289 3.70711C2.10536 3.51957 2 3.26522 2 3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_526_6">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
</button>
<span>장바구니</span>
</div>
<div class="footer-button">
<button type="button" onclick="location.href='<?php echo G5_SHOP_URL ?>/orderinquiry.php';" title="주문조회">
<!-- SVG Icon -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_655_31)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 3.586C6.37499 3.2109 6.88361 3.00011 7.414 3H16.586C17.1164 3.00011 17.625 3.2109 18 3.586L20.414 6C20.7891 6.37499 20.9999 6.88361 21 7.414V19C21 19.7956 20.6839 20.5587 20.1213 21.1213C19.5587 21.6839 18.7956 22 18 22H6C5.20435 22 4.44129 21.6839 3.87868 21.1213C3.31607 20.5587 3 19.7956 3 19V7.414C3.00011 6.88361 3.2109 6.37499 3.586 6L6 3.586ZM16.586 5H7.414L5.414 7H18.586L16.586 5ZM10 12C10 11.7348 9.89464 11.4804 9.70711 11.2929C9.51957 11.1054 9.26522 11 9 11C8.73478 11 8.48043 11.1054 8.29289 11.2929C8.10536 11.4804 8 11.7348 8 12C8 13.0609 8.42143 14.0783 9.17157 14.8284C9.92172 15.5786 10.9391 16 12 16C13.0609 16 14.0783 15.5786 14.8284 14.8284C15.5786 14.0783 16 13.0609 16 12C16 11.7348 15.8946 11.4804 15.7071 11.2929C15.5196 11.1054 15.2652 11 15 11C14.7348 11 14.4804 11.1054 14.2929 11.2929C14.1054 11.4804 14 11.7348 14 12C14 12.5304 13.7893 13.0391 13.4142 13.4142C13.0391 13.7893 12.5304 14 12 14C11.4696 14 10.9609 13.7893 10.5858 13.4142C10.2107 13.0391 10 12.5304 10 12Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_655_31">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
</button>
<span>주문조회</span>
</div>
<div class="footer-button">
<button type="button" onclick="location.href='<?php echo G5_SHOP_URL ?>';" title="홈">
<!-- SVG Icon -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" title="홈">
<g clip-path="url(#clip0_526_18)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.772 2.68799C11.1231 2.41488 11.5552 2.2666 12 2.2666C12.4448 2.2666 12.8769 2.41488 13.228 2.68799L21.612 9.20799C22.365 9.79499 21.949 11 20.997 11H20V19C20 19.5304 19.7893 20.0391 19.4142 20.4142C19.0391 20.7893 18.5304 21 18 21H5.99998C5.46955 21 4.96084 20.7893 4.58577 20.4142C4.2107 20.0391 3.99998 19.5304 3.99998 19V11H3.00298C2.04998 11 1.63598 9.79399 2.38798 9.20899L10.772 2.68799Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_526_18">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
</button>
<span>홈</span>
</div>
<div class="footer-button">
<button type="button" onclick="location.href='<?php echo G5_SHOP_URL ?>/wishlist.php';" title="위시리스트">
<!-- SVG Icon -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="white"/>
</svg>
</button>
<span>즐겨찾기</span>
</div>
<div class="footer-button">
<button type="button" onclick="location.href='<?php echo G5_SHOP_URL ?>/couponzone.php';" title="쿠폰존">
<!-- SVG Icon -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.537 2.16395C10.9407 2.12722 11.3477 2.1727 11.7334 2.29765C12.1191 2.4226 12.4755 2.62443 12.781 2.89095L12.931 3.03095L20.753 10.854C21.2913 11.3924 21.6048 12.1153 21.6298 12.8763C21.6549 13.6372 21.3897 14.3793 20.888 14.952L20.753 15.096L15.096 20.753C14.5576 21.2913 13.8346 21.6047 13.0736 21.6298C12.3127 21.6549 11.5707 21.3897 10.998 20.888L10.854 20.753L3.02998 12.93C2.74346 12.6434 2.51795 12.3019 2.36705 11.9258C2.21615 11.5498 2.14299 11.147 2.15198 10.742L2.16299 10.537L2.63498 5.35195C2.69558 4.68374 2.97844 4.05512 3.43834 3.56658C3.89824 3.07803 4.50864 2.75776 5.17198 2.65695L5.35098 2.63595L10.537 2.16395ZM8.02399 8.02495C7.83823 8.21071 7.69088 8.43123 7.59035 8.67393C7.48982 8.91663 7.43808 9.17676 7.43808 9.43945C7.43808 9.70215 7.48982 9.96227 7.59035 10.205C7.69088 10.4477 7.83823 10.6682 8.02399 10.854C8.20974 11.0397 8.43026 11.1871 8.67296 11.2876C8.91566 11.3881 9.17579 11.4399 9.43849 11.4399C9.70118 11.4399 9.96131 11.3881 10.204 11.2876C10.4467 11.1871 10.6672 11.0397 10.853 10.854C11.2281 10.4788 11.4389 9.96999 11.4389 9.43945C11.4389 8.90891 11.2281 8.4001 10.853 8.02495C10.4778 7.6498 9.96903 7.43905 9.43849 7.43905C8.90795 7.43905 8.39913 7.6498 8.02399 8.02495Z" fill="white"/>
</svg>
</button>
<span>xxxxxxx</span>
</div>
</div>
- 이전글데이터 이전 후 모바일 이미지 늘어 나는 현상 해결2024.11.05
- 다음글햄버거 좌측 사이드 아이콘을 서브페이지에서 < 백버튼으로 나오게하기2024.11.02
댓글목록
구매 신청
구매문의 : cs@false9.co.kr / 010-6466-3355
신청 이후 담당자가 개별연락 드리고 있습니다.
입금자명과 실제 입금자가 동일한 경우 자동처리 됩니다.
결제예정 금액 : 0 (VAT별도)
하나은행(KOEXKRSE) : 258-910104-00407 / 김은정(인덱스)
신청 및 FCM 가이드
-
안드로이드 웹앱 및 푸시알림을 사용하기위한 A-Z!
잘 따라오시면 어렵지 않습니다.
1. FCM (Firebase Cloud Messaging) 세팅하기
1-1. 시작하기
https://console.firebase.google.com?hl=ko 으로 접속하여 [시작하기] 를 클릭합니다. FCM은 구글계정이 있으면 무료로 사용 가능 합니다.
1-2. 프로젝트 생성하기
[프로젝트 시작하기] 를 클릭합니다.
프로젝트의 이름을 설정합니다.
앱이름(사이트명, 상호명)을 영문으로 입력하는것이 가장 좋습니다.
입력하셨다면 [계속] 을 클릭해주세요.
애널리틱스 사용설정을 활성화 해주시고(선택사항)
[계속] 을 클릭해주세요.
애널리틱스 위치를 [대한민국] 또는 거주국가를 선택하시고 약관 동의 후 [프로젝트 만들기] 를 클릭해주세요.
프로젝트 생성이 완료 되었습니다. [계속] 을 클릭하시면 FCM메인페이지로 이동 합니다.
1-3. 앱 생성하기
이전 단계에서 프로젝트를 생성했습니다.
이제 프로젝트안에 안드로이드 앱을 생성해보겠습니다.
FCM 메인 중앙에 주황색 동그란 버튼이 3개 있습니다.
가운데에 있는 (안드로이드 로고) 버튼을 클릭해주세요.
버튼을 클릭하셨다면 앱등록 창이 오픈 됩니다.
안드로이드 패키지 이름 및 앱 닉네임을 입력하세요.
패키지 이름은 반드시 com.webview.앱영문명 으로 입력하셔야 합니다.
com.webview. 를 반드시 넣어주셔야 합니다.
입력 예) com.webview.rebuilder
앱 닉네임은 사이트명이나 상호명, 앱이름 등을 입력해주시면 됩니다.
디버그 서명은 입력하지 않아도 됩니다.
입력을 마치셨다면 [앱등록] 을 클릭해주세요.
다음페이지로 넘어간다면, 입력하신 패키지명 (com.webview.앱영문명) 을 메모장에 메모해주세요.
[google-services.json 다운로드] 버튼을 클릭하셔서 파일을 다운받아 주세요.
다운을 받으셨다면 [다음] 을 클릭해주세요.
Groovy(build.gradle) 선택하신 후 [다음] 을 클릭해주세요.
앱 생성이 완료 되었습니다.
[콘솔로 이동] 을 클릭하시면 메인으로 이동 됩니다.
1-4. 비공개 키파일 생성하기
거의 다왔습니다. 조금만 더 힘내세요.
저도 이거 작성하느라 무쟈게 힘들었습니다. 리빌더화이팅.
화면 상단에 아까 입력하신 이름으로 앱이 생성된게 보이신다면,
좌측 상단에 [프로젝트 개요] 메뉴 옆에 톱니바퀴 아이콘을 클릭하여
[프로젝트 설정] 으로 이동해주세요.
프로젝트 설정으로 오셨다면 상단 탭메뉴에서 [서비스 계정] 을 클릭하세요.
화면 아래쪽에 있는 [새 비공개 키 생성] 을 클릭하세요.
키파일은 버튼 클릭시 자동으로 다운로드 됩니다.
중요한 파일이므로 파일을 타인에게 공개하거나 해서는 안됩니다.
친절하게 중요한 파일임을 알려줍니다.
[키 생성] 을 클릭하면 json 파일이 다운로드 됩니다.
다운로드된 파일은 rebuilder-demo-a4cc0-firebase-adminsdk-au83h-41e4b5df03.json 과 같은식으로 저장됩니다.
이름이 너무 긴 관계로 임의파일명으로 변경해주세요.
가이드에서는 key.json 으로 설명하겠습니다.
이제 준비는 모두 끝났습니다!
바탕화면에 1-3에서 다운로드 했던 google-services.json 파일과,
방금 이름을 변경했던 key.json 파일이 있다면 잘 하셨습니다. (파일아이콘은 무시해주세요. 다를 수 있습니다.)
2. 리빌더 앱관리 설정하기
2-1. 파일 업로드하기
위 단계에서 이름을 변경했던 key.json 파일을 사용하시는 웹서버(웹호스팅)에 FTP 프로그램으로 접속하여 업로드 해주세요.
업로드 위치는 /data/push/key.json 입니다.
2-2. 앱관리 설정하기
관리자모드 > 빌더설정 > 앱관리 메뉴로 이동해주세요.
[앱관리] 메뉴가 없다면 리빌더 공식홈페이지 > 유료기능 다운로드 에서 [안드로이드 하이브리드 웹앱 + Push 알림] 기능을 다운로드 후 설치해주세요.
바로가기 > https://rebuilder.co.kr/membership/30
설치가 되셨다면 관리자모드 > 빌더설정 > 앱관리 메뉴로 이동해주세요.
스크롤을 내리시면 [FCM 설정] 섹션이 있습니다.
FCM 패키지명, FCM 프로젝트 ID, FCM 비공개키파일 항목을 모두 입력 하시고
[확인] 을 클릭해주시면 설정은 마무리 됩니다.
[FCM 패키지명]
1-3 에서 설정했던 com.webview.앱영문명 을 입력하시면 됩니다.
[FCM 프로젝트 ID]
1-4 에서 이동했던 [프로젝트 설정] 페이지로 이동하시면 내 프로젝트 섹션에서 확인하실 수 있습니다. (스샷참조)
[FCM 비공개키파일]
위에서 임의파일명으로 변경했던 파일명 key.json 을 입력하시면 됩니다.
고생하셨습니다. 모든 설정이 완료 되었습니다.
1-3 에서 다운로드 했던 google-services.json 파일은
신청서에 첨부해주셔야 합니다.
창을 닫아주시고, 신청을 계속해주세요!
