💻 한성대학교 내 물품 쉐어링(대여 및 관리) 웹서비스 Ah!Chacha

• 배포 URL : https://www.ahchacha.site/
• ID: 한성대학교 종합정보시스템 학번
• Password: 한성대학교 종합정보시스템 비밀번호

프로젝트 소개

• Ah!Chacha는 한성대학교 내 물품 쉐어링(대여 및 관리) 웹서비스 플랫폼입니다.

프로젝트 목표

1. 접근성 향상: 학생들이 필요한 물품을 쉽게 찾고, 대여할 수 있는 플랫폼을 개발하여, 기존의 수기 방식이나 각 사무실,학생회가 어떤 물품을 대여해줄 수 있는지 찾아야하는 번거로움으로 인한 불편함 해소할 수 있습니다.
2. 효율적인 물품 관리: 물품의 수량, 대여 상태, 대여 가능 시간 등을 실시간으로 관리하고 표시함으로써, 물품의 이용률을 극대화하고 물품의 낭비를 최소화할 수 있습니다.
3. 커뮤니티 강화: 학생들이 자신의 물품을 대여하고 공유할 수 있는 기능을 통해, 교내 커뮤니티의 협력과 공유 문화를 촉진할 수 있습니다.
4. 사용자의 만족도 제고: 편리하고 직관적인 사용자 인터페이스(UI) 및 사용자 경험(UX) 설계를 통해, 사용자들이 서비스를 쉽고 만족스럽게 이용할 수 있습니다.

프로젝트 주요 기능

1. 물품 등록 및 관리: 사용자가 물품을 쉽게 등록하고 물품 정보를 관리할 수 있는 기능
2. 대여 및 반납: 사용자가 물품을 대여하고 반납할 수 있는 간단하고 명확한 프로세스. 대여 기간, 대여 가능 여부, 대여 위치, 반납 위치 등을 포함
3. 검색 및 필터링: 사용자가 필요한 물품을 쉽게 찾을 수 있도록 키워드 검색 및 다양한 필터링 옵션 (예: 카테고리별, 최근 작성순, 예약 가능 여부)
4. 사용자 평가 및 리뷰: 대여한 물품이나 이용한 서비스에 대한 사용자의 평가와 리뷰를 남길 수 있는 기능
5. 알림: 물품 반납 기간을 하루 전과 한 시간으로 나눠서 알림을 보내는 기능, 채팅 알림 기능
6. 커뮤니티: 사용자들이 원하는 물품이나 사용 팁, 공지 사항, 학교 생활 등을 공유할 수 있는 게시판 기능

프로젝트 구조

기능에 따른 화면 리스트 구성

1. 로그인
   • 로그인
   • 닉네임 설정
2. 메인
   • 많이 찾는 물품 리스트
   • 최신 등록 물품 리스트
   • 사용자 취향에 맞는 추천 물품 리스트
   • 프로젝트 소개 및 팀 소개
3. 대여
   • 검색
   • 검색에 따른 물품 리스트
   • 물품 상세
   • 물품 예약(비용 결제, 날짜 선택)
4. 등록
   • 카테고리 선택
   • 물품 등록(날짜, 비용, 사진, 상태 및 상세 내용)
5. 알림 및 오픈채팅방으로 연결
6. 게시판
   • 글 등록
   • 글 목록
   • 글 상세(사진, 댓글, 좋아요)
7. 리뷰
   • 거래 후기
   • 물품 후기
   • 대여 후기
8. 마이 페이지
   • 대여 및 등록 내역
   • 계정 관리
   • 리뷰 관리
   • 로그아웃

I.A(Information Architecture-기능구조도)

상세URL: https://zrr.kr/qKra

Flowchart(화면흐름도)

상세URL: https://zrr.kr/R1SK

팀원 구성

📚 Use

1. 개발 언어

• JAVA : Java는 그 자체로 플랫폼으로 사용할 수 있는 다중 플랫폼, 객체 지향 및 네트워크 중심 언어로서 프로젝트 내 백엔드 파트에서 사용
• JavaScript: JavaScript는 '웹페이지에 생동감을 불어넣기 위해' 만들어진 프로그래밍 언어로서 프로젝트 내 프론트엔드 파트에서 사용

2. 개발 도구

Backend

• IntelliJ IDEA
  • IntelliJ IDEA는 JetBrains이 개발한 자바를 포함한 다양한 프로그래밍 언어를 위한 통합 개발 환경(IDE)으로 프로그래머의 생산성을 향상시키기 위해 설계
  • 코드 작성, 디버깅, 리팩토링, 테스트, 버전 관리 등의 개발 작업에 필요한 다양한 기능을 제공
• IntelliJ DataGrip
  • 외부 접속을 하기 위해서 DB 개발과 관리를 용이하게 해주는 GUI 개발 툴이며 프로젝트 내 AWS RDS와 MySQL과 연동하여 사용
• Swagger
  • 개발한 Rest API를 편리하게 문서화, 이를 통해 관리 및 제 3의 사용자가 편리하게 API호출 및 테스트를 할 수 있는 프로젝트
• AWS
  • 전 세계적으로 분포한 데이터 센터에서 200개가 넘는 완벽한 기능의 서비스를 제공하는, 세계적으로 가장 포괄적이며, 널리 채택되고 있는 클라우드
• Hibernate
  • Java 환경을 위한 객체 관계형 매핑 솔루션
  • Hibernate는 애플리케이션 도메인 개체를 관계형 데이터베이스 테이블에 매핑하거나 그 반대로 매핑하기 위한 프레임 워크를 제공하는 Java 기반 ORM 도구

Frontend

• Visual Studio Code
  • Visual Studio Code는 마이크로소프트에서 오픈소스로 개발하고 있는 소스 코드 에디터
  • 웹 기반으로 기술들로 데스크톱 애플리케이션을 만들 수 있는 GitHub의 일렉트론을 기반으로 만들어져 맥OS, 리눅스, 윈도우 등 메이저 운영체제를 모두 지원
• React
  • React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리
• Axios
  • Npm을 이용하여 다운로드 가능한 HTTP request 모듈이는 ES6 Promise API를 지원하며 브라우저의 HTTP request에 사용
• Netlify
  • GitHub, GitLab 등과 계정 연동 및 쉬운 호스팅을 제공
  • CDN, Continuous Deployment(지속적 배포), One-lick HTTPS 제공 등 고성능 사이트 / 웹 응용 프로그램을 제작하는데 필요한 쉽고 빠른 다양한 서비스들을 제공

Design

• Figma

  • Figma는 온라인에서 사용할 수 있는 디자인 툴로, UX/UI 디자인 및 프로토타입 제작을 위한 기능들을 제공
  • 웹・앱・인터페이스 디자인 등 다양한 분야에서 사용되며, 디자인과 개발 과정에서 필요한 여러 협업 기능을 지원

• 화면 설계 및 사용자 경험(UI/UX) 설계

  1. 설계 원칙과 목표

     • 사용 편의성: 빠르고 직관적인 검색을 가능하게 하는 레이아웃
     • 정보 접근성: 모든 사용자가 쉽게 정보에 접근할 수 있도록 높은 접근성 표준을 적용
     • 익명성 보호: 닉네임을 사용해 사용자 간의 익명성을 유지하며 안전한 거래 환경을 조성

  2. 화면 설계 과정

     • 와이어프레임(Wireframe) 제작:
       • 와이어프레임은 서비스의 기본 구조와 사용자 인터페이스를 계획하는 초기 단계에서 필수적으로 디자인 과정에서 방향성을 제시하고, 구성원 간의 의사소통을 촉진
       • Figma 디자인 툴을 활용하여 프로젝트의 핵심 기능에 중점을 둔 웹사이트의 골격인 와이어프레임 제작
     • 프로토타입(Prototype) 제작:
       • 프로토타입은 와이어프레임을 기반으로 더 상세하게 사용자와의 상호작용을 표현하고, 개발할 웹사이트를 시뮬레이션, 디자인의 실용성을 검증
       • Figma 디자인 툴을 활용하여 와이어프레임을 기반으로 제작, 보다 정확한 프로토타입을 제작하여 개발 전에 사용성 문제를 발견하여 수정

협업 툴 : Discord, Notion, Github

3. 프레임워크

• Java Spring Boot
  • Spring Boot는 Java 백엔드 개발을 위한 강력하고 편리한 프레임워크로,개발자가 빠르고 쉽게 애플리케이션을 개발할 수 있는 도구
  • Spring 프레임워크를 기반으로 하여, 복잡한 설정 없이도 독립적인, 생산 수준의 애플리케이션을 쉽게 만들 수 있도록 설계된 도구

4. 브랜치 전략

Front-end

• Git-flow 전략을 기반으로 main, develop 브랜치와 개인별 보조 브랜치를 운용했습니다.
• main, develop, 개인별 브랜치로 나누어 개발을 하였습니다.
  • main 브랜치는 배포 단계에서만 사용하는 브랜치입니다.
  • develop 브랜치는 개발 단계에서 git-flow의 master 역할을 하는 브랜치입니다.

Back-end

• Git-flow 전략을 기반으로 main, feature/기능 브랜치 생성 시 develop 브랜치에서 운용했습니다.
• main, develop브랜치로 나누어 개발을 하였습니다.
  • main 브랜치는 배포 단계에서만 사용하는 브랜치입니다.
  • develop 브랜치는 개발 단계에서 git-flow의 master 역할을 하는 브랜치입니다.

Pull Request 규칙

1. Commit, Push
2. pr 생성 → develop 브랜치로! main 브랜치(x)
    제목: type 내용 (ex. [FEAT] 회원가입 기능 구현)
    내용: 어떤 기능 (어떤 코드 추가, 어떤 오류 수정) 작업했는지 내용 작성하기 (ex. 이메일 중복 확인 코드 추가, 닉네임 중복 확인 코드 추가 등)
3. Merge

5. 역할 분담

조성빈(팀장)

• Frontend
  • React 클라이언트 구축
• Design
  • 페이지 UI/UX 디자인

권승진

• Backend
  • DB 설계 및 구축
  • 서버 구축
• Frontend
  • React 클라이언트 구축

김동욱

• Backend
  • DB 설계 및 구축
  • 서버 구축
• Frontend
  • React 클라이언트 구축

유호준

• Backend
  • DB 설계 및 구축
  • 서버 구축

6. 개발 기간 및 작업 관리

7. 기대효과 및 제약사항

• 기대효과

1. 시간 및 비용 절약: 학생들이 필요한 물품을 쉽게 찾고 예약할 수 있게 하여, 필요한 물건을 찾기 위해 드는 시간과 비용을 절약, 또한 학생회나 과사무실에서 관리하는 물품에 대해 실시간으로 잔여량을 확인하여 불필요한 방문을 줄여 시간 절약
2. 자원의 효율적 사용: 자주 사용하지 않는 물품을 공유함으로써 물품 사용의 효율성을 증가
3. 커뮤니티 형성: 공유 경제를 통해 학교 커뮤니티 내의 상호작용을 증진시키고, 신뢰와 협력의 문화를 구축 가능
4. 환경적 이점: 물품의 공유가 환경에 미치는 폐기물 감소 등 긍정적인 영향
5. 익명성 및 안전성 강화: 서비스는 사용자 간 익명성을 보장하면서 개인 정보를 드러내지 않고도 자신이 필요로 하는 물품을 안심하게 대여하거나 제공 가능
6. 불편함 해소: 학생회/과사무실의 종이 수기 작성과 보증금, 신분증을 맡기는 불편함 해소

• 제약사항

1. 교내에서만 이용 가능한 서비스
2. 종합정보시스템을 이용한 로그인으로 학교 구성원 중 학생만 이용할 수 있는 인증 시스템
3. 학생회나 과사무실 근로 학생은 인증 필요