본 이모티콘 상점은 아래 링크의 이모티콘 게시판v6와 연동해서 사용하는 플러그인 입니다.

https://sir.kr/g5_skin/61301

- 코드 수정 -

css쪽 코드를 수정했습니다.

main 쪽 css를 아래와 같이 변경 했습니다.

기능쪽 코드가 변경이 된 것이 아니므로 그냥 쓰셔도 무방하며.

기존에 내려 받으신 분들은 css 쪽만 내려 받아 덮어씌우시거나 style.css에서 main 부분을 찾아 아래 코드로 수정하시면 됩니다.

        main {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        min-height: calc(100vh - 100px);
        width: 800px;
        padding-top:20px;
        box-sizing: border-box;
        margin: 0 auto;
        }

이모티콘 상점의 전체적 외형은 위 사진 같이 생겼습니다.

상단에 현재 유저가 가지고 있는 포인트를 보여줍니다.

그리고 이모티콘 이미지와 가격과 구매 버튼으로 구성되어있습니다.

처음 사용하시면 g5_member에 본 상점에서 사용하기 위한 emoticon1~emoticon30 컬럼이 존재 하지 않으므로 아래와 같이 메시지가 출력되고 자동으로 생성됩니다.

원하는 이모티콘 이미지 아래 구매 버튼을 누르시면 

구매 완료 되었다고 메시지가 뜨게 되고 이모티콘 가격 만큼의 포인트가 차감되고

이모티콘이 구매 되며 해당 이모티콘 컬럼이 0에서 1로 변경됩니다.

이모티콘이 구매가 완료되면 구매 버튼은 보유중으로 변경되며 누를수 없게 변경됩니다.

그리고 이모티콘 게시판 댓글에 이모티콘 삽입 기능에 유료 이모티콘 부분에 내가 구매한 이모티콘이 활성화 됩니다.

만약 이모티콘을 유료 이모티콘을 보유하지 않은 경우에는 보유한 유료 이모티콘이 없음을 출력합니다.

-- 사용 방법 --

하단 링크에 접속하시면 이모티콘 게시판 및, 이모티콘 상점에 사용된 이모티콘 이미지 들의 라이선스가 표기가 나와있습니다.

복사해서 적정한 위치에 넣어 주셔야 됩니다. (이미 하셨다면 하지 다시 않아도 됩니다.)

저 같은 경우에 내용 관리에 라이선스 표기를 추가 하고 라이선스 내용을 넣어주었습니다.

https://test.neonserver.space/bbs/content.php?co_id=license

기본에 제공되는 이모티콘을 사용하지 않으실 예정이시면 라이선스 표기는 필요하지 않습니다.

emoticonshop.php 압축을 풀어 폴더째로 그누보드 메인 폴더에 넣어주시고

원하는 위치에 링크를 달아 사용하시면 됩니다.(예: 메뉴 혹은 상단 tnb 혹은 outlogin...등등)

-- 이모티콘 추가 혹은 수정 및 가격 수정 방법 --

이모티콘은 shop.php 65~94번째 줄을 수정하면 됩니다.

이모티콘 ID, 이모티콘 이미지 파일 이름, 가격 순으로 되어있는데

수정을 원하시는 분은 이미지 파일 이름과 가격을 수정하길 바랍니다.

ID를 수정하면 컬럼 생성 부분과 DB에 컬럼 이름도 수정해야하고 게시판도 수정해야 합니다. 수정하기 복잡하시다 생각이 드시면 수정하지 않길 권합니다.

추가를 원하시는 분은 18번째줄에 <= 30을 원하는 이모티콘 갯수(기본이 30개로 되어있음) 만큼 변경해주시고

94번째 줄을 원하는 만큼 복붙하고 수정해주시면 됩니다.

- 테스트 -

아이디 test1 or test2

비번 test1 or test2

https://test.neonserver.space/emoticonshop/shop.php