Giter Site home page Giter Site logo

nodeul-project's Introduction

Bookitaka (Nodeul Project)

독후활동지 쇼핑몰 홈페이지 제작 프로젝트 in Nodeul



프로젝트 개요

프로젝트 목적

  • 개인이 제작한 독후 활동지를 판매하고 제공하기 위한 목적의 웹 서비스 제작

프로젝트 기간

  • 2023-05-09 ~ 2023-06-20

프로젝트 배포

  • 배포 환경 (인프라)
    • AWS EC2 : Linux (Ubuntu 22.04.2 LTS) / MySQL
  • 북키타카 임시 홈페이지 (https://bookitaka.store)



멤버 구성


dawnpoems


kimjisudev


hyeokjulee


BeomSeokYu


hsnkch


KyungoeSim

  • 김예건 : 팀장, 독후활동지(CRUD) 및 다운로드, 결제 API연동 및 결제 프로세스
  • 김지수 : 자주 묻는 질문(CRUD) 개별출제요청(CRUD), 독후활동지 등록 및 개별출제요청에서의 도서 검색 API
  • 이혁주 : 장바구니 기능, 쿠폰 기능, 결제 프로세스
  • 유범석 : 인증 및 인가 체계 구축, 로그인 및 회원가입, 메인 페이지 및 독후활동지 페이지 디자인
  • 최현식 : 회원가입 및 회원관리(CRUD), 검색 및 페이징
  • 심경외 : 이용안내(CRUD), 공지사항(CRUD), 공통 템플릿 디자인



기술 스택

🖥️ FE

HTML5 CSS3 JavaScript jQuery Bootstrap

⌨️ BE

Java Thymeleaf Spring Spring Boot Apache Tomcat
JPA Spring Data JPA Querydsl MySQL

🔨 dev tool

IntelliJ IDEA Visual Studio Code Postman

⛓️ API



구현 기능

💡 인증 및 인가

스프링 시큐리티와 jjwt 라이브러리를 이용한 JWT(Json Web Token) 방식의 인증으로 구현하였습니다. 액세스 토큰은 HTTP-Only 쿠키에 저장하여 XSS 공격에 의한 토큰 탈취 위험성을 낮췄으며, 리프레시 토큰을 추가해 액세스 토큰이 탈취되더라도 만료 시간을 짧게 설정 가능하게 하여 보안성을 높였습니다.

JWT 구현 방식은 오픈소스(https://github.com/murraco/spring-boot-jwt)를 참고하여 제작되었습니다.

💡 회원

리소스 접근 기능은 API로 개발되었습니다. 회원 ROLE은 관리자와 일반 회원으로 나뉘며 각각의 역할에 따라 리소스 요청에 대한 권한을 인가 받을 수 있습니다. 비밀번호 찾기 기능은 임시 비밀번호를 발급하여 네이버 메일 API를 통해 가입한 이메일로 발급받게 됩니다.

💡 독후활동지 게시판 및 다운로드

독후활동지 관련 정보와 함께 이미지 파일과 pdf파일을 업로드 및 수정할 수 있습니다. 업로드한 pdf파일은 미리보기와 원본 파일로 구분하여 저장되며, PDFjs라이브러리를 통해 미리보기를 지원합니다. pdf를 구입한 이후에는 다운로드가 가능하며, 모든 다운로드는 구입 여부 인증 과정을 거친 후에 진행됩니다. 독후활동지 목록을 띄우는 곳에서는 장르/연령대/정렬순서 등 여러 정렬 기준이 필요해 queryDSL을 활용하였습니다. 장르와 연령대는 데이터베이스 기반으로 동작하여 쉽게 추가 및 삭제가 가능합니다.

💡 장바구니 기능

데이터베이스에 저장되며 구매 페이지로 넘어갈 시 쿠키로 변환되어 저장됩니다. 장바구니 내에서 실제 구매할 제품만을 선택하여 구매 페이지로 넘어갈 수 있습니다.

💡 쿠폰 기능

쿠폰을 구매할 수 있으며 구매한 쿠폰을 사용하여 독후활동지를 구매할 수 있습니다. 독후활동지 구매 시에 쿠폰을 사용한만큼의 독후활동지 금액이 차감되여 결제가 진행됩니다.

💡 결제 프로세스

포트원 API를 연동하여 결제 프로세스를 진행합니다. 결제 정보와 함께 pdf/쿠폰 구입 기록을 업데이트합니다.

💡 개별출제요청

업로드되지 않은 독후활동지를 관리자에게 출제요청하는 페이지입니다. 서지정보 API를 연동하여 원하는 책을 정확하고 쉽게 찾을 수 있게 제작하였습니다. 받은 요청은 관리자 페이지에서 확인 가능하며, 관리자는 완료 여부를 업데이트할 수 있습니다.

💡 자주 묻는 질문

자주 묻는 질문을 모아 볼 수 있는 페이지입니다. 관리자 페이지에서 등록이 가능하며 일반 회원은 분류 기준별로 모아 볼 수 있습니다.

💡 이용안내 게시판

이용안내 게시판입니다. 관리자 페이지에서 등록이 가능하며 일반 회원의 열람이 가능합니다.

💡 공지사항 게시판

공지사항 게시판입니다. 관리자 페이지에서 등록이 가능하며 일반 회원의 열람이 가능합니다.

💡 메인 페이지

독후활동지 검색 / 신규 독후활동지 / 베스트셀러 독후활동지 / 이용방법 및 공지사항 / 쿠폰으로 구성되어 있습니다.

💡 관리자 페이지

회원관리/ 받은 출제요청 보기 / 활동지 등록 / 이용안내 등록 / 공지사항 등록 / 자주묻는질문 등록이 가능합니다.



nodeul-project's People

Contributors

beomseokyu avatar dawnpoems avatar kyungoesim avatar hsnkch avatar hyeokjulee avatar kimjisudev avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.