개발자 otcroz(유수연)의 레포지토리입니다.
프로젝트 소개와 함께 제가 담당한 기능과 트러블슈팅을 담았습니다.

---

뭉게뭉게, 뭉치자 투게더!

#저학년 아동 SNS 교육 #SNS 플랫폼

SNS를 처음 접하는 저학년 아동에게 개인정보 보호의 중요성과 비속어 사용의 부적절함을 인지하도록 교육하여
건강한 SNS 사용을 위해 도움을 주는 서비스, 뭉게뭉게입니다.

• 덕성여자대학교 컴퓨터공학전공 개발 소모임 Corner 2023년 제2회 코너 팀 프로젝트
  
• 2023 ICT멘토링 한이음 공모전 출품작
  
• 개발 기간: 2023.02 ~ 2023.11
• 개발 인원: 4명(Team Leader)
  
• 담당 스택: React-Native Spring Boot koBERT YOLOv5 ChatGPT

Preview

✨담당 기능

포스팅: 갤러리에서 이미지 선택	포스팅: 게시글 작성
갤러리에서 사진을 선택 후 개인정보가 드러날만한 객체가 있는지 검사. 로딩 애니메이션 구현	게시글 작성 후 텍스트에서 욕설 또는 개인정보가 있는지 검사. 욕설 또는 개인정보가 있을 경우 수정/삭제 알림

업적 페이지 화면, 뱃지 디자인	마이페이지
사용자가 달성한 업적과 모은 뱃지 확인	사용자가 작성한 게시글 확인. 이외에도 프로필 수정, 친구 목록, 포스트 상세, 뱃지 목록으로 이동할 수 있음

이외의 구현한 기능

• Fetch, React query를 사용하여 API 통신 코드를 작성했으며, 사용자 경험을 개선하기 위해 반응형 디자인 구현
• Spring Boot 서버 구축: 엔티티 설계 및 Data JPA를 사용한 API 작성
• 게시글 내 욕설 탐지 및 순화어 제안 알고리즘 개발(koBERT, TEXT LIME)
• 개인정보가 포함된 객체 이미지를 마스킹하는 알고리즘 개발(Yolov5)
• 서로 다른 성격의 4가지 AI봇을 제작하여 사용자에게 다채로운 댓글 제공과 상호작용

🚨Trouble Shotting

1. 게시글 포스팅: 이미지 마스킹과 욕설 및 개인정보 텍스트 탐지 로딩 시간

1. 이미지 마스킹 결과, 텍스트 탐지 결과가 나오기까지 오래걸리는 문제

• 💡 사용자가 오랫동안 기다려야 하는 단계에서 Animated를 사용하여 사용자에게 기능이 수행중임을 인지하도록 구현
• 💡 AI 서버에서 불필요한 코드를 줄여서 텍스트 탐지 및 검출 실행시간을 3초(15s → 12s, 2~3문장 기준) 줄임
• 📚 공부: Reanimated vs Animated

2. 마이페이지: 유저 정보와 게시글이 즉각적으로 업데이트되지 않는 문제

• 💡 react-query에서 제공하는 useMutation에서 onMutate를 호출하여 즉각적인 화면의 업데이트를 실행
• 💡 rollback 함수를 구현하여 만약 업데이트가 성공적으로 이루어지지 않았을 경우 화면이 변경되지 않도록 구현

---

Installation

Setup

For building and running the application you need:

• Node.js 16.17.0
• Python 3.10.0
• Npm 8.15.0

Client

$ git clone https://github.com/DS-Narsha/front-end.git
$ cd narsha_front
$ nvm install 16.17.0
$ npm i
$ npm start:dev