온라인 수산물 오픈마켓 플랫폼
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 활용 프로젝트 레이아웃 설계
| Figma를 이용한 와이어프레임 제작 React를 활용한 프론트엔드 개발 ● 로그인 페이지 구현 ● 회원가입 페이지 구현 ● 판매자 마이페이지 메뉴 관리 페이지 구현 ● 판매자 마이페이지 주문 확인 페이지 구현 ● 판매자 마이페이지 가게 등록 페이지 구현 ● 판매자 마이페이지 회원정보수정 페이지 구현 ● 일반회원 마이페이지 마이오더 페이지 구현 ● 일반회원 마이페이지 회원정보수정 페이지 구현 ● 시장 가게 정보 페이지 구현 ● 시장 메뉴 페이지 구현 ppt 및 발표 참여 | React 활용 동적 페이지 구현 ● 메인 페이지 구현 ● header, footer 구현 ● 시장 정보 UI 구현 ● 주문 및 결제 구현 ● 구매자 마이페이지 구매목록 구현 ● 판매자 마이페이지 가게정보 수정, 시세 품목 등록 구현 시연영상 Figma를 이용한 와이어프레임 제작 |
박승현 | |
공지사항 CRUD ● 관리자 권한 확인 후 가능하도록 구현 ● 제목, 내용, 첨부파일 3가지 내용으로 작성하고, 삭제 시 사용여부 N으로 수정 후 화면에 출력되지 않도록 구현 메뉴 CRUD ● 가게를 소유한 판매자만 등록할 수 있도록 구현 ● 첨부파일 연결 주문메뉴 CRUD ● 주문과 다대일 관계로 한 개의 주문에 여러 개의 주문메뉴가 존재하도록 구현 주문 CRUD ● 판매자 별 주문 목록 확인, 구매자 별 주문 목록 확인, 주문 별 목록 확인 등의 주문과 관련된 상황별 컨트롤러 구현 ● 주문 번호 생성 후 주문 메뉴를 작성할 수 있도록 구현 ● NCP Naver storage 서비스 config 설정 및 첨부파일 CRUD 연결 | React 활용 프론트 페이지 구현 ● 공통 공지사항 확인 페이지 ● 관리자 마이페이지 공지사항 CRUD 페이지 구현 ● 판매자 및 구매자 주문 목록 확인 페이지 구현 figma 와이어 프레임 제작 참여 1차 제출물 ppt 및 영상 제작
|
[프로젝트 설명]
AI 챗봇 서비스, 시장 등록 등의 서비스로 수산물 소상공인의 판매 편의를 높이고 해산물 시세 페이지를 통해 가게 별 가격 비교를 통해 구매자의 합리적인 구매를 돕는 웹사이트
첨부파일
56,122.40KB
34.07KB
685.42KB
128.59KB
88,568.44KB