nextjs15 + gnuboard5 database 웹 사이트... 정보
nextjs15 + gnuboard5 database 웹 사이트...
본문
일단 완성은 못했지만, 먼저 사이트부터 열어 봅니다.?
솔까말 비인기 게임이고 동접자 수도 50명도 되지 않는 게임이지만,
(웹 페이지 > 도전과제 > 현재 인원이 실시간 인원)
예전 추억 삼아 재미있게 즐기고 있는 게임 + 팬 사이트가 없어서 개발 해보았습니다.
그누보드5 데이터베이스 기반 백엔드와 nextjs15버전 프론트와 함께 개발하였습니다.
에디터는 이전에 게시글에 남긴 것 처럼 프로알라 에디터를 사용하였습니다.
그럼에도 불구하고 다양한 기능을 개발하고자 하는 목적은
이 프로젝트를 기반으로 다른 커뮤니티 프로젝트를 그대로 적용할 수 있다는 점에서? ㅎㅎ
@UXUI 님께서 개발하신 사이트(https://uxcamp.net/) 그래프가
너무 맘에 들어서 기능 강화해서 적용 했습니다 ㅎㅎ
완성된 사이트는 아니니 그냥 이런 사이트가 있네 / 리액트 기반의 웹사이트가 그누 베이스로도 되네...정도로 여겨 주시고,
차후 완성이 되면 테스트로 작성된 게시물은 모두 삭제됨을 양해 부탁드립니다.
굳이 회원 가입하지 않으실 분들을 위해
test // test1234
test1 // test1234
test2 // test1234
test3 // test1234
test4 // test1234
만들어 두었습니다. (차후 패스워드는 변경되어 접근할 수 없습니다.)
데이터 자체는 실시간 개념으로, 만들어 웹앱 스타일로 이용 가능하실거에요
이 게임 정식 버전 출시 전까진 다 만들어야 할텐데...훔
(현재 얼리 액세스 버전)
곡 들 데이터 베이스는 직접 하나하나 다 넣어야 하는 완전 울트라 노가다가 준비되어있기에 오늘은 이만..
덧. 도전과제는 스팀 API 연동이라, 일부 살짝 체감상 조금의 딜레이는 존재 합니다.
※ 테스트 후 버그나 오류 / 요청 사항이 있으면 알려주시면 수정 하는데 큰 도움이 됩니다. 고맙습니다~
2
댓글 23개
이미지추가가않돼요 ~~
api는 직접 구현하셨나요?
@리자 인증(로그인/회원가입)은 라이브러리 next-auth 를 사용했습니다.
여기에 소셜 기반 웬만한 거 다있어서 (애플도 있음)
인증 방법도 페이지에 잘 되어있거든요
AI 일부 + 직접 둘다 했어요
그렇게 한 이유가 초반에는 AI에 의존하다가 점점 산으로 가는게 보여서
AI 시키기 > 이상한 짓 하길래 수동 수정 이렇게 반복 되었던 것 같습니다.
리자님께서 남기신 글 처럼 사용 하되 내용은 알아야 하는 시대...가 맞는 것 같습니다.
api 를 직접 개발하셨나해서요 ㅎ
다른 답변도 좋았습니다 ^^
@리자 AI 없이 개발했더라면...할 수는 있었겠으나.......
몇개월이 소요되었을지 ㅎㅎ
@미니님a 그러니까 api 를 개발해서 하셨단 말씀이죠? 이게 궁금해서요 ㅎ
@리자 네 ... api 개발자는 저 + ai 입니다
오 실력자님~~
@techstar 아닙니다. 요즘은 AI 가 잘해주지 않습니까^^
오홋~ 그누 기반의 리액트라니~ 놀라운데요~
어디서 본 챠트도 비슷하게 구현하셨네요.^^
@UXUI 은근 슬쩍 탐나는 게 좀 있긴 해요 ㅎㅎㅎ 외주 형태로 간혹 NEXTJS 요청 하는 경우가 있어서 베이스 만들어 두는 것도 좋겠다 싶습니다.
오랜만에 자의적인 서비스 개발이라 신나긴 했습니다.
@미니님a 백앤드만 그누를 쓰고 프론트만 넥스트를 쓰는 개념~ 멋지네요. 공통함수들도 넥스트 버전으로 관리되면 많은것을 만들수 있을듯 합니다. 고도화 해보심 좋겠네요^^
대단한 실력자님이시네요. 최고~
@하늘뚱 제 바람은 저 게임 좀 많이 했으면 ㅠㅠㅠㅠㅠ
이 싸이트도 ai 고질병이 보이네.
@불바람 맞아요 ㅋ NEXTJS 프로젝트 할 때마다 느끼는 거죠 ㅋ
특히나 관리자 페이지의 경우는 항상 새로 AI 한테 디자인 맡기는데
죄다 비슷한 디자인....에휴 ㅠㅠㅠㅠㅠ
컨텐츠 디자인은 실제 게임 형태라서 다른데 알게 모르게 티가 나는 게 있는 것도 사실이죠 ㅋ
@미니님a 그게 아니고 다크모드일때 버튼이 검정색으로 들어가요.. 이거 어떤 플랫폼으로 하든 저렇게 되더라구요. 구글 플로터나 안드로이드, 심지어 react도 저 증상이 있어요.
@불바람 사이트에 다크모드 기능이 없는 상태입니다...
혹시 브라우저 다크모드 때문 아닌가요 ??
@미니님a 다크모드로 들어가보세요. 검정색으로 버튼 튀어 나와 있어요.
방향 지시를 잘 안하면 무조건 저렇게 되요.
@불바람 아 보니깐 다크 코드가 들어가 있어서 그런가 보네요 제거 해야 겠습니다 ㅠ 나름 오류 아닌 오류네요 이 사이트는 다크모드 자체를 지원 안하려고 기획 했었기에 ㅎㅎ
알려주셔서 고맙습니다.
inline-flex items-center justify-center ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 border-slate-200 bg-white hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50 h-10 px-6 py-3 rounded-full font-semibold text-sm whitespace-nowrap border-2 text-gray-700 hover:bg-gray-100
이게 들어가있었네요
headless wordpress (워프를 api 백엔드로만 사용하는) 처럼 만드셨다는 것이겠지요... 그누보드는 백엔드에서 게시판, 기본정보 등을 json으로 뿌려주는 역할을...
참고로 tailwind+daisyui 결합이 참 좋았던 것으로 기억합니다. 한번 시도해보셔도 어떠실지...
@xpem 일부 페이지 자체가 SSR 기반이라 PHP 처럼 직접 쿼리 + API 두 종류를 모두 사용했습니다.
CSR의 경우 SEO 문제점이 있어서 ... 이번에는 radix 사용해봤는데
다음에는 DAISYUI 한번 확인해보겠습니다~~^0^
TAILWIND가 참 궁합이 잘 맞는게 많이 있네요