Skip to content

Client, 저학년 아동의 건강한 SNS 사용을 위한 SNS 교육 애플리케이션: 뭉게뭉게

Notifications You must be signed in to change notification settings

DS-Narsha/front-end

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 

Repository files navigation

App service introduction

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

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

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

Introduction

덕성여자대학교 컴퓨터공학전공 개발 소모임 Corner 2023년 제2회 코너 팀 프로젝트
2023 ICT멘토링 한이음 공모전 출품작
개발 기간: 2023.02 ~

Link

Figma: Go to Figma Project
API Docs: Go to API Docs
ERDCloud: Go to ERDCloud
Project Schedule: Go to Project Schedule

Repository

Client: https://github.com/DS-Narsha/front-end
Spring boot server: https://github.com/DS-Narsha/back-end
Flask server: https://github.com/DS-Narsha/AI-server

Table of contents

We are Team, Narsha!

team logo
팀 나르샤는 "목표를 향해 날아오르다."는 팀의 의지를 담고 있습니다.

유수연 박유나 서지혜 오지
유수연(팀장) 박유나(팀원) 서지혜(팀원) 오지연(팀원)
@otcroz @pyounani @Jihye0623 @ninano05
Client, Server, AI Client, Server, AI Client, Server, AI Client, Server, AI

Preview

Features

  • 학급 단위 유저 관리

    • 선생님 1명, 학생 n명으로 이루어진 그룹 단위
    • 선생님은 계정 생성 후, 그룹을 생성한다.
    • 학생은 계정 생성 후, 선생님께 받은 그룹 코드로 그룹을 가입한다.
  • 사용자 간 상호작용을 위한 SNS 기능

    • 게시글 포스팅, 댓글 작성, 좋아요 등록 등 사용자 간 상호작용을 위한 기능을 제공한다.
    • 업적/뱃지 기능을 제공하여 서비스 기능을 익히고 SNS 상호작용을 유도한다.
  • 포스팅할 사진에 개인정보가 포함된 객체 여부 검사

    • 사용자가 선택한 사진에 대해 개인정보가 포함된 객체 여부를 검사한다.
    • 해당 객체가 포함되었을 경우 모자이크 처리 후 처리 목록과 함께 제공한다.
    • 모델은 NTIS의 개인정보 영향도 등급에 따라 주민등록번호, 여권, 운전면허증, 신용카드를 탐지하도록 학습했다.
  • 작성한 글의 내용에 비속어 및 개인정보 포함 여부 검사

    • 사용자가 작성한 글(게시글, 댓글)에 대해 비속어 및 개인정보 포함 여부를 검사한다.
    • 비속어가 포함되었을 경우 단어를 수정할 것을 제안함과 동시에 대체할 순화어를 제공한다.
    • 비속어가 포함되었지만 모델이 특정 단어를 탐지하지 못할 경우 전체 문장을 수정할 것을 제안한다.
    • 개인정보가 포함되었을 경우 삭제할 것을 제안한다.
  • 뭉게뭉게의 마스코트, AI봇 둥실이

    • 서로 다른 성격의 4가지 AI봇을 제작하여 사용자에게 다채로운 댓글과 상호작용을 제공한다.
    • 사용자가 게시글을 작성하고 업로드하면 AI봇 둥실이가 댓글을 달아준다.
    • 댓글은 4가지 AI봇 중 랜덤으로 제공된다.
    • AI봇은 댓글을 생성할 때 글의 내용, 이미지, 글의 내용+이미지 총 3가지의 로직 중 임의의 로직을 적용한다.
  • 앱 사용시간 관리

    • 선생님은 앱 내에서 학생들의 앱 사용 시간을 설정한다.
    • 학생은 선생님이 설정한 앱 사용시간 범위 내에서 서비스를 사용할 수 있다.

Tech stack


Client:
Server:
AI-Server:
Deploy:

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

Project Structure

📦 front-end
└─ narsha_front
   ├─ .eslintrc.
   ├─ .gitignore
   ├─ .prettierrc.js
   ├─ .vscode
   │  └─ settings.json
   ├─ Achievement.js
   ├─ App.tsx
   ├─ android
   │  ├─ app
   │  │  ├─ build.gradle
   │  │  ├─ debug.keystore
   │  │  ├─ proguard-rules.pro
   │  │  └─ src
   │  │     ├─ debug
   │  │     │  ├─ AndroidManifest.xml
   │  │     │  └─ java
   │  │     │     └─ com
   │  │     │        └─ narsha_front
   │  │     │           └─ ReactNativeFlipper.java
   │  │     ├─ main
   │  │     │  ├─ AndroidManifest.xml
   │  │     │  ├─ assets
   │  │     │  │  └─ fonts
   │  │     │  │     ├─ NanumSquareB.ttf
   │  │     │  │     └─ NanumSquareR.ttf
   │  │     │  ├─ java
   │  │     │  │  └─ com
   │  │     │  │     └─ narsha_front
   │  │     │  │        ├─ MainActivity.java
   │  │     │  │        ├─ MainApplication.java
   │  │     │  │        └─ SplashActivity.java
   │  │     │  └─ res
   │  │     │     ├─ drawable
   │  │     │     │  ├─ rn_edit_text_material.xml
   │  │     │     │  └─ splash_bg.jpg
   │  │     │     └─ layout
   │  │     │        └─ launch_screen.xml
   │  │     └─ release
   │  │        └─ java
   │  │           └─ com
   │  │              └─ narsha_front
   │  │                 └─ ReactNativeFlipper.java
   │  ├─ build.gradle
   │  ├─ gradle.properties
   │  ├─ gradle
   │  │  └─ wrapper
   │  │     ├─ gradle-wrapper.jar
   │  │     └─ gradle-wrapper.properties
   │  ├─ gradlew
   │  ├─ gradlew.bat
   │  └─ settings.gradle
   ├─ app.json
   ├─ babel.config.js
   ├─ declarations.d.ts
   ├─ index.js
   ├─ ios
   │  ├─ .xcode.env
   │  ├─ Podfile
   │  ├─ narsha_front.xcodeproj
   │  │  ├─ project.pbxproj
   │  │  └─ xcshareddata
   │  │     └─ xcschemes
   │  │        └─ narsha_front.xcscheme
   │  ├─ narsha_front
   │    ├─ AppDelegate.h
   │    ├─ AppDelegate.mm
   │    ├─ Images.xcassets
   │    │  ├─ AppIcon.appiconset
   │    │  │  └─ Contents.json
   │    │  └─ Contents.json
   │    ├─ Info.plist
   │    ├─ LaunchScreen.storyboard
   │    └─ main.m
   │       
   ├─ metro.config.js
   ├─ package-lock.json
   ├─ package.json
   ├─ react-native-config.d.ts
   ├─ src
   │  ├─ assets
   │  ├─ components
   │  │  ├─ AchieveItem.tsx
   │  │  ├─ CustomButton.tsx
   │  │  ├─ GroupButton.tsx
   │  │  ├─ MultiTextInput.tsx
   │  │  ├─ MyTextInput.tsx
   │  │  ├─ SingleBadge.tsx
   │  │  ├─ SingleInfo.tsx
   │  │  ├─ SingleTextInput.tsx
   │  │  ├─ TimePicker.tsx
   │  │  ├─ animation
   │  │  │  ├─ ImageCards.tsx
   │  │  │  ├─ LoadingCloud.tsx
   │  │  │  └─ ReadingGlasses.tsx
   │  │  ├─ modal
   │  │  │  ├─ CommentFilterModal.tsx
   │  │  │  ├─ CommentLoadingModal.tsx
   │  │  │  ├─ GroupCodeModal.tsx
   │  │  │  ├─ GroupDeleteModal.tsx
   │  │  │  ├─ NoticeModal.tsx
   │  │  │  ├─ StudentListModal.tsx
   │  │  │  ├─ WriteFilterModal.tsx
   │  │  │  ├─ WriteImageGuideModal.tsx
   │  │  │  └─ WriteTextLoadingModal.tsx
   │  │  ├─ navigation
   │  │  │  ├─ AchieveStack.tsx
   │  │  │  ├─ AlarmStack.tsx
   │  │  │  ├─ AuthStack.tsx
   │  │  │  ├─ FriendStack.tsx
   │  │  │  ├─ MainNavigator.tsx
   │  │  │  ├─ MainStack.tsx
   │  │  │  ├─ MyPageStack.tsx
   │  │  │  ├─ PostStack.tsx
   │  │  │  └─ Routes.tsx
   │  │  └─ post
   │  │     └─ MainPost.tsx
   │  ├─ data
   │  │  ├─ AchieveData.json
   │  │  ├─ BadgeSources.js
   │  │  ├─ GuideData.json
   │  │  └─ objectLabel.json
   │  ├─ pages
   │  │  ├─ AchievePage.tsx
   │  │  ├─ AlarmPage.tsx
   │  │  ├─ Comment
   │  │  │  ├─ CommentListPage.tsx
   │  │  │  └─ Loading.tsx
   │  │  ├─ GuidePage.tsx
   │  │  ├─ Like
   │  │  │  └─ LikeListPage.tsx
   │  │  ├─ MainPage.tsx
   │  │  ├─ NotAvailablePage.tsx
   │  │  ├─ NoticeListPage.tsx
   │  │  ├─ NoticeWritePage.tsx
   │  │  ├─ PostDetailPage.tsx
   │  │  ├─ SignUp
   │  │  │  ├─ Admin
   │  │  │  │  ├─ GroupPage.tsx
   │  │  │  │  └─ SignUpPage.tsx
   │  │  │  ├─ InputUserInfoPage.tsx
   │  │  │  ├─ SelectUserTypePage.tsx
   │  │  │  ├─ User
   │  │  │  │  └─ InputGroupPage.tsx
   │  │  │  ├─ UserPageModal.tsx
   │  │  │  └─ login
   │  │  │     ├─ LoginPage.tsx
   │  │  │     └─ SelectGroupPage.tsx
   │  │  ├─ StartPage.tsx
   │  │  ├─ StudentListPage.tsx
   │  │  ├─ TeacherMenuPage.tsx
   │  │  ├─ TimeSelectPage.tsx
   │  │  ├─ friendpage
   │  │  │  ├─ FriendBadgeListPage.tsx
   │  │  │  ├─ FriendPage.tsx
   │  │  │  └─ FriendPostDetailPage.tsx
   │  │  ├─ mypage
   │  │  │  ├─ BadgeListPage.tsx
   │  │  │  ├─ EditProfilePage.tsx
   │  │  │  ├─ FriendListPage.tsx
   │  │  │  └─ MyPage.tsx
   │  │  └─ post
   │  │     ├─ PostLoadingPage.tsx
   │  │     ├─ PostPage.tsx
   │  │     ├─ SelectImagePage.tsx
   │  │     └─ WritePage.tsx
   │  └─ utils
   │     └─ pushNoti.tsx
   ├─ tsconfig.json
   └─ yarn.lock

About

Client, 저학년 아동의 건강한 SNS 사용을 위한 SNS 교육 애플리케이션: 뭉게뭉게

Topics

Resources

Stars

Watchers

Forks

Contributors 4

  •  
  •  
  •  
  •  

Languages