닿다 (DA-TA) 는 유리병 편지를 모티브로 한 1:1 랜덤 익명 편지 서비스입니다.
텍스트 혹은 그림 형태의 편지를 작성하여 무작위 1명에게 전송할 수 있으며,
다른 사람이 작성한 편지에 대해 1회성으로 답장을 보내거나 보관하여 간직할 수 있습니다.
새 창 열기 방법 : CTRL+click (on Windows and Linux) | CMD+click (on MacOS)
2022.10.11. ~ 2022.11.18.
- 메인 화면
- 바다에 띄워진 편지의 개수를 확인할 수 있습니다.
- 소셜(카카오) 로그인을 통하여 서비스를 이용 할 수 있습니다.
- 최초 로그인 시 자동으로 닉네임을 생성하여 줍니다.
- 오늘의 질문 & 답변
- 메인화면의 물병을 클릭하여 오늘의 질문을 확인할 수 있습니다.
- 답변하기 버튼을 클릭하여 오늘의 질문에 대한 나의 생각을 공유할 수 있습니다.
- 다른 답변 보기 버튼을 클릭하여 다른 사용자들의 답변을 확인하며, 내용이 부적절할 시 신고 기능을 사용할 수 있습니다.
- 편지 쓰기
- 편지 공통 옵션으로 원하는 편지지 및 글씨체를 선택, 수신자의 연령대를 설정, 답장을 받을지의 여부를 설정 할 수있습니다.
- 텍스트 편지는 최소 30자 최대 1000자까지 입력 할 수 있으며, 편지를 발송하기 전 KMP 알고리즘을 사용한 유해성 검사를 진행 합니다.
- 그림 편지는 다양한 그림판 옵션(펜의 색상, 펜의 굵기, 지우개)을 지원하며, 편지를 발송하기 전 Google cloud vision api를 사용하여 유해성 검사를 진행합니다.
- 편지 받기
- 바다에 떠다니는 편지를 받을 수 있으며, 받은 편지가 마음에 들 시 보관함에 보관할 수 있습니다. (답장이 필요 없는 편지 한정)
- 받은 편지의 내용을 다른 사람과도 공유하고 싶거나, 답장이 어려울 경우 바다에 다시 띄울 수 있습니다. (다시 띄워진 편지는 여러 번 띄우지는 경우 자동으로 소멸됩니다.)
- 편지의 내용이 부적절할 시 신고 기능을 사용할 수 있습니다.
- 마이페이지
- 수집한 편지함에서 내가 수집한 편지 목록을 확인하고 수집한 편지의 상세조회 및 삭제를 할 수 있습니다.
- 답장 받은 편지함에서 내가 쓴 편지에 대한 답장을 확인할 수 있으며 답장의 상세조회, 삭제 및 신고 기능을 사용할 수 있습니다.
- 개인설정
- 사용자의 나이대를 설정할 수 있습니다.
- 회원 탈퇴를 진행할 수 있습니다.
- 관리자
- 편지 신고 관리를 통해 신고된 편지를 확인하고 신고 처리 및 반려를 진행할 수 있습니다.
- 오늘의 질문 답변 신고 관리를 통해 신고된 답변을 확인하고 신고 처리 및 반려를 진행할 수 있습니다. (3회 이상 신고 처리 누적 시 사용자는 자동으로 계정 정지에 들어갑니다.)
- 사용자 관리를 통해 전체 사용자의 목록을 조회하며, 사용자의 권한을 관리할 수 있습니다.
- 오늘의 질문 관리의 캘린더를 사용하여 해당 날짜의 오늘의 질문을 등록할 수 있습니다.
 |
 |
 |
|---|---|---|
| HTML5 | CSS3 | Javascript |
 |
 |
|---|---|
| React | Recoil |
 |
 |
|---|---|
| Styled-Component | Axios |
 |
 |
 |
 |
|---|---|---|---|
| Java | Spring-Boot | SpringSecurity | Hibernate |
 |
 |
 |
|---|---|---|
| Redis | Firebase | MySQL |
 |
 |
 |
 |
 |
|---|---|---|---|---|
| NGiNX | aws | Jenkins | docker | SonarQube |
- aos 2.3.4
- axios 0.27.2
- firebase 9.13.0
- moment 2.29.4
- react 17.0.2
- react-calendar 4.0.0
- react-color 2.19.3
- react-dom 17.0.2
- react-router-dom 6.4.2
- react-scroll-to-top 3.0.0
- react-slick 0.29.0
- recoil 0.7.6
- recoil-persist 4.2.0
- styled-components 5.3.6
- sweetalert2 11.6.2
- Java 1.8
- SpringBoot 2.7.1
- SpringSecurity 2.7.1
- jjwt 0.11.2
- Hibernate 5.6.9.Final
- redis
- MySQL
- google-cloud-vision 26.1.3
- kakao login
PORT |
이름 |
|---|---|
| 80 | HTTP, nginx |
| 443 | HTTPS |
| 3306 | MySQL |
| 6379 | Redis |
| 8080 | SpringBoot API Server |
| 9000 | SonarQube |
| 9090 | Jenkins |
|
|
|
|
|
|
김보연 (Frontend) |
조민규 (Frontend) |
김강호 (Backend) |
박기윤 (Backend) |
이상우 (Backend) |
이름 |
역할 |
개발 내용 |
|---|---|---|
| 김보연 | Frontend 팀장 |
- 편지받기, 마이페이지의 와이어 프레임 작성 및 디자인 구현 - 모바일, 태블릿, 데스크탑 환경을 고려한 반응형 웹 작성 - Atomic Design을 이용한 Component 구성 및 재사용성 확장 - Recoil을 이용한 상태관리 및 사용자의 동작에 따른 분기 처리 - Recoil-persist를 이용한 사용자의 비 정상적 접근 , 오류, 등에대한 예외처리 - Styled-Component를 이용한 동적 스타일링 및 Component화 - 편지 받기 애니메이션 및 기능 구현 - Nested Routes 기능을 이용한 보관함, 개인설정 기능 구분 - 연령대 설정 기능 및 회원 탈퇴 기능 구현 - 편지 보관함 페이지 구현 |
| 조민규 | Frontend | - Styled-Component를 이용한 CSS-in-JS 방식으로 스타일링 작업 - 미디어 쿼리를 활용한 반응형 웹 디자인 - Atom 공통 컴포넌트 구현(버튼, 체크박스, 드롭다운, 입력창, 모달, 텍스트) - 헤더, SlideMenu 컴포넌트 구현 - 로딩 스피너 구현 - 로그인 - 카카오 소셜 로그인 구현 - 로그인 - Recoil을 활용한 회원 정보 상태 관리 - 로그인 - Axios Interceptor를 활용한 access token 관리, 만료 시 재발급 로직 구현 - 오늘의질문 답변 조회, 신고 기능 개발 - 페이지 개발 (편지 쓰기, 편지 답장, 관리자) - 편지 쓰기 - 텍스트 편지 기능 개발 - 편지 쓰기 - html canvas element를 활용한 도화지 편지 기능 개발 - 편지 쓰기 - 옵션 기능 개발 - 편지 쓰기 - canvas 이미지 firebase storage 저장 및 로드 기능 구현 - 관리자 - 편지 및 오늘의질문 답변 신고 관리 구현 - 관리자 - 가입된 사용자 관리 구현 - 관리자 - react-slick 라이브러리를 활용한 캘린더 형태의 오늘의질문 관리 구현 |
| 김강호 | Backend Infra |
- Infra : Jenkins 활용, CI/ CD 환경 구축 - Infra : Dockerfile 및 Jenkinsfile 스크립트 활용, 자동 배포 구축 - Infra : AWS서버 Nginx 구축 및 ssl 인증 - Infra : Docker image & container 생성 및 환경 구축 - Infra : MySQL, Redis 구축 - API : 오늘의 질문 기능 개발 - API : 오늘의 질문 답변 기능 개발 - API : 오늘의 질문 신고 기능 개발 - Test : SonarQube 환경 구축, BE, FE 정적 코드 분석 실행 - Test : Jmeter 부하 테스트 |
| 박기윤 | Backend | - OAuth2.0 이용하여 카카오 로그인/회원가입 구현 - Spring Security, JWT를 이용한 토큰 기반 인증 구현, refresh token을 활용한 로그인 상태 유지, 회원 권한에 따른 접근 제어 - 회원 기능 : User 관련 Entity 작성, 닉네임 랜덤 생성 api 호출 - 마이페이지 기능 : 회원 연령대 수정, 회원 탈퇴 기능 관리자 기능 : 사용자 목록 조회 및 권한 부여, 오늘의 질문 관리 기능, 편지 및 오늘의 답변 신고 목록 조회, 신고 및 신고 반려 처리 |
| 이상우 | Backend | - 도메인 설계 및 구현 - 편지 쓰기 API : 텍스트 및 그림 편지 쓰기 기능 구현 - 띄워진 편지 API : 띄우진 편지 개수 조회, 떠다는 편지 받기, 편지 다시 띄우기 기능 구현 - 답장 편지 API : 받은 편지 답장, 새로운 답장 푸시 알림, 답장 받은 편지 목록 조회, 답장 받은 편지 상세 조회, 답장 받은 편지 삭제 기능 구현 - 수집한 편지 : 받은 편지 수집하기, 수집한 편지 목록 조회, 수집한 편지 상세 조회, 수집한 편지 삭제하기 기능 구현 - 유해성 검사 Redis set 생성 API 구현 - Redis와 KMP 알고리즘을 이용한 텍스트 편지 유해성 검사 API 구현 - Google Cloud Vision API의 Safe Search를 활용한 이미지 편지 유해성 검사 API 구현 |
feat/[닉네임]/[issue 번호]- ex) 김강호 작성시, feat/kh/3
- Title - [FE] 로그인 페이지 구현
- Type - ISSUE
- 설명 - 로그인 INPUT 작성 / 로그인 버튼 클릭시 이벤트 등 자유 양식으로 설명 적기
- Label - 중복으로 선택이 가능하니, 알아서 선택해서 작성하기
- ex. feat 선택
- 완료 클릭
- 이슈 목록에서 할당된 이슈번호 확인 후
머지리퀘스트 만들기클릭하여 주어진 이슈 번호 확인
feat:- 새로운 기능 추가
- ex) feat: 이메일 인증
refactor:- 코드 리팩토링
chore:- (코드의 수정 없이) 설정 변경
fix:- 버그 수정
style:- 코드 스타일 변경
docs:- 문서의 등록 및 수정
test:- 테스트
frontend
├─📦public
│ └─📂assets
│ ├─📂images
│ │ ├─📂auth
│ │ ├─📂common
│ │ ├─📂letter
│ │ ├─📂mainpage
│ │ └─📂mypage
│ ├─📂logo
│ └─📂video
├─📦src
│ ├─📂api
│ ├─📂components
│ │ ├─📂atoms
│ │ │ ├─📂landing
│ │ │ ├─📂letter
│ │ │ └─📂mypage
│ │ ├─📂molecules
│ │ │ ├─📂landing
│ │ │ ├─📂letter
│ │ │ └─📂mypage
│ │ ├─📂organisms
│ │ │ ├─📂landing
│ │ │ └─📂mypage
│ │ └─📂templates
│ │ └─📂admin
│ ├─📂constants
│ ├─📂pages
│ │ ├─📂admin
│ │ ├─📂error
│ │ ├─📂landing
│ │ ├─📂letter_read
│ │ ├─📂letter_write
│ │ └─📂mypage
│ ├─📂recoil
│ ├─📂styles
│ │ └─📂fonts
│ └─📂utils
│ └─📂validation
├─📜.env
├─📜.firebaserc
├─📜.gitignore
├─📜Dockerfile
├─📜firebase.json
├─📜firestore.indexes.json
├─📜nginx.conf
├─📜package-lock.json
├─📜package.json
└─📜storage.rules
backend
└─📦da_ta
├─📦gradle/wrapper
├─📦src
│ ├─📂main
│ │ ├─📂java
│ │ └─📂com/da_ta/backend
│ │ │ ├─📂account
│ │ │ │ ├─📂admin
│ │ │ │ │ ├─📂controller
│ │ │ │ │ │ └─📂dto
│ │ │ │ │ └─📂service
│ │ │ │ ├─📂jwt
│ │ │ │ └─📂user
│ │ │ │ ├─📂controller
│ │ │ │ │ └─📂dto
│ │ │ │ ├─📂domain
│ │ │ │ │ ├─📂entity
│ │ │ │ │ └─📂repository
│ │ │ │ └─📂service
│ │ │ ├─📂common
│ │ │ │ ├─📂config
│ │ │ │ ├─📂controller
│ │ │ │ └─📂domain
│ │ │ │ └─📂exception
│ │ │ ├─📂config
│ │ │ ├─📂letter
│ │ │ │ ├─📂controller
│ │ │ │ │ └─📂dto
│ │ │ │ ├─📂domain
│ │ │ │ │ ├─📂entity
│ │ │ │ │ └─📂repository
│ │ │ │ └─📂service
│ │ │ ├─📂question
│ │ │ │ ├─📂controller
│ │ │ │ │ └─📂dto
│ │ │ │ ├─📂domain
│ │ │ │ │ ├─📂entity
│ │ │ │ │ └─📂repository
│ │ │ │ └─📂service
│ │ │ └─📂util
│ │ └─📂resources
│ │ ├─📜application.oauth.properties
│ │ ├─📜application.properties
│ │ ├─📜env.properties
│ | └─📜data.sql
│ └─📂test/java/com/da_ta/backend
├─📜build.gradle
├─📜Dockefile
├─📜gradlew
├─📜gradlew.bat
├─📜Jenkinsfile
└─📜setting.gradle
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent