스터디를 위한 기본기능 제공 서비스 : 스터디커넥트(StudyConnect)

---

목차

목차

1. StudyConnect 소개
2. 팀원 소개
3. 개발 기간
4. 기술 스택
5. 서비스 화면면
6. 폴더 구조
7. 핵심 코드

1.📱 StudyConnect소개

스터디를 원활하게 진행하기 위해서는 인원, 출석, 과제, 벌금 등 관리해야 할 것들이 많습니다.
notion 등과 같은 외부 프로그램을 사용하기 위해서는, 템플릿이 직접만들거나 구입하여 사용해야 합니다.
좀더 간단하고 쉽게, 무료로 스터디를 관리할 수 있도록 만들어진 서비스입니다.

스터디를 만들수 있습니다.
스터디 내에서는 인원 추가, 검색 및 메모가 가능합니다.
이외에도 일정 및 출석 관리, 과제 및 과제 제출 관리, 벌금 관리, 카카오톡 메세지 전송을 할 수 있습니다.

2.🤼 팀원 소개

프론트엔드 및 백엔드
주상후

주요 기능

메인 페이지

• 스터디 추가•삭제 기능

스터디 페이지

• 회원 정보(출석률, 과제제출률), 일정 요약 페이지

회원 페이지

• 스터디 회원 추가
• 검색 기능
• 회원 메모 기능

일정, 출석 페이지

• 스터디 일정 추가 기능
• 스터디 일정 삭제 기능
• 스터디 일정 수정 기능
• 일정별 회원 출석 체크 기능

과제, 제출 페이지

• 스터디 과제 추가 기능
• 스터디 과제 삭제 기능
• 스터디 과제 수정 기능
• 과제별 회원 제출 체크 기능

메시지 페이지

• 스터디 회원에게 메세지 작성 기능(카카오톡 전송)

벌금 페이지

• 벌금 추가 기능
• 벌금 삭제 기능
• 벌금 수정 기능
• 벌금 제출 체크 기능

3.📆 개발 기간

2023.10.10 ~ 2023.10.31 (총 22일)

4.⚙️ 기술 스택

기술 스택

Front-End
Back-End
디자인
IDE

5.🔧 서비스 화면

메인페이지

스터디 페이지

회원 페이지

메시지 페이지

일정, 출석 페이지

과제 페이지

벌금 페이지

각 페이지 데이터 추가, 삭제, 수정, 검색 모달

6.📜 폴더 구조

Front-End

client/src
├─Component
│  ├─Assignment
│  │  ├─AssignmentTable
│  │  ├─Content
│  │  └─SubmitTable
│  ├─Fine
│  │  └─FineTable
│  ├─Main
│  │  ├─Statistics
│  │  ├─UsersSummary
│  │  └─UsersSummaryTable
│  ├─Message
│  │  └─MessageTable
│  ├─Modal
│  │  ├─ActiveModalButtonWrapper
│  │  ├─AssignmentModal
│  │  ├─FineModal
│  │  ├─MessageModal
│  │  ├─ModalInputItem
│  │  ├─ModalWrapper
│  │  ├─ScheduleModal
│  │  ├─StudyModal
│  │  └─UserModal
│  ├─Navigation
│  │  ├─MainNavigation
│  │  └─SubNavigation
│  ├─RouteComponent
│  │  └─Router
│  ├─Schedule
│  │  ├─AttendanceTable
│  │  ├─Content
│  │  └─ScheduleTable
│  ├─Table
│  ├─User
│  │  ├─Summary
│  │  ├─UserAssignmentTable
│  │  ├─UserAttendanceTable
│  │  └─UsersTable
│  └─Wrapper
├─store
│  └─hooks
└─utils

Back-End

server/src
├─config
├─controll
├─model
├─router
├─server
└─swagger

7.⭐️ 핵심 코드

Front-End

리렌더링 최적화

불필요한 리렌더링을 막기 위해 memo훅을 사용하였으며, 비교함수를 custom하여 사용

const isEqual = (prev: Readonly<{ submit: Submit }>, next: Readonly<{ submit: Submit }>): boolean => {
    return prev.submit.isSubmitted === next.submit.isSubmitted
}

export default memo(function SubmitTableItem({ submit }: { submit: Submit }) {
  ...
}, isEqual)

Back-End

MVC 모델 적용

비지니스 로직과 UI로직을 분리하여 유지보수를 쉽게 할 수 있음