Just Do IT

🔹 프로젝트 기간 : 2024.03.11 ~ 2024.03.26 (총 12일)

🔹 Git : https://github.com/CyberUniversityProject/CyberUnivProject

🔹 PDF : https://drive.google.com/file/d/1htnvcKOFypTGXwcoz49CLErcanUjPlBU/view?usp=sharing

🧑🏻‍💻 프로젝트 선정배경

• 다양한 프로젝트를 거치면서 ERP 시스템에 대해 팀원 모두가 관심을 가지게 됨
• 대학생 시절에 사용해본 학사관리시스템을 주제로 선정하여 개발 프로젝트 진행

🧑🏻‍💻 역할

• 프로젝트 팀장 역할
• 사이트 기본 디자인 구현
• 로그인/로그아웃/ID/PW 찾기
• 교직원 기능
  1. 학생/교수 명단조회
  2. 학생/교수/교직원 등록
  3. 등록금 고지서 발송
  4. 휴학 처리
  5. 수강신청기간 설정
  6. 강의 등록
  7. 단대별 등록금 설정
• 학생 기능
  1. 수강신청
• 커뮤니티
• 캠퍼스맵

🛠️ 기술 스택

🔻 Front-End

• HTML5
• CSS3
• JavaScript (1.16.1)
• JQuery (3.6.4)
• bootstrap (4.6.2)

🔻 Back-End

• JAVA 17
• SpringBoot (3.1.8)
• MyBatis
• JSP
• MySQL (8.0.26)
• lombok
• Apache Tomcat(10.1.19)

🔻 API

• 포트원 결제 API
• 나이스 식단 API
• 카카오맵 API

🔻 Collaboration

• Git
• GitHub Desktop
• Discord
• Notion
• Slack

📖 전체 기능 둘러보기

https://youtu.be/G59X8qBfSrg?si=2Mh7UqbNjgkcKI10

📖 주요 담당 기능

🔹 아이디/비밀번호 찾기

• 이름과 이메일 그리고 계정 유형을 선택하여 해당하는 유저가 있는 경우 아이디 찾기 결과를 보여줌
• 비밀번호 찾기는 이름과 (아이디 학번(사번)) 이메일을 입력하여 임시비밀번호를 발급하는 형태
• 일치하는 회원정보가 있다면 임시비밀번호 발급, 임시발급된 비밀번호를 입력하여 로그인

🔹 학생, 교수 명단조회 + 검색기능

https://youtu.be/BP67nSln-aM?si=QIcM-G5nhwsaGnXs

• 등록된 학생, 교수들의 목록을 확인할 수 있음
• 학과 번호 또는 학번 검색 기능

🔹 학생, 교수, 교직원 등록

https://youtu.be/IpTRca01Cik?si=ivBCTcWhuPlCB4w4

• 유저 별 계정 생성 시 직책에 따라 DB에 생성됨
• 학생의 경우 사진 이미지 업로드 가능

🔹 등록금 고지서 전송

https://youtu.be/gXovzd8V_iM?si=73zckNHgbrlzuV71

• 교직원이 등록금 고지서 전송 버튼을 누르면 이번 학기까지 재학중인 학생들에게 등록금 고지서 발송
• 고지서가 생성되었다는 알림창이 뜨게 되며 학생 로그인 > 등록금 납부 조회페이지에서 확인 가능

🔹 휴학처리

https://youtu.be/tcoHlq5n7w4?si=WrRWcdRZMKSM3WkH

• 학생이 휴학신청에서 휴학원 양식을 작성 후 신청을 하면 교직원이 신청 내역을 확인할 수 있음
• 교직원이 신청 내역을 확인 후 휴학 승인 또는 반려처리

🔷 수강신청기간 설정

https://youtu.be/exCFo_XNTDU?si=QKVM3C98vyE5K6JJ

• 기본값은 수강신청기간 종료
• 예비수강신청 > 수강신청 > 종료 순으로 변경

https://youtu.be/pU1mA1hMil8

[예비 수강신청]

• 대상 : 현재 학기에 재학 상태가 되는 학생
• 신청/취소할 때마다 강의 현재 인원 변경
• 신청 강의의 정원 초과 가능 (찜하기 기능과 유사)
• 최대 수강 가능 학점 초과 불가능 (최대 18학점)
• 신청자 본인의 시간표와 겹치는 강의 신청 불가능

[수강신청]

• 정원 ≥ 신청인원인 강의 : 예비 수강 신청 내역이 수강 신청 내역으로 자동으로 이월됨
• 정원 < 신청인원인 강의 : 신청 인원이 0명으로 초기화되며, 학생이 직접 신청해야 함
• 예비 수강 신청 내역이 있는 경우, 신청이 용이하도록 수강 신청 탭에 가장 먼저 출력됨
• 수강신청 대상 : 현재 학기에 재학 상태가 되는 학생
• 신청/취소할 때마다 강의 현재 인원 변경
• 신청 강의의 정원 초과 불가능
• 최대 수강 가능 학점 초과 불가능 (최대 18학점)
• 신청자 본인의 시간표와 겹치는 강의 신청 불가능
• 페이징 처리, 검색 기능

이번 팀 프로젝트는 도서관 플랫폼으로 주제를 정하고 사이트 이름은 북허브(BookHub)로 정하였습니다.

작업기간은 2024.02.13 ~ 2024.03.05 (총 15일) 소요되었습니다.

이번 프로젝트에서는 저는 부팀장역할을 맡아 사이트 전체 프론트 디자인 부분과

발표 PPT 제작 및

관리자페이지, 포인트 결제 기능부분을 맡아 개발을 진행하였습니다.

💡 프로젝트 선정 배경

• 환경을 생각한 도서 서비스 → 책 생산시 낭비되는 종이를 막기 위해 책 공유 기능을 넣어 자원낭비를 최소화
• 모임을 개설하여 서로의 의견을 주고 받을 수 있는 모임 서비스
• 포인트 결제 수수료, 배너광고 수익을 통한 사이트 수익창출
• 도서 검색, 대출/반납, 도서관 내 포인트를 이용한 베이커리, PC 사용 서비스

💡 내가 개발한 기능

• 메인페이지 전체 디자인
• 포트원 결제 API를 이용한 포인트상품 결제/환불 기능 구현(사이트 수익모델)
• 관리자페이지 광고배너 등록/수정/삭제
• 관리자페이지 상품 등록/수정/삭제

💡 기능 개발하면서 힘들었던점

• 결제 환불 부분에서 직접 api를 만들면서 첫번째 환불 내역은 취소가 되는데 두번째...n번째 내역은 취소가 안되는 오류가 발생해 밤 낮으로 고민하고 검색하고 할 수 있는 방법을 찾은 결과 정상적으로 환불요청 구현을 완료하여서 뿌듯하였음

🛠️ 기술 스택

🔻 Front-End

• HTML5
• CSS3
• JavaScript : 1.16.1
• JQuery : 3.6.4
• bootstrap : 4.6.2

🔻 Back-End

• SpringBoot 3.1.8
• JAVA 17
• MySQL 8.0.26
• lombok
• Apache Tomcat : 9.0
• MyBatis
• JSP

🔻 API

• OAuth2.0 (구글, 카카오, 네이버)
• 포트원 결제 API
• 카카오 주소 API

🔻 Collaboration

• Git
• GitBash
• Discode
• Notion

💡 전체 기능 시연 영상

📖 주요 담당 기능 미리보기

🔷 메인페이지

• 웹 페이지를 개발하면서 가장 공들인 부분
• 사이트 로고도 직접제작하여 실제로 운영하는 사이트 처럼 디자인함

🔷 포트원 API를 이용한 포인트 상품 결제

• 저번 게임쇼핑몰 프로젝트에는 토스페이먼츠 api를 이용하였는데 확실히 포트원 api가 사용하기가 쉬웠다.

🔷 포트원 API를 이용한 포인트 상품 환불

• 가장 시간을 많이 쓴 작업
• 환불로직에 대한 이해가 부족해서 몇번이고 공식문서를 정독해서 완성한 기능이자 애착이 가는 기능

🔷 관리자 페이지 배너 등록

• 수익 모델을 생각하다가, 배너 광고 클릭시 클릭 횟수마다 금액을 지정하면 괜찮을거 같아서 만든 기능
• 한번 클릭시마다 550원이 광고수익으로 넘어간다.

🔷 관리자 페이지 상품 등록

• 위에서 봤던 포인트 결제 상품들을 등록하는 관리자 페이지 부분
• BookHub 포인트 상품을 추가하는 관리자 페이지 부분
• 관리자 계정으로 로그인 후 포인트 관리 → 포인트 상품 등록 페이지에서 해당상품명, 포인트, 실제 결제될 가격 입력 후 등록
• 메인 페이지 포인트 구매하기 페이지에 실제 등록된 상품이 보이게 구현

✅  총평

• 1차 프로젝트이다 보니 부족한 부분이 많았고, 구현했다가 시간 부족으로 폐기한 기능들이 많아 아쉬웠다.
• 팀원들끼리 남아서 서로 피드백하고 회의하면서 작업하는게 작업 퀄리티를 높힐 수 있어서 좋았다.

사이트 바로가기 : http://playhost.shop

이번 23년 11월 15일부터 12월 8일 대략 3주간 팀 프로젝트를 진행하였습니다.

팀원은 총 6명이 진행하였으며 팀당 2명씩 역할 분담을 나누어 사이트를 제작하였습니다.

📝 프로젝트 선정배경

프로젝트 선정배경은 프로젝트 주제 선정과정에서 강의 시간에 배웠던 API를 활용한 사이트을 제작하기로 회의 때 이야기를 하였고, 그 중 게임 소프트웨어 유통망 사이트인 Steam(스팀)의 API를 활용한 게임 판매 사이트를 제작하기로 결정하였습니다.

📝 프로젝트 목표

저희 playhost 사이트의 목표는 다음과 같습니다.

• 직관적이고 한눈에 보기 쉬운 사이트 일 것
• 스팀 API를 활용한 다양한 게임 조회 기능 구현
• 사이트 관리자가 직접 판매할 게임을 추가/삭제할 수 있는 기능 구현
• 포인트 구매 기능 구현

제작 기간은 23년 11월 15일 ~ 12월 08일 약 3주간 진행되었습니다.

📝 담당 역할

저는 사이트 프론트 + 백엔드 부분을 담당하였고 상세 기능은 아래와 같이 기능을 구현하였습니다.

• 구매한 게임을 담을 수 있는 장바구니 기능 구현
• 토스페이먼츠 API를 활용한 결제 시스템 구현
• 게임 뉴스를 게시할 수 있는 News 페이지 기능 구현
• 팀원 소개 및 사이트 소개 페이지 구현

📝 프로젝트에 사용한 기술

프로젝트에서 사용한 기술은 다음과 같습니다.

🔶 개발 툴

1) intellij IDEA - 백앤드 부분

2) VSCode - 프론트앤드 부분

3) Github - 형상관리

4) Oracle DB - DB

5) 배포 - 아마존 AWS

📝 시스템 구성도

📝 ERD Table

📝 로그인 기능

먼저 사이트 로그인 기능입니다.

로그인은 이메일, 비밀번호를 입력하여 로그인을 할 수 있습니다.

회원가입의 경우 이름, 이메일, 비밀번호, 비밀번호 재입력을 통해 회원가입을 합니다.

회원가입을 진행하면 회원가입시 입력한 이메일로 인증번호가 전송되며 전송된 인증번호를 입력하여 회원가입을 진행합니다.

비밀번호 찾기 기능은 가입시 입력한 이메일을 입력하면 이메일 주소로 인증번호가 전송됩니다.

그 인증번호를 입력하여 일치하면 비밀번호 변경 부분으로 넘어가게 되고, 새로운 비밀번호로 변경이 가능합니다.

소셜로그인 부분입니다.

소셜로그인은 구글, 카카오로 로그인이 가능하며 별도 회원가입 없이 구글과 카카오에 로그인이 되어있으면 다이렉트로 로그인이 진행됩니다.

📝 메인페이지

메인페이지는 사이트 처음 접속시 보이는 페이지입니다.

• 추천게임 목록 부분은 관리자 페이지에서 해당 상품에 이미지를 업로드 한 경우 메인 화면에 표시가 됩니다.
• 금주의 할인 게임은 관리자 페이지에서 판매 제품에 할인율을 적용할 경우 할인 게임 탭 부분에 표시가 됩니다.

📝 상세 조회

상세 조회 페이지부분은 게임 태그별(액션, 어드벤처 등...) 게임 목록들을 보여주는 페이지입니다.

쇼핑몰로 치면 카테고리별로 상품을 보여주는 부분이라 생각하시면 됩니다.

📝 게임 상세조회

게임 목록에서 해당 게임을 선택하면 보이는 페이지 입니다.

화면 상단에는 썸네일 이미지 + 타이틀이름 + 리뷰 상태를 표시하며

화면 중간 부분에는 게임 스크린샷, 게임 트레일러 영상 등이 표시됩니다.

스크롤을 내리면 게임 설명부분과 사이드바 부분으로 나누어져 있으며 장바구니 추가 버튼이 존재합니다.

해당 게임에 대한 리뷰도 작성이 가능합니다. 단, 게임을 구매한 경우에만 리뷰 작성이 가능하도록 설정되어 있습니다.

📝 장바구니 기능

장바구니 부분은 게임 상세조회에서 장바구니 탭 부분에 금액이 적힌 버튼을 누르게 되면 장바구니에 추가가 됩니다.

장바구니 페이지로 넘어가게 되면 해당 장바구니에 담긴 개수 표시와 장바구니에 담긴 제품 상세 표시, 주문하기 버튼으로 구성되어 있습니다.

📝 결제 페이지

위의 장바구니 페이지에서 결제하기 버튼을 누르면 결제 페이지로 넘어가게 됩니다.

결제 페이지부분은

유저의 주문내역 부분과 포인트 영역, 토스페이먼츠 API를 이용한 결제 선택창이 표시됩니다.

토스페이먼츠 API를 이용하여 실제 결제는 되지 않고 테스트 결제가 되어 결제가 진행됩니다.

구매완료시 해당 계정 이메일로 구매내역을 전송합니다.

다음시간에는 그 외 기능을 포스팅하겠습니다~🙋‍♂️