README.md

🌊🐋 닿다 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