🌊🐋 닿다 DA-TA 🐋🌊

💁 웹 서비스 소개

닿다 (DA-TA) 는 유리병 편지를 모티브로 한 1:1 랜덤 익명 편지 서비스입니다.

텍스트 혹은 그림 형태의 편지를 작성하여 무작위 1명에게 전송할 수 있으며,
다른 사람이 작성한 편지에 대해 1회성으로 답장을 보내거나 보관하여 간직할 수 있습니다.

🔗 서비스 소개 영상 바로가기 Click ! 👈

🔗 시연 시나리오 바로가기 Click ! 👈

새 창 열기 방법 : CTRL+click (on Windows and Linux) | CMD+click (on MacOS)

📅 개발 기간

2022.10.11. ~ 2022.11.18.

🔥 주요 기능

메인 화면
- 바다에 띄워진 편지의 개수를 확인할 수 있습니다.
- 소셜(카카오) 로그인을 통하여 서비스를 이용 할 수 있습니다.
- 최초 로그인 시 자동으로 닉네임을 생성하여 줍니다.
오늘의 질문 & 답변
- 메인화면의 물병을 클릭하여 오늘의 질문을 확인할 수 있습니다.
- 답변하기 버튼을 클릭하여 오늘의 질문에 대한 나의 생각을 공유할 수 있습니다.
- 다른 답변 보기 버튼을 클릭하여 다른 사용자들의 답변을 확인하며, 내용이 부적절할 시 신고 기능을 사용할 수 있습니다.
편지 쓰기
- 편지 공통 옵션으로 원하는 편지지 및 글씨체를 선택, 수신자의 연령대를 설정, 답장을 받을지의 여부를 설정 할 수있습니다.
- 텍스트 편지는 최소 30자 최대 1000자까지 입력 할 수 있으며, 편지를 발송하기 전 KMP 알고리즘을 사용한 유해성 검사를 진행 합니다.
- 그림 편지는 다양한 그림판 옵션(펜의 색상, 펜의 굵기, 지우개)을 지원하며, 편지를 발송하기 전 Google cloud vision api를 사용하여 유해성 검사를 진행합니다.
편지 받기
- 바다에 떠다니는 편지를 받을 수 있으며, 받은 편지가 마음에 들 시 보관함에 보관할 수 있습니다. (답장이 필요 없는 편지 한정)
- 받은 편지의 내용을 다른 사람과도 공유하고 싶거나, 답장이 어려울 경우 바다에 다시 띄울 수 있습니다. (다시 띄워진 편지는 여러 번 띄우지는 경우 자동으로 소멸됩니다.)
- 편지의 내용이 부적절할 시 신고 기능을 사용할 수 있습니다.
마이페이지
- 수집한 편지함에서 내가 수집한 편지 목록을 확인하고 수집한 편지의 상세조회 및 삭제를 할 수 있습니다.
- 답장 받은 편지함에서 내가 쓴 편지에 대한 답장을 확인할 수 있으며 답장의 상세조회, 삭제 및 신고 기능을 사용할 수 있습니다.
- 개인설정
  - 사용자의 나이대를 설정할 수 있습니다.
  - 회원 탈퇴를 진행할 수 있습니다.
관리자
- 편지 신고 관리를 통해 신고된 편지를 확인하고 신고 처리 및 반려를 진행할 수 있습니다.
- 오늘의 질문 답변 신고 관리를 통해 신고된 답변을 확인하고 신고 처리 및 반려를 진행할 수 있습니다. (3회 이상 신고 처리 누적 시 사용자는 자동으로 계정 정지에 들어갑니다.)
- 사용자 관리를 통해 전체 사용자의 목록을 조회하며, 사용자의 권한을 관리할 수 있습니다.
- 오늘의 질문 관리의 캘린더를 사용하여 해당 날짜의 오늘의 질문을 등록할 수 있습니다.

🛠 기술 스택

Front-end


HTML5	CSS3	Javascript


React	Recoil


Styled-Component	Axios

Back-end


Java	Spring-Boot	SpringSecurity	Hibernate


Redis	Firebase	MySQL

DevOps


NGiNX	aws	Jenkins	docker	SonarQube

Frontend Libraries & Tools

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

Backend Libraries & Tools

Java 1.8
SpringBoot 2.7.1
SpringSecurity 2.7.1
jjwt 0.11.2
Hibernate 5.6.9.Final
redis
MySQL

API

google-cloud-vision 26.1.3
kakao login

EC2 포트 정리

PORT	이름
80	HTTP, nginx
443	HTTPS
3306	MySQL
6379	Redis
8080	SpringBoot API Server
9000	SonarQube
9090	Jenkins

📂 프로젝트 아키텍쳐

📑ERD

👪 개발 팀 소개


김보연 (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 구현

커밋 규칙

Git Flow 관련 작성법

feat/[닉네임]/[issue 번호]
- ex) 김강호 작성시, feat/kh/3

Gitlab에서 Issue 작성 규칙

Title - [FE] 로그인 페이지 구현
Type - ISSUE
설명 - 로그인 INPUT 작성 / 로그인 버튼 클릭시 이벤트 등 자유 양식으로 설명 적기
Label - 중복으로 선택이 가능하니, 알아서 선택해서 작성하기
- ex. feat 선택
완료 클릭
이슈 목록에서 할당된 이슈번호 확인 후 머지리퀘스트 만들기 클릭하여 주어진 이슈 번호 확인

Git commit type

feat:
- 새로운 기능 추가
- ex) feat: 이메일 인증
refactor:
- 코드 리팩토링
chore:
- (코드의 수정 없이) 설정 변경
fix:
- 버그 수정
style:
- 코드 스타일 변경
docs:
- 문서의 등록 및 수정
test:
- 테스트

프로젝트 디렉토리 구조

Frontend

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

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

Name	Name	Last commit message	Last commit date
Latest commit swoody1101 Merge branch 'develop' of https://lab.ssafy.com/s07-final/S07P31B106 … Nov 23, 2022 78ebec9 · Nov 23, 2022 History 1,173 Commits
backend	backend	chore: 구글 api key 삭제	Nov 23, 2022
exec	exec	업데이트 README.md	Nov 23, 2022
frontend	frontend	fix: console 제거	Nov 20, 2022
README.md	README.md	업데이트 README.md	Nov 23, 2022
package-lock.json	package-lock.json	frontend initial	Oct 24, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

🌊🐋 닿다 DA-TA 🐋🌊

💁 웹 서비스 소개

📅 개발 기간

🔥 주요 기능