💬 Manage Configuration Easily with Us To Improve Your Project
초보 개발자를 위해 프로젝트를 개선하고 우리와 함께 쉽게 구성을 관리를 할수있게 만든 프로젝트
| 김동규 | 김영식 | 김진서 | 장태현 | 허웅 |
|---|---|---|---|---|
 @dongkyukim1 |
 @youngsik |
 @jins0113 |
 @TaeHyeon |
 @woong |
👨👨👧 회원 : 로그인 | 로그아웃 | 회원가입 | 이메일 인증 | 소셜 로그인(구글)
🏡 나의프로젝트 : 저장소 이름 | 간단한 저장소 설명 | 수정 | 삭제
🏡 팀 프로젝트 : 프로젝트 만들기 | 프로젝트 목록 | 프로젝트 참가 | 팀원초대 | 레포지토리 생성 | AI 코드 리뷰 | 코드 검색
💰 쪽지 보내기 : 받는 사람의 이메일 | 메세지 내용
💰 쪽지함 : 받은 쪽지함 | 보낸 쪽지함
🚧 AI 도우미 : 자동화된 작업처리 | 대화내역 저장
📈 팀원구하기 : 게시판목록 | 게시판생성 | 게시판수정 | 게시판삭제 | 내게시판 조회
🏠 마이 페이지 : 비빌번호 변경 | 프로필 사진 변경 | 진행 사항조절 | 기록 | 팀목록 | 게시글 기록 | 쪽지함 | 결제 내역
핵심기능 #1. 이메일 발송
-
JavaMailSender를 이용해 이메일 인증 및 임시 비밀번호 발송 기능을 구현하였습니다. - 휘발성 데이터인 이메일 인증 토큰의 경우 인메모리(In-Memory) 형태에 TTL(Time to Live) 특성을 지녀 유효기간이 설정된
Redis기반의 Refresh Token으로 관리합니다. 사용자는 전송된 링크를 눌러 재접속하는 것만으로 이메일 인증을 완료할 수 있습니다.
핵심기능 #2. 구글 로그인
- 일반 로그인의 경우 회원가입 양식 작성 후 이메일 인증을 거쳐야 하는 반면, 구글 로그인한 회원은
해당 계정에서 불러온 이름 및 이메일 정보가 연동돼 입력란을 채우며 나아가 별도의 이메일 인증 없이 곧바로 이용이 가능합니다.
핵심기능 #3. 쪽지 기능
- 발신자가 쪽지를 발송 (수신자 이메일 존재 여부 확인)
- 발신한 쪽지를 확인할 수 있는 보낸 쪽지함 기능
- 수신한 쪽지를 확인할 수 있는 받은 쪽지함 기능 (읽지 않은 쪽지 개수 확인 포함)
- 쪽지를 읽을 시 쪽지함에 읽음 표시 기능
핵심기능 #4. ai 서비스
- 웹사이트 방문자와 소통할 수 있는 무료 채팅 소프트웨어.
핵심기능 #5. 게시글 작성
- 로컬 스토리지에 저장된 JWT 토큰을 사용하여 API로부터 작성자 정보를 가져와,
작성자 필드를 자동으로 채우고 읽기 전용으로 설정한다.
핵심기능 #6. 나의 프로젝트
-
자동 저장소 생성: 사용자로부터 저장소 이름과 설명을 입력받아 자동으로 개인 저장소를 생성합니다.
-
질문 시퀀스: 사용자에게 순차적으로 질문을 표시하여 입력을 유도합니다.
-
입력 검증: 입력된 내용이 유효한지 확인하고, 유효하지 않으면 시각적 피드백을 제공합니다.
-
API 호출 및 리디렉션: 입력이 완료되면 API를 통해 저장소를 생성하고, 성공 시 프로젝트 리스트 페이지로 자동 리디렉션됩니다.
-
핵심기능 #7. 팀 프로젝트
-
사이드바 토글: 사용자는 사이드바를 손쉽게 열고 닫을 수 있습니다.
-
로그아웃 기능: 사용자가 로그아웃할 때 서버와 통신하여 세션을 종료하고, 메인 페이지로 리디렉션합니다.
-
사용자 정보 로딩: 로그인된 사용자의 정보를 API로 가져와 화면에 표시합니다.
-
프로젝트 관리:
-
개인 프로젝트 목록을 불러와 화면에 표시
-
프로젝트 수정 및 삭제 기능 제공
-
프로젝트 클릭 시 세부 정보 페이지로 이동
-
핵심기능 #8. 휴지통 이동
- 팀/레포제포리 삭제 시
휴지통에 저장돼10일의 복구기한이 주어지고, 자동 삭제됩니다. - 임의로 이동되는 경우에 대비하여
삭제파일를 명시하며, 관리자는 기한 내 이를 복구할 수 있는 권한이 있습니다.
| 회원가입 | 로그인 | 영어로변경 |
|---|---|---|
 |
 |
 |
| 소셜로그인(구글) | 나의프로젝트 생성 | 나의프로젝트 수정 |
 |
 |
 |
| 나의프로젝트 삭제 | 쪽지 보내기 | 쪽지함 |
 |
 |
 |
| 쪽지 삭제 | 나의프로젝트 목록 | 로그아웃 |
 |
 |
 |
| 설명서 | 커밋 | 이력 및 파일비교 |
 |
 |
 |
| AI 코드리뷰 | 다운로드 | 커밋 삭제 |
 |
 |
 |
| 게시글 생성 | 게시글 상세보기 | 게시글 수정 |
 |
 |
 |
| 게시글 삭제 | 게시글 검색 | 내 게시글 목록 |
 |
 |
 |
| 팀만들기 | 팀목록 | 프로젝트 참가 |
 |
 |
 |
| 팀설정 | 팀원 초대 | 휴지통(복구,삭제) |
 |
 |
 |
| 프로젝트 삭제 내역 | 환영 페이지 | 새 레포 만들기 |
 |
 |
 |
| ai 코드 리뷰 | 코드 검색 | 레포지토리 기능 |
 |
 |
 |
| 도움말 | 팀원초대 | 쪽지함 |
 |
 |
 |
| 쪽지함 삭제 | 결제 | 해외결제 |
 |
 |
 |
| AI 서비스 | 마이 페이지 | 프로필사진 변경 |
 |
 |
 |
| 비밀번호 번경 | 진행사항 조절 | 기록 |
 |
 |
 |
| 팀 목록 | 게시글 기록 | 활동 |
 |
 |
 |
| 결제 | 홈으로 가기 | |
 |
 |
| OS | Windows 10, Mac |
|---|---|
| Language |       |
| IDE |   |
| Framework |   |
| Build Tool |  |
| Database |   |
| Library |    |
| API |          |
| Server |  |
| Version Control |   |
| 선택기술 | 선택이유 및 근거 |
|---|---|
JWT |
기존의 세션방식은 Stateful한 상태를 가지기 때문에 Stateless 즉, 사용자의 인증 정보를 가지고 있지 않게 하여 서버의 부담을 줄이고 확장성을 높였습니다. 또한, 특정 알고리즘과 암호화된 키로 인증 사용자 정보를 암호화하여 보안성이 보장된다는 점에서 JWT 토큰을 사용하게 되었습니다. |
AJAX |
AJAX는 서버에서 데이터를 비동기적으로 가져올 수 있어서 사용자 경험을 개선하고 네트워크 트래픽을 줄이는 데 유리하다고 판단했습니다. 또한, 실시간으로 페이지의 일부분만을 업데이트할 수 있어, 사용자 인터페이스의 반응성을 높여 동적이고 상호작용적인 웹 애플리케이션을 구축하기 위해 사용하게 되었습니다. |
WebSocket |
WebSocket은 서버가 클라이언트로부터 수신한 데이터를 즉각적으로 처리하고 전송에 최적화 되어 있습니다. 또한 HTTP 기반의 폴링(polling) 방식보다 훨씬 적은 오버헤드로 실시간 통신을 수행할 수 있다는 부분에서 실시간 쪽지 기능 구현에 WebSocket 방식을 채택했습니다. |
springdoc-opendapi(swagger) |
애플리케이션에서 자동으로 API 문서를 생성해 주어 개발자가 일일이 문서를 작성하지 않아도 되므로, 생산성을 높여줍니다. 또한 직관적인 디자인으로 프론트엔드 개발자와 백엔드 개발자가 이해하기 쉬워 효율적인 커뮤니케이션이 가능하다고 생각했습니다. |
OAuth2(Social Login) |
소셜 로그인을 제공하여 사용자들이 새로운 계정을 생성할 필요 없이 기존 계정으로 빠르게 로그인할 수 있어 사용자 경험을 향상시키기 위한 목적이 있습니다. |
OpenAI(Code Feedback) |
초보 개발자를 타겟으로 한 서비스라는 점을 고려하여 개발자들이 더 나은 코드를 작성하도록 돕기 위해 코드 피드백 기능을 제공하게 되었습니다. |
