Skip to content

Latest commit

 

History

History
196 lines (161 loc) · 10.2 KB

README.md

File metadata and controls

196 lines (161 loc) · 10.2 KB
Raw

소개이미지

프로젝트 개요

속마음을 담은 일기 교환을 통해 현대인의 소외감 해소를 돕는 교환일기 웹 서비스 <비밀친구>

💚 이화여대 컴퓨터공학전공 캡스톤 졸업프로젝트
💚 개발 기간: 2024.02 ~ 2024.06

💬 우울증 환자가 증가하는 상황으로 특히 10대부터 20대까지의 우울감 및 소외감에 집중해서 이러한 사회적 문제를 해결하고자 프로젝트를 시작했다. SNS 시장 조사 결과 개인의 진솔한 이야기를 이끌어내는 소통창구가 될만한 서비스가 부재한 상황이라 판단했고 깊은 이야기를 나눌 수 있는 소통창구로서 교환일기 웹 서비스를 고안했다.

💬 기존에 존재하는 일기 서비스와는 다르게 익명의 유저와 일기를 공유할 수 있는 랜덤 매칭 기능을 제공하며 사용자들이 작성한 일기에 대한 감정 분석 레포트를 제공한다.

팀원 소개

🦝 곽민지
백엔드
:octocat: GitHub
🐸 조아령
프론트엔드
:octocat: GitHub
🦦 황채린 (팀장)
백엔드
:octocat: GitHub

백엔드 레포지토리 바로가기

배포 주소

🔗 https://secret-friends.link

테스트 계정

[email protected]
test123!

🚀 How to start

$ git clone https://github.com/Dallili/BeMeeelFriend_front.git
$ cd BeMeeelFriend_front
$ npm install
$ npm start

환경 변수 설정

// .env 
REACT_APP_SERVER_URL=서버 주소
REACT_APP_JAVASCRIPT_KEY=카카오톡 공유 키

⚙️ 기술 스택

Environment

Config

Development

Deploy

주요 화면 및 기능

학창 시절, 사물함을 통해 교환일기를 주고받았던 경험에서 영감을 얻어 캐비닛 모양의 UI로 디자인

📍메인 페이지

  • 답장이 온 일기장을 확인하는 메인 캐비닛
  • 교환 중인 모든 일기를 확인할 수 있는 히스토리 캐비닛
메인 캐비닛 히스토리 캐비닛

📍 일기장 생성

  • 지인 매칭: 사용자는 친구를 초대하거나 초대받아 새로운 일기장 생성 가능
  • 랜덤 매칭: 매칭을 요청한 날짜와 사용자의 1, 2, 3순위 관심사를 기반으로 한 랜덤 매칭 알고리즘을 통해 익명의 사용자와 일기장 생성 가능
1 2 3 4 매칭 대기
지인
매칭
(초대
하기)
랜덤
매칭

📍 일기 조회/작성/전달

  • 일기 작성 후 임시저장이 가능하며 일기 전달 후 감정 분석 레포트로 이동 가능
일기 조회 일기 작성 일기 전달

📍 일기장 비활성화/삭제

  • 일기장을 비활성화 할 수 있으며 비활성화 이후 일기장 완전히 삭제 가능
비활성화 모달 비활성화 일기장 관리 일기장 삭제

📍 감정 분석 레포트

  • 매우 긍정/긍정/보통/부정/매우 부정 중 하나로 분류한 결과를 제공
  • 사용자의 일기 내용 및 분위기에 어울리는 색상 코드로 하루를 표현
  • ‘<상황이나 사건>에 대한 <감정>’ 형식으로 한 줄 요약 제공
감정 분석 레포트 일기 조회 화면에서 이동

📍 비속어 필터링

  • 필터링 설정 시 비속어 * 처리

📍 실시간 알림

  • [일기장 생성], [일기장 비활성화], [상대방으로부터 일기 답장] 이벤트 발생 시 해당 내용에 대한 실시간 푸시 알림 제공

디렉토리 구조

📦src
 ┣ 📂api <- api 모음
 ┣ 📂components <- 컴포넌트
 ┣ 📂hooks <- 커스텀 훅
 ┣ 📂img <- 사용한 이미지
 ┣ 📂pages <- 기능 별 페이지
 ┃ ┣ 📂Diarys
 ┃ ┃ ┣ 📜CreateDiaryPage.js
 ┃ ┃ ┣ 📜DeleteDiaryPage.js
 ┃ ┃ ┣ 📜DiaryDonePage.js
 ┃ ┃ ┣ 📜DisabledDiaryPage.js
 ┃ ┃ ┣ 📜EmotionReport.js
 ┃ ┃ ┣ 📜EmotionReport.scss
 ┃ ┃ ┣ 📜ReadDiaryPage.js
 ┃ ┃ ┣ 📜SendDiaryPage.js
 ┃ ┃ ┗ 📜WriteDiaryPage.js
 ┃ ┣ 📂Login
 ┃ ┃ ┗ 📜LoginPage.js
 ┃ ┣ 📂Main
 ┃ ┃ ┣ 📜HistoryCabinetPage.js
 ┃ ┃ ┣ 📜LoadingPage.js
 ┃ ┃ ┣ 📜MainPage.js
 ┃ ┃ ┣ 📜MainPage.scss
 ┃ ┃ ┗ 📜NotifyPage.js
 ┃ ┣ 📂Settings
 ┃ ┃ ┣ 📜AnnouncementDetailPage.js
 ┃ ┃ ┣ 📜AnnouncementPage.js
 ┃ ┃ ┣ 📜InquiryPage.js
 ┃ ┃ ┣ 📜PasswordChangePage.js
 ┃ ┃ ┣ 📜ProfileEditPage.js
 ┃ ┃ ┣ 📜SettingsMenuPage.js
 ┃ ┃ ┣ 📜UserGuide.scss
 ┃ ┃ ┣ 📜UserGuidePage.js
 ┃ ┃ ┣ 📜UserReportPage.js
 ┃ ┃ ┗ 📜WithdrawalPage.js
 ┃ ┣ 📂SignUp
 ┃ ┃ ┗ 📜SignupPage.js
 ┣ 📂recoil
 ┣ 📂router 
 ┣ 📜App.js
 ┣ 📜index.js
 ┣ 📜index.scss
 ┗ 📜_utils.scss