프로젝트

N캠프에 참여한 수강생들의 프로젝트입니다.

온라인 수산물 오픈마켓 플랫폼

AIaaS 7기,  Bleu Auction


팀장, 백엔드 개발주현욱 |  ERD 설계, JWT 권한인증, 무한스크롤링, 시세 조회, 리뷰 & 답글최기현 |  NCP 인프라 구축 및 관리, CI/CD 구축 및 관리, 챗봇 구현, figma 활용 프로젝트 레이아웃 설계신현우

프론트엔드 담당곽나현 |  프론트엔드 담당김성주 |  프론트& 백엔드 담당, JPA를 활용한 백엔드 개발박승현

[역할 상세]

주현욱

최기현

팀장

팀 관리

- 프로젝트 전체 스케줄링

- 회의 내용 준비 및 진행

- 팀원 멘탈 관리

- 협업툴로 slack 관리

- API 명세서 제작

백엔드/프론트엔드 개발환경 구축

백엔드 - SpringBoot, JPA 서버 환경 설정

프론트엔드 - REACT 서버 환경 설정

Git 관리

프론트엔드, 백엔드 레포지토리 생성

commit, PullRequest, Issue Rule설정 및 관리

Github의 Project를 활용해서 팀 RoadMap 생성 및 관리

회원가입

SpringSecurity를 활용해 비밀번호 암호화 저장

회원가입시 일반사용자, 관리자, 판매자로 나누어 각 사용자의 필요 정보를 DB에 저장

각 회원 정보 수정 구현

로그인

DB에는 encoding 된 암호 저장, 로그인시에는 회원가입시 사용자가 입력한 비밀번호로 로그인 되도록 구현

email과 password로 로그인 유저를 탐색 가능

로그인시 Jwt Token을 활용해 SessionStorage에 저장

카카오 소셜 로그인 구현

결제

i’mport REST_API를 활용하여 key 값을 받아와 설정 후 controller를 생성해 결제완료되면 DB에 저장

JWT를 이용한 권한인증 방식 구현

기존 HttpSession을 사용한 로그인 및 권한인증 방식을 Json Web Token을 이용한 방식으로 변경

최초 로그인시 서버에서 해당 유저가 존재하는지 조회 후 AccessToken과  RefreshToken을 발급하여 클라이언트에게 응답 -> 클라이언트의 SessionStorage에 AccessToken을 보관, LocalStorage에  RefreshToken을 보관 -> 권한인증이 필요한 모든 요청시 AccessToken을 요청에 포함하여 전송 해당 AccessToken의 유효성 여부를 서버에서 검사 후 유효하지 않으면 LocalStorage에 보관중인 RefreshToken을 이용하여 AccessToken 재발급 요청을 전송 -> 서버에서 RefreshToken의 유효성을 검사하여 유효하면 해당 RefreshTokenn을 바탕으로 AccessToekn을 재발급하고 유효하지 않으면 재 로그인을 유도하여 AccessToken과RefreshToken을 재발급 받도록 유도

변경 사유

1. 서버 사이드 렌더링 방식이 아닌 클라이언트 렌더링 방식에 JWT를 이용한 권한인증 방식이 좀 더 적합하다고 판단

2. 데이터 엑세스 프레임워크로 JPA를 사용 중 HttpSession 사용시 JPA에서 엔티티 객체를 관리 하는 스코프 단위인 request와 session 단위는 차이가 있어 StackOverFlow 등의 문제 발생으로 인해 HttpSession을 이용하지 않는 것이 적합하다 판단

무한스크롤링 방식의 페이징 처리 구현

시장(가게) 리스트와 리뷰 리스트 등 리스트 구조의 데이터를 조회하여 출력하는 View 에는 사용자 편의적인 UI 구현을 위해 무한 스크롤링 방식의 페이징 방식을 적용하여 구현

ERD 설계

ERD Cloud 를 이용하여 프로젝트의 전반적인 DB모델링을 담당

구현할 기능들을 바탕으로 개념적 모델링 과정을 통해 기본적인 테이블 도출

논리적 모델링 과정을 통해 개념적 모델링을 통해 도출된 테이블들을 정규화및 관계 지정

정규화를 거친 테이블들을 물리적 모델링 과정을 통해 실제 물리적 저장소에서 관리 할 타입 등을 지정 

위 모델링 과정들을 통해 최종 도출된 ERD를 바탕으로 DDL문 작성 및 스키마 생성

외부 API를 이용한 시세 조회 기능 및 View구현

수산물의 품목별 시세를 조회하는 VIew를 HandSonTable API를 적용하여 구현

각 품목별 시세 정보를 엑셀 Sheet와 유사한 UI로 출력

각 컬럼(열) 헤더에 필터 기능을 적용하여 원하는 데이터에 대한 정보만 필터링 하여 시세를 적용할 수 있게 구현

리뷰 & 답글 CRUD 및 View 구현

파일을 첨부하여 리뷰를 작성할 수 있게 구현 

리뷰점수는 기존의 통상적인 별점이 아닌 신선도 개념을 도입하여 적용

리뷰에 대한 답글에 대한 CRUD 기능 구현

리뷰에 대한 답글은 ‘ 더 보기’ 버튼 클릭을 이용한 페이징 처리 방식으로 구현

신현우

곽나현

김성주

NCP 인프라 구축 및 관리 

아키텍처 설계 

배포용 서버 VPC 구성 및 관리

NCP 인프라 구축 (DB서버, 도메인, DNS등)

CI/CD 구축 및 관리 

도커 + 젠킨스 CI/CD 파이프라인 활용한 배포 자동화

Nginx 활용한 로드밸런싱 환경 구축

챗봇 구현 

Naver Clova ChatBot 이용한 챗봇 구현 및 디자인

figma 활용 프로젝트 레이아웃 설계


발표 ppt 제작

프론트엔드 보수 ( 공지사항, 메인화면, 사이드바)

Figma를 이용한 와이어프레임 제작

React를 활용한 프론트엔드 개발

로그인 페이지 구현

회원가입 페이지 구현

판매자 마이페이지 메뉴 관리 페이지 구현

판매자 마이페이지 주문 확인 페이지 구현

판매자 마이페이지 가게 등록 페이지 구현

판매자 마이페이지 회원정보수정 페이지 구현

일반회원 마이페이지 마이오더 페이지 구현

일반회원 마이페이지 회원정보수정 페이지 구현

시장 가게 정보 페이지 구현

시장 메뉴 페이지 구현

ppt 및 발표 참여

React 활용 동적 페이지 구현

메인 페이지 구현

header, footer 구현

시장 정보 UI 구현

주문 및 결제 구현

구매자 마이페이지 구매목록 구현

판매자 마이페이지 가게정보 수정, 시세  품목 등록 구현

시연영상
Naver Clova Dubbing을 활용한 자막 및 나레이션 추가

Figma를 이용한 와이어프레임 제작

박승현

공지사항 CRUD

관리자 권한 확인 후 가능하도록 구현

제목, 내용, 첨부파일 3가지 내용으로 작성하고, 삭제 시 사용여부 N으로 수정 후 화면에 출력되지 않도록 구현

메뉴 CRUD

가게를 소유한 판매자만 등록할 수 있도록 구현

첨부파일 연결

주문메뉴 CRUD

주문과 다대일 관계로 한 개의 주문에 여러 개의 주문메뉴가 존재하도록 구현

주문 CRUD

판매자 별 주문 목록 확인, 구매자 별 주문 목록 확인, 주문 별 목록 확인 등의 주문과 관련된 상황별 컨트롤러 구현 

주문 번호 생성 후 주문 메뉴를 작성할 수 있도록 구현

NCP Naver storage 서비스 config 설정 및 첨부파일 CRUD 연결

React 활용 프론트 페이지 구현

공통 공지사항 확인 페이지

관리자 마이페이지 공지사항 CRUD 페이지 구현

판매자 및 구매자 주문 목록 확인 페이지 구현

figma 와이어 프레임 제작 참여

1차 제출물 ppt 및 영상 제작


최종 제출물 시연 영상 제작


제출 문서 작성


전반적인 프로젝트 진척도 확인 및 관리


ppt 및 발표 참여

 

[프로젝트 설명]

AI 챗봇 서비스, 시장 등록 등의 서비스로 수산물 소상공인의 판매 편의를 높이고 해산물 시세 페이지를 통해 가게 별 가격 비교를 통해 구매자의 합리적인 구매를 돕는 웹사이트


첨부파일