Skip to content

온라인 메모장 📝

공동 작성이 가능한 메모장 서비스
FullStack Repo »
Refactor Ver.2 »


 📖 목차
  1.   🔍 Introduction
  2.   📹 Demo
  3.   👨‍👩‍👦‍👦 Launch
  4.   💻 Architecture
  5.   💡 Tech Stack
  6.   🗂️ Database
  7.   📗 API
  8.   🛠️ Log
  9.   📂 Directory Structure
  10.   👨‍👩‍👧‍👧 Team

🔍 Introduction

주제 선정

기존의 메모장들에는 잡다한 많은 기능들이 탑재되어있어 사용에 어려움을 느꼈습니다.
이에 본연의 기능을 살리고 남녀노소 누구나 쉽게 이용 가능한 메모장을 만들어보자는 생각에 아이디어를 얻었습니다.

특징

  • 불필요한 기능을 제거하고, 간편하고 직관적인 디자인으로 주요 기능의 접근성을 높였습니다.
    또한 눈이 편안한 색감을 선정하여 귀엽고 심플하게 디자인하였습니다.
  • 개인정보 필요없이 생성할 id와 pw만 입력하여, 쉽고 빠르게 회원가입이 가능합니다.
    이로써 회원가입의 거부감을 줄이고, 어느 기기에서든지 접속하여 계정별로 메모를 관리할 수 있습니다.
  • 여러 사람이 공동으로 메모를 작성 및 관리할 수 있는 '공동 메모' 기능을 추가하였습니다.
    대학생 팀플이나 회의 내용 작성으로도 적합합니다.
  • 광고 삽입은 접근성을 떨어뜨리기에, 수익창출 없이 무료로 이용 가능하도록 하였습니다.

운영

플레이스토어 스크린샷 플레이스토어 PC 스크린샷

📹 Demo

PC Page

Memo list View memo Invite friends
메모들 목록을 나열합니다. 메모 내용을 조회합니다. 메모에 친구들을 초대하거나, 함께 새로운 메모를 작성합니다.

Mobile Page

Login SignUp Change pw
로그인 합니다. 회원가입 합니다. 계정의 비밀번호를 변경합니다.
Memo list New memo View memo
메모들 목록을 나열합니다. 새로운 개인 메모를 작성합니다. 메모 내용을 조회합니다.
Friend list Received list Invite friends
친구들 목록을 나열합니다. 친구요청 수신 목록을 조회합니다. 메모에 친구들을 초대하거나, 함께 새로운 메모를 작성합니다.
User profile Notice App guide
회원정보를 조회합니다. 공지사항 페이지 입니다. 모바일앱 다운로드 안내 페이지 입니다.

👨‍👩‍👦‍👦 Launch

동시접속 트래픽

테스터 트래픽
웹과 앱 분야에 모두 테스터를 모집하여, 특정 시간대 10분 동안의 동시접속 트래픽 변화를 측정하였습니다. 테스터 30명의 동시접속 결과, CPU 사용률이 0.7%->6%까지 올랐음을 확인했습니다. 이로써 최대 500명의 동시접속 시 CPU 사용률이 100%에 도달할 것임을 알 수 있었고, 인스턴스를 확장함으로써 예방 조치를 취할 수 있었습니다.

마케팅

에브리타임 인스타그램
대학생 커뮤니티에 홍보글을 게시하여, HOT 게시물로 선정되었습니다. SNS에 홍보글을 게시하여, 다양한 연령대의 접근성을 고려했습니다. 그 결과, 100명 이상의 이용자에게 서비스를 제공 중입니다.

💻 Architecture

onlinememo_architecture drawio

< Operational Architecture >
- Frontend Deployment : AWS Amplify
- Backend Deployment : AWS Elastic Beanstalk
- Database : AWS RDS
- DNS : AWS Route53
- Traffic : AWS Application Load Balancer, EC2 Auto Scaling (CPUUtil 30% ~ 70%)
- Monitoring : AWS CloudWatch, Spring Logback, ExceptionHandler
- Version control : AWS S3, Github

💡 Tech Stack

Frontend Backend Security Other







- Frontend : React, React Native, JavaScript
- Backend : Spring Boot, Java, Spring Security, JSON Web Token
- Database : MySQL
- Deployment : Amazon AWS
- API Tool : Postman
- API Documentation : Swagger

🗂️ Database

mysql DB ERD

📗 API

swagger api

🛠️ Log (AWS CloudWatch)

AWS CloudWatch

📂 Directory Structure

 Frontend_Web :  Open!
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
│   ├── memoicon128.png
│   ├── memoicon192.png
│   ├── memoicon512.png
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── assets
    │   ├── fonts
    │   │   ├── BMJUA_ttf.ttf
    │   │   ├── Kalam-Bold.ttf
    │   │   ├── Kalam-Light.ttf
    │   │   └── Kalam-Regular.ttf
    │   └── images
    │       └── user.png
    ├── components
    │   ├── List
    │   │   ├── FriendList.jsx
    │   │   ├── InviteFriendList.jsx
    │   │   ├── MemoList.jsx
    │   │   ├── MemoListItem.jsx
    │   │   ├── SelectFriendList.jsx
    │   │   └── SenderList.jsx
    │   ├── Modal
    │   │   ├── ConfirmModal.jsx
    │   │   ├── FriendGroupModal.jsx
    │   │   └── SendFriendshipModal.jsx
    │   ├── Navigation
    │   │   ├── LoadingNav.jsx
    │   │   ├── NewMemoNav.jsx
    │   │   ├── NoLoginNav.jsx
    │   │   ├── ReadAndEditMemoNav.jsx
    │   │   └── YesLoginNav.jsx
    │   ├── Styled
    │   │   ├── BasicWrapper.jsx
    │   │   ├── HelloWrapper.jsx
    │   │   ├── NavWrapper.jsx
    │   │   └── OneMemoWrapper.jsx
    │   └── UI
    │       ├── Checkbox.jsx
    │       ├── DropdownCenter.jsx
    │       ├── DropdownLeft.jsx
    │       ├── DropdownRight.jsx
    │       ├── FriendOptionDropdownCenter.jsx
    │       ├── IsStarButton.jsx
    │       ├── MemoOptionButton.jsx
    │       ├── MemoOptionDropdownRight.jsx
    │       ├── NewMemoOptionDropdownRight.jsx
    │       ├── SearchMemo.jsx
    │       └── SortMemo.jsx
    ├── hooks
    │   └── useDetectDropdown.jsx
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── pages
    │   ├── Etc
    │   │   ├── DownloadPage.jsx
    │   │   ├── InformationPage.jsx
    │   │   └── NoticePage.jsx
    │   ├── Friend
    │   │   ├── FriendListPage.jsx
    │   │   └── SenderListPage.jsx
    │   ├── Memo
    │   │   ├── MemoListPage.jsx
    │   │   ├── NewMemoPage.jsx
    │   │   └── ReadAndEditMemoPage.jsx
    │   └── User
    │       ├── ChangePwPage.jsx
    │       ├── LoginPage.jsx
    │       ├── SignupPage.jsx
    │       └── UserProfilePage.jsx
    ├── reportWebVitals.js
    ├── setupTests.js
    └── utils
        ├── CheckToken.js
        └── lazyUtil.js

 Frontend_App :  Open!
├── App.js
├── app.json
├── assets
│   ├── adaptive-icon.png
│   ├── favicon.png
│   ├── icon.png
│   └── splash.png
├── babel.config.js
├── eas.json
├── package-lock.json
└── package.json
 Backend :  Open!
└── src
    ├── main
    │   ├── generated
    │   ├── java
    │   │   └── com
    │   │       └── shj
    │   │           └── onlinememospringproject
    │   │               ├── OnlinememoSpringProjectApplication.java
    │   │               ├── config
    │   │               │   ├── JwtSecurityConfig.java
    │   │               │   ├── SwaggerConfig.java
    │   │               │   └── WebSecurityConfig.java
    │   │               ├── controller
    │   │               │   ├── AuthController.java
    │   │               │   ├── FriendshipController.java
    │   │               │   ├── MemoController.java
    │   │               │   ├── TestController.java
    │   │               │   └── UserController.java
    │   │               ├── domain
    │   │               │   ├── DefaultFriendshipEntity.java
    │   │               │   ├── DefaultMemoEntity.java
    │   │               │   ├── friendship
    │   │               │   │   ├── Friendship.java
    │   │               │   │   └── FriendshipJpaRepository.java
    │   │               │   ├── memo
    │   │               │   │   ├── Memo.java
    │   │               │   │   └── MemoJpaRepository.java
    │   │               │   ├── user
    │   │               │   │   ├── Authority.java
    │   │               │   │   ├── User.java
    │   │               │   │   └── UserJpaRepository.java
    │   │               │   └── userandmemo
    │   │               │       ├── UserAndMemo.java
    │   │               │       └── UserAndMemoJpaRepository.java
    │   │               ├── dto
    │   │               │   ├── friendship
    │   │               │   │   ├── FriendshipRequestDto.java
    │   │               │   │   ├── FriendshipResponseDto.java
    │   │               │   │   ├── FriendshipSendRequestDto.java
    │   │               │   │   ├── FriendshipSendResponseDto.java
    │   │               │   │   └── FriendshipUpdateRequestDto.java
    │   │               │   ├── memo
    │   │               │   │   ├── MemoInviteResponseDto.java
    │   │               │   │   ├── MemoResponseDto.java
    │   │               │   │   ├── MemoSaveRequestDto.java
    │   │               │   │   ├── MemoSaveResponseDto.java
    │   │               │   │   ├── MemoUpdateRequestDto.java
    │   │               │   │   └── MemoUpdateStarRequestDto.java
    │   │               │   ├── token
    │   │               │   │   └── TokenDto.java
    │   │               │   ├── user
    │   │               │   │   ├── UserIdResponseDto.java
    │   │               │   │   ├── UserLoginRequestDto.java
    │   │               │   │   ├── UserRequestDto.java
    │   │               │   │   ├── UserRequestDtos.java
    │   │               │   │   ├── UserResponseDto.java
    │   │               │   │   ├── UserSignupRequestDto.java
    │   │               │   │   ├── UserUpdateNameRequestDto.java
    │   │               │   │   └── UserUpdatePwRequestDto.java
    │   │               │   └── userandmemo
    │   │               │       ├── UserAndMemoRequestDto.java
    │   │               │       └── UserAndMemoResponseDto.java
    │   │               ├── jwt
    │   │               │   ├── JwtAccessDeniedHandler.java
    │   │               │   ├── JwtAuthenticationEntryPoint.java
    │   │               │   ├── JwtFilter.java
    │   │               │   └── TokenProvider.java
    │   │               ├── response
    │   │               │   ├── GlobalExceptionHandler.java
    │   │               │   ├── ResponseCode.java
    │   │               │   ├── ResponseData.java
    │   │               │   ├── exception
    │   │               │   │   ├── FriendshipBadRequestException.java
    │   │               │   │   ├── FriendshipDuplicateException.java
    │   │               │   │   ├── LoginIdDuplicateException.java
    │   │               │   │   ├── MemoSortBadRequestException.java
    │   │               │   │   ├── NoSuchFriendshipException.java
    │   │               │   │   ├── NoSuchMemoException.java
    │   │               │   │   ├── NoSuchUserException.java
    │   │               │   │   └── UserAndMemoDuplicateException.java
    │   │               │   └── responseitem
    │   │               │       ├── MessageItem.java
    │   │               │       └── StatusItem.java
    │   │               ├── service
    │   │               │   ├── FriendshipService.java
    │   │               │   ├── MemoService.java
    │   │               │   ├── UserAndMemoService.java
    │   │               │   ├── UserService.java
    │   │               │   ├── auth
    │   │               │   │   ├── AuthService.java
    │   │               │   │   └── CustomUserDetailsService.java
    │   │               │   └── logic
    │   │               │       ├── FriendshipServiceLogic.java
    │   │               │       ├── MemoServiceLogic.java
    │   │               │       ├── UserAndMemoServiceLogic.java
    │   │               │       └── UserServiceLogic.java
    │   │               └── util
    │   │                   └── SecurityUtil.java
    │   └── resources
    │       ├── application-jwt.properties
    │       ├── application-mysql.properties
    │       ├── application.properties
    │       ├── logback-spring.xml
    │       ├── static
    │       └── templates
    └── test
        └── java
            └── com
                └── shj
                    └── onlinememospringproject
                        ├── OnlinememoSpringProjectApplicationTests.java
                        └── service
                            ├── MemoServiceTest.java
                            ├── UserAndMemoServiceTest.java
                            └── UserServiceTest.java

👨‍👩‍👧‍👧 Team (Full Stack)

사현진
Frontend & Backend Developer

Popular repositories Loading

  1. .github .github Public

    OnlineMemo - readmeFile / md

  2. backend backend Public

    OnlineMemo - backend / Spring

    Java

  3. frontend-app frontend-app Public

    OnlineMemo - frontend_app / React Native

    JavaScript

  4. frontend-web frontend-web Public

    OnlineMemo - frontend_web / React

    JavaScript

Repositories

Showing 4 of 4 repositories
  • frontend-web Public

    OnlineMemo - frontend_web / React

    OnlineMemo/frontend-web’s past year of commit activity
    JavaScript 0 0 0 0 Updated Oct 3, 2024
  • backend Public

    OnlineMemo - backend / Spring

    OnlineMemo/backend’s past year of commit activity
    Java 0 0 0 0 Updated Oct 3, 2024
  • frontend-app Public

    OnlineMemo - frontend_app / React Native

    OnlineMemo/frontend-app’s past year of commit activity
    JavaScript 0 0 0 0 Updated Aug 18, 2024
  • .github Public

    OnlineMemo - readmeFile / md

    OnlineMemo/.github’s past year of commit activity
    0 0 0 0 Updated Aug 16, 2024

Top languages

Loading…

Most used topics

Loading…