소개
거주하고 있는 곳에 작은 도서관이 있는데,
도서 보유현황을 엑셀로만 공유해줘서 이걸 검색할 수 있게 만들어야겠다로 시작해서..
만드는 김에 북마크도 만들고
책별로 리뷰도 댓글 형태로 작성하면 온라인 책모임처럼 될 수도 있지 않을까 싶어서..
여기까지 만들어보게 되었습니다!
(사실 더 커진 버전은 만든 적이 있지만 사람들도 최소기능부터 써보는게 낫지 않을까 싶어서 기능은 여기까지만!)
진행 방법
lovable : 기본적인 UI와 기능구성
cursor : github통해 대략 기능 완성된거 세부 수정 및 배포에 활용
firebase : firestore(DB), hosting(배포), Authentication(회원가입/로그인)
기본 디자인은 lovable이 나으니 무료 사용으로 해결한다.
질문 하나로 대략 구성이 나왔습니다.
질문을 꽤 길게 해도 질문 하나로 카운트되더라고요.
lovable에서 공식지원하는 supabase도 꽤 괜찮지만 전 firebase가 좀 익숙하더라고요 ㅎㅎ
그리고 한 공간에서 db, 로그인, 배포까지 다 관리할 수 있으니.. analytics도 됩니다!
하나의 질문으로 많은 기능을 원하는대로 뽑으려면 프롬프트에 신경을 좀 써야 되는 것 같아요.firebase프로젝트에 연결된 웹앱을 만들어보자. project ID : ---프로젝트ID--- SDK npm const firebaseConfig = { apiKey: "---API키---", authDomain: "---도메인---", projectId: "---프로젝트ID---", storageBucket: "---storageBucket---", messagingSenderId: "---해당ID값---", appId: "---해당ID값---", measurementId: "---해당ID값---" }; firestore에서 사용하는 collection - books 1. 목적 : 도서 현황 파악, 사용자들이 해당 도서에 리뷰를 달 수 있는 reference, 로그인 회원은 bookmark해서 모아볼 수 있는 기능 2. field 구성 : book(String), category(String), date(String), bookmark(reference : users) - bookAsk 1. 목적 : 도서 입고 요청, 중복된 요청을 방지하기 위해 요청된 도서를 리스트로 표시, 입고 요청을 하고 싶은데 이미 입고 요청된 도서가 있는 경우 사용자의 의견을 표현할 수 있는 좋아요 표시, 입고 요청이 수락되면 수락된 날짜를 표현해서 관리하는 기능 2. field 구성 : title(String), author(String), ask_by(reference : users), ask_at(timestamp), accept(boolean), accept_at(timestamp), like_by(reference : users) - review 1. 목적 : 도서현황에 존재하는 책에 리뷰를 달 수 있는 기능 2. field 구성 : review(String), review_by(reference : users), review_at(timestamp), book(reference : books) 화면구성 - 로그인하지 않은 사용자도 도서목록을 볼 수 있도록 books collection의 문서를 list로 보여주는 것이 기본 화면 - 도서목록이 4천개 이상으로 데이터가 많기때문에 로딩속도가 느리지 않도록 상단 100개를 불러오고, 스크롤 현황에 따라서 다음 100개의 데이터를 불러오도록 구현 - 도서목록에서 검색을 할 수 있는 기능 구현 (현재 firebase에 algoria extensions가 설정된 상황) - 도서목록의 도서를 클릭하면, 도서의 상세정보를 볼 수 있고, 해당 도서에 달린 review를 볼 수 있는 기능 구현 - 도서가 마음에 들어거나 기억해두려는 사용자를 위해 북마크모양의 아이콘으로 북마크 기능을 구현, 이 기능은 로그인 사용자만 사용이 가능하기때문에 로그인하지 않은 상태라면 로그인이 필요하다는 dialog를 보여주고, 로그인/회원가입 페이지로 이동할 수 있도록 바로가기 버튼 생성 - 로그인 사용자가 북마크해놓은 도서만 모아서 볼 수 있도록 북마크 기능. 북마크가 없는 경우에는 아직 북마크가 없다고 페이지에 표현, 로그인하지 않은 경우에는 해당 기능은 로그인 후 사용할 수 있다고 표시 - 도서목록 리스트 화면에서 스크롤에 관계없이 도서요청 기능을 위한 버튼이 아이콘 형태로 보이도록 구성. 해당 버튼을 누르면 도서요청 페이지로 이동하는 기능 구현 - 도서요청 페이지에는 기존 사용자가 요청한 도서의 리스트가 보이도록 구성. 해당 페이지에 표시되는 도서의 리스트는 bookAsk collection에서 accept field가 false인 것들만 표시 - 도서요청 페이지에 사용자가 요청하고자 하는 도서가 존재하는 경우, 사용자의 의견을 추가로 표현할 수 있는 좋아요 버튼 구현, 해당 버튼은 하트 아이콘으로 구성하고, 좋아요를 누르지 않은 경우 무채색, 좋아요를 누른 경우 main color 혹은point color로 표현되도록 구성. 해당 기능 역시 로그인한 사용자만 사용할 수 있도록 구성. - 도서요청 페이지에 사용자가 요청하고자 하는 도서가 존재하지 않는 경우, 신규 도서를 신청할 수 있도록 신규 도서를 신청할 수 있는 페이지 구성. 해당 기능 역시 로그인한 사용자만 사용할 수 있도록 구성.대충 워드 기준 한페이지 정도 되는 분량인데 질문 하나로 처리되더라고요 ㅎㅎ
대신 한번에 모든 기능들이 원활하게 돌아가진 않아서 며칠에 거쳐 질문을 추가해서 수정했습니다.cursor로 이동해서 디테일 수정 및 배포
개취일 수 있겠지만 전 저 기본 파비콘으로 돌아(?)다니는게 싫었어요..
* 원래 og-image(링크 공유했을때 미리보기 되는 이미지)도 lovable이었는데 이제 개발 페이지로 되는 것으로 바뀐 것 같아요!public 폴더에 있는 lovable icon 이름을 바꿔주고, 제 favicon icon으로 바꿔줍니다.
og-image로 사용할 이미지도 여기 넣어주고, 코드를 수정해줬습니다.firebase에서 로그인 방법도 세팅해주고,
DB도 잘 들어오네요. (관리자페이지도 만들어서 csv, 엑셀파일 올리면 DB에 들어오게 설정했습니다.)
호스팅도 여기에서..
도메인도 프로젝트명 설정한걸로 자동설정되서 뭔가 좀 정돈된 느낌의 웹사이트라고 보여져요!
(저만 그런가요..)
하는 김에 도메인 구매해놓은 것 중에 노는거 연결까지 시켜봤는데 아직 연결이 안되네요 ㅠ그래서 배포된 주소
https://library-platform.web.app/https://library-platform.firebaseapp.com/
같은 서비스인데 도메인을 기본적으로 2개 주더라고요 ㅎㅎ
도메인 연결되면 해당 주소도 공유할께요!
* 근데 공유하고 og-image가 문제가 아니라 ㅋㅋㅋ 프로젝트 설명이 lovable project라니 ㅠㅠㅠ
결과와 배운 점
일단 제가 필요해서 만든 서비스니 신간도서 올라오면 좀 올려달라고부터 해봐야겠어요!
사용자가 늘어나서 정식서비스 되면 관리비라도 청구할 수 있으려나 모르겠네요 ㅎㅎㅎ
작은 도서관에 공간대여 등 부가기능들도 있어서 필요한 사람들 있으면 해당 기능까지 확장은 생각하고 있어요!
이것도 좀 묵혀놓은 사례라..
PRD따위 없이 만들어진 결과물입니다..
